@flozy/editor 3.6.8 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,361 +0,0 @@
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
- };