@studiocms/wysiwyg 0.1.0-experimental.5 → 0.1.1

package/dist/wysiwyg/components/Render.astro

@@ -1,11 +0,0 @@
----
-import type { PluginPageTypeRendererProps } from 'studiocms/types';
-import { prepareRender } from '../../common/prepareRender.js';
-import { shared } from '../shared.js';
-
-interface Props extends PluginPageTypeRendererProps {}
-
-// @ts-expect-error - $$result is a global variable injected by Astro during compilation and not a editor-known variable
-const data = await prepareRender($$result, Astro.props.data, shared?.sanitize);
----
-<Fragment set:html={data} />

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

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

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

@@ -1,239 +0,0 @@
-function blocks_default(editor, opts) {
-  const bm = editor.BlockManager;
-  const { category, blocks, stylePrefix, flexGrid, rowHeight, addBasicStyle } = opts;
-  const clsRow = `${stylePrefix}row`;
-  const clsCell = `${stylePrefix}cell`;
-  const styleRow = flexGrid ? `
-    .${clsRow} {
-      display: flex;
-      justify-content: flex-start;
-      align-items: stretch;
-      flex-wrap: nowrap;
-      padding: 10px;
-    }
-    @media (max-width: 768px) {
-      .${clsRow} {
-        flex-wrap: wrap;
-      }
-    }` : `
-    .${clsRow} {
-      display: table;
-      padding: 10px;
-      width: 100%;
-    }
-    @media (max-width: 768px) {
-      .${stylePrefix}cell, .${stylePrefix}cell30, .${stylePrefix}cell70 {
-        width: 100%;
-        display: block;
-      }
-    }`;
-  const styleClm = flexGrid ? `
-    .${clsCell} {
-      min-height: ${rowHeight}px;
-      flex-grow: 1;
-      flex-basis: 100%;
-    }` : `
-    .${clsCell} {
-      width: 8%;
-      display: table-cell;
-      height: ${rowHeight}px;
-    }`;
-  const styleClm30 = `
-  .${stylePrefix}cell30 {
-    width: 30%;
-  }`;
-  const styleClm70 = `
-  .${stylePrefix}cell70 {
-    width: 70%;
-  }`;
-  const step = 0.2;
-  const minDim = 1;
-  const currentUnit = 1;
-  const resizerBtm = {
-    tl: 0,
-    tc: 0,
-    tr: 0,
-    cl: 0,
-    cr: 0,
-    bl: 0,
-    br: 0,
-    minDim
-  };
-  const resizerRight = {
-    ...resizerBtm,
-    cr: 1,
-    bc: 0,
-    currentUnit,
-    minDim,
-    step
-  };
-  if (flexGrid) {
-    resizerRight.keyWidth = "flex-basis";
-  }
-  const rowAttr = {
-    class: clsRow,
-    "data-gjs-droppable": `.${clsCell}`,
-    "data-gjs-resizable": resizerBtm,
-    "data-gjs-name": "Row"
-  };
-  const colAttr = {
-    class: clsCell,
-    "data-gjs-draggable": `.${clsRow}`,
-    "data-gjs-resizable": resizerRight,
-    "data-gjs-name": "Cell"
-  };
-  if (flexGrid) {
-    colAttr["data-gjs-unstylable"] = ["width"];
-    colAttr["data-gjs-stylable-require"] = ["flex-basis"];
-  }
-  const privateCls = [`.${clsRow}`, `.${clsCell}`];
-  editor.on(
-    "selector:add",
-    (selector) => privateCls.indexOf(selector.getFullName()) >= 0 && selector.set("private", 1)
-  );
-  const attrsToString = (attrs) => {
-    const result = [];
-    for (const key in attrs) {
-      let value = attrs[key];
-      const toParse = Array.isArray(value) || value instanceof Object;
-      value = toParse ? JSON.stringify(value) : value;
-      result.push(`${key}=${toParse ? `'${value}'` : `'${value}'`}`);
-    }
-    return result.length ? ` ${result.join(" ")}` : "";
-  };
-  const toAdd = (name) => blocks.indexOf(name) >= 0;
-  const attrsRow = attrsToString(rowAttr);
-  const attrsCell = attrsToString(colAttr);
-  const commonBlockProps = {
-    category,
-    select: true
-  };
-  toAdd("column1") && bm.add("column1", {
-    ...commonBlockProps,
-    label: opts.labelColumn1,
-    media: `<svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M2 20h20V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1Z"/>
-      </svg>`,
-    content: `<div ${attrsRow}>
-        <div ${attrsCell}></div>
-      </div>
-      ${addBasicStyle ? `<style>
-          ${styleRow}
-          ${styleClm}
-        </style>` : ""}`
-  });
-  toAdd("column2") && bm.add("column2", {
-    ...commonBlockProps,
-    label: opts.labelColumn2,
-    media: `<svg viewBox="0 0 23 24">
-        <path fill="currentColor" d="M2 20h8V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM13 20h8V4h-8v16Zm-1 0V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1Z"/>
-      </svg>`,
-    content: `<div ${attrsRow}>
-        <div ${attrsCell}></div>
-        <div ${attrsCell}></div>
-      </div>
-      ${addBasicStyle ? `<style>
-          ${styleRow}
-          ${styleClm}
-        </style>` : ""}`
-  });
-  toAdd("column3") && bm.add("column3", {
-    ...commonBlockProps,
-    label: opts.labelColumn3,
-    media: `<svg viewBox="0 0 23 24">
-        <path fill="currentColor" d="M2 20h4V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM17 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1ZM9.5 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z"/>
-      </svg>`,
-    content: `<div ${attrsRow}>
-        <div ${attrsCell}></div>
-        <div ${attrsCell}></div>
-        <div ${attrsCell}></div>
-      </div>
-      ${addBasicStyle ? `<style>
-          ${styleRow}
-          ${styleClm}
-        </style>` : ""}`
-  });
-  toAdd("column3-7") && bm.add("column3-7", {
-    ...commonBlockProps,
-    label: opts.labelColumn37,
-    media: `<svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M2 20h5V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM10 20h12V4H10v16Zm-1 0V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1Z"/>
-      </svg>`,
-    content: `<div ${attrsRow}>
-        <div ${attrsCell} style='${flexGrid ? "flex-basis" : "width"}: 30%;'></div>
-        <div ${attrsCell} style='${flexGrid ? "flex-basis" : "width"}: 70%;'></div>
-      </div>
-      ${addBasicStyle ? `<style>
-          ${styleRow}
-          ${styleClm}
-          ${styleClm30}
-          ${styleClm70}
-        </style>` : ""}`
-  });
-  toAdd("text") && bm.add("text", {
-    ...commonBlockProps,
-    activate: true,
-    label: opts.labelText,
-    media: `<svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" />
-      </svg>`,
-    content: {
-      type: "text",
-      content: "Insert your text here",
-      style: { padding: "10px" }
-    }
-  });
-  toAdd("link") && bm.add("link", {
-    ...commonBlockProps,
-    label: opts.labelLink,
-    media: `<svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z" />
-      </svg>`,
-    content: {
-      type: "link",
-      content: "Link",
-      style: { color: "#d983a6" }
-    }
-  });
-  toAdd("image") && bm.add("image", {
-    ...commonBlockProps,
-    activate: true,
-    label: opts.labelImage,
-    media: `<svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M21,3H3C2,3 1,4 1,5V19A2,2 0 0,0 3,21H21C22,21 23,20 23,19V5C23,4 22,3 21,3M5,17L8.5,12.5L11,15.5L14.5,11L19,17H5Z" />
-      </svg>`,
-    content: {
-      style: { color: "black" },
-      type: "image"
-    }
-  });
-  toAdd("video") && bm.add("video", {
-    ...commonBlockProps,
-    label: opts.labelVideo,
-    media: `<svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />
-      </svg>`,
-    content: {
-      type: "video",
-      src: "img/video2.webm",
-      style: {
-        height: "350px",
-        width: "615px"
-      }
-    }
-  });
-  toAdd("map") && bm.add("map", {
-    ...commonBlockProps,
-    label: opts.labelMap,
-    media: `<svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M20.5,3L20.34,3.03L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21L3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19.03 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3M10,5.47L14,6.87V18.53L10,17.13V5.47M5,6.46L8,5.45V17.15L5,18.31V6.46M19,17.54L16,18.55V6.86L19,5.7V17.54Z" />
-      </svg>`,
-    content: {
-      type: "map",
-      style: { height: "350px" }
-    }
-  });
-}
-export {
-  blocks_default as default
-};

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

