@flozy/editor 3.7.9 → 3.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. package/dist/Editor/CommonEditor.js +111 -169
  2. package/dist/Editor/Editor.css +12 -1
  3. package/dist/Editor/Elements/AI/AIInput.js +5 -16
  4. package/dist/Editor/Elements/AI/PopoverAIInput.js +17 -31
  5. package/dist/Editor/Elements/AI/Styles.js +1 -2
  6. package/dist/Editor/Elements/Accordion/Accordion.js +7 -74
  7. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
  8. package/dist/Editor/Elements/Accordion/AccordionSummary.js +74 -7
  9. package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
  10. package/dist/Editor/Elements/Button/EditorButton.js +16 -28
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  14. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  15. package/dist/Editor/Elements/Embed/Image.js +20 -28
  16. package/dist/Editor/Elements/Embed/Video.js +11 -15
  17. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  18. package/dist/Editor/Elements/Grid/Grid.js +0 -2
  19. package/dist/Editor/Elements/Grid/GridItem.js +1 -3
  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/Table/Table.js +1 -1
  24. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  25. package/dist/Editor/MiniEditor.js +1 -3
  26. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  27. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  28. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  29. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  30. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  31. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  32. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  33. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
  34. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
  35. package/dist/Editor/Toolbar/PopupTool/index.js +5 -6
  36. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  37. package/dist/Editor/assets/svg/AIIcons.js +1 -153
  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/LinkSettings/NavComponents.js +2 -5
  42. package/dist/Editor/common/LinkSettings/index.js +1 -2
  43. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  44. package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
  45. package/dist/Editor/common/Shorthands/elements.js +0 -54
  46. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  47. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  48. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  49. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +29 -33
  50. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +25 -31
  51. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  52. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  53. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  54. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  55. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  56. package/dist/Editor/helper/theme.js +4 -189
  57. package/dist/Editor/hooks/useMouseMove.js +2 -4
  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/helper.js +13 -73
  68. package/package.json +1 -2
  69. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
  70. package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -167
  71. package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
  72. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  73. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  74. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  75. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  76. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  77. package/dist/Editor/common/CustomDialog/index.js +0 -94
  78. package/dist/Editor/common/CustomDialog/style.js +0 -67
  79. package/dist/Editor/common/CustomSelect.js +0 -33
  80. package/dist/Editor/common/EditorCmds.js +0 -35
  81. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  82. package/dist/Editor/theme/index.js +0 -144
  83. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  84. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  85. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  86. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  87. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  88. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  89. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  90. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  91. package/dist/Editor/themeSettings/icons.js +0 -60
  92. package/dist/Editor/themeSettings/index.js +0 -320
  93. package/dist/Editor/themeSettings/style.js +0 -152
  94. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  95. package/dist/Editor/themeSettingsAI/index.js +0 -356
  96. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  97. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -1,4 +1,4 @@
1
- import { Editor, Transforms, Element as SlateElement, Range } from "slate";
1
+ import { Editor, Transforms, Element as SlateElement } from "slate";
2
2
  import { Box } from "@mui/material";
3
3
  import { fontFamilyMap, sizeMap } from "./font";
4
4
  import Link from "../Elements/Link/Link";
@@ -34,12 +34,12 @@ import SimpleText from "../Elements/SimpleText";
34
34
  import CheckList from "../Elements/List/CheckList";
35
35
  import { isEmptyTextNode } from "../helper";
36
36
  import Attachments from "../Elements/Attachments/Attachments";
37
- import { getBreakPointsValue, textThemeFields } from "../helper/theme";
37
+ import { getBreakPointsValue } from "../helper/theme";
38
38
  import Variables from "../Elements/Variables/Variable";
39
+ import insertNewLine from "./insertNewLine";
39
40
  import Divider from "../Elements/Divider/Divider";
40
41
  import { getBorderColor } from "./helper";
41
42
  import Code from "../Elements/EmbedScript/Code";
42
- import { ReactEditor } from "slate-react";
43
43
  import { jsx as _jsx } from "react/jsx-runtime";
44
44
  const alignment = ["alignLeft", "alignRight", "alignCenter"];
45
45
  const list_types = ["orderedList", "unorderedList"];
