@flozy/editor 3.8.2 → 3.8.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (113) hide show
  1. package/dist/Editor/ChatEditor.js +45 -55
  2. package/dist/Editor/CommonEditor.js +169 -111
  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 +4 -60
  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/Emoji/EmojiPicker.js +2 -4
  21. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  22. package/dist/Editor/Elements/Grid/Grid.js +2 -0
  23. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  24. package/dist/Editor/Elements/Link/Link.js +6 -1
  25. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  26. package/dist/Editor/Elements/Link/LinkPopup.js +11 -3
  27. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  28. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  29. package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
  30. package/dist/Editor/Elements/Table/Table.js +1 -1
  31. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  32. package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
  33. package/dist/Editor/MiniEditor.js +3 -1
  34. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  35. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  36. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  37. package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -18
  38. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +4 -2
  39. package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
  40. package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
  41. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  42. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  43. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  44. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +20 -13
  45. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
  46. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  47. package/dist/Editor/Toolbar/PopupTool/index.js +6 -5
  48. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  49. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  50. package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
  51. package/dist/Editor/assets/svg/RedoIcon.js +27 -0
  52. package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
  53. package/dist/Editor/assets/svg/TextIcon.js +8 -5
  54. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  55. package/dist/Editor/assets/svg/UndoIcon.js +27 -0
  56. package/dist/Editor/common/ColorPickerButton.js +25 -9
  57. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  58. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  59. package/dist/Editor/common/CustomDialog/index.js +94 -0
  60. package/dist/Editor/common/CustomDialog/style.js +67 -0
  61. package/dist/Editor/common/CustomSelect.js +33 -0
  62. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  63. package/dist/Editor/common/EditorCmds.js +35 -0
  64. package/dist/Editor/common/Icon.js +43 -3
  65. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  66. package/dist/Editor/common/LinkSettings/index.js +2 -1
  67. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  68. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +1 -6
  69. package/dist/Editor/common/MentionsPopup/Styles.js +5 -2
  70. package/dist/Editor/common/Shorthands/elements.js +54 -0
  71. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  72. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  73. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  74. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
  75. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  76. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  77. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  78. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  80. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  81. package/dist/Editor/common/iconslist.js +0 -31
  82. package/dist/Editor/helper/deserialize/index.js +14 -9
  83. package/dist/Editor/helper/theme.js +190 -4
  84. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  85. package/dist/Editor/hooks/useMouseMove.js +4 -2
  86. package/dist/Editor/plugins/withEmbeds.js +1 -1
  87. package/dist/Editor/plugins/withHTML.js +47 -5
  88. package/dist/Editor/plugins/withLayout.js +15 -10
  89. package/dist/Editor/plugins/withTable.js +2 -2
  90. package/dist/Editor/theme/ThemeList.js +50 -173
  91. package/dist/Editor/theme/index.js +144 -0
  92. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  93. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  94. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  95. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  96. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  97. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  98. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  99. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  100. package/dist/Editor/themeSettings/icons.js +60 -0
  101. package/dist/Editor/themeSettings/index.js +320 -0
  102. package/dist/Editor/themeSettings/style.js +152 -0
  103. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  104. package/dist/Editor/themeSettingsAI/index.js +356 -0
  105. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  106. package/dist/Editor/themeSettingsAI/style.js +247 -0
  107. package/dist/Editor/utils/SlateUtilityFunctions.js +161 -25
  108. package/dist/Editor/utils/button.js +1 -17
  109. package/dist/Editor/utils/draftToSlate.js +1 -1
  110. package/dist/Editor/utils/events.js +11 -4
  111. package/dist/Editor/utils/font.js +40 -37
  112. package/dist/Editor/utils/helper.js +51 -1
  113. package/package.json +2 -1
