@flozy/editor 1.4.5 → 1.4.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. package/dist/Editor/CommonEditor.js +4 -0
  2. package/dist/Editor/Elements/Button/EditorButton.js +9 -5
  3. package/dist/Editor/Elements/ChipText/ChipText.js +79 -9
  4. package/dist/Editor/Elements/ChipText/ChipTextButton.js +11 -50
  5. package/dist/Editor/Elements/Color Picker/ColorPicker.js +25 -85
  6. package/dist/Editor/Elements/Embed/Embed.css +53 -5
  7. package/dist/Editor/Elements/Embed/link.js +58 -0
  8. package/dist/Editor/Elements/Form/Form.js +87 -37
  9. package/dist/Editor/Elements/Form/FormElements/FormText.js +13 -4
  10. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +13 -5
  11. package/dist/Editor/Elements/Grid/GridItem.js +9 -3
  12. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +54 -0
  13. package/dist/Editor/Elements/InlineIcon/InlineIconButton.js +69 -0
  14. package/dist/Editor/Elements/InlineIcon/InlineIconPopup.js +24 -0
  15. package/dist/Editor/Elements/Link/Link.js +24 -0
  16. package/dist/Editor/Toolbar/Toolbar.js +6 -0
  17. package/dist/Editor/Toolbar/toolbarGroups.js +7 -1
  18. package/dist/Editor/common/ColorPickerButton.js +12 -2
  19. package/dist/Editor/common/StyleBuilder/buttonStyle.js +29 -2
  20. package/dist/Editor/common/StyleBuilder/chipTextStyle.js +24 -0
  21. package/dist/Editor/common/StyleBuilder/fieldStyle.js +30 -2
  22. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +1 -1
  23. package/dist/Editor/common/StyleBuilder/formButtonStyle.js +5 -0
  24. package/dist/Editor/common/StyleBuilder/formStyle.js +62 -2
  25. package/dist/Editor/hooks/withCommon.js +2 -0
  26. package/dist/Editor/plugins/withLinks.js +1 -1
  27. package/dist/Editor/utils/SlateUtilityFunctions.js +18 -0
  28. package/dist/Editor/utils/embed.js +22 -2
  29. package/dist/Editor/utils/insertChipText.js +1 -1
  30. package/dist/Editor/utils/insertIconText.js +50 -0
  31. package/package.json +2 -1
@@ -1,3 +1,5 @@
1
+ import { fontOptions } from "../../utils/font";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
1
3
  const formStyle = [{
2
4
  tab: "General",
3
5
  value: "general",
@@ -16,6 +18,37 @@ const formStyle = [{
16
18
  type: "selectBox",
17
19
  placeholder: "Save Response"
18
20
  }]
21
+ }, {
22
+ tab: "Form Title",
23
+ value: "formTitle",
24
+ fields: [{
25
+ label: "Title",
26
+ key: "formTitle",
27
+ type: "text"
28
+ }, {
29
+ label: "Font Size",
30
+ key: "textSize",
31
+ type: "text",
32
+ placeholder: "16px or 1em"
33
+ }, {
34
+ label: "Font Family",
35
+ key: "fontFamily",
36
+ type: "textOptions",
37
+ options: fontOptions,
38
+ renderOption: option => {
39
+ return /*#__PURE__*/_jsx("span", {
40
+ style: {
41
+ fontFamily: option.value
42
+ },
43
+ children: option.text
44
+ });
45
+ }
46
+ }, {
47
+ label: "Text Align",
48
+ key: "textAlign",
49
+ type: "textAlign",
50
+ placeholder: "16px or 1em"
51
+ }]
19
52
  }, {
20
53
  tab: "Banner Spacing",
21
54
  value: "bannerSpacing",
@@ -25,12 +58,39 @@ const formStyle = [{
25
58
  type: "bannerSpacing"
26
59
  }]
27
60
  }, {
28
- tab: "Border Radius",
29
- value: "borderRadius",
61
+ tab: "Border",
62
+ value: "border",
30
63
  fields: [{
31
64
  label: "Border Radius",
32
65
  key: "borderRadius",
33
66
  type: "borderRadius"
67
+ }, {
68
+ label: "Border Width",
69
+ key: "borderWidth",
70
+ type: "text",
71
+ placeholder: "1px"
72
+ }, {
73
+ label: "Border Style",
74
+ key: "borderStyle",
75
+ type: "textOptions",
76
+ options: [{
77
+ text: "Solid",
78
+ value: "solid"
79
+ }, {
80
+ text: "Dotted",
81
+ value: "dotted"
82
+ }, {
83
+ text: "Dashed",
84
+ value: "dashed"
85
+ }],
86
+ renderOption: option => {
87
+ return /*#__PURE__*/_jsx("span", {
88
+ style: {
89
+ fontFamily: option.value
90
+ },
91
+ children: option.text
92
+ });
93
+ }
34
94
  }]
35
95
  }, {
36
96
  tab: "Colors",
@@ -6,6 +6,8 @@ import withEmbeds from "../plugins/withEmbeds";
6
6
  import withEquation from "../plugins/withEquation";
7
7
  import withMentions from "../plugins/withMentions";
8
8
  import withLayout from "../plugins/withLayout";
9
+ // import { withLinkify } from '@mercuriya/slate-linkify';
10
+
9
11
  const withCommon = (props, rest = {}) => {
10
12
  return rest.needLayout ? withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))))) : withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))));
11
13
  };
@@ -1,5 +1,5 @@
1
1
  import { Transforms, Element, Node } from "slate";
