@studiocms/wysiwyg 0.1.0-experimental.2 → 0.1.0-experimental.3

package/dist/wysiwyg/components/Editor.astro

@@ -1,7 +1,7 @@
 ---
 import '@studiocms/ui/css/colors.css';
 import 'grapesjs/dist/css/grapes.min.css';
-import 'grapesjs-rte-extensions/dist/grapesjs-rte-extensions.min.css';
+import '../editorPlugins/rte/styles.css';
 import '../styles/main.css';
 import { importComponentsKeys } from 'studiocms/lib/renderer/runtime.js';
 import type { PluginPageTypeEditorProps } from 'studiocms/types';
@@ -41,24 +41,19 @@ interface Props extends PluginPageTypeEditorProps {}
 <script>
   import { toast } from "@studiocms/ui/components/Toast/toast.js";
   import grapesjs, { type Editor, usePlugin } from "grapesjs";
-  import "@studiocms/grapesjs-plugin";
-  import blocks from "grapesjs-blocks-basic";
-  import countdown from "grapesjs-component-countdown";
-  import exporter from "grapesjs-plugin-export";
-  import customCode from "grapesjs-custom-code";
-  import postcss from "grapesjs-parser-postcss";
-  import tooltip from "grapesjs-tooltip";
-  import tuiImage from "grapesjs-tui-image-editor";
-  import typed from "grapesjs-typed";
-  import styleBg from "grapesjs-style-bg";
-  import forms from "grapesjs-plugin-forms";
-  // @ts-ignore
-  import rte from "grapesjs-rte-extensions";
-  // @ts-ignore
-  import tabs from "grapesjs-tabs";
-  // @ts-ignore
-  import touch from "grapesjs-touch";
   import { parse } from "../../utils.js";
+  import { 
+    blocks, 
+    customCode, 
+    countdown, 
+    forms, 
+    rte, 
+    tabs, 
+    tooltip, 
+    tuiImageEditor, 
+    typed 
+  } from '../editorPlugins/index.js';
+  import "@studiocms/grapesjs-plugin";
 
   /**
    * Represents an array of Astro component blocks, where each block contains metadata
@@ -199,21 +194,19 @@ interface Props extends PluginPageTypeEditorProps {}
     panels: { defaults: [] },
     plugins: [
       usePlugin(getPlugin(componentKeys)),
-      usePlugin(blocks, { flexGrid: true }),
-      usePlugin(tabs, {
-        tabsBlock: { category: "Extra" },
+      usePlugin(inlineStorage),
+      usePlugin(blocks, { 
+        flexGrid: true 
       }),
-      usePlugin(touch, {
-        block: {
-          category: "Extra",
-          content: {
-            type: "typed",
-            "type-speed": 40,
-            strings: ["Text row one", "Text row two", "Text row three"],
-          },
+      usePlugin(tabs, {
+        tabsBlock: { 
+          category: 'Extra' 
         },
       }),
-      usePlugin(tuiImage, {
+      usePlugin(countdown),
+      usePlugin(customCode),
+      usePlugin(tooltip),
+      usePlugin(tuiImageEditor, {
         script: [
           "https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js",
           "https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js",
@@ -224,17 +217,10 @@ interface Props extends PluginPageTypeEditorProps {}
           "https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css",
         ],
       }),
-      usePlugin(countdown),
-      usePlugin(exporter),
-      usePlugin(customCode),
-      usePlugin(postcss),
-      usePlugin(tooltip),
       usePlugin(typed),
-      usePlugin(styleBg),
-      usePlugin(inlineStorage),
       usePlugin(forms),
       usePlugin(rte),
-      "@studiocms/grapesjs-plugin",
+      '@studiocms/grapesjs-plugin',
     ],
     blockManager: {
       blocks: convertComponentBlocks(rawBlocks),

package/dist/wysiwyg/editorPlugins/blocks/blocks.d.ts

@@ -0,0 +1,3 @@
+import type { Editor } from 'grapesjs';
+import type { PluginOptions } from './index.js';
+export default function (editor: Editor, opts: Required<PluginOptions>): void;

package/dist/wysiwyg/editorPlugins/blocks/blocks.js

@@ -0,0 +1,239 @@
+function blocks_default(editor, opts) {
+  const bm = editor.BlockManager;
+  const { category, blocks, 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 toAdd = (name) => blocks.indexOf(name) >= 0;
+  const attrsRow = attrsToString(rowAttr);
+  const attrsCell = attrsToString(colAttr);
+  const commonBlockProps = {
+    category,
+    select: true
+  };
+  toAdd("column1") && bm.add("column1", {
+    ...commonBlockProps,
+    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>` : ""}`
+  });
+  toAdd("column2") && bm.add("column2", {
+    ...commonBlockProps,
+    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>` : ""}`
+  });
+  toAdd("column3") && bm.add("column3", {
+    ...commonBlockProps,
+    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>` : ""}`
+  });
+  toAdd("column3-7") && bm.add("column3-7", {
+    ...commonBlockProps,
+    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>` : ""}`
+  });
+  toAdd("text") && bm.add("text", {
+    ...commonBlockProps,
+    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" }
+    }
+  });
+  toAdd("link") && bm.add("link", {
+    ...commonBlockProps,
+    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" }
+    }
+  });
+  toAdd("image") && bm.add("image", {
+    ...commonBlockProps,
+    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"
+    }
+  });
+  toAdd("video") && bm.add("video", {
+    ...commonBlockProps,
+    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"
+      }
+    }
+  });
+  toAdd("map") && bm.add("map", {
+    ...commonBlockProps,
+    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 {
+  blocks_default as default
+};

package/dist/wysiwyg/editorPlugins/blocks/index.d.ts

@@ -0,0 +1,80 @@
+import type { Plugin } from 'grapesjs';
+export type PluginOptions = {
+    /**
+     * Which blocks to add.
+     * @default ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map']
+     */
+    blocks?: string[];
+    /**
+     * Make use of flexbox for the grid
+     * @default false
+     */
+    flexGrid?: boolean;
+    /**
+     * Classes prefix
+     * @default 'gjs-'
+     */
+    stylePrefix?: string;
+    /**
+     * Use basic CSS for blocks
+     * @default true
+     */
+    addBasicStyle?: boolean;
+    /**
+     * Blocks category name
+     * @default 'Basic'
+     */
+    category?: string;
+    /**
+     * 1 Column label
+     * @default '1 Column'
+     */
+    labelColumn1?: string;
+    /**
+     * 2 Columns label
+     * @default '2 Columns'
+     */
+    labelColumn2?: string;
+    /**
+     * 3 Columns label
+     * @default '3 Columns'
+     */
+    labelColumn3?: string;
+    /**
+     * 3/7 Columns label
+     * @default '2 Columns 3/7'
+     */
+    labelColumn37?: string;
+    /**
+     * Text label
+     * @default 'Text'
+     */
+    labelText?: string;
+    /**
+     * Link label
+     * @default 'Link'
+     */
+    labelLink?: string;
+    /**
+     * Image label
+     * @default 'Image'
+     */
+    labelImage?: string;
+    /**
+     * Video label
+     * @default 'Video'
+     */
+    labelVideo?: string;
+    /**
+     * Map label
+     * @default 'Map'
+     */
+    labelMap?: string;
+    /**
+     * Initial row height
+     * @default 75
+     */
+    rowHeight?: number;
+};
+declare const plugin: Plugin<PluginOptions>;
+export default plugin;

