@flozy/editor 3.8.0 → 3.8.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. package/dist/Editor/CommonEditor.js +169 -111
  2. package/dist/Editor/Editor.css +1 -12
  3. package/dist/Editor/Elements/AI/AIInput.js +16 -5
  4. package/dist/Editor/Elements/AI/PopoverAIInput.js +31 -17
  5. package/dist/Editor/Elements/AI/Styles.js +2 -1
  6. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  7. package/dist/Editor/Elements/AI/VoiceToText/index.js +167 -0
  8. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  9. package/dist/Editor/Elements/Accordion/Accordion.js +74 -7
  10. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +3 -2
  11. package/dist/Editor/Elements/Accordion/AccordionSummary.js +7 -74
  12. package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
  13. package/dist/Editor/Elements/Button/EditorButton.js +28 -16
  14. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  15. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  16. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  17. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  18. package/dist/Editor/Elements/Embed/Image.js +28 -20
  19. package/dist/Editor/Elements/Embed/Video.js +15 -11
  20. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  21. package/dist/Editor/Elements/Grid/Grid.js +2 -0
  22. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  23. package/dist/Editor/Elements/Link/Link.js +6 -1
  24. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  25. package/dist/Editor/Elements/Link/LinkPopup.js +11 -3
  26. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  27. package/dist/Editor/Elements/Table/Table.js +1 -1
  28. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  29. package/dist/Editor/MiniEditor.js +3 -1
  30. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  31. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  32. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  33. package/dist/Editor/Toolbar/FormatTools/TextSize.js +5 -11
  34. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  35. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  36. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  37. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +20 -13
  38. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  39. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  40. package/dist/Editor/Toolbar/PopupTool/index.js +6 -5
  41. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  42. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  43. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  44. package/dist/Editor/common/ColorPickerButton.js +25 -9
  45. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  46. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  47. package/dist/Editor/common/CustomDialog/index.js +94 -0
  48. package/dist/Editor/common/CustomDialog/style.js +67 -0
  49. package/dist/Editor/common/CustomSelect.js +33 -0
  50. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  51. package/dist/Editor/common/EditorCmds.js +35 -0
  52. package/dist/Editor/common/Icon.js +30 -2
  53. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  54. package/dist/Editor/common/LinkSettings/index.js +2 -1
  55. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  56. package/dist/Editor/common/MentionsPopup/Styles.js +5 -2
  57. package/dist/Editor/common/Shorthands/elements.js +54 -0
  58. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  59. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  60. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  61. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +33 -29
  62. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +31 -25
  63. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  64. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  65. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  66. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  67. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  68. package/dist/Editor/helper/theme.js +189 -4
  69. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  70. package/dist/Editor/hooks/useMouseMove.js +4 -2
  71. package/dist/Editor/plugins/withEmbeds.js +1 -1
  72. package/dist/Editor/plugins/withHTML.js +47 -5
  73. package/dist/Editor/plugins/withLayout.js +15 -10
  74. package/dist/Editor/plugins/withTable.js +2 -2
  75. package/dist/Editor/theme/ThemeList.js +50 -173
  76. package/dist/Editor/theme/index.js +144 -0
  77. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  78. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  79. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  80. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  81. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  82. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  83. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  84. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  85. package/dist/Editor/themeSettings/icons.js +60 -0
  86. package/dist/Editor/themeSettings/index.js +320 -0
  87. package/dist/Editor/themeSettings/style.js +152 -0
  88. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  89. package/dist/Editor/themeSettingsAI/index.js +356 -0
  90. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  91. package/dist/Editor/themeSettingsAI/style.js +247 -0
  92. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -25
  93. package/dist/Editor/utils/button.js +1 -17
  94. package/dist/Editor/utils/events.js +11 -4
  95. package/dist/Editor/utils/font.js +40 -37
  96. package/dist/Editor/utils/helper.js +73 -13
  97. package/package.json +2 -1
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable no-unused-vars */
2
- import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
2
+ import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle, createContext } from "react";
3
3
  import { createEditor, Transforms } from "slate";
