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

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

@@ -0,0 +1,284 @@
+const typeForm = "form";
+const typeInput = "input";
+const typeTextarea = "textarea";
+const typeSelect = "select";
+const typeCheckbox = "checkbox";
+const typeRadio = "radio";
+const typeButton = "button";
+const typeLabel = "label";
+const typeOption = "option";
+function components_default(editor) {
+  const { Components } = editor;
+  const idTrait = {
+    name: "id"
+  };
+  const forTrait = {
+    name: "for"
+  };
+  const nameTrait = {
+    name: "name"
+  };
+  const placeholderTrait = {
+    name: "placeholder"
+  };
+  const valueTrait = {
+    name: "value"
+  };
+  const requiredTrait = {
+    type: "checkbox",
+    name: "required"
+  };
+  const checkedTrait = {
+    type: "checkbox",
+    name: "checked"
+  };
+  const createOption = (value, content) => {
+    return { type: typeOption, content, attributes: { value } };
+  };
+  const checkIfInPreview = (ev) => {
+    if (!editor.Commands.isActive("preview")) {
+      ev.preventDefault();
+    }
+  };
+  Components.addType(typeForm, {
+    isComponent: (el) => el.tagName === "FORM",
+    model: {
+      defaults: {
+        tagName: "form",
+        droppable: ":not(form)",
+        draggable: ":not(form)",
+        attributes: { method: "get" },
+        traits: [
+          {
+            type: "select",
+            name: "method",
+            options: [
+              {
+                value: "get",
+                name: "GET",
+                id: ""
+              },
+              {
+                value: "post",
+                name: "POST",
+                id: ""
+              }
+            ]
+          },
+          {
+            name: "action"
+          }
+        ]
+      }
+    },
+    view: {
+      events: {
+        // The submit of the form might redirect the user from the editor so
+        // we should always prevent the default here.
+        submit: (e) => e.preventDefault()
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      }
+    }
+  });
+  Components.addType(typeInput, {
+    isComponent: (el) => el.tagName === "INPUT",
+    model: {
+      defaults: {
+        tagName: "input",
+        droppable: false,
+        highlightable: false,
+        attributes: { type: "text" },
+        traits: [
+          nameTrait,
+          placeholderTrait,
+          {
+            type: "select",
+            name: "type",
+            options: [
+              {
+                value: "text",
+                id: ""
+              },
+              {
+                value: "email",
+                id: ""
+              },
+              {
+                value: "password",
+                id: ""
+              },
+              {
+                value: "number",
+                id: ""
+              }
+            ]
+          },
+          requiredTrait
+        ]
+      }
+    },
+    extendFnView: ["updateAttributes"],
+    view: {
+      updateAttributes() {
+        this.el.setAttribute("autocomplete", "off");
+      }
+    }
+  });
+  Components.addType(typeTextarea, {
+    extend: typeInput,
+    isComponent: (el) => el.tagName === "TEXTAREA",
+    model: {
+      defaults: {
+        tagName: "textarea",
+        attributes: {},
+        traits: [nameTrait, placeholderTrait, requiredTrait]
+      }
+    }
+  });
+  Components.addType(typeOption, {
+    isComponent: (el) => el.tagName === "OPTION",
+    model: {
+      defaults: {
+        tagName: "option",
+        layerable: false,
+        droppable: false,
+        draggable: false,
+        highlightable: false
+      }
+    }
+  });
+  Components.addType(typeSelect, {
+    isComponent: (el) => el.tagName === "SELECT",
+    model: {
+      defaults: {
+        tagName: "select",
+        droppable: false,
+        highlightable: false,
+        components: [createOption("opt1", "Option 1"), createOption("opt2", "Option 2")],
+        traits: [
+          nameTrait,
+          {
+            name: "options",
+            type: "select-options"
+          },
+          requiredTrait
+        ]
+      }
+    },
+    view: {
+      events: {
+        mousedown: checkIfInPreview
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      }
+    }
+  });
+  Components.addType(typeCheckbox, {
+    extend: typeInput,
+    isComponent: (el) => el.tagName === "INPUT" && el.type === "checkbox",
+    model: {
+      defaults: {
+        copyable: false,
+        attributes: { type: "checkbox" },
+        traits: [idTrait, nameTrait, valueTrait, requiredTrait, checkedTrait]
+      }
+    },
+    view: {
+      events: {
+        click: checkIfInPreview
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      },
+      init() {
+        this.listenTo(this.model, "change:attributes:checked", this.handleChecked);
+      },
+      handleChecked() {
+        this.el.checked = !!this.model.get("attributes")?.checked;
+      }
+    }
+  });
+  Components.addType(typeRadio, {
+    extend: typeCheckbox,
+    isComponent: (el) => el.tagName === "INPUT" && el.type === "radio",
+    model: {
+      defaults: {
+        attributes: { type: "radio" }
+      }
+    }
+  });
+  Components.addType(typeButton, {
+    extend: typeInput,
+    isComponent: (el) => el.tagName === "BUTTON",
+    model: {
+      defaults: {
+        tagName: "button",
+        attributes: { type: "button" },
+        text: "Send",
+        traits: [
+          {
+            name: "text",
+            changeProp: true
+          },
+          {
+            type: "select",
+            name: "type",
+            options: [
+              {
+                value: "button",
+                id: ""
+              },
+              {
+                value: "submit",
+                id: ""
+              },
+              {
+                value: "reset",
+                id: ""
+              }
+            ]
+          }
+        ]
+      },
+      init() {
+        const comps = this.components();
+        const tChild = comps.length === 1 && comps.models[0];
+        const chCnt = tChild && tChild.is("textnode") && tChild.get("content") || "";
+        const text = chCnt || this.get("text");
+        this.set("text", text);
+        this.on("change:text", this.__onTextChange);
+        text !== chCnt && this.__onTextChange();
+      },
+      __onTextChange() {
+        this.components(this.get("text"));
+      }
+    },
+    view: {
+      events: {
+        click: checkIfInPreview
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      }
+    }
+  });
+  Components.addType(typeLabel, {
+    extend: "text",
+    isComponent: (el) => el.tagName === "LABEL",
+    model: {
+      defaults: {
+        tagName: "label",
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        components: "Label",
+        traits: [forTrait]
+      }
+    }
+  });
+}
+export {
+  components_default as default,
+  typeButton,
+  typeCheckbox,
+  typeForm,
+  typeInput,
+  typeLabel,
+  typeOption,
+  typeRadio,
+  typeSelect,
+  typeTextarea
+};

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

