@flozy/editor 4.6.2 → 4.6.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. package/dist/Editor/CommonEditor.js +17 -17
  2. package/dist/Editor/Editor.css +32 -1
  3. package/dist/Editor/Elements/AI/AIInput.js +4 -5
  4. package/dist/Editor/Elements/AI/PopoverAIInput.js +40 -29
  5. package/dist/Editor/Elements/AI/Styles.js +1 -1
  6. package/dist/Editor/Elements/Button/EditorButton.js +8 -4
  7. package/dist/Editor/Elements/Divider/Divider.js +115 -8
  8. package/dist/Editor/Elements/Divider/DividerPopup.js +24 -0
  9. package/dist/Editor/Elements/Embed/Embed.css +1 -1
  10. package/dist/Editor/Elements/Embed/Image.js +3 -2
  11. package/dist/Editor/Elements/Embed/Video.js +7 -4
  12. package/dist/Editor/Elements/Emoji/EmojiButton.js +1 -23
  13. package/dist/Editor/Elements/Form/Form.js +0 -1
  14. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  15. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +56 -3
  16. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +2 -0
  17. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +7 -3
  18. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +16 -2
  19. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +8 -2
  20. package/dist/Editor/Elements/FreeGrid/styles.js +83 -2
  21. package/dist/Editor/Elements/Signature/SignaturePopup.js +24 -7
  22. package/dist/Editor/Elements/Signature/Signed.js +1 -1
  23. package/dist/Editor/Elements/SimpleText/index.js +7 -8
  24. package/dist/Editor/Elements/Table/TableRow.js +1 -1
  25. package/dist/Editor/Styles/EditorStyles.js +2 -2
  26. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  27. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +35 -29
  28. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +35 -30
  29. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -4
  30. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -38
  31. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -1
  32. package/dist/Editor/Toolbar/PopupTool/index.js +18 -6
  33. package/dist/Editor/common/FontLoader/FontLoader.js +6 -6
  34. package/dist/Editor/common/Icon.js +1 -1
  35. package/dist/Editor/common/LinkSettings/index.js +3 -3
  36. package/dist/Editor/common/LinkSettings/navOptions.js +4 -1
  37. package/dist/Editor/common/RnD/DragOver/index.js +0 -1
  38. package/dist/Editor/common/RnD/ElementOptions/Actions.js +15 -2
  39. package/dist/Editor/common/RnD/ElementOptions/styles.js +5 -0
  40. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -1
  41. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +53 -0
  42. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +32 -2
  43. package/dist/Editor/common/RnD/ElementSettings/Settings/DividerSettings.js +49 -0
  44. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +3 -1
  45. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +5 -2
  46. package/dist/Editor/common/RnD/RnDCopy.js +2 -0
  47. package/dist/Editor/common/RnD/Utils/gridDropItem.js +5 -3
  48. package/dist/Editor/common/RnD/VirtualElement/index.js +1 -1
  49. package/dist/Editor/common/RnD/index.js +67 -37
  50. package/dist/Editor/common/Section/index.js +11 -1
  51. package/dist/Editor/common/Section/styles.js +16 -0
  52. package/dist/Editor/common/StyleBuilder/dividerStyles.js +56 -0
  53. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +19 -0
  54. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +19 -4
  55. package/dist/Editor/common/SwipeableDrawer/index.js +4 -15
  56. package/dist/Editor/common/SwipeableDrawer/style.js +3 -11
  57. package/dist/Editor/common/Uploader.js +2 -1
  58. package/dist/Editor/common/iconslist.js +23 -0
  59. package/dist/Editor/helper/RnD/focusNode.js +74 -0
  60. package/dist/Editor/helper/index.js +5 -2
  61. package/dist/Editor/helper/theme.js +2 -2
  62. package/dist/Editor/hooks/useBreakpoints.js +1 -1
  63. package/dist/Editor/hooks/useDragging.js +51 -0
  64. package/dist/Editor/hooks/useMouseMove.js +5 -4
  65. package/dist/Editor/hooks/withCommon.js +1 -0
  66. package/dist/Editor/hooks/withRestrictedNodes.js +48 -0
  67. package/dist/Editor/utils/Decorators/highlightSelection.js +16 -0
  68. package/dist/Editor/utils/Decorators/index.js +3 -2
  69. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +16 -1
  70. package/dist/Editor/utils/SlateUtilityFunctions.js +33 -5
  71. package/dist/Editor/utils/events.js +71 -0
  72. package/dist/Editor/utils/helper.js +16 -0
  73. package/package.json +1 -1