4
4
  import { Slate, Editable, ReactEditor } from "slate-react";
5
5
  import { useDebounce, useDebouncedCallback } from "use-debounce";
@@ -18,7 +18,7 @@ import { getThumbnailImage, invertColor } from "./helper";
18
18
  import PopupTool from "./Toolbar/PopupTool";
19
19
  import "./font.css";
20
20
  import "./Editor.css";
21
- import { Box, Button, Typography } from "@mui/material";
21
+ import { Box, IconButton, Typography } from "@mui/material";
22
22
  import Shorthands from "./common/Shorthands";
23
23
  import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
24
24
  import { EditorProvider } from "./hooks/useMouseMove";
@@ -28,12 +28,19 @@ import DragAndDrop from "./common/DnD";
28
28
  import Section from "./common/Section";
29
29
  import "animate.css";
30
30
  import decorators from "./utils/Decorators";
31
- import { getTRBLBreakPoints } from "./helper/theme";
32
- import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
31
+ import { getTRBLBreakPoints, getVariableValue } from "./helper/theme";
32
+ import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
33
33
  import useWindowResize from "./hooks/useWindowResize";
34
+ import { getTheme } from "./theme";
35
+ import { useTheme } from "@emotion/react";
36
+ import ThemeSettings from "./themeSettings";
37
+ import ThemeSettingsAI from "./themeSettingsAI";
38
+ import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
34
39
  import PopoverAIInput from "./Elements/AI/PopoverAIInput";
40
+ import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
35
41
  import { jsx as _jsx } from "react/jsx-runtime";
36
42
  import { jsxs as _jsxs } from "react/jsx-runtime";
