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

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

@@ -0,0 +1,19 @@
+var TabContents_default = (editor, config) => {
+  const { Components } = editor;
+  Components.addType(config.typeTabContents, {
+    model: {
+      defaults: {
+        name: "Tab Contents",
+        draggable: false,
+        droppable: false,
+        copyable: false,
+        removable: false,
+        classes: config.classTabContents,
+        ...config.tabContentsProps
+      }
+    }
+  });
+};
+export {
+  TabContents_default as default
+};

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

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

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

@@ -0,0 +1,169 @@
+import { resolveTemplate } from "../options.js";
+var Tabs_default = (editor, config) => {
+  const { Components } = editor;
+  const script = function(props) {
+    const el = this;
+    const classTabActive = props.classactive;
+    const selectorTab = props.selectortab;
+    const { history } = window;
+    const _isEditor = window._isEditor;
+    const attrSelected = "ariaSelected";
+    const roleTab = "[role=tab]";
+    const roleTabContent = "[role=tabpanel]";
+    const { body, location } = document;
+    const matches = body.matches || // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    body.webkitMatchesSelector || // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    body.mozMatchesSelector || // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    body.msMatchesSelector;
+    const each = (items, clb) => {
+      Array.from(items).forEach(clb);
+    };
+    const hideContents = () => {
+      each(el.querySelectorAll(roleTabContent), (i) => {
+        i.hidden = true;
+      });
+    };
+    const getTabId = (item) => item.getAttribute(selectorTab) || "";
+    const qS = (elem, qs) => elem.querySelector(qs);
+    const getAllTabs = () => el.querySelectorAll(roleTab);
+    const upTabIdx = (item, val) => {
+      if (!_isEditor) {
+        item.tabIndex = Number.parseInt(val);
+      }
+    };
+    const activeTab = (tabEl) => {
+      each(getAllTabs(), (item) => {
+        item.className = item.className.replace(classTabActive, "").trim();
+        item.setAttribute(attrSelected, "false");
+        upTabIdx(item, "-1");
+      });
+      hideContents();
+      tabEl.className += ` ${classTabActive}`;
+      tabEl.setAttribute(attrSelected, "true");
+      upTabIdx(tabEl, "0");
+      const tabContentId = getTabId(tabEl);
+      const tabContent = tabContentId && qS(el, `#${tabContentId}`);
+      if (tabContent) {
+        tabContent.hidden = false;
+      }
+    };
+    const getTabByHash = () => {
+      const hashId = (location.hash || "").replace("#", "");
+      const qrStr = (att) => `${roleTab}[${att}=${hashId}]`;
+      return hashId ? qS(el, qrStr(selectorTab)) : null;
+    };
+    const getSelectedTab = (target) => {
+      return Array.from(getAllTabs()).find((item) => item.contains(target));
+    };
+    let tabToActive = qS(el, `.${classTabActive}${roleTab}`);
+    tabToActive = tabToActive || getTabByHash() || qS(el, roleTab);
+    if (tabToActive) activeTab(tabToActive);
+    el.addEventListener("click", (ev) => {
+      let target = ev.target;
+      if (!target) return;
+      let found = matches.call(target, roleTab);
+      if (!found) {
+        const selectedTab = getSelectedTab(target);
+        if (selectedTab) {
+          target = selectedTab;
+          found = true;
+        }
+      }
+      if (found && !ev.__trg && target.className.indexOf(classTabActive) < 0) {
+        ev.preventDefault();
+        ev.__trg = 1;
+        activeTab(target);
+        const id = getTabId(target);
+        try {
+          history?.pushState(null, "", `#${id}`);
+        } catch (e) {
+          console.error("History API is not supported", e);
+        }
+      }
+    });
+  };
+  const styleText = config.style ? config.style(config) : "";
+  const defTabs = [1, 2, 3].map((i) => ({
+    type: config.typeTab,
+    components: resolveTemplate(config.templateTab, { index: i })
+  }));
+  Components.addType(config.typeTabs, {
+    model: {
+      defaults: {
+        name: "Tabs",
+        classactive: config.classTabActive,
+        selectortab: config.selectorTab,
+        "script-props": ["classactive", "selectortab"],
+        script,
+        traits: [
+          {
+            type: "button",
+            label: "Add Tab",
+            text: "Add Tab",
+            full: true,
+            command: (editor2) => {
+              const selected = editor2.getSelected();
+              selected?.addTab();
+            }
+          }
+        ],
+        components: [
+          { type: config.typeTabContainer, components: defTabs },
+          { type: config.typeTabContents }
+        ],
+        styles: styleText,
+        ...config.tabsProps
+      },
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      isTabsComponent(comp) {
+        return comp.findTabs !== void 0;
+      },
+      init() {
+        const component = this;
+        component.findTabs().forEach((tab, index) => {
+          this.__onTab(tab, index + 1, {});
+        });
+        const container = component.getTabContainerType();
+        let tabCount = component.findTabs().length;
+        this.listenTo(container?.components(), "add", (tab) => {
+          tabCount++;
+          tab.__initTab?.(tabCount);
+        });
+      },
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      __onTab(tab, index, v, opts = {}) {
+        if (!opts.avoidStore && !opts.temporary) {
+          tab.__initTab(index);
+        }
+      },
+      getTabContainerType() {
+        return this.findType(config.typeTabContainer)[0];
+      },
+      getContentsType() {
+        return this.findType(config.typeTabContents)[0] || this;
+      },
+      findTabs() {
+        return this.findType(config.typeTab);
+      },
+      findContents() {
+        return this.findType(config.typeTabContent);
+      },
+      addTab(content) {
+        const component = this;
+        const container = component.getTabContainerType();
+        const currentTabs = component.findTabs();
+        const templateProps = {
+          index: currentTabs.length + 1
+        };
+        const finalContent = content ? typeof content === "function" ? content(templateProps) : content : resolveTemplate(config.templateTab, templateProps);
+        container?.append({
+          type: config.typeTab,
+          components: finalContent
+        });
+      }
+    }
+  });
+};
+export {
+  Tabs_default as default
+};

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

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

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

