@flozy/editor 1.3.5 → 1.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. package/dist/Editor/CommonEditor.js +4 -2
  2. package/dist/Editor/Editor.css +64 -20
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +41 -13
  4. package/dist/Editor/Elements/Button/ButtonPopup.js +5 -3
  5. package/dist/Editor/Elements/Button/EditorButton.js +29 -6
  6. package/dist/Editor/Elements/Embed/Image.js +5 -21
  7. package/dist/Editor/Elements/Embed/Video.js +2 -2
  8. package/dist/Editor/Elements/Form/FieldPopup.js +20 -0
  9. package/dist/Editor/Elements/Form/Form.js +289 -0
  10. package/dist/Editor/Elements/Form/FormButton.js +21 -0
  11. package/dist/Editor/Elements/Form/FormElements/FormText.js +48 -0
  12. package/dist/Editor/Elements/Form/FormElements/index.js +5 -0
  13. package/dist/Editor/Elements/Form/FormField.js +101 -0
  14. package/dist/Editor/Elements/Form/FormPopup.js +20 -0
  15. package/dist/Editor/Elements/Grid/Grid.js +6 -8
  16. package/dist/Editor/Elements/Grid/GridItem.js +6 -13
  17. package/dist/Editor/Elements/Grid/GridItemPopup.js +4 -2
  18. package/dist/Editor/Elements/Grid/GridPopup.js +3 -1
  19. package/dist/Editor/Toolbar/PopupTool/index.js +3 -0
  20. package/dist/Editor/Toolbar/Toolbar.js +6 -0
  21. package/dist/Editor/Toolbar/toolbarGroups.js +3 -0
  22. package/dist/Editor/assets/fonts/poppins/OFL.txt +93 -0
  23. package/dist/Editor/assets/fonts/poppins/Poppins-Black.ttf +0 -0
  24. package/dist/Editor/assets/fonts/poppins/Poppins-BlackItalic.ttf +0 -0
  25. package/dist/Editor/assets/fonts/poppins/Poppins-Bold.ttf +0 -0
  26. package/dist/Editor/assets/fonts/poppins/Poppins-BoldItalic.ttf +0 -0
  27. package/dist/Editor/assets/fonts/poppins/Poppins-ExtraBold.ttf +0 -0
  28. package/dist/Editor/assets/fonts/poppins/Poppins-ExtraBoldItalic.ttf +0 -0
  29. package/dist/Editor/assets/fonts/poppins/Poppins-ExtraLight.ttf +0 -0
  30. package/dist/Editor/assets/fonts/poppins/Poppins-ExtraLightItalic.ttf +0 -0
  31. package/dist/Editor/assets/fonts/poppins/Poppins-Italic.ttf +0 -0
  32. package/dist/Editor/assets/fonts/poppins/Poppins-Light.ttf +0 -0
  33. package/dist/Editor/assets/fonts/poppins/Poppins-LightItalic.ttf +0 -0
  34. package/dist/Editor/assets/fonts/poppins/Poppins-Medium.ttf +0 -0
  35. package/dist/Editor/assets/fonts/poppins/Poppins-MediumItalic.ttf +0 -0
  36. package/dist/Editor/assets/fonts/poppins/Poppins-Regular.ttf +0 -0
  37. package/dist/Editor/assets/fonts/poppins/Poppins-SemiBold.ttf +0 -0
  38. package/dist/Editor/assets/fonts/poppins/Poppins-SemiBoldItalic.ttf +0 -0
  39. package/dist/Editor/assets/fonts/poppins/Poppins-Thin.ttf +0 -0
  40. package/dist/Editor/assets/fonts/poppins/Poppins-ThinItalic.ttf +0 -0
  41. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +26 -5
  42. package/dist/Editor/common/StyleBuilder/buttonStyle.js +35 -8
  43. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +12 -12
  44. package/dist/Editor/common/StyleBuilder/fieldStyle.js +71 -0
  45. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -1
  46. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +5 -1
  47. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +15 -9
  48. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +35 -0
  49. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +44 -0
  50. package/dist/Editor/common/StyleBuilder/formButtonStyle.js +93 -0
  51. package/dist/Editor/common/StyleBuilder/formStyle.js +82 -0
  52. package/dist/Editor/common/StyleBuilder/gridStyle.js +9 -0
  53. package/dist/Editor/font.css +9 -0
  54. package/dist/Editor/service/formSubmit.js +16 -0
  55. package/dist/Editor/utils/SlateUtilityFunctions.js +11 -1
  56. package/dist/Editor/utils/customHooks/useFormat.js +11 -4
  57. package/dist/Editor/utils/font.js +3 -1
  58. package/dist/Editor/utils/form.js +24 -0
  59. package/dist/Editor/utils/formfield.js +20 -0
  60. package/package.json +1 -1