43
+ export const ThemeContext = /*#__PURE__*/createContext(null);
37
44
  const Item = /*#__PURE__*/forwardRef(({
38
45
  children,
39
46
  ...props
@@ -60,7 +67,8 @@ const Leaf = ({
60
67
  children,
61
68
  leaf
62
69
  }) => {
63
- children = getMarked(leaf, children);
70
+ const theme = useTheme();
71
+ children = getMarked(leaf, children, theme);
64
72
  return /*#__PURE__*/_jsx("span", {
65
73
  ...attributes,
66
74
  children: children
@@ -79,7 +87,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
79
87
  toolbarOptions,
80
88
  otherProps,
81
89
  isIframe,
82
- theme
90
+ theme,
91
+ showThemeButtons
83
92
  } = props;
84
93
  const editorWrapper = useRef();
85
94
  const mentionsRef = useRef();
@@ -123,10 +132,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
123
132
  const {
124
133
  bannerSpacing,
125
134
  pageBgImage,
126
- pageColor,
135
+ pageColor = "",
127
136
  color: pageTextColor,
128
137
  pageWidth,
129
- maxWidth: pageMaxWidth
138
+ maxWidth: pageMaxWidth,
139
+ theme: selectedTheme
130
140
  } = pageSt?.pageProps || {
131
141
  bannerSpacing: {
132
142
  left: 0,
@@ -137,9 +147,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
137
147
  };
138
148
  const classes = editorStyles({
139
149
  padHeight: !fullScreen ? otherProps?.padHeight : 20,
140
- placeHolderColor: invertColor(pageColor || "#FFF"),
150
+ placeHolderColor: invertColor(pageColor.startsWith("var") ? getVariableValue(pageColor) : pageColor || "#FFF"),
141
151
  theme
142
152
  });
153
+ const [openTheme, setOpenTheme] = useState(false);
154
+ const [openAITheme, setOpenAITheme] = useState(false);
143
155
  useEffect(() => {
144
156
  setValue(draftToSlate({
145
157
  data: content
@@ -239,6 +251,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
239
251
  redo() {
240
252
  editor?.redo();
241
253
  },
254
+ toggleTheme() {
255
+ setOpenTheme(!openTheme);
256
+ },
257
+ toggleAITheme() {
258
+ setOpenAITheme(!openAITheme);
259
+ },
242
260
  getPageSettings: {
243
261
  background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
244
262
  }
@@ -319,7 +337,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
319
337
  } else if (isCtrlKey) {
320
338
  commands({
321
339
  event,
322
- editor
340
+ editor,
341
+ needLayout
323
342
  });
324
343
  } else if (event.key === "Tab") {
325
344
  event.preventDefault();
@@ -385,113 +404,152 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
385
404
  }
386
405
  return style;
387
406
  }, [pageBgImage, pageColor]);
388
- return /*#__PURE__*/_jsx(EditorProvider, {
389
- theme: theme,
390
- editor: editor,
391
- children: /*#__PURE__*/_jsx(DialogWrapper, {
392
- classes: classes,
393
- ...props,
394
- fullScreen: fullScreen,
395
- footer: footer || "",
396
- children: /*#__PURE__*/_jsx(Box, {
397
- component: "div",
398
- className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
399
- sx: classes.root,
400
- style: {
401
- ...dotBg
402
- },
403
- children: /*#__PURE__*/_jsxs(Slate, {
404
- editor: editor,
405
- initialValue: value,
406
- onChange: handleEditorChange,
407
- children: [/*#__PURE__*/_jsx(DragAndDrop, {
408
- children: /*#__PURE__*/_jsxs(Overlay, {
409
- children: [/*#__PURE__*/_jsx(Box, {
410
- className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
411
- sx: classes.slateWrapper,
412
- id: "slate-wrapper-scroll-container"
413
- // style={editorWrapperStyle}
414
- ,
415
- ref: editorWrapper,
416
- onClick: e => {
417
- handleInsertLastElement(e, editor);
418
- },
419
- onScroll: handleScroll,
420
- style: editorWrapperStyle,
421
- children: /*#__PURE__*/_jsxs(Box, {
422
- component: "div",
423
- className: "max-content",
424
- "data-info": outsideEditorClickLabel,
425
- children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
426
- className: "scroll-area",
427
- "data-info": outsideEditorClickLabel,
407
+ const themeProps = getTheme(selectedTheme);
408
+ return /*#__PURE__*/_jsx(ThemeContext.Provider, {
409
+ value: {
410
+ openTheme,
411
+ setOpenTheme
412
+ },
413
+ children: /*#__PURE__*/_jsx(CssVarsProvider, {
414
+ theme: extendTheme(selectedTheme?.theme?.cssVars || {}),
415
+ children: /*#__PURE__*/_jsxs(EditorProvider, {
416
+ theme: theme,
417
+ editor: editor,
418
+ children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
419
+ style: {
420
+ display: "flex",
421
+ justifyContent: "end",
422
+ alignItems: "center",
423
+ gap: "8px",
424
+ width: "70vw",
425
+ margin: "auto"
426
+ },
427
+ children: [/*#__PURE__*/_jsx(IconButton, {
428
+ onClick: () => setOpenTheme(true),
429
+ children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
430
+ }), /*#__PURE__*/_jsx(IconButton, {
431
+ onClick: () => setOpenAITheme(true),
432
+ style: {
433
+ marginTop: "4px"
434
+ },
435
+ children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
436
+ })]
437
+ }) : null, /*#__PURE__*/_jsx(DialogWrapper, {
438
+ classes: classes,
439
+ ...props,
440
+ fullScreen: fullScreen,
441
+ footer: footer || "",
442
+ children: /*#__PURE__*/_jsx(Box, {
443
+ component: "div",
444
+ className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
445
+ sx: classes.root,
446
+ style: {
447
+ ...dotBg
448
+ },
449
+ children: /*#__PURE__*/_jsxs(Slate, {
450
+ editor: editor,
451
+ initialValue: value,
452
+ onChange: handleEditorChange,
453
+ children: [/*#__PURE__*/_jsx(DragAndDrop, {
454
+ children: /*#__PURE__*/_jsxs(Overlay, {
455
+ children: [/*#__PURE__*/_jsx(Box, {
456
+ className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
457
+ sx: classes.slateWrapper,
458
+ id: "slate-wrapper-scroll-container"
459
+ // style={editorWrapperStyle}
460
+ ,
461
+ ref: editorWrapper,
462
+ onClick: e => {
463
+ handleInsertLastElement(e, editor);
464
+ },
465
+ onScroll: handleScroll,
466
+ style: editorWrapperStyle,
428
467
  children: /*#__PURE__*/_jsxs(Box, {
429
468
  component: "div",
430
- className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
431
- sx: {
432
- backgroundColor: "transparent",
433
- padding: {
434
- ...getTRBLBreakPoints(bannerSpacing)
435
- },
436
- width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
437
- height: viewport.h ? `${viewport.h}px` : `100%`,
438
- alignSelf: "center",
439
- transformOrigin: "left top",
440
- transition: "all 0.3s",
441
- minHeight: "87%",
442
- maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
443
- },
469
+ className: "max-content",
470
+ sx: themeProps?.sxProps || {},
444
471
  "data-info": outsideEditorClickLabel,
445
- children: [/*#__PURE__*/_jsx(Editable, {
446
- className: "innert-editor-textbox",
447
- readOnly: isReadOnly,
448
- renderElement: renderElement,
449
- renderLeaf: renderLeaf,
450
- decorate: decorators,
451
- onKeyDown: onKeyDown
452
- }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
453
- ref: mentionsRef,
454
- mentions: mentions,
455
- setMentions: setMentions,
456
- editor: editor,
457
- target: target,
458
- index: index,
459
- chars: chars,
460
- type: type,
472
+ children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
473
+ className: "scroll-area",
474
+ "data-info": outsideEditorClickLabel,
475
+ children: /*#__PURE__*/_jsxs(Box, {
476
+ component: "div",
477
+ className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
478
+ sx: {
479
+ backgroundColor: "transparent",
480
+ padding: {
481
+ ...getTRBLBreakPoints(bannerSpacing)
482
+ },
483
+ width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
484
+ height: viewport.h ? `${viewport.h}px` : `100%`,
485
+ alignSelf: "center",
486
+ transformOrigin: "left top",
487
+ transition: "all 0.3s",
488
+ minHeight: "87%",
489
+ maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
490
+ },
491
+ "data-info": outsideEditorClickLabel,
492
+ children: [/*#__PURE__*/_jsx(Editable, {
493
+ className: "innert-editor-textbox",
494
+ readOnly: isReadOnly,
495
+ renderElement: renderElement,
496
+ renderLeaf: renderLeaf,
497
+ decorate: decorators,
498
+ onKeyDown: onKeyDown
499
+ }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
500
+ ref: mentionsRef,
501
+ mentions: mentions,
502
+ setMentions: setMentions,
503
+ editor: editor,
504
+ target: target,
505
+ index: index,
506
+ chars: chars,
507
+ type: type,
508
+ theme: theme
509
+ }) : null]
510
+ })
511
+ }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
512
+ customProps: customProps,
513
+ toolbarOptions: toolbarOptions,
461
514
  theme: theme
462
- }) : null]
515
+ }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
516
+ otherProps: otherProps || {}
517
+ }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
518
+ sx: {
519
+ color: "rgb(100, 116, 139)",
520
+ fontSize: "13px",
521
+ paddingBottom: hideMiniToolBar ? "0px" : "12px",
522
+ cursor: "pointer"
523
+ },
524
+ align: "center",
525
+ "data-info": outsideEditorClickLabel,
526
+ onClick: handleFooterClick,
527
+ children: footer
528
+ }), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
529
+ open: openTheme,
530
+ setOpen: setOpenTheme,
531
+ editor: editor,
532
+ services: otherProps?.services
533
+ }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
534
+ openAITheme: openAITheme,
535
+ setOpenAITheme: setOpenAITheme,
536
+ onSaveTheme: otherProps?.onSaveTheme
537
+ })]
463
538
  })
464
- }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
465
- customProps: customProps,
466
- toolbarOptions: toolbarOptions,
467
- theme: theme
468
- }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
469
- otherProps: otherProps || {}
470
- }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
471
- sx: {
472
- color: "rgb(100, 116, 139)",
473
- fontSize: "13px",
474
- paddingBottom: hideMiniToolBar ? "0px" : "12px",
475
- cursor: "pointer"
476
- },
477
- align: "center",
478
- "data-info": outsideEditorClickLabel,
479
- onClick: handleFooterClick,
480
- children: footer
481
- })]
539
+ }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
540
+ onDrawerOpen: onDrawerOpen,
541
+ theme: theme,
542
+ setIsTextSelected: setIsTextSelected,
543
+ customProps: customProps
544
+ }) : null]
482
545
  })
483
- }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
484
- onDrawerOpen: onDrawerOpen,
485
- theme: theme,
486
- setIsTextSelected: setIsTextSelected,
487
- customProps: customProps
488
- }) : null]
489
- })
490
- }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
491
- ...htmlAction,
492
- handleCodeToText: handleCodeToText
493
- })]
494
- }, id)
546
+ }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
547
+ ...htmlAction,
548
+ handleCodeToText: handleCodeToText
549
+ })]
550
+ }, id)
551
+ })
552
+ })]
495
553
  })
