@flozy/editor 3.6.5 → 3.6.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (81) hide show
  1. package/dist/Editor/ChatEditor.js +202 -0
  2. package/dist/Editor/CommonEditor.js +166 -109
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +39 -15
  4. package/dist/Editor/Elements/Button/EditorButton.js +25 -14
  5. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  6. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  7. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  8. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  9. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +1 -0
  10. package/dist/Editor/Elements/Emoji/EmojiButton.js +2 -2
  11. package/dist/Editor/Elements/Emoji/EmojiPicker.js +16 -0
  12. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  13. package/dist/Editor/Elements/Grid/Grid.js +2 -0
  14. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  15. package/dist/Editor/Elements/Link/Link.js +6 -1
  16. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  17. package/dist/Editor/Elements/Link/LinkPopup.js +11 -3
  18. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  19. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  20. package/dist/Editor/MiniEditor.js +3 -1
  21. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  22. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  23. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  24. package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -11
  25. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  26. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  27. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  28. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +20 -13
  29. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  30. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  31. package/dist/Editor/Toolbar/PopupTool/index.js +9 -2
  32. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  33. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  34. package/dist/Editor/common/ColorPickerButton.js +25 -9
  35. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  36. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  37. package/dist/Editor/common/CustomDialog/index.js +94 -0
  38. package/dist/Editor/common/CustomDialog/style.js +67 -0
  39. package/dist/Editor/common/CustomSelect.js +33 -0
  40. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  41. package/dist/Editor/common/Icon.js +30 -2
  42. package/dist/Editor/common/LinkSettings/NavComponents.js +54 -20
  43. package/dist/Editor/common/Shorthands/elements.js +54 -0
  44. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  45. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
  46. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  47. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  48. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  49. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  50. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  51. package/dist/Editor/helper/theme.js +190 -4
  52. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  53. package/dist/Editor/hooks/useMouseMove.js +4 -1
  54. package/dist/Editor/plugins/withEmbeds.js +1 -1
  55. package/dist/Editor/plugins/withHTML.js +47 -5
  56. package/dist/Editor/plugins/withTable.js +1 -1
  57. package/dist/Editor/theme/ThemeList.js +50 -173
  58. package/dist/Editor/theme/index.js +144 -0
  59. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  60. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  61. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  62. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  63. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  64. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  65. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  66. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  67. package/dist/Editor/themeSettings/icons.js +60 -0
  68. package/dist/Editor/themeSettings/index.js +320 -0
  69. package/dist/Editor/themeSettings/style.js +152 -0
  70. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  71. package/dist/Editor/themeSettingsAI/index.js +356 -0
  72. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  73. package/dist/Editor/themeSettingsAI/style.js +247 -0
  74. package/dist/Editor/utils/SlateUtilityFunctions.js +157 -25
  75. package/dist/Editor/utils/button.js +1 -17
  76. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +361 -0
  77. package/dist/Editor/utils/font.js +40 -37
  78. package/dist/Editor/utils/helper.js +83 -22
  79. package/dist/Editor/utils/serializeToHTML.js +25 -13
  80. package/dist/index.js +5 -1
  81. package/package.json +1 -1