@@ -0,0 +1,82 @@
1
+ const formStyle = [{
2
+ tab: "General",
3
+ value: "general",
4
+ fields: [{
5
+ label: "Form Name",
6
+ key: "formName",
7
+ type: "text"
8
+ }, {
9
+ label: "Send Form to Email",
10
+ key: "email",
11
+ type: "text",
12
+ placeholder: "Enter Email to send the response..."
13
+ }, {
14
+ label: "Save Response",
15
+ key: "saveResponse",
16
+ type: "selectBox",
17
+ placeholder: "Save Response"
18
+ }]
19
+ }, {
20
+ tab: "Banner Spacing",
21
+ value: "bannerSpacing",
22
+ fields: [{
23
+ label: "Banner Spacing",
24
+ key: "bannerSpacing",
25
+ type: "bannerSpacing"
26
+ }]
27
+ }, {
28
+ tab: "Border Radius",
29
+ value: "borderRadius",
30
+ fields: [{
31
+ label: "Border Radius",
32
+ key: "borderRadius",
33
+ type: "borderRadius"
34
+ }]
35
+ }, {
36
+ tab: "Colors",
37
+ value: "colors",
38
+ fields: [{
39
+ label: "Text",
40
+ key: "textColor",
41
+ type: "color",
42
+ needPreview: true
43
+ }, {
44
+ label: "Background",
45
+ key: "bgColor",
46
+ type: "color"
47
+ }, {
48
+ label: "Border",
49
+ key: "borderColor",
50
+ type: "color"
51
+ }]
52
+ }, {
53
+ tab: "Position",
54
+ value: "position",
55
+ fields: [{
56
+ label: "Set Postion (Vertical & Horizantal)",
57
+ key: "alignment",
58
+ type: "alignment"
59
+ }]
60
+ }, {
61
+ tab: "Background",
62
+ value: "backgroundImage",
63
+ fields: [{
64
+ label: "URL",
65
+ key: "backgroundImage",
66
+ type: "text"
67
+ }, {
68
+ label: "Background Image",
69
+ key: "backgroundImage",
70
+ type: "backgroundImage"
71
+ }]
72
+ }, {
73
+ tab: "Save As Template",
74
+ value: "saveAsTemplate",
75
+ needActions: false,
76
+ fields: [{
77
+ label: "Template Image",
78
+ key: "saveAsTemplate",
79
+ type: "saveAsTemplate"
80
+ }]
81
+ }];
82
+ export default formStyle;
@@ -1,4 +1,13 @@
1
1
  const gridStyle = [{
2
+ tab: "General",
3
+ value: "general",
4
+ fields: [{
5
+ label: "Section ID",
6
+ key: "id",
7
+ type: "text",
8
+ placeholder: "Id should be unique for the page..."
9
+ }]
10
+ }, {
2
11
  tab: "Banner Spacing",
3
12
  value: "bannerSpacing",
4
13
  fields: [{
@@ -0,0 +1,9 @@
1
+ @font-face {
2
+ font-family: 'PoppinsRegular';
3
+ src: url('./assets/fonts/poppins/Poppins-Regular.ttf');
4
+ }
5
+
6
+ @font-face {
7
+ font-family: 'PoppinsBold';
8
+ src: url('./assets/fonts/poppins/Poppins-Bold.ttf');
9
+ }
@@ -0,0 +1,16 @@
1
+ export const formSubmit = async (formData, props) => {
2
+ try {
3
+ const response = await fetch(`${props.PAGES_API_HOST}/form/submit`, {
4
+ method: "POST",
5
+ headers: {
6
+ "Content-Type": "application/json"
7
+ },
8
+ body: JSON.stringify(formData)
9
+ });
10
+ const result = await response.json();
11
+ return result.data;
12
+ } catch (err) {
13
+ console.log(err);
14
+ return err;
15
+ }
16
+ };
@@ -26,6 +26,8 @@ import DrawerMenu from "../Elements/DrawerMenu/DrawerMenu";
26
26
  import AppHeader from "../Elements/AppHeader/AppHeader";
27
27
  import PageSettings from "../Elements/PageSettings/PageSettings";
28
28
  import Title from "../Elements/Title/title";
29
+ import Form from "../Elements/Form/Form";
30
+ import FormField from "../Elements/Form/FormField";
29
31
  import { jsx as _jsx } from "react/jsx-runtime";
30
32
  const alignment = ["alignLeft", "alignRight", "alignCenter"];
31
33
  const list_types = ["orderedList", "unorderedList"];
@@ -97,7 +99,7 @@ export const activeMark = (editor, format) => {
97
99
  color: "#000000",
98
100
  bgColor: "#FFFFFF",
99
101
  fontSize: "normal",
100
- fontFamily: "sans"
102
+ fontFamily: "PoppinsRegular"
101
103
  };
102
104
  try {
103
105
  const marks = Editor.marks(editor);
@@ -369,6 +371,14 @@ export const getBlock = props => {
369
371
  return /*#__PURE__*/_jsx(Title, {
370
372
  ...props
371
373
  });
374
+ case "form":
375
+ return /*#__PURE__*/_jsx(Form, {
376
+ ...props
377
+ });
378
+ case "form-field":
379
+ return /*#__PURE__*/_jsx(FormField, {
380
+ ...props
381
+ });
372
382
  default:
373
383
  return /*#__PURE__*/_jsx("div", {
374
384
  ...element.attr,
@@ -1,16 +1,23 @@
1
- import { useEffect, useState } from 'react';
2
- import { Editor, Element } from 'slate';
1
+ import { useEffect, useState } from "react";
2
+ import { Editor, Element } from "slate";
3
3
 
4
4
  // This hook returns if the node in the current selection matches the format passed to it.
5
5
  const useFormat = (editor, format) => {
6
6
  const [isFormat, setIsFormat] = useState(false);
7
+ const matchFormat = n => {
8
+ if (format) {
9
+ return n.type === format;
10
+ } else {
11
+ return true;
12
+ }
13
+ };
7
14
  useEffect(() => {
8
15
  if (editor.selection) {
9
16
  // It matches at the editor.selection location by default, so if null handle it seperately.
10
17
  const [node] = Editor.nodes(editor, {
11
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === format
18
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && matchFormat(n)
12
19
  });
13
- setIsFormat(!!node);
20
+ setIsFormat(format ? !!node : node);
14
21
  } else {
15
22
  setIsFormat(false);
16
23
  }
@@ -5,6 +5,8 @@ export const sizeMap = {
5
5
  huge: "40px"
6
6
  };
7
7
  export const fontFamilyMap = {
8
+ PoppinsRegular: "PoppinsRegular",
9
+ PoppinsBold: "PoppinsBold",
8
10
  sans: "Helvetica,Arial, sans serif",
9
11
  serif: "Georgia, Times New Roaman,serif",
10
12
  monospace: "Monaco, Courier New,monospace",
@@ -29,7 +31,7 @@ export const fontFamilyMap = {
29
31
  pinyon: "'Pinyon Script', cursive",
30
32
  muellerhoff: "'Herr Von Muellerhoff', cursive",
31
33
  dawning: "'Dawning of a New Day', cursive",
32
- //New Font Added for Type Signature
34
+ // New Font Added for Type Signature
33
35
  comingsoon: "'Coming Soon', cursive",
34
36
  dancingScript: "'Dancing Script', cursive",
35
37
  engagement: "'Engagement', cursive",
@@ -0,0 +1,24 @@
1
+ import { Transforms } from "slate";
2
+ import { formField } from "./formfield";
3
+ export const insertForm = (editor, item) => {
4
+ const grid = !item ? {
5
+ type: "form",
6
+ grid: "container",
7
+ formName: `form_${new Date().getTime()}`,
8
+ props: {
9
+ onSubmit: null
10
+ },
11
+ children: [{
12
+ ...formField()
13
+ }, {
14
+ text: ""
15
+ }]
16
+ } : item;
17
+ const {
18
+ selection
19
+ } = editor;
20
+ Transforms.insertNodes(editor, grid, {
21
+ at: selection.focus.path
22
+ });
23
+ Transforms.move(editor);
24
+ };
@@ -0,0 +1,20 @@
1
+ import { Transforms } from "slate";
2
+ export const formField = () => {
3
+ return {
4
+ type: "form-field",
5
+ grid: 6,
6
+ element: "text",
7
+ name: `field_${new Date().getTime()}`,
8
+ placeholder: "Placeholder...",
9
+ children: [{
10
+ text: ""
11
+ }],
12
+ bgColor: "rgba(255, 255, 255, 0)"
13
+ };
14
+ };
15
+ export const insertGridItem = editor => {
16
+ Transforms.insertNodes(editor, {
17
+ ...formField()
18
+ });
19
+ Transforms.move(editor);
20
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.3.5",
3
+ "version": "1.4.0",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"