@flozy/editor 1.5.9 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. package/dist/Editor/CommonEditor.js +195 -94
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +211 -50
  4. package/dist/Editor/Elements/Accordion/Accordion.js +0 -1
  5. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +0 -1
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +136 -133
  8. package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -2
  9. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  10. package/dist/Editor/Elements/Button/EditorButton.js +8 -24
  11. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  12. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  13. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  14. package/dist/Editor/Elements/Color Picker/ColorPicker.js +49 -58
  15. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  16. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  17. package/dist/Editor/Elements/Embed/Embed.js +35 -126
  18. package/dist/Editor/Elements/Embed/Image.js +24 -7
  19. package/dist/Editor/Elements/Embed/Video.js +21 -6
  20. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  21. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  22. package/dist/Editor/Elements/Form/Form.js +24 -13
  23. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  24. package/dist/Editor/Elements/Form/FormElements/FormText.js +4 -2
  25. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  26. package/dist/Editor/Elements/Form/FormField.js +7 -1
  27. package/dist/Editor/Elements/Grid/Grid.js +143 -47
  28. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  29. package/dist/Editor/Elements/Grid/GridItem.js +32 -21
  30. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  31. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
  32. package/dist/Editor/Elements/List/CheckList.js +57 -0
  33. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  34. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  35. package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
  36. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -62
  37. package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
  38. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  39. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  40. package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
  41. package/dist/Editor/Elements/SimpleText.js +62 -0
  42. package/dist/Editor/Elements/Table/Styles.js +66 -0
  43. package/dist/Editor/Elements/Table/Table.js +33 -16
  44. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  45. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  46. package/dist/Editor/Elements/Table/table.css +0 -10
  47. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  48. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  49. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  50. package/dist/Editor/Styles/EditorStyles.js +50 -0
  51. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
  52. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  53. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
  54. package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
  55. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  56. package/dist/Editor/Toolbar/FormatTools/index.js +4 -1
  57. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  58. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  59. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  60. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  61. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  62. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  63. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  64. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  65. package/dist/Editor/Toolbar/PopupTool/index.js +50 -85
  66. package/dist/Editor/Toolbar/Toolbar.js +189 -129
  67. package/dist/Editor/Toolbar/styles.css +136 -18
  68. package/dist/Editor/Toolbar/toolbarGroups.js +94 -34
  69. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  70. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  71. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  72. package/dist/Editor/common/Icon.js +54 -5
  73. package/dist/Editor/common/ImageList.js +75 -0
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  75. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  76. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  77. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  78. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  79. package/dist/Editor/common/ImageUploader.js +94 -0
  80. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  81. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  82. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  83. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  84. package/dist/Editor/common/Shorthands/elements.js +191 -0
  85. package/dist/Editor/common/Shorthands/index.js +7 -0
  86. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  87. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
  88. package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -1
  89. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +15 -2
  90. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +23 -35
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
  95. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
  96. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
  99. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  100. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  101. package/dist/Editor/common/ToolbarIcon.js +43 -0
  102. package/dist/Editor/common/Uploader.js +35 -61
  103. package/dist/Editor/common/iconslist.js +46 -1
  104. package/dist/Editor/helper/index.js +0 -1
  105. package/dist/Editor/hooks/useDrag.js +2 -2
  106. package/dist/Editor/hooks/useMentions.js +104 -17
  107. package/dist/Editor/hooks/useMouseMove.js +53 -0
  108. package/dist/Editor/hooks/useScroll.js +26 -0
  109. package/dist/Editor/plugins/withEmbeds.js +12 -0
  110. package/dist/Editor/service/fileupload.js +2 -2
  111. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -9
  112. package/dist/Editor/utils/button.js +2 -1
  113. package/dist/Editor/utils/carousel.js +5 -2
  114. package/dist/Editor/utils/carouselItem.js +2 -2
  115. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  116. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  117. package/dist/Editor/utils/embed.js +25 -8
  118. package/dist/Editor/utils/emoji.js +8 -0
  119. package/dist/Editor/utils/events.js +49 -12
  120. package/dist/Editor/utils/form.js +3 -9
  121. package/dist/Editor/utils/formfield.js +2 -1
  122. package/dist/Editor/utils/grid.js +44 -8
  123. package/dist/Editor/utils/gridItem.js +4 -3
  124. package/dist/Editor/utils/insertNewLine.js +12 -0
  125. package/dist/Editor/utils/mentions.js +14 -10
  126. package/dist/Editor/utils/pageSettings.js +67 -0
  127. package/dist/Editor/utils/signature.js +6 -8
  128. package/dist/Editor/utils/table.js +79 -18
  129. package/dist/Editor/utils/topBanner.js +58 -0
  130. package/package.json +6 -2
  131. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -200,7 +200,7 @@ _jsx("svg", {
200
200
  children: /*#__PURE__*/_jsx("path", {
201
201
  className: "fillPath",
202
202
  d: "M93.8939 186.893C41.0032 186.893 0.560547 146.445 0.560547 93.5599C0.560547 40.6692 41.0032 0.226562 93.8939 0.226562C146.785 0.226562 187.227 40.6692 187.227 93.5599C187.227 146.445 146.779 186.893 93.8939 186.893V186.893ZM93.8939 62.4452C75.2272 62.4452 62.7792 74.8931 62.7792 93.5599C62.7792 112.227 75.2219 124.669 93.8886 124.669C112.555 124.669 124.998 112.227 124.998 93.5599C125.003 74.8932 112.56 62.4452 93.8939 62.4452ZM93.8939 622.445C41.0032 622.445 0.560547 582.003 0.560547 529.112C0.560547 476.221 41.0032 435.779 93.8939 435.779C146.785 435.779 187.227 476.221 187.227 529.112C187.227 582.003 146.779 622.445 93.8939 622.445V622.445ZM93.8939 498.003C75.2272 498.003 62.7845 510.445 62.7845 529.112C62.7845 547.779 75.2272 560.221 93.8939 560.221C112.561 560.221 125.003 547.779 125.003 529.112C125.003 510.445 112.561 498.003 93.8939 498.003ZM622.774 93.5626C622.774 74.8959 610.331 62.4532 591.665 62.4532L249.438 62.448C230.771 62.448 218.329 74.8959 218.329 93.5627C218.329 112.229 230.771 124.672 249.438 124.672H591.665C610.331 124.672 622.774 112.229 622.774 93.5627V93.5626ZM622.774 311.336C622.774 292.669 610.331 280.227 591.665 280.227H249.438C230.771 280.227 218.329 292.669 218.329 311.336C218.329 330.003 230.771 342.445 249.438 342.445H591.665C610.331 342.445 622.774 330.003 622.774 311.336ZM622.774 529.109C622.774 510.443 610.331 498 591.665 498H249.438C230.771 498 218.329 510.443 218.329 529.109C218.329 547.776 230.771 560.219 249.438 560.219H591.665C610.331 560.224 622.774 547.776 622.774 529.109ZM81.4406 367.336L174.774 305.112C190.331 295.779 193.441 277.112 187.217 261.555C174.774 249.112 156.107 242.893 140.555 252.226C140.555 252.226 137.446 252.226 137.446 255.336L65.8886 302.002L53.4459 289.56C41.0032 277.117 19.2219 280.226 9.88855 292.669C0.555216 305.112 0.555216 320.669 9.88855 333.112L40.9979 364.221C50.3312 373.56 68.9979 376.669 81.4406 367.336V367.336Z",
203
- fill: "black"
203
+ fill: "#64748B"
204
204
  })
205
205
  });
