@flozy/editor 5.2.1 → 5.2.2

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.
Files changed (6) hide show
  1. package/dist/Editor/CommonEditor.js +6 -4
  2. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +4 -1
  3. package/dist/Editor/common/ColorPickerButton.js +42 -28
  4. package/dist/Editor/commonStyle.js +4 -1
  5. package/dist/Editor/plugins/withLayout.js +42 -47
  6. package/package.json +1 -1
package/dist/Editor/CommonEditor.js CHANGED
@@ -103,6 +103,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
103
103
  });
104
104
  const [isTextSelected, setIsTextSelected] = useState(false);
105
105
  const [breakpoint, setBreakpoint] = useState("");
106
+ const [topBanner, setTopBanner] = useState();
106
107
  const debouncedValue = useRef(value);
107
108
  const [size] = useWindowResize();
108
109
  const {
@@ -300,6 +301,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
300
301
  const handleEditorChange = newValue => {
301
302
  if (!readOnly) {
302
303
  if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
304
+ setTopBanner(() => {
305
+ const firstNode = newValue[0];
306
+ return firstNode?.type === "topbanner" ? firstNode : null;
307
+ });
303
308
  debounced(newValue);
304
309
  if (!isInteracted) {
305
310
  setIsInteracted(true);
@@ -414,10 +419,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
414
419
  editorWrapper?.current?.classList.remove("hideScroll");
415
420
  handleScrollStop();
416
421
  };
417
- const hasTopBanner = () => {
418
- const tb = editor.children[0];
419
- return tb?.type === "topbanner" ? tb : null;
420
- };
422
+ const hasTopBanner = () => topBanner;
421
423
  const renderTopBanner = () => {
422
424
  const tb = hasTopBanner();
423
425
  return tb ? /*#__PURE__*/_jsx(TopBanner, {
package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js CHANGED
@@ -744,7 +744,10 @@ const usePopupStyle = theme => ({
744
744
  border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
745
745
  },
746
746
  "& .popup_tabs": {
747
- backgroundColor: theme?.palette?.editor?.inputFieldBgColor
747
+ backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
748
+ "@media only screen and (max-width: 899px)": {
749
+ width: '100% !important'
750
+ }
748
751
  },
749
752
  "& .popup_tabs-header": {
750
753
  fontFamily: "Inter, sans-serif",
package/dist/Editor/common/ColorPickerButton.js CHANGED
@@ -2,6 +2,7 @@ import React, { useMemo, useState } from "react";
2
2
  import { Grid, Button, Popover } from "@mui/material";
3
3
  import ColorPickerTool from "react-gcolor-picker";
4
4
  import { colors } from "../Elements/Color Picker/defaultColors";
5
+ import SwipeableDrawerComponent from "./SwipeableDrawer";
5
6
  import { jsx as _jsx } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -17,6 +18,7 @@ const ColorPickerButton = props => {
17
18
  const [anchorEl, setAnchorEl] = useState(null);
18
19
  const [color, setColor] = useState(value);
19
20
  const open = Boolean(anchorEl);
21
+ const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
20
22
  const handleColorPicker = e => {
21
23
  setAnchorEl(e.currentTarget);
22
24
  };
@@ -37,6 +39,33 @@ const ColorPickerButton = props => {
37
39
  }
38
40
  return colors;
39
41
  }, [recentColors, defaultColors, hideGradient]);
42
+ const ColorPickerToolComponent = () => /*#__PURE__*/_jsxs(Grid, {
43
+ item: true,
44
+ xs: 12,
45
+ children: [/*#__PURE__*/_jsx("div", {
46
+ children: /*#__PURE__*/_jsx(ColorPickerTool, {
47
+ gradient: hideGradient ? false : true,
48
+ value: color,
49
+ onChange: handleColorChange,
50
+ defaultColors: initialColors
51
+ })
52
+ }), /*#__PURE__*/_jsxs("div", {
53
+ style: {
54
+ display: "flex",
55
+ justifyContent: "end",
56
+ margin: "8px"
57
+ },
58
+ children: [/*#__PURE__*/_jsx(Button, {
59
+ onClick: handleClose,
60
+ className: "secondaryBtn",
61
+ children: "Cancel"
62
+ }), /*#__PURE__*/_jsx(Button, {
63
+ onClick: handleSave,
64
+ className: "primaryBtn",
65
+ children: "Save"
66
+ })]
67
+ })]
68
+ });
40
69
  return /*#__PURE__*/_jsxs(_Fragment, {
41
70
  children: [/*#__PURE__*/_jsx(Button, {
42
71
  style: {
@@ -48,7 +77,18 @@ const ColorPickerButton = props => {
48
77
  },
49
78
 
50
79
  onClick: handleColorPicker
51
- }), /*#__PURE__*/_jsx(Popover, {
80
+ }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
81
+ open: open,
82
+ onClose: handleClose,
83
+ swipeableDrawer: false,
84
+ children: /*#__PURE__*/_jsx(Grid, {
85
+ container: true,
86
+ padding: 0,
87
+ className: "ed-cp-wrpr",
88
+ sx: classes.colorPickerPopup,
89
+ children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {})
90
+ })
91
+ }) : /*#__PURE__*/_jsx(Popover, {
52
92
  open: open,
53
93
  anchorEl: anchorEl,
54
94
  anchorOrigin: {
@@ -65,33 +105,7 @@ const ColorPickerButton = props => {
65
105
  container: true,
66
106
  padding: 0,
67
107
  className: "ed-cp-wrpr",
68
- children: /*#__PURE__*/_jsxs(Grid, {
69
- item: true,
70
- xs: 12,
71
- children: [/*#__PURE__*/_jsx("div", {
72
- children: /*#__PURE__*/_jsx(ColorPickerTool, {
73
- gradient: hideGradient ? false : true,
74
- value: color,
75
- onChange: handleColorChange,
76
- defaultColors: initialColors
77
- })
78
- }), /*#__PURE__*/_jsxs("div", {
79
- style: {
80
- display: "flex",
81
- justifyContent: "end",
82
- margin: "8px"
83
- },
84
- children: [/*#__PURE__*/_jsx(Button, {
85
- onClick: handleClose,
86
- className: "secondaryBtn",
87
- children: "Cancel"
88
- }), /*#__PURE__*/_jsx(Button, {
89
- onClick: handleSave,
90
- className: "primaryBtn",
91
- children: "Save"
92
- })]
93
- })]
94
- })
108
+ children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {})
95
109
  })
96
110
  })]
97
111
  });
package/dist/Editor/commonStyle.js CHANGED
@@ -38,7 +38,10 @@ const useCommonStyle = theme => ({
38
38
  backgroundColor: theme?.palette?.editor?.background
39
39
  },
40
40
  "& .popup_tabs": {
41
- backgroundColor: theme?.palette?.editor?.background
41
+ backgroundColor: theme?.palette?.editor?.background,
42
+ "@media only screen and (max-width: 899px)": {
43
+ width: '100% !important'
44
+ }
42
45
  },
43
46
  "& .popup_tabs-header": {
44
47
  backgroundColor: theme?.palette?.editor?.background,
package/dist/Editor/plugins/withLayout.js CHANGED
@@ -56,56 +56,51 @@ const withLayout = editor => {
56
56
  }]
57
57
  };
58
58
  Transforms.insertNodes(editor, paragraph, {
59
- at: [0]
59
+ at: path.concat(1)
60
60
  });
61
61
  return;
62
62
  }
63
- const extractFirstText = node => {
64
- if (node.text) {
65
- return node.text;
66
- }
67
- if (node.children) {
68
- for (const child of node.children) {
69
- const text = extractFirstText(child);
70
- if (text) {
71
- return text;
72
- }
73
- }
74
- }
75
- return "";
76
- };
77
- const extractRemainingNodes = node => {
78
- if (!node.children) {
79
- return [];
80
- }
81
- const [, ...remainingChildren] = node.children;
82
- return remainingChildren.map(child => ({
83
- ...child
84
- }));
85
- };
86
- const firstNode = editor.children[0];
87
- const firstContent = extractFirstText(firstNode);
88
- if (firstNode.type !== "title") {
89
- const titleNode = {
90
- type: "title",
91
- children: [{
92
- text: firstContent
93
- }]
94
- };
95
- Transforms.removeNodes(editor, {
96
- at: [0]
97
- });
98
- Transforms.insertNodes(editor, titleNode, {
99
- at: [0],
100
- select: true
101
- });
102
- const remainingNodes = extractRemainingNodes(firstNode);
103
- if (remainingNodes.length > 0) {
104
- Transforms.insertNodes(editor, remainingNodes, {
105
- at: [1]
106
- });
107
- }
108
- }
63
+
64
+ // Transforms.insertNodes(editor, paragraph, { at: [0] });
65
+ // const extractFirstText = (node) => {
66
+ // if (node.text) {
67
+ // return node.text;
68
+ // }
69
+ // if (node.children) {
70
+ // for (const child of node.children) {
71
+ // const text = extractFirstText(child);
72
+ // if (text) {
73
+ // return text;
74
+ // }
75
+ // }
76
+ // }
77
+ // return "";
78
+ // };
79
+
80
+ // const extractRemainingNodes = (node) => {
81
+ // if (!node.children) {
82
+ // return [];
83
+ // }
84
+ // const [, ...remainingChildren] = node.children;
85
+ // return remainingChildren.map((child) => ({ ...child }));
86
+ // };
87
+
88
+ // const firstNode = editor.children[0];
89
+ // const firstContent = extractFirstText(firstNode);
90
+
91
+ // if (firstNode.type !== "title") {
92
+ // const titleNode = {
93
+ // type: "title",
94
+ // children: [{ text: firstContent }],
95
+ // };
96
+ // Transforms.removeNodes(editor, { at: [0] });
97
+ // Transforms.insertNodes(editor, titleNode, { at: [0], select: true });
98
+ // const remainingNodes = extractRemainingNodes(firstNode);
99
+ // if (remainingNodes.length > 0) {
100
+ // Transforms.insertNodes(editor, remainingNodes, { at: [1] });
101
+ // }
102
+ // }
103
+
109
104
  ORDERS_LAYOUT.forEach((enforce, index) => {
110
105
  if (index < editor.children.length) {
111
106
  const existsNode = Node.get(editor, [index]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "5.2.1",
3
+ "version": "5.2.2",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"