@flozy/editor 1.5.9 → 1.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. package/dist/Editor/CommonEditor.js +89 -15
  2. package/dist/Editor/Editor.css +194 -24
  3. package/dist/Editor/Elements/Accordion/Accordion.js +0 -1
  4. package/dist/Editor/Elements/Accordion/AccordionSummary.js +0 -1
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +134 -131
  6. package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -2
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -4
  8. package/dist/Editor/Elements/Color Picker/ColorPicker.js +29 -58
  9. package/dist/Editor/Elements/Embed/Embed.js +17 -15
  10. package/dist/Editor/Elements/Embed/Image.js +11 -2
  11. package/dist/Editor/Elements/Embed/Video.js +10 -2
  12. package/dist/Editor/Elements/Form/Form.js +0 -1
  13. package/dist/Editor/Elements/Form/FormElements/FormText.js +3 -2
  14. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  15. package/dist/Editor/Elements/Grid/Grid.js +128 -43
  16. package/dist/Editor/Elements/Grid/GridItem.js +2 -2
  17. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
  18. package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
  19. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +0 -2
  20. package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
  21. package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
  22. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
  23. package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
  24. package/dist/Editor/Toolbar/FormatTools/index.js +3 -1
  25. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +3 -3
  26. package/dist/Editor/Toolbar/PopupTool/index.js +25 -49
  27. package/dist/Editor/Toolbar/Toolbar.js +21 -5
  28. package/dist/Editor/Toolbar/styles.css +135 -17
  29. package/dist/Editor/Toolbar/toolbarGroups.js +21 -10
  30. package/dist/Editor/common/Icon.js +7 -1
  31. package/dist/Editor/common/ImageList.js +69 -0
  32. package/dist/Editor/common/ImageUploader.js +83 -0
  33. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
  34. package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -1
  35. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +15 -2
  36. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
  37. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
  38. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +41 -1
  39. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
  40. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
  43. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
  44. package/dist/Editor/common/Uploader.js +25 -54
  45. package/dist/Editor/helper/index.js +0 -1
  46. package/dist/Editor/hooks/useDrag.js +2 -2
  47. package/dist/Editor/utils/SlateUtilityFunctions.js +1 -0
  48. package/dist/Editor/utils/button.js +2 -1
  49. package/dist/Editor/utils/embed.js +6 -3
  50. package/package.json +3 -2
@@ -1,3 +1,4 @@
1
+ /* eslint-disable no-unused-vars */
1
2
  import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
2
3
  import { createEditor, Transforms } from "slate";
3
4
  import { Slate, Editable, ReactEditor } from "slate-react";
@@ -20,6 +21,8 @@ import { customCollisionDetectionAlgorithm, getThumbnailImage } from "./helper";
20
21
  import PopupTool from "./Toolbar/PopupTool";
21
22
  import "./font.css";
22
23
  import "./Editor.css";
24
+ import { Checkbox } from "@mui/material";
25
+ import { KeyboardDoubleArrowDown, KeyboardDoubleArrowLeft, KeyboardDoubleArrowRight, KeyboardDoubleArrowUp } from "@mui/icons-material";
23
26
  import { jsx as _jsx } from "react/jsx-runtime";
24
27
  import { jsxs as _jsxs } from "react/jsx-runtime";
25
28
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -59,6 +62,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
59
62
  onSave,
60
63
  editor: collaborativeEditor,
61
64
  readOnly,
65
+ toolbarOptions,
62
66
  otherProps
63
67
  } = props;
64
68
  const editorWrapper = useRef();
@@ -70,14 +74,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
70
74
  const [isInteracted, setIsInteracted] = useState(false);
71
75
  const [deboundedValue] = useDebounce(value, 500);
72
76
  const [fullScreen, setFullScreen] = useState(false);
77
+ const [toolbarShow, setToolbarShow] = useState(true);
73
78
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
74
- console.log(isDrawerOpen);
75
79
  const [viewport, setViewport] = useState({
76
80
  w: null,
77
81
  h: null
78
82
  });
79
83
  const {
80
- defaultBG,
81
84
  needDotsBG,
82
85
  footer,
83
86
  needLayout = true,
@@ -96,9 +99,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
96
99
  pageProps
97
100
  } = pageSettings || {};
98
101
  const {
99
- bannerSpacing,
100
- pageBgImage,
101
- pageColor
102
+ bannerSpacing
102
103
  } = pageProps || {
103
104
  bannerSpacing: {
104
105
  left: 0,
@@ -172,7 +173,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
172
173
  editor.insertNode(fragments);
173
174
  } else {
174
175
  // loop delete all
175
- editor.children.map(item => {
176
+ editor.children.forEach(() => {
176
177
  Transforms.delete(editor, {
177
178
  at: [0]
178
179
  });
@@ -185,6 +186,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
185
186
  toggleFullscreen() {
186
187
  setFullScreen(!fullScreen);
187
188
  },
189
+ toggleToolbarShow() {
190
+ setToolbarShow(!toolbarShow);
191
+ },
188
192
  changeViewport({
189
193
  w,
190
194
  h
@@ -193,6 +197,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
193
197
  w,
194
198
  h
195
199
  });
200
+ },
201
+ getPageSettings: {
202
+ background: pageProps?.pageBgImage && pageProps?.pageBgImage !== "none" ? `url(${pageProps?.pageBgImage})` : pageProps?.pageColor || "unset"
196
203
  }
197
204
  }));
198
205
  const [htmlAction, setHtmlAction] = useState({
@@ -318,7 +325,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
318
325
  }, 100);
319
326
  setDrag(null);
320
327
  } catch (err) {
321
- console.log(e);
322
328
  console.log(err);
323
329
  }
324
330
  };
