@flozy/editor 1.6.6 → 1.6.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. package/dist/Editor/CommonEditor.js +1 -0
  2. package/dist/Editor/Editor.css +3 -7
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -3
  4. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +12 -9
  5. package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
  6. package/dist/Editor/Elements/Color Picker/Styles.js +2 -2
  7. package/dist/Editor/Elements/Form/Form.js +23 -1
  8. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +178 -0
  9. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +139 -0
  10. package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +64 -0
  11. package/dist/Editor/Elements/Form/Workflow/Styles.js +207 -0
  12. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +207 -0
  13. package/dist/Editor/Elements/Form/Workflow/constant.js +3 -0
  14. package/dist/Editor/Elements/Form/Workflow/index.js +179 -0
  15. package/dist/Editor/Elements/Grid/GridItem.js +8 -6
  16. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +1 -2
  17. package/dist/Editor/Elements/SimpleText.js +1 -3
  18. package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -2
  19. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +0 -1
  20. package/dist/Editor/Styles/EditorStyles.js +2 -2
  21. package/dist/Editor/Toolbar/Mini/Styles.js +4 -2
  22. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -1
  23. package/dist/Editor/Toolbar/Toolbar.js +2 -1
  24. package/dist/Editor/Toolbar/toolbarGroups.js +2 -1
  25. package/dist/Editor/common/Icon.js +5 -3
  26. package/dist/Editor/common/ImageSelector/ImageSelector.js +1 -1
  27. package/dist/Editor/common/MentionsPopup/Styles.js +6 -3
  28. package/dist/Editor/common/StyleBuilder/gridItemStyle.js +29 -0
  29. package/dist/Editor/common/iconslist.js +67 -1
  30. package/dist/Editor/hooks/useMentions.js +0 -26
  31. package/dist/Editor/utils/embed.js +14 -10
  32. package/dist/Editor/utils/emoji.js +0 -1
  33. package/dist/Editor/utils/form.js +1 -0
  34. package/dist/Editor/utils/insertAppHeader.js +66 -12
  35. package/package.json +2 -1
