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

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

@@ -0,0 +1,48 @@
+import type { Plugin } from 'grapesjs';
+interface FontOptions {
+    fontName?: string[] | boolean;
+    fontSize?: boolean;
+    fontColor?: string[] | boolean;
+    hilite?: string[] | boolean;
+}
+interface BaseOptions {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    link?: boolean;
+}
+interface FormatOptions {
+    heading1?: boolean;
+    heading2?: boolean;
+    heading3?: boolean;
+    heading4?: boolean;
+    heading5?: boolean;
+    heading6?: boolean;
+    paragraph?: boolean;
+    quote?: boolean;
+    clearFormatting?: boolean;
+}
+interface ActionOptions {
+    copy?: boolean;
+    cut?: boolean;
+    paste?: boolean;
+    delete?: boolean;
+}
+interface RichTextEditorOptions {
+    base?: BaseOptions | boolean;
+    fonts?: FontOptions;
+    format?: FormatOptions | boolean;
+    subscriptSuperscript?: boolean;
+    indentOutdent?: boolean;
+    list?: boolean;
+    align?: boolean;
+    actions?: ActionOptions | boolean;
+    undoredo?: boolean;
+    extra?: boolean;
+    icons?: Record<string, string>;
+    darkColorPicker?: boolean;
+    maxWidth?: string;
+}
+declare const plugin: Plugin<RichTextEditorOptions>;
+export default plugin;

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

