@studiocms/wysiwyg 0.1.0-beta.24

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 StudioCMS - withstudiocms (https://github.com/withstudiocms)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# @studiocms/wysiwyg
+
+Add a WYSIWYG editor to your StudioCMS dashboard.
+
+## Overview
+
+Add this plugin to your StudioCMS config (`studiocms.config.mjs` or `.mts`):
+
+```ts
+import wysiwyg from '@studiocms/wysiwyg';
+
+export default defineStudioCMSConfig({
+    // other options here
+    plugins: [wysiwyg()]
+});
+```
+
+## License
+
+[MIT Licensed](./LICENSE).

package/dist/common/componentRegistry.d.ts

@@ -0,0 +1,31 @@
+import type { Plugin } from 'grapesjs';
+import type { ComponentRegistryEntry } from 'studiocms/componentRegistry/types';
+/**
+ * Represents a collection of registered components for use within the Astro environment.
+ *
+ * @property componentRegistry - An array of `ComponentRegistryEntry` objects, each describing a registered component.
+ */
+interface AstroComponents {
+    componentRegistry: ComponentRegistryEntry[];
+}
+/**
+ * Registers custom Astro components in the GrapesJS editor using a provided component registry.
+ *
+ * This plugin iterates over the given `componentRegistry` array and for each entry:
+ * - Adds a new component type to the GrapesJS `DomComponents` manager, mapping the component's props to GrapesJS traits.
+ * - Registers a new block in the GrapesJS `BlockManager` for easy drag-and-drop usage in the editor.
+ *
+ * @param editor - The GrapesJS editor instance to extend.
+ * @param opts - Optional configuration object.
+ * @param opts.componentRegistry - An array of component registry entries, each describing an Astro component to register.
+ *
+ * Each component registry entry should have:
+ * - `name`: The tag name of the component.
+ * - `props`: An array of prop definitions, each with `name`, `type`, and `defaultValue`.
+ *
+ * @remarks
+ * - The function expects helper functions such as `traitTypeFilter`, `renderComponentPreview`, `firstUpperCase`, and the `AstroSVG` asset to be available in scope.
+ * - The registered components and blocks will appear under the "Astro Components" category in the GrapesJS block manager.
+ */
+export declare const astroComponents: Plugin<AstroComponents>;
+export {};

package/dist/common/componentRegistry.js

@@ -0,0 +1,59 @@
+import { PARTIAL_PATH } from "../consts.js";
+import { buildBlockProps, partialRequestBuilder, traitMapFn } from "./editor-utils.js";
+const astroComponents = (editor, { componentRegistry }) => {
+  const componentKeys = componentRegistry.map(({ name }) => name);
+  for (const component of componentRegistry) {
+    const { name, props } = component;
+    let timedInterval;
+    let abortController;
+    editor.DomComponents.addType(name, {
+      isComponent: (el) => componentKeys.includes(el.tagName?.toLowerCase()),
+      model: {
+        defaults: {
+          tagName: name,
+          traits: props.map(traitMapFn)
+        }
+      },
+      view: {
+        tagName: () => "div",
+        init() {
+          this.listenTo(this.model.components(), "add remove reset", this.onChange);
+          this.listenTo(this.model, "change", this.onChange);
+          this.onChange();
+        },
+        onChange() {
+          timedInterval && clearTimeout(timedInterval);
+          abortController?.abort();
+          timedInterval = setTimeout(() => {
+            abortController = new AbortController();
+            fetch(PARTIAL_PATH, {
+              ...partialRequestBuilder(this.model),
+              signal: abortController.signal
+            }).then((getCompResponse) => {
+              if (!getCompResponse.ok) {
+                console.log("[Error]: Could not fetch component HTML, please try again.");
+                const html = `<div class="error">Error: ${getCompResponse.statusText}</div>`;
+                this.el.innerHTML = html;
+                return;
+              }
+              return getCompResponse.text();
+            }).then((html) => {
+              if (html !== void 0) {
+                this.el.innerHTML = html;
+              }
+            }).catch((error) => {
+              if (error.name !== "AbortError") {
+                console.log("[Error]: Network or parsing error:", error);
+                this.el.innerHTML = `<div class="error">Network Error</div>`;
+              }
+            });
+          }, 100);
+        }
+      }
+    });
+    editor.BlockManager.add(name, buildBlockProps(name));
+  }
+};
+export {
+  astroComponents
+};

package/dist/common/editor-settings.d.ts

@@ -0,0 +1,23 @@
+import type { EditorConfig } from 'grapesjs';
+/**
+ * The base configuration object for the WYSIWYG editor.
+ *
+ * This partial configuration of `EditorConfig` defines the default settings for the editor container,
+ * dimensions, storage management, panels, canvas styles, and the style manager sectors.
+ *
+ * @remarks
+ * - The `container` property specifies the DOM selector for the editor.
+ * - The `height` and `width` properties define the editor's dimensions.
+ * - `storageManager` is set to use inline storage.
+ * - `panels` are initialized as empty.
+ * - The `canvas` property includes an array of stylesheets to be loaded.
+ * - The `styleManager` property organizes style controls into sectors such as General, Dimension, Typography, Decorations, Extra, and Flex.
+ *   Each sector contains properties or buildProps for customizing the appearance and layout of elements within the editor.
+ *
+ * @example
+ * ```typescript
+ * import { baseConfig } from './editor-settings';
+ * // Use baseConfig to initialize the editor
+ * ```
+ */
+export declare const baseConfig: Partial<EditorConfig>;

package/dist/common/editor-settings.js

@@ -0,0 +1,357 @@
+import { GRAPES_CSS_PATH } from "../consts.js";
+const baseConfig = {
+  container: "#gjs",
+  height: "100%",
+  width: "auto",
+  fromElement: false,
+  storageManager: {
+    type: "db",
+    stepsBeforeSave: 10
+  },
+  panels: { defaults: [] },
+  canvas: {
+    styles: [GRAPES_CSS_PATH]
+  },
+  styleManager: {
+    sectors: [
+      {
+        name: "General",
+        properties: [
+          {
+            extend: "float",
+            type: "radio",
+            default: "none",
+            options: [
+              {
+                value: "none",
+                className: "fa fa-times",
+                id: ""
+              },
+              {
+                value: "left",
+                className: "fa fa-align-left",
+                id: ""
+              },
+              {
+                value: "right",
+                className: "fa fa-align-right",
+                id: ""
+              }
+            ]
+          },
+          "display",
+          { extend: "position", type: "select" },
+          "top",
+          "right",
+          "left",
+          "bottom"
+        ]
+      },
+      {
+        name: "Dimension",
+        open: false,
+        properties: [
+          "width",
+          {
+            id: "flex-width",
+            type: "integer",
+            name: "Width",
+            units: ["px", "%"],
+            property: "flex-basis",
+            toRequire: true
+          },
+          "height",
+          "max-width",
+          "min-height",
+          "margin",
+          "padding"
+        ]
+      },
+      {
+        name: "Typography",
+        open: false,
+        properties: [
+          "font-family",
+          "font-size",
+          "font-weight",
+          "letter-spacing",
+          "color",
+          "line-height",
+          {
+            extend: "text-align",
+            options: [
+              {
+                id: "left",
+                label: "Left",
+                className: "fa fa-align-left"
+              },
+              {
+                id: "center",
+                label: "Center",
+                className: "fa fa-align-center"
+              },
+              {
+                id: "right",
+                label: "Right",
+                className: "fa fa-align-right"
+              },
+              {
+                id: "justify",
+                label: "Justify",
+                className: "fa fa-align-justify"
+              }
+            ]
+          },
+          {
+            property: "text-decoration",
+            type: "radio",
+            default: "none",
+            options: [
+              {
+                id: "none",
+                label: "None",
+                className: "fa fa-times"
+              },
+              {
+                id: "underline",
+                label: "underline",
+                className: "fa fa-underline"
+              },
+              {
+                id: "line-through",
+                label: "Line-through",
+                className: "fa fa-strikethrough"
+              }
+            ]
+          },
+          "text-shadow"
+        ]
+      },
+      {
+        name: "Decorations",
+        open: false,
+        properties: [
+          "opacity",
+          "border-radius",
+          "border",
+          "box-shadow",
+          "background"
+          // { id: 'background-bg', property: 'background', type: 'bg' }
+        ]
+      },
+      {
+        name: "Extra",
+        open: false,
+        buildProps: ["transition", "perspective", "transform"]
+      },
+      {
+        name: "Flex",
+        open: false,
+        properties: [
+          {
+            name: "Flex Container",
+            property: "display",
+            type: "select",
+            defaults: "block",
+            list: [
+              { value: "block", name: "Disable", id: "" },
+              { value: "flex", name: "Enable", id: "" }
+            ]
+          },
+          {
+            name: "Flex Parent",
+            property: "label-parent-flex",
+            type: "integer"
+          },
+          {
+            name: "Direction",
+            property: "flex-direction",
+            type: "radio",
+            defaults: "row",
+            list: [
+              {
+                value: "row",
+                name: "Row",
+                className: "icons-flex icon-dir-row",
+                title: "Row",
+                id: ""
+              },
+              {
+                value: "row-reverse",
+                name: "Row reverse",
+                className: "icons-flex icon-dir-row-rev",
+                title: "Row reverse",
+                id: ""
+              },
+              {
+                value: "column",
+                name: "Column",
+                title: "Column",
+                className: "icons-flex icon-dir-col",
+                id: ""
+              },
+              {
+                value: "column-reverse",
+                name: "Column reverse",
+                title: "Column reverse",
+                className: "icons-flex icon-dir-col-rev",
+                id: ""
+              }
+            ]
+          },
+          {
+            name: "Justify",
+            property: "justify-content",
+            type: "radio",
+            defaults: "flex-start",
+            list: [
+              {
+                value: "flex-start",
+                className: "icons-flex icon-just-start",
+                title: "Start",
+                id: ""
+              },
+              {
+                value: "flex-end",
+                title: "End",
+                className: "icons-flex icon-just-end",
+                id: ""
+              },
+              {
+                value: "space-between",
+                title: "Space between",
+                className: "icons-flex icon-just-sp-bet",
+                id: ""
+              },
+              {
+                value: "space-around",
+                title: "Space around",
+                className: "icons-flex icon-just-sp-ar",
+                id: ""
+              },
+              {
+                value: "center",
+                title: "Center",
+                className: "icons-flex icon-just-sp-cent",
+                id: ""
+              }
+            ]
+          },
+          {
+            name: "Align",
+            property: "align-items",
+            type: "radio",
+            defaults: "center",
+            list: [
+              {
+                value: "flex-start",
+                title: "Start",
+                className: "icons-flex icon-al-start",
+                id: ""
+              },
+              {
+                value: "flex-end",
+                title: "End",
+                className: "icons-flex icon-al-end",
+                id: ""
+              },
+              {
+                value: "stretch",
+                title: "Stretch",
+                className: "icons-flex icon-al-str",
+                id: ""
+              },
+              {
+                value: "center",
+                title: "Center",
+                className: "icons-flex icon-al-center",
+                id: ""
+              }
+            ]
+          },
+          {
+            name: "Flex Children",
+            property: "label-parent-flex",
+            type: "integer"
+          },
+          {
+            name: "Order",
+            property: "order",
+            type: "integer",
+            defaults: "0",
+            min: 0
+          },
+          {
+            name: "Flex",
+            property: "flex",
+            type: "composite",
+            properties: [
+              {
+                name: "Grow",
+                property: "flex-grow",
+                type: "integer",
+                defaults: "0",
+                min: 0
+              },
+              {
+                name: "Shrink",
+                property: "flex-shrink",
+                type: "integer",
+                defaults: "0",
+                min: 0
+              },
+              {
+                name: "Basis",
+                property: "flex-basis",
+                type: "integer",
+                units: ["px", "%", ""],
+                unit: "",
+                defaults: "auto"
+              }
+            ]
+          },
+          {
+            name: "Align",
+            property: "align-self",
+            type: "radio",
+            defaults: "auto",
+            list: [
+              {
+                value: "auto",
+                name: "Auto",
+                id: ""
+              },
+              {
+                value: "flex-start",
+                title: "Start",
+                className: "icons-flex icon-al-start",
+                id: ""
+              },
+              {
+                value: "flex-end",
+                title: "End",
+                className: "icons-flex icon-al-end",
+                id: ""
+              },
+              {
+                value: "stretch",
+                title: "Stretch",
+                className: "icons-flex icon-al-str",
+                id: ""
+              },
+              {
+                value: "center",
+                title: "Center",
+                className: "icons-flex icon-al-center",
+                id: ""
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+};
+export {
+  baseConfig
+};

package/dist/common/editor-utils.d.ts

@@ -0,0 +1,165 @@
+import type { Component, Editor, ProjectData, TraitProperties } from 'grapesjs';
+import type { AstroComponentProp, ComponentRegistryEntry } from 'studiocms/componentRegistry/types';
+/**
+ * Generates an HTML string representation of the main component within the editor,
+ * including its styles. The styles are adjusted to replace all occurrences of 'body'
+ * with 'div' to ensure proper scoping.
+ *
+ * @param editor - The editor instance from which to extract the main page and component.
+ * @returns A promise that resolves to a string containing the HTML and scoped styles.
+ */
+export declare const generateHTML: (editor: Editor) => Promise<string>;
+/**
+ * Registers a custom storage adapter named 'db' for the provided editor instance.
+ * This adapter enables loading and storing project data to a backend database using fetch requests.
+ *
+ * @param editor - The editor instance to which the storage adapter will be added.
+ * @param opts - Configuration options for the storage adapter.
+ * @param opts.projectId - The unique identifier for the project whose data is being managed.
+ * @param opts.projectData - The initial project data to use as a fallback if loading fails.
+ * @param opts.pageContent - The HTML element where the serialized project data and generated HTML will be stored.
+ *
+ * The storage adapter provides two asynchronous methods:
+ * - `load`: Fetches project data from the backend using the projectId. Returns the fetched data or the fallback projectData if the request fails.
+ * - `store`: Sends the updated project data to the backend and updates the pageContent element with the serialized data and generated HTML.
+ */
+export declare const StudioCMSDbStorageAdapter: (editor: Editor, opts: {
+    projectId: string;
+    projectData: ProjectData;
+    pageContent: HTMLElement;
+    csrfToken: string;
+}) => void;
+/**
+ * Reduces an array of `TraitProperties` into an accumulator object, mapping trait names to their values.
+ *
+ * - If the trait type is `'number'`, the value is coerced to a number.
+ * - If the trait value is an empty string, the default value is used.
+ * - Traits without a name are skipped.
+ *
+ * @param acc - The accumulator object that collects trait name-value pairs.
+ * @param trait - The trait to process and add to the accumulator.
+ * @returns The updated accumulator with the trait's name and resolved value.
+ */
+export declare function traitReducer(acc: Record<string, any>, trait: TraitProperties): Record<string, any>;
+/**
+ * Extracts and aggregates trait properties from a given component model.
+ *
+ * @param model - The component model containing traits to extract.
+ * @returns An object containing the aggregated trait properties.
+ */
+export declare const getTraitData: (model: Component) => Record<string, any>;
+/**
+ * Generates an HTML string representing the slot data for a given component model.
+ *
+ * Iterates through the child components of the provided model, converts each child to HTML,
+ * and wraps it with its respective tag name. The resulting HTML strings are concatenated
+ * and returned as a single string.
+ *
+ * @param model - The component model whose children will be processed.
+ * @returns A string containing the HTML representation of the model's child components,
+ *          or an empty string if there are no children.
+ */
+export declare const getSlotData: (model: Component) => string | undefined;
+/**
+ * Returns the appropriate input type for a given trait type.
+ *
+ * @param type - The trait type to filter (e.g., "number", "string", etc.).
+ * @returns The corresponding input type as a string. Returns "number" if the type is "number", otherwise returns "text".
+ */
+export declare const traitTypeFilter: (type: string) => "number" | "text";
+/**
+ * Maps an `AstroComponentProp` to a new object with filtered type, name, and default value.
+ *
+ * @param prop - The Astro component property to map.
+ * @returns An object containing:
+ *  - `type`: The filtered type of the property.
+ *  - `name`: The name of the property.
+ *  - `default`: The default value of the property.
+ */
+export declare const traitMapFn: (prop: AstroComponentProp) => {
+    type: string;
+    name: string;
+    default: string | undefined;
+};
+/**
+ * Builds a partial request configuration for a given component model.
+ *
+ * @param model - The component model to build the request from.
+ * @returns A `RequestInit` object configured for a POST request with the component's data as JSON.
+ */
+export declare const partialRequestBuilder: (model: Component) => RequestInit;
+/**
+ * Retrieves and parses essential editor elements and data from the DOM.
+ *
+ * @param document - The `Document` object to query for elements.
+ * @param selectors - An object containing CSS selectors for the container and page content elements.
+ * @param selectors.container - CSS selector for the GrapesJS container element.
+ * @param selectors.pageContent - CSS selector for the page content textarea element.
+ * @returns An object containing:
+ *   - `astroComponentsOpts`: Options including the parsed component registry.
+ *   - `inlineStorageOpts`: Options including the page content element and parsed project data.
+ * @throws Will throw an error if the container or page content elements are not found in the DOM.
+ */
+export declare function getEditorElmData(document: Document, selectors: {
+    container: string;
+    pageContent: string;
+}): {
+    astroComponentsOpts: {
+        componentRegistry: ComponentRegistryEntry[];
+    };
+    StudioCMSDbStorageAdapterOpts: {
+        projectId: string;
+        projectData: ProjectData;
+        pageContent: HTMLTextAreaElement;
+        csrfToken: string;
+    };
+};
+/**
+ * Builds and returns the block properties object for a given block name.
+ *
+ * For the special case of 'cms-img', it returns a block configuration with
+ * specific content type and style. For all other names, it returns a generic
+ * block configuration using the provided name as the type and tagName.
+ *
+ * @param name - The name of the block to build properties for.
+ * @returns The block properties object configured for the specified block name.
+ */
+export declare function buildBlockProps(name: string): {
+    id: "cms-img";
+    label: string;
+    content: {
+        style: {
+            color: string;
+        };
+        type: string;
+        tagName?: undefined;
+    };
+    media?: string | undefined;
+    category?: (string | import("grapesjs").BlockCategoryProperties) | undefined;
+    activate?: boolean | undefined;
+    select?: boolean | undefined;
+    resetId?: boolean | undefined;
+    disable?: boolean | undefined;
+    onClick?: ((block: import("grapesjs").Block, editor: Editor) => void) | undefined;
+    attributes?: Record<string, any> | undefined;
+    activeOnRender?: boolean | undefined;
+    dragDef?: import("grapesjs").ComponentDefinition | undefined;
+} | {
+    id: string;
+    label: string;
+    content: {
+        type: string;
+        tagName: string;
+        style?: undefined;
+    };
+    media?: string | undefined;
+    category?: (string | import("grapesjs").BlockCategoryProperties) | undefined;
+    activate?: boolean | undefined;
+    select?: boolean | undefined;
+    resetId?: boolean | undefined;
+    disable?: boolean | undefined;
+    onClick?: ((block: import("grapesjs").Block, editor: Editor) => void) | undefined;
+    attributes?: Record<string, any> | undefined;
+    activeOnRender?: boolean | undefined;
+    dragDef?: import("grapesjs").ComponentDefinition | undefined;
+};