@studiocms/wysiwyg 0.1.0-experimental.5 → 0.1.0

package/dist/wysiwyg/editorPlugins/countdown.js

@@ -1,163 +0,0 @@
-const plugin = (editor, opts = {}) => {
-  const options = {
-    id: "countdown",
-    label: "Countdown",
-    block: {},
-    props: {},
-    style: "",
-    styleAdditional: "",
-    startTime: "",
-    endText: "EXPIRED",
-    dateInputType: "date",
-    labelDays: "days",
-    labelHours: "hours",
-    labelMinutes: "minutes",
-    labelSeconds: "seconds",
-    classPrefix: "countdown",
-    ...opts
-  };
-  const { block, props, style } = options;
-  const id = options.id;
-  const label = options.label;
-  const pfx = options.classPrefix;
-  if (block) {
-    editor.Blocks.add(id, {
-      media: `<svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M17 11.5V13H11V7H12.5V11.5H17Z" />
-      </svg>`,
-      label,
-      category: "Extra",
-      select: true,
-      content: { type: id },
-      ...block
-    });
-  }
-  const countdownScript = function(props2) {
-    const startfrom = props2.startfrom;
-    const endTxt = props2.endText;
-    const el = this;
-    const countDownDate = new Date(startfrom).getTime();
-    const countdownEl = el.querySelector("[data-js=countdown]");
-    const endTextEl = el.querySelector("[data-js=countdown-endtext]");
-    const dayEl = el.querySelector("[data-js=countdown-day]");
-    const hourEl = el.querySelector("[data-js=countdown-hour]");
-    const minuteEl = el.querySelector("[data-js=countdown-minute]");
-    const secondEl = el.querySelector("[data-js=countdown-second]");
-    const oldInterval = el.__gjsCountdownInterval;
-    oldInterval && clearInterval(oldInterval);
-    const connected = window.__gjsCountdownIntervals || [];
-    const toClean = [];
-    connected.forEach((item) => {
-      if (!item.isConnected) {
-        clearInterval(item.__gjsCountdownInterval);
-        toClean.push(item);
-      }
-    });
-    connected.indexOf(el) < 0 && connected.push(el);
-    window.__gjsCountdownIntervals = connected.filter((item) => toClean.indexOf(item) < 0);
-    const setTimer = (days, hours, minutes, seconds) => {
-      dayEl.innerHTML = `${days < 10 ? `0${days}` : days}`;
-      hourEl.innerHTML = `${hours < 10 ? `0${hours}` : hours}`;
-      minuteEl.innerHTML = `${minutes < 10 ? `0${minutes}` : minutes}`;
-      secondEl.innerHTML = `${seconds < 10 ? `0${seconds}` : seconds}`;
-    };
-    const moveTimer = () => {
-      const now = (/* @__PURE__ */ new Date()).getTime();
-      const distance = countDownDate - now;
-      const days = Math.floor(distance / 864e5);
-      const hours = Math.floor(distance % 864e5 / 36e5);
-      const minutes = Math.floor(distance % 36e5 / 6e4);
-      const seconds = Math.floor(distance % 6e4 / 1e3);
-      setTimer(days, hours, minutes, seconds);
-      if (distance < 0) {
-        clearInterval(el.__gjsCountdownInterval);
-        endTextEl.innerHTML = endTxt;
-        countdownEl.style.display = "none";
-        endTextEl.style.display = "";
-      }
-    };
-    if (countDownDate) {
-      el.__gjsCountdownInterval = setInterval(moveTimer, 1e3);
-      endTextEl.style.display = "none";
-      countdownEl.style.display = "";
-      moveTimer();
-    } else {
-      setTimer(0, 0, 0, 0);
-    }
-  };
-  editor.Components.addType(id, {
-    model: {
-      defaults: {
-        startfrom: options.startTime,
-        classes: [pfx],
-        endText: options.endText,
-        droppable: false,
-        script: countdownScript,
-        "script-props": ["startfrom", "endText"],
-        traits: [
-          {
-            label: "Start",
-            name: "startfrom",
-            changeProp: true,
-            type: options.dateInputType
-          },
-          {
-            label: "End text",
-            name: "endText",
-            changeProp: true
-          }
-        ],
-        // @ts-ignore
-        components: `
-          <span data-js="countdown" class="${pfx}-cont">
-            <div class="${pfx}-block">
-              <div data-js="countdown-day" class="${pfx}-digit"></div>
-              <div class="${pfx}-label">${options.labelDays}</div>
-            </div>
-            <div class="${pfx}-block">
-              <div data-js="countdown-hour" class="${pfx}-digit"></div>
-              <div class="${pfx}-label">${options.labelHours}</div>
-            </div>
-            <div class="${pfx}-block">
-              <div data-js="countdown-minute" class="${pfx}-digit"></div>
-              <div class="${pfx}-label">${options.labelMinutes}</div>
-            </div>
-            <div class="${pfx}-block">
-              <div data-js="countdown-second" class="${pfx}-digit"></div>
-              <div class="${pfx}-label">${options.labelSeconds}</div>
-            </div>
-          </span>
-          <span data-js="countdown-endtext" class="${pfx}-endtext"></span>
-        `,
-        styles: (style || `
-          .${pfx} {
-            text-align: center;
-          }
-
-          .${pfx}-block {
-            display: inline-block;
-            margin: 0 10px;
-            padding: 10px;
-          }
-
-          .${pfx}-digit {
-            font-size: 5rem;
-          }
-
-          .${pfx}-endtext {
-            font-size: 5rem;
-          }
-
-          .${pfx}-cont {
-            display: inline-block;
-          }
-        `) + options.styleAdditional,
-        ...props
-      }
-    }
-  });
-};
-var countdown_default = plugin;
-export {
-  countdown_default as default
-};

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