@@ -47,17 +47,7 @@ const LIST_FORMAT_TYPE = {
47
47
  orderedList: "list-item",
48
48
  unorderedList: "list-item"
49
49
  };
50
-
51
- // const NEWLINESAFTER = [
52
- // "headingOne",
53
- // "headingTwo",
54
- // "headingThree",
55
- // "headingFour",
56
- // "headingFive",
57
- // "headingSix",
58
- // ];
59
-
60
- const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
50
+ const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
61
51
  export const toggleBlock = (editor, format, selection = true, attr = {}) => {
62
52
  const isActive = isBlockActive(editor, format);
63
53
  const isList = list_types.includes(format);
@@ -90,9 +80,8 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
90
80
  if (!selection) {
91
81
  Transforms.insertText(editor, "");
92
82
  }
93
- const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
94
83
  Transforms.setNodes(editor, {
95
- type: isActive ? forActiveType : isList ? LIST_FORMAT_TYPE[format] : format,
84
+ type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
96
85
  ...attr
97
86
  });
98
87
  if (isList && !isActive) {
@@ -101,12 +90,10 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
101
90
  children: []
102
91
  });
103
92
  }
104
-
105
- // if (NEWLINESAFTER.indexOf(format) > -1) {
106
- // insertNewLine(editor);
107
- // }
93
+ if (NEWLINESAFTER.indexOf(format) > -1) {
94
+ insertNewLine(editor);
95
+ }
108
96
  };