@@ -0,0 +1,361 @@
1
+ import { Editor, Transforms, Element as SlateElement } from "slate";
2
+ import { Box } from "@mui/material";
3
+ import { fontFamilyMap, sizeMap } from "../font";
4
+ import Table from "../../Elements/Table/Table";
5
+ import TableRow from "../../Elements/Table/TableRow";
6
+ import TableCell from "../../Elements/Table/TableCell";
7
+ import Mentions from "../../Elements/Mentions/Mentions";
8
+ import CheckList from "../../Elements/List/CheckList";
9
+ import { isEmptyTextNode } from "../../helper";
10
+ import { getBreakPointsValue } from "../../helper/theme";
11
+ import insertNewLine from "../insertNewLine";
12
+ import { getBorderColor } from "../helper";
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ const alignment = ["alignLeft", "alignRight", "alignCenter"];
15
+ const list_types = ["orderedList", "unorderedList"];
16
+ const LIST_FORMAT_TYPE = {
17
+ orderedList: "list-item",
18
+ unorderedList: "list-item"
19
+ };
20
+ const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
21
+ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
22
+ const isActive = isBlockActive(editor, format);
23
+ const isList = list_types.includes(format);
24
+ const isIndent = alignment.includes(format);
25
+ const isAligned = alignment.some(alignmentType => isBlockActive(editor, alignmentType));
26
+
27
+ /*If the node is already aligned and change in indent is called we should unwrap it first and split the node to prevent
28
+ messy, nested DOM structure and bugs due to that.*/
29
+ if (isAligned && isIndent) {
30
+ Transforms.unwrapNodes(editor, {
31
+ match: n => alignment.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type),
32
+ split: true
33
+ });
34
+ }
35
+
36
+ /* Wraping the nodes for alignment, to allow it to co-exist with other block level operations*/
37
+ if (isIndent) {
38
+ Transforms.wrapNodes(editor, {
39
+ type: format,
40
+ children: []
41
+ });
42
+ return;
43
+ }
44
+ Transforms.unwrapNodes(editor, {
45
+ match: n => list_types.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type),
46
+ split: true
47
+ });
48
+
49
+ // inserting blocks from "/"" commands remove searched word
50
+ if (!selection) {
51
+ Transforms.insertText(editor, "");
52
+ }
53
+ Transforms.setNodes(editor, {
54
+ type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
55
+ ...attr
56
+ });
57
+ if (isList && !isActive) {
58
+ Transforms.wrapNodes(editor, {
59
+ type: format,
60
+ children: []
61
+ });
62
+ }
63
+ if (NEWLINESAFTER.indexOf(format) > -1) {
64
+ insertNewLine(editor);
65
+ }
66
+ };
67
+ export const addMarkData = (editor, data) => {
68
+ try {
69
+ Editor.addMark(editor, data.format, data.value);
70
+ } catch (err) {
71
+ console.log(err);
72
+ }
73
+ };
74
+ export const toggleMark = (editor, format) => {
75
+ const isActive = isMarkActive(editor, format);
76
+ if (isActive) {
77
+ Editor.removeMark(editor, format);
78
+ } else {
79
+ Editor.addMark(editor, format, true);
80
+ }
81
+ };
82
+ export const isMarkActive = (editor, format) => {
83
+ try {
84
+ const marks = Editor.marks(editor);
85
+ return marks ? marks[format] === true : false;
86
+ } catch (err) {
87
+ console.log(err);
88
+ return null;
89
+ }
90
+ };
91
+ export const isBlockActive = (editor, format) => {
92
+ const [match] = Editor.nodes(editor, {
93
+ match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
94
+ });
95
+ return !!match;
96
+ };
97
+ export const getBlockActive = (editor, format) => {
98
+ const [match] = Editor.nodes(editor, {
99
+ match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
100
+ });
101
+ return {
102
+ isActive: !!match,
103
+ props: match && match[0]
104
+ };
105
+ };
106
+ export const upateBlockActive = (editor, format, attr = {}) => {
107
+ const [match] = Editor.nodes(editor, {
108
+ match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
109
+ });
110
+ if (match && match[1] !== undefined) {
111
+ Transforms.setNodes(editor, attr, {
112
+ at: match[1]
113
+ });
114
+ }
115
+ };
116
+ export const activeMark = (editor, format) => {
117
+ const defaultMarkData = {
118
+ color: "#000000",
119
+ bgColor: "#FFFFFF",
120
+ fontSize: "normal",
121
+ fontFamily: "PoppinsRegular",
122
+ fontWeight: "normal"
123
+ };
124
+ try {
125
+ const marks = Editor.marks(editor);
126
+ const defaultValue = defaultMarkData[format];
127
+ return marks?.[format] ?? defaultValue;
128
+ } catch (err) {
129
+ console.log(err);
130
+ return null;
131
+ }
132
+ };
133
+ export const getMarked = (leaf, children) => {
134
+ const className = leaf?.doublequote ? "doublequote" : "";
135
+ if (leaf.bold) {
136
+ children = /*#__PURE__*/_jsx("strong", {
137
+ children: children
138
+ });
139
+ }
140
+ if (leaf.code) {
141
+ children = /*#__PURE__*/_jsx("code", {
142
+ children: children
143
+ });
144
+ }
145
+ if (leaf.italic) {
146
+ children = /*#__PURE__*/_jsx("em", {
147
+ children: children
148
+ });
149
+ }
150
+ if (leaf.strikethrough) {
151
+ children = /*#__PURE__*/_jsx("span", {
152
+ style: {
153
+ textDecoration: "line-through"
154
+ },
155
+ children: children
156
+ });
157
+ }
158
+ if (leaf.underline) {
159
+ children = /*#__PURE__*/_jsx("u", {
160
+ children: children
161
+ });
162
+ }
163
+ if (leaf.superscript) {
164
+ children = /*#__PURE__*/_jsx("sup", {
165
+ children: children
166
+ });
167
+ }
168
+ if (leaf.subscript) {
169
+ children = /*#__PURE__*/_jsx("sub", {
170
+ children: children
171
+ });
172
+ }
173
+ // cover under single span
174
+ if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
175
+ const family = fontFamilyMap[leaf?.fontFamily];
176
+ const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
177
+ background: leaf?.color?.concat("text"),
178
+ WebkitBackgroundClip: "text",
179
+ WebkitTextFillColor: "transparent"
180
+ } : {
181
+ color: leaf.color
182
+ };
183
+ children = /*#__PURE__*/_jsx("span", {
184
+ style: {
185
+ background: leaf.bgColor
186
+ },
187
+ children: /*#__PURE__*/_jsx(Box, {
188
+ className: className,
189
+ component: "span",
190
+ sx: {
191
+ fontSize: {
192
+ lg: sizeMap[leaf.fontSize] || leaf.fontSize,
193
+ ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
194
+ },
195
+ ...textStyles,
196
+ fontFamily: family,
197
+ fontWeight: leaf.fontWeight
198
+ },
199
+ children: children
200
+ })
201
+ });
202
+ }
203
+ if (leaf.decoration === "link") {
204
+ children = /*#__PURE__*/_jsx("a", {
205
+ style: {
206
+ cursor: "pointer"
207
+ },
208
+ rel: "noreferrer",
209
+ target: "_blank",
210
+ href: leaf.text,
211
+ children: children
212
+ });
213
+ }
214
+ return children;
215
+ };
216
+ export const getBlock = props => {
217
+ const {
218
+ element,
219
+ children
220
+ } = props;
221
+ const attributes = props.attributes ?? {};
222
+ const isEmpty = isEmptyTextNode(element);
223
+ switch (element.type) {
224
+ case "paragraph":
225
+ return /*#__PURE__*/_jsx("p", {
226
+ ...attributes,
227
+ ...element.attr,
228
+ className: `content-editable ${isEmpty ? "empty" : ""}`
229
+ // placeholder="paragraph"
230
+ ,
231
+ children: children
232
+ });
233
+ case "headingOne":
234
+ return /*#__PURE__*/_jsx("h1", {
235
+ ...attributes,
236
+ ...element.attr,
237
+ className: `content-editable ${isEmpty ? "empty" : ""}`
238
+ // placeholder="Heading 1"
239
+ ,
240
+ children: children
241
+ });
242
+ case "headingTwo":
243
+ return /*#__PURE__*/_jsx("h2", {
244
+ ...attributes,
245
+ ...element.attr,
246
+ className: `content-editable ${isEmpty ? "empty" : ""}`
247
+ // placeholder="Heading 2"
248
+ ,
249
+ children: children
250
+ });
251
+ case "headingThree":
252
+ return /*#__PURE__*/_jsx("h3", {
253
+ ...attributes,
254
+ ...element.attr,
255
+ className: `content-editable ${isEmpty ? "empty" : ""}`
256
+ // placeholder="Heading 3"
257
+ ,
258
+ children: children
259
+ });
260
+ case "blockquote":
261
+ return /*#__PURE__*/_jsx("blockquote", {
262
+ ...attributes,
263
+ ...element.attr,
264
+ style: {
265
+ // borderColor: element?.color || "transparent",
266
+ ...getBorderColor(element?.color || "transparent", 3),
267
+ background: element?.bgColor || "none",
268
+ padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
269
+ borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
270
+ margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
271
+ width: element?.bgColor ? "calc(100% - 16px)" : "100%",
272
+ borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
273
+ },
274
+ children: children
275
+ });
276
+ case "alignLeft":
277
+ return /*#__PURE__*/_jsx("div", {
278
+ ...attributes,
279
+ ...element.attr,
280
+ children: children
281
+ });
282
+ case "alignCenter":
283
+ return /*#__PURE__*/_jsx("div", {
284
+ style: {
285
+ display: "flex",
286
+ alignItems: "center",
287
+ flexDirection: "column",
288
+ textAlign: "center"
289
+ },
290
+ ...attributes,
291
+ ...element.attr,
292
+ children: children
293
+ });
294
+ case "alignRight":
295
+ return /*#__PURE__*/_jsx("div", {
296
+ style: {
297
+ display: "flex",
298
+ alignItems: "flex-end",
299
+ flexDirection: "column",
300
+ textAlign: "right"
301
+ },
302
+ ...attributes,
303
+ ...element.attr,
304
+ children: children
305
+ });
306
+ case "list-item":
307
+ const firstChildren = element.children[0] || {};
308
+ return /*#__PURE__*/_jsx("li", {
309
+ ...attributes,
310
+ ...element.attr,
311
+ className: `content-editable ${isEmpty ? "empty" : ""}`,
312
+ placeholder: "List",
313
+ style: {
314
+ color: firstChildren?.color
315
+ },
316
+ children: children
317
+ });
318
+ case "orderedList":
319
+ return /*#__PURE__*/_jsx("ol", {
320
+ type: "1",
321
+ ...attributes,
322
+ children: children
323
+ });
324
+ case "unorderedList":
325
+ return /*#__PURE__*/_jsx("ul", {
326
+ ...attributes,
327
+ children: children
328
+ });
329
+ case "check-list-item":
330
+ return /*#__PURE__*/_jsx(CheckList, {
331
+ ...props,
332
+ isEmpty: isEmpty
333
+ });
334
+ case "table":
335
+ return /*#__PURE__*/_jsx(Table, {
336
+ ...props
337
+ });
338
+ case "table-head":
339
+ return /*#__PURE__*/_jsx("thead", {
340
+ children: children
341
+ });
342
+ case "table-body":
343
+ return /*#__PURE__*/_jsx("tbody", {
344
+ children: children
345
+ });
346
+ case "table-row":
347
+ return /*#__PURE__*/_jsx(TableRow, {
348
+ ...props
349
+ });
350
+ case "table-cell":
351
+ return /*#__PURE__*/_jsx(TableCell, {
352
+ ...props
353
+ });
354
+ case "mention":
355
+ return /*#__PURE__*/_jsx(Mentions, {
356
+ ...props
357
+ });
358
+ default:
359
+ return;
360
+ }
361
+ };
@@ -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,5 +62,8 @@ 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
  };
