@flozy/editor 10.1.4 → 10.1.5

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 (168) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +120 -16
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +42 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +6 -2
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  8. package/dist/Editor/Elements/Button/EditorButton.js +25 -9
  9. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  13. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  14. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -1
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  21. package/dist/Editor/Elements/Embed/Image.js +3 -2
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  25. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  26. package/dist/Editor/Elements/Form/Form.js +181 -168
  27. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  28. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  29. package/dist/Editor/Elements/Form/FormField.js +13 -6
  30. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  31. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +6 -24
  32. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/styles.js +67 -7
  35. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  36. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  37. package/dist/Editor/Elements/List/CheckList.js +4 -1
  38. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  39. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  40. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  41. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  42. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  43. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  44. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  45. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  46. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  47. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  48. package/dist/Editor/Elements/Table/Styles.js +7 -0
  49. package/dist/Editor/Elements/Table/Table.js +3 -3
  50. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  51. package/dist/Editor/Elements/Title/title.js +6 -6
  52. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  53. package/dist/Editor/MiniEditor.js +2 -1
  54. package/dist/Editor/Styles/EditorStyles.js +5 -5
  55. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  56. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  57. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  58. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  59. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  64. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  65. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  66. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  67. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  68. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  69. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  70. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  71. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  72. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  73. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  74. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  75. package/dist/Editor/common/ColorPickerButton.js +39 -17
  76. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  77. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  78. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  79. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  80. package/dist/Editor/common/CustomSelect.js +43 -0
  81. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  82. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  83. package/dist/Editor/common/Icon.js +31 -1
  84. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  85. package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
  86. package/dist/Editor/common/LinkSettings/index.js +84 -68
  87. package/dist/Editor/common/LinkSettings/style.js +245 -30
  88. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
  89. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  90. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  91. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  92. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  93. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  95. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  96. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  97. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  98. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  99. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  100. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  101. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  103. package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
  104. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  105. package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
  106. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  107. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  108. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  109. package/dist/Editor/common/RnD/Utils/gridDropItem.js +1 -2
  110. package/dist/Editor/common/RnD/VirtualElement/helper.js +3 -2
  111. package/dist/Editor/common/RnD/index.js +5 -6
  112. package/dist/Editor/common/Select/index.js +2 -0
  113. package/dist/Editor/common/Shorthands/elements.js +54 -0
  114. package/dist/Editor/common/SnackBar/index.js +43 -0
  115. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  125. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  126. package/dist/Editor/common/Uploader.js +8 -0
  127. package/dist/Editor/common/iconListV2.js +156 -6
  128. package/dist/Editor/common/iconslist.js +24 -0
  129. package/dist/Editor/commonStyle.js +168 -62
  130. package/dist/Editor/helper/index.js +4 -0
  131. package/dist/Editor/helper/textIndeces.js +58 -0
  132. package/dist/Editor/helper/theme.js +203 -2
  133. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  134. package/dist/Editor/hooks/useMouseMove.js +8 -5
  135. package/dist/Editor/hooks/useTable.js +5 -4
  136. package/dist/Editor/hooks/useThemeValues.js +63 -0
  137. package/dist/Editor/plugins/withEmbeds.js +1 -1
  138. package/dist/Editor/plugins/withHTML.js +3 -1
  139. package/dist/Editor/plugins/withTable.js +1 -1
  140. package/dist/Editor/theme/ThemeList.js +50 -173
  141. package/dist/Editor/theme/index.js +149 -0
  142. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  143. package/dist/Editor/themeSettings/buttons/index.js +292 -0
  144. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  145. package/dist/Editor/themeSettings/colorTheme/index.js +309 -0
  146. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  147. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  148. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  149. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  150. package/dist/Editor/themeSettings/icons.js +60 -0
  151. package/dist/Editor/themeSettings/index.js +361 -0
  152. package/dist/Editor/themeSettings/style.js +292 -0
  153. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  154. package/dist/Editor/themeSettingsAI/index.js +355 -0
  155. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  156. package/dist/Editor/themeSettingsAI/style.js +324 -0
  157. package/dist/Editor/utils/SlateUtilityFunctions.js +166 -43
  158. package/dist/Editor/utils/accordion.js +14 -4
  159. package/dist/Editor/utils/button.js +1 -17
  160. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  161. package/dist/Editor/utils/draftToSlate.js +3 -2
  162. package/dist/Editor/utils/events.js +50 -6
  163. package/dist/Editor/utils/font.js +40 -37
  164. package/dist/Editor/utils/form.js +4 -4
  165. package/dist/Editor/utils/formfield.js +8 -2
  166. package/dist/Editor/utils/helper.js +109 -19
  167. package/dist/Editor/utils/signature.js +2 -9
  168. package/package.json +4 -4
