@flozy/editor 4.6.7 → 4.6.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/dist/Editor/CommonEditor.js +2 -1
  2. package/dist/Editor/Editor.css +0 -13
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -12
  4. package/dist/Editor/Elements/Divider/Divider.js +8 -116
  5. package/dist/Editor/Elements/Embed/Video.js +3 -5
  6. package/dist/Editor/Elements/Emoji/EmojiButton.js +24 -1
  7. package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
  8. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +0 -20
  9. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +0 -8
  10. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -3
  11. package/dist/Editor/Elements/FreeGrid/styles.js +1 -0
  12. package/dist/Editor/Elements/Redo/RedoButton.js +8 -1
  13. package/dist/Editor/Elements/SimpleText/index.js +0 -1
  14. package/dist/Editor/Elements/Undo/UndoButton.js +8 -1
  15. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -17
  16. package/dist/Editor/common/LinkSettings/index.js +1 -0
  17. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +1 -3
  18. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +2 -4
  19. package/dist/Editor/common/Section/index.js +6 -4
  20. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -19
  21. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +4 -19
  22. package/dist/Editor/common/SwipeableDrawer/index.js +46 -12
  23. package/dist/Editor/common/SwipeableDrawer/style.js +11 -3
  24. package/dist/Editor/hooks/withCommon.js +2 -1
  25. package/dist/Editor/utils/SlateUtilityFunctions.js +1 -2
  26. package/dist/Editor/utils/helper.js +2 -2
  27. package/package.json +1 -1
  28. package/dist/Editor/Elements/Divider/DividerPopup.js +0 -24
  29. package/dist/Editor/common/RnD/ElementSettings/Settings/DividerSettings.js +0 -49
  30. package/dist/Editor/common/StyleBuilder/dividerStyles.js +0 -56
@@ -144,11 +144,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
144
144
  placeHolderColor: invertColor(pageColor || "#FFF"),
145
145
  theme
146
146
  });