@@ -208,7 +208,24 @@ export const hasVerticalScrollbar = (element = {}) => {
208
208
  return element.scrollHeight > element.clientHeight;
209
209
  };
210
210
  const isHomePage = page => {
211
- return page === "home" || page === "iframe.html" || !page;
211
+ return page === "home" || page === "iframe.html" || page === "_currentPage" || !page;
212
+ };
213
+ const getScrollElement = () => {
214
+ const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
215
+ const isSlateWrapperScroll = hasVerticalScrollbar(slateWrapper);
216
+ const scrollFrom = isSlateWrapperScroll ? slateWrapper : window;
217
+ return scrollFrom;
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
+ }
212
229
  };
213
230
  export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
214
231
  const props = {};
@@ -239,16 +256,33 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
239
256
  }
240
257
  break;
241
258
  case "page":
242
- props.component = "a";
243
- const [page, section] = url?.split("#") || [];
259
+ const [page = "", section] = url?.split("#") || [];
244
260
  const sec = section ? `#${section}` : "";
245
- const currentUserPage = getCurrentUserPage();
246
- props.href = isHomePage(page) ? `./${currentUserPage}${sec}` : `./${url}`;
247
- if (openInNewTab) {
248
- if (isCurrentPage(page)) {
249
- // temp fix, if user is presented in current page, open in new tab option is restricted, we will scroll to the element in current page
250
- } else {
251
- props.target = "_blank";
261
+ if (page === "_currentPage") {
262
+ props.component = "button";
263
+ props.onClick = () => {
264
+ const scrollFrom = getScrollElement();
265
+ if (sec) {
266
+ const element = document.getElementById(section);
267
+ if (element) {
268
+ const topPosition = element.getBoundingClientRect().top + scrollFrom.scrollTop;
269
+ scrollFrom.scrollTo({
270
+ top: topPosition,
271
+ behavior: "smooth"
272
+ });
273
+ }
274
+ }
275
+ };
276
+ } else {
277
+ props.component = "a";
278
+ const currentUserPage = getCurrentUserPage();
279
+ props.href = isCurrentPage(page) ? `./${currentUserPage}${sec}` : `./${url}`;
280
+ if (openInNewTab) {
281
+ if (isCurrentPage(page)) {
282
+ // temp fix, if user is presented in current page, open in new tab option is restricted, we will scroll to the element in current page
283
+ } else {
284
+ props.target = "_blank";
285
+ }
252
286
  }
253
287
  }
254
288
  break;
@@ -283,23 +317,22 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
283
317
 
284
318
  // for iphone fix
285
319
  if (props.component === "a" && props.href) {
286
- if (getDevice(window.innerWidth) === "xs") {
320
+ const isMobile = getDevice(window.innerWidth) === "xs";
321
+ if (isMobile) {
287
322
  props.component = "button"; // iphone is opening two tabs, on open in new tab because of a tag.
288
323
  }
289
324
 
325
+ let touchEndClicked = false;
290
326
  props.onTouchEnd = e => {
291
- if (e) {
292
- // onTouchEnd will get triggered on web, only for image element, for that case event is getting undefined.
293
- e.preventDefault();
294
- e.stopPropagation();
295
- }
296
- if (props.target) {
297
- window.open(props.href);
298
- } else {
299
- window.location.href = props.href;
300
- }
327
+ touchEndClicked = true;
328
+ handleLinkBtnClick(e, props);
301
329
  };
302
- props.onClick = () => {
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);
335
+ }
303
336
  return false;
304
337
  };
305
338
  }
@@ -344,4 +377,32 @@ export const decodeString = str => {
344
377
  } catch (err) {
345
378
  console.log(err);
346
379
  }
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";
347
408
  };
