@flozy/editor 4.0.3 → 4.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (148) hide show
  1. package/dist/Editor/CommonEditor.js +85 -13
  2. package/dist/Editor/DialogWrapper.js +4 -3
  3. package/dist/Editor/Editor.css +28 -2
  4. package/dist/Editor/Elements/AI/AIInput.js +31 -33
  5. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +119 -132
  7. package/dist/Editor/Elements/AI/Styles.js +2 -2
  8. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  9. package/dist/Editor/Elements/AI/VoiceToText/index.js +184 -0
  10. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  11. package/dist/Editor/Elements/AI/helper.js +5 -3
  12. package/dist/Editor/Elements/AppHeader/AppHeader.js +36 -23
  13. package/dist/Editor/Elements/Button/EditorButton.js +23 -16
  14. package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -2
  15. package/dist/Editor/Elements/Color Picker/ColorButtons.js +1 -1
  16. package/dist/Editor/Elements/Color Picker/Styles.js +1 -0
  17. package/dist/Editor/Elements/Embed/Image.js +15 -14
  18. package/dist/Editor/Elements/Embed/Video.js +12 -8
  19. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  20. package/dist/Editor/Elements/Form/Form.js +43 -27
  21. package/dist/Editor/Elements/Form/FormField.js +21 -10
  22. package/dist/Editor/Elements/Form/Workflow/index.js +5 -2
  23. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +437 -0
  24. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +206 -0
  25. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  26. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +236 -0
  27. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +44 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  29. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  30. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +19 -0
  31. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  32. package/dist/Editor/Elements/FreeGrid/styles.js +214 -0
  33. package/dist/Editor/Elements/Grid/Grid.js +12 -8
  34. package/dist/Editor/Elements/Grid/GridItem.js +31 -21
  35. package/dist/Editor/Elements/Link/LinkPopup.js +69 -13
  36. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  37. package/dist/Editor/Elements/NewLine/NewLineButton.js +2 -2
  38. package/dist/Editor/Elements/Signature/Signature.css +13 -6
  39. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +2 -1
  40. package/dist/Editor/Elements/Signature/SignaturePopup.js +186 -31
  41. package/dist/Editor/Elements/SimpleText/index.js +19 -7
  42. package/dist/Editor/Elements/SimpleText/style.js +44 -1
  43. package/dist/Editor/ErrorBoundary.js +30 -0
  44. package/dist/Editor/Styles/EditorStyles.js +28 -0
  45. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +1 -1
  46. package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -2
  47. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +33 -5
  48. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +12 -13
  49. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +12 -13
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +3 -0
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +59 -0
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  53. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +107 -40
  54. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +57 -61
  55. package/dist/Editor/Toolbar/PopupTool/index.js +13 -3
  56. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  57. package/dist/Editor/Toolbar/toolbarGroups.js +15 -5
  58. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  59. package/dist/Editor/common/EditorCmds.js +0 -3
  60. package/dist/Editor/common/EditorIcons.js +7 -7
  61. package/dist/Editor/common/Icon.js +39 -30
  62. package/dist/Editor/common/ImageList.js +16 -3
  63. package/dist/Editor/common/ImageSelector/ImageSelector.js +30 -9
  64. package/dist/Editor/common/ImageSelector/Styles.js +2 -1
  65. package/dist/Editor/common/LinkSettings/index.js +2 -1
  66. package/dist/Editor/common/LinkSettings/style.js +11 -8
  67. package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
  68. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  69. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +142 -0
  70. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  71. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  72. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  73. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  74. package/dist/Editor/common/RnD/DragOver/index.js +55 -0
  75. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  76. package/dist/Editor/common/RnD/ElementOptions/Actions.js +102 -0
  77. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  78. package/dist/Editor/common/RnD/ElementOptions/index.js +95 -0
  79. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  80. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  81. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +36 -0
  82. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +60 -0
  83. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +9 -0
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +47 -0
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +47 -0
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +47 -0
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +48 -0
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +47 -0
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +47 -0
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +17 -0
  92. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  93. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +18 -0
  94. package/dist/Editor/common/RnD/ElementSettings/styles.js +94 -0
  95. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  96. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  97. package/dist/Editor/common/RnD/GuideLines/styles.js +62 -0
  98. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  99. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  100. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  101. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  102. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  103. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  104. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  105. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  106. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  107. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +20 -0
  108. package/dist/Editor/common/RnD/TransformHandles/index.js +67 -0
  109. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  110. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  111. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  112. package/dist/Editor/common/RnD/Utils/gridDropItem.js +181 -0
  113. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  114. package/dist/Editor/common/RnD/VirtualElement/index.js +77 -0
  115. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  116. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  117. package/dist/Editor/common/RnD/index.js +567 -0
  118. package/dist/Editor/common/RnD/styles.js +4 -0
  119. package/dist/Editor/common/Section/index.js +21 -12
  120. package/dist/Editor/common/Section/styles.js +7 -4
  121. package/dist/Editor/common/Shorthands/elements.js +21 -9
  122. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +18 -10
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +18 -5
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  126. package/dist/Editor/common/StyleBuilder/index.js +6 -4
  127. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  128. package/dist/Editor/common/iconListV2.js +843 -0
  129. package/dist/Editor/commonStyle.js +6 -0
  130. package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
  131. package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
  132. package/dist/Editor/helper/breakpoint.js +5 -0
  133. package/dist/Editor/helper/index.js +139 -0
  134. package/dist/Editor/helper/theme.js +50 -1
  135. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  136. package/dist/Editor/hooks/useMouseMove.js +36 -8
  137. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  138. package/dist/Editor/hooks/withCommon.js +2 -1
  139. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  140. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +197 -0
  141. package/dist/Editor/utils/SlateUtilityFunctions.js +36 -4
  142. package/dist/Editor/utils/events.js +5 -0
  143. package/dist/Editor/utils/form.js +7 -2
  144. package/dist/Editor/utils/formfield.js +1 -1
  145. package/dist/Editor/utils/freegrid.js +91 -0
  146. package/dist/Editor/utils/helper.js +43 -0
  147. package/dist/Editor/utils/insertAppHeader.js +47 -40
  148. package/package.json +6 -2