@@ -0,0 +1,369 @@
+import ColorPicker from "./colorPicker.js";
+const plugin = (editor, opts = {}) => {
+  const options = {
+    ...{
+      // default options
+      base: {
+        bold: true,
+        italic: true,
+        underline: true,
+        strikethrough: true,
+        link: true
+      },
+      //fonts: {
+      //  fontName: ['font1',...,'fontn'],
+      //  fontSize: true,
+      //  //An array of strings representing colors
+      //  fontColor: [],
+      //  //An array of strings representing colors
+      //  hilite: [],
+      //}
+      fonts: {
+        fontColor: true,
+        hilite: true
+      },
+      format: {
+        heading1: true,
+        heading2: true,
+        heading3: true,
+        //heading4: false,
+        //heading5: false,
+        //heading6: false,
+        paragraph: true,
+        //quote: false,
+        clearFormatting: true
+      },
+      subscriptSuperscript: false,
+      indentOutdent: false,
+      list: false,
+      align: true,
+      //actions: {
+      //  copy: true,
+      //  cut: true,
+      //  paste: true,
+      //  delete: true,
+      //},
+      actions: false,
+      undoredo: false,
+      extra: false,
+      icons: {},
+      darkColorPicker: true
+    },
+    ...opts
+  };
+  const { icons } = options;
+  const formatBlock = "formatBlock";
+  const rte = editor.RichTextEditor;
+  const fontNames = options.fonts?.fontName ? Array.isArray(options.fonts.fontName) ? options.fonts.fontName : false : false;
+  if (options.fonts) {
+    options.fonts.fontName = fontNames;
+  }
+  const fontOptionsEl = fontNames ? fontNames.map((font) => `<option>${font.toString()}</option>`).join("") : "";
+  const fontNamesEl = `<select style="height:1.8rem;color:inherit;" class="gjs-field gjs-field-select">
+            ${fontOptionsEl}
+        </select>`;
+  editor.onReady(() => {
+    if (options.maxWidth) rte.getToolbarEl().firstChild.style.maxWidth = options.maxWidth;
+    if (!options.base || typeof options.base === "object") {
+      const baseOpts = options.base;
+      !baseOpts.bold && rte.remove("bold");
+      !baseOpts.italic && rte.remove("italic");
+      !baseOpts.underline && rte.remove("underline");
+      !baseOpts.strikethrough && rte.remove("strikethrough");
+      !baseOpts.link && rte.remove("link");
+    }
+    options.fonts?.fontName && rte.add("fontName", {
+      icon: fontNamesEl,
+      // Bind the 'result' on 'change' listener
+      event: "change",
+      attributes: {
+        style: "padding: 0 4px 2px;",
+        title: "Font Name"
+      },
+      // @ts-ignore
+      result: (rte2, action) => rte2.exec("fontName", action.btn?.firstChild?.value),
+      // Callback on any input change (mousedown, keydown, etc..)
+      // @ts-ignore
+      update: (rte2, action) => {
+        const value = rte2.doc.queryCommandValue(action.name);
+        if (value !== "false") {
+          if (action.btn?.firstChild) action.btn.firstChild.value = value;
+        }
+      }
+    });
+    options.fonts?.fontSize && rte.add("fontSize", {
+      icon: `<select style="height:1.8rem;color:inherit;" class="gjs-field gjs-field-select">
+              <option value="1">xx-small</option>
+              <option value="2">x-small</option>
+              <option value="3">small</option>
+              <option value="4">medium</option>
+              <option value="5">large</option>
+              <option value="6">x-large</option>
+              <option value="7">xx-large</option>
+            </select>`,
+      // Bind the 'result' on 'change' listener
+      event: "change",
+      attributes: {
+        style: "padding: 0 4px 2px;",
+        title: "Font Size"
+      },
+      // @ts-ignore
+      result: (rte2, action) => rte2.exec("fontSize", action.btn?.firstChild?.value),
+      // Callback on any input change (mousedown, keydown, etc..)
+      // @ts-ignore
+      update: (rte2, action) => {
+        const value = rte2.doc.queryCommandValue(action.name);
+        if (value !== "false") {
+          action.btn.firstChild.value = value;
+        }
+      }
+    });
+    const pk1 = {};
+    options.fonts?.fontColor && rte.add("fontColor", {
+      icon: `${icons?.fontColor || '<b style="pointer-events:none;border-bottom:2px solid">A</b>'}
+          <div id="foreColor-picker-${// @ts-ignore
+      editor.Config.container?.replace("#", "")}"
+              class="${options.darkColorPicker ? "rte-color-picker dark" : "rte-color-picker light"}">
+          </div>`,
+      attributes: {
+        id: "rte-font-color",
+        title: "Font Color"
+      },
+      result: (rte2) => {
+        const pikerEle = `#foreColor-picker-${// @ts-ignore
+        editor.Config.container?.replace("#", "")}`;
+        if (!pk1[pikerEle])
+          pk1[pikerEle] = new ColorPicker(
+            pikerEle,
+            options.fonts?.fontColor ? Array.isArray(options.fonts.fontColor) ? options.fonts.fontColor : void 0 : void 0,
+            {
+              open: "span#rte-font-color.gjs-rte-action",
+              closeOnBlur: true
+            }
+          );
+        pk1[pikerEle].colorChosen((col) => rte2.exec("foreColor", col));
+      }
+    });
+    const pk2 = {};
+    options.fonts?.hilite && rte.add("hiliteColor", {
+      icon: `${icons?.hiliteColor || '<b style="pointer-events:none;" class="rte-hilite-btn">A</b>'}
+          <div id="hilite-picker-${// @ts-ignore
+      editor.Config.container?.replace("#", "")}"
+            class="${options.darkColorPicker ? "rte-color-picker dark" : "rte-color-picker light"}">
+          </div>`,
+      attributes: {
+        id: "rte-font-hilite",
+        title: "Font Highlight"
+      },
+      result: (rte2) => {
+        const pikerEle = `#hilite-picker-${// @ts-ignore
+        editor.Config.container?.replace("#", "")}`;
+        if (!pk2[pikerEle])
+          pk2[pikerEle] = new ColorPicker(
+            pikerEle,
+            options.fonts?.hilite ? Array.isArray(options.fonts.hilite) ? options.fonts.hilite : void 0 : void 0,
+            {
+              open: "span#rte-font-hilite.gjs-rte-action",
+              closeOnBlur: true
+            }
+          );
+        pk2[pikerEle].colorChosen((col) => rte2.exec("hiliteColor", col));
+      }
+    });
+    const formatOpts = options.format;
+    options.format && formatOpts.heading1 && rte.add("heading1", {
+      icon: icons?.heading1 || "<div>H1</div>",
+      attributes: {
+        title: "Heading 1"
+      },
+      result: (rte2) => rte2.exec(formatBlock, "<h1>")
+    });
+    options.format && formatOpts.heading2 && rte.add("heading2", {
+      icon: icons?.heading2 || "<div>H2</div>",
+      attributes: {
+        title: "Heading 2"
+      },
+      result: (rte2) => rte2.exec(formatBlock, "<h2>")
+    });
+    options.format && formatOpts.heading3 && rte.add("heading3", {
+      icon: icons?.heading3 || "<div>H3</div>",
+      attributes: {
+        title: "Heading 3"
+      },
+      result: (rte2) => rte2.exec(formatBlock, "<h3>")
+    });
+    options.format && formatOpts.heading4 && rte.add("heading4", {
+      icon: icons?.heading4 || "<div>H4</div>",
+      attributes: {
+        title: "Heading 4"
+      },
+      result: (rte2) => rte2.exec(formatBlock, "<h4>")
+    });
+    options.format && formatOpts.heading5 && rte.add("heading5", {
+      icon: icons?.heading5 || "<div>H5</div>",
+      attributes: {
+        title: "Heading 5"
+      },
+      result: (rte2) => rte2.exec(formatBlock, "<h5>")
+    });
+    options.format && formatOpts.heading6 && rte.add("heading6", {
+      icon: icons?.heading6 || "<div>H6</div>",
+      attributes: {
+        title: "Heading 6"
+      },
+      result: (rte2) => rte2.exec(formatBlock, "<h6>")
+    });
+    options.format && formatOpts.paragraph && rte.add("paragraph", {
+      icon: icons?.paragraph || "&#182;",
+      attributes: {
+        title: "Paragraph"
+      },
+      result: (rte2) => rte2.exec(formatBlock, "<p>")
+    });
+    options.format && formatOpts.quote && rte.add("quote", {
+      icon: icons?.quote || '<i class="fa fa-quote-left"></i>',
+      attributes: {
+        title: "Quote"
+      },
+      result: (rte2) => rte2.exec(formatBlock, "<blockquote>")
+    });
+    options.format && formatOpts.clearFormatting && rte.add("clearFormatting", {
+      icon: icons?.clear || '<i class="fa fa-eraser"></i>',
+      attributes: {
+        title: "Clear Formatting"
+      },
+      result: (rte2) => rte2.exec("removeFormat")
+    });
+    options.indentOutdent && rte.add("indent", {
+      icon: icons?.indent || '<i class="fa fa-indent"></i>',
+      attributes: {
+        title: "Indent"
+      },
+      result: (rte2) => rte2.exec("indent")
+    });
+    options.indentOutdent && rte.add("outdent", {
+      icon: icons?.outdent || '<i class="fa fa-outdent"></i>',
+      attributes: {
+        title: "Outdent"
+      },
+      result: (rte2) => rte2.exec("outdent")
+    });
+    options.subscriptSuperscript && rte.add("subscript", {
+      icon: icons?.subscript || "<div>X<sub>2</sub></div>",
+      attributes: {
+        title: "Subscript"
+      },
+      result: (rte2) => rte2.exec("subscript")
+    });
+    options.subscriptSuperscript && rte.add("superscript", {
+      icon: icons?.superscript || "<div>X<sup>2</sup></div>",
+      attributes: {
+        title: "Superscript"
+      },
+      result: (rte2) => rte2.exec("superscript")
+    });
+    options.list && rte.add("olist", {
+      icon: icons?.olist || '<i class="fa fa-list-ol"></i>',
+      attributes: {
+        title: "Ordered List"
+      },
+      result: (rte2) => rte2.exec("insertOrderedList")
+    });
+    options.list && rte.add("ulist", {
+      icon: icons?.ulist || '<i class="fa fa-list-ul"></i>',
+      attributes: {
+        title: "Unordered List"
+      },
+      result: (rte2) => rte2.exec("insertUnorderedList")
+    });
+    options.align && rte.add("justifyLeft", {
+      icon: icons?.justifyLeft || '<i class="fa fa-align-left"></i>',
+      attributes: {
+        title: "Align Left"
+      },
+      result: (rte2) => rte2.exec("justifyLeft")
+    });
+    options.align && rte.add("justifyCenter", {
+      icon: icons?.justifyRight || '<i class="fa fa-align-center"></i>',
+      attributes: {
+        title: "Align Center"
+      },
+      result: (rte2) => rte2.exec("justifyCenter")
+    });
+    options.align && rte.add("justifyFull", {
+      icon: icons?.justifyFull || '<i class="fa fa-align-justify"></i>',
+      attributes: {
+        title: "Align Justify"
+      },
+      result: (rte2) => rte2.exec("justifyFull")
+    });
+    options.align && rte.add("justifyRight", {
+      icon: icons?.justifyRight || '<i class="fa fa-align-right"></i>',
+      attributes: {
+        title: "Align Right"
+      },
+      result: (rte2) => rte2.exec("justifyRight")
+    });
+    const actionOpts = options.actions;
+    options.actions && actionOpts.copy && rte.add("copy", {
+      icon: icons?.copy || '<i class="fa fa-files-o"></i>',
+      attributes: {
+        title: "Copy"
+      },
+      result: (rte2) => rte2.exec("copy")
+    });
+    options.actions && actionOpts.cut && rte.add("cut", {
+      icon: icons?.cut || '<i class="fa fa-scissors"></i>',
+      attributes: {
+        title: "Cut"
+      },
+      result: (rte2) => rte2.exec("cut")
+    });
+    options.actions && actionOpts.paste && rte.add("paste", {
+      icon: icons?.paste || '<i class="fa fa-clipboard"></i>',
+      attributes: {
+        title: "Paste"
+      },
+      result: (rte2) => rte2.exec("paste")
+    });
+    options.actions && actionOpts.delete && rte.add("delete", {
+      icon: icons?.delete || '<i class="fa fa-trash-o"></i>',
+      attributes: {
+        title: "Delete"
+      },
+      result: (rte2) => rte2.exec("delete")
+    });
+    options.extra && rte.add("code", {
+      icon: icons?.code || '<i class="fa fa-code"></i>',
+      attributes: {
+        title: "Code"
+      },
+      result: (rte2) => rte2.exec(formatBlock, "<pre>")
+    });
+    options.extra && rte.add("line", {
+      icon: icons?.line || "<b>&#8213;</b>",
+      attributes: {
+        title: "Horizontal Line"
+      },
+      result: (rte2) => rte2.exec("insertHorizontalRule")
+    });
+    options.undoredo && rte.add("undo", {
+      icon: icons?.undo || '<i class="fa fa-reply"></i>',
+      attributes: {
+        title: "Undo"
+      },
+      result: (rte2) => rte2.exec("undo")
+    });
+    options.undoredo && rte.add("redo", {
+      icon: icons?.redo || '<i class="fa fa-share"></i>',
+      attributes: {
+        title: "Redo"
+      },
+      result: (rte2) => rte2.exec("redo")
+    });
+  });
+};
+var rte_default = plugin;
+export {
+  rte_default as default
+};

