@crystallize/design-system 1.5.0 → 1.6.1

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 (43) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/index.css +85 -142
  3. package/dist/index.d.ts +7 -3
  4. package/dist/index.js +1512 -4409
  5. package/dist/index.mjs +1376 -4291
  6. package/package.json +19 -19
  7. package/src/iconography/document.tsx +19 -0
  8. package/src/iconography/folder.tsx +30 -0
  9. package/src/iconography/index.ts +8 -2
  10. package/src/iconography/product.tsx +42 -0
  11. package/src/rich-text-editor/model/crystallize-to-lexical.ts +1 -1
  12. package/src/rich-text-editor/model/lexical-to-crystallize.ts +2 -2
  13. package/src/rich-text-editor/model/to-text.test.ts +97 -0
  14. package/src/rich-text-editor/model/to-text.ts +47 -0
  15. package/src/rich-text-editor/nodes/BaseNodes.ts +0 -3
  16. package/src/rich-text-editor/plugins/ActionsPlugin/index.tsx +1 -1
  17. package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx +1 -1
  18. package/src/rich-text-editor/plugins/ComponentPickerPlugin/index.tsx +5 -5
  19. package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.tsx +29 -50
  20. package/src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx +34 -23
  21. package/src/rich-text-editor/plugins/ToolbarPlugin/index.tsx +8 -8
  22. package/src/rich-text-editor/rich-text-editor.css +3 -3
  23. package/src/rich-text-editor/rich-text-editor.stories.tsx +9 -1
  24. package/src/rich-text-editor/rich-text-editor.tsx +30 -24
  25. package/src/rich-text-editor/tests/rich-text-editor-basic-rendering.test.tsx +1 -1
  26. package/src/rich-text-editor/tests/rich-text-editor-model-basics.test.tsx +1 -1
  27. package/src/rich-text-editor/tests/rich-text-editor-model-conversions.test.tsx +1 -1
  28. package/src/rich-text-editor/tests/rich-text-editor-text-formats.test.tsx +1 -1
  29. package/src/rich-text-editor/themes/{PlaygroundEditorTheme.css → CrystallizeRTEditorTheme.css} +81 -85
  30. package/src/rich-text-editor/themes/CrystallizeRTEditorTheme.ts +113 -0
  31. package/dist/draggable-block-menu-KKHDNKJA.svg +0 -1
  32. package/src/rich-text-editor/appSettings.ts +0 -28
  33. package/src/rich-text-editor/context/SettingsContext.tsx +0 -71
  34. package/src/rich-text-editor/context/SharedAutocompleteContext.tsx +0 -60
  35. package/src/rich-text-editor/nodes/AutocompleteNode.tsx +0 -96
  36. package/src/rich-text-editor/plugins/AutocompletePlugin/index.tsx +0 -2536
  37. package/src/rich-text-editor/themes/PlaygroundEditorTheme.ts +0 -113
  38. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/code.ts +0 -0
  39. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/headings.ts +0 -0
  40. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/index.ts +0 -0
  41. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/link.ts +0 -0
  42. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/table.ts +0 -0
  43. /package/src/rich-text-editor/{types.ts → types/types.ts} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystallize/design-system",
3
- "version": "1.5.0",
3
+ "version": "1.6.1",
4
4
  "types": "./dist/index.d.ts",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -20,23 +20,23 @@
20
20
  }
21
21
  },
22
22
  "dependencies": {
23
- "@lexical/clipboard": "0.8.1",
24
- "@lexical/code": "0.8.1",
25
- "@lexical/file": "0.8.1",
26
- "@lexical/hashtag": "0.8.1",
27
- "@lexical/html": "0.8.1",
28
- "@lexical/link": "0.8.1",
29
- "@lexical/list": "0.8.1",
30
- "@lexical/mark": "0.8.1",
31
- "@lexical/markdown": "0.8.1",
32
- "@lexical/overflow": "0.8.1",
33
- "@lexical/react": "0.8.1",
34
- "@lexical/rich-text": "0.8.1",
35
- "@lexical/selection": "0.8.1",
36
- "@lexical/table": "0.8.1",
37
- "@lexical/text": "0.8.1",
38
- "@lexical/utils": "0.8.1",
39
- "@lexical/yjs": "0.8.1",
23
+ "@lexical/clipboard": "0.9.0",
24
+ "@lexical/code": "0.9.0",
25
+ "@lexical/file": "0.9.0",
26
+ "@lexical/hashtag": "0.9.0",
27
+ "@lexical/html": "0.9.0",
28
+ "@lexical/link": "0.9.0",
29
+ "@lexical/list": "0.9.0",
30
+ "@lexical/mark": "0.9.0",
31
+ "@lexical/markdown": "0.9.0",
32
+ "@lexical/overflow": "0.9.0",
33
+ "@lexical/react": "0.9.0",
34
+ "@lexical/rich-text": "0.9.0",
35
+ "@lexical/selection": "0.9.0",
36
+ "@lexical/table": "0.9.0",
37
+ "@lexical/text": "0.9.0",
38
+ "@lexical/utils": "0.9.0",
39
+ "@lexical/yjs": "0.9.0",
40
40
  "@radix-ui/react-checkbox": "1.0.1",
41
41
  "@radix-ui/react-dialog": "1.0.2",
42
42
  "@radix-ui/react-dropdown-menu": "2.0.1",
@@ -45,7 +45,7 @@
45
45
  "@radix-ui/react-select": "1.1.2",
46
46
  "@radix-ui/react-slider": "^1.1.0",
47
47
  "class-variance-authority": "^0.4.0",
48
- "lexical": "0.8.1",
48
+ "lexical": "0.9.0",
49
49
  "prettier": "2.8.4",
50
50
  "use-debounce": "8.0.4"
51
51
  },