@@ -1,5 +1,6 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
3
+ import PropTypes from "prop-types";
3
4
  import { createEditor, Transforms } from "slate";
4
5
  import { Slate, Editable, ReactEditor } from "slate-react";
5
6
  import { useDebounce, useDebouncedCallback } from "use-debounce";
@@ -16,9 +17,7 @@ import { serializeToText } from "./utils/serializeToText";
16
17
  import { getPageSettings } from "./utils/pageSettings";
17
18
  import { getThumbnailImage, invertColor } from "./helper";
18
19
  import PopupTool from "./Toolbar/PopupTool";
19
- import "./font.css";
20
- import "./Editor.css";
21
- import { Box, Button, Typography } from "@mui/material";
20
+ import { Box, Typography, useTheme } from "@mui/material";
22
21
  import Shorthands from "./common/Shorthands";
23
22
  import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
24
23
  import { EditorProvider } from "./hooks/useMouseMove";
@@ -26,12 +25,17 @@ import TopBanner from "./Elements/TopBanner/TopBanner";
26
25
  import editorStyles from "./Styles/EditorStyles";
27
26
  import DragAndDrop from "./common/DnD";
28
27
  import Section from "./common/Section";
29
- import "animate.css";
30
28
  import decorators from "./utils/Decorators";
31
29
  import { getTRBLBreakPoints } from "./helper/theme";
32
- import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
30
+ import { handleInsertLastElement, isFreeGridFragment, outsideEditorClickLabel } from "./utils/helper";
33
31
  import useWindowResize from "./hooks/useWindowResize";
34
32
  import PopoverAIInput from "./Elements/AI/PopoverAIInput";