package/dist/wysiwyg/editorPlugins/rte/styles.css

@@ -0,0 +1,63 @@
+.gjs-rte-toolbar {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.44);
+  border-radius: 3px;
+}
+.gjs-rte-action {
+  font-size: 1rem;
+  border-right: none;
+  padding: 10px;
+  min-width: 35px;
+}
+.gjs-rte-actionbar {
+  max-width: 600px;
+  flex-wrap: wrap;
+}
+.rte-hilite-btn {
+  padding: 3px 6px;
+  border-radius: 3px;
+  background: rgba(210, 120, 201, 0.3);
+}
+.rte-color-picker {
+  display: none;
+  padding: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.34);
+  border-radius: 5px;
+  position: absolute;
+  top: 55px;
+  width: 250px;
+  transition: all 2s ease;
+}
+.rte-color-picker:before {
+  content: "";
+  position: absolute;
+  top: -20px;
+  left: 46%;
+  border-width: 10px;
+  border-style: solid;
+}
+.rte-color-picker.dark {
+  background: rgba(0, 0, 0, 0.8);
+}
+.rte-color-picker.dark:before {
+  border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent;
+}
+.rte-color-picker.light {
+  background: rgba(255, 255, 255, 0.75);
+}
+.rte-color-picker.light:before {
+  border-color: transparent transparent rgba(255, 255, 255, 0.75) transparent;
+}
+.rte-color-picker > div {
+  width: 30px;
+  display: inline-block;
+  height: 30px;
+  margin: 5px;
+  border-radius: 100%;
+  opacity: 0.7;
+}
+.rte-color-picker > div:hover {
+  opacity: 1;
+}
+.picker-wrapper {
+  padding: 20px;
+}

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

