@flozy/editor 3.6.7 → 3.6.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (77) hide show
  1. package/dist/Editor/ChatEditor.js +11 -2
  2. package/dist/Editor/CommonEditor.js +109 -166
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
  4. package/dist/Editor/Elements/Button/EditorButton.js +14 -25
  5. package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
  6. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  7. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  8. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  9. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +0 -1
  10. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  11. package/dist/Editor/Elements/Grid/Grid.js +0 -2
  12. package/dist/Editor/Elements/Grid/GridItem.js +1 -3
  13. package/dist/Editor/Elements/Link/Link.js +1 -6
  14. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  15. package/dist/Editor/Elements/Link/LinkPopup.js +3 -11
  16. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  17. package/dist/Editor/MiniEditor.js +1 -3
  18. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  19. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  20. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  21. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  22. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  23. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  24. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  25. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
  26. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
  27. package/dist/Editor/Toolbar/PopupTool/index.js +2 -4
  28. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  29. package/dist/Editor/common/ColorPickerButton.js +9 -25
  30. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  31. package/dist/Editor/common/Icon.js +2 -30
  32. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +5 -2
  33. package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
  34. package/dist/Editor/common/Shorthands/elements.js +0 -54
  35. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  36. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -13
  37. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  38. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  39. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  40. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  41. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  42. package/dist/Editor/helper/theme.js +4 -190
  43. package/dist/Editor/hooks/useMouseMove.js +1 -4
  44. package/dist/Editor/plugins/withEmbeds.js +1 -1
  45. package/dist/Editor/plugins/withHTML.js +5 -47
  46. package/dist/Editor/plugins/withTable.js +1 -1
  47. package/dist/Editor/theme/ThemeList.js +173 -50
  48. package/dist/Editor/utils/SlateUtilityFunctions.js +25 -157
  49. package/dist/Editor/utils/button.js +17 -1
  50. package/dist/Editor/utils/font.js +37 -40
  51. package/dist/Editor/utils/helper.js +12 -50
  52. package/package.json +1 -1
  53. package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
  54. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  55. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  56. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  57. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  58. package/dist/Editor/common/CustomDialog/index.js +0 -94
  59. package/dist/Editor/common/CustomDialog/style.js +0 -67
  60. package/dist/Editor/common/CustomSelect.js +0 -33
  61. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  62. package/dist/Editor/theme/index.js +0 -144
  63. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  64. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  65. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  66. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  67. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  68. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  69. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  70. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  71. package/dist/Editor/themeSettings/icons.js +0 -60
  72. package/dist/Editor/themeSettings/index.js +0 -320
  73. package/dist/Editor/themeSettings/style.js +0 -152
  74. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  75. package/dist/Editor/themeSettingsAI/index.js +0 -356
  76. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  77. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
2
- import { Editable, Slate } from 'slate-react';
2
+ import { Editable, Slate, ReactEditor } from 'slate-react';
3
3
  import { createEditor } from 'slate';
4
4
  import { useDebounce } from "use-debounce";
5
5
  import withCommon from "./hooks/withCommon";
@@ -44,7 +44,16 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
44
44
  const isReadOnly = readOnly === "readonly";
45
45
  useImperativeHandle(ref, () => ({
46
46
  emojiClick: emoji => {
47
- insertEmoji(editor, emoji?.native, editor.selection);
47
+ if (editor) {
48
+ insertEmoji(editor, emoji?.native, editor.selection);
49
+ ReactEditor.focus(editor);
50
+ }
51
+ },
52
+ // Focus enable
53
+ enableFocus: () => {
54
+ if (editor) {
55
+ ReactEditor.focus(editor);
56
+ }
48
57
  }
49
58
  }));
