@flozy/editor 4.6.2 → 4.6.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. package/dist/Editor/CommonEditor.js +17 -17
  2. package/dist/Editor/Editor.css +32 -1
  3. package/dist/Editor/Elements/AI/AIInput.js +4 -5
  4. package/dist/Editor/Elements/AI/PopoverAIInput.js +40 -29
  5. package/dist/Editor/Elements/AI/Styles.js +1 -1
  6. package/dist/Editor/Elements/Button/EditorButton.js +8 -4
  7. package/dist/Editor/Elements/Divider/Divider.js +115 -8
  8. package/dist/Editor/Elements/Divider/DividerPopup.js +24 -0
  9. package/dist/Editor/Elements/Embed/Embed.css +1 -1
  10. package/dist/Editor/Elements/Embed/Image.js +3 -2
  11. package/dist/Editor/Elements/Embed/Video.js +7 -4
  12. package/dist/Editor/Elements/Emoji/EmojiButton.js +1 -23
  13. package/dist/Editor/Elements/Form/Form.js +0 -1
  14. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  15. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +56 -3
  16. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +2 -0
  17. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +7 -3
  18. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +16 -2
  19. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +8 -2
  20. package/dist/Editor/Elements/FreeGrid/styles.js +83 -2
  21. package/dist/Editor/Elements/Signature/SignaturePopup.js +24 -7
  22. package/dist/Editor/Elements/Signature/Signed.js +1 -1
  23. package/dist/Editor/Elements/SimpleText/index.js +7 -8
  24. package/dist/Editor/Elements/Table/TableRow.js +1 -1
  25. package/dist/Editor/Styles/EditorStyles.js +2 -2
  26. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  27. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +35 -29
  28. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +35 -30
  29. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -4
  30. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -38
  31. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -1
  32. package/dist/Editor/Toolbar/PopupTool/index.js +18 -6
  33. package/dist/Editor/common/FontLoader/FontLoader.js +6 -6
  34. package/dist/Editor/common/Icon.js +1 -1
  35. package/dist/Editor/common/LinkSettings/index.js +3 -3
  36. package/dist/Editor/common/LinkSettings/navOptions.js +4 -1
  37. package/dist/Editor/common/RnD/DragOver/index.js +0 -1
  38. package/dist/Editor/common/RnD/ElementOptions/Actions.js +15 -2
  39. package/dist/Editor/common/RnD/ElementOptions/styles.js +5 -0
  40. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -1
  41. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +53 -0
  42. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +32 -2
  43. package/dist/Editor/common/RnD/ElementSettings/Settings/DividerSettings.js +49 -0
  44. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +3 -1
  45. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +5 -2
  46. package/dist/Editor/common/RnD/RnDCopy.js +2 -0
  47. package/dist/Editor/common/RnD/Utils/gridDropItem.js +5 -3
  48. package/dist/Editor/common/RnD/VirtualElement/index.js +1 -1
  49. package/dist/Editor/common/RnD/index.js +67 -37
  50. package/dist/Editor/common/Section/index.js +11 -1
  51. package/dist/Editor/common/Section/styles.js +16 -0
  52. package/dist/Editor/common/StyleBuilder/dividerStyles.js +56 -0
  53. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +19 -0
  54. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +19 -4
  55. package/dist/Editor/common/SwipeableDrawer/index.js +4 -15
  56. package/dist/Editor/common/SwipeableDrawer/style.js +3 -11
  57. package/dist/Editor/common/Uploader.js +2 -1
  58. package/dist/Editor/common/iconslist.js +23 -0
  59. package/dist/Editor/helper/RnD/focusNode.js +74 -0
  60. package/dist/Editor/helper/index.js +5 -2
  61. package/dist/Editor/helper/theme.js +2 -2
  62. package/dist/Editor/hooks/useBreakpoints.js +1 -1
  63. package/dist/Editor/hooks/useDragging.js +51 -0
  64. package/dist/Editor/hooks/useMouseMove.js +5 -4
  65. package/dist/Editor/hooks/withCommon.js +1 -0
  66. package/dist/Editor/hooks/withRestrictedNodes.js +48 -0
  67. package/dist/Editor/utils/Decorators/highlightSelection.js +16 -0
  68. package/dist/Editor/utils/Decorators/index.js +3 -2
  69. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +16 -1
  70. package/dist/Editor/utils/SlateUtilityFunctions.js +33 -5
  71. package/dist/Editor/utils/events.js +71 -0
  72. package/dist/Editor/utils/helper.js +16 -0
  73. package/package.json +1 -1
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
3
3
  import PropTypes from "prop-types";