496
554
  })
497
555
  });
@@ -830,17 +830,6 @@ blockquote {
830
830
  text-align: center;
831
831
  }
832
832
 
833
- .removeScroll::-webkit-outer-spin-button,
834
- .removeScroll::-webkit-inner-spin-button {
835
- -webkit-appearance: none;
836
- margin: 0;
837
- }
838
-
839
- /* For Firefox */
840
- .removeScroll {
841
- -moz-appearance: textfield;
842
- }
843
-
844
833
  .borderInput:focus-visible {
845
834
  outline: none !important;
846
835
  }
@@ -890,7 +879,7 @@ blockquote {
890
879
  }
891
880
 
892
881
  .sliderInput {
893
- width: 30px;
882
+ width: 66px;
894
883
  padding: 2px 10px;
895
884
  margin-left: 18px;
896
885
  box-shadow: 0px 4px 16px 0px #0000000d;
@@ -11,6 +11,8 @@ import CustomSelect from "./CustomSelect";
11
11
  import { editContentOptions, newContentOptions, generatedContentOptions } from "./helper";
12
12
  import useClickOutside from "../../hooks/useClickOutside";
13
13
  import { useEditorContext } from "../../hooks/useMouseMove";
14
+ // import { VoiceToText } from "./VoiceToText";
15
+ import { ChatMicIcon } from "../../assets/svg/AIIcons";
14
16
  import { jsx as _jsx } from "react/jsx-runtime";
15
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
18
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -36,12 +38,13 @@ function getProps(openAI, generatedText) {
36
38
  }
37
39
  function AIInput({
38
40
  onSend,
39
- loading,
40
41
  generatedText,
41
42
  openAI,
42
43
  inputValue,
43
44
  onInputChange,
44
- onClickOutside
45
+ onClickOutside,
46
+ startRecording,
47
+ ...rest
45
48
  }, ref) {
46
49
  const {
47
50
  theme
@@ -67,6 +70,7 @@ function AIInput({
67
70
  clearTimeout(timeoutId);
68
71
  };
69
72
  }, [openAI]);
73
+ const loading = rest?.loading || rest?.isAILoading;
70
74
  const isSendBtnDisabled = !inputValue || loading;
71
75
  const props = getProps(openAI, generatedText) || {};
72
76
  const fromToolBar = openAI === "fromToolBar";
@@ -132,18 +136,25 @@ function AIInput({
132
136
  handleSendBtnClick();
133
137
  }
134
138
  }
135
- }), fromToolBar ? null : /*#__PURE__*/_jsx(Box, {
139
+ }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
136
140
  component: "div",
137
141
  style: classes.sendIconContainer,
138
142
  className: "icons-elements",
139
- children: /*#__PURE__*/_jsx(IconButton, {
143
+ children: [/*#__PURE__*/_jsx(IconButton
144
+ // sx={
145
+ // isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn
146
+ // }
147
+ , {
148
+ onClick: () => startRecording(),
149
+ children: /*#__PURE__*/_jsx(ChatMicIcon, {})
150
+ }), /*#__PURE__*/_jsx(IconButton, {
140
151
  sx: isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn,
141
152
  onClick: () => handleSendBtnClick(),
142
153
  children: /*#__PURE__*/_jsx(IoSend, {
143
154
  color: "#fff",
144
155
  size: 14
145
156
  })
146
- })
157
+ })]
147
158
  })]