@@ -9,6 +9,7 @@ const editorStyles = ({
9
9
  justifyContent: "center"
10
10
  },
11
11
  slateWrapper: {
12
+ paddingTop: "0px",
12
13
  height: `${window.innerHeight - padHeight}px`,
13
14
  width: "100%",
14
15
  overflowY: "auto",
@@ -17,7 +18,6 @@ const editorStyles = ({
17
18
  flexDirection: "column",
18
19
  alignItems: "center",
19
20
  "& .max-content": {
20
- maxWidth: "1280px",
21
21
  width: "100%",
22
22
  display: "flex",
23
23
  flex: 1,
@@ -30,7 +30,7 @@ const editorStyles = ({
30
30
  flex: 1
31
31
  },
32
32
  "& .editor-wrapper": {
33
- maxWidth: "90%",
33
+ maxWidth: "1440px",
34
34
  height: "100%",
35
35
  backgroundColor: "#FFF",
36
36
  overflow: "visible"
@@ -5,16 +5,18 @@ const miniToolbarStyles = () => ({
5
5
  justifyContent: "center",
6
6
  alignItems: "center",
7
7
  position: "absolute",
8
- bottom: "-25px",
8
+ bottom: "-15px",
9
9
  left: 0,
10
10
  right: 0,
11
11
  margin: "auto",
12
12
  border: "1px solid #D8DDE1",
13
13
  borderRadius: "22px",
14
- width: "200px",
14
+ width: "fit-content",
15
15
  height: "37px",
16
16
  zIndex: 1000,
17
17
  background: "#FFF",
18
+ boxShadow: "1px 2px 15px rgba(37, 99, 235, 0.25)",
19
+ padding: "0px 8px",
18
20
  "& button": {
19
21
  "& svg": {
20
22
  stroke: "#64748B"
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Button, ButtonGroup, Grid, Popover, Typography } from "@mui/material";
2
+ import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
3
3
  import WidthFullIcon from "@mui/icons-material/WidthFull";
4
4
  import WidthNormalIcon from "@mui/icons-material/WidthNormal";
5
5
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
@@ -167,7 +167,8 @@ export const RenderToolbarIcon = props => {
167
167
  case "app-header":
168
168
  return /*#__PURE__*/_jsx(AppHeaderButton, {
169
169
  editor: editor,
170
- customProps: customProps
170
+ customProps: customProps,
171
+ icoBtnType: icoBtnType
171
172
  }, element.id);
172
173
  case "form":
173
174
  return /*#__PURE__*/_jsx(FormButton, {
@@ -210,7 +210,8 @@ export const toolbarGroups = [[{
210
210
  }, {
211
211
  id: 37,
212
212
  format: "appHeader",
213
- type: "app-header"
213
+ type: "app-header",
214
+ group: "elements"
214
215
  }, {
215
216
  id: 38,
216
217
  format: "form",
@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
7
7
  import { SiLatex } from "react-icons/si";
8
8
  import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
9
9
  import { IoIosImage, IoIosLink, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
10
- import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon } from "./iconslist";
10
+ import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal } from "./iconslist";
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  const iconList = {
13
13
  fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
@@ -77,7 +77,7 @@ const iconList = {
77
77
  fill: "#64748B"
78
78
  }),
79
79
  // link: <MdInsertLink size={20} />,
80
- link: /*#__PURE__*/_jsx(IoIosLink, {
80
+ link: /*#__PURE__*/_jsx(LinkIcon, {
81
81
  size: 20
82
82
  }),
83
83
  // image: <MdImage size={20} />,
@@ -181,7 +181,9 @@ const iconList = {
181
181
  }),
182
182
  accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
183
183
  size: 20
184
- })
184
+ }),
185
+ appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
186
+ moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {})
185
187
  };
186
188
  const Icon = props => {
187
189
  const {
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState } from "react";
1
+ import React, { useState } from "react";
2
2
  import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography } from "@mui/material";
3
3
  import Upload from "./Options/Upload";
4
4
  import ChooseAssets from "./Options/ChooseAssets";
@@ -3,9 +3,10 @@ const usePopupStyles = () => ({
3
3
  position: "absolute",
4
4
  zIndex: 1000,
5
5
  background: "white",
6
- borderRadius: "0px",
6
+ borderRadius: "10px",
7
7
  padding: "0px",
8
- boxShadow: "0 4px 10px rgba(0,0,0,.2)"
8
+ boxShadow: "0 4px 10px rgba(0,0,0,.2)",
9
+ overflow: "hidden"
9
10
  },
10
11
  papper: {
11
12
  boxShadow: "none",
@@ -13,7 +14,8 @@ const usePopupStyles = () => ({
13
14
  height: "300px",
14
15
  overflow: "auto",
15
16
  padding: "8px",
16
- margin: "0px"
17
+ margin: "0px",
18
+ borderRadius: "10px"
17
19
  },
18
20
  groupHeader: {
19
21
  padding: "10px 8px",
@@ -26,6 +28,7 @@ const usePopupStyles = () => ({
26
28
  padding: "4px",
27
29
  cursor: "pointer",
28
30
  background: "transparent",
31
+ borderRadius: "10px",
29
32
  "&.active": {
30
33
  background: "rgba(55, 53, 47, 0.08)"
31
34
  },
@@ -28,6 +28,35 @@ const gridItemStyle = [{
28
28
  key: "borderColorHover",
29
29
  type: "color"
30
30
  }]
31
+ }, {
32
+ tab: "Animation",
33
+ value: "animation",
34
+ fields: [{
35
+ label: "Choose Animation",
36
+ key: "animation",
37
+ type: "textOptions",
38
+ options: [{
39
+ text: "No Animation",
40
+ value: "No Animation"
41
+ }, {
42
+ text: "Fade In",
43
+ value: "animate__animated animate__fadeIn"
44
+ }, {
45
+ text: "Zoom In",
46
+ value: "animate__animated animate__zoomIn"
47
+ }, {
48
+ text: "Bounce In Left",
49
+ value: "animate__animated animate__bounceInLeft"
50
+ }],
51
+ renderOption: option => {
52
+ return /*#__PURE__*/_jsx("span", {
53
+ style: {
54
+ fontFamily: option.value
55
+ },
56
+ children: option.text
57
+ });
58
+ }
59
+ }]
31
60
  }, {
32
61
  tab: "Position",
33
62
  value: "position",
@@ -1451,4 +1451,70 @@ export const FileUploadIcon = () => {
1451
1451
  strokeLinejoin: "round"
1452
1452
  })]
1453
1453
  });
1454
- };
1454
+ };
1455
+ export const RestRight = () => /*#__PURE__*/_jsxs("svg", {
1456
+ width: "20",
1457
+ height: "16",
1458
+ viewBox: "0 0 22 23",
1459
+ fill: "none",
1460
+ xmlns: "http://www.w3.org/2000/svg",
1461
+ children: [/*#__PURE__*/_jsx("path", {
1462
+ d: "M13.6474 5.31C12.8499 5.07167 11.9699 4.91583 10.9983 4.91583C6.60745 4.91583 3.05078 8.4725 3.05078 12.8633C3.05078 17.2633 6.60745 20.82 10.9983 20.82C15.3891 20.82 18.9458 17.2633 18.9458 12.8725C18.9458 11.2408 18.4508 9.71917 17.6074 8.45417",
1463
+ stroke: "#64748B",
1464
+ strokeWidth: "1.5",
1465
+ strokeLinecap: "round",
1466
+ strokeLinejoin: "round"
1467
+ }), /*#__PURE__*/_jsx("path", {
1468
+ d: "M14.7859 5.53L12.1367 2.48666",
1469
+ stroke: "#64748B",
1470
+ strokeWidth: "1.5",
1471
+ strokeLinecap: "round",
1472
+ strokeLinejoin: "round"
1473
+ }), /*#__PURE__*/_jsx("path", {
1474
+ d: "M14.7845 5.53L11.6953 7.785",
1475
+ stroke: "#64748B",
1476
+ strokeWidth: "1.5",
1477
+ strokeLinecap: "round",
1478
+ strokeLinejoin: "round"
1479
+ })]
1480
+ });
1481
+ export const MoreHorizontal = ({
1482
+ width = "22",
1483
+ height = "22"
1484
+ }) => /*#__PURE__*/_jsxs("svg", {
1485
+ xmlns: "http://www.w3.org/2000/svg",
1486
+ width: width,
1487
+ height: height,
1488
+ viewBox: "0 0 22 22",
1489
+ fill: "none",
1490
+ children: [/*#__PURE__*/_jsx("path", {
1491
+ d: "M4.58333 9.16797C3.575 9.16797 2.75 9.99297 2.75 11.0013C2.75 12.0096 3.575 12.8346 4.58333 12.8346C5.59167 12.8346 6.41667 12.0096 6.41667 11.0013C6.41667 9.99297 5.59167 9.16797 4.58333 9.16797Z",
1492
+ fill: "#64748B"
1493
+ }), /*#__PURE__*/_jsx("path", {
1494
+ d: "M17.4168 9.16797C16.4085 9.16797 15.5835 9.99297 15.5835 11.0013C15.5835 12.0096 16.4085 12.8346 17.4168 12.8346C18.4252 12.8346 19.2502 12.0096 19.2502 11.0013C19.2502 9.99297 18.4252 9.16797 17.4168 9.16797Z",
1495
+ fill: "#64748B"
1496
+ }), /*#__PURE__*/_jsx("path", {
1497
+ d: "M10.9998 9.16797C9.9915 9.16797 9.1665 9.99297 9.1665 11.0013C9.1665 12.0096 9.9915 12.8346 10.9998 12.8346C12.0082 12.8346 12.8332 12.0096 12.8332 11.0013C12.8332 9.99297 12.0082 9.16797 10.9998 9.16797Z",
1498
+ fill: "#64748B"
1499
+ })]
1500
+ });
1501
+ export const PlusIcon = props => /*#__PURE__*/_jsxs("svg", {
1502
+ width: "12",
1503
+ height: "12",
1504
+ viewBox: "0 0 12 12",
1505
+ fill: "none",
1506
+ xmlns: "http://www.w3.org/2000/svg",
1507
+ children: [/*#__PURE__*/_jsx("path", {
1508
+ d: "M6 1.33331V10.6666",
1509
+ stroke: "#2563EB",
1510
+ strokeWidth: "1.4",
1511
+ strokeLinecap: "round",
1512
+ strokeLinejoin: "round"
1513
+ }), /*#__PURE__*/_jsx("path", {
1514
+ d: "M1.33203 6H10.6654",
1515
+ stroke: "#2563EB",
1516
+ strokeWidth: "1.4",
1517
+ strokeLinecap: "round",
1518
+ strokeLinejoin: "round"
1519
+ })]
1520
+ });
@@ -5,10 +5,6 @@ const TYPES = {
5
5
  "@": "mentions",
6
6
  "/": "elements"
7
7
  };
8
- const SHORTHAND_MATCHES = {
9
- mentions: new RegExp(/^@(\w+)$/),
10
- elements: new RegExp(/^\/(\w+)$/)
11
- };
12
8
  const getStartEnd = ({
13
9
  selection,
14
10
  editor
@@ -59,28 +55,6 @@ const getStartEnd = ({
59
55
  };
60
56
  }
61
57
  };
62
- const getRegexCategories = beforeText => {
63
- try {
64
- if (beforeText) {
65
- if (beforeText.match(SHORTHAND_MATCHES.mentions)) {
66
- return {
67
- type: "mentions",
68
- beforeMatch: beforeText.match(SHORTHAND_MATCHES.mentions)
69
- };
70
- } else if (beforeText.match(SHORTHAND_MATCHES.elements)) {
71
- return {
72
- type: "elements",
73
- beforeMatch: beforeText.match(SHORTHAND_MATCHES.elements)
74
- };
75
- }
76
- } else {
77
- return null;
78
- }
79
- } catch (err) {
80
- console.log(err);
81
- return null;
82
- }
83
- };
84
58
  const useMentions = props => {
85
59
  const {
86
60
  editor,
@@ -28,14 +28,18 @@ export const createEmbedNode = (type, {
28
28
  }
29
29
  });
30
30
  export const insertEmbed = (editor, embedData, format) => {
31
- const {
32
- url,
33
- images
34
- } = embedData;
35
- if (!url && images.length === 0) return;
36
- const embed = createEmbedNode(format, embedData);
37
- Transforms.insertNodes(editor, embed, {
38
- at: editor.selection.anchor.path
39
- });
40
- insertNewLine(editor);
31
+ try {
32
+ const {
33
+ url,
34
+ images
35
+ } = embedData;
36
+ if (!url && images.length === 0) return;
37
+ const embed = createEmbedNode(format, embedData);
38
+ Transforms.insertNodes(editor, embed, {
39
+ at: editor.selection.anchor.path
40
+ });
41
+ insertNewLine(editor);
42
+ } catch (err) {
43
+ console.log(err);
44
+ }
41
45
  };
@@ -1,6 +1,5 @@
1
1
  import { Transforms } from "slate";
2
2
  export const insertEmoji = (editor, emoji, position) => {
3
- console.log(editor.selection);
4
3
  Transforms.insertText(editor, emoji, {
5
4
  at: position,
6
5
  select: true
@@ -17,6 +17,7 @@ export const insertForm = (editor, item) => {
17
17
  bottom: 12
18
18
  }
19
19
  },
20
+ workflow: [],
20
21
  children: [{
21
22
  ...formField()
22
23
  }]
@@ -2,19 +2,73 @@ import { Editor, Transforms, Path, Range, Element } from "slate";
2
2
  export const createAppHeaderNode = ({
3
3
  menus
4
4
  }) => ({
5
- type: "app-header",
6
- appTitle: "Title",
7
- appLogo: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1200px-Netflix_2015_logo.svg.png",
8
- menus: !menus ? [{
9
- type: "menu",
10
- url: "https://www.google.com",
11
- target: "_blank",
12
- text: "Google"
13
- }] : menus,
14
- menuStyle: "stacked",
5
+ type: "grid",
6
+ grid: "container",
15
7
  children: [{
16
- text: ""
17
- }]
8
+ type: "grid-item",
9
+ grid: 12,
10
+ children: [{
11
+ type: "app-header",
12
+ appTitle: "Logo",
13
+ appLogo: "none",
14
+ menus: menus || [{
15
+ type: "menu",
16
+ url: "/",
17
+ target: "_blank",
18
+ text: "Home"
19
+ }, {
20
+ type: "menu",
21
+ url: "/wireframe2",
22
+ target: "_blank",
23
+ text: "Wireframe"
24
+ }, {
25
+ type: "menu",
26
+ url: "https://www.google.com",
27
+ target: "_blank",
28
+ text: "Work"
29
+ }, {
30
+ type: "menu",
31
+ url: "https://www.google.com",
32
+ target: "_blank",
33
+ text: "Contact"
34
+ }],
35
+ menuStyle: "stacked",
36
+ children: [{
37
+ text: " "
38
+ }],
39
+ logoFontSize: "32px",
40
+ titleFontFamily: "PoppinsBold",
41
+ bgColor: "rgb(255, 255, 255, 0)",
42
+ borderColor: "rgba(255, 255, 255, 0)",
43
+ textColor: "rgb(0, 0, 0)",
44
+ cellBgColor: "#FFFFFF"
45
+ }],
46
+ bgColor: "rgba(255, 255, 255, 0)",
47
+ lockSpacing: true,
48
+ bannerSpacing: {
49
+ top: "8",
50
+ left: "8",
51
+ right: "8",
52
+ bottom: "8"
53
+ },
54
+ alignment: {
55
+ horizantal: "center"
56
+ }
57
+ }],
58
+ alignment: {
59
+ flexDirection: "column"
60
+ },
61
+ lockSpacing: true,
62
+ bannerSpacing: {
63
+ top: "8",
64
+ left: "8",
65
+ right: "8",
66
+ bottom: "8"
67
+ },
68
+ size: {
69
+ widthInPercent: 100
70
+ },
71
+ bgColor: "rgba(255, 255, 255, 1)"
18
72
  });
19
73
  export const insertAppHeader = (editor, props) => {
20
74
  try {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.6.6",
3
+ "version": "1.6.7",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -22,6 +22,7 @@
22
22
  "@testing-library/jest-dom": "^5.16.5",
23
23
  "@testing-library/react": "^13.4.0",
24
24
  "@testing-library/user-event": "^13.5.0",
25
+ "animate.css": "^4.1.1",
25
26
  "emoji-mart": "^5.5.2",
26
27
  "html2canvas": "^1.4.1",
27
28
  "husky": "^8.0.3",