@studiocms/wysiwyg 0.1.0-experimental.4 → 0.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 StudioCMS - Adam Matthiesen, Jacob Jenkins, Paul Valladares
+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

package/README.md

@@ -1,40 +1,19 @@
-# @StudioCMS/WYSIWYG Plugin
+# @studiocms/wysiwyg
 
-Add A WYSIWYG editor to your StudioCMS dashboard
+[![codecov](https://codecov.io/github/withstudiocms/studiocms/graph/badge.svg?token=RN8LT1O5E2&component=studiocms_wysiwyg)](https://codecov.io/github/withstudiocms/studiocms)
 
-## Standard
+Add a WYSIWYG editor to your StudioCMS dashboard.
 
-Built on top of the `grapesjs` OSS package, to provide a custom WYSIWYG editing experience within StudioCMS
+## Overview
 
-### Usage
-
-Add this plugin in your StudioCMS config. (`studiocms.config.mjs`)
-
-```ts
-import { defineStudioCMSConfig } from 'studiocms/config';
-import wysiwygPlugin from '@studiocms/wysiwyg';
-
-export default defineStudioCMSConfig({
-    // other options here
-    plugins: [wysiwygPlugin()]
-});
-```
-
-## GrapesJS StudioSDK
-
-Get started with the [GrapesJS StudioSDK](https://grapesjs.com)
-
-### Usage
-
-Add this plugin in your StudioCMS config. (`studiocms.config.mjs`)
+Add this plugin to your StudioCMS config (`studiocms.config.mjs` or `.mts`):
 
 ```ts
-import { defineStudioCMSConfig } from 'studiocms/config';
-import wysiwygStudioPlugin from '@studiocms/wysiwyg/studio';
+import wysiwyg from '@studiocms/wysiwyg';
 
 export default defineStudioCMSConfig({
     // other options here
-    plugins: [wysiwygStudioPlugin({ license: 'Your_license_here' })]
+    plugins: [wysiwyg()]
 });
 ```
 

package/dist/common/gjs-blocks.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from 'grapesjs';
+import type { GrapesBlocksOptions } from './grapesBlocks/types.js';
+declare const grapesBlocks: Plugin<Partial<GrapesBlocksOptions>>;
+export default grapesBlocks;

package/dist/common/gjs-blocks.js

@@ -0,0 +1,27 @@
+import { deepmerge } from "deepmerge-ts";
+import loadBlocks from "./grapesBlocks/blocks/index.js";
+import loadCommands from "./grapesBlocks/commands/index.js";
+import loadComponents from "./grapesBlocks/components/index.js";
+import { defaultGrapesBlocksOptions } from "./grapesBlocks/consts.js";
+import loadI18n from "./grapesBlocks/i18n/index.js";
+import loadPanels from "./grapesBlocks/panels/index.js";
+import loadRichTextEditor from "./grapesBlocks/rte/index.js";
+import loadSelectors from "./grapesBlocks/selectors/index.js";
+import loadTraits from "./grapesBlocks/traits/index.js";
+import loadTuiImageEditor from "./grapesBlocks/tuiImageEditor/index.js";
+const grapesBlocks = (editor, opts = {}) => {
+  const options = deepmerge(defaultGrapesBlocksOptions, opts);
+  loadComponents(editor, options);
+  loadBlocks(editor, options);
+  loadCommands(editor, options);
+  loadPanels(editor, options);
+  loadSelectors(editor, options);
+  loadTraits(editor);
+  loadI18n(editor);
+  loadRichTextEditor(editor, options.rteOpts);
+  loadTuiImageEditor(editor);
+};
+var gjs_blocks_default = grapesBlocks;
+export {
+  gjs_blocks_default as default
+};

package/dist/common/gjs-componentRegistry.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentRegistryEntry } from '@withstudiocms/component-registry/types';
+import type { Plugin } from 'grapesjs';
+/**
+ * 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/gjs-componentRegistry.js

@@ -0,0 +1,59 @@
+import { PARTIAL_PATH } from "../consts.js";
+import { buildBlockProps, partialRequestBuilder, traitMapFn } from "./gjs-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/gjs-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/gjs-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
+};