@@ -0,0 +1,21 @@
+import type { BlockProperties, Plugin } from 'grapesjs';
+export type PluginOptions = {
+    /**
+     * Which blocks to add.
+     * @default ['form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio']
+     */
+    blocks?: string[];
+    /**
+     * Category name for blocks.
+     * @default 'Forms'
+     */
+    category?: BlockProperties['category'];
+    /**
+     * Add custom block options, based on block id.
+     * @default (blockId) => ({})
+     * @example (blockId) => blockId === 'input' ? { attributes: {...} } : {};
+     */
+    block?: (blockId: string) => {};
+};
+declare const plugin: Plugin<PluginOptions>;
+export default plugin;

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

@@ -0,0 +1,18 @@
+import loadBlocks from "./blocks.js";
+import loadComponents from "./components.js";
+import loadTraits from "./traits.js";
+const plugin = (editor, opts = {}) => {
+  const config = {
+    blocks: ["form", "input", "textarea", "select", "button", "label", "checkbox", "radio"],
+    category: { id: "forms", label: "Forms" },
+    block: () => ({}),
+    ...opts
+  };
+  loadComponents(editor);
+  loadTraits(editor);
+  loadBlocks(editor, config);
+};
+var forms_default = plugin;
+export {
+  forms_default as default
+};

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

@@ -0,0 +1,2 @@
+import type { Editor } from 'grapesjs';
+export default function (editor: Editor): void;

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

@@ -0,0 +1,47 @@
+import { typeOption } from "./components.js";
+function traits_default(editor) {
+  const trm = editor.TraitManager;
+  trm.addType("select-options", {
+    events: {
+      keyup: "onChange"
+    },
+    onValueChange() {
+      const { model, target } = this;
+      const optionsStr = model.get("value").trim();
+      const options = optionsStr.split("\n");
+      const optComps = [];
+      for (let i = 0; i < options.length; i++) {
+        const optionStr = options[i];
+        const option = optionStr.split("::");
+        optComps.push({
+          type: typeOption,
+          components: option[1] || option[0],
+          attributes: { value: option[0] }
+        });
+      }
+      target.components().reset(optComps);
+      target.view?.render();
+    },
+    getInputEl() {
+      if (!this.$input) {
+        const optionsArr = [];
+        const options = this.target.components();
+        for (let i = 0; i < options.length; i++) {
+          const option = options.models[i];
+          const optAttr = option.get("attributes");
+          const optValue = optAttr?.value || "";
+          const optTxtNode = option.components().models[0];
+          const optLabel = optTxtNode?.get("content") || "";
+          optionsArr.push(`${optValue}::${optLabel}`);
+        }
+        const el = document.createElement("textarea");
+        el.value = optionsArr.join("\n");
+        this.$input = el;
+      }
+      return this.$input;
+    }
+  });
+}
+export {
+  traits_default as default
+};

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