148
159
  })]
149
160
  }), size.device === "xs" ? null : /*#__PURE__*/_jsx(Box, {
@@ -8,6 +8,7 @@ import { Editor, Node, Path, Transforms } from "slate";
8
8
  import useWindowResize from "../../hooks/useWindowResize";
9
9
  import { MODES } from "./helper";
10
10
  import { getSelectedText } from "../../utils/helper";
11
+ import { VoiceToText } from "./VoiceToText";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
14
  const scrollToAIInput = () => {
@@ -178,6 +179,11 @@ function PopoverAIInput({
178
179
  onClickOutside();
179
180
  return;
180
181
  }
182
+ if (type === "speech_to_text") {
183
+ Transforms.insertText(editor, option.text);
184
+ onClickOutside();
185
+ return;
186
+ }
181
187
  if (type === "try_again") {
182
188
  // resetting the previous option and try again
183
189
  option = selectedOption;
@@ -188,7 +194,7 @@ function PopoverAIInput({
188
194
  setLoading(true);
189
195
  const payload = {
190
196
  mode: option.mode || 0,
191
- query: inputValue
197
+ query: option?.inputValue || inputValue
192
198
  };
193
199
  if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
194
200
  payload.textOptionInput = type;
@@ -267,15 +273,19 @@ function PopoverAIInput({
267
273
  component: "div",
268
274
  sx: classes.mobileAIInputWrapper,
269
275
  ref: targetRef,
270
- children: /*#__PURE__*/_jsx(AIInput, {
271
- loading: loading,
276
+ children: /*#__PURE__*/_jsx(VoiceToText, {
277
+ otherProps: otherProps,
272
278
  onSend: onSend,
273
- generatedText: generatedText,
274
- anchorEl: anchorEl,
275
- openAI: openAI,
276
- inputValue: inputValue,
277
- onInputChange: onInputChange,
278
- onClickOutside: onClickOutside
279
+ children: /*#__PURE__*/_jsx(AIInput, {
280
+ loading: loading,
281
+ onSend: onSend,
282
+ generatedText: generatedText,
283
+ anchorEl: anchorEl,
284
+ openAI: openAI,
285
+ inputValue: inputValue,
286
+ onInputChange: onInputChange,
287
+ onClickOutside: onClickOutside
288
+ })
279
289
  })
280
290
  }) : /*#__PURE__*/_jsx(Popper, {
281
291
  open: Boolean(openAI),
@@ -296,15 +306,19 @@ function PopoverAIInput({
296
306
  sx: getSelectedText(editor) ? {
297
307
  marginTop: "6px"
298
308
  } : {},
299
- children: /*#__PURE__*/_jsx(AIInput, {
300
- loading: loading,
309
+ children: /*#__PURE__*/_jsx(VoiceToText, {
310
+ otherProps: otherProps,
301
311
  onSend: onSend,
302
- generatedText: generatedText,
303
- anchorEl: anchorEl,
304
- openAI: openAI,
305
- inputValue: inputValue,
306
- onInputChange: onInputChange,
307
- onClickOutside: onClickOutside
312
+ children: /*#__PURE__*/_jsx(AIInput, {
313
+ loading: loading,
314
+ onSend: onSend,
315
+ generatedText: generatedText,
316
+ anchorEl: anchorEl,
317
+ openAI: openAI,
318
+ inputValue: inputValue,
319
+ onInputChange: onInputChange,
320
+ onClickOutside: onClickOutside
321
+ })
308
322
  })
309
323
  })
310
324
  })
@@ -167,7 +167,8 @@ const Styles = theme => ({
167
167
  sendIconContainer: {
168
168
  alignSelf: "flex-end",
169
169
  display: "flex",
170
- alignItems: "center"
170
+ alignItems: "center",
171
+ gap: "6px"
171
172
  }
172
173
  });
173
174
  export default Styles;
@@ -0,0 +1,73 @@
1
+ import { Box } from "@mui/material";
2
+ import { useEffect, useRef, useState } from "react";
3
+ import WaveSurfer from "wavesurfer.js";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const SoundWave = props => {
6
+ const {
7
+ audioChunks = null
8
+ } = props; // Initialize to null if not provided
9
+ const waveContent = useRef(null);
10
+ const wavesurfer = useRef(null);
11
+ const [playOnce, setPlayOnce] = useState(false);
12
+ useEffect(() => {
13
+ if (waveContent.current) {
14
+ if (wavesurfer.current) {
15
+ wavesurfer.current.destroy();
16
+ }
17
+ wavesurfer.current = WaveSurfer.create({
18
+ container: waveContent.current,
19
+ waveColor: "#2563EB",
20
+ progressColor: "#2563EB",
21
+ cursorWidth: 0,
22
+ // Disable the cursor
23
+ barWidth: 2,
24
+ barGap: 1,
25
+ barRadius: 2,
26
+ scrollParent: false,
27
+ // Prevent scrolling
28
+ height: waveContent.current.clientHeight // Set height to fit container
29
+ });
30
+
31
+ // Fit the waveform to the container width
32
+ const resize = () => {
33
+ if (wavesurfer.current) {
34
+ const containerWidth = waveContent.current.clientWidth;
35
+ const duration = wavesurfer.current.getDuration();
36
+ if (duration > 0) {
37
+ const newZoom = containerWidth / duration;
38
+ wavesurfer.current.zoom(newZoom);
39
+ }
40
+ }
41
+ };
42
+ window.addEventListener("resize", resize);
43
+ resize();
44
+ return () => {
45
+ window.removeEventListener("resize", resize);
46
+ };
47
+ }
48
+ }, []);
49
+ useEffect(() => {
50
+ if (wavesurfer.current && audioChunks) {
51
+ const audioBlob = new Blob(audioChunks, {
52
+ type: "audio/webm"
53
+ });
54
+ const recordedUrl = URL.createObjectURL(audioBlob);
55
+ wavesurfer.current.load(recordedUrl).then().catch(e => console.error("Error loading audio: ", e));
56
+ if (!playOnce) {
57
+ setPlayOnce(true);
58
+ }
59
+ } else if (wavesurfer.current && !audioChunks) {
60
+ // Clear the waveform when audioChunks is null
61
+ wavesurfer.current.empty();
62
+ }
63
+ }, [audioChunks, playOnce]);
64
+ return /*#__PURE__*/_jsx(Box, {
65
+ ref: waveContent,
66
+ style: {
67
+ width: "100%",
68
+ height: "100%",
69
+ overflow: "hidden"
70
+ }
71
+ });
72
+ };
73
+ export const AudioWave = SoundWave;