@studiocms/wysiwyg 0.1.0-experimental.5 → 0.1.0

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/{wysiwyg/editorPlugins/forms/blocks.js → common/grapesBlocks/blocks/forms.js}

@@ -7,20 +7,14 @@ import {
   typeRadio,
   typeSelect,
   typeTextarea
-} from "./components.js";
-function blocks_default(editor, opt) {
-  const opts = opt;
-  const bm = editor.BlockManager;
-  const addBlock = (id, def) => {
-    opts.blocks?.indexOf(id) >= 0 && bm.add(id, {
-      ...def,
-      category: opts.category,
-      select: true,
-      ...opt.block(id)
-    });
-  };
+} 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,
@@ -54,40 +48,47 @@ function blocks_default(editor, opt) {
   });
   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 {
-  blocks_default as default
+  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;

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

@@ -0,0 +1,23 @@
+import basics from "./basics.js";
+import extras from "./extras.js";
+import forms from "./forms.js";
+import tabs from "./tabs.js";
+const AddBlocks = (editor, opts) => (id, def) => {
+  opts.blocks.indexOf(id) >= 0 && editor.Blocks.add(id, {
+    select: true,
+    ...def,
+    ...opts.block(id)
+  });
+};
+function loadBlocks(editor, opts) {
+  basics(editor, opts);
+  extras(editor, opts);
+  forms(editor, opts);
+  tabs(editor, opts);
+}
+var blocks_default = loadBlocks;
+export {
+  AddBlocks,
+  blocks_default as default,
+  loadBlocks
+};

package/dist/common/grapesBlocks/blocks/tabs.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/{wysiwyg/editorPlugins/tabs/blocks.js → common/grapesBlocks/blocks/tabs.js}

@@ -1,7 +1,9 @@
-function loadBlocks(editor, { tabsBlock, typeTabs }) {
-  const { Blocks } = editor;
+import { AddBlocks } from "./index.js";
+var tabs_default = (editor, opts) => {
+  const addBlock = AddBlocks(editor, opts);
+  const { tabsBlock, typeTabs } = opts.tabOptions;
   if (tabsBlock) {
-    const blockConfig = {
+    addBlock(typeTabs, {
       media: `
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path d="M22 9.3c0-.8-.5-1.3-1.3-1.3H3.4C2.5 8 2 8.5 2 9.3v7.4c0 .8.5 1.3 1.3 1.3h17.4c.8 0 1.3-.5 1.3-1.3V9.3zM21 17H3V9h18v8z" fill-rule="nonzero"/><rect x="3" y="5" width="4" height="2" rx=".5"/><rect x="8" y="5" width="4" height="2" rx=".5"/><rect x="13" y="5" width="4" height="2" rx=".5"/>
@@ -9,11 +11,10 @@ function loadBlocks(editor, { tabsBlock, typeTabs }) {
       `,
       label: "Tabs",
       content: { type: typeTabs },
-      ...tabsBlock
-    };
-    Blocks.add(typeTabs, blockConfig);
+      category: "Extra"
+    });
   }
-}
+};
 export {
-  loadBlocks as default
+  tabs_default as default
 };

package/dist/common/grapesBlocks/commands/clear.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/commands/clear.js

@@ -0,0 +1,21 @@
+import { toast } from "@studiocms/ui/components/Toast/toast.js";
+import { cmdClear } from "../consts.js";
+import { AddCmd } from "./index.js";
+var clear_default = (editor, opts) => {
+  const addCmd = AddCmd(editor);
+  const txtConfirm = opts.textCleanCanvas;
+  addCmd(cmdClear, (e) => {
+    if (confirm(txtConfirm)) {
+      e.runCommand("core:canvas-clear");
+      toast({
+        title: "Canvas Cleared",
+        type: "success",
+        description: "The canvas has been cleared successfully.",
+        duration: 5e3
+      });
+    }
+  });
+};
+export {
+  clear_default as default
+};

package/dist/common/grapesBlocks/commands/customCodeCommands.d.ts

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

package/dist/{wysiwyg/editorPlugins/code/commands.js → common/grapesBlocks/commands/customCodeCommands.js}

@@ -1,6 +1,8 @@
-import { commandNameCustomCode, keyCustomCode } from "./utils.js";
-var commands_default = (editor, opts = {}) => {
-  const { modalTitle, codeViewOptions, commandCustomCode } = opts;
+import { commandNameCustomCode, keyCustomCode } from "../consts";
+import { AddCmd } from "./index.js";
+var customCodeCommands_default = (editor, opts) => {
+  const addCmd = AddCmd(editor);
+  const { modalTitle, codeViewOptions, commandCustomCode, buttonLabel } = opts;
   const appendToContent = (target, content) => {
     if (content instanceof HTMLElement) {
       target.appendChild(content);
@@ -8,12 +10,12 @@ var commands_default = (editor, opts = {}) => {
       target.insertAdjacentHTML("beforeend", content);
     }
   };
-  editor.Commands.add(commandNameCustomCode, {
+  addCmd(commandNameCustomCode, {
     keyCustomCode,
     target: null,
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
     codeViewer: null,
-    run(editor2, s, opts2 = {}) {
+    run(editor2, _s, opts2 = {}) {
       const target = opts2.target || editor2.getSelected();
       this.target = target;
       if (target?.get("editable")) {
@@ -27,7 +29,7 @@ var commands_default = (editor, opts = {}) => {
      * Method which tells how to show the custom code
      * @param  {Component} target
      */
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
     showCustomCode(target, options) {
       const title = options.title || modalTitle;
       const code = target.get(keyCustomCode) || "";
@@ -72,7 +74,7 @@ var commands_default = (editor, opts = {}) => {
       const btn = document.createElement("button");
       btn.setAttribute("type", "button");
       const pfx = editor.getConfig("stylePrefix");
-      btn.innerHTML = opts.buttonLabel;
+      btn.innerHTML = buttonLabel;
       btn.className = `${pfx}btn-prim ${pfx}btn-import__custom-code`;
       btn.onclick = () => this.handleSave();
       return btn;
@@ -105,5 +107,5 @@ var commands_default = (editor, opts = {}) => {
   });
 };
 export {
-  commands_default as default
+  customCodeCommands_default as default
 };

package/dist/common/grapesBlocks/commands/deviceCommands.js

@@ -0,0 +1,23 @@
+import { cmdDeviceDesktop, cmdDeviceMobile, cmdDeviceTablet } from "../consts";
+import { AddCmd } from "./index.js";
+var deviceCommands_default = (editor) => {
+  const addCmd = AddCmd(editor);
+  addCmd(cmdDeviceDesktop, {
+    run: (ed) => ed.setDevice("Desktop"),
+    stop: () => {
+    }
+  });
+  addCmd(cmdDeviceTablet, {
+    run: (ed) => ed.setDevice("Tablet"),
+    stop: () => {
+    }
+  });
+  addCmd(cmdDeviceMobile, {
+    run: (ed) => ed.setDevice("Mobile portrait"),
+    stop: () => {
+    }
+  });
+};
+export {
+  deviceCommands_default as default
+};

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

@@ -0,0 +1,5 @@
+import type { CommandFunction, CommandObject, Editor, ObjectAny } from 'grapesjs';
+import type { RequiredGrapesBlocksOptions } from '../types.js';
+export declare const AddCmd: (editor: Editor) => <T extends ObjectAny>(id: string, command: CommandFunction | CommandObject<any, T>) => void;
+export declare function loadCommands(editor: Editor, opts: RequiredGrapesBlocksOptions): void;
+export default loadCommands;

package/dist/common/grapesBlocks/commands/index.js

@@ -0,0 +1,40 @@
+import { toast } from "@studiocms/ui/components/Toast/toast.js";
+import clear from "./clear.js";
+import customCodeCommands from "./customCodeCommands.js";
+import deviceCommands from "./deviceCommands.js";
+import openImport from "./openImport.js";
+const AddCmd = (editor) => (id, command) => {
+  editor.Commands.add(id, command);
+};
+function loadCommands(editor, opts) {
+  clear(editor, opts);
+  openImport(editor, opts);
+  deviceCommands(editor);
+  customCodeCommands(editor, opts.customCode);
+  AddCmd(editor)("save-page", {
+    run: async (editor2, sender) => {
+      sender?.set("active", 0);
+      try {
+        await editor2.store();
+        toast({
+          title: "WYSIWYG: Manually Saved Page",
+          description: "Your editor changes have been saved. Don't forget to save your changes in StudioCMS!",
+          type: "info",
+          duration: 3e3
+        });
+      } catch (e) {
+        toast({
+          title: "WYSIWYG: Save failed",
+          description: String(e),
+          type: "danger"
+        });
+      }
+    }
+  });
+}
+var commands_default = loadCommands;
+export {
+  AddCmd,
+  commands_default as default,
+  loadCommands
+};

package/dist/common/grapesBlocks/commands/openImport.d.ts

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

package/dist/common/grapesBlocks/commands/openImport.js

@@ -0,0 +1,71 @@
+import { cmdImport } from "../consts.js";
+import { AddCmd } from "./index.js";
+var openImport_default = (editor, config) => {
+  const addCmd = AddCmd(editor);
+  const pfx = editor.getConfig("stylePrefix");
+  const importLabel = config.modalImportLabel;
+  const importCnt = config.modalImportContent;
+  addCmd(cmdImport, {
+    // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+    codeViewer: null,
+    container: null,
+    run(editor2) {
+      const codeContent = typeof importCnt === "function" ? importCnt(editor2) : importCnt;
+      const codeViewer = this.getCodeViewer();
+      editor2.Modal.open({
+        title: config.modalImportTitle,
+        content: this.getContainer()
+      }).onceClose(() => editor2.stopCommand(cmdImport));
+      codeViewer.setContent(codeContent ?? "");
+      codeViewer.refresh();
+      setTimeout(() => codeViewer.focus(), 0);
+    },
+    stop() {
+      editor.Modal.close();
+    },
+    getContainer() {
+      if (!this.container) {
+        const codeViewer = this.getCodeViewer();
+        const container = document.createElement("div");
+        container.className = `${pfx}import-container`;
+        if (importLabel) {
+          const labelEl = document.createElement("div");
+          labelEl.className = `${pfx}import-label`;
+          labelEl.innerHTML = importLabel;
+          container.appendChild(labelEl);
+        }
+        container.appendChild(codeViewer.getElement());
+        const btnImp = document.createElement("button");
+        btnImp.type = "button";
+        btnImp.innerHTML = config.modalImportButton;
+        btnImp.className = `${pfx}btn-prim ${pfx}btn-import`;
+        btnImp.onclick = () => {
+          editor.Css.clear();
+          editor.setComponents(codeViewer.getContent().trim());
+          editor.Modal.close();
+        };
+        container.appendChild(btnImp);
+        this.container = container;
+      }
+      return this.container;
+    },
+    /**
+     * Return the code viewer instance
+     * @returns {CodeViewer}
+     */
+    getCodeViewer() {
+      if (!this.codeViewer) {
+        this.codeViewer = editor.CodeManager.createViewer({
+          codeName: "htmlmixed",
+          theme: "hopscotch",
+          readOnly: false,
+          ...config.importViewerOptions
+        });
+      }
+      return this.codeViewer;
+    }
+  });
+};
+export {
+  openImport_default as default
+};

package/dist/common/grapesBlocks/components/countdown.d.ts

@@ -0,0 +1,12 @@
+import type { Editor } from 'grapesjs';
+import type { RequiredCountdownOptions } from '../types.js';
+type TElement = HTMLElement & {
+    __gjsCountdownInterval: ReturnType<typeof setTimeout | typeof setInterval>;
+};
+declare global {
+    interface Window {
+        __gjsCountdownIntervals: TElement[];
+    }
+}
+declare const _default: (editor: Editor, opts: RequiredCountdownOptions) => void;
+export default _default;

package/dist/common/grapesBlocks/components/countdown.js

@@ -0,0 +1,147 @@
+import { AddComponent } from "./index.js";
+var countdown_default = (editor, opts) => {
+  const addComponent = AddComponent(editor);
+  const {
+    props: countdownProps,
+    style: countdownStyle,
+    id: countdownId,
+    classPrefix: countdownPfx,
+    startTime: countdownStartTime,
+    endText: countdownEndText,
+    dateInputType: countdownDateInputType,
+    labelDays: countdownLabelDays,
+    labelHours: countdownLabelHours,
+    labelMinutes: countdownLabelMinutes,
+    labelSeconds: countdownLabelSeconds,
+    styleAdditional: countdownStyleAdditional
+  } = opts;
+  addComponent(countdownId, {
+    model: {
+      defaults: {
+        startfrom: countdownStartTime,
+        classes: [countdownPfx],
+        endText: countdownEndText,
+        droppable: false,
+        // biome-ignore lint/suspicious/noExplicitAny: grapesjs types
+        script(props) {
+          const startfrom = props.startfrom;
+          const endTxt = props.endText;
+          const countDownDate = new Date(startfrom).getTime();
+          const countdownEl = this.querySelector("[data-js=countdown]");
+          const endTextEl = this.querySelector("[data-js=countdown-endtext]");
+          const dayEl = this.querySelector("[data-js=countdown-day]");
+          const hourEl = this.querySelector("[data-js=countdown-hour]");
+          const minuteEl = this.querySelector("[data-js=countdown-minute]");
+          const secondEl = this.querySelector("[data-js=countdown-second]");
+          const oldInterval = this.__gjsCountdownInterval;
+          if (oldInterval) clearInterval(oldInterval);
+          const connected = window.__gjsCountdownIntervals || [];
+          const toClean = [];
+          connected.forEach((item) => {
+            if (!item.isConnected) {
+              clearInterval(item.__gjsCountdownInterval);
+              toClean.push(item);
+            }
+          });
+          connected.indexOf(this) < 0 && connected.push(this);
+          window.__gjsCountdownIntervals = connected.filter((item) => toClean.indexOf(item) < 0);
+          const setTimer = (days, hours, minutes, seconds) => {
+            dayEl.innerHTML = `${days < 10 ? `0${days}` : days}`;
+            hourEl.innerHTML = `${hours < 10 ? `0${hours}` : hours}`;
+            minuteEl.innerHTML = `${minutes < 10 ? `0${minutes}` : minutes}`;
+            secondEl.innerHTML = `${seconds < 10 ? `0${seconds}` : seconds}`;
+          };
+          const MS_PER_DAY = 864e5;
+          const MS_PER_HOUR = 36e5;
+          const MS_PER_MINUTE = 6e4;
+          const MS_PER_SECOND = 1e3;
+          const moveTimer = () => {
+            const now = (/* @__PURE__ */ new Date()).getTime();
+            const distance = countDownDate - now;
+            const days = Math.floor(distance / MS_PER_DAY);
+            const hours = Math.floor(distance % MS_PER_DAY / MS_PER_HOUR);
+            const minutes = Math.floor(distance % MS_PER_HOUR / MS_PER_MINUTE);
+            const seconds = Math.floor(distance % MS_PER_MINUTE / MS_PER_SECOND);
+            setTimer(days, hours, minutes, seconds);
+            if (distance < 0) {
+              clearInterval(this.__gjsCountdownInterval);
+              endTextEl.innerHTML = endTxt;
+              countdownEl.style.display = "none";
+              endTextEl.style.display = "";
+            }
+          };
+          if (countDownDate) {
+            this.__gjsCountdownInterval = setInterval(moveTimer, 1e3);
+            endTextEl.style.display = "none";
+            countdownEl.style.display = "";
+            moveTimer();
+          } else {
+            setTimer(0, 0, 0, 0);
+          }
+        },
+        "script-props": ["startfrom", "endText"],
+        traits: [
+          {
+            label: "Start",
+            name: "startfrom",
+            changeProp: true,
+            type: countdownDateInputType
+          },
+          {
+            label: "End text",
+            name: "endText",
+            changeProp: true
+          }
+        ],
+        components: `
+              <span data-js="countdown" class="${countdownPfx}-cont">
+                <div class="${countdownPfx}-block">
+                  <div data-js="countdown-day" class="${countdownPfx}-digit"></div>
+                  <div class="${countdownPfx}-label">${countdownLabelDays}</div>
+                </div>
+                <div class="${countdownPfx}-block">
+                  <div data-js="countdown-hour" class="${countdownPfx}-digit"></div>
+                  <div class="${countdownPfx}-label">${countdownLabelHours}</div>
+                </div>
+                <div class="${countdownPfx}-block">
+                  <div data-js="countdown-minute" class="${countdownPfx}-digit"></div>
+                  <div class="${countdownPfx}-label">${countdownLabelMinutes}</div>
+                </div>
+                <div class="${countdownPfx}-block">
+                  <div data-js="countdown-second" class="${countdownPfx}-digit"></div>
+                  <div class="${countdownPfx}-label">${countdownLabelSeconds}</div>
+                </div>
+              </span>
+              <span data-js="countdown-endtext" class="${countdownPfx}-endtext"></span>
+            `,
+        styles: (countdownStyle || `
+              .${countdownPfx} {
+                text-align: center;
+              }
+    
+              .${countdownPfx}-block {
+                display: inline-block;
+                margin: 0 10px;
+                padding: 10px;
+              }
+    
+              .${countdownPfx}-digit {
+                font-size: 5rem;
+              }
+    
+              .${countdownPfx}-endtext {
+                font-size: 5rem;
+              }
+    
+              .${countdownPfx}-cont {
+                display: inline-block;
+              }
+            `) + countdownStyleAdditional,
+        ...countdownProps
+      }
+    }
+  });
+};
+export {
+  countdown_default as default
+};

package/dist/common/grapesBlocks/components/customCode.d.ts

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