package/dist/wysiwyg/editorPlugins/blocks/index.js

@@ -0,0 +1,26 @@
+import loadBlocks from "./blocks.js";
+const plugin = (editor, opts = {}) => {
+  const config = {
+    blocks: ["column1", "column2", "column3", "column3-7", "text", "link", "image", "video", "map"],
+    flexGrid: false,
+    stylePrefix: "gjs-",
+    addBasicStyle: true,
+    category: "Basic",
+    labelColumn1: "1 Column",
+    labelColumn2: "2 Columns",
+    labelColumn3: "3 Columns",
+    labelColumn37: "2 Columns 3/7",
+    labelText: "Text",
+    labelLink: "Link",
+    labelImage: "Image",
+    labelVideo: "Video",
+    labelMap: "Map",
+    rowHeight: 75,
+    ...opts
+  };
+  loadBlocks(editor, config);
+};
+var blocks_default = plugin;
+export {
+  blocks_default as default
+};

package/dist/wysiwyg/editorPlugins/code/blocks.d.ts

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

package/dist/wysiwyg/editorPlugins/code/blocks.js

@@ -0,0 +1,20 @@
+import { typeCustomCode } from "./utils.js";
+var blocks_default = (editor, { blockCustomCode } = {}) => {
+  const { Blocks } = editor;
+  blockCustomCode && Blocks.add(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>
+    `,
+    category: "Extra",
+    activate: true,
+    select: true,
+    content: { type: typeCustomCode },
+    ...blockCustomCode
+  });
+};
+export {
+  blocks_default as default
+};

package/dist/wysiwyg/editorPlugins/code/commands.d.ts

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

package/dist/wysiwyg/editorPlugins/code/commands.js

@@ -0,0 +1,109 @@
+import { commandNameCustomCode, keyCustomCode } from "./utils.js";
+var commands_default = (editor, opts = {}) => {
+  const { modalTitle, codeViewOptions, commandCustomCode } = opts;
+  const appendToContent = (target, content) => {
+    if (content instanceof HTMLElement) {
+      target.appendChild(content);
+    } else if (content) {
+      target.insertAdjacentHTML("beforeend", content);
+    }
+  };
+  editor.Commands.add(commandNameCustomCode, {
+    keyCustomCode,
+    target: null,
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    codeViewer: null,
+    run(editor2, s, opts2 = {}) {
+      const target = opts2.target || editor2.getSelected();
+      this.target = target;
+      if (target?.get("editable")) {
+        this.showCustomCode(target, opts2);
+      }
+    },
+    stop(editor2) {
+      editor2.Modal.close();
+    },
+    /**
+     * Method which tells how to show the custom code
+     * @param  {Component} target
+     */
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    showCustomCode(target, options) {
+      const title = options.title || modalTitle;
+      const code = target.get(keyCustomCode) || "";
+      const content = this.getContent();
+      editor.Modal.open({ title, content }).onceClose(
+        () => editor.stopCommand(commandNameCustomCode)
+      );
+      this.getCodeViewer().setContent(code);
+    },
+    /**
+     * Custom pre-content. Can be a simple string or an HTMLElement
+     */
+    getPreContent() {
+    },
+    /**
+     * Custom post-content. Can be a simple string or an HTMLElement
+     */
+    getPostContent() {
+    },
+    /**
+     * Get all the content for the custom code
+     * @return {HTMLElement}
+     */
+    getContent() {
+      const codeViewer = this.getCodeViewer();
+      const content = document.createElement("div");
+      const pfx = editor.getConfig("stylePrefix");
+      content.className = `${pfx}custom-code`;
+      appendToContent(content, this.getPreContent());
+      content.appendChild(codeViewer.getElement());
+      appendToContent(content, this.getPostContent());
+      appendToContent(content, this.getContentActions());
+      codeViewer.refresh();
+      setTimeout(() => codeViewer.focus(), 0);
+      return content;
+    },
+    /**
+     * Get the actions content. Can be a simple string or an HTMLElement
+     * @return {HTMLElement|String}
+     */
+    getContentActions() {
+      const btn = document.createElement("button");
+      btn.setAttribute("type", "button");
+      const pfx = editor.getConfig("stylePrefix");
+      btn.innerHTML = opts.buttonLabel;
+      btn.className = `${pfx}btn-prim ${pfx}btn-import__custom-code`;
+      btn.onclick = () => this.handleSave();
+      return btn;
+    },
+    /**
+     * Handle the main save task
+     */
+    handleSave() {
+      const { target } = this;
+      const code = this.getCodeViewer().getContent();
+      target?.set(keyCustomCode, code);
+      editor.Modal.close();
+    },
+    /**
+     * Return the code viewer instance
+     * @return {CodeViewer}
+     */
+    getCodeViewer() {
+      if (!this.codeViewer) {
+        this.codeViewer = editor.CodeManager.createViewer({
+          codeName: "htmlmixed",
+          theme: "hopscotch",
+          readOnly: 0,
+          ...codeViewOptions
+        });
+      }
+      return this.codeViewer;
+    },
+    ...commandCustomCode
+  });
+};
+export {
+  commands_default as default
+};

package/dist/wysiwyg/editorPlugins/code/components.d.ts

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

package/dist/wysiwyg/editorPlugins/code/components.js

@@ -0,0 +1,88 @@
+import { commandNameCustomCode, keyCustomCode, typeCustomCode } from "./utils.js";
+var components_default = (editor, opts = {}) => {
+  const { Components } = editor;
+  const { toolbarBtnCustomCode } = opts;
+  let timedInterval;
+  Components.addType("script", {
+    view: {
+      onRender() {
+        const { model, el } = this;
+        const isCC = model.closestType(typeCustomCode);
+        isCC && (el.innerHTML = "");
+      }
+    }
+  });
+  Components.addType(typeCustomCode, {
+    model: {
+      defaults: {
+        name: "Custom Code",
+        editable: true,
+        components: {
+          tagName: "span",
+          components: { type: "textnode", content: "Insert here your custom code" }
+          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        },
+        ...opts.propsCustomCode
+      },
+      /**
+       * Initilize the component
+       */
+      init() {
+        this.on(`change:${keyCustomCode}`, this.onCustomCodeChange);
+        const initialCode = this.get(keyCustomCode);
+        !this.components().length && this.components(initialCode);
+        const toolbar = this.get("toolbar");
+        const id = "custom-code";
+        if (toolbarBtnCustomCode && !toolbar.filter((tlb) => tlb.id === id).length) {
+          toolbar.unshift({
+            id,
+            command: commandNameCustomCode,
+            label: `<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>`,
+            ...toolbarBtnCustomCode
+          });
+        }
+      },
+      /**
+       * Callback to launch on keyCustomCode change
+       */
+      onCustomCodeChange() {
+        this.components(this.get(keyCustomCode));
+      }
+    },
+    view: {
+      events: {
+        dblclick: "onActive"
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      },
+      init() {
+        this.listenTo(this.model.components(), "add remove reset", this.onComponentsChange);
+        this.onComponentsChange();
+      },
+      /**
+       * Things to do once inner components of custom code are changed
+       */
+      onComponentsChange() {
+        timedInterval && clearInterval(timedInterval);
+        timedInterval = setTimeout(() => {
+          const { model, el } = this;
+          const content = model.get(keyCustomCode) || "";
+          let droppable = true;
+          if (content.indexOf("<script") >= 0 && opts.placeholderScript) {
+            el.innerHTML = opts.placeholderScript;
+            droppable = false;
+          }
+          model.set({ droppable });
+        }, 0);
+      },
+      onActive() {
+        const { model, em } = this;
+        em.get("Commands").run(commandNameCustomCode, { target: model });
+      }
+    }
+  });
+};
+export {
+  components_default as default
+};