50
59
  useEffect(() => {
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable no-unused-vars */
2
- import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle, createContext } from "react";
2
+ import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } 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, IconButton, Typography } from "@mui/material";
21
+ import { Box, Button, 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,19 +28,12 @@ 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, getVariableValue } from "./helper/theme";
31
+ import { getTRBLBreakPoints } from "./helper/theme";
32
32
  import { handleInsertLastElement, 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";
39
34
  import PopoverAIInput from "./Elements/AI/PopoverAIInput";
40
- import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
41
35
  import { jsx as _jsx } from "react/jsx-runtime";
42
36
  import { jsxs as _jsxs } from "react/jsx-runtime";
43
- export const ThemeContext = /*#__PURE__*/createContext(null);
44
37
  const Item = /*#__PURE__*/forwardRef(({
45
38
  children,
46
39
  ...props
@@ -67,8 +60,7 @@ const Leaf = ({
67
60
  children,
68
61
  leaf
69
62
  }) => {
70
- const theme = useTheme();
71
- children = getMarked(leaf, children, theme);
63
+ children = getMarked(leaf, children);
72
64
  return /*#__PURE__*/_jsx("span", {
73
65
  ...attributes,
74
66
  children: children
@@ -87,8 +79,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
87
79
  toolbarOptions,
88
80
  otherProps,
89
81
  isIframe,
90
- theme,
91
- showThemeButtons
82
+ theme
92
83
  } = props;
93
84
  const editorWrapper = useRef();
94
85
  const mentionsRef = useRef();
@@ -132,11 +123,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
132
123
  const {
133
124
  bannerSpacing,
134
125
  pageBgImage,
135
- pageColor = "",
126
+ pageColor,
136
127
  color: pageTextColor,
137
128
  pageWidth,
138
- maxWidth: pageMaxWidth,
139
- theme: selectedTheme
129
+ maxWidth: pageMaxWidth
140
130
  } = pageSt?.pageProps || {
141
131
  bannerSpacing: {
142
132
  left: 0,
@@ -147,11 +137,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
147
137
  };
148
138
  const classes = editorStyles({
149
139
  padHeight: !fullScreen ? otherProps?.padHeight : 20,
150
- placeHolderColor: invertColor(pageColor.startsWith("var") ? getVariableValue(pageColor) : pageColor || "#FFF"),
140
+ placeHolderColor: invertColor(pageColor || "#FFF"),
151
141
  theme
152
142
  });
153
- const [openTheme, setOpenTheme] = useState(false);
154
- const [openAITheme, setOpenAITheme] = useState(false);
155
143
  useEffect(() => {
156
144
  setValue(draftToSlate({
157
145
  data: content
@@ -251,12 +239,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
251
239
  redo() {
252
240
  editor?.redo();
253
241
  },
254
- toggleTheme() {
255
- setOpenTheme(!openTheme);
256
- },
257
- toggleAITheme() {
258
- setOpenAITheme(!openAITheme);
259
- },
260
242
  getPageSettings: {
261
243
  background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
262
244
  }
@@ -403,152 +385,113 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
403
385
  }
404
386
  return style;
405
387
  }, [pageBgImage, pageColor]);
406
- const themeProps = getTheme(selectedTheme);
407
- return /*#__PURE__*/_jsx(ThemeContext.Provider, {
408
- value: {
409
- openTheme,
410
- setOpenTheme
411
- },
412
- children: /*#__PURE__*/_jsx(CssVarsProvider, {
413
- theme: extendTheme(selectedTheme?.theme?.cssVars || {}),
414
- children: /*#__PURE__*/_jsxs(EditorProvider, {
415
- theme: theme,
416
- editor: editor,
417
- children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
418
- style: {
419
- display: "flex",
420
- justifyContent: "end",
421
- alignItems: "center",
422
- gap: "8px",
423
- width: "70vw",
424
- margin: "auto"
425
- },
426
- children: [/*#__PURE__*/_jsx(IconButton, {
427
- onClick: () => setOpenTheme(true),
428
- children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
429
- }), /*#__PURE__*/_jsx(IconButton, {
430
- onClick: () => setOpenAITheme(true),
431
- style: {
432
- marginTop: "4px"
433
- },
434
- children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
435
- })]
436
- }) : null, /*#__PURE__*/_jsx(DialogWrapper, {
437
- classes: classes,
438
- ...props,
439
- fullScreen: fullScreen,
440
- footer: footer || "",
441
- children: /*#__PURE__*/_jsx(Box, {
442
- component: "div",
443
- className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
444
- sx: classes.root,
445
- style: {
446
- ...dotBg
447
- },
448
- children: /*#__PURE__*/_jsxs(Slate, {
449
- editor: editor,
450
- initialValue: value,
451
- onChange: handleEditorChange,
452
- children: [/*#__PURE__*/_jsx(DragAndDrop, {
453
- children: /*#__PURE__*/_jsxs(Overlay, {
454
- children: [/*#__PURE__*/_jsx(Box, {
455
- className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
456
- sx: classes.slateWrapper,
457
- id: "slate-wrapper-scroll-container"
458
- // style={editorWrapperStyle}
459
- ,
460
- ref: editorWrapper,
461
- onClick: e => {
462
- handleInsertLastElement(e, editor);
463
- },
464
- onScroll: handleScroll,
465
- style: editorWrapperStyle,
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,
466
428
  children: /*#__PURE__*/_jsxs(Box, {
467
429
  component: "div",
468
- className: "max-content",
469
- sx: themeProps?.sxProps || {},
470
- "data-info": outsideEditorClickLabel,
471
- children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
472
- className: "scroll-area",
473
- "data-info": outsideEditorClickLabel,
474
- children: /*#__PURE__*/_jsxs(Box, {
475
- component: "div",
476
- className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
477
- sx: {
478
- backgroundColor: "transparent",
479
- padding: {
480
- ...getTRBLBreakPoints(bannerSpacing)
481
- },
482
- width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
483
- height: viewport.h ? `${viewport.h}px` : `100%`,
484
- alignSelf: "center",
485
- transformOrigin: "left top",
486
- transition: "all 0.3s",
487
- minHeight: "87%",
488
- maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
489
- },
490
- "data-info": outsideEditorClickLabel,
491
- children: [/*#__PURE__*/_jsx(Editable, {
492
- className: "innert-editor-textbox",
493
- readOnly: isReadOnly,
494
- renderElement: renderElement,
495
- renderLeaf: renderLeaf,
496
- decorate: decorators,
497
- onKeyDown: onKeyDown
498
- }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
499
- ref: mentionsRef,
500
- mentions: mentions,
501
- setMentions: setMentions,
502
- editor: editor,
503
- target: target,
504
- index: index,
505
- chars: chars,
506
- type: type,
507
- theme: theme
508
- }) : null]
509
- })
510
- }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
511
- customProps: customProps,
512
- toolbarOptions: toolbarOptions,
513
- theme: theme
514
- }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
515
- otherProps: otherProps || {}
516
- }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
517
- sx: {
518
- color: "rgb(100, 116, 139)",
519
- fontSize: "13px",
520
- paddingBottom: hideMiniToolBar ? "0px" : "12px",
521
- cursor: "pointer"
430
+ className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
431
+ sx: {
432
+ backgroundColor: "transparent",
433
+ padding: {
434
+ ...getTRBLBreakPoints(bannerSpacing)
522
435
  },
523
- align: "center",
524
- "data-info": outsideEditorClickLabel,
525
- onClick: handleFooterClick,
526
- children: footer
527
- }), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
528
- open: openTheme,
529
- setOpen: setOpenTheme,
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
+ },
444
+ "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,
530
456
  editor: editor,
531
- services: otherProps?.services
532
- }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
533
- openAITheme: openAITheme,
534
- setOpenAITheme: setOpenAITheme,
535
- onSaveTheme: otherProps?.onSaveTheme
536
- })]
457
+ target: target,
458
+ index: index,
459
+ chars: chars,
460
+ type: type,
461
+ theme: theme
462
+ }) : null]
537
463
  })
538
- }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
539
- onDrawerOpen: onDrawerOpen,
540
- theme: theme,
541
- setIsTextSelected: setIsTextSelected,
542
- customProps: customProps
543
- }) : null]
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
+ })]
544
482
  })
545
- }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
546
- ...htmlAction,
547
- handleCodeToText: handleCodeToText
548
- })]
549
- }, id)
550
- })
551
- })]
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)
552
495
  })