109
-
110
97
  export const addMarkData = (editor, data) => {
111
98
  try {
112
99
  Editor.addMark(editor, data.format, data.value);
@@ -115,14 +102,9 @@ export const addMarkData = (editor, data) => {
115
102
  }
116
103
  };
117
104
  export const toggleMark = (editor, format) => {
118
- const isActive = isMarkBtnActive(editor, format);
105
+ const isActive = isMarkActive(editor, format);
119
106
  if (isActive) {
120
- const isThemeSupportedMark = textThemeFields.some(f => f === format);
121
- if (isThemeSupportedMark) {
122
- Editor.addMark(editor, format, false);
123
- } else {
124
- Editor.removeMark(editor, format);
125
- }
107
+ Editor.removeMark(editor, format);
126
108
  } else {
127
109
  Editor.addMark(editor, format, true);
128
110
  }
@@ -136,49 +118,6 @@ export const isMarkActive = (editor, format) => {
136
118
  return null;
137
119
  }
138
120
  };
139
- export const isMarkBtnActive = (editor, format) => {
140
- switch (format) {
141
- case "bold":
142
- {
143
- const style = getSelectedElementStyle("font-weight", editor);
144
- return style === "700";
145
- }
146
- case "italic":
147
- {
148
- const style = getSelectedElementStyle("font-style", editor);
149
- return style === format;
150
- }
151
- // case "underline": {
152
- // const style = getSelectedElementStyle("text-decoration");
153
-
154
- // return style?.includes(format);
155
- // }
156
- // case "strikethrough": {
157
- // const style = getSelectedElementStyle("text-decoration");
158
-
159
- // return style?.includes("line-through");
160
- // }
161
- default:
162
- return isMarkActive(editor, format);
163
- }
164
- };
165
- export const getSelectedElementStyle = (styleProperty, editor) => {
166
- if (!editor.selection) {
167
- return "";
168
- }
169
- if (Range.isCollapsed(editor.selection)) {
170
- return "";
171
- }
172
- const domRange = ReactEditor.toDOMRange(editor, editor.selection);
173
- const selectedDomNode = domRange.commonAncestorContainer;
174
-
175
- // If it's a text node, get its parent element
176
- const selectedElement = selectedDomNode.nodeType === 3 ? selectedDomNode.parentElement : selectedDomNode;
177
- if (selectedElement) {
178
- const computedStyle = window.getComputedStyle(selectedElement);
179
- return computedStyle.getPropertyValue(styleProperty) || "";
180
- }
181
- };
182
121
  export const isBlockActive = (editor, format) => {
183
122
  const [match] = Editor.nodes(editor, {
184
123
  match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
@@ -221,31 +160,6 @@ export const activeMark = (editor, format) => {
221
160
  return null;
222
161
  }
223
162
  };
224
-
225
- // to avoid the styles, that automatically assign from themes
226
- const getThemeMarkedLeaf = (leaf, children) => {
227
- const {
228
- italic,
229
- bold
230
- } = leaf || {};
231
- const style = {};
232
- if (italic === false) {
233
- style.fontStyle = "normal";
234
- }
235
- if (bold === false) {
236
- style.fontWeight = "normal";
237
- }
238
- if (Object.keys(style).length) {
239
- children = /*#__PURE__*/_jsx(Box, {
240
- component: "span",
241
- sx: {
242
- "& span": style
243
- },
244
- children: children
245
- });
246
- }
247
- return children;
248
- };
249
163
  export const getMarked = (leaf, children) => {
250
164
  const className = leaf?.doublequote ? "doublequote" : "";
251
165
  if (leaf.bold) {
@@ -263,7 +177,6 @@ export const getMarked = (leaf, children) => {
263
177
  children: children
264
178
  });
265
179
  }
266
- children = getThemeMarkedLeaf(leaf, children);
267
180
  if (leaf.strikethrough) {
268
181
  children = /*#__PURE__*/_jsx("span", {
269
182
  style: {
@@ -297,22 +210,17 @@ export const getMarked = (leaf, children) => {
297
210
  } : {
298
211
  color: leaf.color
299
212
  };
300
- const fontSize = {
301
- lg: sizeMap[leaf.fontSize] || leaf.fontSize,
302
- ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
303
- };
304
- const fontSizesImportant = {};
305
- Object.entries(fontSize).forEach(([key, value]) => {
306
- fontSizesImportant[key] = `${value} !important`;
307
- });
308
213
  children = /*#__PURE__*/_jsx("span", {
214
+ style: {
215
+ background: leaf.bgColor
216
+ },
309
217
  children: /*#__PURE__*/_jsx(Box, {
310
218
  className: className,
311
219
  component: "span",
312
220
  sx: {
313
- "& span": {
314
- fontSize: fontSizesImportant,
315
- background: leaf.bgColor
221
+ fontSize: {
222
+ lg: sizeMap[leaf.fontSize] || leaf.fontSize,
223
+ ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
316
224
  },
317
225
  ...textStyles,
318
226
  fontFamily: family,
@@ -342,71 +250,31 @@ export const getBlock = props => {
342
250
  } = props;
343
251
  const attributes = props.attributes ?? {};
344
252
  const isEmpty = isEmptyTextNode(element);
345
- const commonHeadingProps = () => ({
346
- ...attributes,
347
- ...element.attr,
348
- className: `content-editable ${isEmpty ? "empty" : ""} theme-element`
349
- });
350
- const commonParaProps = paraType => ({
351
- ...attributes,
352
- ...element.attr,
353
- className: `content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
354
- });
355
253
  switch (element.type) {
356
254
  case "headingOne":
357
255
  return /*#__PURE__*/_jsx("h1", {
358
- ...commonHeadingProps(),
256
+ ...attributes,
257
+ ...element.attr,
258
+ className: `content-editable ${isEmpty ? "empty" : ""}`,
359
259
  placeholder: "Heading 1",
360
260
  children: children
361
261
  });
362
262
  case "headingTwo":
363
263
  return /*#__PURE__*/_jsx("h2", {
364
- ...commonHeadingProps(),
264
+ ...attributes,
265
+ ...element.attr,
266
+ className: `content-editable ${isEmpty ? "empty" : ""}`,
365
267
  placeholder: "Heading 2",
366
268
  children: children
367
269
  });
368
270
  case "headingThree":
369
271
  return /*#__PURE__*/_jsx("h3", {
370
- ...commonHeadingProps(),
272
+ ...attributes,
273
+ ...element.attr,
274
+ className: `content-editable ${isEmpty ? "empty" : ""}`,
371
275
  placeholder: "Heading 3",
372
276
  children: children
373
277
  });
374
- case "headingFour":
375
- return /*#__PURE__*/_jsx("h4", {
376
- ...commonHeadingProps(),
377
- placeholder: "Heading 4",
378
- children: children
379
- });
380
- case "headingFive":
381
- return /*#__PURE__*/_jsx("h5", {
382
- ...commonHeadingProps(),
383
- placeholder: "Heading 5",
384
- children: children
385
- });
386
- case "headingSix":
387
- return /*#__PURE__*/_jsx("h6", {
388
- ...commonHeadingProps(),
389
- placeholder: "Heading 6",
390
- children: children
391
- });
392
- case "paragraphOne":
393
- return /*#__PURE__*/_jsx("p", {
394
- ...commonParaProps("para1"),
395
- placeholder: "Paragraph 1",
396
- children: children
397
- });
398
- case "paragraphTwo":
399
- return /*#__PURE__*/_jsx("p", {
400
- ...commonParaProps("para2"),
401
- placeholder: "Paragraph 2",
402
- children: children
403
- });
404
- case "paragraphThree":
405
- return /*#__PURE__*/_jsx("p", {
406
- ...commonParaProps("para3"),
407
- placeholder: "Paragraph 3",
408
- children: children
409
- });
410
278
  case "blockquote":
411
279
  return /*#__PURE__*/_jsx("blockquote", {
412
280
  ...attributes,
@@ -1,5 +1,6 @@
1
1
  import { Transforms } from "slate";
2
2
  import insertNewLine from "./insertNewLine";
3
+ import { windowVar } from "./helper";
3
4
  export const insertButton = editor => {
4
5
  const button = {
5
6
  type: "button",
@@ -9,7 +10,22 @@ export const insertButton = editor => {
9
10
  buttonLink: {
10
11
  linkType: "webAddress"
11
12
  },
12
- iconPosition: "start"
13
+ iconPosition: "start",
14
+ bgColor: "#2563EB",
15
+ textColor: "#FFF",
16
+ borderRadius: {
17
+ topLeft: 30,
18
+ topRight: 30,
19
+ bottomLeft: 30,
20
+ bottomRight: 30
21
+ },
22
+ bannerSpacing: {
23
+ left: 16,
24
+ top: 8,
25
+ right: 16,
26
+ bottom: 8
27
+ },
28
+ ...(windowVar.lastButtonProps || {})
13
29
  };
14
30
  Transforms.insertNodes(editor, button);
15
31
  Transforms.move(editor);
@@ -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
  };
@@ -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) {
@@ -246,8 +235,7 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
246
235
  props.target = "_blank";
247
236
  }
248
237
  break;
249
- case "nextTrigger":
250
- case "prevTrigger":
238
+ case "actionTrigger":
251
239
  if (!readOnly) {
252
240
  props.component = "button";
253
241
  props.onClick = () => {};
@@ -318,22 +306,23 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
318
306
 
319
307
  // for iphone fix
320
308
  if (props.component === "a" && props.href) {
321
- const isMobile = getDevice(window.innerWidth) === "xs";
322
- if (isMobile) {
309
+ if (getDevice(window.innerWidth) === "xs") {
323
310
  props.component = "button"; // iphone is opening two tabs, on open in new tab because of a tag.
324
311
  }
325
312
 
326
- let touchEndClicked = false;
327
313
  props.onTouchEnd = e => {
328
- touchEndClicked = true;
329
- handleLinkBtnClick(e, props);
330
- };
331
- props.onClick = e => {
332
- // This condition is used for mobile preview in the page editor.
333
- // 'touchEnd' will not work in the mobile page preview.
334
- if (!touchEndClicked && isMobile) {
335
- 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;
336
323
  }
324
+ };
325
+ props.onClick = () => {
337
326
  return false;
338
327
  };
339
328
  }
@@ -378,53 +367,4 @@ export const decodeString = str => {
378
367
  } catch (err) {
379
368
  console.log(err);
380
369
  }
381
- };
382
- export const getContrastColor = color => {
383
- let r, g, b;
384
-
385
- // Check if the color is in hex format
386
- if (color.startsWith("#")) {
387
- r = parseInt(color.substring(1, 3), 16);
388
- g = parseInt(color.substring(3, 5), 16);
389
- b = parseInt(color.substring(5, 7), 16);
390
- }
391
- // Check if the color is in RGB/RGBA format
392
- else if (color.startsWith("rgb")) {
393
- const rgbValues = color.replace(/^rgba?\(|\s+|\)$/g, "") // Remove the rgb/rgba and spaces
394
- .split(","); // Split the values into an array
395
-
396
- r = parseInt(rgbValues[0]);
397
- g = parseInt(rgbValues[1]);
398
- b = parseInt(rgbValues[2]);
399
- } else {
400
- // If the format is not recognized, default to black text
401
- return "#000000";
402
- }
403
-
404
- // Calculate relative luminance
405
- const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
406
-
407
- // Return black for light colors, white for dark colors
408
- return luminance > 0.5 ? "#000000" : "#FFFFFF";
409
- };
410
- export const onDeleteKey = (event, {
411
- editor
412
- }) => {
413
- try {
414
- const {
415
- selection
416
- } = editor;
417
- if (selection) {
418
- // If text is selected, delete the selection
419
- Transforms.delete(editor);
420
- } else {
421
- // If no text is selected, handle deleting the next character/element
422
- Transforms.delete(editor, {
423
- unit: "character",
424
- reverse: false
425
- });
426
- }
427
- } catch (err) {
428
- console.log(err);
429
- }
430
370
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.7.9",
3
+ "version": "3.8.0",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -46,7 +46,6 @@
46
46
  "slate-react": "^0.98.3",
47
47
  "styled-components": "^5.3.11",
48
48
  "use-debounce": "^10.0.0",
49
- "wavesurfer.js": "^7.8.6",
50
49
  "web-vitals": "^2.1.4",
51
50
  "y-websocket": "^1.5.0",
52
51
  "yjs": "^13.6.8"
@@ -1,73 +0,0 @@
1
- import { Box } from "@mui/material";
2
- import { useEffect, useRef, useState } from "react";
3
- import WaveSurfer from "wavesurfer.js";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const SoundWave = props => {
6
- const {
7
- audioChunks = null
8
- } = props; // Initialize to null if not provided
9
- const waveContent = useRef(null);
10
- const wavesurfer = useRef(null);
11
- const [playOnce, setPlayOnce] = useState(false);
12
- useEffect(() => {
13
- if (waveContent.current) {
14
- if (wavesurfer.current) {
15
- wavesurfer.current.destroy();
16
- }
17
- wavesurfer.current = WaveSurfer.create({
18
- container: waveContent.current,
19
- waveColor: "#2563EB",
20
- progressColor: "#2563EB",
21
- cursorWidth: 0,
22
- // Disable the cursor
23
- barWidth: 2,
24
- barGap: 1,
25
- barRadius: 2,
26
- scrollParent: false,
27
- // Prevent scrolling
28
- height: waveContent.current.clientHeight // Set height to fit container
29
- });
30
-
31
- // Fit the waveform to the container width
32
- const resize = () => {
33
- if (wavesurfer.current) {
34
- const containerWidth = waveContent.current.clientWidth;
35
- const duration = wavesurfer.current.getDuration();
36
- if (duration > 0) {
37
- const newZoom = containerWidth / duration;
38
- wavesurfer.current.zoom(newZoom);
39
- }
40
- }
41
- };
42
- window.addEventListener("resize", resize);
43
- resize();
44
- return () => {
45
- window.removeEventListener("resize", resize);
46
- };
47
- }
48
- }, []);
49
- useEffect(() => {
50
- if (wavesurfer.current && audioChunks) {
51
- const audioBlob = new Blob(audioChunks, {
52
- type: "audio/webm"
53
- });
54
- const recordedUrl = URL.createObjectURL(audioBlob);
55
- wavesurfer.current.load(recordedUrl).then().catch(e => console.error("Error loading audio: ", e));
56
- if (!playOnce) {
57
- setPlayOnce(true);
58
- }
59
- } else if (wavesurfer.current && !audioChunks) {
60
- // Clear the waveform when audioChunks is null
61
- wavesurfer.current.empty();
62
- }
63
- }, [audioChunks, playOnce]);
64
- return /*#__PURE__*/_jsx(Box, {
65
- ref: waveContent,
66
- style: {
67
- width: "100%",
68
- height: "100%",
69
- overflow: "hidden"
70
- }
71
- });
72
- };
73
- export const AudioWave = SoundWave;