@flozy/editor 4.0.2 → 4.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (177) hide show
  1. package/dist/Editor/ChatEditor.js +14 -9
  2. package/dist/Editor/CommonEditor.js +185 -170
  3. package/dist/Editor/DialogWrapper.js +4 -3
  4. package/dist/Editor/Editor.css +5 -19
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +52 -41
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +39 -26
  8. package/dist/Editor/Elements/Button/EditorButton.js +33 -38
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +0 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -59
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  13. package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
  14. package/dist/Editor/Elements/Embed/Image.js +15 -14
  15. package/dist/Editor/Elements/Embed/Video.js +12 -8
  16. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  17. package/dist/Editor/Elements/Form/Form.js +43 -27
  18. package/dist/Editor/Elements/Form/FormField.js +21 -10
  19. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
  20. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
  21. package/dist/Editor/Elements/Form/Workflow/index.js +5 -2
  22. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +437 -0
  23. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +206 -0
  24. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  25. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +236 -0
  26. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +44 -0
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  28. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  29. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +19 -0
  30. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  31. package/dist/Editor/Elements/FreeGrid/styles.js +214 -0
  32. package/dist/Editor/Elements/Grid/Grid.js +11 -9
  33. package/dist/Editor/Elements/Grid/GridItem.js +31 -23
  34. package/dist/Editor/Elements/Link/Link.js +1 -6
  35. package/dist/Editor/Elements/Link/LinkButton.js +2 -4
  36. package/dist/Editor/Elements/Link/LinkPopup.js +15 -18
  37. package/dist/Editor/Elements/NewLine/NewLineButton.js +0 -1
  38. package/dist/Editor/Elements/Signature/SignaturePopup.js +1 -1
  39. package/dist/Editor/Elements/SimpleText/index.js +18 -16
  40. package/dist/Editor/Elements/SimpleText/style.js +43 -0
  41. package/dist/Editor/ErrorBoundary.js +30 -0
  42. package/dist/Editor/MiniEditor.js +1 -3
  43. package/dist/Editor/Styles/EditorStyles.js +28 -0
  44. package/dist/Editor/Toolbar/Basic/index.js +2 -4
  45. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
  46. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
  48. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -3
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
  52. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +14 -26
  53. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +2 -68
  54. package/dist/Editor/Toolbar/PopupTool/index.js +8 -0
  55. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  56. package/dist/Editor/Toolbar/toolbarGroups.js +16 -48
  57. package/dist/Editor/common/ColorPickerButton.js +9 -25
  58. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  59. package/dist/Editor/common/EditorCmds.js +0 -3
  60. package/dist/Editor/common/Icon.js +16 -34
  61. package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
  62. package/dist/Editor/common/LinkSettings/index.js +1 -2
  63. package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
  64. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  65. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +142 -0
  66. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  67. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  68. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  69. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  70. package/dist/Editor/common/RnD/DragOver/index.js +55 -0
  71. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  72. package/dist/Editor/common/RnD/ElementOptions/Actions.js +102 -0
  73. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  74. package/dist/Editor/common/RnD/ElementOptions/index.js +95 -0
  75. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  76. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  77. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +36 -0
  78. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +60 -0
  79. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +9 -0
  80. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +47 -0
  81. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +47 -0
  82. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +47 -0
  83. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +48 -0
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +47 -0
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +47 -0
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +17 -0
  88. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  89. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +18 -0
  90. package/dist/Editor/common/RnD/ElementSettings/styles.js +94 -0
  91. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  92. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  93. package/dist/Editor/common/RnD/GuideLines/styles.js +62 -0
  94. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  95. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  96. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  97. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  98. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  99. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  100. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  101. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  102. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  103. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +20 -0
  104. package/dist/Editor/common/RnD/TransformHandles/index.js +67 -0
  105. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  106. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  107. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  108. package/dist/Editor/common/RnD/Utils/gridDropItem.js +181 -0
  109. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  110. package/dist/Editor/common/RnD/VirtualElement/index.js +77 -0
  111. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  112. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  113. package/dist/Editor/common/RnD/index.js +567 -0
  114. package/dist/Editor/common/RnD/styles.js +4 -0
  115. package/dist/Editor/common/Section/index.js +21 -12
  116. package/dist/Editor/common/Section/styles.js +7 -4
  117. package/dist/Editor/common/Shorthands/elements.js +12 -54
  118. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  119. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +36 -44
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +23 -33
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +18 -5
  126. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  127. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
  128. package/dist/Editor/common/StyleBuilder/index.js +5 -3
  129. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  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 +48 -186
  135. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  136. package/dist/Editor/hooks/useMouseMove.js +37 -12
  137. package/dist/Editor/hooks/withCommon.js +2 -1
  138. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  139. package/dist/Editor/plugins/withEmbeds.js +1 -1
  140. package/dist/Editor/plugins/withHTML.js +1 -1
  141. package/dist/Editor/plugins/withTable.js +1 -1
  142. package/dist/Editor/theme/ThemeList.js +173 -50
  143. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +197 -0
  144. package/dist/Editor/utils/SlateUtilityFunctions.js +60 -164
  145. package/dist/Editor/utils/button.js +17 -1
  146. package/dist/Editor/utils/events.js +5 -0
  147. package/dist/Editor/utils/font.js +37 -40
  148. package/dist/Editor/utils/form.js +7 -2
  149. package/dist/Editor/utils/formfield.js +1 -1
  150. package/dist/Editor/utils/freegrid.js +91 -0
  151. package/dist/Editor/utils/helper.js +44 -30
  152. package/dist/Editor/utils/insertAppHeader.js +47 -40
  153. package/package.json +5 -2
  154. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
  155. package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
  156. package/dist/Editor/common/CustomColorPicker/index.js +0 -106
  157. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  158. package/dist/Editor/common/CustomDialog/index.js +0 -94
  159. package/dist/Editor/common/CustomDialog/style.js +0 -67
  160. package/dist/Editor/common/CustomSelect.js +0 -33
  161. package/dist/Editor/hooks/useEditorTheme.js +0 -139
  162. package/dist/Editor/theme/index.js +0 -144
  163. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  164. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  165. package/dist/Editor/themeSettings/buttons/style.js +0 -21
  166. package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
  167. package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
  168. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
  169. package/dist/Editor/themeSettings/fonts/index.js +0 -213
  170. package/dist/Editor/themeSettings/fonts/style.js +0 -44
  171. package/dist/Editor/themeSettings/icons.js +0 -60
  172. package/dist/Editor/themeSettings/index.js +0 -320
  173. package/dist/Editor/themeSettings/style.js +0 -152
  174. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  175. package/dist/Editor/themeSettingsAI/index.js +0 -356
  176. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
  177. package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -3,6 +3,7 @@ import { ReactEditor } from "slate-react";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { getDevice } from "../helper/theme";
