@studiocms/wysiwyg 0.1.0-beta.24

package/dist/common/grapesBlocks/traits/formTraits.js

@@ -0,0 +1,51 @@
+import { typeOption } from "../consts.js";
+import { AddTrait } from "./index.js";
+var formTraits_default = (editor) => {
+  const addTrait = AddTrait(editor);
+  addTrait("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];
+        if (!optionStr.trim()) continue;
+        const option = optionStr.split("::");
+        if (option.length === 0) continue;
+        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.at(i);
+          if (!option) continue;
+          const optAttr = option.get("attributes");
+          const optValue = optAttr?.value || "";
+          const optTxtNode = option.components().at(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 {
+  formTraits_default as default
+};

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

@@ -0,0 +1,4 @@
+import type { CustomTrait, Editor } from 'grapesjs';
+export declare const AddTrait: (editor: Editor) => <T>(id: string, def: CustomTrait<T>) => void;
+export declare function loadTraits(editor: Editor): void;
+export default loadTraits;

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

@@ -0,0 +1,15 @@
+import formTraits from "./formTraits.js";
+import typedTraits from "./typedTraits.js";
+const AddTrait = (editor) => (id, def) => {
+  editor.TraitManager.addType(id, def);
+};
+function loadTraits(editor) {
+  typedTraits(editor);
+  formTraits(editor);
+}
+var traits_default = loadTraits;
+export {
+  AddTrait,
+  traits_default as default,
+  loadTraits
+};

package/dist/common/grapesBlocks/traits/typedTraits.d.ts

@@ -0,0 +1,3 @@
+import type { Editor } from 'grapesjs';
+declare const _default: (editor: Editor) => void;
+export default _default;

package/dist/common/grapesBlocks/traits/typedTraits.js

@@ -0,0 +1,24 @@
+import { typedTraitStringId } from "../consts.js";
+import { AddTrait } from "./index.js";
+var typedTraits_default = (editor) => {
+  const addTrait = AddTrait(editor);
+  addTrait(typedTraitStringId, {
+    createInput({ component }) {
+      const strings = component.get("strings");
+      const stringsArray = Array.isArray(strings) ? strings : [];
+      return `<textarea>${stringsArray.join("\n")}</textarea>`;
+    },
+    onUpdate({ component, elInput }) {
+      const strings = component.get("strings");
+      const stringsArray = Array.isArray(strings) ? strings : [];
+      elInput.value = stringsArray.join("\n");
+    },
+    onEvent({ component, elInput }) {
+      const value = (elInput.value || "").split("\n");
+      component.set("strings", value);
+    }
+  });
+};
+export {
+  typedTraits_default as default
+};

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

@@ -0,0 +1,86 @@
+import type { Component, Editor } from 'grapesjs';
+type ImageEditor = tuiImageEditor.ImageEditor;
+type IOptions = tuiImageEditor.IOptions;
+export type PluginOptions = {
+    /**
+     * TOAST UI's configurations
+     * https://nhn.github.io/tui.image-editor/latest/ImageEditor
+     */
+    config?: IOptions;
+    /**
+     * Pass the editor constructor.
+     * By default, the `tui.ImageEditor` will be used.
+     */
+    constructor?: any;
+    /**
+     * Label for the image editor (used in the modal)
+     * @default 'Image Editor'
+     */
+    labelImageEditor?: string;
+    /**
+     * Label used on the apply button
+     * @default 'Apply'
+     */
+    labelApply?: string;
+    /**
+     * Default editor height
+     * @default '650px'
+     */
+    height?: string;
+    /**
+     * Default editor width
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * Id to use to create the image editor command
+     * @default 'tui-image-editor'
+     */
+    commandId?: string;
+    /**
+     * Icon used in the image component toolbar. Pass an empty string to avoid adding the icon.
+     */
+    toolbarIcon?: string;
+    /**
+     * Hide the default editor header
+     * @default true
+     */
+    hideHeader?: boolean;
+    /**
+     * By default, GrapesJS takes the modified image, adds it to the Asset Manager and update the target.
+     * If you need some custom logic you can use this custom 'onApply' function.
+     * @example
+     * onApply: (imageEditor, imageModel) => {
+     *    const dataUrl = imageEditor.toDataURL();
+     *    editor.AssetManager.add({ src: dataUrl }); // Add it to Assets
+     *    imageModel.set('src', dataUrl); // Update the image component
+     * }
+     */
+    onApply?: ((imageEditor: ImageEditor, imageModel: Component) => void) | null;
+    /**
+     * If no custom `onApply` is passed and this option is `true`, the result image will be added to assets
+     * @default true
+     */
+    addToAssets?: boolean;
+    /**
+     * If no custom `onApply` is passed, on confirm, the edited image, will be passed to the
+     * AssetManager's uploader and the result (eg. instead of having the dataURL you'll have the URL)
+     * will be passed to the default `onApply` process (update target, etc.)
+     */
+    upload?: boolean;
+    /**
+     * The apply button (HTMLElement) will be passed as an argument to this function, once created.
+     * This will allow you a higher customization.
+     */
+    onApplyButton?: (btn: HTMLElement) => void;
+    /**
+     * Scripts to load dynamically in case no TOAST UI editor instance was found
+     */
+    script?: string[];
+    /**
+     * In case the script is loaded this style will be loaded too
+     */
+    style?: string[];
+};
+declare const plugin: (editor: Editor) => void;
+export default plugin;

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

@@ -0,0 +1,203 @@
+const plugin = (editor) => {
+  const opts = {
+    config: {},
+    constructor: "",
+    labelImageEditor: "Image Editor",
+    labelApply: "Apply",
+    height: "650px",
+    width: "100%",
+    commandId: "tui-image-editor",
+    toolbarIcon: `<svg viewBox="0 0 24 24">
+                    <path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z">
+                    </path>
+                  </svg>`,
+    hideHeader: true,
+    addToAssets: true,
+    upload: false,
+    onApplyButton: () => {
+    },
+    onApply: null,
+    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",
+      "https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js"
+    ],
+    style: [
+      "https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css",
+      "https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css"
+    ]
+  };
+  const { script, style, height, width, hideHeader, onApply, upload, addToAssets, commandId } = opts;
+  const hasWindow = typeof window !== "undefined";
+  const getConstructor = () => {
+    return opts.constructor || hasWindow && window.tui?.ImageEditor;
+  };
+  let constr = getConstructor();
+  if (!constr && script?.length && hasWindow) {
+    const { head } = document;
+    const scripts = Array.isArray(script) ? [...script] : [script];
+    const styles = Array.isArray(style) ? [...style] : [style];
+    const appendStyle = (styles2) => {
+      if (styles2.length) {
+        const link = document.createElement("link");
+        link.href = styles2.shift();
+        link.rel = "stylesheet";
+        head.appendChild(link);
+        appendStyle(styles2);
+      }
+    };
+    const appendScript = (scripts2) => {
+      if (scripts2.length) {
+        const scr = document.createElement("script");
+        scr.src = scripts2.shift();
+        scr.onerror = scr.onload = appendScript.bind(null, scripts2);
+        head.appendChild(scr);
+      } else {
+        constr = getConstructor();
+      }
+    };
+    appendStyle(styles);
+    appendScript(scripts);
+  }
+  if (opts.toolbarIcon) {
+    editor.Components.addType("image", {
+      extendFn: ["initToolbar"],
+      model: {
+        initToolbar() {
+          const tb = this.get("toolbar");
+          const tbExists = tb?.some((item) => item.command === commandId);
+          if (!tbExists) {
+            tb?.unshift({
+              command: commandId,
+              label: opts.toolbarIcon
+            });
+            this.set("toolbar", tb);
+          }
+        }
+      }
+    });
+  }
+  const errorOpts = { level: "error", ns: commandId };
+  editor.Commands.add(commandId, {
+    imageEditor: null,
+    run(ed, _s, options = {}) {
+      if (!constr) {
+        ed.log("TOAST UI Image editor not found", errorOpts);
+        return ed.stopCommand(commandId);
+      }
+      const target = options.target || ed.getSelected();
+      if (!target) {
+        ed.log("Target not available", errorOpts);
+        return ed.stopCommand(commandId);
+      }
+      const content = this.createContent();
+      const title = opts.labelImageEditor;
+      const btn = content.children[1];
+      ed.Modal.open({ title, content }).onceClose(() => ed.stopCommand(commandId));
+      const editorConfig = this.getEditorConfig(target.get("src"));
+      this.imageEditor = new constr(content.children[0], editorConfig);
+      ed.getModel().setEditing(true);
+      btn.onclick = () => this.applyChanges(target);
+      opts.onApplyButton(btn);
+    },
+    stop(ed) {
+      this.imageEditor?.destroy();
+      ed.getModel().setEditing(false);
+    },
+    getEditorConfig(path) {
+      const config = { ...opts.config };
+      if (!config.includeUI) config.includeUI = {};
+      config.includeUI = {
+        theme: {},
+        ...config.includeUI,
+        loadImage: { path, name: "1" },
+        uiSize: { height, width }
+      };
+      if (hideHeader) {
+        config.includeUI.theme["header.display"] = "none";
+      }
+      return config;
+    },
+    createContent() {
+      const content = document.createElement("div");
+      content.style.position = "relative";
+      content.innerHTML = `
+        <div></div>
+        <button class="tui-image-editor__apply-btn" style="
+          position: absolute;
+          top: 0; right: 0;
+          margin: 10px;
+          background-color: #fff;
+          font-size: 1rem;
+          border-radius: 3px;
+          border: none;
+          padding: 10px 20px;
+          cursor: pointer
+        ">
+          ${opts.labelApply}
+        </button>
+      `;
+      return content;
+    },
+    applyChanges(target) {
+      const ied = this.imageEditor;
+      if (onApply) {
+        onApply(ied, target);
+      } else {
+        if (ied.getDrawingMode() === "CROPPER") {
+          ied.crop(ied.getCropzoneRect()).then(() => {
+            this.uploadImage(ied, target);
+          });
+        } else {
+          this.uploadImage(ied, target);
+        }
+      }
+    },
+    uploadImage(imageEditor, target) {
+      const am = editor.Assets;
+      const dataURL = imageEditor.toDataURL();
+      if (upload) {
+        const file = this.dataUrlToBlob(dataURL);
+        am.FileUploader().uploadFile(
+          {
+            dataTransfer: {
+              // @ts-ignore
+              files: [file]
+            }
+          },
+          // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+          (res) => {
+            const obj = res?.data?.[0];
+            const src = obj && (typeof obj === "string" ? obj : obj.src);
+            src && this.applyToTarget(src, target);
+          }
+        );
+      } else {
+        addToAssets && am.add({
+          src: dataURL,
+          name: (target.get("src") || "").split("/").pop()
+        });
+        this.applyToTarget(dataURL, target);
+      }
+    },
+    applyToTarget(result, target) {
+      target.set("src", result);
+      editor.Modal.close();
+    },
+    dataUrlToBlob(dataURL) {
+      const data = dataURL.split(",");
+      const byteStr = window.atob(data[1]);
+      const type = data[0].split(":")[1].split(";")[0];
+      const ab = new ArrayBuffer(byteStr.length);
+      const ia = new Uint8Array(ab);
+      for (let i = 0; i < byteStr.length; i++) {
+        ia[i] = byteStr.charCodeAt(i);
+      }
+      return new Blob([ab], { type });
+    }
+  });
+};
+var tuiImageEditor_default = plugin;
+export {
+  tuiImageEditor_default as default
+};