@studiocms/wysiwyg 0.1.0-beta.24

package/dist/common/editor-utils.js

@@ -0,0 +1,217 @@
+import { toast } from "@studiocms/ui/components/Toast/toast.js";
+import { CSRF_HEADER_NAME, STORE_ENDPOINT_PATH } from "../consts.js";
+import { firstUpperCase, parse } from "../lib/utils.js";
+const generateHTML = async (editor) => {
+  const page = editor.Pages.getMain();
+  const component = page.getMainComponent();
+  const htmlData = component.toHTML({ tag: "div" });
+  const styles = editor.getCss({ component })?.replaceAll("body", "div");
+  const html = `${htmlData}${styles ? `<style>${styles}</style>` : ""}`;
+  return html;
+};
+const updateSaveIndicator = (editor) => {
+  const saveIndicator = document.querySelector(".save-indicator");
+  if (saveIndicator && editor.getDirtyCount() === 0) {
+    saveIndicator.classList.remove("dirty");
+  }
+};
+const StudioCMSDbStorageAdapter = (editor, opts) => {
+  editor.Storage.add("db", {
+    async load() {
+      const urlToFetch = new URL(STORE_ENDPOINT_PATH, window.location.origin);
+      urlToFetch.searchParams.set("projectId", opts.projectId);
+      const toastProps = {
+        title: "WYSIWYG: Error loading page",
+        description: "There was an error loading your page. Fallback data loaded...",
+        type: "warning",
+        duration: 3e3
+      };
+      try {
+        const data = await fetch(urlToFetch, {
+          method: "GET",
+          credentials: "same-origin",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            [CSRF_HEADER_NAME]: opts.csrfToken
+          }
+        });
+        if (!data.ok) {
+          toast(toastProps);
+          return opts.projectData;
+        }
+        const json = await data.json();
+        const responseData = json?.data;
+        if (!responseData) {
+          toast(toastProps);
+          return opts.projectData;
+        }
+        return responseData;
+      } catch (error) {
+        console.error("Error loading project data:", error);
+        toast(toastProps);
+        return opts.projectData;
+      }
+    },
+    async store(data) {
+      const urlToFetch = new URL(STORE_ENDPOINT_PATH, window.location.origin);
+      const projectData = {
+        ...data,
+        __STUDIOCMS_HTML: await generateHTML(editor)
+      };
+      const toastProps = {
+        title: "WYSIWYG: Error saving page",
+        description: "There was an error saving your changes. Only saving fallback data...",
+        type: "danger",
+        duration: 3e3
+      };
+      try {
+        const response = await fetch(urlToFetch, {
+          method: "POST",
+          credentials: "same-origin",
+          body: JSON.stringify({ projectId: opts.projectId, data: projectData }),
+          headers: {
+            "Content-Type": "application/json",
+            [CSRF_HEADER_NAME]: opts.csrfToken
+          }
+        });
+        if (!response.ok) {
+          toast(toastProps);
+          opts.pageContent.innerText = JSON.stringify(projectData);
+          return;
+        }
+        opts.pageContent.innerText = JSON.stringify(projectData);
+        updateSaveIndicator(editor);
+      } catch (error) {
+        console.error("Error saving project data:", error);
+        toast(toastProps);
+        opts.pageContent.innerText = JSON.stringify(projectData);
+      }
+    }
+  });
+};
+function traitReducer(acc, trait) {
+  if (!trait.name) return acc;
+  let value = trait.default;
+  if (trait.type === "number") {
+    value = Number(trait.value !== "" ? trait.value : trait.default);
+  } else {
+    value = trait.value !== "" ? trait.value : trait.default;
+  }
+  acc[trait.name] = value;
+  return acc;
+}
+const getTraitData = (model) => {
+  const traitData = model.traits.toJSON();
+  const propsData = traitData.reduce(traitReducer, {});
+  return propsData;
+};
+const getSlotData = (model) => {
+  const children = model.components().toArray();
+  let slotData;
+  if (children.length > 0) {
+    slotData = children.map((child) => child.toHTML()).join("");
+  }
+  return slotData;
+};
+const traitTypeFilter = (type) => {
+  switch (type) {
+    case "number":
+      return "number";
+    default:
+      return "text";
+  }
+};
+const traitMapFn = (prop) => ({
+  type: traitTypeFilter(prop.type),
+  name: prop.name,
+  default: prop.defaultValue
+});
+const partialRequestBuilder = (model) => {
+  return {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      componentKey: model.tagName,
+      props: getTraitData(model),
+      slot: getSlotData(model)
+    })
+  };
+};
+function getEditorElmData(document2, selectors) {
+  const container = document2.querySelector(selectors.container);
+  if (!container) {
+    throw new Error("GrapesJS container not found. Ensure the HTML structure is correct.");
+  }
+  const pageContent = document2.querySelector(
+    selectors.pageContent
+  );
+  if (!pageContent) {
+    throw new Error("Page content textarea not found. Ensure the HTML structure is correct.");
+  }
+  const componentRegistry = parse(
+    container.dataset.componentRegistry || "[]"
+  );
+  const projectId = container.dataset.pageId || "";
+  const csrfToken = container.dataset.wysiwygCsrfToken || "";
+  const fallbackPages = {
+    pages: [{ name: "page" }]
+  };
+  const projectData = parse(pageContent.innerText || JSON.stringify(fallbackPages));
+  return {
+    astroComponentsOpts: { componentRegistry },
+    StudioCMSDbStorageAdapterOpts: {
+      projectId,
+      projectData,
+      pageContent,
+      csrfToken
+    }
+  };
+}
+const commonBlockProps = {
+  category: "Astro Components",
+  select: true,
+  activate: true,
+  attributes: { class: "gjs-fonts gjs-f-b1" },
+  media: '<svg xmlns="http://www.w3.org/2000/svg" style="width:48px;height:48px" viewBox="0 0 24 24"><path fill="currentColor" d="M9.24 19.035c-.901-.826-1.164-2.561-.789-3.819c.65.793 1.552 1.044 2.486 1.186c1.44.218 2.856.137 4.195-.524c.153-.076.295-.177.462-.278c.126.365.159.734.115 1.11c-.107.915-.56 1.622-1.283 2.158c-.289.215-.594.406-.892.608c-.916.622-1.164 1.35-.82 2.41l.034.114a2.4 2.4 0 0 1-1.07-.918a2.6 2.6 0 0 1-.412-1.401c-.003-.248-.003-.497-.036-.74c-.081-.595-.36-.86-.883-.876a1.034 1.034 0 0 0-1.075.843q-.013.058-.033.126M4.1 15.007s2.666-1.303 5.34-1.303l2.016-6.26c.075-.304.296-.51.544-.51c.25 0 .47.206.545.51l2.016 6.26c3.167 0 5.34 1.303 5.34 1.303L15.363 2.602c-.13-.366-.35-.602-.645-.602H9.283c-.296 0-.506.236-.645.602c-.01.024-4.538 12.405-4.538 12.405"/></svg>'
+};
+function buildBlockProps(name) {
+  switch (name) {
+    case "cms-img": {
+      return {
+        ...commonBlockProps,
+        id: name,
+        label: `${firstUpperCase(name)}`,
+        content: {
+          style: { color: "black" },
+          type: "image"
+        }
+      };
+    }
+    default: {
+      return {
+        ...commonBlockProps,
+        id: name,
+        label: `${firstUpperCase(name)}`,
+        content: {
+          type: name,
+          tagName: name
+        }
+      };
+    }
+  }
+}
+export {
+  StudioCMSDbStorageAdapter,
+  buildBlockProps,
+  generateHTML,
+  getEditorElmData,
+  getSlotData,
+  getTraitData,
+  partialRequestBuilder,
+  traitMapFn,
+  traitReducer,
+  traitTypeFilter
+};