@@ -1,80 +0,0 @@
-import type { Plugin } from 'grapesjs';
-export type PluginOptions = {
-    /**
-     * Which blocks to add.
-     * @default ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map']
-     */
-    blocks?: string[];
-    /**
-     * 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;
-    /**
-     * Blocks category name
-     * @default 'Basic'
-     */
-    category?: string;
-    /**
-     * 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;
-};
-declare const plugin: Plugin<PluginOptions>;
-export default plugin;

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

@@ -1,26 +0,0 @@
-import loadBlocks from "./blocks.js";
-const plugin = (editor, opts = {}) => {
-  const config = {
-    blocks: ["column1", "column2", "column3", "column3-7", "text", "link", "image", "video", "map"],
-    flexGrid: false,
-    stylePrefix: "gjs-",
-    addBasicStyle: true,
-    category: "Basic",
-    labelColumn1: "1 Column",
-    labelColumn2: "2 Columns",
-    labelColumn3: "3 Columns",
-    labelColumn37: "2 Columns 3/7",
-    labelText: "Text",
-    labelLink: "Link",
-    labelImage: "Image",
-    labelVideo: "Video",
-    labelMap: "Map",
-    rowHeight: 75,
-    ...opts
-  };
-  loadBlocks(editor, config);
-};
-var blocks_default = plugin;
-export {
-  blocks_default as default
-};

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

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

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

@@ -1,20 +0,0 @@
-import { typeCustomCode } from "./utils.js";
-var blocks_default = (editor, { blockCustomCode } = {}) => {
-  const { Blocks } = editor;
-  blockCustomCode && Blocks.add(typeCustomCode, {
-    label: "Custom Code",
-    media: `
-      <svg viewBox="0 0 24 24">
-        <path d="M14.6 16.6l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4z"></path>
-      </svg>
-    `,
-    category: "Extra",
-    activate: true,
-    select: true,
-    content: { type: typeCustomCode },
-    ...blockCustomCode
-  });
-};
-export {
-  blocks_default as default
-};

package/dist/wysiwyg/editorPlugins/code/commands.d.ts

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

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

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

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

@@ -1,47 +0,0 @@
-import type { BlockProperties, ComponentDefinition, Plugin } from 'grapesjs';
-export type PluginOptions = {
-    /**
-     * 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>;
-};
-declare const plugin: Plugin<PluginOptions>;
-export default plugin;

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

@@ -1,28 +0,0 @@
-import loadBlocks from "./blocks.js";
-import loadCommands from "./commands.js";
-import loadComponents from "./components.js";
-const plugin = (editor, opts = {}) => {
-  const options = {
-    blockCustomCode: {},
-    propsCustomCode: {},
-    toolbarBtnCustomCode: {},
-    placeholderScript: `<div style="pointer-events: none; padding: 10px;">
-      <svg viewBox="0 0 24 24" style="height: 30px; vertical-align: middle;">
-        <path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"></path>
-        </svg>
-      Custom code with <i>&lt;script&gt;</i> can't be rendered on the canvas
-    </div>`,
-    modalTitle: "Insert your code",
-    codeViewOptions: {},
-    buttonLabel: "Save",
-    commandCustomCode: {},
-    ...opts
-  };
-  loadComponents(editor, options);
-  loadBlocks(editor, options);
-  loadCommands(editor, options);
-};
-var code_default = plugin;
-export {
-  code_default as default
-};

package/dist/wysiwyg/editorPlugins/code/utils.d.ts

@@ -1,3 +0,0 @@
-export declare const keyCustomCode = "custom-code-plugin__code";
-export declare const typeCustomCode = "custom-code";
-export declare const commandNameCustomCode = "custom-code:open-modal";

package/dist/wysiwyg/editorPlugins/code/utils.js

@@ -1,8 +0,0 @@
-const keyCustomCode = "custom-code-plugin__code";
-const typeCustomCode = "custom-code";
-const commandNameCustomCode = "custom-code:open-modal";
-export {
-  commandNameCustomCode,
-  keyCustomCode,
-  typeCustomCode
-};

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

@@ -1,86 +0,0 @@
-import type { BlockProperties, ComponentDefinition, Plugin } from 'grapesjs';
-export type PluginOptions = {
-    /**
-     * 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;
-};
-type TElement = HTMLElement & {
-    __gjsCountdownInterval: NodeJS.Timer;
-};
-declare global {
-    interface Window {
-        __gjsCountdownIntervals: TElement[];
-    }
-}
-declare const plugin: Plugin<PluginOptions>;
-export default plugin;