@@ -1,6 +1,13 @@
1
1
  import { Transforms } from "slate";
2
2
  import insertNewLine from "./insertNewLine";
3
3
  import { getSelectedText } from "./helper";
4
+ import { isMobileWindow } from "../helper";
5
+ const focusAccordion = (editor, upPath) => {
6
+ Transforms.select(editor, {
7
+ path: upPath,
8
+ offset: 0
9
+ });
10
+ };
4
11
  export const insertAccordion = (editor, path) => {
5
12
  try {
6
13
  const selectedText = getSelectedText(editor);
@@ -36,11 +43,14 @@ export const insertAccordion = (editor, path) => {
36
43
  // get title index
37
44
  const summaryIndex = upPath.length - 3;
38
45
  upPath[summaryIndex] = upPath[summaryIndex] === 0 ? 0 : upPath[summaryIndex] - 1;
46
+
39
47
  // select accordion title by default
40
- Transforms.select(editor, {
41
- path: upPath,
42
- offset: 0
43
- });
48
+ if (isMobileWindow()) {
49
+ // timeout to resolve focus issue in mobile
50
+ setTimeout(() => focusAccordion(editor, upPath), 0);
51
+ } else {
52
+ focusAccordion(editor, upPath);
53
+ }
44
54
  insertNewLine(editor);
45
55
  } catch (err) {
46
56
  console.log(err);
@@ -1,6 +1,5 @@
1
1
  import { Path, Transforms } from "slate";
2
2
  import insertNewLine from "./insertNewLine";
3
- import { windowVar } from "./helper";
4
3
  import { getCurrentElementText } from "../plugins/withHTML";
5
4
  export const insertButton = editor => {
6
5
  const button = {
@@ -11,22 +10,7 @@ export const insertButton = editor => {
11
10
  buttonLink: {
12
11
  linkType: "webAddress"
13
12
  },
14
- iconPosition: "start",
15
- bgColor: "#2563EB",
16
- textColor: "#FFF",
17
- borderRadius: {
18
- topLeft: 30,
19
- topRight: 30,
20
- bottomLeft: 30,
21
- bottomRight: 30
22
- },
23
- bannerSpacing: {
24
- left: 16,
25
- top: 8,
26
- right: 16,
27
- bottom: 8
28
- },
29
- ...(windowVar.lastButtonProps || {})
13
+ iconPosition: "start"
30
14
  };
31
15
  const hasText = getCurrentElementText(editor);
32
16
  const insertPath = hasText ? Path.next(Path.parent(editor?.selection.focus.path)) : editor?.selection.focus.path;
@@ -1,9 +1,10 @@
1
- import { useState } from "react";
1
+ import { useRef, useState } from "react";
2
2
  const useTableResize = ({
3
3
  parentDOM,
4
4
  size: defaultSize,
5
5
  onDone,
6
- minMaxProps = {}
6
+ minMaxProps = {},
7
+ isMobile
7
8
  }) => {
8
9
  const {
9
10
  width
@@ -18,6 +19,10 @@ const useTableResize = ({
18
19
  });
19
20
  const [resizing, setResizing] = useState(false);
20
21
  const [isDone, setIsDone] = useState(0);
22
+ const lastTouch = useRef({
23
+ x: 0,
24
+ y: 0
25
+ });
21
26
  const onLoad = defaultSize => {
22
27
  setSize({
23
28
  widthInPercent: 100,
@@ -25,29 +30,64 @@ const useTableResize = ({
25
30
  ...defaultSize
26
31
  });
27
32
  };
33
+ const handleEventListeners = type => {
34
+ const listener = type === "add" ? document.addEventListener : document.removeEventListener;
35
+ const onMoveListener = isMobile ? "touchmove" : "pointermove";
36
+ const onEndListener = isMobile ? "touchend" : "pointerup";
37
+ listener(onMoveListener, onMouseMove);
38
+ listener(onEndListener, onMouseUp);
39
+ };
40
+ const updateLastTouch = ({
41
+ clientX,
42
+ clientY
43
+ }) => {
44
+ lastTouch.current.x = clientX;
45
+ lastTouch.current.y = clientY;
46
+ };
28
47
  const onMouseDown = e => {
29
- e.preventDefault();
30
- document.addEventListener("pointermove", onMouseMove);
31
- document.addEventListener("pointerup", onMouseUp);
48
+ if (isMobile) {
49
+ updateLastTouch(e.touches[0]);
50
+ } else {
51
+ e.preventDefault();
52
+ }
53
+ handleEventListeners("add");
32
54
  setResizing(true);
33
55
  setIsDone(0);
34
56
  };
35
57
  const onMouseUp = () => {
36
- document.removeEventListener("pointermove", onMouseMove);
37
- document.removeEventListener("pointerup", onMouseUp);
58
+ handleEventListeners("remove");
38
59
  setResizing(false);
39
60
  setIsDone(1);
40
61
  };
41
62
  const onMouseMove = e => {
63
+ let {
64
+ movementX,
65
+ movementY
66
+ } = e || {};
67
+ if (e.type === "touchmove") {
68
+ // for mobile
69
+ const {
70
+ x,
71
+ y
72
+ } = lastTouch.current || {};
73
+ const touches = e.touches[0];
74
+ const {
75
+ clientX,
76
+ clientY
77
+ } = touches;
78
+ movementX = clientX - x;
79
+ movementY = clientY - y;
80
+ updateLastTouch(touches);
81
+ }
42
82
  const {
43
83
  minWidth
44
84
  } = minMaxProps || {};
45
85
  setSize(currentSize => {
46
86
  const width = currentSize?.width || parentDOM?.clientWidth;
47
- const calcWidth = width + e.movementX;
87
+ const calcWidth = width + movementX;
48
88
  return {
49
89
  width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
50
- height: currentSize.height + e.movementY,
90
+ height: currentSize.height + movementY,
51
91
  widthInPercent: calcWidth / width * 100
52
92
  };
53
93
  });
@@ -82,7 +82,8 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
82
82
  };
83
83
  export const draftToSlate = props => {
84
84
  const {
85
- data
85
+ data,
86
+ needLayout
86
87
  } = props;
87
88
  if (data?.blocks && data?.blocks?.length > 0) {
88
89
  const converted = data?.blocks?.reduce((a, b) => {
@@ -104,7 +105,7 @@ export const draftToSlate = props => {
104
105
  return data;
105
106
  } else {
106
107
  return [{
107
- type: "paragraph",
108
+ type: needLayout ? "title" : "paragraph",
108
109
  children: [{
109
110
  text: ""
110
111
  }]
@@ -1,10 +1,11 @@
1
- import { Editor, Transforms, Element, Node, Path, Range } from "slate";
1
+ import { Editor, Transforms, Element, Node, Path, Range, Point } from "slate";
2
2
  import { toggleBlock } from "./SlateUtilityFunctions";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { insertAccordion } from "./accordion";
5
- import { isListItem } from "./helper";
5
+ import { getNodeWithType, isListItem } from "./helper";
6
6
  import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
7
7
  import EDITORCMDS from "../common/EditorCmds";
8
+ import { ReactEditor } from "slate-react";
8
9
  const HOTKEYS = {
9
10
  b: "bold",
10
11
  i: "italic",
@@ -183,6 +184,20 @@ const checkListEnterEvent = (editor, type) => {
183
184
  insertNewLine(editor);
184
185
  }
185
186
  };
187
+ const removeAccordion = (editor, accordionPath) => {
188
+ Transforms.removeNodes(editor, {
189
+ at: accordionPath
190
+ });
191
+ Transforms.insertNodes(editor, {
192
+ type: "paragraph",
193
+ children: [{
194
+ text: ""
195
+ }]
196
+ }, {
197
+ at: accordionPath,
198
+ select: true
199
+ });
200
+ };
186
201
  export const enterEvent = (e, editor, isMobile) => {
187
202
  try {
188
203
  const ele = isListItem(editor);
@@ -225,9 +240,7 @@ export const enterEvent = (e, editor, isMobile) => {
225
240
  e.preventDefault();
226
241
  if (!text) {
227
242
  const accordionIndex = ele[1].slice(0, Math.max(ele[1].length - 1));
228
- Transforms.removeNodes(editor, {
229
- at: accordionIndex
230
- });
243
+ removeAccordion(editor, accordionIndex);
231
244
  } else {
232
245
  const nextPath = Path.next(Path.parent(ele[1]));
233
246
  insertAccordion(editor, nextPath);
@@ -329,6 +342,37 @@ export const enterEvent = (e, editor, isMobile) => {
329
342
  console.log(err);
330
343
  }
331
344
  };
345
+ export const handleAccordionOnBackspace = (e, editor) => {
346
+ try {
347
+ let isAccordion = false;
348
+ const [accordionDetails] = getNodeWithType(editor, "accordion-details");
349
+ const [accordionDetailsNode] = accordionDetails || [];
350
+ if (accordionDetailsNode) {
351
+ const dom = ReactEditor.toDOMNode(editor, accordionDetailsNode);
352
+ if (dom?.parentElement) {
353
+ dom.parentElement.style.display = "block";
354
+ }
355
+ }
356
+ const [accordionSummary] = getNodeWithType(editor, "accordion-summary");
357
+ const [accordionTitle, accordionTitlePath] = accordionSummary || [];
358
+ if (accordionTitle) {
359
+ // no selection
360
+ if (Range.isCollapsed(editor.selection)) {
361
+ const start = Editor.start(editor, accordionTitlePath);
362
+ const isCursorAtStart = Point.equals(editor.selection.focus, start);
363
+ if (isCursorAtStart) {
364
+ e.preventDefault();
365
+ const parentPath = Path.parent(accordionTitlePath);
366
+ removeAccordion(editor, parentPath);
367
+ isAccordion = true;
368
+ }
369
+ }
370
+ }
371
+ return isAccordion;
372
+ } catch (err) {
373
+ console.log(err);
374
+ }
375
+ };
332
376
  export const upDownArrowKeyEvents = (e, editor) => {
333
377
  try {
334
378
  const {
@@ -348,7 +392,7 @@ export const upDownArrowKeyEvents = (e, editor) => {
348
392
  }
349
393
  Transforms.move(editor, {
350
394
  distance: 0,
351
- unit: 'offset',
395
+ unit: "offset",
352
396
  reverse: false
353
397
  });
354
398
  Transforms.select(editor, {
@@ -7,43 +7,43 @@ export const sizeMap = {
7
7
  export const fontFamilyMap = {
8
8
  PoppinsRegular: "PoppinsRegular",
9
9
  PoppinsBold: "PoppinsBold",
10
- sans: "Helvetica,Arial, sans serif",
11
- serif: "Georgia, Times New Roaman,serif",
12
- monospace: "Monaco, Courier New,monospace",
13
- roboto: "'Roboto', sans-serif",
14
- qwitcher: "'Qwitcher Grypen', cursive",
15
- garamond: "'EB Garamond', serif",
16
- anton: "'Anton', sans-serif",
17
- dmserif: "'DM Serif Text', serif",
18
- inter: "'Inter', sans-serif",
19
- libre: "'Libre Baskerville', serif",
20
- montserrat: "'Montserrat', sans-serif",
21
- opensans: "'Open Sans', sans-serif",
22
- publicsans: "'Public Sans', sans-serif",
23
- raleway: "'Raleway', sans-serif",
24
- spacemono: "'Space Mono', sans-serif",
25
- bulgarian: "'Bulgarian Garamond', monospace",
26
- impact: "'Impact', serif",
27
- redacted: "'Redacted Script', cursive",
28
- greatVibes: "'Great Vibes', cursive",
29
- zeyada: "'Zeyada', cursive",
30
- allura: "'Allura', cursive",
31
- pinyon: "'Pinyon Script', cursive",
32
- muellerhoff: "'Herr Von Muellerhoff', cursive",
33
- dawning: "'Dawning of a New Day', cursive",
10
+ sans: 'Helvetica, Arial, "sans serif"',
11
+ serif: 'Georgia, "Times New Roaman", serif',
12
+ monospace: 'Monaco, "Courier New", monospace',
13
+ roboto: "Roboto, sans-serif",
14
+ qwitcher: '"Qwitcher Grypen", cursive',
15
+ garamond: '"EB Garamond", serif',
16
+ anton: "Anton, sans-serif",
17
+ dmserif: '"DM Serif Text", serif',
18
+ inter: "Inter, sans-serif",
19
+ libre: '"Libre Baskerville", serif',
20
+ montserrat: "Montserrat, sans-serif",
21
+ opensans: '"Open Sans", sans-serif',
22
+ publicsans: '"Public Sans", sans-serif',
23
+ raleway: "Raleway, sans-serif",
24
+ spacemono: '"Space Mono", sans-serif',
25
+ bulgarian: '"Bulgarian Garamond", monospace',
26
+ impact: "Impact, serif",
27
+ redacted: '"Redacted Script", cursive',
28
+ greatVibes: '"Great Vibes", cursive',
29
+ zeyada: "Zeyada, cursive",
30
+ allura: "Allura, cursive",
31
+ pinyon: '"Pinyon Script", cursive',
32
+ muellerhoff: '"Herr Von Muellerhoff", cursive',
33
+ dawning: '"Dawning of a New Day", cursive',
34
34
  // New Font Added for Type Signature
35
- comingsoon: "'Coming Soon', cursive",
36
- dancingScript: "'Dancing Script', cursive",
37
- engagement: "'Engagement', cursive",
38
- gaegu: "'Gaegu', cursive",
39
- ingridDarling: "'Ingrid Darling', cursive",
40
- kitaOne: "'Kite One', sans - serif",
41
- laBelleAurore: "'La Belle Aurore', cursive",
42
- lobster: "'Lobster', cursive",
43
- meaCulpa: "'Mea Culpa', cursive",
44
- meddon: "'Meddon', cursive",
45
- merriWeather: "'Merriweather', serif",
46
- theGirlNextDoor: "'The Girl Next Door', cursive"
35
+ comingsoon: '"Coming Soon", cursive',
36
+ dancingScript: '"Dancing Script", cursive',
37
+ engagement: "Engagement, cursive",
38
+ gaegu: "Gaegu, cursive",
39
+ ingridDarling: '"Ingrid Darling", cursive',
40
+ kitaOne: "Times",
41
+ laBelleAurore: '"La Belle Aurore", cursive',
42
+ lobster: "Lobster, cursive",
43
+ meaCulpa: '"Mea Culpa", cursive',
44
+ meddon: "Meddon, cursive",
45
+ merriWeather: "Merriweather, serif",
46
+ theGirlNextDoor: '"The Girl Next Door", cursive'
47
47
  };
48
48
  export const fontOptions = Object.keys(fontFamilyMap).map(m => {
49
49
  return {
@@ -62,7 +62,10 @@ export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
62
62
  export const headingMap = {
63
63
  headingOne: "32px",
64
64
  headingTwo: "24px",
65
- headingThree: "19px"
65
+ headingThree: "19px",
66
+ headingFour: "16px",
67
+ headingFive: "13px",
68
+ headingSix: "11px"
66
69
  };
67
70
  export const fontWeightOptions = [{
68
71
  text: "Bold",
@@ -12,10 +12,10 @@ export const FORM_NODE = () => {
12
12
  },
13
13
  buttonProps: {
14
14
  bannerSpacing: {
15
- left: 12,
16
- right: 12,
17
- top: 12,
18
- bottom: 12
15
+ left: 24,
16
+ right: 24,
17
+ top: 4,
18
+ bottom: 4
19
19
  }
20
20
  },
21
21
  workflow: [],
@@ -22,8 +22,14 @@ export const formField = data => {
22
22
  },
23
23
  fontFamily: data?.fontFamily ? data?.fontFamily : "",
24
24
  textSize: data?.textSize ? data?.textSize : "",
25
- textColor: data?.textColor ? data?.textColor : "",
26
- fontWeight: data?.fontWeight ? data?.fontWeight : "500"
25
+ textColor: data?.textColor && `${data?.textColor} !important`,
26
+ fontWeight: data?.fontWeight ? data?.fontWeight : "500",
27
+ borderRadius: {
28
+ topLeft: 8,
29
+ topRight: 8,
30
+ bottomLeft: 8,
31
+ bottomRight: 8
32
+ }
27
33
  };
28
34
  };
29
35
  export const insertGridItem = editor => {
@@ -2,6 +2,8 @@ import { Editor, Node, Transforms, Element, Path, Range, Text } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { getDevice } from "../helper/theme";
5
+ import { activeMark, getSelectedElementStyle } from "./SlateUtilityFunctions";
6
+ import { getCurrentElementText } from "../plugins/withHTML";
5
7
  export const windowVar = {};
6
8
  let ST_TIMEOUT = null;
7
9
  const BLOCKS = ["grid", "dataView"];
@@ -480,6 +482,34 @@ export const decodeString = str => {
480
482
  console.log(err);
481
483
  }
482
484
  };
485
+ export const getContrastColor = color => {
486
+ let r, g, b;
487
+
488
+ // Check if the color is in hex format
489
+ if (color.startsWith("#")) {
490
+ r = parseInt(color.substring(1, 3), 16);
491
+ g = parseInt(color.substring(3, 5), 16);
492
+ b = parseInt(color.substring(5, 7), 16);
493
+ }
494
+ // Check if the color is in RGB/RGBA format
495
+ else if (color.startsWith("rgb")) {
496
+ const rgbValues = color.replace(/^rgba?\(|\s+|\)$/g, "") // Remove the rgb/rgba and spaces
497
+ .split(","); // Split the values into an array
498
+
499
+ r = parseInt(rgbValues[0]);
500
+ g = parseInt(rgbValues[1]);
501
+ b = parseInt(rgbValues[2]);
502
+ } else {
503
+ // If the format is not recognized, default to black text
504
+ return "#000000";
505
+ }
506
+
507
+ // Calculate relative luminance
508
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
509
+
510
+ // Return black for light colors, white for dark colors
511
+ return luminance > 0.5 ? "#000000" : "#FFFFFF";
512
+ };
483
513
  export const onDeleteKey = (event, {
484
514
  editor
485
515
  }) => {
@@ -697,6 +727,10 @@ export const isRestrictedNode = (event, editor) => {
697
727
  return isNodeRestricted;
698
728
  }
699
729
  };
730
+ export function capitalizeFirstLetter(str) {
731
+ if (!str) return str;
732
+ return str.charAt(0).toUpperCase() + str.slice(1);
733
+ }
700
734
  export const insertLineBreakAtEndOfPath = (editor, path) => {
701
735
  try {
702
736
  const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
@@ -715,6 +749,13 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
715
749
  console.log(err);
716
750
  }
717
751
  };
752
+ export function isHavingSelection(editor) {
753
+ try {
754
+ return editor?.selection && !Range.isCollapsed(editor.selection);
755
+ } catch (err) {
756
+ console.log(err);
757
+ }
758
+ }
718
759
  const omitNodes = ["site-settings", "page-settings"];
719
760
  export function getInitialValue(value = [], readOnly) {
720
761
  if (readOnly === "readonly" && value?.length) {
@@ -745,20 +786,17 @@ export function getInitialValue(value = [], readOnly) {
745
786
  }
746
787
  return value;
747
788
  }
748
- export function capitalizeFirstLetter(str) {
749
- if (!str) return str;
750
- return str.charAt(0).toUpperCase() + str.slice(1);
751
- }
752
- export function isHavingSelection(editor) {
753
- try {
754
- return editor?.selection && !Range.isCollapsed(editor.selection);
755
- } catch (err) {
756
- console.log(err);
757
- }
758
- }
759
789
  export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
760
790
  return `${defaultCls} ${selected ? selectedClsName : ""}`;
761
791
  }
792
+ export function handleNegativeInteger(val) {
793
+ return val < 0 ? 0 : val;
794
+ }
795
+ export const containsSurrogatePair = text => {
796
+ // Match surrogate pairs (high and low surrogate)
797
+ const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
798
+ return surrogatePairRegex.test(text);
799
+ };
762
800
  export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
763
801
  try {
764
802
  const options = {
@@ -772,11 +810,6 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
772
810
  return [];
773
811
  }
774
812
  };
775
- export const containsSurrogatePair = text => {
776
- // Match surrogate pairs (high and low surrogate)
777
- const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
778
- return surrogatePairRegex.test(text);
779
- };
780
813
  export const getSlateDom = (editor, range) => {
781
814
  try {
782
815
  const slateDom = ReactEditor.toDOMRange(editor, range);
@@ -826,9 +859,24 @@ export const hideSlateSelection = () => {
826
859
  const root = document.documentElement;
827
860
  root.style.setProperty("--slate-highlight-bg", "none");
828
861
  };
829
- export function handleNegativeInteger(val) {
830
- return val < 0 ? 0 : val;
831
- }
862
+ export const insertSlashNode = (editor, insertNode) => {
863
+ try {
864
+ // Delete the currently selected text
865
+ editor.deleteFragment();
866
+ const currentText = getCurrentElementText(editor);
867
+ const currentPath = editor?.selection?.anchor?.path;
868
+ let insertAt = currentPath;
869
+ if (currentText?.trim()) {
870
+ const parentPath = Path.parent(currentPath);
871
+ insertAt = Path.next(parentPath);
872
+ }
873
+ Transforms.insertNodes(editor, insertNode, {
874
+ at: insertAt
875
+ });
876
+ } catch (err) {
877
+ console.log(err);
878
+ }
879
+ };
832
880
  export const isEverythingSelected = editor => {
833
881
  const {
834
882
  selection
@@ -858,4 +906,46 @@ export const getCurrentNodeText = editor => {
858
906
  } catch (error) {
859
907
  console.log("Error:", error);
860
908
  }
909
+ };
910
+ function convertColorToRgb(color) {
911
+ if (color?.startsWith("#")) {
912
+ // HEX to RGB
913
+ let hex = color.replace("#", "");
914
+ let r, g, b;
915
+ if (hex.length === 3) {
916
+ hex = hex.split("").map(x => x + x).join("");
917
+ }
918
+ if (hex.length === 6) {
919
+ [r, g, b] = [hex.substring(0, 2), hex.substring(2, 4), hex.substring(4, 6)].map(val => parseInt(val, 16));
920
+ return `rgb(${r}, ${g}, ${b})`;
921
+ }
922
+ } else {
923
+ return color;
924
+ }
925
+ }
926
+ export const getSelectedColor = (selectedColor, theme, hideThemeColors) => {
927
+ const colorVars = hideThemeColors ? null : theme?.vars?.colors;
928
+ let selectedValue = selectedColor;
929
+ if (colorVars) {
930
+ const convertedColor = convertColorToRgb(selectedColor);
931
+ Object.entries(theme.colors).forEach(([key, value]) => {
932
+ const convertedThemeColor = convertColorToRgb(value);
933
+ if (convertedThemeColor === convertedColor) {
934
+ selectedValue = colorVars[key];
935
+ }
936
+ });
937
+ }
938
+ return selectedValue;
939
+ };
940
+ const themeTextFormats = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
941
+ export const getSelectedElementColor = (editor, format, theme) => {
942
+ const [isThemeText] = Editor.nodes(editor, {
943
+ at: editor.selection,
944
+ match: n => themeTextFormats.includes(n?.type)
945
+ });
946
+ if (!isThemeText) {
947
+ return activeMark(editor, "color") || "#000000";
948
+ }
949
+ const color = getSelectedElementStyle(format, editor, format);
950
+ return getSelectedColor(color, theme);
861
951
  };
@@ -1,9 +1,5 @@
1
- import { Path, Transforms } from "slate";
2
- import insertNewLine from "./insertNewLine";
3
- import { getCurrentElementText } from "../plugins/withHTML";
1
+ import { insertSlashNode } from "./helper";
4
2
  export const insertSignature = editor => {
5
- const hasText = getCurrentElementText(editor);
6
- const insertPath = hasText ? Path.next(Path.parent(editor?.selection.focus.path)) : editor.selection.anchor.path;
7
3
  const signature = {
8
4
  type: "signature",
9
5
  alignment: "center",
@@ -17,8 +13,5 @@ export const insertSignature = editor => {
17
13
  text: " "
18
14
  }]
19
15
  };
20
- Transforms.insertNodes(editor, signature, {
21
- at: insertPath
22
- });
23
- insertNewLine(editor);
16
+ insertSlashNode(editor, signature);
24
17
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "10.1.4",
3
+ "version": "10.1.5",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -38,7 +38,6 @@
38
38
  "react-icons": "^4.10.1",
39
39
  "react-katex": "^3.0.1",
40
40
  "react-rnd": "^10.4.11",
41
- "react-scripts": "5.0.1",
42
41
  "react-signature-canvas": "^1.0.6",
43
42
  "react-slick": "^0.29.0",
44
43
  "sanitize-html": "^2.13.0",
@@ -69,7 +68,7 @@
69
68
  "storybook": "storybook dev -p 6006",
70
69
  "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
71
70
  "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
72
- "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files",
71
+ "publish:local": "rm -rf /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist --copy-files",
73
72
  "publish:flozy": "./publish-flozy.sh",
74
73
  "publish:flozy2": "./publish-flozy2.sh",
75
74
  "publish:permission": "chmod +x publish-flozy.sh && chmod +x publish-flozy2.sh"
@@ -122,7 +121,8 @@
122
121
  "prop-types": "^15.8.1",
123
122
  "source-map-explorer": "^2.5.3",
124
123
  "storybook": "^7.4.0",
125
- "webpack": "^5.88.2"
124
+ "webpack": "^5.88.2",
125
+ "react-scripts": "5.0.1"
126
126
  },
127
127
  "overrides": {
128
128
  "react-refresh": "0.11.0"