@@ -329,12 +335,68 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
329
335
  backgroundSize: "40px 40px",
330
336
  backgroundPosition: "-19px -19px"
331
337
  } : {};
338
+ const handleToolbarSwitch = () => {
339
+ if (ref) {
340
+ ref?.current?.toggleToolbarShow();
341
+ } else {
342
+ setToolbarShow(!toolbarShow);
343
+ }
344
+ };
345
+ const getToolbarShowOpenIcon = type => {
346
+ switch (toolbarOptions?.toolbarPosition) {
347
+ case "top-left":
348
+ if (type === "open") {
349
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
350
+ }
351
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
352
+ case "top-right":
353
+ if (type === "open") {
354
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
355
+ }
356
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
357
+ case "left-top":
358
+ if (type === "open") {
359
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
360
+ }
361
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
362
+ case "left-bottom":
363
+ if (type === "open") {
364
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
365
+ }
366
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
367
+ case "right-top":
368
+ if (type === "open") {
369
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
370
+ }
371
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
372
+ case "right-bottom":
373
+ if (type === "open") {
374
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
375
+ }
376
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
377
+ case "bottom-left":
378
+ if (type === "open") {
379
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
380
+ }
381
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
382
+ case "bottom-right":
383
+ if (type === "open") {
384
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
385
+ }
386
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
387
+ default:
388
+ if (type === "open") {
389
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
390
+ }
391
+ return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
392
+ }
393
+ };
332
394
  return /*#__PURE__*/_jsx(DialogWrapper, {
333
395
  ...props,
334
396
  fullScreen: fullScreen,
335
397
  footer: footer || "",
336
398
  children: /*#__PURE__*/_jsx("div", {
337
- className: `editor-t-wrapper ${editorClass || ""}`,
399
+ className: `editor-t-wrapper ${editorClass || ""} ${!toolbarShow ? "editor-wrapper-toolbar-closed" : ""}`,
338
400
  style: {
339
401
  display: "flex",
340
402
  flexDirection: "column",
@@ -350,16 +412,28 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
350
412
  onDragStart: handleDragStart,
351
413
  onDragEnd: handleDragEnd,
352
414
  children: [/*#__PURE__*/_jsxs(Overlay, {
353
- children: [!isReadOnly ? /*#__PURE__*/_jsx(Toolbar, {
354
- handleCodeToText: handleCodeToText,
355
- customProps: customProps
356
- }) : null, /*#__PURE__*/_jsxs("div", {
415
+ children: [/*#__PURE__*/_jsxs("div", {
416
+ className: `toolbar-wrapper ${toolbarOptions?.toolbarPosition} ${toolbarOptions?.toolbarPosition}-toolbar-wrapper`,
417
+ children: [toolbarOptions?.needToolbarToggle && /*#__PURE__*/_jsx("div", {
418
+ className: `toolbar-toggle ${toolbarOptions?.toolbarPosition}`,
419
+ children: /*#__PURE__*/_jsx(Checkbox, {
420
+ onChange: handleToolbarSwitch,
421
+ checked: toolbarShow,
422
+ icon: getToolbarShowOpenIcon("open"),
423
+ checkedIcon: getToolbarShowOpenIcon("close"),
424
+ name: "checkedI"
425
+ })
426
+ }), !isReadOnly && toolbarShow ? /*#__PURE__*/_jsx(Toolbar, {
427
+ handleCodeToText: handleCodeToText,
428
+ customProps: customProps,
429
+ toolbarOptions: toolbarOptions
430
+ }) : null]
431
+ }), /*#__PURE__*/_jsxs("div", {
357
432
  ref: editorWrapper,
358
- className: "editor-wrapper",
433
+ className: `editor-wrapper ${toolbarOptions?.toolbarPosition}-editor-wrapper ${!toolbarShow ? `${toolbarOptions?.toolbarPosition}-editor-wrapper-toolbar-closed` : ""} `,
359
434
  style: {
360
435
  border: "1px solid #f3f3f3",
361
- backgroundImage: pageBgImage ? `url(${pageBgImage})` : "none",
362
- backgroundColor: pageColor || defaultBG || "#FFF",
436
+ backgroundColor: "unset",
363
437
  color: pageProps?.color || "#000",
364
438
  paddingLeft: `${bannerSpacing?.left}px`,
365
439
  paddingRight: `${bannerSpacing?.right}px`,