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

package/dist/wysiwyg/editorPlugins/tooltip.js

@@ -0,0 +1,318 @@
+const plugin = (editor, opts = {}) => {
+  const options = {
+    // The ID used to create tooltip block and component
+    id: "tooltip",
+    // Label of the tooltip. Used for the block and component name
+    labelTooltip: "Tooltip",
+    // Object to extend the default tooltip block, eg. { label: 'Tooltip', category: 'Extra', ... }.
+    // Pass a falsy value to avoid adding the block
+    blockTooltip: {},
+    // Object to extend the default tooltip properties, eg. `{ name: 'Tooltip', droppable: false, ... }`
+    propsTooltip: {},
+    // A function which allows to extend default traits by receiving the original array and returning a new one
+    extendTraits: (traits) => traits,
+    // Tooltip attribute prefix
+    attrTooltip: "data-tooltip",
+    // Tooltip class prefix
+    classTooltip: "tooltip-component",
+    // Custom CSS styles, this will replace the default one
+    style: "",
+    // Additional CSS styles
+    styleAdditional: "",
+    // Make all tooltip relative classes private
+    privateClasses: true,
+    // Indicate if the tooltip can be styled. You can also pass an array
+    // of which properties can be styled. Eg. `['color', 'background-color']`
+    stylableTooltip: [
+      "background-color",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "font-family",
+      "font-size",
+      "font-weight",
+      "letter-spacing",
+      "color",
+      "line-height",
+      "text-align",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-left-radius",
+      "border-bottom-right-radius",
+      "border",
+      "border-width",
+      "border-style",
+      "border-color"
+    ],
+    // If true, force the tooltip to be shown
+    showTooltipOnStyle: true,
+    ...opts
+  };
+  const {
+    propsTooltip,
+    classTooltip,
+    style,
+    styleAdditional,
+    privateClasses,
+    stylableTooltip,
+    showTooltipOnStyle,
+    blockTooltip,
+    extendTraits
+  } = options;
+  const id = options.id;
+  const labelTooltip = options.labelTooltip;
+  const attrTooltip = options.attrTooltip;
+  if (blockTooltip) {
+    editor.BlockManager.add(id, {
+      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>`,
+      label: labelTooltip,
+      category: "Extra",
+      select: true,
+      content: { type: id },
+      ...blockTooltip
+    });
+  }
+  const classTooltipBody = `${classTooltip}__body`;
+  const classTooltipEmpty = `${classTooltip}--empty`;
+  const attrTooltipVis = `${attrTooltip}-visible`;
+  const attrTooltipPos = `${attrTooltip}-pos`;
+  const attrTooltipLen = `${attrTooltip}-length`;
+  const traitIdStyleTooltip = "style-tooltip";
+  if (privateClasses) {
+    editor.SelectorManager.getAll().add([
+      { private: 1, name: classTooltip },
+      { private: 1, name: classTooltipBody },
+      { private: 1, name: classTooltipEmpty }
+    ]);
+  }
+  editor.Components.addType(id, {
+    isComponent: (el) => el.hasAttribute?.(attrTooltip),
+    model: {
+      defaults: {
+        name: labelTooltip,
+        classes: [classTooltip],
+        attributes: { [attrTooltip]: labelTooltip },
+        styles: (style || `
+          .${classTooltip} {
+            position: relative;
+            display: inline-block;
+            vertical-align: top;
+          }
+
+          .${classTooltipEmpty} {
+            width: 50px;
+            height: 50px;
+          }
+
+          .${classTooltipBody},
+          [${attrTooltip}]::after {
+            font-family: Helvetica, sans-serif;
+            background: rgba(55, 61, 73, 0.95);
+            border-radius: 3px;
+            bottom: 100%;
+            color: #fff;
+            content: attr(${attrTooltip});
+            display: block;
+            font-size: 12px;
+            left: 50%;
+            line-height: normal;
+            max-width: 32rem;
+            opacity: 0;
+            overflow: hidden;
+            padding: 8px 16px;
+            pointer-events: none;
+            position: absolute;
+            text-overflow: ellipsis;
+            transform: translate(-50%, 0);
+            transition: opacity 0.25s, transform 0.25s;
+            white-space: nowrap;
+            box-sizing: border-box;
+            z-index: 10;
+          }
+
+          [${attrTooltipVis}=true]::after,
+          [${attrTooltip}]:focus::after,
+          [${attrTooltip}]:hover::after {
+            opacity: 1;
+            transform: translate(-50%, -0.5rem);
+          }
+
+          [${attrTooltipPos}=right]::after {
+            bottom: 50%;
+            left: 100%;
+            transform: translate(0, 50%);
+          }
+
+          [${attrTooltipPos}=right]:focus::after,
+          [${attrTooltipPos}=right]:hover::after,
+          [${attrTooltipVis}=true][${attrTooltipPos}=right]::after {
+            transform: translate(0.5rem, 50%);
+          }
+
+          [${attrTooltipPos}=bottom]::after {
+            bottom: auto;
+            top: 100%;
+            transform: translate(-50%, 0);
+          }
+
+          [${attrTooltipPos}=bottom]:focus::after,
+          [${attrTooltipPos}=bottom]:hover::after,
+          [${attrTooltipVis}=true][${attrTooltipPos}=bottom]::after {
+            transform: translate(-50%, 0.5rem);
+          }
+
+          [${attrTooltipPos}=left]::after {
+            bottom: 50%;
+            left: auto;
+            right: 100%;
+            transform: translate(0, 50%);
+          }
+
+          [${attrTooltipPos}=left]:focus::after,
+          [${attrTooltipPos}=left]:hover::after,
+          [${attrTooltipVis}=true][${attrTooltipPos}=left]::after {
+            transform: translate(-0.5rem, 50%);
+          }
+
+          [${attrTooltipLen}=small]::after {
+            white-space: normal;
+            width: 80px;
+          }
+
+          [${attrTooltipLen}=medium]::after {
+            white-space: normal;
+            width: 150px;
+          }
+
+          [${attrTooltipLen}=large]::after {
+            white-space: normal;
+            width: 300px;
+          }
+
+          [${attrTooltipLen}=fit]::after {
+            white-space: normal;
+            width: 100%;
+          }
+
+          // IE 11 bugfix
+          button[${attrTooltip}] {
+            overflow: visible;
+          }
+        `) + styleAdditional,
+        // biome-ignore lint/style/noNonNullAssertion: <explanation>
+        traits: extendTraits([
+          {
+            name: attrTooltip,
+            label: "Text"
+          },
+          {
+            name: attrTooltipPos,
+            label: "Position",
+            type: "select",
+            options: [
+              {
+                value: "top",
+                name: "Top",
+                id: ""
+              },
+              {
+                value: "right",
+                name: "Right",
+                id: ""
+              },
+              {
+                value: "bottom",
+                name: "Bottom",
+                id: ""
+              },
+              {
+                value: "left",
+                name: "Left",
+                id: ""
+              }
+            ]
+          },
+          {
+            name: attrTooltipLen,
+            label: "Length",
+            type: "select",
+            options: [
+              {
+                value: "",
+                name: "One line",
+                id: ""
+              },
+              {
+                value: "small",
+                name: "Small",
+                id: ""
+              },
+              {
+                value: "medium",
+                name: "Medium",
+                id: ""
+              },
+              {
+                value: "large",
+                name: "Large",
+                id: ""
+              },
+              {
+                value: "fit",
+                name: "Fit",
+                id: ""
+              }
+            ]
+          },
+          {
+            name: attrTooltipVis,
+            label: "Visible",
+            type: "checkbox",
+            valueTrue: "true"
+          },
+          {
+            name: traitIdStyleTooltip,
+            labelButton: "Style tooltip",
+            type: "button",
+            full: true,
+            command: (editor2) => {
+              const openSm = editor2.Panels.getButton("views", "open-sm");
+              openSm?.set("active", true);
+              const ruleTooltip = editor2.Css.getRules(`.${classTooltipBody}`)[0];
+              ruleTooltip.set("stylable", stylableTooltip);
+              editor2.StyleManager.select(ruleTooltip);
+              if (showTooltipOnStyle) {
+                const selected = editor2.getSelected();
+                if (selected?.is(id)) {
+                  selected.addAttributes({ [attrTooltipVis]: "true" });
+                  editor2.once("style:target", () => {
+                    selected.addAttributes({ [attrTooltipVis]: "false" });
+                  });
+                }
+              }
+            }
+          }
+        ]),
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        ...propsTooltip
+      },
+      init() {
+        this.listenTo(this.components(), "add remove", this.checkEmpty);
+        this.checkEmpty();
+      },
+      checkEmpty() {
+        const empty = !this.components().length;
+        this[empty ? "addClass" : "removeClass"](`${classTooltipEmpty}`);
+      }
+    }
+  });
+};
+var tooltip_default = plugin;
+export {
+  tooltip_default as default
+};

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

@@ -0,0 +1,86 @@
+import type { Component, Plugin } 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: Plugin<PluginOptions>;
+export default plugin;

package/dist/wysiwyg/editorPlugins/tuiImageEditor.js

@@ -0,0 +1,204 @@
+const plugin = (editor, options = {}) => {
+  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"
+    ],
+    ...options
+  };
+  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, options2 = {}) {
+      if (!constr) {
+        ed.log("TOAST UI Image editor not found", errorOpts);
+        return ed.stopCommand(commandId);
+      }
+      const target = options2.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: <explanation>
+          (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
+};

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

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

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

@@ -0,0 +1,15 @@
+import { cmpId } from "./utils.js";
+var blocks_default = (editor, opts) => {
+  const bm = editor.BlockManager;
+  const { block } = opts;
+  block && bm.add(cmpId, {
+    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: cmpId },
+    select: true,
+    ...block
+  });
+};
+export {
+  blocks_default as default
+};

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

@@ -0,0 +1,9 @@
+import type { Editor } from 'grapesjs';
+import type { RequiredPluginOptions } from './index.js';
+declare global {
+    interface Window {
+        Typed: any;
+    }
+}
+declare const _default: (editor: Editor, opts: RequiredPluginOptions) => void;
+export default _default;