@toptal/picasso-rich-text-editor 12.0.7 → 13.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist-package/src/RichTextEditorButton/RichTextEditorButton.d.ts.map +1 -1
  2. package/dist-package/src/RichTextEditorButton/RichTextEditorButton.js +2 -14
  3. package/dist-package/src/RichTextEditorButton/RichTextEditorButton.js.map +1 -1
  4. package/package.json +22 -20
  5. package/src/RichTextEditorButton/RichTextEditorButton.tsx +4 -19
  6. package/dist-package/src/RichTextEditorButton/styles.d.ts +0 -4
  7. package/dist-package/src/RichTextEditorButton/styles.d.ts.map +0 -1
  8. package/dist-package/src/RichTextEditorButton/styles.js +0 -16
  9. package/dist-package/src/RichTextEditorButton/styles.js.map +0 -1
  10. package/src/RichTextEditorButton/styles.ts +0 -21
package/dist-package/src/RichTextEditorButton/RichTextEditorButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RichTextEditorButton.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditorButton/RichTextEditorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,aAAK,KAAK,GAAG,SAAS,GAAG;IACvB,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,YAAY,CAAA;IAClB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzD,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAUD,QAAA,MAAM,oBAAoB;YAAW,KAAK;;;;;;;CAqBzC,CAAA;AAUD,eAAe,oBAAoB,CAAA"}
1
+ {"version":3,"file":"RichTextEditorButton.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditorButton/RichTextEditorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,aAAK,KAAK,GAAG,SAAS,GAAG;IACvB,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,YAAY,CAAA;IAClB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzD,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,oBAAoB;YAAW,KAAK;;;;;;;CAkBzC,CAAA;AAUD,eAAe,oBAAoB,CAAA"}
package/dist-package/src/RichTextEditorButton/RichTextEditorButton.js CHANGED
@@ -10,23 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import React from 'react';
13
- import cx from 'classnames';
14
- import { makeStyles } from '@material-ui/core';
13
+ import { twMerge } from 'tailwind-merge';
15
14
  import { ButtonCircular } from '@toptal/picasso-button';
16
- import styles from './styles';
17
- // Using { index: 10 } to inject CSS generated classes after the button's classes
18
- // in order to prevent Button's styles to override custom TextEditorButton styles
19
- // Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
20
- const useStyles = makeStyles(styles, {
21
- name: 'TextEditorButton',
22
- index: 10,
23
- });
24
15
  const RichTextEditorButton = (props) => {
25
16
  const { icon, onClick, active, className, style, disabled } = props, rest = __rest(props, ["icon", "onClick", "active", "className", "style", "disabled"]);
26
- const classes = useStyles(props);
27
- return (React.createElement(ButtonCircular, Object.assign({ variant: 'flat', onClick: onClick, icon: icon, style: style, className: cx(classes.button, {
28
- [classes.activeButton]: active,
29
- }, className), disabled: disabled }, rest)));
17
+ return (React.createElement(ButtonCircular, Object.assign({ variant: 'flat', onClick: onClick, icon: icon, style: style, className: twMerge('rounded-sm [&+&]:ml-2', active && 'bg-graphite-700 [&:not(:hover)_svg]:fill-white', className), disabled: disabled }, rest)));
30
18
  };