@@ -1,3 +0,0 @@
-import type { Editor } from 'grapesjs';
-import type { PluginOptions } from './index.js';
-export default function (editor: Editor, opt: Required<PluginOptions>): void;

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

@@ -1,11 +0,0 @@
-import type { Editor } from 'grapesjs';
-export declare const typeForm = "form";
-export declare const typeInput = "input";
-export declare const typeTextarea = "textarea";
-export declare const typeSelect = "select";
-export declare const typeCheckbox = "checkbox";
-export declare const typeRadio = "radio";
-export declare const typeButton = "button";
-export declare const typeLabel = "label";
-export declare const typeOption = "option";
-export default function (editor: Editor): void;

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

@@ -1,21 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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/styles.css

@@ -1,63 +0,0 @@
-.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

@@ -1,3 +0,0 @@
-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/components/index.d.ts

@@ -1,4 +0,0 @@
-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/index.d.ts

@@ -1,5 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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;

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

@@ -1,4 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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;

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

@@ -1,35 +0,0 @@
-import type { BlockProperties, ComponentDefinition, Plugin } from 'grapesjs';
-export interface PluginOptions {
-    /**
-     * Library to load asynchronously in case `Typed` is not found.
-     * @default 'https://cdn.jsdelivr.net/npm/typed.js@2.0.11'
-     */
-    script?: string;
-    /**
-     * Object to extend the default block, eg. `{ label: 'Typed', ... }`.
-     * Pass a falsy value to avoid adding the block
-     * @default {}
-     */
-    block?: Partial<BlockProperties>;
-    /**
-     * Customize the component props. The final object should be returned.
-     * @default (props) => props
-     * @example
-     * props: props => {
-     *    props.traits = props.traits.map(trait => {
-     *      if (trait.name == 'strings') {
-     *        trait.label = 'Custom <b>trait<b/> label';
-     *      }
-     *      // this trait will be removed
-     *      if (trait.name == 'fade-out-class') return;
-     *      return trait;
-     *    }).filter(Boolean);
-     *
-     *    return props;
-     * }
-     */
-    props?: (p: ComponentDefinition) => ComponentDefinition;
-}
-export type RequiredPluginOptions = Required<PluginOptions>;
-declare const plugin: Plugin<PluginOptions>;
-export default plugin;

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

@@ -1,18 +0,0 @@
-import loadBlocks from "./blocks.js";
-import loadComponents from "./components.js";
-import loadTraits from "./traits.js";
-const plugin = (editor, opts = {}) => {
-  const options = {
-    script: "https://cdn.jsdelivr.net/npm/typed.js@2.0.11",
-    block: {},
-    props: (p) => p,
-    ...opts
-  };
-  loadComponents(editor, options);
-  loadBlocks(editor, options);
-  loadTraits(editor);
-};
-var typed_default = plugin;
-export {
-  typed_default as default
-};