package/src/iconography/document.tsx ADDED
@@ -0,0 +1,19 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type DocumentProps = SVGProps<SVGSVGElement>;
4
+
5
+ type DocumentRef = SVGSVGElement;
6
+
7
+ export const Document = forwardRef<DocumentRef, DocumentProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
10
+ <path d="m27.127 10.355.175.184V31.34l-20.745-.064V2.652h13.282l3.166 3.346 4.357 4.357h-.235Z" fill="#bff6f8" />
11
+ <path
12
+ d="M27.823 15.88a132.896 132.896 0 0 0-.073-3.047c-.02-.5-.041-1-.065-1.5 0-.25-.019-.5-.054-.747l-.006-.019a.354.354 0 0 0-.087-.27 1.343 1.343 0 0 0-.13-.232 11.003 11.003 0 0 0-.829-.925c-.323-.354-.656-.7-.993-1.039-.662-.67-1.338-1.327-1.983-2.015-.476-.506-.954-1.008-1.433-1.507-.457-.439-.89-.9-1.3-1.383a3.636 3.636 0 0 0-.625-.678 1.162 1.162 0 0 0-.358-.186 2.48 2.48 0 0 0-.76-.06c-.314 0-.63-.007-.946-.007H6.56a.393.393 0 0 0-.387.387c0 9.543-.003 19.085-.009 28.627a.4.4 0 0 0 .4.395c6.913.029 13.827.05 20.742.063a.4.4 0 0 0 .4-.4c0-2.572.046-5.146.086-7.72.04-2.572.065-5.158.032-7.738ZM20.516 3.998c.84.886 1.677 1.776 2.526 2.652 1.045 1.077 2.04 2.264 3.12 3.328-1.907-.173-3.912-.038-5.806-.02 0-2.04.014-4.082 0-6.122.055.052.111.106.16.162Zm6.093 26.943a34.23 34.23 0 0 1-5.133-.017l-7.283-.026c-1.966-.008-3.932-.012-5.897-.012-.439.048-.88.066-1.322.051a2.234 2.234 0 0 0-.023-.5 33.236 33.236 0 0 1-.005-4.21c-.004-4.77-.004-9.541 0-14.313V4.757c0-.316-.14-1.806-.274-1.718.265-.04.534-.04.8 0H19.57c-.032 2.44-.007 4.88-.006 7.32a.4.4 0 0 0 .4.399c2.308.121 4.622.088 6.925-.1l.068.061c-.235 4.204-.044 8.472-.046 12.683 0 2.069-.2 4.258 0 6.318.123 1.338.708 1.066-.303 1.218v.003Z"
13
+ fill="#528693"
14
+ />
15
+ </svg>
16
+ );
17
+ });
18
+
19
+ Document.displayName = 'DocumentIcon';
package/src/iconography/folder.tsx ADDED
@@ -0,0 +1,30 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type FolderProps = SVGProps<SVGSVGElement>;
4
+
5
+ type FolderRef = SVGSVGElement;
6
+
7
+ export const Folder = forwardRef<FolderRef, FolderProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
10
+ <path
11
+ d="M29.451 12.006c0-4.26-1.3-3.498-3.767-3.498H14.26l-3.148-3.026H3.978c-2.285 0-2.199 1.236-2.199 3.829v16.218c0 2.037.2 3.037 2.174 3.037"
12
+ fill="#bff6f8"
13
+ />
14
+ <path
15
+ d="M30.31 24.858a53.13 53.13 0 0 0 1.844-8.704c.178-1.544.589-4.137-2.56-4.26-3.15-.124-17.992-.063-20.52-.063-2.528 0-3.149 1.73-3.399 3.768s-2.16 12.968-2.16 12.968 20.658 0 22.695-.062c2.037-.062 3.36-1.34 4.1-3.647Z"
16
+ fill="#bff6f8"
17
+ />
18
+ <path
19
+ d="M3.516 29.141a.581.581 0 0 1-.3-.1A1.978 1.978 0 0 1 1.5 27.855a5.648 5.648 0 0 1-.3-2.362V12.451c0-.5-.01-1.004-.02-1.511-.048-1.2-.027-2.401.06-3.598.211-2.26 1.805-2.444 3.559-2.444h3.724a17.764 17.764 0 0 1 2.477 0c.342.055.652.233.871.5l2.046 1.97c.062.058.133.137.208.223.106.13.224.248.353.354a.488.488 0 0 1 .162-.022h9.972a15.821 15.821 0 0 1 3.12.121 2.89 2.89 0 0 1 2.188 3.282c.65.05 1.276.273 1.811.647 1.413 1.065 1.159 2.959.955 4.48l-.03.216a46.22 46.22 0 0 1-1.835 8.253 5.346 5.346 0 0 1-2.951 3.819 6.528 6.528 0 0 1-2.133.357s-.212 0-.318-.008c-4.376.052-8.636.06-12.224.06l-9.678-.009Zm4.207-1.15c4.092 0 8.183-.005 12.274-.016h.38c1.588 0 3.176-.008 4.762-.024a9.645 9.645 0 0 0 1.676-.08c1.647-.311 2.44-1.778 2.999-3.172a48.96 48.96 0 0 0 1.8-8.72l.021-.185c.163-.77.12-1.57-.125-2.317-.413-.9-1.4-1-2.464-1.026-2.966-.072-6.159-.107-9.76-.107-3.368 0-6.735.03-10.094.066a2.44 2.44 0 0 0-2.556 1.547 9.554 9.554 0 0 0-.45 2.212 184.339 184.339 0 0 1-.617 3.822l-.125.742c-.407 2.42-.823 4.84-1.246 7.259h3.525Zm-3.66-21.93c-.786 0-1.315.114-1.531.682a5.51 5.51 0 0 0-.176 2.069c.008.22.016.435.016.639v15.547c0 .434-.006.868.016 1.3.044.825.239 1.273.679 1.51a820.157 820.157 0 0 0 1.656-9.732c.067-.413.117-.845.17-1.284.079-1.175.329-2.332.741-3.434.812-1.843 2.481-2.1 4.163-2.105h2.7c2.354-.006 4.709-.01 7.064-.011h1.784c1.975 0 3.951.007 5.927.032l1.386-.01h.286l-.006-.033c-.131-.769-.268-1.565-.9-1.9a3.324 3.324 0 0 0-1.498-.268c-.2 0-.4.007-.594.013-.178.005-.35.01-.514.012H16.504c-.182 0-.4.017-.628.034-.274.02-.57.043-.853.043-.4.027-.8-.055-1.155-.24A9.295 9.295 0 0 1 12.55 7.67a28.33 28.33 0 0 0-.533-.492 13.702 13.702 0 0 1-1.09-1.067l-.04-.044-6.825-.006Z"
20
+ fill="#528693"
21
+ />
22
+ <path
23
+ d="M31.61 12.13a3.713 3.713 0 0 0-1.91-.63 2.729 2.729 0 0 0-2-3.259 15.839 15.839 0 0 0-3.092-.12h-8.99c-.321 0-.644.005-.966 0-.262 0-.03.116-.193.042-.237-.107-.5-.478-.68-.654l-1.93-1.854c-.3-.289-.458-.5-.864-.56a17.461 17.461 0 0 0-2.463 0H4.798c-1.8 0-3.17.22-3.362 2.264-.157 1.674-.04 3.413-.04 5.097v12.64c-.089.903.008 1.814.285 2.678a1.899 1.899 0 0 0 1.64 1.1c.058.038.124.06.192.063 7.304 0 14.61.034 21.912-.053a6.325 6.325 0 0 0 2.367-.334 5.186 5.186 0 0 0 2.83-3.61.357.357 0 0 0 .007-.085 45.972 45.972 0 0 0 1.827-8.217c.198-1.484.54-3.463-.846-4.508ZM10.936 5.84c-.045-.023-.054-.045 0 0ZM2.187 26.31c-.031-.581-.016-1.167-.016-1.748V9.451c-.1-.93-.042-1.87.174-2.78.35-.922 1.416-.805 2.237-.805H10.962c.04.035.077.073.112.113.49.558 1.088 1.047 1.624 1.56.383.446.808.853 1.27 1.216.607.375 1.825.133 2.531.133 2.976 0 5.952.007 8.928 0a5.983 5.983 0 0 1 2.699.268c.8.423.9 1.446 1.055 2.314-.661-.023-1.328.01-1.914 0-1.975-.025-3.95-.03-5.925-.032-3.85 0-7.696.008-11.548.015-1.689 0-3.23.283-3.98 1.986a19.563 19.563 0 0 0-.9 4.67 793.307 793.307 0 0 1-1.695 9.978c-.715-.24-.982-.809-1.032-1.778ZM31.808 16a50.136 50.136 0 0 1-1.78 8.727.347.347 0 0 0-.03.045c-.599 1.493-1.444 2.973-3.155 3.299a9.703 9.703 0 0 1-1.699.082c-1.714.017-3.43.02-5.144.025-4.432.013-8.864.019-13.294.017H3.959c.436-2.497.865-4.996 1.289-7.497.253-1.514.517-3.025.731-4.544a9.83 9.83 0 0 1 .464-2.268 2.66 2.66 0 0 1 2.74-1.674c6.616-.07 13.25-.12 19.864.041 1.013.025 2.164.1 2.641 1.143.269.842.31 1.74.12 2.604Z"
24
+ fill="#528693"
25
+ />
26
+ </svg>
27
+ );
28
+ });
29
+
30
+ Folder.displayName = 'FolderIcon';
package/src/iconography/index.ts CHANGED
@@ -10,8 +10,10 @@ import { CloudWithKeyHole } from './cloud-with-key-hole';
10
10
  import { Copy } from './copy';