@@ -0,0 +1,51 @@
1
+ import { useState, useCallback, useRef } from "react";
2
+ const initialState = {
3
+ id: null,
4
+ active: false,
5
+ isDragging: 0,
6
+ dragOver: false,
7
+ dragOverType: null
8
+ };
9
+ const useDragging = () => {
10
+ const [dragging, setDragging] = useState({
11
+ ...initialState
12
+ });
13
+
14
+ // Ref to keep the latest draggingStatus
15
+ const draggingRef = useRef(dragging);
16
+ const updateDragging = newStatus => {
17
+ setDragging(prevStatus => {
18
+ const updatedStatus = {
19
+ ...prevStatus,
20
+ ...newStatus
21
+ };
22
+ draggingRef.current = updatedStatus; // Update the ref to hold latest status
23
+ return updatedStatus;
24
+ });
25
+ };
26
+ const startDragging = useCallback(data => {
27
+ // console.log("dragissue", "startDragging");
28
+ updateDragging({
29
+ ...data
30
+ });
31
+ }, []);
32
+ const stopDragging = useCallback(() => {
33
+ // console.log("dragissue", "stopDragging");
34
+ updateDragging({
35
+ ...initialState
36
+ });
37
+ }, []);
38
+ const setDragOver = useCallback(isOver => {
39
+ updateDragging({
40
+ dragOver: isOver
41
+ });
42
+ }, []);
43
+ return {
44
+ dragging,
45
+ draggingRef,
46
+ startDragging,
47
+ stopDragging,
48
+ setDragOver
49
+ };
50
+ };
51
+ export default useDragging;
@@ -98,10 +98,11 @@ export const EditorProvider = ({
98
98
  updateDragging,
99
99
  fontFamilies,
100
100
  setFontFamilies
101
- }), [path, editor?.selection, selectedPath, selectedElement, dragging.active, dragging.isDragging, dragging.dragOver, contextMenu, openAI, popupType, drop
102
- // fontFamilies,
103
- ]);
104
-
101
+ }), [path, editor?.selection, selectedPath, selectedElement,
102
+ // dragging.active,
103
+ // dragging.isDragging,
104
+ // dragging.dragOver,
105
+ contextMenu, openAI, popupType, drop]);
105
106
  return /*#__PURE__*/_jsx(EditorContext.Provider, {
106
107
  value: otherValues,
107
108
  children: children
@@ -9,6 +9,7 @@ import withLayout from "../plugins/withLayout";
9
9
  import withHtml from "../plugins/withHTML";
10
10
  import withErrorHandling from "./withErrorHandling";
11
11
  import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
12
+ import withRestrictedNodes from "./withRestrictedNodes";
12
13
  const withCommon = (props, {
13
14
  needLayout = false,
14
15
  isChatEditor = false
@@ -0,0 +1,48 @@
1
+ import { Editor } from "slate";
2
+
3
+ // Custom insertText that prevents updates in specific node types
4
+ const withRestrictedNodes = editor => {
5
+ const {
6
+ insertText,
7
+ deleteBackward
8
+ } = editor;
9
+
10
+ // Override insertText
11
+ editor.insertText = text => {
12
+ const {
13
+ selection
14
+ } = editor;
15
+ if (selection) {
16
+ const [node] = Editor.node(editor, selection);
17
+ console.log(node);
18
+
19
+ // Prevent insertText if node type matches
20
+ if (node && node.type === "restrictedType") {
21
+ return; // Skip inserting text
22
+ }
23
+ }
24
+
25
+ // Call the original insertText if node type does not match
26
+ insertText(text);
27
+ };
28
+
29
+ // Similarly override deleteBackward if needed
30
+ editor.deleteBackward = (...args) => {
31
+ const {
32
+ selection
33
+ } = editor;
34
+ if (selection) {
35
+ const [node] = Editor.node(editor, selection);
36
+
37
+ // Prevent deletion if node type matches
38
+ if (node && node.type === "restrictedType") {
39
+ return; // Skip deleting text
40
+ }
41
+ }
42
+
43
+ // Call the original deleteBackward if node type does not match
44
+ deleteBackward(...args);
45
+ };
46
+ return editor;
47
+ };
48
+ export default withRestrictedNodes;
@@ -0,0 +1,16 @@
1
+ import { Editor, Range, Text } from "slate";
2
+ const highlightSelection = ([node, path], editor = {}) => {
3
+ if (Text.isText(node) && editor?.selection) {
4
+ const intersection = Range.intersection(editor.selection, Editor.range(editor, path));
5
+ if (intersection == null) {
6
+ return [];
7
+ }
8
+ const range = {
9
+ highlight: true,
10
+ ...intersection
11
+ };
12
+ return [range];
13
+ }
14
+ return [];
15
+ };
16
+ export default highlightSelection;
@@ -1,5 +1,6 @@
1
+ import highlightSelection from "./highlightSelection";
1
2
  import link from "./link";
2
- const decorators = d => {
3
- return [...link(d)];
3
+ const decorators = (d, editor) => {
4
+ return [...link(d, editor), ...highlightSelection(d, editor)];
4
5
  };
5
6
  export default decorators;
@@ -1,6 +1,7 @@
1
1
  import { Editor, Transforms, Node, Path } from "slate";
2
2
  import { isSelectionInNodeType, getCaretPosition, onPasteRnDNode, bringItemToFB } from "../../helper";
3
3
  import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
4
+ import { ReactEditor } from "slate-react";
4
5
  const RND_ITEM_TYPES = ["freegrid", "freegridItem", "freegridBox"];
5
6
  const parsePath = path => path?.split("|").map(m => parseInt(m));
6
7
  const selectAll = (event, {
@@ -157,7 +158,7 @@ const onBringBack = (event, {
157
158
  console.log(err);
158
159
  }
159
160
  };
160
- export const onInsertFragment = async ({
161
+ export const onInsertFragment = ({
161
162
  editor,
162
163
  slateNodes
163
164
  }) => {
@@ -181,6 +182,20 @@ export const onInsertFragment = async ({
181
182
  setSelectedElement: window.updateSelectedItem
182
183
  });
183
184
  }
185
+ } else {
186
+ ReactEditor.focus(editor);
187
+ if (editor.children.length === 0) {
188
+ Transforms.insertNodes(editor, {
189
+ text: ""
190
+ }, {
191
+ at: [0]
192
+ });
193
+ }
194
+ Transforms.insertNodes(editor, [{
195
+ ...slateNodes
196
+ }], {
197
+ at: [editor.children.length - 1]
198
+ });
184
199
  }
185
200
  } catch (err) {
186
201
  console.log(err);
@@ -34,7 +34,7 @@ import SimpleText from "../Elements/SimpleText";
34
34
  import CheckList from "../Elements/List/CheckList";
35
35
  import { getTextColor, isEmptyTextNode } from "../helper";
36
36
  import Attachments from "../Elements/Attachments/Attachments";
37
- import { getBreakPointsValue } from "../helper/theme";
37
+ import { getBreakPointsValue, groupByBreakpoint } from "../helper/theme";
38
38
  import Variables from "../Elements/Variables/Variable";
39
39
  import insertNewLine from "./insertNewLine";
40
40
  import Divider from "../Elements/Divider/Divider";
@@ -216,10 +216,20 @@ export const getMarked = (leaf, children, theme) => {
216
216
  className: className,
217
217
  component: "span",
218
218
  sx: {
219
- ...wrapThemeBreakpoints({
220
- lg: sizeMap[leaf.fontSize] || leaf.fontSize,
221
- ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
222
- }, "fontSize", theme),
219
+ ...groupByBreakpoint({
220
+ fontSize: {
221
+ lg: sizeMap[leaf.fontSize] || leaf.fontSize,
222
+ ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
223
+ }
224
+ }, theme),
225
+ // ...wrapThemeBreakpoints(
226
+ // {
227
+ // lg: sizeMap[leaf.fontSize] || leaf.fontSize,
228
+ // ...getBreakPointsValue(leaf.fontSize, null, "overrideText"),
229
+ // },
230
+ // "fontSize",
231
+ // theme
232
+ // ),
223
233
  // fontSize: {
224
234
  // lg: sizeMap[leaf.fontSize] || leaf.fontSize,
225
235
  // ...getBreakPointsValue(leaf.fontSize, null, "overrideText"),
@@ -232,6 +242,15 @@ export const getMarked = (leaf, children, theme) => {
232
242
  })
233
243
  });
234
244
  }
245
+ if (leaf.highlight) {
246
+ children = /*#__PURE__*/_jsx("span", {
247
+ style: {
248
+ background: "#EAEBFE",
249
+ color: "inherit"
250
+ },
251
+ children: children
252
+ });
253
+ }
235
254
  if (leaf.decoration === "link") {
236
255
  children = /*#__PURE__*/_jsx("a", {
237
256
  style: {
@@ -529,6 +548,15 @@ export const getBlock = props => {
529
548
  return /*#__PURE__*/_jsx(Code, {
530
549
  ...props
531
550
  });
551
+ // RnD Focus Node
552
+ case "temp":
553
+ return /*#__PURE__*/_jsx("span", {
554
+ ...attributes,
555
+ ...element.attr,
556
+ className: "temp-focus-node",
557
+ contentEditable: false,
558
+ children: children
559
+ });
532
560
  default:
533
561
  return /*#__PURE__*/_jsx(SimpleText, {
534
562
  ...props,
@@ -282,6 +282,77 @@ export const enterEvent = (e, editor, isMobile) => {
282
282
  default:
283
283
  }
284
284
  }
285
+ // Handle blockquote splitting
286
+ const [blockquote] = Editor.nodes(editor, {
287
+ match: n => Element.isElement(n) && n.type === "blockquote"
288
+ });
289
+ if (blockquote) {
290
+ e.preventDefault();
291
+ const {
292
+ selection
293
+ } = editor;
294
+ if (selection && Range.isCollapsed(selection)) {
295
+ const isAtEnd = Editor.isEnd(editor, selection.anchor, blockquote[1]);
296
+ if (isAtEnd) {
297
+ Transforms.insertNodes(editor, {
298
+ type: "paragraph",
299
+ children: [{
300
+ text: ""
301
+ }]
302
+ });
303
+ const newLocation = Editor.after(editor, selection);
304
+ if (newLocation) {
305
+ Transforms.select(editor, newLocation);
306
+ }
307
+ } else {
308
+ Transforms.splitNodes(editor, {
309
+ always: true
310
+ });
311
+ Transforms.setNodes(editor, {
312
+ type: "paragraph"
313
+ }, {
314
+ at: editor.selection
315
+ });
316
+ }
317
+ }
318
+ return;
319
+ }
320
+ } catch (err) {
321
+ console.log(err);
322
+ }
323
+ };
324
+ export const upDownArrowKeyEvents = (e, editor) => {
325
+ try {
326
+ const {
327
+ selection
328
+ } = editor;
329
+ if (!selection || Range.isCollapsed(selection)) {
330
+ return;
331
+ }
332
+ const parentPath = selection.anchor.path.slice(0, -1);
333
+ const nextNodePath = [...parentPath];
334
+ const index = parentPath[parentPath.length - 1];
335
+ const parentNode = Editor.parent(editor, parentPath);
336
+ if (parentNode.children[index + 1]) {
337
+ nextNodePath[parentPath.length - 1] += 1;
338
+ } else {
339
+ return;
340
+ }
341
+ Transforms.move(editor, {
342
+ distance: 0,
343
+ unit: 'offset',
344
+ reverse: false
345
+ });
346
+ Transforms.select(editor, {
347
+ anchor: {
348
+ path: nextNodePath,
349
+ offset: 0
350
+ },
351
+ focus: {
352
+ path: nextNodePath,
353
+ offset: 0
354
+ }
355
+ });
285
356
  } catch (err) {
286
357
  console.log(err);
287
358
  }
@@ -471,6 +471,22 @@ export const editorThemeStyle = {
471
471
  export const getEditorTheme = (themeType = "light") => {
472
472
  return editorThemeStyle[themeType] || {};
473
473
  };
474
+ export const isFreeGrid = (nodes, types = ["freegrid", "freegridItem", "freegridBox"]) => {
475
+ try {
476
+ for (const node of nodes) {
477
+ if (types.includes(node.type)) {
478
+ return true;
479
+ }
480
+ if (node.children && isFreeGrid(node.children, types)) {
481
+ return true;
482
+ }
483
+ }
484
+ return false;
485
+ } catch (err) {
486
+ console.log("isFreeGrid error:", err);
487
+ return false;
488
+ }
489
+ };
474
490
  export const getPreviousNode = editor => {
475
491
  try {
476
492
  const parentPath = Path.parent(editor?.selection?.anchor?.path);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.6.2",
3
+ "version": "4.6.4",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"