33
+ import RnDCopy from "./common/RnD/RnDCopy";
34
+ import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
35
+ import { onInsertFragment } from "./utils/RnD/RnDCtrlCmds";
36
+ import "./font.css";
37
+ import "./Editor.css";
38
+ import "animate.css";
35
39
  import { jsx as _jsx } from "react/jsx-runtime";
36
40
  import { jsxs as _jsxs } from "react/jsx-runtime";
37
41
  const Item = /*#__PURE__*/forwardRef(({
@@ -60,7 +64,8 @@ const Leaf = ({
60
64
  children,
61
65
  leaf
62
66
  }) => {
63
- children = getMarked(leaf, children);
67
+ const theme = useTheme();
68
+ children = getMarked(leaf, children, theme);
64
69
  return /*#__PURE__*/_jsx("span", {
65
70
  ...attributes,
66
71
  children: children
@@ -79,7 +84,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
79
84
  toolbarOptions,
80
85
  otherProps,
81
86
  isIframe,
82
- theme
87
+ theme,
88
+ showViewport = false
83
89
  } = props;
84
90
  const editorWrapper = useRef();
85
91
  const mentionsRef = useRef();
@@ -99,6 +105,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
99
105
  });
100
106
  const [isScrolling, setIsScrolling] = useState(false);
101
107
  const [isTextSelected, setIsTextSelected] = useState(false);
108
+ const [breakpoint, setBreakpoint] = useState("");
102
109
  const [size] = useWindowResize();
103
110
  const {
104
111
  needDotsBG,
@@ -110,7 +117,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
110
117
  fullWidth = "80%",
111
118
  hideTools
112
119
  } = otherProps || {};
113
- const [drag, setDrag] = useState(null);
114
120
  const editor = useMemo(() => {
115
121
  if (collaborativeEditor) return collaborativeEditor;
116
122
  return withCommon(createEditor(), {
@@ -144,6 +150,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
144
150
  setValue(draftToSlate({
145
151
  data: content
146
152
  }));
153
+ if (!ReactEditor.isFocused(editor)) {
154
+ ReactEditor.focus(editor);
155
+ }
147
156
  }, [id, content]);
148
157
  useEffect(() => {
149
158
  if (editorWrapper && editorWrapper?.current && JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
@@ -172,6 +181,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
172
181
  });
173
182
  return c;
174
183
  };
184
+
185
+ // Example of resetting or re-rendering all nodes
186
+ const reRenderAllNodes = () => {
187
+ const newNodes = JSON.parse(JSON.stringify(value));
188
+ setValue(newNodes); // This will re-render the whole document
189
+ };
190
+
191
+ const onSwitchBreakpoint = b => {
192
+ setBreakpoint(b);
193
+ reRenderAllNodes();
194
+ };
175
195
  useImperativeHandle(ref, () => ({
176
196
  async getThumbnail(needBackground = false, options = {}) {
177
197
  try {
@@ -191,7 +211,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
191
211
  insertFragments(fragments, clearAll = false, rest = {}) {
192
212
  try {
193
213
  if (!clearAll) {
194
- if (rest?.nextLine) {
214
+ if (isFreeGridFragment(fragments)) {
215
+ onInsertFragment({
216
+ editor,
217
+ slateNodes: fragments[0] || fragments
218
+ });
219
+ } else if (rest?.nextLine) {
195
220
  const {
196
221
  anchor
197
222
  } = editor?.selection || {};
@@ -233,6 +258,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
233
258
  h
234
259
  });
235
260
  },
261
+ switchViewport(bp) {
262
+ console.log("switching breakpoint", bp);
263
+ onSwitchBreakpoint(bp);
264
+ },
236
265
  undo() {
237
266
  editor?.undo();
238
267
  },
@@ -305,6 +334,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
305
334
  const onKeyDown = useCallback(event => {
306
335
  const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
307
336
  const isCtrlKey = event.ctrlKey || isMetaKey;
337
+ // for RnD item move front and back
338
+ const isUpandDown = event.metaKey && [38, 40].indexOf(event.keyCode) > -1;
308
339
  if (target && chars.length > 0 && !isCtrlKey) {
309
340
  mentionsEvent({
310
341
  event,
@@ -316,7 +347,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
316
347
  type,
317
348
  mentionsRef
318
349
  });
319
- } else if (isCtrlKey) {
350
+ } else if (isCtrlKey || isUpandDown) {
320
351
  commands({
321
352
  event,
322
353
  editor,
@@ -334,6 +365,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
334
365
  });
335
366
  } else if (event.key === "Enter") {
336
367
  enterEvent(event, editor, customProps?.isMobile);
368
+ } else if (event.key === 'Backspace') {
369
+ event.preventDefault();
370
+ editor.deleteBackward();
337
371
  }
338
372
  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
339
373
  const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -386,6 +420,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
386
420
  }
387
421
  return style;
388
422
  }, [pageBgImage, pageColor]);
423
+ const handleContextMenu = e => {
424
+ if (!readOnly) {
425
+ e.preventDefault();
426
+ e.stopPropagation();
427
+ }
428
+ };
389
429
  const handleCursorScroll = container => {
390
430
  try {
391
431
  const cursorPosition = window.getSelection()?.getRangeAt(0).getBoundingClientRect();
@@ -410,11 +450,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
410
450
  footer: footer || "",
411
451
  children: /*#__PURE__*/_jsx(Box, {
412
452
  component: "div",
413
- className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
453
+ className: `et-wrpr stimulate-${breakpoint} ${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
414
454
  sx: classes.root,
415
455
  style: {
416
456
  ...dotBg
417
457
  },
458
+ "data-breakpoint": breakpoint,
459
+ onContextMenu: handleContextMenu,
418
460
  children: /*#__PURE__*/_jsxs(Slate, {
419
461
  editor: editor,
420
462
  initialValue: value,
@@ -475,11 +517,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
475
517
  chars: chars,
476
518
  type: type,
477
519
  theme: theme
478
- }) : null]
520
+ }) : null, /*#__PURE__*/_jsx(RnDCopy, {
521
+ readOnly: readOnly
522
+ })]
479
523
  })
480
524
  }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
481
525
  customProps: customProps,
482
- toolbarOptions: toolbarOptions,
483
526
  theme: theme
484
527
  }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
485
528
  otherProps: otherProps || {}
@@ -501,6 +544,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
501
544
  theme: theme,
502
545
  setIsTextSelected: setIsTextSelected,
503
546
  customProps: customProps
547
+ }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
548
+ breakpoint: breakpoint,
549
+ onChange: b => onSwitchBreakpoint(b)
504
550
  }) : null]
505
551
  })
506
552
  }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
@@ -513,4 +559,30 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
513
559
  });
514
560
  });
515
561
  CommonEditor.displayName = "CommonEditor";
562
+ CommonEditor.propTypes = {
563
+ /** Id of the content */
564
+ id: PropTypes.string,
565
+ /** Set to true for readonly mode */
566
+ readOnly: PropTypes.oneOf(["readonly", ""]),
567
+ /** It can be a draft js content or a slate js content */
568
+ content: PropTypes.any,
569
+ /** User details */
570
+ user: PropTypes.object,
571
+ /** API URL base for pages api calls */
572
+ apiHOST: PropTypes.string,
573
+ /** A callback function with updated edited content,
574
+ * this method will get called whenever the content changes happen and wait idle for 500ms
575
+ * uses the debounce mechanism
576
+ */
577
+ onSave: PropTypes.func,
578
+ /**
579
+ * MUI theme object form parent application
580
+ */
581
+ theme: PropTypes.object,
582
+ /**
583
+ * Editor component based props can be passed here
584
+ * @property {bool} isSignerDetailsRequired - To make username and email required in Forms
585
+ */
586
+ otherProps: PropTypes.object
587
+ };
516
588
  export default CommonEditor;
@@ -1,8 +1,7 @@
1
1
  import React from "react";
2
2
  import { Dialog, DialogTitle, DialogContent, IconButton, Grid } from "@mui/material";
3
3
  import CloseIcon from "@mui/icons-material/Close";
4
- // import styled from "@emotion/styled";
5
- // import commonStyle from "./commonStyle";
4
+ import ViewportStimulator from "./common/RnD/Theme/ViewportStimulator";
6
5
  import { jsx as _jsx } from "react/jsx-runtime";
7
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
7
  const DialogWrapper = props => {
@@ -43,7 +42,9 @@ const DialogWrapper = props => {
43
42
  }), /*#__PURE__*/_jsx(DialogContent, {
44
43
  children: children
45
44
  })]
46
- }) : children;
45
+ }) : /*#__PURE__*/_jsx(ViewportStimulator, {
46
+ children: children
47
+ });
47
48
  };
48
49
  DialogWrapper.defaultProps = {
49
50
  fullScreen: false,
@@ -267,7 +267,7 @@ blockquote {
267
267
  margin: 12px 0px;
268
268
  padding: 0px 5px;
269
269
  border: 0px solid #ccc;
270
- min-height: 100px;
270
+ min-height: 211px;
271
271
  }
272
272
 
273
273
  .signature-signed-wrapper {
@@ -331,7 +331,7 @@ blockquote {
331
331
  .signature-canvas {
332
332
  height: 100%;
333
333
  width: 100%;
334
- border: 1px solid #0052cc;
334
+ border: 1px solid #2563EB;
335
335
  border-radius: 12px;
336
336
  }
337
337
 
@@ -364,6 +364,7 @@ blockquote {
364
364
 
365
365
  .dialog-actions-si .MuiButtonBase-root {
366
366
  opacity: 1;
367
+ padding: 6px 5px 0px 3px !important
367
368
  }
368
369
 
369
370
  .signature-tab {
@@ -374,6 +375,19 @@ blockquote {
374
375
  width: 100%;
375
376
  }
376
377
 
378
+ .signature-tab2 {
379
+ /* display: flex; */
380
+ align-items: center;
381
+ border-width: 0px, 0px, 0px, 0px;
382
+ border-style: solid;
383
+ border-color: #2563EB;
384
+ justify-content: center;
385
+ flex-direction: column;
386
+ width: 100%;
387
+ border-radius: 7px;
388
+ padding: 10px;
389
+ }
390
+
377
391
  .upload-sign-img-wrapper {
378
392
  text-align: center;
379
393
  }
@@ -439,6 +453,10 @@ blockquote {
439
453
  color: #ffffff !important;
440
454
  border: 1px solid #2563eb !important;
441
455
  width: auto !important;
456
+ padding: 2px 0px 0px 0px !important;
457
+ min-width: 89px !important;
458
+ font-family: Inter, sans-serif;
459
+ text-transform: none;
442
460
  }
443
461
 
444
462
  .MuiButton-root.primaryBtn.disabled,
@@ -459,6 +477,10 @@ blockquote {
459
477
  margin-right: 15px !important;
460
478
  color: #2563eb;
461
479
  width: auto !important;
480
+ padding: 2px 0px 0px 0px !important;
481
+ min-width: 89px !important;
482
+ font-family: Inter, sans-serif;
483
+ text-transform: none;
462
484
  }
463
485
 
464
486
  .deleteBtn {
@@ -1126,4 +1148,8 @@ blockquote {
1126
1148
 
1127
1149
  .scrollSmooth {
1128
1150
  scroll-behavior: smooth;
1151
+ }
1152
+
1153
+ .freegrid-section {
1154
+ max-width: 100% !important;
1129
1155
  }
@@ -4,13 +4,13 @@ import Icon from "../../common/Icon";
4
4
  // import { TbRotateClockwise } from "react-icons/tb";
5
5
  // import { FaRegCircleCheck } from "react-icons/fa6";
6
6
  import { IoSend } from "react-icons/io5";
7
- import React, { forwardRef, useEffect, useRef } from "react";
7
+ import React, { forwardRef, useEffect, useRef, useState } from "react";
8
8
  import WaveLoading from "../../common/WaveLoading";
9
- import useWindowResize from "../../hooks/useWindowResize";
10
9
  import CustomSelect from "./CustomSelect";
11
10
  import { editContentOptions, newContentOptions, generatedContentOptions } from "./helper";
12
11
  import useClickOutside from "../../hooks/useClickOutside";
13
12
  import { useEditorContext } from "../../hooks/useMouseMove";
13
+ import { ChatMicIcon } from "../../assets/svg/AIIcons";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
16
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ function getProps(openAI, generatedText) {
18
18
  const dropDownProps = {
19
19
  fromElements: {
20
20
  options: newContentOptions,
21
- show: window.getSelection().toString().length
21
+ show: generatedText?.length
22
22
  },
23
23
  fromToolBar: {
24
24
  options: editContentOptions,
@@ -36,20 +36,21 @@ function getProps(openAI, generatedText) {
36
36
  }
37
37
  function AIInput({
38
38
  onSend,
39
- loading,
40
39
  generatedText,
41
40
  openAI,
42
41
  inputValue,
43
42
  onInputChange,
44
- onClickOutside
43
+ onClickOutside,
44
+ startRecording,
45
+ loading
45
46
  }, ref) {
46
47
  const {
47
48
  theme
48
49
  } = useEditorContext();
49
50
  const classes = Styles(theme);
50
51
  const inputRef = useRef();
51
- const [size] = useWindowResize();
52
52
  const inputWrapperRef = useRef();
53
+ const [contentHeight, setContentHeight] = useState("100px");
53
54
  const refs = useClickOutside({
54
55
  onClickOutside,
55
56
  omitIds: ["infinity-select-popover"],
@@ -74,35 +75,28 @@ function AIInput({
74
75
  if (isSendBtnDisabled) {
75
76
  return;
76
77
  }
77
- onSend("", {
78
- replace: true,
79
- isSendBtn: true
80
- });
78
+ onSend("", {});
81
79
  };
80
+ useEffect(() => {
81
+ const selectWrapper = refs?.length ? refs[1]?.current : null;
82
+ const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
83
+ if (selectWrapper && slateWrapper) {
84
+ const height = slateWrapper.offsetHeight - selectWrapper.offsetHeight - 80;
85
+ setContentHeight(height + "px");
86
+ }
87
+ }, [refs, generatedText]);
82
88
  return /*#__PURE__*/_jsxs(_Fragment, {
83
- children: [size.device === "xs" ? /*#__PURE__*/_jsx(Box, {
84
- component: "div",
85
- ref: refs[1],
86
- sx: classes.customSelectWrapper,
87
- children: /*#__PURE__*/_jsx(CustomSelect, {
88
- ...props,
89
- onSend: onSend,
90
- classes: classes
91
- })
92
- }) : null, /*#__PURE__*/_jsxs(Box, {
89
+ children: [/*#__PURE__*/_jsxs(Box, {
93
90
  component: "div",
94
91
  sx: classes.aiContainer,
95
92
  children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
96
93
  sx: classes.generatedText,
97
- children: /*#__PURE__*/_jsx("pre", {
98
- style: {
99
- whiteSpace: "pre-wrap",
100
- wordWrap: "break-word",
101
- fontFamily: "inherit",
102
- margin: 0
103
- },
104
- children: generatedText
105
- })
94
+ style: {
95
+ maxHeight: contentHeight
96
+ },
97
+ dangerouslySetInnerHTML: {
98
+ __html: generatedText
99
+ }
106
100
  }) : null, /*#__PURE__*/_jsxs(Box, {
107
101
  component: "form",
108
102
  sx: classes.aiInputWrapper,
@@ -132,21 +126,25 @@ function AIInput({
132
126
  handleSendBtnClick();
133
127
  }
134
128
  }
135
- }), fromToolBar ? null : /*#__PURE__*/_jsx(Box, {
129
+ }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
136
130
  component: "div",
137
131
  style: classes.sendIconContainer,
138
132
  className: "icons-elements",
139
- children: /*#__PURE__*/_jsx(IconButton, {
133
+ children: [/*#__PURE__*/_jsx(IconButton, {
134
+ disabled: loading,
135
+ onClick: () => startRecording(),
136
+ children: /*#__PURE__*/_jsx(ChatMicIcon, {})
137
+ }), /*#__PURE__*/_jsx(IconButton, {
140
138
  sx: isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn,
141
139
  onClick: () => handleSendBtnClick(),
142
140
  children: /*#__PURE__*/_jsx(IoSend, {
143
141
  color: "#fff",
144
142
  size: 14
145
143
  })
146
- })
144
+ })]
147
145
  })]
148
146
  })]
149
- }), size.device === "xs" ? null : /*#__PURE__*/_jsx(Box, {
147
+ }), /*#__PURE__*/_jsx(Box, {
150
148
  component: "div",
151
149
  ref: refs[1],
152
150
  sx: classes.customSelectWrapper,
@@ -1,4 +1,4 @@
1
- import { Box, Button, IconButton, Popover, Typography } from "@mui/material";
1
+ import { Box, Button, IconButton, Popper, Typography } from "@mui/material";
2
2
  import React, { useRef, useState } from "react";
3
3
  import { FaChevronRight } from "react-icons/fa";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -49,9 +49,17 @@ function DisplayOption({
49
49
  } = option;
50
50
  const [open, setOpen] = useState(false);
51
51
  const optionRef = useRef();
52
+ const openOptions = e => {
53
+ if (option.options?.length && !open) {
54
+ setOpen(e.currentTarget);
55
+ return;
56
+ }
57
+ };
52
58
  return /*#__PURE__*/_jsxs(Box, {
53
59
  sx: classes.optionWrapper,
54
60
  ref: optionRef,
61
+ onMouseEnter: openOptions,
62
+ onMouseLeave: () => setOpen(null),
55
63
  children: [/*#__PURE__*/_jsxs(Button, {
56
64
  sx: classes.optionBtn,
57
65
  onClick: e => {
@@ -59,7 +67,7 @@ function DisplayOption({
59
67
 
60
68
  // is having child options
61
69
  if (option.options?.length) {
62
- setOpen(e.currentTarget);
70
+ openOptions(e);
63
71
  return;
64
72
  }
65
73
  setOpen(null);
@@ -77,25 +85,24 @@ function DisplayOption({
77
85
  size: 12
78
86
  })
79
87
  })]
80
- }), /*#__PURE__*/_jsx(Popover, {
88
+ }), /*#__PURE__*/_jsx(Popper, {
81
89
  open: open && option.options,
82
90
  anchorEl: open,
83
91
  sx: {
84
92
  zIndex: 9001,
85
93
  background: "transparent"
86
94
  },
87
- anchorOrigin: {
88
- vertical: "top",
89
- horizontal: "right"
90
- },
91
95
  onClose: () => {
92
96
  setOpen(null);
93
97
  },
94
- children: /*#__PURE__*/_jsx(CustomSelect, {
95
- options: option.options,
96
- onSend: onSend,
97
- classes: classes,
98
- show: open
98
+ placement: "right-start",
99
+ children: /*#__PURE__*/_jsx(Box, {
100
+ children: /*#__PURE__*/_jsx(CustomSelect, {
101
+ options: option.options,
102
+ onSend: onSend,
103
+ classes: classes,
104
+ show: open
105
+ })
99
106
  })
100
107
  })]
101
108
  });