4
- import { createEditor, Transforms, Range } from "slate";
4
+ import { createEditor, Range, Transforms } from "slate";
5
5
  import { Slate, Editable, ReactEditor } from "slate-react";
6
6
  import { useDebounce, useDebouncedCallback } from "use-debounce";
7
7
  import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
10
10
  import useMentions from "./hooks/useMentions";
11
11
  import MentionsPopup from "./common/MentionsPopup";
12
12
  import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
13
- import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
13
+ import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } from "./utils/events";
14
14
  import withCommon from "./hooks/withCommon";
15
15
  import DialogWrapper from "./DialogWrapper";
16
16
  import { serializeToText } from "./utils/serializeToText";
@@ -27,16 +27,16 @@ import DragAndDrop from "./common/DnD";
27
27
  import Section from "./common/Section";
28
28
  import decorators from "./utils/Decorators";
29
29
  import { getTRBLBreakPoints } from "./helper/theme";
30
- import { handleInsertLastElement, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
30
+ import { handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
31
31
  import useWindowResize from "./hooks/useWindowResize";
32
32
  import PopoverAIInput from "./Elements/AI/PopoverAIInput";
33
33
  import RnDCopy from "./common/RnD/RnDCopy";
34
34
  import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
35
35
  import { onInsertFragment } from "./utils/RnD/RnDCtrlCmds";
36
- import FontLoader from "./common/FontLoader/FontLoader";
37
36
  import "./font.css";
38
37
  import "./Editor.css";
39
38
  import "animate.css";
39
+ import FontLoader from "./common/FontLoader/FontLoader";
40
40
  import { jsx as _jsx } from "react/jsx-runtime";
41
41
  import { jsxs as _jsxs } from "react/jsx-runtime";
42
42
  const Item = /*#__PURE__*/forwardRef(({
@@ -82,7 +82,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
82
82
  onSave,
83
83
  editor: collaborativeEditor,
84
84
  readOnly,
85
- toolbarOptions,
86
85
  otherProps,
87
86
  isIframe,
88
87
  theme,
@@ -115,7 +114,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
115
114
  editorClass,
116
115
  fixedWidth = "60%",
117
116
  fullWidth = "80%",
118
- hideTools
117
+ hideTools = []
119
118
  } = otherProps || {};
120
119
  const editor = useMemo(() => {
121
120
  if (collaborativeEditor) return collaborativeEditor;
@@ -146,12 +145,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
146
145
  placeHolderColor: invertColor(pageColor || "#FFF"),
147
146
  theme
148
147
  });
149
- const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
150
148
  useEffect(() => {
151
149
  setValue(draftToSlate({
152
150
  data: content
153
151
  }));
154
- if (!isMobile && !ReactEditor.isFocused(editor)) {
152
+ if (!ReactEditor.isFocused(editor)) {
155
153
  ReactEditor.focus(editor);
156
154
  }
157
155
  }, [id, content]);
@@ -289,10 +287,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
289
287
  index,
290
288
  type
291
289
  } = mentions;
292
- const chars = type ? Shorthands[type]({
290
+ const updatedHideTools = !isFreeGrid(content) ? [...hideTools, "freegrid"] : hideTools;
291
+ const chars = type && !isFreeGrid(content) ? Shorthands[type]({
293
292
  ...mentions,
294
293
  CHARACTERS,
295
- hideTools: hideTools || []
294
+ hideTools: updatedHideTools || []
296
295
  }) : [];
297
296
  const handleEditorChange = newValue => {
298
297
  setValue(newValue);
@@ -366,6 +365,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
366
365
  });
367
366
  } else if (event.key === "Enter") {
368
367
  enterEvent(event, editor, customProps?.isMobile);
368
+ } else if (event.key === "ArrowUp" && otherProps?.tagName !== "Pages") {
369
+ upDownArrowKeyEvents(event, editor);
370
+ } else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
371
+ upDownArrowKeyEvents(event, editor);
369
372
  } else if (event.key === "Backspace") {
370
373
  const isPageSettingsNode = isPageSettings(event, editor);
371
374
  if (isPageSettingsNode) {
@@ -385,7 +388,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
385
388
  }
386
389
  }
387
390
  }
388
- }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
391
+ }, [chars, target, mentions, setMentions, search, type, mentionsRef]);
389
392
  const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
