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

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

@@ -0,0 +1,47 @@
+import type { BlockProperties, ComponentDefinition, Plugin } from 'grapesjs';
+export type PluginOptions = {
+    /**
+     * Object to extend the default custom code block. Pass a falsy value to avoid adding the block
+     * @example
+     * { label: 'Custom Code', category: 'Extra', ... }
+     */
+    blockCustomCode?: Partial<BlockProperties>;
+    /**
+     * Object to extend the default custom code properties.
+     * @example
+     * { name: 'Custom Code', droppable: false, ... }
+     */
+    propsCustomCode?: ComponentDefinition;
+    /**
+     * Object to extend the default component's toolbar button for the code. Pass a falsy value to avoid adding the button
+     * @example
+     * { label: '</>', attributes: { title: 'Open custom code' } }
+     */
+    toolbarBtnCustomCode?: Record<string, any>;
+    /**
+     * Content to show when the custom code contains `<script>`
+     */
+    placeholderScript?: string;
+    /**
+     * Title for the custom code modal
+     * @default 'Insert your code'
+     */
+    modalTitle?: string;
+    /**
+     * Additional options for the code viewer.
+     * @example
+     * { theme: 'hopscotch', readOnly: 0 }
+     */
+    codeViewOptions?: Record<string, any>;
+    /**
+     * Label for the default save button
+     * @default 'Save'
+     */
+    buttonLabel?: string;
+    /**
+     * Object to extend the default custom code command.
+     */
+    commandCustomCode?: Record<string, any>;
+};
+declare const plugin: Plugin<PluginOptions>;
+export default plugin;

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

@@ -0,0 +1,28 @@
+import loadBlocks from "./blocks.js";
+import loadCommands from "./commands.js";
+import loadComponents from "./components.js";
+const plugin = (editor, opts = {}) => {
+  const options = {
+    blockCustomCode: {},
+    propsCustomCode: {},
+    toolbarBtnCustomCode: {},
+    placeholderScript: `<div style="pointer-events: none; padding: 10px;">
+      <svg viewBox="0 0 24 24" style="height: 30px; vertical-align: middle;">
+        <path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"></path>
+        </svg>
+      Custom code with <i>&lt;script&gt;</i> can't be rendered on the canvas
+    </div>`,
+    modalTitle: "Insert your code",
+    codeViewOptions: {},
+    buttonLabel: "Save",
+    commandCustomCode: {},
+    ...opts
+  };
+  loadComponents(editor, options);
+  loadBlocks(editor, options);
+  loadCommands(editor, options);
+};
+var code_default = plugin;
+export {
+  code_default as default
+};

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

@@ -0,0 +1,3 @@
+export declare const keyCustomCode = "custom-code-plugin__code";
+export declare const typeCustomCode = "custom-code";
+export declare const commandNameCustomCode = "custom-code:open-modal";

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

@@ -0,0 +1,8 @@
+const keyCustomCode = "custom-code-plugin__code";
+const typeCustomCode = "custom-code";
+const commandNameCustomCode = "custom-code:open-modal";
+export {
+  commandNameCustomCode,
+  keyCustomCode,
+  typeCustomCode
+};

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

@@ -0,0 +1,86 @@
+import type { BlockProperties, ComponentDefinition, Plugin } from 'grapesjs';
+export type PluginOptions = {
+    /**
+     * The ID used to create the block and component
+     * @default 'countdown'
+     */
+    id?: string;
+    /**
+     * The label used for the block and the component.
+     * @default 'Countdown'
+     */
+    label?: string;
+    /**
+     * Object to extend the default block. Pass a falsy value to avoid adding the block.
+     * @example
+     * { label: 'Countdown', category: 'Extra', ... }
+     */
+    block?: Partial<BlockProperties>;
+    /**
+     * Object to extend the default component properties.
+     * @example
+     * { name: 'Countdown', droppable: false, ... }
+     */
+    props?: ComponentDefinition;
+    /**
+     * Custom CSS styles for the component. This will replace the default one.
+     * @default ''
+     */
+    style?: string;
+    /**
+     * Additional CSS styles for the component. These will be appended to the default one.
+     * @default ''
+     */
+    styleAdditional?: string;
+    /**
+     * Default start time.
+     * @default ''
+     * @example '2018-01-25 00:00'
+     */
+    startTime?: string;
+    /**
+     * Text to show when the countdown is ended.
+     * @default 'EXPIRED'
+     */
+    endText?: string;
+    /**
+     * Date input type, eg. `date`, `datetime-local`
+     * @default 'date'
+     */
+    dateInputType?: string;
+    /**
+     * Days label text used in component.
+     * @default 'days'
+     */
+    labelDays?: string;
+    /**
+     * Hours label text used in component.
+     * @default 'hours'
+     */
+    labelHours?: string;
+    /**
+     * Minutes label text used in component.
+     * @default 'minutes'
+     */
+    labelMinutes?: string;
+    /**
+     * Seconds label text used in component.
+     * @default 'seconds'
+     */
+    labelSeconds?: string;
+    /**
+     * Countdown component class prefix.
+     * @default 'countdown'
+     */
+    classPrefix?: string;
+};
+type TElement = HTMLElement & {
+    __gjsCountdownInterval: NodeJS.Timer;
+};
+declare global {
+    interface Window {
+        __gjsCountdownIntervals: TElement[];
+    }
+}
+declare const plugin: Plugin<PluginOptions>;
+export default plugin;

package/dist/wysiwyg/editorPlugins/countdown.js