@@ -0,0 +1,3 @@
+import type { Editor } from 'grapesjs';
+import type { TabsOptions } from './types.js';
+export default function loadBlocks(editor: Editor, { tabsBlock, typeTabs }: Pick<TabsOptions, 'tabsBlock' | 'typeTabs'>): void;

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

@@ -0,0 +1,19 @@
+function loadBlocks(editor, { tabsBlock, typeTabs }) {
+  const { Blocks } = editor;
+  if (tabsBlock) {
+    const blockConfig = {
+      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"/>
+        </svg>
+      `,
+      label: "Tabs",
+      content: { type: typeTabs },
+      ...tabsBlock
+    };
+    Blocks.add(typeTabs, blockConfig);
+  }
+}
+export {
+  loadBlocks as default
+};

package/dist/wysiwyg/editorPlugins/tabs/components/Tab.d.ts

@@ -0,0 +1,10 @@
+import type { Component, Editor } from 'grapesjs';
+import type { TabConfig } from '../types.js';
+export interface TabComponent extends Component {
+    tabContent?: Component;
+    __initTab(index: number): void;
+    __onRemove(): void;
+    getTabContent(): Component | undefined;
+}
+declare const _default: (editor: Editor, config: TabConfig) => void;
+export default _default;

package/dist/wysiwyg/editorPlugins/tabs/components/Tab.js

@@ -0,0 +1,100 @@
+import { resolveTemplate } from "../options.js";
+var Tab_default = (editor, config) => {
+  const { Components } = editor;
+  const prevSelectorTab = "data-prev";
+  const getPrevCntId = (comp) => comp.getAttributes()[prevSelectorTab];
+  const defaultModel = editor.DomComponents.getType("default").model;
+  Components.addType(config.typeTab, {
+    model: {
+      defaults: {
+        name: "Tab",
+        tagName: "div",
+        draggable: `[data-gjs-type="${config.typeTabContainer}"]`,
+        droppable: false,
+        attributes: { role: "tab" },
+        classes: [config.classTab],
+        traits: [
+          {
+            type: "button",
+            label: false,
+            text: "Style Active",
+            full: true,
+            command: (editor2) => {
+              const sm = editor2.StyleManager;
+              sm.select(`.${config.classTab}.${config.classTabActive}`);
+            }
+          }
+        ],
+        ...config.tabProps
+      },
+      init() {
+        this.on("removed", this.__onRemove);
+      },
+      __initTab(index) {
+        if (this.tabContent) return;
+        let content = this.getTabContent();
+        if (content && getPrevCntId(content)) {
+          const id = content.getId();
+          const tabId = this.getId();
+          content.addAttributes({ id, "aria-labelledby": tabId, hidden: true });
+          content.removeAttributes(prevSelectorTab);
+          this.addAttributes({ [config.selectorTab]: id, id: tabId });
+        }
+        if (!content) {
+          const tabs = this.getTabsType();
+          const cnts = tabs.getContentsType();
+          content = cnts.append({
+            type: config.typeTabContent,
+            components: resolveTemplate(config.templateTabContent, {
+              index
+            })
+          })[0];
+          const id = content.getId();
+          const tabId = this.getId();
+          content.addAttributes({ id, "aria-labelledby": tabId, hidden: true });
+          this.addAttributes({ [config.selectorTab]: id, id: tabId });
+          this.tabContent = content;
+        }
+        this.tabContent = content;
+      },
+      __onRemove() {
+        const content = this.getTabContent();
+        if (content) {
+          content.remove();
+        }
+        this.getTabsType().trigger("rerender");
+      },
+      getTabsType() {
+        return this.closestType(config.typeTabs);
+      },
+      getTabContent() {
+        const id = this.getAttributes()[config.selectorTab];
+        const tabs = this.getTabsType();
+        if (!tabs || !id) return;
+        const contents = tabs.findContents();
+        const content = contents.filter(
+          (c) => c.getId() === id || getPrevCntId(c) === id
+        )[0];
+        return content;
+      },
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      clone(opt = {}, ...args) {
+        const fromParent = opt._inner;
+        if (fromParent) {
+          const tabCont = this.getTabContent();
+          if (tabCont) {
+            tabCont.addAttributes({ [prevSelectorTab]: tabCont.getId() });
+          }
+        }
+        const cloned = defaultModel.prototype.clone.apply(this, [opt, ...args]);
+        if (!fromParent) {
+          cloned.addAttributes({ [config.selectorTab]: "" });
+        }
+        return cloned;
+      }
+    }
+  });
+};
+export {
+  Tab_default as default
+};

package/dist/wysiwyg/editorPlugins/tabs/components/TabContainer.d.ts

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

package/dist/wysiwyg/editorPlugins/tabs/components/TabContainer.js

@@ -0,0 +1,23 @@
+const role = "tablist";
+var TabContainer_default = (editor, config) => {
+  const { Components } = editor;
+  Components.addType(config.typeTabContainer, {
+    model: {
+      defaults: {
+        name: "Tab Container",
+        draggable: `[data-gjs-type="${config.typeTabs}"]`,
+        droppable: `[data-gjs-type="${config.typeTab}"]`,
+        copyable: false,
+        removable: false,
+        highlightable: false,
+        attributes: { role },
+        classes: config.classTabContainer,
+        ...config.tabContainerProps
+      }
+    }
+  });
+};
+export {
+  TabContainer_default as default,
+  role
+};

package/dist/wysiwyg/editorPlugins/tabs/components/TabContent.d.ts

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

package/dist/wysiwyg/editorPlugins/tabs/components/TabContent.js

@@ -0,0 +1,23 @@
+const role = "tabpanel";
+var TabContent_default = (editor, config) => {
+  const { Components } = editor;
+  Components.addType(config.typeTabContent, {
+    model: {
+      defaults: {
+        name: "Tab Content",
+        draggable: false,
+        copyable: false,
+        removable: false,
+        highlightable: false,
+        attributes: { role },
+        classes: config.classTabContent,
+        traits: [],
+        ...config.tabContentProps
+      }
+    }
+  });
+};
+export {
+  TabContent_default as default,
+  role
+};

package/dist/wysiwyg/editorPlugins/tabs/components/TabContents.d.ts

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