390
393
  const dotBg = needDotsBG ? {
391
394
  background: "white",
@@ -450,13 +453,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
450
453
  const selection = window?.getSelection();
451
454
  if (selection && selection.rangeCount > 0) {
452
455
  const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
453
- const containerRect = container?.getBoundingClientRect();
454
- const containerBottom = containerRect?.bottom;
456
+ const containerBottom = container?.getBoundingClientRect()?.bottom;
455
457
  if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
456
- // Calculate dynamic scroll based on remaining space
457
- const scrollAmount = Math.min(200, cursorPosition.bottom - containerBottom + 250);
458
458
  container?.scrollBy({
459
- top: scrollAmount,
459
+ top: 200,
460
460
  behavior: "smooth"
461
461
  });
462
462
  }
@@ -531,7 +531,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
531
531
  readOnly: isReadOnly,
532
532
  renderElement: renderElement,
533
533
  renderLeaf: renderLeaf,
534
- decorate: decorators,
534
+ decorate: d => decorators(d, editor),
535
535
  onKeyDown: onKeyDown,
536
536
  onSelect: () => handleCursorScroll(editorWrapper.current)
537
537
  }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
@@ -234,6 +234,18 @@ blockquote {
234
234
  background-color: #0052cc;
235
235
  }
236
236
 