2
- const INLINE_ELLEMENTS = ["link", "chip-text", "drawer"];
2
+ const INLINE_ELLEMENTS = ["link", "chip-text", "drawer", "icon-text"];
3
3
  const withLinks = editor => {
4
4
  const {
5
5
  isInline,
@@ -28,6 +28,8 @@ import PageSettings from "../Elements/PageSettings/PageSettings";
28
28
  import Title from "../Elements/Title/title";
29
29
  import Form from "../Elements/Form/Form";
30
30
  import FormField from "../Elements/Form/FormField";
31
+ import InlineIcon from "../Elements/InlineIcon/InlineIcon";
32
+ import EmbedLink from "../Elements/Embed/link";
31
33
  import { jsx as _jsx } from "react/jsx-runtime";
32
34
  const alignment = ["alignLeft", "alignRight", "alignCenter"];
33
35
  const list_types = ["orderedList", "unorderedList"];
@@ -379,6 +381,14 @@ export const getBlock = props => {
379
381
  return /*#__PURE__*/_jsx(FormField, {
380
382
  ...props
381
383
  });
384
+ case "icon-text":
385
+ return /*#__PURE__*/_jsx(InlineIcon, {
386
+ ...props
387
+ });
388
+ case "embed":
389
+ return /*#__PURE__*/_jsx(EmbedLink, {
390
+ ...props
391
+ });
382
392
  default:
383
393
  return /*#__PURE__*/_jsx("div", {
384
394
  ...element.attr,
@@ -386,4 +396,12 @@ export const getBlock = props => {
386
396
  children: children
387
397
  });
388
398
  }
399
+ };
400
+ export const getQueryStrings = urlString => {
401
+ const newUrl = new URL(urlString);
402
+ var youCode = newUrl.searchParams.get("v");
403
+ if (!youCode) {
404
+ youCode = newUrl.pathname.replace("/", "");
405
+ }
406
+ return `https://www.youtube.com/embed/${youCode}`;
389
407
  };
@@ -1,4 +1,4 @@
1
- import { Transforms } from "slate";
1
+ import { Editor, Transforms } from "slate";
2
2
  import { createParagraph } from "./paragraph";
3
3
  export const createEmbedNode = (type, {
4
4
  url,
@@ -16,9 +16,29 @@ export const insertEmbed = (editor, embedData, format) => {
16
16
  url
17
17
  } = embedData;
18
18
  if (!url) return;
19
+ const {
20
+ selection
21
+ } = editor;
22
+ if (!selection?.focus?.path) return;
23
+ const [parent, parentPath] = Editor.parent(editor, selection?.focus?.path);
19
24
  const embed = createEmbedNode(format, embedData);
25
+ let removePath = parentPath;
26
+ let parentPosition = parentPath;
27
+ if (parentPath?.length - 1 > 0) {
28
+ removePath = parentPath.slice(0, parentPath?.length - 1);
29
+ parentPosition = parentPath.slice(0, parentPath?.length - 1);
30
+ }
31
+ removePath = removePath.map((elem, i) => {
32
+ if (i === removePath.length - 1) {
33
+ return elem + 1;
34
+ }
35
+ return elem;
36
+ });
20
37
  Transforms.insertNodes(editor, embed, {
21
- select: true
38
+ at: parentPosition
39
+ });
40
+ Transforms.unwrapNodes(editor, {
41
+ at: [...removePath]
22
42
  });
23
43
  Transforms.insertNodes(editor, createParagraph(""));
24
44
  };
@@ -14,7 +14,7 @@ export const insertChipText = (editor, {
14
14
  const {
15
15
  selection
16
16
  } = editor;
17
- const chipText = createChipTextNode(url, showInNewTab, "Chip Text");
17
+ const chipText = createChipTextNode(url, showInNewTab, " ");
18
18
  if (!!selection) {
19
19
  const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
20
20
  if (editor.isVoid(parent)) {
@@ -0,0 +1,50 @@
1
+ import { Editor, Transforms, Path, Range, Element } from "slate";
2
+ export const createIconTextNode = (href, showInNewTab, text) => ({
3
+ type: "icon-text",
4
+ href,
5
+ icon: "Check",
6
+ target: showInNewTab ? "_blank" : "_self",
7
+ children: [{
8
+ text
9
+ }]
10
+ });
11
+ export const insertIconText = (editor, {
12
+ url,
13
+ showInNewTab
14
+ }) => {
15
+ const {
16
+ selection
17
+ } = editor;
18
+ const chipText = createIconTextNode(url, showInNewTab, "");
19
+ if (!!selection) {
20
+ const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
21
+ if (editor.isVoid(parent)) {
22
+ Transforms.insertNodes(editor, {
23
+ type: "paragraph",
24
+ children: [chipText]
25
+ }, {
26
+ at: Path.next(parentPath),
27
+ select: true
28
+ });
29
+ } else if (Range.isCollapsed(selection)) {
30
+ Transforms.insertNodes(editor, chipText, {
31
+ select: true
32
+ });
33
+ } else {
34
+ Transforms.wrapNodes(editor, chipText, {
35
+ split: true
36
+ });
37
+ }
38
+ } else {
39
+ Transforms.insertNodes(editor, {
40
+ type: "paragraph",
41
+ children: [chipText]
42
+ });
43
+ }
44
+ };
45
+ export const removeIconText = (editor, path) => {
46
+ Transforms.unwrapNodes(editor, {
47
+ at: path,
48
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "icon-text"
49
+ });
50
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.4.5",
3
+ "version": "1.4.7",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -27,6 +27,7 @@
27
27
  "prettier": "^3.0.1",
28
28
  "react-best-gradient-color-picker": "^2.2.23",
29
29
  "react-datepicker": "^4.18.0",
30
+ "react-gcolor-picker": "^1.3.1",
30
31
  "react-icons": "^4.10.1",
31
32
  "react-katex": "^3.0.1",
32
33
  "react-scripts": "5.0.1",