@@ -0,0 +1,163 @@
+const plugin = (editor, opts = {}) => {
+  const options = {
+    id: "countdown",
+    label: "Countdown",
+    block: {},
+    props: {},
+    style: "",
+    styleAdditional: "",
+    startTime: "",
+    endText: "EXPIRED",
+    dateInputType: "date",
+    labelDays: "days",
+    labelHours: "hours",
+    labelMinutes: "minutes",
+    labelSeconds: "seconds",
+    classPrefix: "countdown",
+    ...opts
+  };
+  const { block, props, style } = options;
+  const id = options.id;
+  const label = options.label;
+  const pfx = options.classPrefix;
+  if (block) {
+    editor.Blocks.add(id, {
+      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,
+      category: "Extra",
+      select: true,
+      content: { type: id },
+      ...block
+    });
+  }
+  const countdownScript = function(props2) {
+    const startfrom = props2.startfrom;
+    const endTxt = props2.endText;
+    const el = this;
+    const countDownDate = new Date(startfrom).getTime();
+    const countdownEl = el.querySelector("[data-js=countdown]");
+    const endTextEl = el.querySelector("[data-js=countdown-endtext]");
+    const dayEl = el.querySelector("[data-js=countdown-day]");
+    const hourEl = el.querySelector("[data-js=countdown-hour]");
+    const minuteEl = el.querySelector("[data-js=countdown-minute]");
+    const secondEl = el.querySelector("[data-js=countdown-second]");
+    const oldInterval = el.__gjsCountdownInterval;
+    oldInterval && clearInterval(oldInterval);
+    const connected = window.__gjsCountdownIntervals || [];
+    const toClean = [];
+    connected.forEach((item) => {
+      if (!item.isConnected) {
+        clearInterval(item.__gjsCountdownInterval);
+        toClean.push(item);
+      }
+    });
+    connected.indexOf(el) < 0 && connected.push(el);
+    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 moveTimer = () => {
+      const now = (/* @__PURE__ */ new Date()).getTime();
+      const distance = countDownDate - now;
+      const days = Math.floor(distance / 864e5);
+      const hours = Math.floor(distance % 864e5 / 36e5);
+      const minutes = Math.floor(distance % 36e5 / 6e4);
+      const seconds = Math.floor(distance % 6e4 / 1e3);
+      setTimer(days, hours, minutes, seconds);
+      if (distance < 0) {
+        clearInterval(el.__gjsCountdownInterval);
+        endTextEl.innerHTML = endTxt;
+        countdownEl.style.display = "none";
+        endTextEl.style.display = "";
+      }
+    };
+    if (countDownDate) {
+      el.__gjsCountdownInterval = setInterval(moveTimer, 1e3);
+      endTextEl.style.display = "none";
+      countdownEl.style.display = "";
+      moveTimer();
+    } else {
+      setTimer(0, 0, 0, 0);
+    }
+  };
+  editor.Components.addType(id, {
+    model: {
+      defaults: {
+        startfrom: options.startTime,
+        classes: [pfx],
+        endText: options.endText,
+        droppable: false,
+        script: countdownScript,
+        "script-props": ["startfrom", "endText"],
+        traits: [
+          {
+            label: "Start",
+            name: "startfrom",
+            changeProp: true,
+            type: options.dateInputType
+          },
+          {
+            label: "End text",
+            name: "endText",
+            changeProp: true
+          }
+        ],
+        // @ts-ignore
+        components: `
+          <span data-js="countdown" class="${pfx}-cont">
+            <div class="${pfx}-block">
+              <div data-js="countdown-day" class="${pfx}-digit"></div>
+              <div class="${pfx}-label">${options.labelDays}</div>
+            </div>
+            <div class="${pfx}-block">
+              <div data-js="countdown-hour" class="${pfx}-digit"></div>
+              <div class="${pfx}-label">${options.labelHours}</div>
+            </div>
+            <div class="${pfx}-block">
+              <div data-js="countdown-minute" class="${pfx}-digit"></div>
+              <div class="${pfx}-label">${options.labelMinutes}</div>
+            </div>
+            <div class="${pfx}-block">
+              <div data-js="countdown-second" class="${pfx}-digit"></div>
+              <div class="${pfx}-label">${options.labelSeconds}</div>
+            </div>
+          </span>
+          <span data-js="countdown-endtext" class="${pfx}-endtext"></span>
+        `,
+        styles: (style || `
+          .${pfx} {
+            text-align: center;
+          }
+
+          .${pfx}-block {
+            display: inline-block;
+            margin: 0 10px;
+            padding: 10px;
+          }
+
+          .${pfx}-digit {
+            font-size: 5rem;
+          }
+
+          .${pfx}-endtext {
+            font-size: 5rem;
+          }
+
+          .${pfx}-cont {
+            display: inline-block;
+          }
+        `) + options.styleAdditional,
+        ...props
+      }
+    }
+  });
+};
+var countdown_default = plugin;
+export {
+  countdown_default as default
+};

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

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

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

@@ -0,0 +1,93 @@
+import {
+  typeButton,
+  typeCheckbox,
+  typeForm,
+  typeInput,
+  typeLabel,
+  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)
+    });
+  };
+  addBlock(typeForm, {
+    label: "Form",
+    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",
+    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",
+    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",
+    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",
+    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",
+    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",
+    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",
+    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
+};

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

@@ -0,0 +1,11 @@
+import type { Editor } from 'grapesjs';
+export declare const typeForm = "form";
+export declare const typeInput = "input";
+export declare const typeTextarea = "textarea";
+export declare const typeSelect = "select";
+export declare const typeCheckbox = "checkbox";
+export declare const typeRadio = "radio";
+export declare const typeButton = "button";
+export declare const typeLabel = "label";
+export declare const typeOption = "option";
+export default function (editor: Editor): void;