11
11
  import { Crystal } from './crystal';
12
12
  import { Customers } from './customers';
13
+ import { Document } from './document';
13
14
  import { Edit } from './edit';
14
15
  import { Error } from './error';
16
+ import { Folder } from './folder';
15
17
  import { Frontends } from './frontends';
16
18
  import { Fulfilment } from './fulfilment';
17
19
  import { Glasses } from './glasses';
@@ -31,6 +33,7 @@ import { People } from './people';
31
33
  import { Percentage } from './percentage';
32
34
  import { PlansAndPricing } from './plans-and-pricing';
33
35
  import { PriceTag } from './price-tag';
36
+ import { Product } from './product';
34
37
  import { Rocket } from './rocket';
35
38
  import { Shapes } from './shapes';
36
39
  import { StockLocation } from './stock-location';
@@ -58,8 +61,10 @@ export const Icon = {
58
61
  CloudWithKeyHole,
59
62
  Crystal,
60
63
  Customers,
64
+ Document,
61
65
  Edit,
62
66
  Error,
67
+ Folder,
63
68
  Frontends,
64
69
  Fulfilment,
65
70
  Glasses,
@@ -79,15 +84,16 @@ export const Icon = {
79
84
  Percentage,
80
85
  PlansAndPricing,
81
86
  PriceTag,
87
+ Product,
82
88
  Rocket,
83
89
  Shapes,
84
90
  StockLocation,
91
+ SubscriptionContracts,
92
+ SubscriptionPlans,
85
93
  /**
86
94
  * @deprecated Use SubscriptionPlans icon instead
87
95
  */
88
96
  Subscription,
89
- SubscriptionContracts,
90
- SubscriptionPlans,
91
97
  Target,
92
98
  Topics,
93
99
  UsageMeter,
package/src/iconography/product.tsx ADDED
@@ -0,0 +1,42 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type ProductProps = SVGProps<SVGSVGElement>;
4
+
5
+ type ProductRef = SVGSVGElement;
6
+
7
+ export const Product = forwardRef<ProductRef, ProductProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
10
+ <path
11
+ d="M30.14 8.196a5.316 5.316 0 0 0-7.567-.609c-.02-.01-.02-.03-.03-.042a10.505 10.505 0 0 0-10.024-2.067 5.313 5.313 0 0 0-7.902-1.154c-2.887 2.382-2.561 6.759-.1 9.288a.346.346 0 0 0 .272.126 16.462 16.462 0 0 0 .368 11.271c2.392 5.448 8.68 6.728 14.063 5.698 6.559-1.25 9.373-6.717 8.496-12.951a13.94 13.94 0 0 0 2.109-1.628 6.065 6.065 0 0 0 .316-7.932ZM4.754 5.216a4.578 4.578 0 0 1 7.021.524 10.141 10.141 0 0 0-3.478 2.141 13.557 13.557 0 0 0-3.26 5.143c-2.014-2.078-2.445-5.627-.283-7.808Zm14.252 24.747c-5.397.976-11.565-.43-13.476-6.171-1.574-4.733-.631-11.041 2.767-14.766 3.399-3.725 9.817-4.45 13.694-.924.01.01.02.01.032.021a6.367 6.367 0 0 0 .7 8.91 5.19 5.19 0 0 0 4.533.872c.283 5.877-1.867 10.903-8.25 12.058Zm3.831-13.885a5.53 5.53 0 0 1 .357-7.996 4.552 4.552 0 0 1 6.969 1.542c2.183 4.27-3.339 10.473-7.326 6.454Z"
12
+ fill="#528693"
13
+ />
14
+ <path
15
+ d="M15.605 18.271c-.073.441-.2.872-.241 1.323-.036.419-.05.839-.042 1.26-.011.377-.62.482-.683.083a4.85 4.85 0 0 1 .43-2.899c.169-.301.578-.07.536.233ZM10.252 16.939c-.073.44-.2.882-.24 1.332-.036.416-.05.833-.044 1.25-.01.378-.618.493-.681.094-.16-.988-.01-2 .43-2.899.168-.313.578-.082.535.223Z"
16
+ fill="#528693"
17
+ />
18
+ <path
19
+ d="M30.215 8.138a5.198 5.198 0 0 0-4.088-1.95 5.63 5.63 0 0 0-3.538 1.26 10.142 10.142 0 0 0-6.856-2.53c-1.072.001-2.138.15-3.169.44a5.705 5.705 0 0 0-4.538-2.407A5.38 5.38 0 0 0 4.558 4.25a5.734 5.734 0 0 0-2.09 4.198 7.069 7.069 0 0 0 1.97 5.227c.056.07.133.119.22.14a16.514 16.514 0 0 0 .4 11.234c1.699 3.868 5.627 6.087 10.765 6.087 1.144 0 2.285-.11 3.408-.328 6.167-1.17 9.535-6.297 8.556-12.994.02-.021.12-.081.21-.141a10.2 10.2 0 0 0 1.889-1.47 6.152 6.152 0 0 0 .329-8.065ZM4.827 5.288A4.435 4.435 0 0 1 8.005 3.91a4.64 4.64 0 0 1 3.608 1.788 9.881 9.881 0 0 0-3.378 2.108 13.573 13.573 0 0 0-3.237 5.03c-1.79-1.948-2.36-5.339-.171-7.546Zm14.164 24.58c-1.026.186-2.066.28-3.108.279-5.168 0-8.906-2.33-10.256-6.387-1.649-4.947-.49-11.115 2.75-14.663a10.164 10.164 0 0 1 7.436-3.189 9.085 9.085 0 0 1 6.067 2.22 6.248 6.248 0 0 0-1.44 4.557 6.305 6.305 0 0 0 2.22 4.428 5.121 5.121 0 0 0 3.208 1.07 5.43 5.43 0 0 0 1.29-.15c.288 6.626-2.62 10.824-8.167 11.835Zm10.685-15.154a4.934 4.934 0 0 1-3.988 2.559 3.824 3.824 0 0 1-2.779-1.268 5.524 5.524 0 0 1-1.5-4.21 4.955 4.955 0 0 1 1.85-3.638 4.638 4.638 0 0 1 2.849-.99 4.416 4.416 0 0 1 3.968 2.5 5.199 5.199 0 0 1-.401 5.047h.001Z"
20
+ fill="#528693"
21
+ />
22
+ <path
23
+ d="M11.614 5.697a9.882 9.882 0 0 0-3.379 2.108 13.573 13.573 0 0 0-3.237 5.03c-1.79-1.948-2.36-5.338-.17-7.546a4.435 4.435 0 0 1 3.178-1.38 4.64 4.64 0 0 1 3.608 1.788ZM29.675 14.714a4.932 4.932 0 0 1-3.988 2.559 3.824 3.824 0 0 1-2.779-1.268 5.524 5.524 0 0 1-1.5-4.21 4.954 4.954 0 0 1 1.85-3.638 4.638 4.638 0 0 1 2.849-.99 4.416 4.416 0 0 1 3.968 2.5 5.197 5.197 0 0 1-.4 5.047Z"
24
+ fill="#bff6f8"
25
+ />
26
+ <path
27
+ d="M27.156 18.032a5.437 5.437 0 0 1-1.29.15 5.123 5.123 0 0 1-3.208-1.069 6.307 6.307 0 0 1-2.219-4.428 6.248 6.248 0 0 1 1.44-4.557 9.085 9.085 0 0 0-6.067-2.22 10.164 10.164 0 0 0-7.437 3.188c-3.238 3.548-4.398 9.716-2.749 14.663 1.35 4.058 5.088 6.387 10.256 6.387a17.358 17.358 0 0 0 3.11-.278c5.546-1.01 8.454-5.209 8.164-11.835ZM9.625 16.673a.37.37 0 0 1 .32-.21.415.415 0 0 1 .3.15.427.427 0 0 1 .11.34c-.03.17-.07.34-.1.51-.068.27-.114.543-.14.82a6.266 6.266 0 0 0-.04.859l-.01.38a.465.465 0 0 1-.48.44.391.391 0 0 1-.4-.33 4.953 4.953 0 0 1 .44-2.959Zm4.667 7.957a1.698 1.698 0 0 1-1.569.859c-.22.003-.44-.03-.65-.1-.39-.14-.72-.407-.94-.759a1.519 1.519 0 0 1-1.049.43 1.499 1.499 0 0 1-1.379-1.4.357.357 0 0 1 .1-.278.457.457 0 0 1 .34-.14.365.365 0 0 1 .39.32c.04.31.23.669.61.669.27 0 .45-.2.649-.4 0-.19-.02-.31-.02-.42a.4.4 0 0 1 .41-.4.388.388 0 0 1 .384.255.4.4 0 0 1 .026.155 1.207 1.207 0 0 0 .86 1.22c.085.019.172.029.26.03a1.97 1.97 0 0 0 1.099-.48.314.314 0 0 1 .18-.06.326.326 0 0 1 .26.15.4.4 0 0 1 .04.35Zm1.31-5.838a7.647 7.647 0 0 0-.14.81 6.477 6.477 0 0 0-.04.88v.37a.464.464 0 0 1-.48.439.384.384 0 0 1-.4-.34 4.898 4.898 0 0 1 .44-2.959.367.367 0 0 1 .31-.2.434.434 0 0 1 .41.49c-.03.18-.06.341-.1.51Z"
28
+ fill="#bff6f8"
29
+ />
30
+ <path
31
+ d="M15.702 18.282c-.03.18-.06.341-.1.51a7.673 7.673 0 0 0-.14.81 6.493 6.493 0 0 0-.04.88v.37a.464.464 0 0 1-.48.439.384.384 0 0 1-.4-.34 4.898 4.898 0 0 1 .44-2.959.367.367 0 0 1 .31-.2.434.434 0 0 1 .41.49ZM10.354 16.953c-.03.17-.07.34-.1.51a5.63 5.63 0 0 0-.14.82 6.25 6.25 0 0 0-.04.859l-.01.38a.465.465 0 0 1-.48.44.391.391 0 0 1-.4-.33 4.953 4.953 0 0 1 .44-2.959.37.37 0 0 1 .32-.21.415.415 0 0 1 .3.15.425.425 0 0 1 .11.34ZM14.293 24.63a1.699 1.699 0 0 1-1.569.859c-.22.003-.44-.03-.65-.1-.39-.14-.72-.407-.94-.759a1.519 1.519 0 0 1-1.049.43 1.5 1.5 0 0 1-1.38-1.4.357.357 0 0 1 .1-.278.457.457 0 0 1 .34-.14.365.365 0 0 1 .39.32c.04.31.23.669.61.669.27 0 .45-.2.65-.4 0-.19-.02-.31-.02-.42a.4.4 0 0 1 .41-.4.388.388 0 0 1 .384.255c.018.05.027.102.025.155a1.207 1.207 0 0 0 .86 1.22c.085.019.172.029.26.03a1.97 1.97 0 0 0 1.1-.48.316.316 0 0 1 .18-.06.327.327 0 0 1 .26.15.398.398 0 0 1 .04.35Z"
32
+ fill="#528693"
33
+ />
34
+ <path
35
+ d="M14.198 24.588a1.739 1.739 0 0 1-2.088.7c-.415-.15-.76-.45-.966-.84a1.351 1.351 0 0 1-1.144.5 1.372 1.372 0 0 1-1.2-1.3c-.02-.356.579-.44.63-.083a.784.784 0 0 0 .714.755c.346 0 .557-.262.777-.493a2.85 2.85 0 0 1-.052-.42.31.31 0 0 1 .619 0 1.31 1.31 0 0 0 .934 1.322 1.73 1.73 0 0 0 1.448-.461c.213-.14.412.133.328.32Z"
36
+ fill="#528693"
37
+ />
38
+ </svg>
39
+ );
40
+ });
41
+
42
+ Product.displayName = 'ProductIcon';
package/src/rich-text-editor/model/crystallize-to-lexical.ts CHANGED
@@ -13,7 +13,7 @@ import { $createHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleN
13
13
  import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
14
14
  import { $createTableCellNode, $createTableNode, $createTableRowNode } from '@lexical/table';
15
15
 
16
- import type { CrystallizeRichTextNode, CrystallizeRichText } from './crystallize-rich-text-types';
16
+ import type { CrystallizeRichTextNode, CrystallizeRichText } from '../types/crystallize-rich-text-types';
17
17
 
18
18
  export function composeInitialState({ richText }: { richText: CrystallizeRichText }) {
19
19
  return function setLexicalState() {
package/src/rich-text-editor/model/lexical-to-crystallize.ts CHANGED
@@ -19,8 +19,8 @@ import type {
19
19
  CrystallizeRichTextNode,
20
20
  CrystallizeRichText,
21
21
  CrystallizeRichTextCodeNodes,
22
- } from './crystallize-rich-text-types';
23
- import type { CrystallizeRichTextHeadingTypes } from './crystallize-rich-text-types/headings';
22
+ } from '../types/crystallize-rich-text-types';
23
+ import type { CrystallizeRichTextHeadingTypes } from '../types/crystallize-rich-text-types/headings';
24
24
 
25
25
  const headingMapper: Record<HeadingTagType, CrystallizeRichTextHeadingTypes> = {
26
26
  h1: 'heading1',
package/src/rich-text-editor/model/to-text.test.ts ADDED
@@ -0,0 +1,97 @@
1
+ /* eslint-disable no-console */
2
+
3
+ import { toText } from './to-text';
4
+
5
+ describe('RichTextEditor toText', () => {
6
+ it('can convert very simple models', async () => {
7
+ expect(
8
+ toText({
9
+ kind: 'block',
10
+ type: 'paragraph',
11
+ textContent: 'Hi there!',
12
+ }),
13
+ ).toBe('Hi there!');
14
+
15
+ expect(
16
+ toText({
17
+ kind: 'block',
18
+ type: 'paragraph',
19
+ textContent: 'Hi \nthere!',
20
+ }),
21
+ ).toBe('Hi \nthere!');
22
+ });
23
+
24
+ it('will trim the start and end new lines of the text', async () => {
25
+ expect(
26
+ toText({
27
+ kind: 'block',
28
+ type: 'paragraph',
29
+ textContent: '\nHi there!\n',
30
+ }),
31
+ ).toBe('Hi there!');
32
+ });
33
+
34
+ it('Will preserve line break nodes if told to', async () => {
35
+ expect(
36
+ toText(
37
+ {
38
+ kind: 'block',
39
+ type: 'paragraph',
40
+ children: [
41
+ {
42
+ kind: 'inline',
43
+ textContent: 'Hi ',
44
+ },
45
+ {
46
+ kind: 'inline',
47
+ type: 'line-break',
48
+ },
49
+ {
50
+ kind: 'inline',
51
+ textContent: 'there!',
52
+ },
53
+ ],
54
+ },
55
+ {
56
+ keepLineBreaks: true,
57
+ },
58
+ ),
59
+ ).toBe('Hi \nthere!');
60
+
61
+ expect(
62
+ toText({
63
+ kind: 'block',
64
+ type: 'paragraph',
65
+ textContent: 'Hi \nthere!',
66
+ }),
67
+ ).toBe('Hi \nthere!');
68
+ });
69
+
70
+ it('Will remove line break nodes if told to', async () => {
71
+ expect(
72
+ toText(
73
+ {
74
+ kind: 'block',
75
+ type: 'paragraph',
76
+ children: [
77
+ {
78
+ kind: 'inline',
79
+ textContent: 'Hi ',
80
+ },
81
+ {
82
+ kind: 'inline',
83
+ type: 'line-break',
84
+ },
85
+ {
86
+ kind: 'inline',
87
+ textContent: 'there!',
88
+ },
89
+ ],
90
+ },
91
+ {
92
+ keepLineBreaks: false,
93
+ },
94
+ ),
95
+ ).toBe('Hi there!');
96
+ });
97
+ });
package/src/rich-text-editor/model/to-text.ts ADDED
@@ -0,0 +1,47 @@
1
+ /**
2
+ * This is pretty much a direct copy from:
3
+ * https://github.com/CrystallizeAPI/crystallize-content-transformer/blob/main/src/converters/text/to-text.js
4
+ * I could not/did not want to import it since then original package is not in Typescript
5
+ */
6
+
7
+ import type { CrystallizeRichText, CrystallizeRichTextNode } from '../types/crystallize-rich-text-types';
8
+
9
+ // Remove first and last new lines
10
+ function trim(str: string) {
11
+ if (!str) {
12
+ return '';
13
+ }
14
+
15
+ return str.replace(/^(\r|\n)+/, '').replace(/(\r|\n)+$/, '');
16
+ }
17
+
18
+ export function toText(model: CrystallizeRichText, options?: { keepLineBreaks: boolean }) {
19
+ function getTextFromNode(node: CrystallizeRichTextNode) {
20
+ if (!node) {
21
+ return '';
22
+ }
23
+
24
+ let childrenText = '';
25
+ if (node.children) {
26
+ childrenText = node.children.reduce((acc, n) => acc + getTextFromNode(n), '');
27
+ }
28
+
29
+ let content = '';
30
+
31
+ content += node.textContent || childrenText || '';
32
+
33
+ if (node.kind === 'block') {
34
+ content = `\n${content}\n`;
35
+ } else if (options?.keepLineBreaks && node.type === 'line-break') {
36
+ content += '\n';
37
+ }
38
+
39
+ return content;
40
+ }
41
+
42
+ if (Array.isArray(model)) {
43
+ return model.map(getTextFromNode).join('').trimStart().trimEnd();
44
+ }
45
+
46
+ return trim(getTextFromNode(model));
47
+ }
package/src/rich-text-editor/nodes/BaseNodes.ts CHANGED
@@ -17,8 +17,6 @@ import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
17
17
  import { HeadingNode, QuoteNode } from '@lexical/rich-text';
18
18
  import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
19
19
 
20
- // import { AutocompleteNode } from './AutocompleteNode';
21
-
22
20
  import { KeywordNode } from './KeywordNode';
23
21
  import { TableNode as NewTableNode } from './TableNode';
24
22
 
@@ -37,7 +35,6 @@ export const BaseNodes: Array<Klass<LexicalNode>> = [
37
35
  AutoLinkNode,
38
36
  LinkNode,
39
37
  OverflowNode,
40
- // AutocompleteNode,
41
38
  KeywordNode,
42
39
  HorizontalRuleNode,
43
40
  MarkNode,
package/src/rich-text-editor/plugins/ActionsPlugin/index.tsx CHANGED
@@ -12,7 +12,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
12
12
 
13
13
  import { ActionMenu } from '../../../action-menu';
14
14
  import { lexicalToCrystallizeRichText } from '../../model/lexical-to-crystallize';
15
- import type { CrystallizeRichTextActionMenuItem } from '../../types';
15
+ import type { CrystallizeRichTextActionMenuItem } from '../../types/types';
16
16
 
17
17
  async function exportFile(editor: LexicalEditor) {
18
18
  const json = lexicalToCrystallizeRichText({ editorState: editor.getEditorState() });
package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx CHANGED
@@ -137,7 +137,7 @@ function getMouseInfo(event: MouseEvent): {
137
137
  const target = event.target;
138
138
 
139
139
  if (target && target instanceof HTMLElement) {
140
- const codeDOMNode = target.closest<HTMLElement>('code.PlaygroundEditorTheme__code');
140
+ const codeDOMNode = target.closest<HTMLElement>('code.CrystallizeRTEditorTheme__code');
141
141
  const isOutside = !(codeDOMNode || target.closest<HTMLElement>('div.code-action-menu-container'));
142
142
 
143
143
  return { codeDOMNode, isOutside };
package/src/rich-text-editor/plugins/ComponentPickerPlugin/index.tsx CHANGED
@@ -20,7 +20,7 @@ import {
20
20
  useBasicTypeaheadTriggerMatch,
21
21
  } from '@lexical/react/LexicalTypeaheadMenuPlugin';
22
22
  import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
23
- import { $setBlocksType_experimental } from '@lexical/selection';
23
+ import { $setBlocksType } from '@lexical/selection';
24
24
  import { INSERT_TABLE_COMMAND } from '@lexical/table';
25
25
 
26
26
  // import { InsertNewTableDialog } from '../TablePlugin';
@@ -152,7 +152,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
152
152
  editor.update(() => {
153
153
  const selection = $getSelection();
154
154
  if ($isRangeSelection(selection)) {
155
- $setBlocksType_experimental(selection, () => $createParagraphNode());
155
+ $setBlocksType(selection, () => $createParagraphNode());
156
156
  }
157
157
  }),
158
158
  }),
@@ -165,7 +165,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
165
165
  editor.update(() => {
166
166
  const selection = $getSelection();
167
167
  if ($isRangeSelection(selection)) {
168
- $setBlocksType_experimental(selection, () =>
168
+ $setBlocksType(selection, () =>
169
169
  // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
170
170
  $createHeadingNode(`h${n}`),
171
171
  );
@@ -207,7 +207,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
207
207
  editor.update(() => {
208
208
  const selection = $getSelection();
209
209
  if ($isRangeSelection(selection)) {
210
- $setBlocksType_experimental(selection, () => $createQuoteNode());
210
+ $setBlocksType(selection, () => $createQuoteNode());
211
211
  }
212
212
  }),
213
213
  }),
@@ -220,7 +220,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
220
220
 
221
221
  if ($isRangeSelection(selection)) {
222
222
  if (selection.isCollapsed()) {
223
- $setBlocksType_experimental(selection, () => $createCodeNode());
223
+ $setBlocksType(selection, () => $createCodeNode());
224
224
  } else {
225
225
  // Will this ever happen?
226
226
  const textContent = selection.getTextContent();
package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.tsx CHANGED
@@ -6,10 +6,8 @@
6
6
  *
7
7
  */
8
8
  import './index.css';
9
-
10
- import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
11
- import {eventFiles} from '@lexical/rich-text';
12
- import {mergeRegister} from '@lexical/utils';
9
+ import * as React from 'react';
10
+ import { DragEvent as ReactDragEvent, useEffect, useRef, useState } from 'react';
13
11
  import {
14
12
  $getNearestNodeFromDOMNode,
15
13
  $getNodeByKey,
@@ -20,13 +18,14 @@ import {
20
18
  DROP_COMMAND,
21
19
  LexicalEditor,
22
20
  } from 'lexical';
23
- import * as React from 'react';
24
- import {DragEvent as ReactDragEvent, useEffect, useRef, useState} from 'react';
25
- import {createPortal} from 'react-dom';
21
+ import { createPortal } from 'react-dom';
22
+ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
23
+ import { eventFiles } from '@lexical/rich-text';
24
+ import { mergeRegister } from '@lexical/utils';
26
25
 
27
- import {isHTMLElement} from '../../utils/guard';
28
- import {Point} from '../../utils/point';
29
- import {Rect} from '../../utils/rect';
26
+ import { isHTMLElement } from '../../utils/guard';
27
+ import { Point } from '../../utils/point';
28
+ import { Rect } from '../../utils/rect';
30
29
 
31
30
  const SPACE = 4;
32
31
  const TARGET_LINE_HALF_HEIGHT = 2;
@@ -55,11 +54,7 @@ function getTopLevelNodeKeys(editor: LexicalEditor): string[] {
55
54
  return editor.getEditorState().read(() => $getRoot().getChildrenKeys());
56
55
  }
57
56
 
58
- function getBlockElement(
59
- anchorElem: HTMLElement,
60
- editor: LexicalEditor,
61
- event: MouseEvent,
62
- ): HTMLElement | null {
57
+ function getBlockElement(anchorElem: HTMLElement, editor: LexicalEditor, event: MouseEvent): HTMLElement | null {
63
58
  const anchorElementRect = anchorElem.getBoundingClientRect();
64
59
  const topLevelNodeKeys = getTopLevelNodeKeys(editor);
65
60
 
@@ -77,7 +72,7 @@ function getBlockElement(
77
72
  }
78
73
  const point = new Point(event.x, event.y);
79
74
  const domRect = Rect.fromDOM(elem);
80
- const {marginTop, marginBottom} = window.getComputedStyle(elem);
75
+ const { marginTop, marginBottom } = window.getComputedStyle(elem);
81
76
 
82
77
  const rect = domRect.generateNewRect({
83
78
  bottom: domRect.bottom + parseFloat(marginBottom),
@@ -88,7 +83,7 @@ function getBlockElement(
88
83
 
89
84
  const {
90
85
  result,
91
- reason: {isOnTopSide, isOnBottomSide},
86
+ reason: { isOnTopSide, isOnBottomSide },
92
87
  } = rect.contains(point);
93
88
 
94
89
  if (result) {
@@ -119,11 +114,7 @@ function isOnMenu(element: HTMLElement): boolean {
119
114
  return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
120
115
  }
121
116
 
122
- function setMenuPosition(
123
- targetElem: HTMLElement | null,
124
- floatingElem: HTMLElement,
125
- anchorElem: HTMLElement,
126
- ) {
117
+ function setMenuPosition(targetElem: HTMLElement | null, floatingElem: HTMLElement, anchorElem: HTMLElement) {
127
118
  if (!targetElem) {
128
119
  floatingElem.style.opacity = '0';
129
120
  floatingElem.style.transform = 'translate(-10000px, -10000px)';
@@ -136,9 +127,7 @@ function setMenuPosition(
136
127
  const anchorElementRect = anchorElem.getBoundingClientRect();
137
128
 
138
129
  const top =
139
- targetRect.top +
140
- (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 -
141
- anchorElementRect.top;
130
+ targetRect.top + (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 - anchorElementRect.top;
142
131
 
143
132
  const left = SPACE;
144
133
 
@@ -146,11 +135,8 @@ function setMenuPosition(
146
135
  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
147
136
  }
148
137
 
149
- function setDragImage(
150
- dataTransfer: DataTransfer,
151
- draggableBlockElem: HTMLElement,
152
- ) {
153
- const {transform} = draggableBlockElem.style;
138
+ function setDragImage(dataTransfer: DataTransfer, draggableBlockElem: HTMLElement) {
139
+ const { transform } = draggableBlockElem.style;
154
140
 
155
141
  // Remove dragImage borders
156
142
  draggableBlockElem.style.transform = 'translateZ(0)';
@@ -168,10 +154,8 @@ function setTargetLine(
168
154
  anchorElem: HTMLElement,
169
155
  ) {
170
156
  const targetStyle = window.getComputedStyle(targetBlockElem);
171
- const {top: targetBlockElemTop, height: targetBlockElemHeight} =
172
- targetBlockElem.getBoundingClientRect();
173
- const {top: anchorTop, width: anchorWidth} =
174
- anchorElem.getBoundingClientRect();
157
+ const { top: targetBlockElemTop, height: targetBlockElemHeight } = targetBlockElem.getBoundingClientRect();
158
+ const { top: anchorTop, width: anchorWidth } = anchorElem.getBoundingClientRect();
175
159
 
176
160
  let lineTop = targetBlockElemTop;
177
161
  // At the bottom of the target
@@ -185,9 +169,7 @@ function setTargetLine(
185
169
  const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
186
170
 
187
171
  targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
188
- targetLineElem.style.width = `${
189
- anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2
190
- }px`;
172
+ targetLineElem.style.width = `${anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2}px`;
191
173
  targetLineElem.style.opacity = '.4';
192
174
  }
193
175
 
@@ -198,17 +180,12 @@ function hideTargetLine(targetLineElem: HTMLElement | null) {
198
180
  }
199
181
  }
200
182
 
201
- function useDraggableBlockMenu(
202
- editor: LexicalEditor,
203
- anchorElem: HTMLElement,
204
- isEditable: boolean,
205
- ): JSX.Element {
183
+ function useDraggableBlockMenu(editor: LexicalEditor, anchorElem: HTMLElement, isEditable: boolean): JSX.Element {
206
184
  const scrollerElem = anchorElem.parentElement;
207
185
 
208
186
  const menuRef = useRef<HTMLDivElement>(null);
209
187
  const targetLineRef = useRef<HTMLDivElement>(null);
210
- const [draggableBlockElem, setDraggableBlockElem] =
211
- useState<HTMLElement | null>(null);
188
+ const [draggableBlockElem, setDraggableBlockElem] = useState<HTMLElement | null>(null);
212
189
 
213
190
  useEffect(() => {
214
191
  function onMouseMove(event: MouseEvent) {
@@ -252,7 +229,7 @@ function useDraggableBlockMenu(
252
229
  if (isFileTransfer) {
253
230
  return false;
254
231
  }
255
- const {pageY, target} = event;
232
+ const { pageY, target } = event;
256
233
  if (!isHTMLElement(target)) {
257
234
  return false;
258
235
  }
@@ -272,7 +249,7 @@ function useDraggableBlockMenu(
272
249
  if (isFileTransfer) {
273
250
  return false;
274
251
  }
275
- const {target, dataTransfer, pageY} = event;
252
+ const { target, dataTransfer, pageY } = event;
276
253
  const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || '';
277
254
  const draggedNode = $getNodeByKey(dragData);
278
255
  if (!draggedNode) {
@@ -292,7 +269,7 @@ function useDraggableBlockMenu(
292
269
  if (targetNode === draggedNode) {
293
270
  return true;
294
271
  }
295
- const {top, height} = targetBlockElem.getBoundingClientRect();
272
+ const { top, height } = targetBlockElem.getBoundingClientRect();
296
273
  const shouldInsertAfter = pageY - top > height / 2;
297
274
  if (shouldInsertAfter) {
298
275
  targetNode.insertAfter(draggedNode);
@@ -307,14 +284,14 @@ function useDraggableBlockMenu(
307
284
  return mergeRegister(
308
285
  editor.registerCommand(
309
286
  DRAGOVER_COMMAND,
310
- (event) => {
287
+ event => {
311
288
  return onDragover(event);
312
289
  },
313
290
  COMMAND_PRIORITY_LOW,
314
291
  ),
315
292
  editor.registerCommand(
316
293
  DROP_COMMAND,
317
- (event) => {
294
+ event => {
318
295
  return onDrop(event);
319
296
  },
320
297
  COMMAND_PRIORITY_HIGH,
@@ -324,6 +301,7 @@ function useDraggableBlockMenu(
324
301
 
325
302
  function onDragStart(event: ReactDragEvent<HTMLDivElement>): void {
326
303
  const dataTransfer = event.dataTransfer;
304
+
327
305
  if (!dataTransfer || !draggableBlockElem) {
328
306
  return;
329
307
  }
@@ -349,7 +327,8 @@ function useDraggableBlockMenu(
349
327
  ref={menuRef}
350
328
  draggable={true}
351
329
  onDragStart={onDragStart}
352
- onDragEnd={onDragEnd}>
330
+ onDragEnd={onDragEnd}
331
+ >
353
332
  <div className={isEditable ? 'icon' : ''} />
354
333
  </div>
355
334
  <div className="draggable-block-target-line" ref={targetLineRef} />