@@ -0,0 +1,9 @@
+export { default as blocks } from './blocks/index.js';
+export { default as customCode } from './code/index.js';
+export { default as forms } from './forms/index.js';
+export { default as rte } from './rte/index.js';
+export { default as tabs } from './tabs/index.js';
+export { default as typed } from './typed/index.js';
+export { default as countdown } from './countdown.js';
+export { default as tooltip } from './tooltip.js';
+export { default as tuiImageEditor } from './tuiImageEditor.js';

package/dist/wysiwyg/editorPlugins/index.js

@@ -0,0 +1,20 @@
+import { default as default2 } from "./blocks/index.js";
+import { default as default3 } from "./code/index.js";
+import { default as default4 } from "./forms/index.js";
+import { default as default5 } from "./rte/index.js";
+import { default as default6 } from "./tabs/index.js";
+import { default as default7 } from "./typed/index.js";
+import { default as default8 } from "./countdown.js";
+import { default as default9 } from "./tooltip.js";
+import { default as default10 } from "./tuiImageEditor.js";
+export {
+  default2 as blocks,
+  default8 as countdown,
+  default3 as customCode,
+  default4 as forms,
+  default5 as rte,
+  default6 as tabs,
+  default9 as tooltip,
+  default10 as tuiImageEditor,
+  default7 as typed
+};

package/dist/wysiwyg/editorPlugins/rte/colorPicker.d.ts

@@ -0,0 +1,95 @@
+interface ColorPickerOptions {
+    open?: HTMLElement | string;
+    openEvent?: string;
+    style?: {
+        display?: string;
+        [key: string]: string | undefined;
+    };
+    template?: string;
+    autoclose?: boolean;
+    closeOnBlur?: boolean;
+}
+export default class ColorPicker {
+    private elm;
+    private cbs;
+    private color;
+    private isOpen;
+    private colors;
+    private options;
+    /**
+     * ColorPicker
+     * Creates a new `ColorPicker` instance.
+     *
+     * @name ColorPicker
+     * @function
+     * @param {String|HTMLElement} sel The element where the color picker will live.
+     * @param {Array<string>} colors An array of strings representing colors.
+     * @param {Object} options An object containing the following fields:
+     *
+     *  - `open` (String|HTMLElement): The HTML element or query selector which will open the picker.
+     *  - `openEvent` (String): The open event (default: `"click"`).
+     *  - `style` (Object): Some style options:
+     *    - `display` (String): The display value when the picker is opened (default: `"block"`).
+     *  - `template` (String): The color item template. The `{color}` snippet will be replaced
+     *    with the color value (default: `"<div data-col=\"{color}\" style=\"background-color: {color}\"></div>"`).
+     *  - `autoclose` (Boolean): If `false`, the color picker will not be hided by default (default: `true`).
+     *  - `closeOnBlur` (Boolean): If `true`, the color picker will be closed when clicked outside of it (default: `false`).
+     *
+     * @return {ColorPicker} The `ColorPicker` instance.
+     */
+    constructor(sel: string | HTMLElement, colors?: string[], options?: ColorPickerOptions);
+    /**
+     * getElm
+     * Finds the HTML element.
+     *
+     * @name getElm
+     * @function
+     * @param {String|HTMLElement} el The HTML element or query selector.
+     * @return {HTMLElement} The selected HTML element.
+     */
+    private getElm;
+    /**
+     * render
+     * Renders the colors.
+     *
+     * @name render
+     * @function
+     */
+    render(): void;
+    /**
+     * close
+     * Closes the color picker.
+     *
+     * @name close
+     * @function
+     */
+    close(): void;
+    /**
+     * open
+     * Opens the color picker.
+     *
+     * @name open
+     * @function
+     */
+    open(): void;
+    /**
+     * colorChosen
+     * Adds a new callback in the colorChosen callback buffer.
+     *
+     * @name colorChosen
+     * @function
+     * @param {Function} cb The callback function called with the selected color.
+     */
+    colorChosen(cb: (color: string) => void): void;
+    /**
+     * set
+     * Sets the color picker color.
+     *
+     * @name set
+     * @function
+     * @param {String} c The color to set.
+     * @param {Boolean} p If `false`, the `colorChosen` callbacks will not be called.
+     */
+    set(c: string, p?: boolean): void;
+}
+export {};

package/dist/wysiwyg/editorPlugins/rte/colorPicker.js

