@studiocms/wysiwyg 0.1.0-experimental.5 → 0.1.0

package/dist/common/gjs-editor-utils.d.ts

@@ -0,0 +1,165 @@
+import type { AstroComponentProp, ComponentRegistryEntry } from '@withstudiocms/component-registry/types';
+import type { Component, Editor, ProjectData, TraitProperties } from 'grapesjs';
+/**
+ * Generates an HTML string representation of the main component within the editor,
+ * including its styles. The styles are adjusted to replace all occurrences of 'body'
+ * with 'div' to ensure proper scoping.
+ *
+ * @param editor - The editor instance from which to extract the main page and component.
+ * @returns A promise that resolves to a string containing the HTML and scoped styles.
+ */
+export declare const generateHTML: (editor: Editor) => Promise<string>;
+/**
+ * Registers a custom storage adapter named 'db' for the provided editor instance.
+ * This adapter enables loading and storing project data to a backend database using fetch requests.
+ *
+ * @param editor - The editor instance to which the storage adapter will be added.
+ * @param opts - Configuration options for the storage adapter.
+ * @param opts.projectId - The unique identifier for the project whose data is being managed.
+ * @param opts.projectData - The initial project data to use as a fallback if loading fails.
+ * @param opts.pageContent - The HTML element where the serialized project data and generated HTML will be stored.
+ *
+ * The storage adapter provides two asynchronous methods:
+ * - `load`: Fetches project data from the backend using the projectId. Returns the fetched data or the fallback projectData if the request fails.
+ * - `store`: Sends the updated project data to the backend and updates the pageContent element with the serialized data and generated HTML.
+ */
+export declare const StudioCMSDbStorageAdapter: (editor: Editor, opts: {
+    projectId: string;
+    projectData: ProjectData;
+    pageContent: HTMLElement;
+    csrfToken: string;
+}) => void;
+/**
+ * Reduces an array of `TraitProperties` into an accumulator object, mapping trait names to their values.
+ *
+ * - If the trait type is `'number'`, the value is coerced to a number.
+ * - If the trait value is an empty string, the default value is used.
+ * - Traits without a name are skipped.
+ *
+ * @param acc - The accumulator object that collects trait name-value pairs.
+ * @param trait - The trait to process and add to the accumulator.
+ * @returns The updated accumulator with the trait's name and resolved value.
+ */
+export declare function traitReducer(acc: Record<string, any>, trait: TraitProperties): Record<string, any>;
+/**
+ * Extracts and aggregates trait properties from a given component model.
+ *
+ * @param model - The component model containing traits to extract.
+ * @returns An object containing the aggregated trait properties.
+ */
+export declare const getTraitData: (model: Component) => Record<string, any>;
+/**
+ * Generates an HTML string representing the slot data for a given component model.
+ *
+ * Iterates through the child components of the provided model, converts each child to HTML,
+ * and wraps it with its respective tag name. The resulting HTML strings are concatenated
+ * and returned as a single string.
+ *
+ * @param model - The component model whose children will be processed.
+ * @returns A string containing the HTML representation of the model's child components,
+ *          or an empty string if there are no children.
+ */
+export declare const getSlotData: (model: Component) => string | undefined;
+/**
+ * Returns the appropriate input type for a given trait type.
+ *
+ * @param type - The trait type to filter (e.g., "number", "string", etc.).
+ * @returns The corresponding input type as a string. Returns "number" if the type is "number", otherwise returns "text".
+ */
+export declare const traitTypeFilter: (type: string) => "text" | "number";
+/**
+ * Maps an `AstroComponentProp` to a new object with filtered type, name, and default value.
+ *
+ * @param prop - The Astro component property to map.
+ * @returns An object containing:
+ *  - `type`: The filtered type of the property.
+ *  - `name`: The name of the property.
+ *  - `default`: The default value of the property.
+ */
+export declare const traitMapFn: (prop: AstroComponentProp) => {
+    type: string;
+    name: string;
+    default: string | undefined;
+};
+/**
+ * Builds a partial request configuration for a given component model.
+ *
+ * @param model - The component model to build the request from.
+ * @returns A `RequestInit` object configured for a POST request with the component's data as JSON.
+ */
+export declare const partialRequestBuilder: (model: Component) => RequestInit;
+/**
+ * Retrieves and parses essential editor elements and data from the DOM.
+ *
+ * @param document - The `Document` object to query for elements.
+ * @param selectors - An object containing CSS selectors for the container and page content elements.
+ * @param selectors.container - CSS selector for the GrapesJS container element.
+ * @param selectors.pageContent - CSS selector for the page content textarea element.
+ * @returns An object containing:
+ *   - `astroComponentsOpts`: Options including the parsed component registry.
+ *   - `inlineStorageOpts`: Options including the page content element and parsed project data.
+ * @throws Will throw an error if the container or page content elements are not found in the DOM.
+ */
+export declare function getEditorElmData(document: Document, selectors: {
+    container: string;
+    pageContent: string;
+}): {
+    astroComponentsOpts: {
+        componentRegistry: ComponentRegistryEntry[];
+    };
+    StudioCMSDbStorageAdapterOpts: {
+        projectId: string;
+        projectData: ProjectData;
+        pageContent: HTMLTextAreaElement;
+        csrfToken: string;
+    };
+};
+/**
+ * Builds and returns the block properties object for a given block name.
+ *
+ * For the special case of 'cms-img', it returns a block configuration with
+ * specific content type and style. For all other names, it returns a generic
+ * block configuration using the provided name as the type and tagName.
+ *
+ * @param name - The name of the block to build properties for.
+ * @returns The block properties object configured for the specified block name.
+ */
+export declare function buildBlockProps(name: string): {
+    id: "cms-img";
+    label: string;
+    content: {
+        style: {
+            color: string;
+        };
+        type: string;
+        tagName?: undefined;
+    };
+    media?: string | undefined;
+    category?: (string | import("grapesjs").BlockCategoryProperties) | undefined;
+    activate?: boolean | undefined;
+    select?: boolean | undefined;
+    resetId?: boolean | undefined;
+    disable?: boolean | undefined;
+    onClick?: ((block: import("grapesjs").Block, editor: Editor) => void) | undefined;
+    attributes?: Record<string, any> | undefined;
+    activeOnRender?: boolean | undefined;
+    dragDef?: import("grapesjs").ComponentDefinition | undefined;
+} | {
+    id: string;
+    label: string;
+    content: {
+        type: string;
+        tagName: string;
+        style?: undefined;
+    };
+    media?: string | undefined;
+    category?: (string | import("grapesjs").BlockCategoryProperties) | undefined;
+    activate?: boolean | undefined;
+    select?: boolean | undefined;
+    resetId?: boolean | undefined;
+    disable?: boolean | undefined;
+    onClick?: ((block: import("grapesjs").Block, editor: Editor) => void) | undefined;
+    attributes?: Record<string, any> | undefined;
+    activeOnRender?: boolean | undefined;
+    dragDef?: import("grapesjs").ComponentDefinition | undefined;
+};

package/dist/common/gjs-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.editorCsrfToken || "";
+  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;