147
+ const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
147
148
  useEffect(() => {
148
149
  setValue(draftToSlate({
149
150
  data: content
150
151
  }));
151
- if (!ReactEditor.isFocused(editor)) {
152
+ if (!isMobile && !ReactEditor.isFocused(editor)) {
152
153
  ReactEditor.focus(editor);
153
154
  }
154
155
  }, [id, content]);
@@ -1206,17 +1206,4 @@ blockquote {
1206
1206
 
1207
1207
  .freegrid-section {
1208
1208
  max-width: 100% !important;
1209
- }
1210
-
1211
- .divider-settings {
1212
- display: none;
1213
- position: absolute;
1214
- }
1215
-
1216
- .dividerComponent:hover {
1217
- padding: 10px 0;
1218
- }
1219
-
1220
- .dividerComponent:hover .divider-settings {
1221
- display: block;
1222
1209
  }
@@ -129,6 +129,7 @@ function AppHeader(props) {
129
129
  }
130
130
  };
131
131
  const drawer = /*#__PURE__*/_jsxs(Box, {
132
+ onClick: handleDrawerToggle,
132
133
  sx: {
133
134
  textAlign: "center"
134
135
  },
@@ -138,7 +139,6 @@ function AppHeader(props) {
138
139
  my: 2,
139
140
  color: textColor
140
141
  },
141
- onClick: closeDrawer,
142
142
  children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
143
143
  alt: `${appTitle} Logo`,
144
144
  style: {
@@ -150,20 +150,16 @@ function AppHeader(props) {
150
150
  }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
151
151
  children: menus.map((item, i) => {
152
152
  const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
153
- const onButtonClick = e => {
154
- closeDrawer();
155
- setTimeout(() => {
156
- buttonProps?.onClick(e);
157
- }, 200);
158
- };
159
153
  const onTouchEnd = e => {
160
154
  if (buttonProps?.onTouchEnd) {
161
- onButtonClick(e);
155
+ buttonProps?.onTouchEnd(e);
156
+ closeDrawer();
162
157
  }
163
158
  };
164
159
  const onClick = e => {
165
160
  if (buttonProps?.onClick) {
166
- onButtonClick(e);
161
+ buttonProps?.onClick(e);
162
+ closeDrawer();
167
163
  }
168
164
  };
169
165
  const props = {
@@ -175,9 +171,6 @@ function AppHeader(props) {
175
171
  disablePadding: true,
176
172
  children: /*#__PURE__*/_jsx(ListItemButton, {
177
173
  ...props,
178
- component: "button",
179
- href: "" // to avoid <a> tag
180
- ,
181
174
  sx: {
182
175
  textAlign: "center"
183
176
  },
@@ -1,138 +1,30 @@
1
- import React, { useState } from "react";
2
- import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
3
- import { ReactEditor, useSlateStatic } from "slate-react";
4
- import { IconButton, Tooltip } from "@mui/material";
5
- import { GridSettingsIcon } from "../../common/iconslist";
6
- import DividerPopup from "./DividerPopup";
7
- import { Transforms } from "slate";
1
+ import React from "react";
8
2
  import { jsx as _jsx } from "react/jsx-runtime";
9
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
4
  const Divider = props => {
11
5
  const {
12
6
  attributes,
13
- children,
14
- element,
15
- customProps
7
+ children
16
8
  } = props;
17
- const {
18
- theme
19
- } = useEditorContext();
20
- const {
21
- borderColor = theme?.palette?.primary?.main || '#0F172A',
22
- borderWidth = '1px',
23
- borderStyle = 'solid'
24
- } = element;
25
- const {
26
- readOnly
27
- } = customProps;
28
- const editor = useSlateStatic();
29
- const path = ReactEditor.findPath(editor, element);
30
- const [openSettings, setOpenSettings] = useState(false);
31
- const {
32
- hoverPath
33
- } = useEditorContext();
34
- const [showTool] = useEditorSelection(editor);
35
- const selected = hoverPath === path.join(",");
36
- const width = borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`;
37
- const onSettings = () => {
38
- setOpenSettings(true);
39
- };
40
- const DividerToolbar = ({
41
- selected,
42
- showTool,
43
- onSettings
44
- }) => {
45
- return /*#__PURE__*/_jsx("div", {
46
- contentEditable: false,
47
- className: "divider-settings",
48
- style: {
49
- top: "-20px",
50
- left: 0
51
- },
52
- children: /*#__PURE__*/_jsx(Tooltip, {
53
- title: "Divider Settings",
54
- arrow: true,
55
- children: /*#__PURE__*/_jsx(IconButton, {
56
- size: "small",
57
- sx: {
58
- background: theme?.palette?.type === 'dark' ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
59
- border: theme?.palette?.type === 'dark' ? '1px solid #E4E8EB33' : 'none',
60
- boxShadow: '0px 0px 4px 0px #00000040',
61
- borderRadius: '50%',
62
- '& svg': {
63
- stroke: theme?.palette?.text?.secondary3
64
- },
65
- '&.MuiIconButton-root:hover': {
66
- background: theme?.palette?.type === 'dark' ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
67
- }
68
- },
69
- onClick: onSettings,
70
- children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
71
- })
72
- })
73
- });
74
- };
75
- const onSave = data => {
76
- const updateData = {
77
- ...data
78
- };
79
- delete updateData.children;
80
- Transforms.setNodes(editor, {
81
- ...updateData
82
- }, {
83
- at: path
84
- });
85
- onClose();
86
- };
87
- const onClose = () => {
88
- setOpenSettings(false);
89
- };
90
- const onDelete = () => {
91
- if (path) {
92
- Transforms.removeNodes(editor, {
93
- at: path
94
- });
95
- }
96
- };
97
9
  return /*#__PURE__*/_jsxs("div", {
98
10
  ...attributes,
99
11
  className: "dividerComponent",
12
+ contentEditable: "false",
100
13
  style: {
101
- userSelect: "none",
102
- position: 'relative'
14
+ userSelect: "none"
103
15
  },
104
- children: [!readOnly && /*#__PURE__*/_jsx("div", {
105
- className: `element-root element-selector`,
106
- contentEditable: false,
107
- style: {
108
- zIndex: 1000
109
- },
110
- children: /*#__PURE__*/_jsx(DividerToolbar, {
111
- selected: selected,
112
- showTool: showTool,
113
- onSettings: onSettings
114
- })
115
- }), /*#__PURE__*/_jsx("hr", {
116
- contentEditable: false,
16
+ children: [/*#__PURE__*/_jsx("hr", {
17
+ contentEditable: "false",
117
18
  className: "editorDivider",
118
19
  style: {
119
- userSelect: "none",
120
- borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
121
- backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
122
- height: borderColor?.includes("linear") ? borderWidth : undefined
20
+ userSelect: "none"
123
21
  }
124
22
  }), /*#__PURE__*/_jsx("span", {
125
23
  style: {
126
24
  display: "none"
127
25
  },
128
26
  children: children
129
- }), openSettings ? /*#__PURE__*/_jsx(DividerPopup, {
130
- element: element,
131
- onSave: onSave,
132
- onClose: onClose,
133
- onDelete: onDelete,
134
- customProps: customProps
135
- }) : null]
27
+ })]
136
28
  });
137
29
  };
138
30
  export default Divider;
@@ -87,8 +87,7 @@ const Video = ({
87
87
  url,
88
88
  xsHidden,
89
89
  width: oldWidth,
90
- bannerSpacing,
91
- aspectRatio
90
+ bannerSpacing
92
91
  } = element;
93
92
  const editor = useSlateStatic();
94
93
  const [openSetttings, setOpenSettings] = useState(false);
@@ -190,10 +189,9 @@ const Video = ({
190
189
  width: {
191
190
  ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
192
191
  },
193
- height: url && !aspectRatio ? {
192
+ height: url ? {
194
193
  ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
195
- } : "auto",
196
- aspectRatio: aspectRatio ? aspectRatio : "auto"
194
+ } : "auto"
197
195
  }, theme)
198
196
  };
199
197
  }
@@ -6,6 +6,7 @@ import { insertEmoji } from "../../utils/emoji";
6
6
  import ToolbarIcon from "../../common/ToolbarIcon";
7
7
  import Icon from "../../common/Icon";
8
8
  import EmojiPicker from "./EmojiPicker";
9
+ import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { Fragment as _Fragment } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,6 +20,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
19
20
  const [anchorEl, setAnchorEl] = useState(null);
20
21
  const [target, setTarget] = useState(selectionTarget);
21
22
  const open = Boolean(anchorEl);
23
+ const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
22
24
  useImperativeHandle(ref, () => ({
23
25
  triggerClick: target => {
24
26
  setTarget(target);
@@ -54,7 +56,28 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
54
56
  icon: "emoji"
55
57
  }),
56
58
  icoBtnType: icoBtnType
57
- }), /*#__PURE__*/_jsx(Popover, {
59
+ }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
60
+ open: open,
61
+ onClose: handleClose,
62
+ customClass: "emojiDrawer",
63
+ swipeableDrawer: false,
64
+ children: /*#__PURE__*/_jsx(Paper, {
65
+ style: {
66
+ width: '100%'
67
+ },
68
+ sx: {
69
+ '& em-emoji-picker': {
70
+ width: '100%'
71
+ }
72
+ },
73
+ children: /*#__PURE__*/_jsx(EmojiPicker, {
74
+ data: data,
75
+ onEmojiSelect: onEmojiSelect,
76
+ theme: theme?.palette?.type,
77
+ dynamicWidth: true
78
+ })
79
+ })
80
+ }) : /*#__PURE__*/_jsx(Popover, {
58
81
  style: {
59
82
  zIndex: 10001
60
83
  },
@@ -6,16 +6,14 @@ const EmojiPicker = props => {
6
6
  const {
7
7
  onEmojiSelect,
8
8
  onClose,
9
- theme = 'light',
10
- ...rest
9
+ theme = 'light'
11
10
  } = props;
12
11
  return /*#__PURE__*/_jsx(_Fragment, {
13
12
  children: /*#__PURE__*/_jsx(Picker, {
14
13
  data: data,
15
14
  onEmojiSelect: onEmojiSelect,
16
15
  onClickOutside: onClose,
17
- theme: theme,
18
- ...rest
16
+ theme: theme
19
17
  })
20
18
  });
21
19
  };
@@ -344,26 +344,6 @@ const FreeGrid = props => {
344
344
  at: [...insertAt]
345
345
  });
346
346
  break;
347
- case "addDivider":
348
- Transforms.insertNodes(editor, [{
349
- type: "freegridItem",
350
- childType: "divider",
351
- children: [{
352
- type: "divider",
353
- children: [{
354
- text: ""
355
- }]
356
- }],
357
- gridArea: "3 / 1 / 4 / 2",
358
- left: 50,
359
- marginTop: 0,
360
- top: 0,
361
- width: 170,
362
- height: 30
363
- }], {
364
- at: [...insertAt]
365
- });
366
- break;
367
347
  default:
368
348
  }
369
349
  // focus on newly added element
@@ -43,10 +43,6 @@ const FREE_GRID_ELEMENTS = [{
43
43
  actionType: "addSignature",
44
44
  label: "Signature",
45
45
  icon: "signature"
46
- }, {
47
- actionType: "addDivider",
48
- label: "Divider",
49
- icon: "divider"
50
46
  }];
51
47
  const AddElement = props => {
52
48
  const {
@@ -55,10 +51,6 @@ const AddElement = props => {
55
51
  } = props;
56
52
  const ADD_ELEMENTS = FREE_GRID_ELEMENTS.filter(f => (hideTools || []).indexOf(f.actionType) === -1);
57
53
  return /*#__PURE__*/_jsx(Box, {
58
- sx: {
59
- maxHeight: "500px",
60
- overflowY: 'auto'
61
- },
62
54
  children: /*#__PURE__*/_jsx(List, {
63
55
  className: "item-list-wrpr",
64
56
  children: ADD_ELEMENTS.map(m => {
@@ -11,7 +11,6 @@ const sectionOptions = ["addElementInSection", "settings", "moveUp", "moveDown",
11
11
  const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
12
12
  const signatureOptions = ["signatureSettings", "saveAsTemplate", "close"];
13
13
  const signOptions = ["removeSign", "saveAsTemplate", "close"];
14
- const dividerOptions = ["settings", "saveAsTemplate", "close"];
15
14
  const itemOptions = {
16
15
  default: commonOptions,
17
16
  text: textOptions,
@@ -25,7 +24,6 @@ const itemOptions = {
25
24
  embedScript: embedScriptOptions,
26
25
  video: videoOptions,
27
26
  signature: signatureOptions,
28
- sign: signOptions,
29
- divider: dividerOptions
27
+ sign: signOptions
30
28
  };
31
29
  export default itemOptions;
@@ -91,6 +91,7 @@ const useFreeGridStyles = ({
91
91
  },
92
92
  "&.enable-1": {
93
93
  "&.type_text": {
94
+ wordBreak: "break-all",
94
95
  "*": {
95
96
  "::selection": {
96
97
  backgroundColor: "transparent !important",
@@ -1,7 +1,14 @@
1
1
  import React from "react";
2
+ import { useSlateStatic } from "slate-react";
2
3
  import RedoIcon from "../../assets/svg/RedoIcon";
3
4
  import { jsx as _jsx } from "react/jsx-runtime";
4
5
  const RedoButton = () => {
5
- return /*#__PURE__*/_jsx(RedoIcon, {});
6
+ const editor = useSlateStatic();
7
+ const onRedo = () => {
8
+ editor?.redo();
9
+ };
10
+ return /*#__PURE__*/_jsx(RedoIcon, {
11
+ onClick: onRedo
12
+ });
6
13
  };
7
14
  export default RedoButton;
@@ -52,7 +52,6 @@ const SimpleText = props => {
52
52
  className: "placeholder-simple-text",
53
53
  children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
54
54
  children: ["Type ", /*#__PURE__*/_jsx("span", {
55
- contentEditable: false,
56
55
  style: {
57
56
  backgroundColor: '#F2F6FA',
58
57
  padding: "0px 2px",
@@ -1,7 +1,14 @@
1
1
  import React from "react";
2
+ import { useSlateStatic } from "slate-react";
2
3
  import UndoIcon from "../../assets/svg/UndoIcon";
3
4
  import { jsx as _jsx } from "react/jsx-runtime";
4
5
  const UndoButton = () => {
5
- return /*#__PURE__*/_jsx(UndoIcon, {});
6
+ const editor = useSlateStatic();
7
+ const onUndo = () => {
8
+ editor?.undo();
9
+ };
10
+ return /*#__PURE__*/_jsx(UndoIcon, {
11
+ onClick: onUndo
12
+ });
6
13
  };
7
14
  export default UndoButton;
@@ -42,8 +42,6 @@ const MiniToolbar = props => {
42
42
  const [popper, setPopper] = useState(null);
43
43
  const [anchorEl, setAnchorEl] = useState(null);
44
44
  const [fullScreen, setFullScreen] = useState(false);
45
- const [undoCooldown, setUndoCooldown] = useState(false);
46
- const [redoCooldown, setRedoCooldown] = useState(false);
47
45
  const [search, setSearch] = useState("");
48
46
  const PopupComponent = POPUP_TYPES[popper] || null;
49
47
  const open = Boolean(PopupComponent);
@@ -58,9 +56,8 @@ const MiniToolbar = props => {
58
56
  selectedElement,
59
57
  setSelectedElement
60
58
  } = useEditorContext();
61
- const cooldownTime = 200;
62
- const canUndo = editor.history.undos.length > 0 && !undoCooldown;
63
- const canRedo = editor.history.redos.length > 0 && !redoCooldown;
59
+ const canUndo = editor.history.undos.length > 0;
60
+ const canRedo = editor.history.redos.length > 0;
64
61
  const [toolTip, setToolTip] = useState(false);
65
62
  const [data, setData] = useState(null);
66
63
  useEffect(() => {
@@ -75,18 +72,6 @@ const MiniToolbar = props => {
75
72
  }
76
73
  }, [editor.selection]);
77
74
  const handleClick = type => e => {
78
- if (type === "undo" && canUndo && !undoCooldown) {
79
- editor.undo();
80
- setUndoCooldown(true);
81
- setTimeout(() => setUndoCooldown(false), cooldownTime);
82
- return;
83
- }
84
- if (type === "redo" && canRedo && !redoCooldown) {
85
- editor.redo();
86
- setRedoCooldown(true);
87
- setTimeout(() => setRedoCooldown(false), cooldownTime);
88
- return;
89
- }
90
75
  if (type === "page-settings") {
91
76
  setToolTip(true);
92
77
  }
@@ -62,6 +62,7 @@ export default function LinkSettings(props) {
62
62
  };
63
63
  if (isMobile) {
64
64
  return /*#__PURE__*/_jsxs(SwipeableDrawer, {
65
+ open: true,
65
66
  onClose: handleClose,
66
67
  children: [/*#__PURE__*/_jsx(Typography, {
67
68
  variant: "subtitle1",
@@ -7,7 +7,6 @@ import AppHeaderSettings from "./AppHeaderSettings";
7
7
  import FormSettings from "./FormSettings";
8
8
  import TableSettings from "./TableSettings";
9
9
  import CodeSettings from "./CodeSettings";
10
- import DividerSettings from "./DividerSettings";
11
10
  const SettingsComponents = {
12
11
  text: TextSettings,
13
12
  button: ButtonSettings,
@@ -17,7 +16,6 @@ const SettingsComponents = {
17
16
  appHeader: AppHeaderSettings,
18
17
  form: FormSettings,
19
18
  table: TableSettings,
20
- embedScript: CodeSettings,
21
- divider: DividerSettings
19
+ embedScript: CodeSettings
22
20
  };
23
21
  export default SettingsComponents;
@@ -7,8 +7,7 @@ export const settingsLabel = {
7
7
  appHeader: "App Header Settings",
8
8
  form: "Form Settings",
9
9
  table: "Table Settings",
10
- embedScript: "Code Settings",
11
- divider: 'Divider Settings'
10
+ embedScript: "Code Settings"
12
11
  };
13
12
  export const ItemTypes = {
14
13
  text: "Text",
@@ -20,6 +19,5 @@ export const ItemTypes = {
20
19
  form: "Form",
21
20
  table: "Table",
22
21
  embedScript: "Code",
23
- signature: "Signature",
24
- divider: 'Divider'
22
+ signature: "Signature"
25
23
  };
@@ -16,8 +16,10 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
16
16
  const list_types = ["orderedList", "unorderedList"];
17
17
  const Section = props => {
18
18
  const themeReact = useTheme();
19
- const theme = useEditorContext();
20
- const classes = SectionStyle(themeReact, theme?.theme);
19
+ const {
20
+ theme
21
+ } = useEditorContext();
22
+ const classes = SectionStyle(themeReact, theme);
21
23
  const {
22
24
  children,
23
25
  element,
@@ -122,12 +124,12 @@ const Section = props => {
122
124
  borderRadius: {
123
125
  ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
124
126
  }
125
- }, theme);
127
+ }, themeReact);
126
128
  const edInnerSp = groupByBreakpoint({
127
129
  width: {
128
130
  ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
129
131
  }
130
- }, theme);
132
+ }, themeReact);
131
133
  return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
132
134
  component: "div",
133
135
  className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,
@@ -6,25 +6,6 @@ const embedVideoStyle = [{
6
6
  label: "URL",
7
7
  key: "url",
8
8
  type: "text"
9
- }, {
10
- label: "Aspect Ratio",
11
- key: "aspectRatio",
12
- type: "textOptions",
13
- options: [{
14
- text: "Cover (Default)",
15
- value: ""
16
- }, {
17
- text: "16:9",
18
- value: "16 / 9"
19
- }, {
20
- text: "9:16",
21
- value: "9 / 16"
22
- }],
23
- renderOption: option => {
24
- return /*#__PURE__*/_jsx("span", {
25
- children: option.text
26
- });
27
- }
28
9
  }]
29
10
  }, {
30
11
  tab: "Position",
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
2
+ import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
3
3
  import ColorPickerButton from "../../ColorPickerButton";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
5
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,30 +46,15 @@ const Color = props => {
46
46
  item: true,
47
47
  xs: 12,
48
48
  className: "btnColorPicker",
49
- children: [/*#__PURE__*/_jsxs(Typography, {
49
+ children: [/*#__PURE__*/_jsx(Typography, {
50
50
  variant: "body1",
51
51
  color: "primary",
52
52
  sx: {
53
53
  fontSize: "14px",
54
54
  fontWeight: 500,
55
- marginBottom: "5px",
56
- display: 'flex',
57
- alignItems: 'center',
58
- '& svg': {
59
- width: '20px',
60
- height: '20px'
61
- }
55
+ marginBottom: "5px"
62
56
  },
63
- children: [label, data?.infoIcon ? /*#__PURE__*/_jsx(Tooltip, {
64
- arrow: true,
65
- title: "Note: If color gradient is used, divider styles will not apply",
66
- children: /*#__PURE__*/_jsx("span", {
67
- style: {
68
- display: 'inline-block'
69
- },
70
- children: data?.infoIcon
71
- })
72
- }) : null]
57
+ children: label
73
58
  }), /*#__PURE__*/_jsx(TextField, {
74
59
  fullWidth: true,
75
60
  value: value,
@@ -1,7 +1,9 @@
1
- import { Box, SwipeableDrawer } from "@mui/material";
1
+ import { Box, Drawer, SwipeableDrawer } from "@mui/material";
2
2
  import DrawerStyles from "./style";
3
3
  import { grey } from "@mui/material/colors";
4
4
  import { styled } from "@mui/material/styles";
5
+ import { useEditorContext } from "../../hooks/useMouseMove";
6
+ import { Fragment } from "react";
5
7
  import { jsx as _jsx } from "react/jsx-runtime";
6
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
9
  const Puller = styled("div")(({
@@ -17,18 +19,50 @@ const Puller = styled("div")(({
17
19
  function SwipeableDrawerComponent({
18
20
  open,
19
21
  onClose,
20
- children
22
+ children,
23
+ customClass,
24
+ swipeableDrawer,
25
+ disableSwipeToOpen
21
26
  }) {
22
- const classes = DrawerStyles();
23
- return /*#__PURE__*/_jsxs(SwipeableDrawer, {
24
- anchor: "bottom",
25
- open: true,
26
- onClose: onClose,
27
- sx: classes.drawerContainer,
28
- children: [/*#__PURE__*/_jsx(Puller, {}), /*#__PURE__*/_jsx(Box, {
29
- sx: classes.childContainer,
30
- children: children
31
- })]
27
+ const {
28
+ theme
29
+ } = useEditorContext();
30
+ const classes = DrawerStyles(theme);
31
+ const handleClose = e => {
32
+ e.stopPropagation();
33
+ onClose();
34
+ };
35
+ return /*#__PURE__*/_jsx(Fragment, {
36
+ children: swipeableDrawer ? /*#__PURE__*/_jsxs(SwipeableDrawer, {
37
+ disableSwipeToOpen: disableSwipeToOpen,
38
+ anchor: "bottom",
39
+ open: open,
40
+ onClose: handleClose,
41
+ sx: classes.drawerContainer,
42
+ children: [/*#__PURE__*/_jsx(Puller, {}), /*#__PURE__*/_jsx(Box, {
43
+ className: customClass,
44
+ sx: classes.childContainer,
45
+ children: children
46
+ })]
47
+ }) : /*#__PURE__*/_jsxs(Drawer, {
48
+ disableSwipeToOpen: true,
49
+ anchor: "bottom",
50
+ open: open,
51
+ onClose: handleClose,
52
+ sx: classes.drawerContainer,
53
+ children: [/*#__PURE__*/_jsx(Puller, {}), /*#__PURE__*/_jsx(Box, {
54
+ className: customClass,
55
+ sx: classes.childContainer,
56
+ children: children
57
+ })]
58
+ })
32
59
  });
33
60
  }
61
+ SwipeableDrawerComponent.defaultProps = {
62
+ open: false,
63
+ onClose: () => {},
64
+ customClass: '',
65
+ swipeableDrawer: true,
66
+ disableSwipeToOpen: true
67
+ };
34
68
  export default SwipeableDrawerComponent;
@@ -1,12 +1,20 @@
1
- const Styles = () => ({
1
+ const Styles = theme => ({
2
2
  drawerContainer: {
3
+ "&.MuiDrawer-root": {
4
+ zIndex: 1301
5
+ },
3
6
  "& .MuiDrawer-paper": {
4
7
  borderTopLeftRadius: 8,
5
- borderTopRightRadius: 8
8
+ borderTopRightRadius: 8,
9
+ backgroundColor: theme.palette.containers.card
6
10
  }
7
11
  },
8
12
  childContainer: {
9
- padding: "20px"
13
+ padding: "20px",
14
+ '&.emojiDrawer': {
15
+ padding: 'unset',
16
+ paddingTop: '10px'
17
+ }
10
18
  }
11
19
  });
12
20
  export default Styles;
@@ -9,7 +9,8 @@ import withLayout from "../plugins/withLayout";
9
9
  import withHtml from "../plugins/withHTML";
10
10
  import withErrorHandling from "./withErrorHandling";
11
11
  import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
12
- import withRestrictedNodes from "./withRestrictedNodes";
12
+ // import withRestrictedNodes from "./withRestrictedNodes";
13
+
13
14
  const withCommon = (props, {
14
15
  needLayout = false,
15
16
  isChatEditor = false
@@ -43,7 +43,7 @@ import Code from "../Elements/EmbedScript/Code";
43
43
  import FreeGrid from "../Elements/FreeGrid/FreeGrid";
44
44
  import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
45
45
  import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
46
- import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
46
+ // import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
47
47
  import { jsx as _jsx } from "react/jsx-runtime";
48
48
  const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
49
49
  const list_types = ["orderedList", "unorderedList"];
@@ -206,7 +206,6 @@ 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
- console.log("🚀 ~ getMarked ~ leaf:", leaf);
210
209
  const family = leaf?.fontFamily;
211
210
  const textStyles = getTextColor(leaf?.color);
212
211
  children = /*#__PURE__*/_jsx("span", {
@@ -64,7 +64,7 @@ export const getBorderColor = (color, borderWidth = 3) => {
64
64
  export const absoluteLink = url => {
65
65
  try {
66
66
  if (url?.indexOf("://") === -1) {
67
- return `/${url}`;
67
+ return `//${url}`;
68
68
  }
69
69
  return url;
70
70
  } catch (err) {
@@ -483,7 +483,7 @@ export const isFreeGrid = (nodes, types = ["freegrid", "freegridItem", "freegrid
483
483
  }
484
484
  return false;
485
485
  } catch (err) {
486
- console.log("isFreeGrid error:", err);
486
+ console.log('isFreeGrid error:', err);
487
487
  return false;
488
488
  }
489
489
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.6.7",
3
+ "version": "4.6.8",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -1,24 +0,0 @@
1
- import React from "react";
2
- import StyleBuilder from "../../common/StyleBuilder";
3
- import dividerStyle from "../../common/StyleBuilder/dividerStyles";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- const DividerPopup = props => {
6
- const {
7
- element,
8
- onSave,
9
- onClose,
10
- onDelete,
11
- customProps
12
- } = props;
13
- return /*#__PURE__*/_jsx(StyleBuilder, {
14
- title: "Divider",
15
- type: "dividerStyle",
16
- element: element,
17
- onSave: onSave,
18
- onClose: onClose,
19
- renderTabs: dividerStyle,
20
- onDelete: onDelete,
21
- customProps: customProps
22
- });
23
- };
24
- export default DividerPopup;
@@ -1,49 +0,0 @@
1
- import React from "react";
2
- import { Transforms, Node } from "slate";
3
- import { Box } from "@mui/material";
4
- import { StyleContent } from "../../../StyleBuilder";
5
- import dividerStyle from "../../../StyleBuilder/dividerStyles";
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- const DividerSettings = props => {
8
- const {
9
- editor,
10
- path,
11
- customProps
12
- } = props;
13
- const item_path = path?.split("|").map(m => parseInt(m));
14
- const element_path = [...item_path, 0];
15
- const element = Node.get(editor, element_path);
16
- const onChange = data => {
17
- console.log("🚀 ~ onChange ~ data:", data);
18
- console.log("🚀 ~ onChange ~ element:", element);
19
- const updated_props = {
20
- ...element,
21
- ...data,
22
- field_type: data?.element
23
- };
24
- delete updated_props.children;
25
- Transforms.setNodes(editor, {
26
- ...updated_props
27
- }, {
28
- at: element_path
29
- });
30
- };
31
- const handleClose = () => {
32
- console.log("close");
33
- };
34
- return /*#__PURE__*/_jsx(Box, {
35
- component: "div",
36
- className: "item-w",
37
- children: dividerStyle?.map((m, i) => {
38
- return /*#__PURE__*/_jsx(StyleContent, {
39
- renderTabs: dividerStyle,
40
- value: m.value,
41
- element: element,
42
- onChange: onChange,
43
- customProps: customProps,
44
- handleClose: handleClose
45
- }, `tab_${m.value}_$${i}`);
46
- })
47
- });
48
- };
49
- export default DividerSettings;
@@ -1,56 +0,0 @@
1
- import Icon from "../Icon";
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- const dividerStyle = [{
4
- tab: "Border",
5
- value: "sectionBorderRadius",
6
- fields: [{
7
- label: "Divider Color",
8
- key: "borderColor",
9
- type: "color",
10
- infoIcon: /*#__PURE__*/_jsx(Icon, {
11
- icon: "info"
12
- })
13
- }, {
14
- label: "Divider Width",
15
- key: "borderWidth",
16
- type: "text",
17
- placeholder: "1px",
18
- width: 6
19
- }, {
20
- label: "Divider Style",
21
- key: "borderStyle",
22
- type: "textOptions",
23
- width: 6,
24
- options: [{
25
- text: "Solid",
26
- value: "solid"
27
- }, {
28
- text: "Dotted",
29
- value: "dotted"
30
- }, {
31
- text: "Dashed",
32
- value: "dashed"
33
- }, {
34
- text: "Double",
35
- value: "double"
36
- }, {
37
- text: "Groove",
38
- value: "groove"
39
- }, {
40
- text: "Ridge",
41
- value: "ridge"
42
- }, {
43
- text: "Inset",
44
- value: "inset"
45
- }, {
46
- text: "Outset",
47
- value: "outset"
48
- }],
49
- renderOption: option => {
50
- return /*#__PURE__*/_jsx("span", {
51
- children: option.text
52
- });
53
- }
54
- }]
55
- }];
56
- export default dividerStyle;