@flozy/editor 4.0.6 → 4.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) hide show
  1. package/dist/Editor/ChatEditor.js +21 -25
  2. package/dist/Editor/CommonEditor.js +3 -0
  3. package/dist/Editor/Editor.css +12 -1
  4. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -2
  5. package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +21 -5
  7. package/dist/Editor/Elements/EmbedScript/Code.js +14 -12
  8. package/dist/Editor/Elements/EmbedScript/EmbedScript.js +7 -115
  9. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +130 -0
  10. package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
  11. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +55 -7
  12. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +8 -2
  13. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +43 -6
  14. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +9 -1
  15. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +5 -1
  16. package/dist/Editor/Elements/FreeGrid/styles.js +27 -0
  17. package/dist/Editor/Elements/List/CheckList.js +2 -1
  18. package/dist/Editor/Elements/Table/Table.js +3 -4
  19. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  20. package/dist/Editor/Elements/Table/TableRow.js +2 -1
  21. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +66 -0
  22. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +9 -8
  23. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +8 -4
  24. package/dist/Editor/common/ColorPickerButton.js +12 -4
  25. package/dist/Editor/common/FontLoader/FontLoader.js +68 -0
  26. package/dist/Editor/common/Icon.js +4 -0
  27. package/dist/Editor/common/RnD/ElementOptions/Actions.js +7 -0
  28. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +4 -2
  29. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +47 -0
  30. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +77 -0
  31. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +4 -2
  32. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +5 -1
  33. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +8 -4
  34. package/dist/Editor/common/RnD/OptionsPopup/style.js +23 -4
  35. package/dist/Editor/common/RnD/index.js +5 -4
  36. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -1
  37. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +1 -0
  38. package/dist/Editor/common/StyleBuilder/boxStyle.js +31 -0
  39. package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -0
  40. package/dist/Editor/common/StyleBuilder/embedScriptStyle.js +10 -0
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +15 -9
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +18 -16
  43. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +6 -4
  44. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +19 -3
  45. package/dist/Editor/common/StyleBuilder/formButtonStyle.js +1 -0
  46. package/dist/Editor/common/StyleBuilder/formStyle.js +1 -0
  47. package/dist/Editor/common/StyleBuilder/sectionStyle.js +2 -1
  48. package/dist/Editor/helper/deserialize/index.js +3 -0
  49. package/dist/Editor/helper/index.js +24 -1
  50. package/dist/Editor/helper/theme.js +2 -1
  51. package/dist/Editor/hooks/useMouseMove.js +4 -1
  52. package/dist/Editor/utils/SlateUtilityFunctions.js +4 -10
  53. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +9 -0
  54. package/dist/Editor/utils/embedScript.js +20 -2
  55. package/dist/Editor/utils/freegrid.js +130 -17
  56. package/dist/Editor/utils/mentions.js +2 -0
  57. package/dist/Editor/utils/table.js +105 -0
  58. package/package.json +2 -1
@@ -1,6 +1,6 @@
1
1
  import { Editor, Transforms, Element as SlateElement } from "slate";
2
2
  import { Box } from "@mui/material";
3
- import { fontFamilyMap, sizeMap } from "./font";
3
+ import { sizeMap } from "./font";
4
4
  import Link from "../Elements/Link/Link";
5
5
  import Image from "../Elements/Embed/Image";
6
6
  import Video from "../Elements/Embed/Video";
@@ -32,7 +32,7 @@ import FormField from "../Elements/Form/FormField";
32
32
  import InlineIcon from "../Elements/InlineIcon/InlineIcon";
33
33
  import SimpleText from "../Elements/SimpleText";
34
34
  import CheckList from "../Elements/List/CheckList";
35
- import { isEmptyTextNode } from "../helper";
35
+ import { getTextColor, isEmptyTextNode } from "../helper";
36
36
  import Attachments from "../Elements/Attachments/Attachments";
37
37
  import { getBreakPointsValue } from "../helper/theme";
38
38
  import Variables from "../Elements/Variables/Variable";
@@ -206,14 +206,8 @@ export const getMarked = (leaf, children, theme) => {
206
206
  }
