@studiocms/wysiwyg 0.1.0-experimental.5 → 0.1.0

package/dist/{wysiwyg/editorPlugins/forms/traits.js → common/grapesBlocks/traits/formTraits.js}

@@ -1,7 +1,8 @@
-import { typeOption } from "./components.js";
-function traits_default(editor) {
-  const trm = editor.TraitManager;
-  trm.addType("select-options", {
+import { typeOption } from "../consts.js";
+import { AddTrait } from "./index.js";
+var formTraits_default = (editor) => {
+  const addTrait = AddTrait(editor);
+  addTrait("select-options", {
     events: {
       keyup: "onChange"
     },
@@ -12,7 +13,9 @@ function traits_default(editor) {
       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],
@@ -27,10 +30,11 @@ function traits_default(editor) {
         const optionsArr = [];
         const options = this.target.components();
         for (let i = 0; i < options.length; i++) {
-          const option = options.models[i];
+          const option = options.at(i);
+          if (!option) continue;
           const optAttr = option.get("attributes");
           const optValue = optAttr?.value || "";
-          const optTxtNode = option.components().models[0];
+          const optTxtNode = option.components().at(0);
           const optLabel = optTxtNode?.get("content") || "";
           optionsArr.push(`${optValue}::${optLabel}`);
         }
@@ -41,7 +45,7 @@ function traits_default(editor) {
       return this.$input;
     }
   });
-}
+};
 export {
-  traits_default as default
+  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/{wysiwyg/editorPlugins/tuiImageEditor.d.ts → common/grapesBlocks/tuiImageEditor/index.d.ts}

@@ -1,4 +1,4 @@
-import type { Component, Plugin } from 'grapesjs';
+import type { Component, Editor } from 'grapesjs';
 type ImageEditor = tuiImageEditor.ImageEditor;
 type IOptions = tuiImageEditor.IOptions;
 export type PluginOptions = {
@@ -82,5 +82,5 @@ export type PluginOptions = {
      */
     style?: string[];
 };
-declare const plugin: Plugin<PluginOptions>;
+declare const plugin: (editor: Editor) => void;
 export default plugin;

package/dist/{wysiwyg/editorPlugins/tuiImageEditor.js → common/grapesBlocks/tuiImageEditor/index.js}

@@ -1,4 +1,4 @@
-const plugin = (editor, options = {}) => {
+const plugin = (editor) => {
   const opts = {
     config: {},
     constructor: "",
@@ -25,8 +25,7 @@ const plugin = (editor, options = {}) => {
     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";
@@ -81,12 +80,12 @@ const plugin = (editor, options = {}) => {
   const errorOpts = { level: "error", ns: commandId };
   editor.Commands.add(commandId, {
     imageEditor: null,
-    run(ed, s, options2 = {}) {
+    run(ed, _s, options = {}) {
       if (!constr) {
         ed.log("TOAST UI Image editor not found", errorOpts);
         return ed.stopCommand(commandId);
       }
-      const target = options2.target || ed.getSelected();
+      const target = options.target || ed.getSelected();
       if (!target) {
         ed.log("Target not available", errorOpts);
         return ed.stopCommand(commandId);
@@ -162,11 +161,11 @@ const plugin = (editor, options = {}) => {
         am.FileUploader().uploadFile(
           {
             dataTransfer: {
-              // @ts-ignore
+              // @ts-expect-error
               files: [file]
             }
           },
-          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+          // 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);

package/dist/common/grapesBlocks/types.d.ts

@@ -0,0 +1,446 @@
+import type { BlockProperties, ComponentDefinition, Editor } from 'grapesjs';
+import type { RichTextEditorOptions } from './rte/index.js';
+type TraitsProperty = ComponentDefinition['traits'];
+type BlockList = string[];
+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;
+}
+export type TooltipOptions = {
+    /**
+     * 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;
+};
+export interface TypedOptions {
+    /**
+     * 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 CountdownOptions = {
+    /**
+     * The ID used to create the block and component
+     * @default 'countdown'
+     */
+    id?: string;
+    /**
+     * The label used for the block and the component.
+     * @default 'Countdown'
+     */
+    label?: string;
+    /**
+     * Object to extend the default block. Pass a falsy value to avoid adding the block.
+     * @example
+     * { label: 'Countdown', category: 'Extra', ... }
+     */
+    block?: Partial<BlockProperties>;
+    /**
+     * Object to extend the default component properties.
+     * @example
+     * { name: 'Countdown', droppable: false, ... }
+     */
+    props?: ComponentDefinition;
+    /**
+     * Custom CSS styles for the component. This will replace the default one.
+     * @default ''
+     */
+    style?: string;
+    /**
+     * Additional CSS styles for the component. These will be appended to the default one.
+     * @default ''
+     */
+    styleAdditional?: string;
+    /**
+     * Default start time.
+     * @default ''
+     * @example '2018-01-25 00:00'
+     */
+    startTime?: string;
+    /**
+     * Text to show when the countdown is ended.
+     * @default 'EXPIRED'
+     */
+    endText?: string;
+    /**
+     * Date input type, eg. `date`, `datetime-local`
+     * @default 'date'
+     */
+    dateInputType?: string;
+    /**
+     * Days label text used in component.
+     * @default 'days'
+     */
+    labelDays?: string;
+    /**
+     * Hours label text used in component.
+     * @default 'hours'
+     */
+    labelHours?: string;
+    /**
+     * Minutes label text used in component.
+     * @default 'minutes'
+     */
+    labelMinutes?: string;
+    /**
+     * Seconds label text used in component.
+     * @default 'seconds'
+     */
+    labelSeconds?: string;
+    /**
+     * Countdown component class prefix.
+     * @default 'countdown'
+     */
+    classPrefix?: string;
+};
+export type CustomCodeOptions = {
+    /**
+     * Object to extend the default custom code block. Pass a falsy value to avoid adding the block
+     * @example
+     * { label: 'Custom Code', category: 'Extra', ... }
+     */
+    blockCustomCode?: Partial<BlockProperties>;
+    /**
+     * Object to extend the default custom code properties.
+     * @example
+     * { name: 'Custom Code', droppable: false, ... }
+     */
+    propsCustomCode?: ComponentDefinition;
+    /**
+     * Object to extend the default component's toolbar button for the code. Pass a falsy value to avoid adding the button
+     * @example
+     * { label: '</>', attributes: { title: 'Open custom code' } }
+     */
+    toolbarBtnCustomCode?: Record<string, any>;
+    /**
+     * Content to show when the custom code contains `<script>`
+     */
+    placeholderScript?: string;
+    /**
+     * Title for the custom code modal
+     * @default 'Insert your code'
+     */
+    modalTitle?: string;
+    /**
+     * Additional options for the code viewer.
+     * @example
+     * { theme: 'hopscotch', readOnly: 0 }
+     */
+    codeViewOptions?: Record<string, any>;
+    /**
+     * Label for the default save button
+     * @default 'Save'
+     */
+    buttonLabel?: string;
+    /**
+     * Object to extend the default custom code command.
+     */
+    commandCustomCode?: Record<string, any>;
+};
+export interface GrapesBlocksOptions {
+    blocks: BlockList;
+    /**
+     * Add custom block options, based on block id.
+     * @default (blockId) => ({})
+     * @example (blockId) => blockId === 'quote' ? { attributes: {...} } : {};
+     */
+    block?: (blockId: string) => {};
+    /**
+     * Modal import title.
+     * @default 'Import'
+     */
+    modalImportTitle?: string;
+    /**
+     * Modal import button text.
+     * @default 'Import'
+     */
+    modalImportButton?: string;
+    /**
+     * Import description inside import modal.
+     * @default ''
+     */
+    modalImportLabel?: string;
+    /**
+     * Default content to setup on import model open.
+     * Could also be a function with a dynamic content return (must be a string).
+     * @default ''
+     * @example editor => editor.getHtml()
+     */
+    modalImportContent?: string | ((editor: Editor) => string);
+    /**
+     * Code viewer (eg. CodeMirror) options.
+     * @default {}
+     */
+    importViewerOptions?: Record<string, any>;
+    /**
+     * Confirm text before clearing the canvas.
+     * @default 'Are you sure you want to clear the canvas?'
+     */
+    textCleanCanvas?: string;
+    /**
+     * Show the Style Manager on component change.
+     * @default true
+     */
+    showStylesOnChange?: boolean;
+    /**
+     * Make use of flexbox for the grid
+     * @default false
+     */
+    flexGrid?: boolean;
+    /**
+     * Classes prefix
+     * @default 'gjs-'
+     */
+    stylePrefix?: string;
+    /**
+     * Use basic CSS for blocks
+     * @default true
+     */
+    addBasicStyle?: boolean;
+    /**
+     * 1 Column label
+     * @default '1 Column'
+     */
+    labelColumn1?: string;
+    /**
+     * 2 Columns label
+     * @default '2 Columns'
+     */
+    labelColumn2?: string;
+    /**
+     * 3 Columns label
+     * @default '3 Columns'
+     */
+    labelColumn3?: string;
+    /**
+     * 3/7 Columns label
+     * @default '2 Columns 3/7'
+     */
+    labelColumn37?: string;
+    /**
+     * Text label
+     * @default 'Text'
+     */
+    labelText?: string;
+    /**
+     * Link label
+     * @default 'Link'
+     */
+    labelLink?: string;
+    /**
+     * Image label
+     * @default 'Image'
+     */
+    labelImage?: string;
+    /**
+     * Video label
+     * @default 'Video'
+     */
+    labelVideo?: string;
+    /**
+     * Map label
+     * @default 'Map'
+     */
+    labelMap?: string;
+    /**
+     * Initial row height
+     * @default 75
+     */
+    rowHeight?: number;
+    /**
+     * Tooltip options.
+     * @default {}
+     */
+    tooltip?: TooltipOptions;
+    /**
+     * Options for the Typed.js component.
+     * @default {}
+     */
+    typed?: TypedOptions;
+    /**
+     * Options for the Rich Text Editor component.
+     * @default {}
+     */
+    rteOpts?: RichTextEditorOptions;
+    /**
+     * Options for the Countdown component.
+     * @default {}
+     */
+    countdown?: CountdownOptions;
+    /**
+     * Options for the Custom Code component.
+     * @default {}
+     */
+    customCode?: CustomCodeOptions;
+    /**
+     * Options for the Tabs component.
+     * @default {}
+     */
+    tabOptions?: TabsOptions;
+}
+export type RequiredTooltipOptions = Required<TooltipOptions>;
+export type RequiredTypedOptions = Required<TypedOptions>;
+export type RequiredCountdownOptions = Required<CountdownOptions>;
+export type RequiredCustomCodeOptions = Required<CustomCodeOptions>;
+export type RequiredTabsOptions = Required<TabsOptions>;
+export type RequiredGrapesBlocksOptions = Required<GrapesBlocksOptions>;
+export {};