package/dist/common/grapesBlocks/blocks/basics.d.ts

@@ -0,0 +1,4 @@
+import type { Editor } from 'grapesjs';
+import type { RequiredGrapesBlocksOptions } from '../types.js';
+declare const _default: (editor: Editor, opts: RequiredGrapesBlocksOptions) => void;
+export default _default;

package/dist/common/grapesBlocks/blocks/basics.js

@@ -0,0 +1,279 @@
+import { AddBlocks } from "./index.js";
+var basics_default = (editor, opts) => {
+  const addBlock = AddBlocks(editor, opts);
+  const { stylePrefix, flexGrid, rowHeight, addBasicStyle } = opts;
+  const clsRow = `${stylePrefix}row`;
+  const clsCell = `${stylePrefix}cell`;
+  const styleRow = flexGrid ? `
+        .${clsRow} {
+          display: flex;
+          justify-content: flex-start;
+          align-items: stretch;
+          flex-wrap: nowrap;
+          padding: 10px;
+        }
+        @media (max-width: 768px) {
+          .${clsRow} {
+            flex-wrap: wrap;
+          }
+        }` : `
+        .${clsRow} {
+          display: table;
+          padding: 10px;
+          width: 100%;
+        }
+        @media (max-width: 768px) {
+          .${stylePrefix}cell, .${stylePrefix}cell30, .${stylePrefix}cell70 {
+            width: 100%;
+            display: block;
+          }
+        }`;
+  const styleClm = flexGrid ? `
+        .${clsCell} {
+          min-height: ${rowHeight}px;
+          flex-grow: 1;
+          flex-basis: 100%;
+        }` : `
+        .${clsCell} {
+          width: 8%;
+          display: table-cell;
+          height: ${rowHeight}px;
+        }`;
+  const styleClm30 = `
+      .${stylePrefix}cell30 {
+        width: 30%;
+      }`;
+  const styleClm70 = `
+      .${stylePrefix}cell70 {
+        width: 70%;
+      }`;
+  const step = 0.2;
+  const minDim = 1;
+  const currentUnit = 1;
+  const resizerBtm = {
+    tl: 0,
+    tc: 0,
+    tr: 0,
+    cl: 0,
+    cr: 0,
+    bl: 0,
+    br: 0,
+    minDim
+  };
+  const resizerRight = {
+    ...resizerBtm,
+    cr: 1,
+    bc: 0,
+    currentUnit,
+    minDim,
+    step
+  };
+  if (flexGrid) {
+    resizerRight.keyWidth = "flex-basis";
+  }
+  const rowAttr = {
+    class: clsRow,
+    "data-gjs-droppable": `.${clsCell}`,
+    "data-gjs-resizable": resizerBtm,
+    "data-gjs-name": "Row"
+  };
+  const colAttr = {
+    class: clsCell,
+    "data-gjs-draggable": `.${clsRow}`,
+    "data-gjs-resizable": resizerRight,
+    "data-gjs-name": "Cell"
+  };
+  if (flexGrid) {
+    colAttr["data-gjs-unstylable"] = ["width"];
+    colAttr["data-gjs-stylable-require"] = ["flex-basis"];
+  }
+  const privateCls = [`.${clsRow}`, `.${clsCell}`];
+  editor.on(
+    "selector:add",
+    (selector) => privateCls.indexOf(selector.getFullName()) >= 0 && selector.set("private", 1)
+  );
+  const attrsToString = (attrs) => {
+    const result = [];
+    for (const key in attrs) {
+      let value = attrs[key];
+      const toParse = Array.isArray(value) || value instanceof Object;
+      value = toParse ? JSON.stringify(value) : value;
+      result.push(`${key}=${toParse ? `'${value}'` : `"${value}"`}`);
+    }
+    return result.length ? ` ${result.join(" ")}` : "";
+  };
+  const attrsRow = attrsToString(rowAttr);
+  const attrsCell = attrsToString(colAttr);
+  const category = "Basic";
+  const commonBasicBlockProps = {
+    category,
+    select: true
+  };
+  addBlock("link-block", {
+    category,
+    label: "Link Block",
+    media: `<svg viewBox="0 0 24 24">
+      <path fill="currentColor" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"></path>
+    </svg>`,
+    content: {
+      type: "link",
+      editable: false,
+      droppable: true,
+      style: {
+        display: "inline-block",
+        padding: "5px",
+        "min-height": "50px",
+        "min-width": "50px"
+      }
+    }
+  });
+  addBlock("quote", {
+    category,
+    label: "Quote",
+    media: `<svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z" />
+    </svg>`,
+    content: `<blockquote class="quote">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit
+      </blockquote>`
+  });
+  addBlock("text-basic", {
+    category,
+    label: "Text section",
+    media: `<svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M21,6V8H3V6H21M3,18H12V16H3V18M3,13H21V11H3V13Z" />
+    </svg>`,
+    content: `<section class="bdg-sect">
+      <h1 class="heading">Insert title here</h1>
+      <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
+      </section>`
+  });
+  addBlock("column1", {
+    ...commonBasicBlockProps,
+    label: opts.labelColumn1,
+    media: `<svg viewBox="0 0 24 24">
+            <path fill="currentColor" d="M2 20h20V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1Z"/>
+          </svg>`,
+    content: `<div ${attrsRow}>
+            <div ${attrsCell}></div>
+          </div>
+          ${addBasicStyle ? `<style>
+              ${styleRow}
+              ${styleClm}
+            </style>` : ""}`
+  });
+  addBlock("column2", {
+    ...commonBasicBlockProps,
+    label: opts.labelColumn2,
+    media: `<svg viewBox="0 0 23 24">
+            <path fill="currentColor" d="M2 20h8V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM13 20h8V4h-8v16Zm-1 0V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1Z"/>
+          </svg>`,
+    content: `<div ${attrsRow}>
+            <div ${attrsCell}></div>
+            <div ${attrsCell}></div>
+          </div>
+          ${addBasicStyle ? `<style>
+              ${styleRow}
+              ${styleClm}
+            </style>` : ""}`
+  });
+  addBlock("column3", {
+    ...commonBasicBlockProps,
+    label: opts.labelColumn3,
+    media: `<svg viewBox="0 0 23 24">
+            <path fill="currentColor" d="M2 20h4V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM17 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1ZM9.5 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z"/>
+          </svg>`,
+    content: `<div ${attrsRow}>
+            <div ${attrsCell}></div>
+            <div ${attrsCell}></div>
+            <div ${attrsCell}></div>
+          </div>
+          ${addBasicStyle ? `<style>
+              ${styleRow}
+              ${styleClm}
+            </style>` : ""}`
+  });
+  addBlock("column3-7", {
+    ...commonBasicBlockProps,
+    label: opts.labelColumn37,
+    media: `<svg viewBox="0 0 24 24">
+            <path fill="currentColor" d="M2 20h5V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM10 20h12V4H10v16Zm-1 0V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1Z"/>
+          </svg>`,
+    content: `<div ${attrsRow}>
+            <div ${attrsCell} style='${flexGrid ? "flex-basis" : "width"}: 30%;'></div>
+            <div ${attrsCell} style='${flexGrid ? "flex-basis" : "width"}: 70%;'></div>
+          </div>
+          ${addBasicStyle ? `<style>
+              ${styleRow}
+              ${styleClm}
+              ${styleClm30}
+              ${styleClm70}
+            </style>` : ""}`
+  });
+  addBlock("text", {
+    ...commonBasicBlockProps,
+    activate: true,
+    label: opts.labelText,
+    media: `<svg viewBox="0 0 24 24">
+            <path fill="currentColor" d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" />
+          </svg>`,
+    content: {
+      type: "text",
+      content: "Insert your text here",
+      style: { padding: "10px" }
+    }
+  });
+  addBlock("link", {
+    ...commonBasicBlockProps,
+    label: opts.labelLink,
+    media: `<svg viewBox="0 0 24 24">
+            <path fill="currentColor" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z" />
+          </svg>`,
+    content: {
+      type: "link",
+      content: "Link",
+      style: { color: "#d983a6" }
+    }
+  });
+  addBlock("image", {
+    ...commonBasicBlockProps,
+    activate: true,
+    label: opts.labelImage,
+    media: `<svg viewBox="0 0 24 24">
+            <path fill="currentColor" d="M21,3H3C2,3 1,4 1,5V19A2,2 0 0,0 3,21H21C22,21 23,20 23,19V5C23,4 22,3 21,3M5,17L8.5,12.5L11,15.5L14.5,11L19,17H5Z" />
+          </svg>`,
+    content: {
+      style: { color: "black" },
+      type: "image"
+    }
+  });
+  addBlock("video", {
+    ...commonBasicBlockProps,
+    label: opts.labelVideo,
+    media: `<svg viewBox="0 0 24 24">
+            <path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />
+          </svg>`,
+    content: {
+      type: "video",
+      src: "img/video2.webm",
+      style: {
+        height: "350px",
+        width: "615px"
+      }
+    }
+  });
+  addBlock("map", {
+    ...commonBasicBlockProps,
+    label: opts.labelMap,
+    media: `<svg viewBox="0 0 24 24">
+            <path fill="currentColor" d="M20.5,3L20.34,3.03L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21L3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19.03 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3M10,5.47L14,6.87V18.53L10,17.13V5.47M5,6.46L8,5.45V17.15L5,18.31V6.46M19,17.54L16,18.55V6.86L19,5.7V17.54Z" />
+          </svg>`,
+    content: {
+      type: "map",
+      style: { height: "350px" }
+    }
+  });
+};
+export {
+  basics_default as default
+};

