@flozy/editor 3.6.9 → 3.7.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. package/dist/Editor/CommonEditor.js +111 -169
  2. package/dist/Editor/Elements/Accordion/Accordion.js +7 -74
  3. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
  4. package/dist/Editor/Elements/Accordion/AccordionSummary.js +60 -4
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
  6. package/dist/Editor/Elements/Button/EditorButton.js +18 -34
  7. package/dist/Editor/Elements/ChipText/ChipText.js +3 -3
  8. package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  11. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  12. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +0 -1
  13. package/dist/Editor/Elements/Emoji/EmojiButton.js +2 -2
  14. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -16
  15. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  16. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  17. package/dist/Editor/Elements/Grid/Grid.js +1 -3
  18. package/dist/Editor/Elements/Grid/GridItem.js +2 -4
  19. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +3 -2
  20. package/dist/Editor/Elements/Link/Link.js +1 -6
  21. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  22. package/dist/Editor/Elements/Link/LinkPopup.js +3 -11
  23. package/dist/Editor/Elements/List/CheckList.js +2 -6
  24. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  25. package/dist/Editor/MiniEditor.js +1 -3
  26. package/dist/Editor/Styles/EditorStyles.js +2 -3
  27. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  28. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  29. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  30. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  31. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  32. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  33. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  34. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
  35. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
  36. package/dist/Editor/Toolbar/PopupTool/index.js +2 -9
  37. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  38. package/dist/Editor/common/ColorPickerButton.js +9 -25
  39. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  40. package/dist/Editor/common/Icon.js +2 -30
  41. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +2 -5
  42. package/dist/Editor/common/MentionsPopup/Styles.js +3 -6
  43. package/dist/Editor/common/Shorthands/elements.js +0 -54
  44. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  45. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  46. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  47. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -13
  48. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  49. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  50. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  51. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +28 -12
  52. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  53. package/dist/Editor/common/StyleBuilder/formStyle.js +26 -25
  54. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  55. package/dist/Editor/helper/index.js +0 -15
  56. package/dist/Editor/helper/theme.js +4 -190
  57. package/dist/Editor/hooks/useMouseMove.js +6 -15
  58. package/dist/Editor/plugins/withEmbeds.js +1 -1
  59. package/dist/Editor/plugins/withHTML.js +5 -47
  60. package/dist/Editor/plugins/withLayout.js +10 -15
  61. package/dist/Editor/plugins/withTable.js +2 -2
  62. package/dist/Editor/theme/ThemeList.js +173 -50
  63. package/dist/Editor/utils/SlateUtilityFunctions.js +25 -157
  64. package/dist/Editor/utils/button.js +17 -1
  65. package/dist/Editor/utils/events.js +4 -11
  66. package/dist/Editor/utils/font.js +37 -40
  67. package/dist/Editor/utils/form.js +2 -2
  68. package/dist/Editor/utils/helper.js +12 -71
  69. package/dist/Editor/utils/serializeToHTML.js +13 -25
  70. package/dist/index.js +1 -5
  71. package/package.json +4 -4
  72. package/dist/Editor/ChatEditor.js +0 -211
  73. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  74. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  75. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  76. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  77. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  78. package/dist/Editor/common/CustomDialog/index.js +0 -94
  79. package/dist/Editor/common/CustomDialog/style.js +0 -67
  80. package/dist/Editor/common/CustomSelect.js +0 -33
  81. package/dist/Editor/common/EditorCmds.js +0 -35
  82. package/dist/Editor/common/MUIIcon/index.js +0 -48
  83. package/dist/Editor/common/StyleBuilder/fieldTypes/loadIcon.js +0 -13
  84. package/dist/Editor/common/StyleBuilder/fieldTypes/mui_filled_icons.js +0 -2
  85. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  86. package/dist/Editor/theme/index.js +0 -144
  87. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  88. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  89. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  90. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  91. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  92. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  93. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  94. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  95. package/dist/Editor/themeSettings/icons.js +0 -60
  96. package/dist/Editor/themeSettings/index.js +0 -320
  97. package/dist/Editor/themeSettings/style.js +0 -152
  98. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  99. package/dist/Editor/themeSettingsAI/index.js +0 -356
  100. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  101. package/dist/Editor/themeSettingsAI/style.js +0 -247
  102. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +0 -361