@@ -0,0 +1,29 @@
+import Tab from "./Tab.js";
+import TabContainer from "./TabContainer.js";
+import TabContent from "./TabContent.js";
+import TabContents from "./TabContents.js";
+import Tabs from "./Tabs.js";
+const components = [
+  TabContainer,
+  // Load container first
+  TabContent,
+  // Then content components
+  TabContents,
+  Tab,
+  // Then individual tabs
+  Tabs
+  // Finally the main tabs component
+];
+var components_default = (editor, config) => {
+  const opts = {
+    ...config,
+    defaultModel: editor.DomComponents.getType("default").model,
+    editor
+  };
+  for (const component of components) {
+    component(editor, opts);
+  }
+};
+export {
+  components_default as default
+};

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

@@ -0,0 +1,5 @@
+import type { Plugin } from 'grapesjs';
+import type { TabsOptions } from './types.js';
+export type PluginOptions = TabsOptions;
+declare const plugin: Plugin<Partial<PluginOptions>>;
+export default plugin;

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

@@ -0,0 +1,15 @@
+import loadBlocks from "./blocks.js";
+import loadComponents from "./components/index.js";
+import defaultOptions from "./options.js";
+const plugin = (editor, opts = {}) => {
+  const options = {
+    ...defaultOptions,
+    ...opts
+  };
+  loadComponents(editor, options);
+  loadBlocks(editor, options);
+};
+var tabs_default = plugin;
+export {
+  tabs_default as default
+};

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

@@ -0,0 +1,5 @@
+import type { TabTemplate, TabTemplateProps, TabsOptions } from './types.js';
+declare const defaultOptions: TabsOptions;
+export declare const resolveTemplate: (template: TabTemplate | undefined, props: TabTemplateProps) => string | undefined;
+export declare const mergeStyles: (userStyle?: (config: TabsOptions) => string) => (config: TabsOptions) => string;
+export default defaultOptions;

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

@@ -0,0 +1,80 @@
+const defaultStyle = (config) => `
+  .${config.classTab} {
+    padding: 7px 14px;
+    display: inline-block;
+    border-radius: 3px;
+    margin-right: 10px;
+  }
+
+  .${config.classTab}:focus {
+    outline: none;
+  }
+
+  .${config.classTab}.${config.classTabActive} {
+    background-color: #0d94e6;
+    color: white;
+  }
+
+  .${config.classTabContainer} {
+    display: inline-block;
+  }
+
+  .${config.classTabContent} {
+    animation: fadeEffect 1s;
+  }
+
+  .${config.classTabContents} {
+    min-height: 100px;
+    padding: 10px;
+  }
+
+  @keyframes fadeEffect {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
+`;
+const defaultOptions = {
+  // Block settings
+  tabsBlock: {},
+  tabsProps: {},
+  tabContainerProps: {},
+  tabProps: {},
+  tabContentProps: {},
+  tabContentsProps: {},
+  // Class names
+  classTab: "tab",
+  classTabContainer: "tab-container",
+  classTabActive: "tab-active",
+  classTabContent: "tab-content",
+  classTabContents: "tab-contents",
+  // Selectors and types
+  selectorTab: "aria-controls",
+  typeTabs: "tabs",
+  typeTabContainer: "tab-container",
+  typeTab: "tab",
+  typeTabContent: "tab-content",
+  typeTabContents: "tab-contents",
+  // Templates
+  templateTab: ({ index }) => `<span data-gjs-highlightable="false">Tab ${index}</span>`,
+  templateTabContent: ({ index }) => `<div>Tab Content ${index}</div>`,
+  // Style
+  style: defaultStyle
+};
+const resolveTemplate = (template, props) => {
+  if (!template) {
+    return void 0;
+  }
+  if (typeof template === "function") {
+    return template(props);
+  }
+  return template;
+};
+const mergeStyles = (userStyle) => {
+  return userStyle || defaultStyle;
+};
+var options_default = defaultOptions;
+export {
+  options_default as default,
+  mergeStyles,
+  resolveTemplate
+};

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