package/dist/common/grapesBlocks/blocks/extras.d.ts

@@ -0,0 +1,4 @@
+import type { Editor } from 'grapesjs';
+import type { RequiredGrapesBlocksOptions } from '../types.js';
+declare const _default: (editor: Editor, opts: RequiredGrapesBlocksOptions) => void;
+export default _default;

package/dist/common/grapesBlocks/blocks/extras.js

@@ -0,0 +1,63 @@
+import { typeCustomCode, typedId } from "../consts.js";
+import { AddBlocks } from "./index.js";
+var extras_default = (editor, opts) => {
+  const addBlock = AddBlocks(editor, opts);
+  const extrasCategory = "Extra";
+  const sharedExtraBlockProps = {
+    select: true,
+    category: extrasCategory
+  };
+  const { id: tooltipId, labelTooltip, blockTooltip } = opts.tooltip;
+  if (blockTooltip) {
+    addBlock(tooltipId, {
+      label: labelTooltip,
+      content: { type: tooltipId },
+      media: `<svg viewBox="0 0 24 24">
+          <path d="M4 2h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2h-4l-4 4-4-4H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2m0 2v12h4.83L12 19.17 15.17 16H20V4H4z"></path>
+        </svg>`,
+      ...sharedExtraBlockProps,
+      ...blockTooltip
+    });
+  }
+  addBlock(typedId, {
+    label: "Typed",
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path d="M212.3 44l2.3 49.6h-6A60 60 0 00204 75c-3.2-6-7.5-10.5-12.9-13.3a44.9 44.9 0 00-21.1-4.3h-29.8V219c0 13 1.4 21 4.2 24.3 4 4.4 10 6.6 18.2 6.6h7.4v5.7H80.2V250h7.5c9 0 15.3-2.7 19-8.2 2.4-3.3 3.5-10.9 3.5-22.7V57.3H84.8a71 71 0 00-21.1 2.2 29 29 0 00-13.9 11.3 46.1 46.1 0 00-6.9 22.8H37L39.5 44h172.8zM245 22h18v256h-18z"/></svg>',
+    content: { type: typedId },
+    ...sharedExtraBlockProps,
+    ...opts.typed.block
+  });
+  const {
+    block: countdownBlock,
+    id: countdownId,
+    label: countdownLabel
+  } = opts.countdown;
+  if (countdownBlock) {
+    addBlock(countdownId, {
+      media: `<svg viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M17 11.5V13H11V7H12.5V11.5H17Z" />
+          </svg>`,
+      label: countdownLabel,
+      content: { type: countdownId },
+      ...sharedExtraBlockProps,
+      ...countdownBlock
+    });
+  }
+  const { blockCustomCode } = opts.customCode;
+  if (blockCustomCode) {
+    addBlock(typeCustomCode, {
+      label: "Custom Code",
+      media: `
+                  <svg viewBox="0 0 24 24">
+                    <path d="M14.6 16.6l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4z"></path>
+                  </svg>
+                `,
+      activate: true,
+      ...sharedExtraBlockProps,
+      content: { type: typeCustomCode },
+      ...blockCustomCode
+    });
+  }
+};
+export {
+  extras_default as default
+};