@@ -0,0 +1,185 @@
+class ColorPicker {
+  elm;
+  cbs;
+  color;
+  isOpen;
+  colors;
+  options;
+  /**
+   * ColorPicker
+   * Creates a new `ColorPicker` instance.
+   *
+   * @name ColorPicker
+   * @function
+   * @param {String|HTMLElement} sel The element where the color picker will live.
+   * @param {Array<string>} colors An array of strings representing colors.
+   * @param {Object} options An object containing the following fields:
+   *
+   *  - `open` (String|HTMLElement): The HTML element or query selector which will open the picker.
+   *  - `openEvent` (String): The open event (default: `"click"`).
+   *  - `style` (Object): Some style options:
+   *    - `display` (String): The display value when the picker is opened (default: `"block"`).
+   *  - `template` (String): The color item template. The `{color}` snippet will be replaced
+   *    with the color value (default: `"<div data-col=\"{color}\" style=\"background-color: {color}\"></div>"`).
+   *  - `autoclose` (Boolean): If `false`, the color picker will not be hided by default (default: `true`).
+   *  - `closeOnBlur` (Boolean): If `true`, the color picker will be closed when clicked outside of it (default: `false`).
+   *
+   * @return {ColorPicker} The `ColorPicker` instance.
+   */
+  constructor(sel, colors, options = {}) {
+    const defaultColors = [
+      "#1abc9c",
+      "#2ecc71",
+      "#3498db",
+      "#9b59b6",
+      "#34495e",
+      "#16a085",
+      "#27ae60",
+      "#2980b9",
+      "#8e44ad",
+      "#2c3e50",
+      "#f1c40f",
+      "#e67e22",
+      "#e74c3c",
+      "#ecf0f1",
+      "#95a5a6",
+      "#f39c12",
+      "#d35400",
+      "#c0392b",
+      "#bdc3c7",
+      "#7f8c8d"
+    ];
+    this.colors = colors || defaultColors;
+    this.options = {
+      openEvent: "click",
+      style: {
+        display: "block"
+      },
+      closeOnBlur: false,
+      template: '<div data-col="{color}" style="background-color: {color}" title="{color}" ></div>',
+      autoclose: true,
+      ...options
+    };
+    if (typeof this.options.open === "string") {
+      this.options.open = this.getElm(this.options.open);
+    }
+    this.elm = this.getElm(sel);
+    this.cbs = [];
+    this.color = "";
+    this.isOpen = true;
+    this.render();
+    if (this.options.open) {
+      this.options.open.addEventListener(this.options.openEvent || "click", () => {
+        this.isOpen ? this.close() : this.open();
+      });
+    }
+    this.elm.addEventListener("click", (ev) => {
+      const target = ev.target;
+      const col = target.getAttribute("data-col");
+      if (!col) {
+        return;
+      }
+      this.color = col;
+      this.set(col);
+      this.close();
+    });
+    if (this.options.closeOnBlur) {
+      window.addEventListener("click", (ev) => {
+        const target = ev.target;
+        if (target !== this.options.open && target !== this.elm && this.isOpen) {
+          this.close();
+        }
+      });
+    }
+    if (this.options.autoclose !== false) {
+      this.close();
+    }
+  }
+  /**
+   * getElm
+   * Finds the HTML element.
+   *
+   * @name getElm
+   * @function
+   * @param {String|HTMLElement} el The HTML element or query selector.
+   * @return {HTMLElement} The selected HTML element.
+   */
+  getElm(el) {
+    if (typeof el === "string") {
+      const element = document.querySelector(el);
+      if (!element) {
+        throw new Error(`Element ${el} not found`);
+      }
+      return element;
+    }
+    return el;
+  }
+  /**
+   * render
+   * Renders the colors.
+   *
+   * @name render
+   * @function
+   */
+  render() {
+    let html = "";
+    this.colors.forEach((color) => {
+      html += this.options.template?.replace(/\{color\}/g, color) || "";
+    });
+    this.elm.innerHTML = html;
+  }
+  /**
+   * close
+   * Closes the color picker.
+   *
+   * @name close
+   * @function
+   */
+  close() {
+    this.elm.style.display = "none";
+    this.isOpen = false;
+  }
+  /**
+   * open
+   * Opens the color picker.
+   *
+   * @name open
+   * @function
+   */
+  open() {
+    this.elm.style.display = this.options.style?.display || "block";
+    this.isOpen = true;
+  }
+  /**
+   * colorChosen
+   * Adds a new callback in the colorChosen callback buffer.
+   *
+   * @name colorChosen
+   * @function
+   * @param {Function} cb The callback function called with the selected color.
+   */
+  colorChosen(cb) {
+    this.cbs.push(cb);
+  }
+  /**
+   * set
+   * Sets the color picker color.
+   *
+   * @name set
+   * @function
+   * @param {String} c The color to set.
+   * @param {Boolean} p If `false`, the `colorChosen` callbacks will not be called.
+   */
+  set(c, p = true) {
+    this.color = c;
+    if (p === false) {
+      return;
+    }
+    this.cbs.forEach((cb) => {
+      cb?.(c);
+    });
+  }
+}
+export {
+  ColorPicker as default
+};