206
206
  export const HeadingTypeIcon = props => /*#__PURE__*/_jsx("svg", {
@@ -1406,4 +1406,49 @@ export const FormIcon = () => {
1406
1406
  fill: "#64748B"
1407
1407
  })]
1408
1408
  });
1409
+ };
1410
+ export const CellResize = () => {
1411
+ return /*#__PURE__*/_jsx("svg", {
1412
+ version: "1.1",
1413
+ xmlns: "http://www.w3.org/2000/svg",
1414
+ x: "0px",
1415
+ y: "0px",
1416
+ viewBox: "0 0 256 256",
1417
+ enableBackground: "new 0 0 256 256",
1418
+ children: /*#__PURE__*/_jsx("g", {
1419
+ children: /*#__PURE__*/_jsx("g", {
1420
+ children: /*#__PURE__*/_jsxs("g", {
1421
+ children: [/*#__PURE__*/_jsx("path", {
1422
+ fill: "#000000",
1423
+ d: "M98.6,78.9v29.4H79H59.3V93.5V78.6l-24.6,24.6L10,128l24.2,24.2c13.3,13.3,24.4,24.2,24.6,24.2c0.3,0,0.5-6.5,0.5-14.4v-14.4H79h19.6l0.1,29.2l0.2,29.3l9.7,0.2l9.6,0.2V128V49.5h-9.8h-9.8L98.6,78.9L98.6,78.9z"
1424
+ }), /*#__PURE__*/_jsx("path", {
1425
+ fill: "#000000",
1426
+ d: "M137.8,128v78.5h9.8h9.8V177v-29.4H177h19.6V162c0,7.9,0.2,14.4,0.5,14.4c0.2,0,11.3-10.9,24.6-24.2L246,128l-24.7-24.7l-24.6-24.6v14.9v14.8H177h-19.6V78.9V49.5h-9.8h-9.8L137.8,128L137.8,128z"
1427
+ })]
1428
+ })
1429
+ })
1430
+ })
1431
+ });
1432
+ };
1433
+ export const FileUploadIcon = () => {
1434
+ return /*#__PURE__*/_jsxs("svg", {
1435
+ xmlns: "http://www.w3.org/2000/svg",
1436
+ width: "14",
1437
+ height: "14",
1438
+ viewBox: "0 0 14 14",
1439
+ fill: "none",
1440
+ children: [/*#__PURE__*/_jsx("path", {
1441
+ d: "M5.2 12.9639H4C1.6 12.9639 1 12.3657 1 9.97291V3.99097C1 1.59819 1.6 1 4 1H4.9C5.8 1 5.99801 1.26321 6.34001 1.71784L7.24001 2.91423C7.46801 3.21333 7.6 3.39278 8.2 3.39278H10C12.4 3.39278 13 3.99097 13 6.38375V7.58014",
1442
+ stroke: "#9C9C9C",
1443
+ strokeMiterlimit: "10",
1444
+ strokeLinecap: "round",
1445
+ strokeLinejoin: "round"
1446
+ }), /*#__PURE__*/_jsx("path", {
1447
+ d: "M8.05604 10.7628C6.64604 10.8645 6.64604 12.8983 8.05604 13H11.392C11.794 13 12.19 12.8504 12.484 12.5813C13.474 11.7199 12.946 9.99706 11.644 9.83555C11.176 7.03001 7.10805 8.0948 8.06805 10.7687",
1448
+ stroke: "#9C9C9C",
1449
+ strokeMiterlimit: "10",
1450
+ strokeLinecap: "round",
1451
+ strokeLinejoin: "round"
1452
+ })]
1453
+ });
1409
1454
  };