@@ -0,0 +1,139 @@
1
+ import { useSlate } from "slate-react";
2
+ import { defaultTheme } from "../theme";
3
+ import { getPageSettings, updatePageSettings } from "../utils/pageSettings";
4
+ import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../helper/theme";
5
+ const MAP_FIELDS = {
6
+ HEADING: HEADING_THEME_FIELDS,
7
+ PARAGRAPH: PARAGRAPH_THEME_FIELDS
8
+ };
9
+ function getUpdatePayload(prevTheme = {}, update, actionData) {
10
+ const {
11
+ action,
12
+ fieldName
13
+ } = actionData || {};
14
+ const {
15
+ theme: prev
16
+ } = prevTheme;
17
+ let theme = {};
18
+ let themeProps = {};
19
+ switch (action) {
20
+ case "THEME_CHANGE":
21
+ theme = update;
22
+ break;
23
+ case "CSS_VAR_CHANGE":
24
+ const prevCssVars = prev?.cssVars || {};
25
+ const prevValue = prevCssVars[fieldName] || {};
26
+ themeProps = {
27
+ ...(prev || {}),
28
+ cssVars: {
29
+ ...prevCssVars,
30
+ [fieldName]: {
31
+ ...prevValue,
32
+ ...update
33
+ }
34
+ }
35
+ };
36
+ theme = {
37
+ ...prevTheme,
38
+ theme: themeProps
39
+ };
40
+ break;
41
+ case "ELEMENT_PROPS_CHANGE":
42
+ const prevEleProps = prev?.elementProps || {};
43
+ const prevEleValue = prevEleProps[fieldName] || {};
44
+ themeProps = {
45
+ ...(prev || {}),
46
+ elementProps: {
47
+ ...prevEleProps,
48
+ [fieldName]: {
49
+ ...prevEleValue,
50
+ ...update
51
+ }
52
+ }
53
+ };
54
+ theme = {
55
+ ...prevTheme,
56
+ theme: themeProps
57
+ };
58
+ break;
59
+ case "OTHER_PROPS_CHANGE":
60
+ themeProps = {
61
+ ...(prev || {}),
62
+ otherProps: {
63
+ ...(prev.otherProps || {}),
64
+ ...update
65
+ }
66
+ };
67
+ theme = {
68
+ ...prevTheme,
69
+ theme: themeProps
70
+ };
71
+ break;
72
+ case "FONT_CHANGE":
73
+ const {
74
+ elementProps = {},
75
+ otherProps = {}
76
+ } = prev;
77
+ const fields = MAP_FIELDS[actionData?.fieldType];
78
+ const headingUpdate = {};
79
+ fields?.forEach(field => {
80
+ const prevHeadingData = elementProps[field];
81
+ headingUpdate[field] = {
82
+ ...prevHeadingData,
83
+ ...update
84
+ };
85
+ });
86
+ themeProps = {
87
+ ...(prev || {}),
88
+ elementProps: {
89
+ ...elementProps,
90
+ ...headingUpdate
91
+ },
92
+ otherProps: {
93
+ ...otherProps,
94
+ headingFontFamily: update?.fontFamily
95
+ }
96
+ };
97
+ theme = {
98
+ ...prevTheme,
99
+ theme: themeProps
100
+ };
101
+ break;
102
+ default:
103
+ theme = {
104
+ ...prevTheme,
105
+ ...(update || {})
106
+ };
107
+ break;
108
+ }
109
+ return theme;
110
+ }
111
+ const updateTheme = (editor, pageSt, update, actionData) => {
112
+ const {
113
+ pageProps
114
+ } = pageSt || {};
115
+ const {
116
+ theme
117
+ } = pageProps || {};
118
+ updatePageSettings(editor, {
119
+ ...(pageProps || {}),
120
+ theme: getUpdatePayload(theme, update, actionData)
121
+ });
122
+ };
123
+ export const useEditorTheme = () => {
124
+ const editor = useSlate();
125
+ const {
126
+ element: pageSt
127
+ } = getPageSettings(editor) || {};
128
+ const {
129
+ pageProps
130
+ } = pageSt || {};
131
+ const {
132
+ theme
133
+ } = pageProps || {};
134
+ return {
135
+ selectedTheme: theme?.theme || defaultTheme?.theme,
136
+ updateTheme: (update, actionData) => updateTheme(editor, pageSt, update, actionData),
137
+ theme
138
+ };
139
+ };
@@ -29,6 +29,7 @@ export const EditorProvider = ({
29
29
  const path = event?.target?.getAttribute("data-path");
30
30
  const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
31
31
  const [openAI, setOpenAI] = useState("");
32
+ const [selectedTheme, setSelectedTheme] = useState({});
32
33
  const onDrop = () => {
33
34
  setDrop(drop + 1);
34
35
  };
@@ -55,7 +56,9 @@ export const EditorProvider = ({
55
56
  popupType,
56
57
  setPopupType,
57
58
  openAI,
58
- setOpenAI
59
+ setOpenAI,
60
+ selectedTheme,
61
+ setSelectedTheme
59
62
  },
60
63
  children: children
61
64
  });
@@ -75,7 +78,6 @@ const useMouseMove = () => {
75
78
  }, []);