@@ -3,7 +3,6 @@ import { toggleBlock } from "./SlateUtilityFunctions";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { insertAccordion } from "./accordion";
5
5
  import { isListItem } from "./helper";
6
- import EDITORCMDS from "../common/EditorCmds";
7
6
  const HOTKEYS = {
8
7
  b: "bold",
9
8
  i: "italic",
@@ -64,8 +63,7 @@ export const commands = props => {
64
63
  try {
65
64
  const {
66
65
  event,
67
- editor,
68
- needLayout
66
+ editor
69
67
  } = props;
70
68
  if (HOTKEYS[event.key]) {
71
69
  event.preventDefault();
@@ -75,11 +73,6 @@ export const commands = props => {
75
73
  } else {
76
74
  Editor.addMark(editor, HOTKEYS[event.key], true);
77
75
  }
78
- } else if (EDITORCMDS[event.key]) {
79
- EDITORCMDS[event.key](event, {
80
- editor,
81
- needLayout
82
- });
83
76
  }
84
77
  } catch (err) {
85
78
  console.log(err);
@@ -103,7 +96,7 @@ export const indentation = props => {
103
96
  Transforms.wrapNodes(editor, {
104
97
  type: listItem.type,
105
98
  children: [{
106
- text: ""
99
+ text: ''
107
100
  }]
108
101
  });
109
102
  } else {
@@ -160,7 +153,7 @@ const checkListEnterEvent = (editor, type) => {
160
153
  Transforms.insertNodes(editor, {
161
154
  type: "check-list-item",
162
155
  children: [{
163
- text: ""
156
+ text: ''
164
157
  }]
165
158
  }, {
166
159
  at: newPath
@@ -169,7 +162,7 @@ const checkListEnterEvent = (editor, type) => {
169
162
  // focus on the end of the line
170
163
  Transforms.move(editor, {
171
164
  distance: 1,
172
- unit: "line"
165
+ unit: 'line'
173
166
  });
174
167
  } else {
175
168
  toggleBlock(editor, type);
@@ -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: "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'
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"
47
47
  };
48
48
  export const fontOptions = Object.keys(fontFamilyMap).map(m => {
49
49
  return {
@@ -62,8 +62,5 @@ 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",
66
- "headingFour": "16px",
67
- "headingFive": "13px",
68
- "headingSix": "11px"
65
+ "headingThree": "19px"
69
66
  };
@@ -21,8 +21,8 @@ export const insertForm = (editor, item) => {
21
21
  workflow: [],
22
22
  children: [{
23
23
  ...formField()
24
- }],
25
- metadatamapping: "mappingToContactBoard"
24
+ }]
25
+ // metadatamapping: "mappingToContactBoard",
26
26
  } : item;
27
27
  Transforms.insertNodes(editor, grid);
28
28
  insertNewLine(editor);
@@ -216,17 +216,6 @@ const getScrollElement = () => {
216
216
  const scrollFrom = isSlateWrapperScroll ? slateWrapper : window;
217
217
  return scrollFrom;
218
218
  };
219
- const handleLinkBtnClick = (e, props) => {
220
- if (e) {
221
- e.preventDefault();
222
- e.stopPropagation();
223
- }
224
- if (props.target) {
225
- window.open(props.href);
226
- } else {
227
- window.location.href = props.href;
228
- }
229
- };
230
219
  export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
231
220
  const props = {};
232
221
  if (!readOnly) {
@@ -317,22 +306,23 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
317
306
 
318
307
  // for iphone fix
319
308
  if (props.component === "a" && props.href) {
320
- const isMobile = getDevice(window.innerWidth) === "xs";
321
- if (isMobile) {
309
+ if (getDevice(window.innerWidth) === "xs") {
322
310
  props.component = "button"; // iphone is opening two tabs, on open in new tab because of a tag.
323
311
  }
324
312
 
325
- let touchEndClicked = false;
326
313
  props.onTouchEnd = e => {
327
- touchEndClicked = true;
328
- handleLinkBtnClick(e, props);
329
- };
330
- props.onClick = e => {
331
- // This condition is used for mobile preview in the page editor.
332
- // 'touchEnd' will not work in the mobile page preview.
333
- if (!touchEndClicked && isMobile) {
334
- handleLinkBtnClick(e, props);
314
+ if (e) {
315
+ // onTouchEnd will get triggered on web, only for image element, for that case event is getting undefined.
316
+ e.preventDefault();
317
+ e.stopPropagation();
318
+ }
319
+ if (props.target) {
320
+ window.open(props.href);
321
+ } else {
322
+ window.location.href = props.href;
335
323
  }
324
+ };
325
+ props.onClick = () => {
336
326
  return false;
337
327
  };
338
328
  }
@@ -377,53 +367,4 @@ export const decodeString = str => {
377
367
  } catch (err) {
378
368
  console.log(err);
379
369
  }
380
- };
381
- export const getContrastColor = color => {
382
- let r, g, b;
383
-
384
- // Check if the color is in hex format
385
- if (color.startsWith("#")) {
386
- r = parseInt(color.substring(1, 3), 16);
387
- g = parseInt(color.substring(3, 5), 16);
388
- b = parseInt(color.substring(5, 7), 16);
389
- }
390
- // Check if the color is in RGB/RGBA format
391
- else if (color.startsWith("rgb")) {
392
- const rgbValues = color.replace(/^rgba?\(|\s+|\)$/g, "") // Remove the rgb/rgba and spaces
393
- .split(","); // Split the values into an array
394
-
395
- r = parseInt(rgbValues[0]);
396
- g = parseInt(rgbValues[1]);
397
- b = parseInt(rgbValues[2]);
398
- } else {
399
- // If the format is not recognized, default to black text
400
- return "#000000";
401
- }
402
-
403
- // Calculate relative luminance
404
- const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
405
-
406
- // Return black for light colors, white for dark colors
407
- return luminance > 0.5 ? "#000000" : "#FFFFFF";
408
- };
409
- export const onDeleteKey = (event, {
410
- editor
411
- }) => {
412
- try {
413
- const {
414
- selection
415
- } = editor;
416
- if (selection) {
417
- // If text is selected, delete the selection
418
- Transforms.delete(editor);
419
- } else {
420
- // If no text is selected, handle deleting the next character/element
421
- Transforms.delete(editor, {
422
- unit: "character",
423
- reverse: false
424
- });
425
- }
426
- } catch (err) {
427
- console.log(err);
428
- }
429
370
  };
@@ -1,34 +1,22 @@
1
1
  import { renderToString } from "react-dom/server";
2
- import { getBlock } from "./chatEditor/SlateUtilityFunctions";
2
+ import { getBlock } from "./SlateUtilityFunctions";
3
3
  const serializeToHTML = nodes => {
4
4
  try {
5
- const htmlString = nodes.map(node => {
6
- // Render function for each node
7
- const renderNode = node => {
5
+ const htmlString = nodes.map(n => {
6
+ if (n) {
8
7
  const props = {
9
- element: node,
10
- children: node.children?.map(child => {
11
- // Render each child node
12
- if (child.text !== undefined) {
13
- // For text nodes, return the text
14
- return child.text;
15
- }
16
- // For other nodes, render them recursively
17
- return renderNode(child);
18
- }) || []
8
+ element: n,
9
+ children: n?.children
19
10
  };
20
- return getBlock(props);
21
- };
22
-
23
- // Render root node to HTML string
24
- const reactElement = renderNode(node);
25
- return renderToString(reactElement);
26
- }).join(''); // Combine all HTML strings
27
-
28
- return htmlString;
11
+ const reactString = renderToString(getBlock(props));
12
+ return reactString;
13
+ } else {
14
+ return "";
15
+ }
16
+ });
17
+ console.log(htmlString);
29
18
  } catch (err) {
30
- console.error('Error serializing to HTML:', err);
31
- return '';
19
+ console.log(err);
32
20
  }
33
21
  };
34
22
  export default serializeToHTML;
package/dist/index.js CHANGED
@@ -2,11 +2,7 @@ import Collaborative from "./Editor/CollaborativeEditor";
2
2
  import CommonEditor from "./Editor/CommonEditor";
3
3
  import Mini from "./Editor/MiniEditor";
4
4
  import EditorInFrame from "./Editor/IframeEditor";
5
- import Chat from "./Editor/ChatEditor";
6
- import Emoji from "./Editor/Elements/Emoji/EmojiPicker";
7
5
  export const Editor = CommonEditor;
8
6
  export const MiniEditor = Mini;
9
7
  export const CollaborativeEditor = Collaborative;
10
- export const IframeEditor = EditorInFrame;
11
- export const ChatEditor = Chat;
12
- export const EmojiPicker = Emoji;
8
+ export const IframeEditor = EditorInFrame;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.6.9",
3
+ "version": "3.7.1",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -58,11 +58,11 @@
58
58
  "prepare": "husky install .husky",
59
59
  "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
60
60
  "start": "craco start",
61
- "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
61
+ "build": "craco build",
62
62
  "test": "craco test --passWithNoTests",
63
63
  "eject": "react-scripts eject",
64
- "storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook dev -p 6006",
65
- "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
64
+ "storybook": "storybook dev -p 6006",
65
+ "build-storybook": "storybook build",
66
66
  "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
67
67
  "publish:local": "rm -rf /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist --copy-files"
68
68
  },
@@ -1,211 +0,0 @@
1
- import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
2
- import { Editable, Slate, ReactEditor } from 'slate-react';
3
- import { createEditor } from 'slate';
4
- import { useDebounce } from "use-debounce";
5
- import withCommon from "./hooks/withCommon";
6
- import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
7
- import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
8
- import { commands, mentionsEvent } from "./utils/events";
9
- import { insertEmoji } from "./utils/emoji";
10
- import { draftToSlate } from "./utils/draftToSlate";
11
- import MentionsPopup from "./common/MentionsPopup";
12
- import { serializeToText } from "./utils/serializeToText";
13
- import useMentions from "./hooks/useMentions";
14
- import Shorthands from "./common/Shorthands";
15
- import usePopupStyle from "./Toolbar/PopupTool/PopupToolStyle";
16
- import { EditorProvider } from "./hooks/useMouseMove";
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- import { jsxs as _jsxs } from "react/jsx-runtime";
19
- const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
20
- const {
21
- id,
22
- theme,
23
- content,
24
- readOnly,
25
- otherProps,
26
- needLayout = false,
27
- toolBar = true,
28
- onSave,
29
- onsubmit
30
- } = props;
31
- const classes = usePopupStyle(theme);
32
- const convertedContent = draftToSlate({
33
- data: content
34
- });
35
- const [isInteracted, setIsInteracted] = useState(false);
36
- const [value, setValue] = useState(convertedContent);
37
- const [loadedValue] = useState(value);
38
- const [deboundedValue] = useDebounce(value, 500);
39
- const editor = useMemo(() => {
40
- return withCommon(createEditor(), {
41
- needLayout
42
- });
43
- }, []);
44
- const isReadOnly = readOnly === "readonly";
45
- useImperativeHandle(ref, () => ({
46
- emojiClick: emoji => {
47
- if (editor) {
48
- insertEmoji(editor, emoji?.native, editor.selection);
49
- ReactEditor.focus(editor);
50
- }
51
- },
52
- // Focus enable
53
- enableFocus: () => {
54
- if (editor) {
55
- ReactEditor.focus(editor);
56
- }
57
- }
58
- }));
59
- useEffect(() => {
60
- setValue(draftToSlate({
61
- data: content
62
- }));
63
- }, [id, content]);
64
- useEffect(() => {
65
- if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
66
- const {
67
- value: strVal,
68
- ...restVal
69
- } = getOnSaveData(deboundedValue);
70
- onSave(strVal, restVal);
71
- }
72
- }, [deboundedValue]);
73
- const getOnSaveData = val => {
74
- const text = serializeToText(val);
75
- const title = val?.find(f => f.type === "title");
76
- return {
77
- value: JSON.stringify(val),
78
- text: text,
79
- title: serializeToText(title?.children) || "Untitled"
80
- };
81
- };
82
- const {
83
- CHARACTERS = [],
84
- hideTools
85
- // needLayout = true,
86
- } = otherProps || {};
87
- const mentionsRef = useRef();
88
- const customProps = {
89
- ...(otherProps || {}),
90
- readOnly: isReadOnly,
91
- editorPlaceholder: "Write Something",
92
- page_id: 1
93
- };
94
- const [mentions, setMentions] = useMentions({
95
- editor,
96
- selection: editor?.selection
97
- });
98
- const {
99
- search,
100
- target,
101
- index
102
- } = mentions;
103
- let {
104
- type
105
- } = mentions;
106
- if (type && type === "elements" && hideTools.indexOf("slash") > -1) {
107
- type = null;
108
- }
109
- const chars = type ? Shorthands[type]({
110
- ...mentions,
111
- CHARACTERS,
112
- hideTools: hideTools
113
- }) : [];
114
- const Leaf = ({
115
- attributes,
116
- children,
117
- leaf
118
- }) => {
119
- children = getMarked(leaf, children);
120
- return /*#__PURE__*/_jsx("span", {
121
- ...attributes,
122
- children: children
123
- });
124
- };
125
- const handleEditorChange = newValue => {
126
- setValue(newValue);
127
- if (!isInteracted) {
128
- setIsInteracted(true);
129
- }
130
- };
131
- const Element = props => {
132
- return getBlock(props);
133
- };
134
- const renderElement = useCallback(props => {
135
- return /*#__PURE__*/_jsx(Element, {
136
- ...props,
137
- customProps: customProps
138
- });
139
- }, []);
140
- const renderLeaf = useCallback(props => {
141
- return /*#__PURE__*/_jsx(Leaf, {
142
- ...props,
143
- customProps: customProps
144
- });
145
- }, []);
146
- const onKeyDown = useCallback(event => {
147
- const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
148
- const isCtrlKey = event.ctrlKey || isMetaKey;
149
- if (target && chars.length > 0 && !isCtrlKey) {
150
- mentionsEvent({
151
- event,
152
- mentions,
153
- setMentions,
154
- chars,
155
- target,
156
- editor,
157
- type,
158
- mentionsRef
159
- });
160
- } else if (isCtrlKey) {
161
- commands({
162
- event,
163
- editor
164
- });
165
- } else if (event.key === "Enter" && !event.shiftKey) {
166
- const {
167
- value: strVal,
168
- ...restVal
169
- } = getOnSaveData(value);
170
- onsubmit(false, {
171
- strVal,
172
- restVal
173
- });
174
- }
175
- }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
176
- const handleClose = () => {};
177
- return /*#__PURE__*/_jsx(EditorProvider, {
178
- theme: theme,
179
- editor: editor,
180
- children: /*#__PURE__*/_jsxs(Slate, {
181
- editor: editor,
182
- initialValue: value,
183
- onChange: handleEditorChange,
184
- children: [toolBar && /*#__PURE__*/_jsx(MiniTextFormat, {
185
- classes: classes,
186
- editor: editor,
187
- closeMainPopup: handleClose
188
- }), /*#__PURE__*/_jsx(Editable, {
189
- className: "chatEditorRoot",
190
- renderElement: renderElement,
191
- renderLeaf: renderLeaf,
192
- placeholder: "Start typing ...",
193
- spellCheck: true,
194
- autoFocus: true,
195
- onKeyDown: onKeyDown
196
- }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
197
- ref: mentionsRef,
198
- mentions: mentions,
199
- setMentions: setMentions,
200
- editor: editor,
201
- target: target,
202
- index: index,
203
- chars: chars,
204
- type: type,
205
- theme: theme
206
- }) : null]
207
- }, id)
208
- });
209
- });
210
- ChatEditor.displayName = "ChatEditor";
211
- export default ChatEditor;
@@ -1,28 +0,0 @@
1
- const LinkPopupStyles = theme => ({
2
- addLinkField: {
3
- "& .MuiOutlinedInput-input": {
4
- fontSize: "12px",
5
- fontWeight: 500,
6
- color: `${theme?.palette?.editor?.textColor} !important`
7
- },
8
- "& .MuiFormHelperText-root": {
9
- color: `${theme?.palette?.editor?.textColor} !important`
10
- },
11
- "& .MuiOutlinedInput-root": {
12
- boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
13
- color: `${theme?.palette?.editor?.textColor} !important`,
14
- borderRadius: "7px",
15
- "& fieldset": {
16
- borderColor: "#D8DDE1"
17
- },
18
- "&:hover fieldset": {
19
- borderColor: "#64748B"
20
- },
21
- "&.Mui-focused fieldset": {
22
- borderColor: "#2563EB"
23
- },
24
- "& .MuiFormLabel-root": {}
25
- }
26
- }
27
- });
28
- export default LinkPopupStyles;