@@ -0,0 +1,81 @@
+import type { ComponentDefinition } from 'grapesjs';
+export interface TabsOptions {
+    tabsBlock?: ComponentDefinition | null;
+    tabsProps?: ComponentDefinition;
+    tabContainerProps?: ComponentDefinition;
+    tabProps?: ComponentDefinition;
+    tabContentProps?: ComponentDefinition;
+    tabContentsProps?: ComponentDefinition;
+    classTab: string;
+    classTabContainer: string;
+    classTabActive: string;
+    classTabContent: string;
+    classTabContents: string;
+    selectorTab: string;
+    typeTabs: string;
+    typeTabContainer: string;
+    typeTab: string;
+    typeTabContent: string;
+    typeTabContents: string;
+    templateTab: TabTemplate;
+    templateTabContent?: TabTemplate;
+    style?: (config: TabsOptions) => string;
+}
+export interface TabTemplateProps {
+    index: number;
+}
+export type TabTemplate = string | ((props: TabTemplateProps) => string);
+export interface TabConfig {
+    selectorTab: string;
+    typeTab: string;
+    typeTabContainer: string;
+    classTab: string;
+    classTabActive: string;
+    typeTabs: string;
+    templateTab: TabTemplate;
+    typeTabContent: string;
+    templateTabContent?: TabTemplate;
+    tabProps?: ComponentDefinition;
+}
+export interface TabContainerConfig {
+    typeTabContainer: string;
+    typeTabs: string;
+    typeTab: string;
+    classTabContainer: string;
+    tabContainerProps?: ComponentDefinition;
+}
+export interface TabContentConfig {
+    typeTabContent: string;
+    classTabContent: string;
+    tabContentProps?: ComponentDefinition;
+}
+export interface TabContentsConfig {
+    typeTabContents: string;
+    classTabContents: string;
+    tabContentsProps?: ComponentDefinition;
+}
+export interface TabsConfig {
+    typeTabs: string;
+    typeTab: string;
+    typeTabContent: string;
+    typeTabContents: string;
+    typeTabContainer: string;
+    classTabActive: string;
+    selectorTab: string;
+    tabsProps?: ComponentDefinition;
+    style?: (config: TabsOptions) => string;
+}
+export interface TabComponentProps {
+    classactive: string;
+    selectortab: string;
+}
+export interface TabAttributes {
+    role?: string;
+    id?: string;
+    'aria-labelledby'?: string;
+    hidden?: boolean;
+    [key: string]: any;
+}
+export interface CustomWindow extends Window {
+    _isEditor?: boolean;
+}

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

@@ -0,0 +1,68 @@
+import type { BlockProperties, ComponentDefinition, Plugin } from 'grapesjs';
+type TraitsProperty = ComponentDefinition['traits'];
+export type PluginOptions = {
+    /**
+     * The ID used to create tooltip block and component
+     * @default 'tooltip'
+     */
+    id?: string;
+    /**
+     * The ID used to create tooltip block and component
+     * @default 'Tooltip'
+     */
+    labelTooltip?: string;
+    /**
+     * Object to extend the default tooltip block. Pass a falsy value to avoid adding the block.
+     * @example
+     * { label: 'Tooltip', category: 'Extra', ... }
+     */
+    blockTooltip?: Partial<BlockProperties>;
+    /**
+     * Object to extend the default tooltip properties.
+     * @example
+     * { name: 'Tooltip', droppable: false, ... }
+     */
+    propsTooltip?: ComponentDefinition;
+    /**
+     * A function which allows to extend default traits by receiving the original array and returning a new one.
+     */
+    extendTraits?: (traits: TraitsProperty) => TraitsProperty;
+    /**
+     * Tooltip attribute prefix.
+     * @default 'data-tooltip'
+     */
+    attrTooltip?: string;
+    /**
+     * Tooltip class prefix.
+     * @default 'tooltip-component'
+     */
+    classTooltip?: string;
+    /**
+     * Custom CSS styles for the tooltip component, this will replace the default one.
+     * @default 'tooltip-component'
+     */
+    style?: string;
+    /**
+     * Additional CSS styles for the tooltip component.
+     * @default 'tooltip-component'
+     */
+    styleAdditional?: string;
+    /**
+     * Make all tooltip relative classes private.
+     * @default true
+     */
+    privateClasses?: boolean;
+    /**
+     * Indicate if the tooltip can be styled.
+     * You can pass an array of which properties can be styled.
+     * @example ['color', 'background-color']
+     */
+    stylableTooltip?: string[] | boolean;
+    /**
+     * If true, force the tooltip to be shown when the default "Style tooltip" trait button is clicked.
+     * @default true
+     */
+    showTooltipOnStyle?: boolean;
+};
+declare const plugin: Plugin<PluginOptions>;
+export default plugin;