31
19
  RichTextEditorButton.defaultProps = {
32
20
  active: false,
package/dist-package/src/RichTextEditorButton/RichTextEditorButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RichTextEditorButton.js","sourceRoot":"","sources":["../../../src/RichTextEditorButton/RichTextEditorButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAU7B,iFAAiF;AACjF,iFAAiF;AACjF,uEAAuE;AACvE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,kBAAkB;IACxB,KAAK,EAAE,EAAE;CACV,CAAC,CAAA;AAEF,MAAM,oBAAoB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC5C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAtE,+DAA8D,CAAQ,CAAA;IAC5E,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,OAAO,CACL,oBAAC,cAAc,kBACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,MAAM,EACd;YACE,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,MAAM;SAC/B,EACD,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,IACd,IAAI,EACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,oBAAoB,CAAC,YAAY,GAAG;IAClC,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CAClB,CAAA;AAED,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAEzD,eAAe,oBAAoB,CAAA"}
1
+ {"version":3,"file":"RichTextEditorButton.js","sourceRoot":"","sources":["../../../src/RichTextEditorButton/RichTextEditorButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAUvD,MAAM,oBAAoB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC5C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAtE,+DAA8D,CAAQ,CAAA;IAE5E,OAAO,CACL,oBAAC,cAAc,kBACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,OAAO,CAChB,uBAAuB,EACvB,MAAM,IAAI,gDAAgD,EAC1D,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,IACd,IAAI,EACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,oBAAoB,CAAC,YAAY,GAAG;IAClC,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CAClB,CAAA;AAED,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAEzD,eAAe,oBAAoB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-rich-text-editor",
3
- "version": "12.0.7",
3
+ "version": "13.0.0",
4
4
  "description": "Picasso rich text editor",
5
5
  "author": "Toptal",
6
6
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-rich-text-editor#readme",
@@ -29,31 +29,32 @@
29
29
  "@lexical/text": "0.11.2",
30
30
  "@lexical/utils": "0.11.2",
31
31
  "@material-ui/core": "4.12.4",
32
- "@toptal/picasso-shared": "^14.0.0",
32
+ "@toptal/picasso-shared": "^15.0.0",
33
33
  "react": ">=16.12.0 < 19.0.0",
34
34
  "react-dom": ">=16.12.0 < 19.0.0",
35
- "typescript": "~4.7.0"
35
+ "typescript": "~4.7.0",
36
+ "@toptal/picasso-tailwind": "^2.5.0"
36
37
  },
37
38
  "dependencies": {
38
39
  "@emoji-mart/data": "^1.2.1",
39
40
  "@emoji-mart/react": "^1.1.1",
40
41
  "@lexical/html": "0.11.2",
41
42
  "@lexical/react": "0.11.2",
42
- "@toptal/picasso-container": "1.0.2",
43
- "@toptal/picasso-button": "1.0.13",
44
- "@toptal/picasso-icons": "1.1.0",
45
- "@toptal/picasso-file-input": "1.0.14",
46
- "@toptal/picasso-image": "1.0.2",
47
- "@toptal/picasso-outlined-input": "1.0.13",
48
- "@toptal/picasso-list": "2.0.1",
49
- "@toptal/picasso-link": "1.0.2",
50
- "@toptal/picasso-select": "1.0.14",
51
- "@toptal/picasso-input-adornment": "1.0.3",
52
- "@toptal/picasso-typography": "2.0.0",
53
- "@toptal/picasso-modal": "1.0.13",
54
- "@toptal/picasso-form": "3.0.0",
55
- "@toptal/picasso-input": "1.0.13",
56
- "@toptal/picasso-utils": "1.0.2",
43
+ "@toptal/picasso-container": "1.0.3",
44
+ "@toptal/picasso-button": "2.0.0",
45
+ "@toptal/picasso-icons": "1.1.1",
46
+ "@toptal/picasso-file-input": "1.0.15",
47
+ "@toptal/picasso-image": "1.0.3",
48
+ "@toptal/picasso-outlined-input": "1.0.14",
49
+ "@toptal/picasso-list": "2.0.2",
50
+ "@toptal/picasso-link": "1.0.3",
51
+ "@toptal/picasso-select": "1.0.15",
52
+ "@toptal/picasso-input-adornment": "1.0.4",
53
+ "@toptal/picasso-typography": "2.0.1",
54
+ "@toptal/picasso-modal": "2.0.0",
55
+ "@toptal/picasso-form": "3.0.1",
56
+ "@toptal/picasso-input": "1.0.14",
57
+ "@toptal/picasso-utils": "1.0.3",
57
58
  "classnames": "^2.5.1",
58
59
  "emoji-mart": "^5.5.2",
59
60
  "hast-to-hyperscript": "^9.0.1",
@@ -61,12 +62,13 @@
61
62
  "hast-util-sanitize": "^3.0.2",
62
63
  "hast-util-to-dom": "^3.1.1",
63
64
  "hast-util-to-html": "^7.1.3",
64
- "lexical": "0.11.2"
65
+ "lexical": "0.11.2",
66
+ "tailwind-merge": "^2.2.2"
65
67
  },
66
68
  "devDependencies": {
67
69
  "@material-ui/core": "4.12.4",
68
70
  "@testing-library/react-hooks": "^8.0.1",
69
- "@toptal/picasso-test-utils": "1.1.0",
71
+ "@toptal/picasso-test-utils": "1.1.1",
70
72
  "@types/classnames": "^2.3.1",
71
73
  "storybook-readme": "^5.0.9"
72
74
  },
package/src/RichTextEditorButton/RichTextEditorButton.tsx CHANGED
@@ -1,13 +1,9 @@
1
1
  import type { ReactElement } from 'react'
2
2
  import React from 'react'
3
- import cx from 'classnames'
4
- import type { Theme } from '@material-ui/core'
5
- import { makeStyles } from '@material-ui/core'
3
+ import { twMerge } from 'tailwind-merge'
6
4
  import type { BaseProps } from '@toptal/picasso-shared'
7
5
  import { ButtonCircular } from '@toptal/picasso-button'
8
6
 
9
- import styles from './styles'
10
-
11
7
  type Props = BaseProps & {
12
8
  active: boolean
13
9
  disabled: boolean
@@ -16,17 +12,8 @@ type Props = BaseProps & {
16
12
  id?: string
17
13
  }
18
14
 
19
- // Using { index: 10 } to inject CSS generated classes after the button's classes
20
- // in order to prevent Button's styles to override custom TextEditorButton styles
21
- // Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
22
- const useStyles = makeStyles<Theme>(styles, {
23
- name: 'TextEditorButton',
24
- index: 10,
25
- })
26
-
27
15
  const RichTextEditorButton = (props: Props) => {
28
16
  const { icon, onClick, active, className, style, disabled, ...rest } = props
29
- const classes = useStyles(props)
30
17
 
31
18
  return (
32
19
  <ButtonCircular
@@ -34,11 +21,9 @@ const RichTextEditorButton = (props: Props) => {
34
21
  onClick={onClick}
35
22
  icon={icon}
36
23
  style={style}
37
- className={cx(
38
- classes.button,
39
- {
40
- [classes.activeButton]: active,
41
- },
24
+ className={twMerge(
25
+ 'rounded-sm [&+&]:ml-2',
26
+ active && 'bg-graphite-700 [&:not(:hover)_svg]:fill-white',
42
27
  className
43
28
  )}
44
29
  disabled={disabled}
package/dist-package/src/RichTextEditorButton/styles.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette, sizes }: Theme) => import("@material-ui/styles").StyleRules<{}, "button" | "activeButton">;
3
- export default _default;
4
- //# sourceMappingURL=styles.d.ts.map
package/dist-package/src/RichTextEditorButton/styles.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditorButton/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;6CAGjB,KAAK;AAAzC,wBAiBI"}
package/dist-package/src/RichTextEditorButton/styles.js DELETED
@@ -1,16 +0,0 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- export default ({ palette, sizes }) => createStyles({
3
- button: {
4
- borderRadius: sizes.borderRadius.small,
5
- '&+&': {
6
- marginLeft: '0.5em',
7
- },
8
- },
9
- activeButton: {
10
- backgroundColor: palette.grey.dark,
11
- '&:not(:hover) svg': {
12
- fill: palette.common.white,
13
- },
14
- },
15
- });
16
- //# sourceMappingURL=styles.js.map
package/dist-package/src/RichTextEditorButton/styles.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/RichTextEditorButton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAS,EAAE,EAAE,CAC3C,YAAY,CAAC;IACX,MAAM,EAAE;QACN,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK;QAEtC,KAAK,EAAE;YACL,UAAU,EAAE,OAAO;SACpB;KACF;IAED,YAAY,EAAE;QACZ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QAElC,mBAAmB,EAAE;YACnB,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC3B;KACF;CACF,CAAC,CAAA"}
package/src/RichTextEditorButton/styles.ts DELETED
@@ -1,21 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles'
2
- import { createStyles } from '@material-ui/core/styles'
3
-
4
- export default ({ palette, sizes }: Theme) =>
5
- createStyles({
6
- button: {
7
- borderRadius: sizes.borderRadius.small,
8
-
9
- '&+&': {
10
- marginLeft: '0.5em',
11
- },
12
- },
13
-
14
- activeButton: {
15
- backgroundColor: palette.grey.dark,
16
-
17
- '&:not(:hover) svg': {
18
- fill: palette.common.white,
19
- },
20
- },
21
- })