@@ -1,22 +1,34 @@
1
1
  import { renderToString } from "react-dom/server";
2
- import { getBlock } from "./SlateUtilityFunctions";
2
+ import { getBlock } from "./chatEditor/SlateUtilityFunctions";
3
3
  const serializeToHTML = nodes => {
4
4
  try {
5
- const htmlString = nodes.map(n => {
6
- if (n) {
5
+ const htmlString = nodes.map(node => {
6
+ // Render function for each node
7
+ const renderNode = node => {
7
8
  const props = {
8
- element: n,
9
- children: n?.children
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
+ }) || []
10
19
  };
11
- const reactString = renderToString(getBlock(props));
12
- return reactString;
13
- } else {
14
- return "";
15
- }
16
- });
17
- console.log(htmlString);
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;
18
29
  } catch (err) {
19
- console.log(err);
30
+ console.error('Error serializing to HTML:', err);
31
+ return '';
20
32
  }
21
33
  };
22
34
  export default serializeToHTML;
package/dist/index.js CHANGED
@@ -2,7 +2,11 @@ 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";
5
7
  export const Editor = CommonEditor;
6
8
  export const MiniEditor = Mini;
7
9
  export const CollaborativeEditor = Collaborative;
8
- export const IframeEditor = EditorInFrame;
10
+ export const IframeEditor = EditorInFrame;
11
+ export const ChatEditor = Chat;
12
+ export const EmojiPicker = Emoji;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.6.5",
3
+ "version": "3.6.7",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"