553
496
  })
554
497
  });
@@ -62,11 +62,6 @@ function AppHeader(props) {
62
62
  const handleDrawerToggle = () => {
63
63
  setMobileOpen(prevState => !prevState);
64
64
  };
65
- const closeDrawer = () => {
66
- if (mobileOpen) {
67
- handleDrawerToggle();
68
- }
69
- };
70
65
  const onSettings = e => {
71
66
  if (!readOnly) {
72
67
  e.stopPropagation();
@@ -153,27 +148,10 @@ function AppHeader(props) {
153
148
  }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
154
149
  children: menus.map((item, i) => {
155
150
  const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
156
- const onTouchEnd = e => {
157
- if (buttonProps?.onTouchEnd) {
158
- buttonProps?.onTouchEnd(e);
159
- closeDrawer();
160
- }
161
- };
162
- const onClick = e => {
163
- if (buttonProps?.onClick) {
164
- buttonProps?.onClick(e);
165
- closeDrawer();
166
- }
167
- };
168
- const props = {
169
- ...buttonProps,
170
- onTouchEnd,
171
- onClick
172
- };
173
151
  return /*#__PURE__*/_jsx(ListItem, {
174
152
  disablePadding: true,
175
153
  children: /*#__PURE__*/_jsx(ListItemButton, {
176
- ...props,
154
+ ...buttonProps,
177
155
  sx: {
178
156
  textAlign: "center"
179
157
  },
@@ -251,7 +229,7 @@ function AppHeader(props) {
251
229
  style: {
252
230
  display: "inline-flex",
253
231
  alignItems: "center",
254
- color: textColor || "#000000",
232
+ color: textColor,
255
233
  fontSize: logoFontSize,
256
234
  fontFamily: titleFontFamily,
257
235
  justifyContent: isLogoRight ? "end" : "start"
@@ -299,7 +277,7 @@ function AppHeader(props) {
299
277
  fontFamily: fontFamily,
300
278
  textTransform: "none",
301
279
  fontSize: fontSize || "16px",
302
- color: textColor || "#000",
280
+ color: textColor || "#FFF",
303
281
  background: bgColor || "none",
304
282
  "& .m-settings": {
305
283
  display: "none",
@@ -314,7 +292,7 @@ function AppHeader(props) {
314
292
  background: "#FFF"
315
293
  },
316
294
  "&:hover": {
317
- color: textColorHover || textColor || "#000",
295
+ color: textColorHover || textColor || "#FFF",
318
296
  background: bgColorHover || bgColor || "none",
319
297
  "& .m-settings": {
320
298
  display: "block"
@@ -13,9 +13,6 @@ import { WorkflowIcon } from "../../common/iconslist";
13
13
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
14
14
  import { handleLinkType, windowVar } from "../../utils/helper";
15
15
  import LinkSettings from "../../common/LinkSettings";
16
- import { useEditorTheme } from "../../hooks/useEditorTheme";
17
- import { getTheme } from "../../theme";
18
- import { fontFamilyMap } from "../../utils/font";
19
16
  import { jsx as _jsx } from "react/jsx-runtime";
20
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
21
18
  const EditorButton = props => {
@@ -33,12 +30,6 @@ const EditorButton = props => {
33
30
  const path = ReactEditor.findPath(editor, element);
34
31
  const [edit, setEdit] = useState(false);
35
32
  const [openNav, setOpenNav] = useState(false);
36
- const {
37
- theme
38
- } = useEditorTheme();
39
- const {
40
- buttonTheme
41
- } = getTheme(theme);
42
33
  const {
43
34
  label,
44
35
  bgColor,
@@ -52,7 +43,7 @@ const EditorButton = props => {
52
43
  fontFamily,
53
44
  textColorHover,
54
45
  bgColorHover,
55
- // buttonIcon,
46
+ buttonIcon,
56
47
  iconPosition = "start",
57
48
  borderStyle,
58
49
  borderWidth,
@@ -73,7 +64,6 @@ const EditorButton = props => {
73
64
  };
74
65
  const isTrigger = linkType === "actionTrigger";
75
66
  const refURl = isTrigger ? buttonLink?.url : url;
76
- const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
77
67
  const BtnIcon = buttonIcon ? buttonIcon : null;
78
68
  windowVar.lastButtonProps = element;
79
69
  const handleTrigger = async () => {
@@ -196,9 +186,20 @@ const EditorButton = props => {
196
186
  children: [/*#__PURE__*/_jsxs(Box, {
197
187
  sx: {
198
188
  textDecoration: "none",
189
+ background: bgColor || "rgb(30, 75, 122)",
199
190
  borderBlockStyle: "solid",
191
+ borderColor: borderColor || "transparent",
200
192
  borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
193
+ borderRadius: {
194
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
195
+ },
201
196
  borderStyle: borderStyle || "solid",
197
+ padding: {
198
+ ...getTRBLBreakPoints(bannerSpacing)
199
+ },
200
+ color: `${textColor || "#FFFFFF"}`,
201
+ fontSize: textSize || "inherit",
202
+ fontFamily: fontFamily || "PoppinsRegular",
202
203
  display: "inline-flex",
203
204
  alignItems: "center",
204
205
  position: "relative",
@@ -206,26 +207,14 @@ const EditorButton = props => {
206
207
  display: "none"
207
208
  },
208
209
  "&:hover": {
209
- color: `${textColorHover || textColor}`,
210
- background: bgColorHover || bgColor,
210
+ color: `${textColorHover || textColor || "#FFFFFF"}`,
211
+ background: bgColorHover || bgColor || "rgb(30, 75, 122)",
211
212
  "& .element-toolbar": {
212
213
  display: "flex"
213
214
  }
214
- },
215
- color: `${textColor} !important`,
216
- fontSize: `${textSize}px !important`,
217
- fontFamily: `${fontFamilyMap[fontFamily] || ""} !important`,
218
- background: `${bgColor} !important`,
219
- borderColor: `${borderColor} !important`,
220
- borderRadius: {
221
- ...getBreakPointsValue(borderRadius || buttonTheme?.borderRadius || {}, null, "overrideBorderRadius", true)
222
- },
223
- padding: {
224
- ...getTRBLBreakPoints(bannerSpacing || buttonTheme?.bannerSpacing || {})
225
215
  }
226
216
  },
227
217
  ...buttonProps,
228
- className: "button theme-element",
229
218
  children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
230
219
  iconName: buttonIcon,
231
220
  style: {
@@ -1,15 +1,11 @@
1
- import React, { useContext, useState } from "react";
2
- import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
1
+ import React, { useState } from "react";
2
+ import { Box, IconButton, Popover } from "@mui/material";
3
3
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
4
4
  import Button from "../../common/Button";
5
5
  import { colors } from "./defaultColors";
6
6
  import ColorPicker from "./colorPicker.svg";
7
- import { ThemeContext } from "../../CommonEditor";
8
- import { useSlateStatic } from "slate-react";
9
- import { Transforms } from "slate";
10
7
  import { jsx as _jsx } from "react/jsx-runtime";
11
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
- import { Fragment as _Fragment } from "react/jsx-runtime";
13
9
  let c = [];
14
10
  const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
15
11
  if (i % 7 === 0) {
@@ -35,7 +31,9 @@ const SingleColorButton = ({
35
31
  style: {
36
32
  width: "100%",
37
33
  display: "flex",
38
- padding: padding || "8px"
34
+ alignItems: "center",
35
+ padding: padding || "8px",
36
+ justifyContent: "center"
39
37
  },
40
38
  children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
41
39
  onClick: handleSelect(m),
@@ -111,17 +109,11 @@ const ColorButtons = props => {
111
109
  forMiniTool,
112
110
  openColorTool,
113
111
  onClose,
114
- onColorPickerClick,
115
- disableEditTheme
112
+ onColorPickerClick
116
113
  } = props;
117
114
  const [row1, ...restRows] = ColorChunks([]);
118
115
  const [anchorEl, setAnchorEl] = useState(null);
119
116
  const open = Boolean(anchorEl);
120
- const theme = useTheme();
121
- const editor = useSlateStatic();
122
- const {
123
- setOpenTheme
124
- } = useContext(ThemeContext);
125
117
  const handleMore = e => {
126
118
  setAnchorEl(e.currentTarget);
127
119
  };
@@ -134,7 +126,6 @@ const ColorButtons = props => {
134
126
  const handleSelect = color => () => {
135
127
  onSelect(color);
136
128
  };
137
- const colorVars = theme?.vars?.colors || {};
138
129
  return /*#__PURE__*/_jsxs(Box, {
139
130
  component: "span",
140
131
  sx: classes.colorButtons,
@@ -151,7 +142,7 @@ const ColorButtons = props => {
151
142
  activeColor: activeColor
152
143
  }, `si_btn_row1_${m}_${i}`);
153
144
  })
154
- }), /*#__PURE__*/_jsx(Popover, {
145
+ }), /*#__PURE__*/_jsxs(Popover, {
155
146
  open: open || openColorTool,
156
147
  anchorEl: anchorEl || openColorTool,
157
148
  onClose: handleClose,
@@ -165,39 +156,9 @@ const ColorButtons = props => {
165
156
  },
166
157
  sx: classes.colorPopper,
167
158
  className: "colorPopper",
168
- children: /*#__PURE__*/_jsxs(Box, {
159
+ children: [/*#__PURE__*/_jsx(Box, {
169
160
  sx: classes.colorButtonsInner,
170
- children: [Object.values(colorVars)?.length ? /*#__PURE__*/_jsxs(_Fragment, {
171
- children: [/*#__PURE__*/_jsxs(Box, {
172
- component: "div",
173
- className: "singleColorTitleWrapper",
174
- children: [/*#__PURE__*/_jsx(Typography, {
175
- variant: "subtitle2",
176
- children: "Theme colour"
177
- }), disableEditTheme ? null : /*#__PURE__*/_jsx("div", {
178
- className: "editBtn",
179
- onClick: () => {
180
- Transforms.deselect(editor, {
181
- at: editor.selection
182
- });
183
- setOpenTheme("editThemeColor");
184
- },
185
- children: "Edit"
186
- })]
187
- }), /*#__PURE__*/_jsx(SingleColorButton, {
188
- crs: Object.values(colorVars),
189
- handleSelect: handleSelect,
190
- classes: classes,
191
- activeColor: activeColor
192
- })]
193
- }) : null, /*#__PURE__*/_jsx(Box, {
194
- component: "div",
195
- className: "singleColorTitleWrapper",
196
- children: /*#__PURE__*/_jsx(Typography, {
197
- variant: "subtitle2",
198
- children: "Custom colour"
199
- })
200
- }), restRows.map((m, i) => {
161
+ children: restRows.map((m, i) => {
201
162
  return /*#__PURE__*/_jsx(SingleColorButton, {
202
163
  id: `p2_${id}`,
203
164
  crs: m,
@@ -206,18 +167,14 @@ const ColorButtons = props => {
206
167
  classes: classes,
207
168
  activeColor: activeColor
208
169
  }, `si_btn_${m}_${i}`);
209
- }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
210
- onClick: onColorPickerClick,
211
- style: {
212
- alignSelf: "start",
213
- margin: "6px"
214
- },
215
- children: /*#__PURE__*/_jsx("img", {
216
- src: ColorPicker,
217
- alt: "color wheel"
218
- })
219
- }) : null]
220
- })
170
+ })
171
+ }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
172
+ onClick: onColorPickerClick,
173
+ children: /*#__PURE__*/_jsx("img", {
174
+ src: ColorPicker,
175
+ alt: "color wheel"
176
+ })
177
+ }) : null]
221
178
  })]
222
179
  });
223
180
  };