207
207
  // cover under single span
208
208
  if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
209
- const family = fontFamilyMap[leaf?.fontFamily];
210
- const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
211
- background: leaf?.color?.concat("text"),
212
- WebkitBackgroundClip: "text",
213
- WebkitTextFillColor: "transparent"
214
- } : {
215
- color: leaf.color
216
- };
209
+ const family = leaf?.fontFamily;
210
+ const textStyles = getTextColor(leaf?.color);
217
211
  children = /*#__PURE__*/_jsx("span", {
218
212
  style: {
219
213
  background: leaf.bgColor
@@ -321,6 +321,15 @@ export const getBlock = props => {
321
321
  ...attributes,
322
322
  children: children
323
323
  });
324
+ case "link":
325
+ return /*#__PURE__*/_jsx("p", {
326
+ ...attributes,
327
+ ...element.attr,
328
+ className: `content-editable ${isEmpty ? "empty" : ""}`
329
+ // placeholder="paragraph"
330
+ ,
331
+ children: children
332
+ });
324
333
  case "unorderedList":
325
334
  return /*#__PURE__*/_jsx("ul", {
326
335
  ...attributes,
@@ -9,9 +9,10 @@ export const createEmbedScript = embedData => ({
9
9
  }],
10
10
  isEncoded: true,
11
11
  // to handle the old code's that already inserted
12
- isSanitized: true // to handle the old code's that already inserted
12
+ isSanitized: true,
13
+ // to handle the old code's that already inserted
14
+ updatedOn: new Date().getTime()
13
15
  });
14
-
15
16
  export const insertEmbedScript = (editor, embedData) => {
16
17
  try {
17
18
  const embed = createEmbedScript(embedData);
@@ -22,4 +23,21 @@ export const insertEmbedScript = (editor, embedData) => {
22
23
  } catch (err) {
23
24
  console.log(err);
24
25
  }
26
+ };
27
+ export const updateEmbedScript = (editor, embedData, updatePath = null, parentPath = null) => {
28
+ try {
29
+ Transforms.setNodes(editor, {
30
+ embedData: encodeString(embedData),
31
+ updatedOn: new Date().getTime()
32
+ }, {
33
+ at: updatePath
34
+ });
35
+ Transforms.setNodes(editor, {
36
+ lg_updatedOn: new Date().getTime()
37
+ }, {
38
+ at: parentPath
39
+ });
40
+ } catch (err) {
41
+ console.log(err);
42
+ }
25
43
  };
@@ -42,37 +42,150 @@ export const insertFreeGrid = (editor, path, extProps) => {
42
42
  children: [{
43
43
  type: "paragraph",
44
44
  children: [{
45
- text: "Heading One",
46
- fontSize: {
47
- xs: "38px",
48
- sm: "54px",
49
- md: "54px",
50
- lg: "54px"
45
+ type: "grid",
46
+ grid: "container",
47
+ children: [{
48
+ type: "grid-item",
49
+ grid: 12,
50
+ children: [{
51
+ type: "alignCenter",
52
+ children: [{
53
+ type: "paragraph",
54
+ children: [{
55
+ text: "Lorem ipsum sit ",
56
+ fontSize: {
57
+ xs: "80px",
58
+ sm: "80px",
59
+ md: "80px",
60
+ lg: "80px"
61
+ },
62
+ fontFamily: "PoppinsBold",
63
+ color: "rgb(132, 141, 151)"
64
+ }]
65
+ }]
66
+ }, {
67
+ type: "alignCenter",
68
+ children: [{
69
+ type: "paragraph",
70
+ children: [{
71
+ fontSize: {
72
+ xs: "80px",
73
+ sm: "80px",
74
+ md: "80px",
75
+ lg: "80px"
76
+ },
77
+ fontFamily: "PoppinsBold",
78
+ text: "amet.",
79
+ color: "rgb(132, 141, 151)"
80
+ }, {
81
+ fontSize: {
82
+ xs: "80px",
83
+ sm: "80px",
84
+ md: "80px",
85
+ lg: "80px"
86
+ },
87
+ fontFamily: "PoppinsBold",
88
+ text: " "
89
+ }, {
90
+ fontSize: {
91
+ xs: "80px",
92
+ sm: "80px",
93
+ md: "80px",
94
+ lg: "80px"
95
+ },
96
+ fontFamily: "PoppinsBold",
97
+ text: "Lorem",
98
+ color: "rgb(131, 96, 253)"
99
+ }]
100
+ }]
101
+ }],
102
+ bgColor: "rgba(255, 255, 255, 0)",
103
+ borderColor: "rgba(204, 204, 204, 0)",
104
+ lockSpacing: true,
105
+ bannerSpacing: {
106
+ top: "16",
107
+ left: "16",
108
+ right: "16",
109
+ bottom: "16"
110
+ }
111
+ }],
112
+ alignment: {
113
+ flexDirection: "column"
51
114
  },
52
- fontFamily: "PoppinsBold"
115
+ lockSpacing: false,
116
+ bannerSpacing: {
117
+ top: "32",
118
+ left: "16",
119
+ right: "16",
120
+ bottom: "16"
121
+ },
122
+ gridSize: 8
53
123
  }]
54
124
  }]
55
125
  }],
56
- gridArea: "2 / 1 / 3 / 2",
57
- height: 88,
126
+ gridArea: "1 / 1 / 2 / 2",
127
+ height: 323,
58
128
  width: 746,
59
- left: 129,
60
- marginTop: 23,
129
+ left: 127,
130
+ marginTop: 25,
61
131
  top_xs: 105.1875,
62
132
  left_xs: 22,
63
133
  marginTop_xs: 38,
64
134
  width_xs: 272,
65
135
  height_xs: 163.0078125,
66
136
  gridArea_xs: "2 / 1 / 3 / 2",
67
- updated_at: 1728554109479,
68
- lg_updatedOn: 1726290562773,
69
- xs_updatedOn: 1728554109478
137
+ updated_at: 1729055084817,
138
+ lg_updatedOn: 1729055010519,
139
+ xs_updatedOn: null
140
+ }, {
141
+ type: "freegridItem",
142
+ childType: "button",
143
+ children: [{
144
+ type: "button",
145
+ children: [{
146
+ text: ""
147
+ }],
148
+ buttonLink: {
149
+ linkType: "webAddress"
150
+ },
151
+ iconPosition: "start",
152
+ bgColor: "#2563EB",
153
+ textColor: "#FFF",
154
+ borderRadius: {
155
+ topLeft: 30,
156
+ topRight: 30,
157
+ bottomLeft: 30,
158
+ bottomRight: 30
159
+ },
160
+ bannerSpacing: {
161
+ left: 12,
162
+ top: 12,
163
+ right: 12,
164
+ bottom: 12
165
+ },
166
+ textAlign: "center",
167
+ label: "Get Started"
168
+ }],
169
+ gridArea: "7 / 1 / 8 / 2",
170
+ left: 428,
171
+ marginTop: 42,
172
+ top: 0,
173
+ width: 143,
174
+ height: 50,
175
+ lg_updatedOn: 1729055084816,
176
+ updated_at: 1729055084817,
177
+ top_xs: 366,
178
+ left_xs: 24,
179
+ marginTop_xs: 12,
180
+ width_xs: 272,
181
+ height_xs: 48,
182
+ gridArea_xs: "8 / 1 / 9 / 2"
70
183
  }],
71
184
  height_xs: 593.0625,
72
- updated_at: 1728554109479,
185
+ updated_at: 1729055084816,
73
186
  width: 0,
74
- sectionBgColor: "rgb(222, 99, 138)",
75
- xs_updatedOn: 1727921628092,
187
+ sectionBgColor: "rgb(255, 255, 255)",
188
+ xs_updatedOn: null,
76
189
  sectionName: "Home"
77
190
  }];