237
+ .signature-btn-container .sign-placeholder {
238
+ display: none; /* will changed to flex on DnD */
239
+ flex-direction: column;
240
+ justify-content: center;
241
+ align-items: center;
242
+ border: 1px solid #E4E6E9;
243
+ border-radius: 10px;
244
+ background: white;
245
+ box-shadow: 0px 4px 16px 0px #0000000D;
246
+ gap: 10px;
247
+ }
248
+
237
249
  .signature-btn-grps {
238
250
  display: flex;
239
251
  justify-content: space-around;
@@ -244,6 +256,13 @@ blockquote {
244
256
  width: 17px !important;
245
257
  }
246
258
 
259
+ .react-datepicker__input-container input {
260
+ height: 40px !important;
261
+ border: 1px solid #ccc;
262
+ border-radius: 5px;
263
+ width: 100%;
264
+ }
265
+
247
266
  .close-popupbtn {
248
267
  border-radius: 4px !important;
249
268
  width: 24px;
@@ -884,7 +903,6 @@ blockquote {
884
903
  /* For Firefox */
885
904
  .removeScroll {
886
905
  -moz-appearance: textfield;
887
- appearance: none;
888
906
  }
889
907
 
890
908
  .borderInput:focus-visible {
@@ -1188,4 +1206,17 @@ blockquote {
1188
1206
 
1189
1207
  .freegrid-section {
1190
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;
1191
1222
  }
@@ -90,6 +90,7 @@ function AIInput({
90
90
  children: [/*#__PURE__*/_jsxs(Box, {
91
91
  component: "div",
92
92
  sx: classes.aiContainer,
93
+ ref: refs[0],
93
94
  children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
94
95
  sx: classes.generatedText,
95
96
  style: {
@@ -104,7 +105,6 @@ function AIInput({
104
105
  onSubmit: e => {
105
106
  e.preventDefault();
106
107
  },
107
- ref: refs[0],
108
108
  children: [/*#__PURE__*/_jsx("div", {
109
109
  className: "icon-container icons-elements",
110
110
  ref: inputWrapperRef,
@@ -116,22 +116,21 @@ function AIInput({
116
116
  children: /*#__PURE__*/_jsx(WaveLoading, {})
117
117
  }) : /*#__PURE__*/_jsx(TextareaAutosize, {
118
118
  className: "ai-input",
119
- placeholder: fromToolBar ? "" : "Ask AI to write anything...",
119
+ placeholder: "Ask AI to write anything...",
120
120
  ref: inputRef,
121
121
  value: inputValue,
122
122
  onChange: onInputChange,
123
- disabled: fromToolBar,
124
123
  onKeyDown: event => {
125
124
  if (event.key === "Enter" && !event.shiftKey) {
126
125
  event.preventDefault();
127
126
  handleSendBtnClick();
128
127
  }
129
128
  }
130
- }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
129
+ }), /*#__PURE__*/_jsxs(Box, {
131
130
  component: "div",
132
131
  style: classes.sendIconContainer,
133
132
  className: "icons-elements",
134
- children: [isMobile ? null : /*#__PURE__*/_jsx(IconButton, {
133
+ children: [/*#__PURE__*/_jsx(IconButton, {
135
134
  disabled: loading,
136
135
  onClick: () => startRecording(),
137
136
  children: /*#__PURE__*/_jsx(ChatMicIcon, {})
@@ -201,6 +201,29 @@ function PopoverAIInput({
201
201
  useEffect(() => {
202
202
  selectedEleRef.current = selectedElement;
203
203
  }, [selectedElement]);
204
+ const framePayload = (type, option) => {
205
+ let payload = {
206
+ mode: option.mode || 0,
207
+ query: option?.inputValue || inputValue
208
+ };
209
+ if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
210
+ payload.textOptionInput = type;
211
+ }
212
+ const selectedText = getSelectedText(editor);
213
+ const textData = generatedText || selectedText;
214
+ if (option.mode) {
215
+ payload.textData = textData;
216
+ } else if (selectedText && Number(payload.mode) === 0) {
217
+ payload.query = `${selectedText} \n ${payload.query}`;
218
+ }
219
+ const tryAgain = type === "try_again";
220
+ if (tryAgain) {
221
+ // resetting previous payload
222
+ const prevPayload = selectedOption?.payload || {};
223
+ payload = prevPayload;
224
+ }
225
+ return payload;
226
+ };
204
227
  const onSend = async (type, option) => {
205
228
  try {
206
229
  if (type === "close") {
@@ -232,28 +255,12 @@ function PopoverAIInput({
232
255
  onClickOutside();
233
256
  return;
234
257
  }
235
- if (type === "speech_to_text") {
236
- setGeneratedText(option.text);
237
- return;
238
- }
239
- if (type === "try_again") {
240
- // resetting the previous option and try again
241
- option = selectedOption;
242
- type = selectedOption.value;
243
- } else {
244
- setSelectedOption(option);
245
- }
246
258
  setLoading(true);
247
- const payload = {
248
- mode: option.mode || 0,
249
- query: option?.inputValue || inputValue
250
- };
251
- if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
252
- payload.textOptionInput = type;
253
- }
254
- if (option.mode) {
255
- payload.textData = generatedText || window.getSelection().toString();
256
- }
259
+ const payload = framePayload(type, option);
260
+ setSelectedOption({
261
+ ...option,
262
+ payload
263
+ });
257
264
  const result = await services("infinityAI", payload);
258
265
  setLoading(false);
259
266
  setInputValue("");
@@ -264,15 +271,19 @@ function PopoverAIInput({
264
271
  onClickOutside();
265
272
  return;
266
273
  }
267
- if (!option.replace) {
268
- if (type === "continue_writing") {
269
- setGeneratedText(generatedText + text);
270
- } else {
271
- setGeneratedText(text);
272
- }
273
- return;
274
+
275
+ // if (!option.replace) {
276
+ if (type === "continue_writing") {
277
+ setGeneratedText(generatedText + text);
278
+ } else {
279
+ setGeneratedText(text);
274
280
  }
275
- insertText(editor, text);
281
+
282
+ // return;
283
+ // }
284
+
285
+ // ** we are not using this insertText right now, AI returned response will not insert into the editor immediately, so option.replace will be false always
286
+ // insertText(editor, text);
276
287
 
277
288
  // scrollToAIInput();
278
289
  } catch (err) {
@@ -1,6 +1,5 @@
1
1
  const Styles = theme => ({
2
2
  aiContainer: {
3
- background: "#FCFAFF",
4
3
  background: theme?.palette?.editor?.aiInputBackground,
5
4
  border: "1px solid #8360FD",
6
5
  borderRadius: "6px",
@@ -103,6 +102,7 @@ const Styles = theme => ({
103
102
  customSelectWrapper: {
104
103
  width: "fit-content",
105
104
  marginTop: "4px",
105
+ position: "absolute",
106
106
  "@media only screen and (max-width: 600px)": {
107
107
  marginBottom: "4px"
108
108
  }
@@ -10,10 +10,14 @@ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../.
10
10
  import { handleLinkType, windowVar } from "../../utils/helper";
11
11
  import LinkSettings from "../../common/LinkSettings";
12
12
  import Icon from "../../common/Icon";
13
+ import { useEditorContext } from "../../hooks/useMouseMove";
13
14
  import { jsx as _jsx } from "react/jsx-runtime";
14
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
16
  const EditorButton = props => {
16
17
  const theme = useTheme();
18
+ const {
19
+ theme: appTheme
20
+ } = useEditorContext();
17
21
  const {
18
22
  attributes,
19
23
  element,
@@ -140,8 +144,8 @@ const EditorButton = props => {
140
144
  sx: {
141
145
  display: "inline-flex",
142
146
  color: "rgba(0, 0, 0, 0.54)",
143
- borderRadius: '50% !important',
144
- border: 'none !important'
147
+ borderRadius: "50% !important",
148
+ border: "none !important"
145
149
  },
146
150
  ...btnProps,
147
151
  children: /*#__PURE__*/_jsx(Icon, {
@@ -212,7 +216,7 @@ const EditorButton = props => {
212
216
  },
213
217
  "& svg": {
214
218
  "& path": {
215
- stroke: theme.palette.text.primary
219
+ stroke: appTheme?.palette?.text?.primary
216
220
  }
217
221
  },
218
222
  "& button": {
@@ -277,7 +281,7 @@ const EditorButton = props => {
277
281
  right: "-42px",
278
282
  stroke: "#fff",
279
283
  "& path": {
280
- fill: openMoreOptions ? theme.palette.text.blueText : ""
284
+ fill: openMoreOptions ? appTheme.palette.text.blueText : ""
281
285
  }
282
286
  },
283
287
  onClick: handleMoreBtn,
@@ -1,30 +1,137 @@
1
- import React from "react";
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";
2
8
  import { jsx as _jsx } from "react/jsx-runtime";
3
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
4
10
  const Divider = props => {
5
11
  const {
6
12
  attributes,
7
- children
13
+ children,
14
+ element,
15
+ customProps
8
16
  } = 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 onSettings = () => {
37
+ setOpenSettings(true);
38
+ };
39
+ const DividerToolbar = ({
40
+ selected,
41
+ showTool,
42
+ onSettings
43
+ }) => {
44
+ return /*#__PURE__*/_jsx("div", {
45
+ contentEditable: false,
46
+ className: "divider-settings",
47
+ style: {
48
+ top: "-20px",
49
+ left: 0
50
+ },
51
+ children: /*#__PURE__*/_jsx(Tooltip, {
52
+ title: "Divider Settings",
53
+ arrow: true,
54
+ children: /*#__PURE__*/_jsx(IconButton, {
55
+ size: "small",
56
+ sx: {
57
+ background: theme?.palette?.greyshades?.light8,
58
+ border: theme?.palette?.type === 'dark' ? '1px solid #E4E8EB33' : 'none',
59
+ boxShadow: '0px 0px 4px 0px #00000040',
60
+ borderRadius: '50%',
61
+ '& svg': {
62
+ stroke: theme?.palette?.text?.secondary3
63
+ },
64
+ '&.MuiIconButton-root:hover': {
65
+ background: `${theme?.palette?.greyshades?.light8} !important`
66
+ }
67
+ },
68
+ onClick: onSettings,
69
+ children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
70
+ })
71
+ })
72
+ });
73
+ };
74
+ const onSave = data => {
75
+ const updateData = {
76
+ ...data
77
+ };
78
+ delete updateData.children;
79
+ Transforms.setNodes(editor, {
80
+ ...updateData
81
+ }, {
82
+ at: path
83
+ });
84
+ onClose();
85
+ };
86
+ const onClose = () => {
87
+ setOpenSettings(false);
88
+ };
89
+ const onDelete = () => {
90
+ if (path) {
91
+ Transforms.removeNodes(editor, {
92
+ at: path
93
+ });
94
+ }
95
+ };
9
96
  return /*#__PURE__*/_jsxs("div", {
10
97
  ...attributes,
11
98
  className: "dividerComponent",
12
- contentEditable: "false",
13
99
  style: {
14
- userSelect: "none"
100
+ userSelect: "none",
101
+ position: 'relative'
15
102
  },
16
- children: [/*#__PURE__*/_jsx("hr", {
17
- contentEditable: "false",
103
+ children: [!readOnly && /*#__PURE__*/_jsx("div", {
104
+ className: `element-root element-selector`,
105
+ contentEditable: false,
106
+ style: {
107
+ zIndex: 1000
108
+ },
109
+ children: /*#__PURE__*/_jsx(DividerToolbar, {
110
+ selected: selected,
111
+ showTool: showTool,
112
+ onSettings: onSettings
113
+ })
114
+ }), /*#__PURE__*/_jsx("hr", {
115
+ contentEditable: false,
18
116
  className: "editorDivider",
19
117
  style: {
20
- userSelect: "none"
118
+ userSelect: "none",
119
+ borderTop: !borderColor?.includes("linear") ? `${borderWidth} ${borderStyle} ${borderColor}` : `transparent`,
120
+ backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
121
+ height: borderColor?.includes("linear") ? borderWidth : undefined
21
122
  }
22
123
  }), /*#__PURE__*/_jsx("span", {
23
124
  style: {
24
125
  display: "none"
25
126
  },
26
127
  children: children
27
- })]
128
+ }), openSettings ? /*#__PURE__*/_jsx(DividerPopup, {
129
+ element: element,
130
+ onSave: onSave,
131
+ onClose: onClose,
132
+ onDelete: onDelete,
133
+ customProps: customProps
134
+ }) : null]
28
135
  });
29
136
  };
30
137
  export default Divider;
@@ -0,0 +1,24 @@
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,5 +1,5 @@
1
1
  .embed {
2
- /* width: fit-content; */
2
+ width: fit-content;
3
3
  position: relative;
4
4
  margin: 0px;
5
5
  }
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState, memo } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Node, Transforms, Editor } from "slate";
4
4
  import AspectRatioIcon from "@mui/icons-material/AspectRatio";
@@ -94,7 +94,8 @@ const ImageContent = props => {
94
94
  onTouchEnd: onTouchEnd // for mobile
95
95
  ,
96
96
  "data-path": path.join(","),
97
- draggable: false
97
+ draggable: false,
98
+ contentEditable: false
98
99
  });
99
100
  };
100
101
  const Image = props => {
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect, useCallback } from "react";
1
+ import React, { useState, useEffect } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Node, Transforms } from "slate";
4
4
  import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -87,7 +87,8 @@ const Video = ({
87
87
  url,
88
88
  xsHidden,
89
89
  width: oldWidth,
90
- bannerSpacing
90
+ bannerSpacing,
91
+ aspectRatio
91
92
  } = element;
92
93
  const editor = useSlateStatic();
93
94
  const [openSetttings, setOpenSettings] = useState(false);
@@ -189,9 +190,10 @@ const Video = ({
189
190
  width: {
190
191
  ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
191
192
  },
192
- height: url ? {
193
+ height: url && !aspectRatio ? {
193
194
  ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
194
- } : "auto"
195
+ } : "auto",
196
+ aspectRatio: aspectRatio ? aspectRatio : "auto"
195
197
  }, theme)
196
198
  };
197
199
  }
@@ -221,6 +223,7 @@ const Video = ({
221
223
  alignContent: vertical
222
224
  },
223
225
  ...element.attr,
226
+ contentEditable: false,
224
227
  children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
225
228
  element: element,
226
229
  onSave: onSave,
@@ -6,7 +6,6 @@ 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";
10
9
  import { jsx as _jsx } from "react/jsx-runtime";
11
10
  import { Fragment as _Fragment } from "react/jsx-runtime";
12
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,7 +19,6 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
20
19
  const [anchorEl, setAnchorEl] = useState(null);
21
20
  const [target, setTarget] = useState(selectionTarget);
22
21
  const open = Boolean(anchorEl);
23
- const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
24
22
  useImperativeHandle(ref, () => ({
25
23
  triggerClick: target => {
26
24
  setTarget(target);
@@ -56,27 +54,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
56
54
  icon: "emoji"
57
55
  }),
58
56
  icoBtnType: icoBtnType
59
- }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
60
- open: open,
61
- onClose: handleClose,
62
- customClass: "emojiDrawer",
63
- children: /*#__PURE__*/_jsx(Paper, {
64
- style: {
65
- width: '100%'
66
- },
67
- sx: {
68
- '& em-emoji-picker': {
69
- width: '100%'
70
- }
71
- },
72
- children: /*#__PURE__*/_jsx(EmojiPicker, {
73
- data: data,
74
- onEmojiSelect: onEmojiSelect,
75
- theme: theme?.palette?.type,
76
- dynamicWidth: true
77
- })
78
- })
79
- }) : /*#__PURE__*/_jsx(Popover, {
57
+ }), /*#__PURE__*/_jsx(Popover, {
80
58
  style: {
81
59
  zIndex: 10001
82
60
  },
@@ -401,7 +401,6 @@ const Form = props => {
401
401
  component: "button",
402
402
  onClick: onSubmitClick,
403
403
  disabled: loading,
404
- contentEditable: false,
405
404
  sx: {
406
405
  background: buttonProps?.bgColor || "rgb(30, 75, 122)",
407
406
  borderWidth: "1px",