76
79
  const onMouseMove = e => {
77
80
  const dpath = e?.target?.closest(".dpath");
78
- console.log(dpath);
79
81
  if (dpath) {
80
82
  console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
81
83
  setEvent({
@@ -1,5 +1,5 @@
1
1
  import { Transforms, Path, Node } from "slate";
2
- const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
2
+ const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
3
3
  const withEmbeds = editor => {
4
4
  const {
5
5
  isVoid,
@@ -1,4 +1,4 @@
1
- import { Transforms, Editor, Element, Node } from "slate";
1
+ import { Transforms, Editor, Element, Node, Path } from "slate";
2
2
  import deserialize from "../helper/deserialize";
3
3
  import { decodeAndParseBase64 } from "../utils/helper";
4
4
  const avoidDefaultInsert = ["table", "grid"];
@@ -15,7 +15,7 @@ const loopChildren = (children = [], defaultInsert) => {
15
15
  }
16
16
  return defaultInsert;
17
17
  };
18
- const getCurrentElement = editor => {
18
+ export const getCurrentElement = editor => {
19
19
  try {
20
20
  if (editor.selection) {
21
21
  return Node.parent(editor, editor?.selection?.anchor?.path);
@@ -26,6 +26,48 @@ const getCurrentElement = editor => {
26
26
  return null;
27
27
  }
28
28
  };
29
+ const getCurrentElementText = editor => {
30
+ try {
31
+ if (editor.selection) {
32
+ return Editor.string(editor, editor?.selection?.anchor?.path);
33
+ } else {
34
+ return null;
35
+ }
36
+ } catch (err) {
37
+ return null;
38
+ }
39
+ };
40
+ const insertAtNextNode = (editor, formattedFragment) => {
41
+ try {
42
+ const {
43
+ selection
44
+ } = editor;
45
+ if (selection) {
46
+ const parentPath = Path.parent(editor?.selection?.anchor?.path);
47
+ const nextPath = Path.next(parentPath);
48
+ Transforms.insertNodes(editor, {
49
+ type: "paragraph",
50
+ children: [{
51
+ text: ""
52
+ }]
53
+ }, {
54
+ at: nextPath
55
+ });
56
+ Transforms.insertFragment(editor, formattedFragment, {
57
+ at: nextPath
58
+ });
59
+ }
60
+ } catch (err) {
61
+ console.log(err);
62
+ }
63
+ };
64
+ const handleInsert = (editor, defaultInsert, fragment = []) => {
65
+ if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
66
+ insertAtNextNode(editor, fragment);
67
+ } else {
68
+ defaultInsert();
69
+ }
70
+ };
29
71
  const formatFragment = {
30
72
  "list-item": fragment => {
31
73
  let refactorFragment = [];
@@ -64,11 +106,11 @@ const withHtml = editor => {
64
106
  const currentEl = getCurrentElement(editor);
65
107
  const eltype = currentEl?.type;
66
108
  if (slateHTML && !formatFragment[eltype]) {
109
+ const decoded = decodeAndParseBase64(slateHTML);
67
110
  const [tableNode] = Editor.nodes(editor, {
68
111
  match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
69
112
  });
70
113
  if (tableNode && tableNode[0]) {
71
- const decoded = decodeAndParseBase64(slateHTML);
72
114
  const defaultInsert = loopChildren(decoded, true);
73
115
  if (defaultInsert) {
74
116
  insertData(data);
@@ -79,7 +121,7 @@ const withHtml = editor => {
79
121
  Transforms.insertText(editor, text);
80
122
  }
81
123
  } else {
82
- insertData(data);
124
+ handleInsert(editor, () => insertData(data), decoded);
83
125
  }
84
126
  } else if (html) {
85
127
  const parsed = new DOMParser().parseFromString(html, "text/html");
@@ -96,7 +138,7 @@ const withHtml = editor => {
96
138
  }
97
139
  const fragment = deserialize(parsed.body);
98
140
  const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
99
- Transforms.insertFragment(editor, formattedFragment);
141
+ handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
100
142
  return;
101
143
  } else {
102
144
  insertData(data);
@@ -32,16 +32,21 @@ const withLayout = editor => {
32
32
  editor.normalizeNode = ([node, path]) => {
33
33
  if (path.length === 0) {
34
34
  if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
35
- const title = {
36
- type: "title",
37
- children: [{
38
- text: "Untitled"
39
- }]
40
- };
41
- Transforms.insertNodes(editor, title, {
42
- at: path.concat(0),
43
- select: true
44
- });
35
+ const {
36
+ anchor
37
+ } = editor?.selection || {};
38
+ if (anchor?.offset !== 0) {
39
+ const title = {
40
+ type: "title",
41
+ children: [{
42
+ text: "Untitled"
43
+ }]
44
+ };
45
+ Transforms.insertNodes(editor, title, {
46
+ at: path.concat(0),
47
+ select: true
48
+ });
49
+ }
45
50
  }
46
51
  if (editor.children.length === 0) {
47
52
  const paragraph = {
@@ -1,6 +1,6 @@
1
1
  import { Editor, Range, Point, Element, Transforms, Node } from "slate";
2
2
  import { TableUtil, createTableCell } from "../utils/table";
3
- const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
3
+ const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item", "page-settings"];
4
4
  const withTable = editor => {
5
5
  const {
6
6
  deleteBackward,
@@ -8,7 +8,7 @@ const withTable = editor => {
8
8
  delete: slateDelete
9
9
  } = editor;
10
10
  editor.delete = arg => {
11
- if (arg.reverse) {
11
+ if (arg?.reverse) {
12
12
  const table = new TableUtil(editor);
13
13
  const cellsSelected = table.isCellSelected(editor.selection);
14
14
  if (cellsSelected && cellsSelected.length > 1) {
@@ -1,181 +1,58 @@
1
- import { MenuItem, Select, useTheme } from "@mui/material";
2
- import { fontOptions } from "../utils/font";
3
- import { toolbarGroups } from "../Toolbar/toolbarGroups";
1
+ import { Box, MenuItem, Select } from "@mui/material";
2
+ import { defaultTheme } from ".";
3
+ import { useEditorTheme } from "../hooks/useEditorTheme";
4
+ import { useEffect, useState } from "react";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
- const themes = [{
7
- label: "Theme 1",
8
- colors: ["#c90c1f", "#ff5d05"]
9
- }, {
10
- label: "Theme 2",
11
- colors: ["#4c0be3", "#43f7ee"]
12
- }, {
13
- label: "Theme 3",
14
- colors: ["#22f20f", "#fff705"]
15
- }];
16
- const allTools = toolbarGroups.flat();
17
- function ThemeList(props) {
7
+ function ThemeList({
8
+ editor,
9
+ services = () => {}
10
+ }) {
11
+ const [themes, setThemes] = useState([]);
12
+ const [loading, setLoading] = useState(false);
13
+ console.log("loading", loading);
14
+ const getThemesList = async () => {
15
+ setLoading(true);
16
+ try {
17
+ const result = await services("getThemes", {});
18
+ setThemes(result?.data || []);
19
+ } catch (err) {
20
+ console.log(err);
21
+ }
22
+ setLoading(false);
23
+ };
18
24
  const {
19
- selectedTheme,
20
- setSelectedTheme
21
- } = props;
22
- const fontWeight = allTools.find(f => f.format === "fontWeight");
23
- const fontStyles = [{
24
- text: "Bold",
25
- value: "bold",
26
- styleField: "fontWeight"
27
- }, {
28
- text: "Italic",
29
- value: "italic",
30
- styleField: "fontStyle"
31
- }
32
- // {
33
- // text: "Underline",
34
- // value: "underline",
35
- // styleField: "textDecoration",
36
- // },
37
- // {
38
- // text: "Line through",
39
- // value: "line-through",
40
- // styleField: "textDecoration",
41
- // },
42
- ];
43
-
44
- const theme = useTheme();
45
- const colorVars = theme?.vars?.colors || {};
46
- const handleTypographyTheme = (key, value, elementType) => {
47
- setSelectedTheme(prev => {
48
- const newValue = {
49
- ...prev,
50
- typography: {
51
- ...(prev.typography || {}),
52
- [elementType]: {
53
- ...(prev?.typography?.[elementType] || {}),
54
- [key]: value
55
- }
56
- }
57
- };
58
- if (!value) {
59
- delete newValue?.typography?.[elementType]?.[key];
60
- }
61
- return newValue;
62
- });
25
+ updateTheme
26
+ } = useEditorTheme();
27
+ useEffect(() => {
28
+ getThemesList();
29
+ }, []);
30
+ const handleThemeChange = e => {
31
+ const {
32
+ value
33
+ } = e.target;
34
+ const selectedTheme = themes.find(t => t.id === value) || defaultTheme;
35
+ updateTheme(selectedTheme, "THEME_CHANGE");
63
36
  };
64
- return /*#__PURE__*/_jsxs("div", {
65
- children: [themes.map((theme, i) => {
66
- return /*#__PURE__*/_jsxs("button", {
67
- style: {
68
- margin: "10px"
69
- },
70
- onClick: () => setSelectedTheme(prev => ({
71
- ...prev,
72
- colors: theme.colors
73
- })),
74
- children: [theme.label, /*#__PURE__*/_jsx("div", {
75
- children: theme.colors.map((c, j) => {
76
- return /*#__PURE__*/_jsx("div", {
77
- style: {
78
- width: "20px",
79
- height: "20px",
80
- background: c,
81
- margin: "10px"
82
- }
83
- }, j);
84
- })
85
- })]
86
- }, i);
87
- }), /*#__PURE__*/_jsxs("div", {
88
- children: ["Heading 1 Font Family", /*#__PURE__*/_jsx(Select
89
- // value={""}
90
- , {
91
- label: "Font Family",
92
- onChange: e => {
93
- handleTypographyTheme("fontFamily", e.target.value, "h1");
94
- },
95
- children: fontOptions.map((font, i) => {
96
- const {
97
- text,
98
- value
99
- } = font;
100
- return /*#__PURE__*/_jsx(MenuItem, {
101
- value: value,
102
- children: text
103
- }, i);
104
- })
105
- }), "Font Weight", /*#__PURE__*/_jsx(Select
106
- // value={""}
107
- , {
108
- label: "Font Weight",
109
- onChange: e => {
110
- handleTypographyTheme("fontWeight", e.target.value, "h1");
111
- },
112
- children: fontWeight.options.map((option, i) => {
113
- const {
114
- text,
115
- value
116
- } = option;
117
- return /*#__PURE__*/_jsx(MenuItem, {
118
- value: value,
119
- children: text
120
- }, i);
121
- })
122
- }), /*#__PURE__*/_jsx("input", {
123
- type: "number",
124
- placeholder: "font size",
125
- onChange: e => {
126
- handleTypographyTheme("fontSize", e.target.value, "h1");
127
- }
128
- }), /*#__PURE__*/_jsxs("div", {
129
- children: ["Text", /*#__PURE__*/_jsx("br", {}), "Theme color", Object.values(colorVars).map((colorVar, i) => {
130
- return /*#__PURE__*/_jsx("button", {
131
- style: {
132
- width: "20px",
133
- height: "20px",
134
- background: colorVar,
135
- margin: "10px",
136
- outline: "none"
137
- },
138
- onClick: () => handleTypographyTheme("color", colorVar, "h1")
139
- }, i);
140
- }), "normal color", /*#__PURE__*/_jsx("button", {
141
- style: {
142
- width: "20px",
143
- height: "20px",
144
- background: "#ff00e1",
145
- margin: "10px",
146
- outline: "none"
147
- },
148
- onClick: () => handleTypographyTheme("color", "#ff00e1", "h1")
149
- })]
150
- }), /*#__PURE__*/_jsxs("div", {
151
- children: ["Font styles", fontStyles.map((option, i) => {
152
- const styles = selectedTheme?.typography?.h1 || {};
153
- const {
154
- text,
155
- value,
156
- styleField
157
- } = option;
158
- return /*#__PURE__*/_jsxs("button", {
159
- onClick: () => {
160
- handleTypographyTheme(styleField, styles[styleField] === value ? null : value, "h1");
161
- },
162
- children: [text, " ", styles[styleField] === value]
163
- }, i);
164
- })]
165
- }), /*#__PURE__*/_jsx("input", {
166
- type: "number",
167
- placeholder: "Margin text Spacing",
168
- onChange: e => {
169
- handleTypographyTheme("letterSpacing", e.target.value, "h1");
170
- }
171
- }), /*#__PURE__*/_jsx("input", {
172
- type: "number",
173
- placeholder: "Line spacing",
174
- onChange: e => {
175
- handleTypographyTheme("lineHeight", e.target.value, "h1");
176
- }
37
+ return /*#__PURE__*/_jsx(Box, {
38
+ sx: {
39
+ padding: "10px",
40
+ background: "#efefef",
41
+ borderRadius: "6px"
42
+ },
43
+ children: /*#__PURE__*/_jsxs(Select, {
44
+ onChange: handleThemeChange,
45
+ defaultValue: 0,
46
+ children: [/*#__PURE__*/_jsx(MenuItem, {
47
+ value: 0,
48
+ children: "Default Theme"
49
+ }), themes.map((theme, i) => {
50
+ return /*#__PURE__*/_jsx(MenuItem, {
51
+ value: theme?.id,
52
+ children: theme?.name
53
+ }, i);
177
54
  })]
178
- })]
55
+ })
179
56
  });
180
57
  }
181
58
  export default ThemeList;
@@ -0,0 +1,144 @@
1
+ const themeClassName = ".theme-element";
2
+ function getTextStyles(props) {
3
+ const {
4
+ fontSize,
5
+ textDecoration,
6
+ ...rest
7
+ } = props;
8
+ return {
9
+ ...rest,
10
+ '& span[data-slate-string="true"]': {
11
+ textDecoration,
12
+ fontSize
13
+ }
14
+
15
+ // "&::after": {
16
+ // // for placeholder
17
+ // fontSize,
18
+ // },
19
+ };
20
+ }
21
+
22
+ const transformHeading = (props, elementType) => {
23
+ return {
24
+ [`& ${elementType}${themeClassName}`]: getTextStyles(props)
25
+ };
26
+ };
27
+ const transformParagraph = (props, paraType) => {
28
+ return {
29
+ [`& p${themeClassName}.${paraType}`]: getTextStyles(props)
30
+ };
31
+ };
32
+ const transformButton = props => {
33
+ const {
34
+ borderRadius,
35
+ lockRadius,
36
+ bannerSpacing,
37
+ buttonIcon,
38
+ hover,
39
+ ...classProps
40
+ } = props;
41
+ return {
42
+ [`& .button${themeClassName}`]: {
43
+ ...classProps,
44
+ "&:hover": hover
45
+ },
46
+ buttonTheme: {
47
+ borderRadius,
48
+ lockRadius,
49
+ bannerSpacing,
50
+ buttonIcon
51
+ }
52
+ };
53
+ };
54
+ const transformProps = (elementType, props) => {
55
+ let transformedProp = {};
56
+ let otherProps = {};
57
+ switch (elementType) {
58
+ case "h1":
59
+ case "h2":
60
+ case "h3":
61
+ case "h4":
62
+ case "h5":
63
+ case "h6":
64
+ transformedProp = transformHeading(props, elementType);
65
+ break;
66
+ case "para1":
67
+ case "para2":
68
+ case "para3":
69
+ transformedProp = transformParagraph(props, elementType);
70
+ break;
71
+ case "button":
72
+ const {
73
+ buttonTheme,
74
+ ...classProps
75
+ } = transformButton(props, elementType);
76
+ transformedProp = classProps;
77
+ otherProps = {
78
+ buttonTheme
79
+ };
80
+ break;
81
+ default:
82
+ }
83
+ return {
84
+ transformedProp,
85
+ otherProps
86
+ };
87
+ };
88
+ export const transformTheme = (selectedTheme = {}) => {
89
+ let sxProps = {};
90
+ let others = {};
91
+ const {
92
+ elementProps
93
+ } = selectedTheme;
94
+ if (elementProps) {
95
+ Object.entries(elementProps).forEach(([key, value]) => {
96
+ const {
97
+ transformedProp,
98
+ otherProps
99
+ } = transformProps(key, value);
100
+ sxProps = {
101
+ ...sxProps,
102
+ ...transformedProp
103
+ };
104
+ others = {
105
+ ...others,
106
+ ...otherProps
107
+ };
108
+ });
109
+ }
110
+ return {
111
+ sxProps,
112
+ ...others
113
+ };
114
+ };
115
+ export const defaultTheme = {
116
+ theme: {
117
+ cssVars: {},
118
+ elementProps: {
119
+ button: {
120
+ color: "#FFFFFF",
121
+ background: "#2563EB",
122
+ fontFamily: "PoppinsRegular",
123
+ fontWeight: 400,
124
+ fontSize: "inherit",
125
+ borderColor: "transparent",
126
+ borderRadius: {
127
+ topLeft: 30,
128
+ topRight: 30,
129
+ bottomLeft: 30,
130
+ bottomRight: 30
131
+ },
132
+ bannerSpacing: {
133
+ left: 16,
134
+ top: 8,
135
+ right: 16,
136
+ bottom: 8
137
+ }
138
+ }
139
+ }
140
+ }
141
+ };
142
+ export function getTheme(selectedTheme) {
143
+ return transformTheme(selectedTheme?.theme || defaultTheme.theme);
144
+ }