5
5
  export const windowVar = {};
6
+ let ST_TIMEOUT = null;
6
7
  export const formatDate = (date, format = "MM/DD/YYYY") => {
7
8
  if (!date) return "";
8
9
  var d = new Date(date),
@@ -246,8 +247,7 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
246
247
  props.target = "_blank";
247
248
  }
248
249
  break;
249
- case "nextTrigger":
250
- case "prevTrigger":
250
+ case "actionTrigger":
251
251
  if (!readOnly) {
252
252
  props.component = "button";
253
253
  props.onClick = () => {};
@@ -379,34 +379,6 @@ export const decodeString = str => {
379
379
  console.log(err);
380
380
  }
381
381
  };
382
- export const getContrastColor = color => {
383
- let r, g, b;
384
-
385
- // Check if the color is in hex format
386
- if (color.startsWith("#")) {
387
- r = parseInt(color.substring(1, 3), 16);
388
- g = parseInt(color.substring(3, 5), 16);
389
- b = parseInt(color.substring(5, 7), 16);
390
- }
391
- // Check if the color is in RGB/RGBA format
392
- else if (color.startsWith("rgb")) {
393
- const rgbValues = color.replace(/^rgba?\(|\s+|\)$/g, "") // Remove the rgb/rgba and spaces
394
- .split(","); // Split the values into an array
395
-
396
- r = parseInt(rgbValues[0]);
397
- g = parseInt(rgbValues[1]);
398
- b = parseInt(rgbValues[2]);
399
- } else {
400
- // If the format is not recognized, default to black text
401
- return "#000000";
402
- }
403
-
404
- // Calculate relative luminance
405
- const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
406
-
407
- // Return black for light colors, white for dark colors
408
- return luminance > 0.5 ? "#000000" : "#FFFFFF";
409
- };
410
382
  export const onDeleteKey = (event, {
411
383
  editor
412
384
  }) => {
@@ -427,4 +399,46 @@ export const onDeleteKey = (event, {
427
399
  } catch (err) {
428
400
  console.log(err);
429
401
  }
402
+ };
403
+ export const selectText = (editor, {
404
+ path,
405
+ cursorOnly
406
+ }, timeout = 10) => {
407
+ try {
408
+ clearTimeout(ST_TIMEOUT);
409
+ ST_TIMEOUT = setTimeout(() => {
410
+ ReactEditor.focus(editor);
411
+ const range = Editor.range(editor, path);
412
+ const textNode = Node.get(editor, path);
413
+ if (!cursorOnly) {
414
+ Transforms.select(editor, range);
415
+ }
416
+ if (cursorOnly && textNode) {
417
+ const textLength = Node.string(textNode).length;
418
+ editor.selection = {
419
+ anchor: {
420
+ path: path,
421
+ offset: textLength
422
+ },
423
+ focus: {
424
+ path: path,
425
+ offset: textLength
426
+ }
427
+ };
428
+ }
429
+ ReactEditor.focus(editor);
430
+ }, timeout);
431
+ } catch (err) {
432
+ console.log(err);
433
+ }
434
+ };
435
+ export const isFreeGridFragment = fragments => {
436
+ const types = ["freegrid", "freegridItem", "freegridBox"];
437
+ const node = fragments[0] || fragments;
438
+ const fType = types.includes(node.children[0]?.type) || types.includes(node.type);
439
+ if (fType) {
440
+ return true;
441
+ } else {
442
+ return false;
443
+ }
430
444
  };
@@ -1,4 +1,48 @@
1
1
  import { Editor, Transforms, Path, Range, Element } from "slate";
2
+ export const appHeaderNode = ({
3
+ menus
4
+ }) => {
5
+ return {
6
+ type: "app-header",
7
+ appTitle: "Logo",
8
+ appLogo: "none",
9
+ menus: menus || [{
10
+ type: "menu",
11
+ url: "home",
12
+ target: "",
13
+ text: "Home",
14
+ linkType: "page"
15
+ }, {
16
+ type: "menu",
17
+ url: "wireframe2",
18
+ target: "",
19
+ text: "Wireframe",
20
+ linkType: "page"
21
+ }, {
22
+ type: "menu",
23
+ url: "https://www.google.com",
24
+ target: "",
25
+ text: "Work",
26
+ linkType: "webAddress"
27
+ }, {
28
+ type: "menu",
29
+ url: "https://www.google.com",
30
+ target: "",
31
+ text: "Contact",
32
+ linkType: "webAddress"
33
+ }],
34
+ menuStyle: "stacked",
35
+ children: [{
36
+ text: " "
37
+ }],
38
+ logoFontSize: "32px",
39
+ titleFontFamily: "PoppinsBold",
40
+ bgColor: "rgb(255, 255, 255, 0)",
41
+ borderColor: "rgba(255, 255, 255, 0)",
42
+ textColor: "rgb(0, 0, 0)",
43
+ cellBgColor: "#FFFFFF"
44
+ };
45
+ };
2
46
  export const createAppHeaderNode = ({
3
47
  menus
4
48
  }) => ({
@@ -7,46 +51,9 @@ export const createAppHeaderNode = ({
7
51
  children: [{
8
52
  type: "grid-item",
9
53
  grid: 12,
10
- children: [{
11
- type: "app-header",
12
- appTitle: "Logo",
13
- appLogo: "none",
14
- menus: menus || [{
15
- type: "menu",
16
- url: "home",
17
- target: "",
18
- text: "Home",
19
- linkType: "page"
20
- }, {
21
- type: "menu",
22
- url: "wireframe2",
23
- target: "",
24
- text: "Wireframe",
25
- linkType: "page"
26
- }, {
27
- type: "menu",
28
- url: "https://www.google.com",
29
- target: "",
30
- text: "Work",
31
- linkType: "webAddress"
32
- }, {
33
- type: "menu",
34
- url: "https://www.google.com",
35
- target: "",
36
- text: "Contact",
37
- linkType: "webAddress"
38
- }],
39
- menuStyle: "stacked",
40
- children: [{
41
- text: " "
42
- }],
43
- logoFontSize: "32px",
44
- titleFontFamily: "PoppinsBold",
45
- bgColor: "rgb(255, 255, 255, 0)",
46
- borderColor: "rgba(255, 255, 255, 0)",
47
- textColor: "rgb(0, 0, 0)",
48
- cellBgColor: "#FFFFFF"
49
- }],
54
+ children: [...appHeaderNode({
55
+ menus
56
+ })],
50
57
  bgColor: "rgba(255, 255, 255, 0)",
51
58
  lockSpacing: true,
52
59
  bannerSpacing: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.0.2",
3
+ "version": "4.0.4",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -36,6 +36,7 @@
36
36
  "react-gcolor-picker": "^1.3.1",
37
37
  "react-icons": "^4.10.1",
38
38
  "react-katex": "^3.0.1",
39
+ "react-rnd": "^10.4.11",
39
40
  "react-scripts": "5.0.1",
40
41
  "react-signature-canvas": "^1.0.6",
41
42
  "react-slick": "^0.29.0",
@@ -57,6 +58,7 @@
57
58
  },
58
59
  "scripts": {
59
60
  "prepare": "husky install .husky",
61
+ "analyze": "source-map-explorer build/static/js/*.js",
60
62
  "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
61
63
  "start": "craco start",
62
64
  "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
@@ -65,7 +67,7 @@
65
67
  "storybook": "storybook dev -p 6006",
66
68
  "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
67
69
  "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
68
- "publish:local": "rm -rf /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist --copy-files"
70
+ "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
69
71
  },
70
72
  "eslintConfig": {
71
73
  "extends": [
@@ -113,6 +115,7 @@
113
115
  "babel-plugin-named-exports-order": "^0.0.2",
114
116
  "eslint-plugin-storybook": "^0.6.13",
115
117
  "prop-types": "^15.8.1",
118
+ "source-map-explorer": "^2.5.3",
116
119
  "storybook": "^7.4.0",
117
120
  "webpack": "^5.88.2"
118
121
  },
@@ -1,438 +0,0 @@
1
- import { Button, Grid, IconButton, Popover, TextField, Tooltip, Typography } from "@mui/material";
2
- import { useEditorContext } from "../../hooks/useMouseMove";
3
- import { fontFamilyMap, fontOptions } from "../../utils/font";
4
- import FormatClearIcon from "@mui/icons-material/FormatClear";
5
- import usePopupStyles from "../PopupTool/PopupToolStyle";
6
- import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist";
7
- import { BREAKPOINTS_DEVICES, getBreakPointsValue, getVariableValue } from "../../helper/theme";
8
- import useWindowResize from "../../hooks/useWindowResize";
9
- import { toolbarGroups } from "../toolbarGroups";
10
- import Icon from "../../common/Icon";
11
- import { useMemo, useState } from "react";
12
- import CommonButton from "../../common/Button";
13
- import CustomSelect from "../../common/CustomSelect";
14
- import ColorButtons from "../../Elements/Color Picker/ColorButtons";
15
- import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
16
- import ColorPickerStyles from "../../Elements/Color Picker/Styles";
17
- import colorWheel from "../../Elements/Color Picker/colorWheel.png";
18
- import CustomColorPicker from "../../common/CustomColorPicker";
19
- import { jsx as _jsx } from "react/jsx-runtime";
20
- import { jsxs as _jsxs } from "react/jsx-runtime";
21
- import { Fragment as _Fragment } from "react/jsx-runtime";
22
- function getFontStyleProps(settings = {}, format) {
23
- const {
24
- fontWeight,
25
- fontStyle
26
- } = settings;
27
- let isActive;
28
- let onClick;
29
- switch (format) {
30
- case "bold":
31
- isActive = fontWeight === "bold" || fontWeight === "700";
32
- onClick = () => {
33
- return {
34
- fontWeight: isActive ? "normal" : "bold"
35
- };
36
- };
37
- break;
38
- case "italic":
39
- isActive = fontStyle === "italic";
40
- onClick = () => {
41
- return {
42
- fontStyle: isActive ? "unset" : "italic"
43
- };
44
- };
45
- break;
46
-
47
- // case "underline":
48
- // isActive = textDecoration.includes("underline");
49
- // onClick = () => {
50
- // let otherTextDecoration = textDecoration?.includes("line-through")
51
- // ? "line-through"
52
- // : "";
53
-
54
- // otherTextDecoration += isActive ? "" : " underline";
55
-
56
- // return { textDecoration: otherTextDecoration };
57
- // };
58
- // break;
59
- // case "strikethrough":
60
- // isActive = textDecoration.includes("line-through");
61
- // onClick = () => {
62
- // let otherTextDecoration = textDecoration?.includes("underline")
63
- // ? "underline"
64
- // : "";
65
-
66
- // otherTextDecoration += isActive ? "" : " line-through";
67
-
68
- // return { textDecoration: otherTextDecoration };
69
- // };
70
- // break;
71
-
72
- default:
73
- isActive = false;
74
- onClick = () => {};
75
- break;
76
- }
77
- return {
78
- isActive,
79
- onClick
80
- };
81
- }
82
- const allTools = toolbarGroups.flat();
83
- function ThemeTextFormat(props) {
84
- const {
85
- settings,
86
- updateSettings,
87
- onSaveTextSettings,
88
- onClose
89
- } = props;
90
- const {
91
- theme
92
- } = useEditorContext();
93
- const classes = usePopupStyles(theme);
94
- const pickerStyles = ColorPickerStyles(theme);
95
- const fontStyle = allTools.filter(f => f.type === "mark" && f.themeEnabled);
96
- const fontWeight = allTools.find(f => f.format === "fontWeight");
97
- const fontFamilyVal = useMemo(() => {
98
- const {
99
- fontFamily = ""
100
- } = settings;
101
- let font = fontFamily.startsWith("var") ? getVariableValue(fontFamily) : fontFamily;
102
- return fontOptions?.find(f => f.text === font)?.value;
103
- }, [settings, fontOptions]);
104
- const fontWeightVal = useMemo(() => {
105
- const {
106
- options
107
- } = fontWeight || {};
108
- const selected = options?.find(o => o.value === settings?.fontWeight || o.numVal === settings?.fontWeight);
109
- return selected?.value;
110
- }, [settings?.fontWeight]);
111
- return /*#__PURE__*/_jsxs(Grid, {
112
- container: true,
113
- sx: classes.textFormatWrapper,
114
- children: [/*#__PURE__*/_jsxs(Grid, {
115
- item: true,
116
- xs: 12,
117
- children: [/*#__PURE__*/_jsxs(Grid, {
118
- container: true,
119
- justifyContent: "space-between",
120
- alignItems: "center",
121
- children: [/*#__PURE__*/_jsx(Grid, {
122
- item: true,
123
- children: /*#__PURE__*/_jsx(Typography, {
124
- variant: "body1",
125
- color: "primary",
126
- sx: classes.typoLabel,
127
- children: "Font Family"
128
- })
129
- }), /*#__PURE__*/_jsx(Grid, {
130
- item: true,
131
- children: /*#__PURE__*/_jsx(Button, {
132
- sx: classes.defaultBtn,
133
- startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
134
- onClick: () => updateSettings({
135
- fontFamily: Object.values(fontFamilyMap)[0]
136
- }),
137
- children: "Default"
138
- })
139
- })]
140
- }), /*#__PURE__*/_jsx(Grid, {
141
- item: true,
142
- xs: 12,
143
- sx: classes.textFormatField,
144
- children: /*#__PURE__*/_jsx(CustomSelect, {
145
- options: fontOptions,
146
- classes: classes,
147
- onChange: e => {
148
- const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
149
- updateSettings({
150
- fontFamily
151
- });
152
- },
153
- value: fontFamilyVal || fontOptions[0].value
154
- })
155
- })]
156
- }), /*#__PURE__*/_jsxs(Grid, {
157
- container: true,
158
- spacing: 2,
159
- children: [/*#__PURE__*/_jsxs(Grid, {
160
- item: true,
161
- xs: 6,
162
- children: [/*#__PURE__*/_jsx(Typography, {
163
- variant: "body1",
164
- color: "primary",
165
- sx: classes.typoLabel,
166
- children: "Font Weight"
167
- }), /*#__PURE__*/_jsx(Grid, {
168
- item: true,
169
- xs: 12,
170
- sx: classes.textFormatField,
171
- children: /*#__PURE__*/_jsx(CustomSelect, {
172
- options: fontWeight?.options || [],
173
- classes: classes,
174
- onChange: e => {
175
- updateSettings({
176
- fontWeight: e.target.value
177
- });
178
- },
179
- value: fontWeightVal
180
- })
181
- })]
182
- }), /*#__PURE__*/_jsxs(Grid, {
183
- item: true,
184
- xs: 6,
185
- children: [/*#__PURE__*/_jsx(Typography, {
186
- variant: "body1",
187
- color: "primary",
188
- sx: classes.typoLabel,
189
- children: "Font Size"
190
- }), /*#__PURE__*/_jsx(Grid, {
191
- item: true,
192
- xs: 12,
193
- sx: classes.textFormatCG,
194
- children: /*#__PURE__*/_jsx(TextSize, {
195
- classes: classes,
196
- value: settings?.fontSize || 16,
197
- onChange: fontSize => updateSettings({
198
- fontSize
199
- }),
200
- fullWidth: true
201
- })
202
- })]
203
- })]
204
- }), /*#__PURE__*/_jsxs(Grid, {
205
- item: true,
206
- xs: 12,
207
- sx: classes.textFormatField,
208
- style: {
209
- marginTop: "14px"
210
- },
211
- children: [/*#__PURE__*/_jsxs(Grid, {
212
- container: true,
213
- justifyContent: "space-between",
214
- alignItems: "center",
215
- children: [/*#__PURE__*/_jsx(Grid, {
216
- item: true,
217
- children: /*#__PURE__*/_jsx(Typography, {
218
- variant: "body1",
219
- color: "primary",
220
- sx: classes.typoLabel,
221
- children: "Text Color"
222
- })
223
- }), /*#__PURE__*/_jsx(Grid, {
224
- item: true,
225
- children: /*#__PURE__*/_jsx(Button, {
226
- sx: classes.defaultBtn,
227
- startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
228
- onClick: () => updateSettings({
229
- color: "#ddd"
230
- }),
231
- children: "Default"
232
- })
233
- })]
234
- }), /*#__PURE__*/_jsx(Grid, {
235
- sx: classes.textFormatColorWrpr,
236
- children: /*#__PURE__*/_jsx(ColorPicker, {
237
- classes: classes,
238
- pickerStyles: pickerStyles,
239
- onChange: color => updateSettings({
240
- color
241
- }),
242
- color: settings?.color,
243
- disableEditTheme: true
244
- })
245
- })]
246
- }), /*#__PURE__*/_jsxs(Grid, {
247
- item: true,
248
- xs: 12,
249
- children: [/*#__PURE__*/_jsx(Typography, {
250
- variant: "body1",
251
- color: "primary",
252
- sx: classes.typoLabel,
253
- children: "Typography"
254
- }), /*#__PURE__*/_jsx(Grid, {
255
- item: true,
256
- xs: 12,
257
- className: "typo-icons",
258
- sx: classes.evenSpace,
259
- children: fontStyle?.map((m, i) => {
260
- const {
261
- isActive,
262
- onClick
263
- } = getFontStyleProps(settings, m.format) || {};
264
- return /*#__PURE__*/_jsx(CommonButton, {
265
- active: isActive,
266
- onClick: () => {
267
- const style = onClick();
268
- updateSettings(style);
269
- },
270
- children: /*#__PURE__*/_jsx(Icon, {
271
- icon: m.format
272
- })
273
- }, i);
274
- })
275
- })]
276
- }), /*#__PURE__*/_jsx(Grid, {
277
- item: true,
278
- xs: 12,
279
- sx: {
280
- mt: 2
281
- },
282
- children: /*#__PURE__*/_jsxs("div", {
283
- style: {
284
- display: "flex",
285
- justifyContent: "end",
286
- margin: "8px",
287
- position: "absolute",
288
- bottom: 0,
289
- right: 0
290
- },
291
- children: [/*#__PURE__*/_jsx(Button, {
292
- onClick: onClose,
293
- className: "secondaryBtn",
294
- children: "Cancel"
295
- }), /*#__PURE__*/_jsx(Button, {
296
- onClick: onSaveTextSettings,
297
- className: "primaryBtn",
298
- children: "Save"
299
- })]
300
- })
301
- })]
302
- });
303
- }
304
- export default ThemeTextFormat;
305
- function TextSize(props) {
306
- const {
307
- classes,
308
- value: val,
309
- onChange,
310
- fullWidth
311
- } = props;
312
- const [size] = useWindowResize();
313
- const value = getBreakPointsValue(val, size?.device);
314
- const updateMarkData = newVal => {
315
- let upData = {
316
- ...getBreakPointsValue(val),
317
- [size?.device]: `${newVal}px`
318
- };
319
-
320
- // if desktop update to all other devices
321
- // to avoid default normal size
322
- if (size?.device === "lg") {
323
- upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
324
- a[b] = `${newVal}px`;
325
- return a;
326
- }, {});
327
- }
328
- onChange(upData);
329
- };
330
- const onChangeSize = e => {
331
- let inc = parseInt(e.target.value) || 8;
332
- inc = inc > 200 ? 200 : inc;
333
- updateMarkData(inc || 8);
334
- };
335
- const getSizeVal = () => {
336
- try {
337
- return parseInt(value);
338
- } catch (err) {
339
- return "";
340
- }
341
- };
342
- const combinedOldVal = getSizeVal();
343
- const onIncreaseSize = () => {
344
- let inc = (combinedOldVal || 0) + 1;
345
- inc = inc > 200 ? 200 : inc;
346
- updateMarkData(inc);
347
- };
348
- const onDecreaseSize = () => {
349
- const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
350
- updateMarkData(newVal);
351
- };
352
- return /*#__PURE__*/_jsx(TextField, {
353
- sx: classes?.textSize,
354
- value: combinedOldVal,
355
- onChange: onChangeSize,
356
- size: "small",
357
- inputProps: {
358
- style: {
359
- width: fullWidth ? "100%" : "30px",
360
- textAlign: "center",
361
- height: "19px",
362
- fontSize: "14px"
363
- }
364
- },
365
- fullWidth: fullWidth,
366
- InputProps: {
367
- style: {
368
- borderRadius: "8px"
369
- },
370
- endAdornment: /*#__PURE__*/_jsxs("div", {
371
- className: "textFontArrows",
372
- children: [/*#__PURE__*/_jsx(IconButton, {
373
- onClick: onIncreaseSize,
374
- size: "small",
375
- children: /*#__PURE__*/_jsx(TextPlusIcon, {})
376
- }), /*#__PURE__*/_jsx(IconButton, {
377
- onClick: onDecreaseSize,
378
- size: "small",
379
- children: /*#__PURE__*/_jsx(TextMinusIcon, {})
380
- })]
381
- })
382
- }
383
- });
384
- }
385
- function ColorPicker(props) {
386
- const {
387
- classes,
388
- pickerStyles,
389
- onChange,
390
- color,
391
- disableEditTheme
392
- } = props;
393
- const [anchorEl, setAnchorEl] = useState(null);
394
- const open = Boolean(anchorEl);
395
- const handleClose = () => {
396
- setAnchorEl(null);
397
- };
398
- return /*#__PURE__*/_jsxs(_Fragment, {
399
- children: [/*#__PURE__*/_jsx(Tooltip, {
400
- title: "",
401
- arrow: true,
402
- children: /*#__PURE__*/_jsx(IconButton, {
403
- sx: pickerStyles.colorPickerIcon,
404
- onClick: e => {
405
- setAnchorEl(e.currentTarget);
406
- },
407
- children: /*#__PURE__*/_jsx("img", {
408
- src: colorWheel,
409
- alt: "color wheel"
410
- })
411
- })
412
- }), /*#__PURE__*/_jsx(ColorButtons, {
413
- classes: pickerStyles,
414
- onSelect: onChange,
415
- activeColor: color,
416
- disableEditTheme: disableEditTheme
417
- }), /*#__PURE__*/_jsx(Popover, {
418
- open: open,
419
- anchorEl: anchorEl,
420
- onClose: handleClose,
421
- anchorOrigin: {
422
- vertical: "top",
423
- horizontal: "center"
424
- },
425
- transformOrigin: {
426
- vertical: "bottom",
427
- horizontal: "top"
428
- },
429
- sx: classes.colorPickerPopup,
430
- children: /*#__PURE__*/_jsx(CustomColorPicker, {
431
- gradient: true,
432
- onChange: onChange,
433
- color: color,
434
- disableEditTheme: disableEditTheme
435
- })
436
- })]
437
- });
438
- }