78
191
  const newPath = path ? path : editor?.selection?.anchor?.path;
@@ -1,4 +1,5 @@
1
1
  import { Transforms } from "slate";
2
+ import { ReactEditor } from 'slate-react';
2
3
  export const insertMention = (editor, character, type) => {
3
4
  if (type === "mentions") {
4
5
  const mention = {
@@ -9,6 +10,7 @@ export const insertMention = (editor, character, type) => {
9
10
  }]
10
11
  };
11
12
  Transforms.insertNodes(editor, mention);
13
+ ReactEditor.focus(editor);
12
14
  Transforms.move(editor);
13
15
  } else if (type === "elements" && character && character.onInsert) {
14
16
  character.onInsert(editor);
@@ -1,6 +1,111 @@
1
1
  import { Transforms, Editor, Range, Element, Path, Node } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
3
  import { customInsertNode } from "./helper";
4
+ export const DEFAULT_TABLE_NODE = () => ({
5
+ type: "table",
6
+ children: [{
7
+ type: "table-row",
8
+ children: [{
9
+ type: "table-cell",
10
+ children: [{
11
+ type: "paragraph",
12
+ children: [{
13
+ text: ""
14
+ }],
15
+ cellBgColor: "#FFFFFF"
16
+ }]
17
+ }, {
18
+ type: "table-cell",
19
+ children: [{
20
+ type: "paragraph",
21
+ children: [{
22
+ text: ""
23
+ }],
24
+ cellBgColor: "#FFFFFF"
25
+ }]
26
+ }, {
27
+ type: "table-cell",
28
+ children: [{
29
+ type: "paragraph",
30
+ children: [{
31
+ text: ""
32
+ }],
33
+ cellBgColor: "#FFFFFF"
34
+ }]
35
+ }]
36
+ }, {
37
+ type: "table-row",
38
+ children: [{
39
+ type: "table-cell",
40
+ children: [{
41
+ type: "paragraph",
42
+ children: [{
43
+ text: ""
44
+ }],
45
+ cellBgColor: "#FFFFFF"
46
+ }]
47
+ }, {
48
+ type: "table-cell",
49
+ children: [{
50
+ type: "paragraph",
51
+ children: [{
52
+ text: ""
53
+ }],
54
+ cellBgColor: "#FFFFFF"
55
+ }]
56
+ }, {
57
+ type: "table-cell",
58
+ children: [{
59
+ type: "paragraph",
60
+ children: [{
61
+ text: ""
62
+ }],
63
+ cellBgColor: "#FFFFFF"
64
+ }],
65
+ size: {
66
+ widthInPercent: 100,
67
+ height: 100,
68
+ width: 365.3307291666667
69
+ }
70
+ }]
71
+ }, {
72
+ type: "table-row",
73
+ children: [{
74
+ type: "table-cell",
75
+ children: [{
76
+ type: "paragraph",
77
+ children: [{
78
+ text: ""
79
+ }],
80
+ cellBgColor: "#FFFFFF"
81
+ }]
82
+ }, {
83
+ type: "table-cell",
84
+ children: [{
85
+ type: "paragraph",
86
+ children: [{
87
+ text: ""
88
+ }],
89
+ cellBgColor: "#FFFFFF"
90
+ }]
91
+ }, {
92
+ type: "table-cell",
93
+ children: [{
94
+ type: "paragraph",
95
+ children: [{
96
+ text: ""
97
+ }],
98
+ cellBgColor: "#FFFFFF"
99
+ }],
100
+ size: {
101
+ height: 300,
102
+ widthInPercent: 100
103
+ }
104
+ }]
105
+ }],
106
+ rows: 3,
107
+ columns: 3
108
+ });
4
109
  const prefixKey = (obj, pk = "") => {
5
110
  return Object.keys(obj).reduce((a, b) => {
6
111
  a[`${pk}${b}`] = obj[b];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.0.6",
3
+ "version": "4.0.8",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -49,6 +49,7 @@
49
49
  "use-debounce": "^10.0.0",
50
50
  "wavesurfer.js": "^7.8.6",
51
51
  "web-vitals": "^2.1.4",
52
+ "webfontloader": "^1.6.28",
52
53
  "y-websocket": "^1.5.0",
53
54
  "yjs": "^13.6.8"
54
55
  },