@@ -15,7 +15,6 @@ export function customCollisionDetectionAlgorithm(args) {
15
15
 
16
16
  // Collision detection algorithms return an array of collisions
17
17
  if (pointerCollisions.length >= 0 && rectIntersection(args)) {
18
- console.log(rectIntersection(args));
19
18
  return rectIntersection(args);
20
19
  }
21
20
 
@@ -1,5 +1,5 @@
1
- import React, { useEffect, useState } from "react";
2
- const useDrag = props => {
1
+ import { useEffect, useState } from "react";
2
+ const useDrag = () => {
3
3
  const [event, setEvent] = useState("");
4
4
  useEffect(() => {
5
5
  addListener();
@@ -1,5 +1,86 @@
1
1
  import { useEffect, useState } from "react";
2
2
  import { Editor, Range } from "slate";
3
+ const SHORTHAND_CMDS = ["@", "/"];
4
+ const TYPES = {
5
+ "@": "mentions",
6
+ "/": "elements"
7
+ };
8
+ const SHORTHAND_MATCHES = {
9
+ mentions: new RegExp(/^@(\w+)$/),
10
+ elements: new RegExp(/^\/(\w+)$/)
11
+ };
12
+ const getStartEnd = ({
13
+ selection,
14
+ editor
15
+ }) => {
16
+ try {
17
+ // Get start and end, modify it as we move along.
18
+ let [start, end] = Range.edges(selection);
19
+
20
+ // Move backwards
21
+ while (true) {
22
+ const before = Editor.before(editor, start, {
23
+ unit: "character"
24
+ });
25
+ const wordBefore = before && Editor.string(editor, {
26
+ anchor: before,
27
+ focus: start
28
+ });
29
+ if (before && wordBefore && SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
30
+ start = before;
31
+ if (start.offset === 0) {
32
+ // Means we've wrapped to beginning of another block
33
+ break;
34
+ }
35
+ } else if (SHORTHAND_CMDS.indexOf(wordBefore) >= 0) {
36
+ // reached the character end
37
+ start = before;
38
+ break;
39
+ } else {
40
+ break;
41
+ }
42
+ }
43
+ const wordRange = {
44
+ anchor: start,
45
+ focus: end
46
+ };
47
+ const word = Editor.string(editor, wordRange);
48
+ return {
49
+ word,
50
+ search: word?.substring(1, word.length),
51
+ target: wordRange,
52
+ type: TYPES[word[0]]
53
+ };
54
+ } catch (err) {
55
+ return {
56
+ word: "",
57
+ wordRange: null,
58
+ type: null
59
+ };
60
+ }
61
+ };
62
+ const getRegexCategories = beforeText => {
63
+ try {
64
+ if (beforeText) {
65
+ if (beforeText.match(SHORTHAND_MATCHES.mentions)) {
66
+ return {
67
+ type: "mentions",
68
+ beforeMatch: beforeText.match(SHORTHAND_MATCHES.mentions)
69
+ };
70
+ } else if (beforeText.match(SHORTHAND_MATCHES.elements)) {
71
+ return {
72
+ type: "elements",
73
+ beforeMatch: beforeText.match(SHORTHAND_MATCHES.elements)
74
+ };
75
+ }
76
+ } else {
77
+ return null;
78
+ }
79
+ } catch (err) {
80
+ console.log(err);
81
+ return null;
82
+ }
83
+ };
3
84
  const useMentions = props => {
4
85
  const {
5
86
  editor,
@@ -8,34 +89,40 @@ const useMentions = props => {
8
89
  const [mentions, setMentions] = useState({
9
90
  target: null,
10
91
  index: null,
11
- search: null
92
+ search: null,
93
+ type: null
12
94
  });
13
95
  useEffect(() => {
14
96
  if (selection && Range.isCollapsed(selection)) {
15
- const [start] = Range.edges(selection);
16
- const wordBefore = Editor.before(editor, start, {
17
- unit: "word"
97
+ const {
98
+ target,
99
+ search,
100
+ type
101
+ } = getStartEnd({
102
+ selection,
103
+ editor
18
104
  });
19
- const before = wordBefore && Editor.before(editor, wordBefore);
20
- const beforeRange = before && Editor.range(editor, before, start);
21
- const beforeText = beforeRange && Editor.string(editor, beforeRange);
22
- const beforeMatch = beforeText && beforeText.match(/^@(\w+)$/);
23
- const after = Editor.after(editor, start);
24
- const afterRange = Editor.range(editor, start, after);
25
- const afterText = Editor.string(editor, afterRange);
26
- const afterMatch = afterText.match(/^(\s|$)/);
27
- if (beforeMatch && afterMatch) {
105
+ if (target && type) {
106
+ setMentions({
107
+ target,
108
+ search,
109
+ index: 0,
110
+ type: type
111
+ });
112
+ } else {
28
113
  setMentions({
29
- target: beforeRange,
30
- search: beforeMatch[1],
31
- index: 0
114
+ target: null,
115
+ search: null,
116
+ index: null,
117
+ type: null
32
118
  });
33
119
  }
34
120
  } else {
35
121
  setMentions({
36
122
  target: null,
37
123
  search: null,
38
- index: null
124
+ index: null,
125
+ type: null
39
126
  });
40
127
  }
41
128
  }, [selection, editor]);
@@ -0,0 +1,53 @@
1
+ import { useEffect, useState, createContext, useContext, useMemo } from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const EditorContext = /*#__PURE__*/createContext();
4
+ export const EditorProvider = ({
5
+ children
6
+ }) => {
7
+ const [event] = useMouseMove();
8
+ const [previous, setPrevious] = useState("");
9
+ const path = event?.target?.getAttribute("data-path");
10
+ const value = useMemo(() => {
11
+ if (path) {
12
+ setPrevious(path);
13
+ return {
14
+ hoverPath: path
15
+ };
16
+ } else {
17
+ return {
18
+ hoverPath: previous
19
+ };
20
+ }
21
+ }, [path]);
22
+ return /*#__PURE__*/_jsx(EditorContext.Provider, {
23
+ value: value,
24
+ children: children
25
+ });
26
+ };
27
+ export const useEditorContext = () => {
28
+ return useContext(EditorContext);
29
+ };
30
+ const useMouseMove = () => {
31
+ const [event, setEvent] = useState({
32
+ target: null
33
+ });
34
+ useEffect(() => {
35
+ addListener();
36
+ return () => {
37
+ removeListener();
38
+ };
39
+ }, []);
40
+ const onMouseMove = e => {
41
+ setEvent({
42
+ target: e.target
43
+ });
44
+ };
45
+ const addListener = () => {
46
+ document.addEventListener("mousemove", onMouseMove);
47
+ };
48
+ const removeListener = () => {
49
+ document.removeEventListener("mousemove", onMouseMove);
50
+ };
51
+ return [event];
52
+ };
53
+ export default useMouseMove;
@@ -0,0 +1,26 @@
1
+ import { useEffect, useState } from "react";
2
+ const useScroll = id => {
3
+ const [event, setEvent] = useState("");
4
+ useEffect(() => {
5
+ addListener();
6
+ return () => {
7
+ removeListener();
8
+ };
9
+ }, []);
10
+ const onScroll = () => {
11
+ setEvent("start");
12
+ };
13
+ const onScrollEnd = () => {
14
+ setEvent("end");
15
+ };
16
+ const addListener = () => {
17
+ document.getElementById(id)?.addEventListener("scroll", onScroll);
18
+ document.getElementById(id)?.addEventListener("scrollend", onScrollEnd);
19
+ };
20
+ const removeListener = () => {
21
+ document.getElementById(id)?.removeEventListener("scroll", onScroll);
22
+ document.getElementById(id)?.removeEventListener("scrollend", onScrollEnd);
23
+ };
24
+ return [event];
25
+ };
26
+ export default useScroll;
@@ -1,4 +1,5 @@
1
1
  import { Transforms, Path, Node } from "slate";
2
+ const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
2
3
  const withEmbeds = editor => {
3
4
  const {
4
5
  isVoid,
@@ -27,6 +28,17 @@ const withEmbeds = editor => {
27
28
  at: nextPath,
28
29
  select: true // Focus on this node once inserted
29
30
  });
31
+ } else if (AvoidCopying.indexOf(parentNode?.type) >= 0) {
32
+ const nextPath = Path.next(parentPath);
33
+ Transforms.insertNodes(editor, {
34
+ type: "paragraph",
35
+ children: [{
36
+ text: ""
37
+ }]
38
+ }, {
39
+ at: nextPath,
40
+ select: true // Focus on this node once inserted
41
+ });
30
42
  } else {
31
43
  insertBreak(...args);
32
44
  }
@@ -3,10 +3,10 @@ export const uploadFile = async (formData, props) => {
3
3
  const response = await fetch(`${props.API_HOST}/general/notes/file_upload`, {
4
4
  method: "POST",
5
5
  headers: {
6
- "Content-Type": "application/json",
6
+ // "Content-Type": "application/json",
7
7
  Authorization: `Bearer ${props.token}`
8
8
  },
9
- body: JSON.stringify(formData)
9
+ body: formData
10
10
  });
11
11
  const result = await response.json();
12
12
  return result.data;
@@ -30,10 +30,12 @@ import Form from "../Elements/Form/Form";
30
30
  import FormField from "../Elements/Form/FormField";
31
31
  import InlineIcon from "../Elements/InlineIcon/InlineIcon";
32
32
  import EmbedLink from "../Elements/Embed/link";
33
+ import SimpleText from "../Elements/SimpleText";
34
+ import CheckList from "../Elements/List/CheckList";
33
35
  import { jsx as _jsx } from "react/jsx-runtime";
34
36
  const alignment = ["alignLeft", "alignRight", "alignCenter"];
35
37
  const list_types = ["orderedList", "unorderedList"];
36
- export const toggleBlock = (editor, format) => {
38
+ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
37
39
  const isActive = isBlockActive(editor, format);
38
40
  const isList = list_types.includes(format);
39
41
  const isIndent = alignment.includes(format);
@@ -60,8 +62,14 @@ export const toggleBlock = (editor, format) => {
60
62
  match: n => list_types.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type),
61
63
  split: true
62
64
  });
65
+
66
+ // inserting blocks from "/"" commands remove searched word
67
+ if (!selection) {
68
+ Transforms.insertText(editor, "");
69
+ }
63
70
  Transforms.setNodes(editor, {
64
- type: isActive ? "paragraph" : isList ? "list-item" : format
71
+ type: isActive ? "paragraph" : isList ? "list-item" : format,
72
+ ...attr
65
73
  });
66
74
  if (isList && !isActive) {
67
75
  Transforms.wrapNodes(editor, {
@@ -96,12 +104,32 @@ export const isBlockActive = (editor, format) => {
96
104
  });
97
105
  return !!match;
98
106
  };
107
+ export const getBlockActive = (editor, format) => {
108
+ const [match] = Editor.nodes(editor, {
109
+ match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
110
+ });
111
+ return {
112
+ isActive: !!match,
113
+ props: match && match[0]
114
+ };
115
+ };
116
+ export const upateBlockActive = (editor, format, attr = {}) => {
117
+ const [match] = Editor.nodes(editor, {
118
+ match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
119
+ });
120
+ if (match && match[1] !== undefined) {
121
+ Transforms.setNodes(editor, attr, {
122
+ at: match[1]
123
+ });
124
+ }
125
+ };
99
126
  export const activeMark = (editor, format) => {
100
127
  const defaultMarkData = {
101
128
  color: "#000000",
102
129
  bgColor: "#FFFFFF",
103
130
  fontSize: "normal",
104
- fontFamily: "PoppinsRegular"
131
+ fontFamily: "PoppinsRegular",
132
+ fontWeight: "normal"
105
133
  };
106
134
  try {
107
135
  const marks = Editor.marks(editor);
@@ -152,9 +180,16 @@ export const getMarked = (leaf, children) => {
152
180
  });
153
181
  }
154
182
  if (leaf.color) {
183
+ const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
184
+ background: leaf.color,
185
+ "-webkit-background-clip": "text",
186
+ "-webkit-text-fill-color": "transparent"
187
+ } : {
188
+ color: leaf.color
189
+ };
155
190
  children = /*#__PURE__*/_jsx("span", {
156
191
  style: {
157
- color: leaf.color
192
+ ...textStyles
158
193
  },
159
194
  children: children
160
195
  });
@@ -162,7 +197,7 @@ export const getMarked = (leaf, children) => {
162
197
  if (leaf.bgColor) {
163
198
  children = /*#__PURE__*/_jsx("span", {
164
199
  style: {
165
- backgroundColor: leaf.bgColor
200
+ background: leaf.bgColor
166
201
  },
167
202
  children: children
168
203
  });
@@ -185,6 +220,14 @@ export const getMarked = (leaf, children) => {
185
220
  children: children
186
221
  });
187
222
  }
223
+ if (leaf.fontWeight) {
224
+ children = /*#__PURE__*/_jsx("span", {
225
+ style: {
226
+ fontWeight: leaf.fontWeight
227
+ },
228
+ children: children
229
+ });
230
+ }
188
231
  return children;
189
232
  };
190
233
  export const getBlock = props => {
@@ -216,6 +259,13 @@ export const getBlock = props => {
216
259
  return /*#__PURE__*/_jsx("blockquote", {
217
260
  ...attributes,
218
261
  ...element.attr,
262
+ style: {
263
+ borderColor: element?.color || "transparent",
264
+ background: element?.bgColor || "none",
265
+ padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
266
+ borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
267
+ margin: `${element?.bgColor ? "16px" : "0px"} 0px`
268
+ },
219
269
  children: children
220
270
  });
221
271
  case "alignLeft":
@@ -269,6 +319,10 @@ export const getBlock = props => {
269
319
  ...attributes,
270
320
  children: children
271
321
  });
322
+ case "checkList":
323
+ return /*#__PURE__*/_jsx(CheckList, {
324
+ ...props
325
+ });
272
326
  case "link":
273
327
  return /*#__PURE__*/_jsx(Link, {
274
328
  ...props
@@ -390,10 +444,8 @@ export const getBlock = props => {
390
444
  ...props
391
445
  });
392
446
  default:
393
- return /*#__PURE__*/_jsx("div", {
394
- ...element.attr,
395
- ...attributes,
396
- children: children
447
+ return /*#__PURE__*/_jsx(SimpleText, {
448
+ ...props
397
449
  });
398
450
  }
399
451
  };
@@ -7,7 +7,8 @@ export const insertButton = editor => {
7
7
  }],
8
8
  buttonLink: {
9
9
  linkType: "webAddress"
10
- }
10
+ },
11
+ iconPosition: "start"
11
12
  };
12
13
  Transforms.insertNodes(editor, button);
13
14
  Transforms.move(editor);
@@ -1,13 +1,16 @@
1
1
  import { Transforms } from "slate";
2
2
  import { carouselItem } from "./carouselItem";
3
+ import insertNewLine from "./insertNewLine";
3
4
  export const insertCarousel = editor => {
4
5
  const grid = {
5
6
  type: "carousel",
6
7
  grid: "container",
7
8
  children: [{
8
- ...carouselItem()
9
+ ...carouselItem(1)
10
+ }, {
11
+ ...carouselItem(2)
9
12
  }]
10
13
  };
11
14
  Transforms.insertNodes(editor, grid);
12
- Transforms.move(editor);
15
+ insertNewLine(editor);
13
16
  };
@@ -1,12 +1,12 @@
1
1
  import { Transforms } from "slate";
2
- export const carouselItem = () => {
2
+ export const carouselItem = (itemNo = "") => {
3
3
  return {
4
4
  type: "carousel-item",
5
5
  image: null,
6
6
  children: [{
7
7
  type: "paragraph",
8
8
  children: [{
9
- text: `Carousel Item Text - ${new Date().getTime()}`
9
+ text: `Slide ${itemNo}`
10
10
  }]
11
11
  }]
12
12
  };
@@ -35,11 +35,10 @@ const useResize = ({
35
35
  };
36
36
  const onMouseMove = e => {
37
37
  setSize(currentSize => {
38
- const widthInPX = currentSize.widthInPercent / 100 * width;
39
- const calcWidth = widthInPX + e.movementX;
38
+ const calcWidth = (currentSize.width || width) + e.movementX;
40
39
  return {
41
40
  width: calcWidth,
42
- height: currentSize.height + e.movementY,
41
+ height: (currentSize.height || height) + e.movementY,
43
42
  widthInPercent: calcWidth / width * 100
44
43
  };
45
44
  });
@@ -11,7 +11,8 @@ const useTableResize = ({
11
11
  const [size, setSize] = useState({
12
12
  height: 300,
13
13
  widthInPercent: 100,
14
- ...defaultSize
14
+ ...defaultSize,
15
+ width
15
16
  });
16
17
  const [resizing, setResizing] = useState(false);
17
18
  const onLoad = defaultSize => {
@@ -1,24 +1,41 @@
1
1
  import { Transforms } from "slate";
2
- import { createParagraph } from "./paragraph";
2
+ import insertNewLine from "./insertNewLine";
3
+ export const insertDefaultEmbed = (editor, type, defaultURL = "") => {
4
+ const url = defaultURL ? defaultURL : type === "image" ? "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" : "https://www.youtube.com/embed/a_feKqxjY-4?si=da6PxCxKEUYqadRn";
5
+ insertEmbed(editor, {
6
+ url,
7
+ images: []
8
+ }, type);
9
+ };
3
10
  export const createEmbedNode = (type, {
4
11
  url,
5
- alt
12
+ alt,
13
+ images
6
14
  }) => ({
7
15
  type,
8
16
  alt,
9
17
  url,
18
+ images: images || [],
10
19
  children: [{
11
- text: ""
12
- }]
20
+ text: " "
21
+ }],
22
+ size: {
23
+ widthInPercent: "100%",
24
+ height: "auto"
25
+ },
26
+ alignment: {
27
+ horizantal: "center"
28
+ }
13
29
  });
14
30
  export const insertEmbed = (editor, embedData, format) => {
15
31
  const {
16
- url
32
+ url,
33
+ images
17
34
  } = embedData;
18
- if (!url) return;
35
+ if (!url && images.length === 0) return;
19
36
  const embed = createEmbedNode(format, embedData);
20
37
  Transforms.insertNodes(editor, embed, {
21
- select: true
38
+ at: editor.selection.anchor.path
22
39
  });
23
- Transforms.insertNodes(editor, createParagraph(""));
40
+ insertNewLine(editor);
24
41
  };
@@ -0,0 +1,8 @@
1
+ import { Transforms } from "slate";
2
+ export const insertEmoji = (editor, emoji, position) => {
3
+ console.log(editor.selection);
4
+ Transforms.insertText(editor, emoji, {
5
+ at: position,
6
+ select: true
7
+ });
8
+ };