package/dist/common/grapesBlocks/blocks/forms.d.ts

@@ -0,0 +1,4 @@
+import type { Editor } from 'grapesjs';
+import type { RequiredGrapesBlocksOptions } from '../types.js';
+declare const _default: (editor: Editor, opts: RequiredGrapesBlocksOptions) => void;
+export default _default;

package/dist/common/grapesBlocks/blocks/forms.js

@@ -0,0 +1,94 @@
+import {
+  typeButton,
+  typeCheckbox,
+  typeForm,
+  typeInput,
+  typeLabel,
+  typeRadio,
+  typeSelect,
+  typeTextarea
+} from "../consts.js";
+import { AddBlocks } from "./index.js";
+var forms_default = (editor, opts) => {
+  const addBlock = AddBlocks(editor, opts);
+  const formsCategory = "Forms";
+  addBlock(typeForm, {
+    label: "Form",
+    category: formsCategory,
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 5.5c0-.3-.5-.5-1.3-.5H3.4c-.8 0-1.3.2-1.3.5v3c0 .3.5.5 1.3.5h17.4c.8 0 1.3-.2 1.3-.5v-3zM21 8H3V6h18v2zM22 10.5c0-.3-.5-.5-1.3-.5H3.4c-.8 0-1.3.2-1.3.5v3c0 .3.5.5 1.3.5h17.4c.8 0 1.3-.2 1.3-.5v-3zM21 13H3v-2h18v2z"/><rect width="10" height="3" x="2" y="15" rx=".5"/></svg>',
+    content: {
+      type: typeForm,
+      components: [
+        {
+          components: [{ type: typeLabel, components: "Name" }, { type: typeInput }]
+        },
+        {
+          components: [
+            { type: typeLabel, components: "Email" },
+            { type: typeInput, attributes: { type: "email" } }
+          ]
+        },
+        {
+          components: [
+            { type: typeLabel, components: "Gender" },
+            { type: typeCheckbox, attributes: { value: "M" } },
+            { type: typeLabel, components: "M" },
+            { type: typeCheckbox, attributes: { value: "F" } },
+            { type: typeLabel, components: "F" }
+          ]
+        },
+        {
+          components: [{ type: typeLabel, components: "Message" }, { type: typeTextarea }]
+        },
+        {
+          components: [{ type: typeButton }]
+        }
+      ]
+    }
+  });
+  addBlock(typeInput, {
+    label: "Input",
+    category: formsCategory,
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"/><path d="M4 10h1v4H4z"/></svg>',
+    content: { type: typeInput }
+  });
+  addBlock(typeTextarea, {
+    label: "Textarea",
+    category: formsCategory,
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 7.5c0-.9-.5-1.5-1.3-1.5H3.4C2.5 6 2 6.6 2 7.5v9c0 .9.5 1.5 1.3 1.5h17.4c.8 0 1.3-.6 1.3-1.5v-9zM21 17H3V7h18v10z"/><path d="M4 8h1v4H4zM19 7h1v10h-1zM20 8h1v1h-1zM20 15h1v1h-1z"/></svg>',
+    content: { type: typeTextarea }
+  });
+  addBlock(typeSelect, {
+    label: "Select",
+    category: formsCategory,
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"/><path d="M18.5 13l1.5-2h-3zM4 11.5h11v1H4z"/></svg>',
+    content: { type: typeSelect }
+  });
+  addBlock(typeButton, {
+    label: "Button",
+    category: formsCategory,
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"/><path d="M4 11.5h16v1H4z"/></svg>',
+    content: { type: typeButton }
+  });
+  addBlock(typeLabel, {
+    label: "Label",
+    category: formsCategory,
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 11.9c0-.6-.5-.9-1.3-.9H3.4c-.8 0-1.3.3-1.3.9V17c0 .5.5.9 1.3.9h17.4c.8 0 1.3-.4 1.3-.9V12zM21 17H3v-5h18v5z"/><rect width="14" height="5" x="2" y="5" rx=".5"/><path d="M4 13h1v3H4z"/></svg>',
+    content: { type: typeLabel }
+  });
+  addBlock(typeCheckbox, {
+    label: "Checkbox",
+    category: formsCategory,
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 17l-5-5 1.41-1.42L10 14.17l7.59-7.59L19 8m0-5H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2z"></path></svg>',
+    content: { type: typeCheckbox }
+  });
+  addBlock(typeRadio, {
+    label: "Radio",
+    category: formsCategory,
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m0-18C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 5c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z"></path></svg>',
+    content: { type: typeRadio }
+  });
+};
+export {
+  forms_default as default
+};

package/dist/common/grapesBlocks/blocks/index.d.ts

@@ -0,0 +1,5 @@
+import type { BlockProperties, Editor } from 'grapesjs';
+import type { RequiredGrapesBlocksOptions } from '../types.js';
+export declare const AddBlocks: (editor: Editor, opts: RequiredGrapesBlocksOptions) => (id: string, def: BlockProperties) => void;
+export declare function loadBlocks(editor: Editor, opts: RequiredGrapesBlocksOptions): void;
+export default loadBlocks;