@studiocms/wysiwyg 0.1.0-beta.26 → 0.1.0-beta.28

package/README.md

@@ -1,5 +1,7 @@
 # @studiocms/wysiwyg
 
+[![codecov](https://codecov.io/github/withstudiocms/studiocms/graph/badge.svg?token=RN8LT1O5E2&component=studiocms_wysiwyg)](https://codecov.io/github/withstudiocms/studiocms)
+
 Add a WYSIWYG editor to your StudioCMS dashboard.
 
 ## Overview

package/dist/common/grapesBlocks/components/countdown.js

@@ -93,7 +93,6 @@ var countdown_default = (editor, opts) => {
             changeProp: true
           }
         ],
-        // @ts-ignore
         components: `
               <span data-js="countdown" class="${countdownPfx}-cont">
                 <div class="${countdownPfx}-block">

package/dist/common/grapesBlocks/components/tabs/Tabs.js

@@ -28,7 +28,7 @@ var Tabs_default = (editor, config) => {
     const getAllTabs = () => el.querySelectorAll(roleTab);
     const upTabIdx = (item, val) => {
       if (!_isEditor) {
-        item.tabIndex = Number.parseInt(val);
+        item.tabIndex = Number.parseInt(val, 10);
       }
     };
     const activeTab = (tabEl) => {

package/dist/common/grapesBlocks/rte/index.js

@@ -86,10 +86,10 @@ const richTextEditor = (editor, opts = {}) => {
         style: "padding: 0 4px 2px;",
         title: "Font Name"
       },
-      // @ts-ignore
+      // @ts-expect-error
       result: (rte2, action) => rte2.exec("fontName", action.btn?.firstChild?.value),
       // Callback on any input change (mousedown, keydown, etc..)
-      // @ts-ignore
+      // @ts-expect-error
       update: (rte2, action) => {
         const value = rte2.doc.queryCommandValue(action.name);
         if (value !== "false") {
@@ -113,10 +113,10 @@ const richTextEditor = (editor, opts = {}) => {
         style: "padding: 0 4px 2px;",
         title: "Font Size"
       },
-      // @ts-ignore
+      // @ts-expect-error
       result: (rte2, action) => rte2.exec("fontSize", action.btn?.firstChild?.value),
       // Callback on any input change (mousedown, keydown, etc..)
-      // @ts-ignore
+      // @ts-expect-error
       update: (rte2, action) => {
         const value = rte2.doc.queryCommandValue(action.name);
         if (value !== "false") {
@@ -127,7 +127,7 @@ const richTextEditor = (editor, opts = {}) => {
     const pk1 = {};
     options.fonts?.fontColor && rte.add("fontColor", {
       icon: `${icons?.fontColor || '<b style="pointer-events:none;border-bottom:2px solid">A</b>'}
-          <div id="foreColor-picker-${// @ts-ignore
+          <div id="foreColor-picker-${// @ts-expect-error
       editor.Config.container?.replace("#", "")}"
               class="${options.darkColorPicker ? "rte-color-picker dark" : "rte-color-picker light"}">
           </div>`,
@@ -136,7 +136,7 @@ const richTextEditor = (editor, opts = {}) => {
         title: "Font Color"
       },
       result: (rte2) => {
-        const pikerEle = `#foreColor-picker-${// @ts-ignore
+        const pikerEle = `#foreColor-picker-${// @ts-expect-error
         editor.Config.container?.replace("#", "")}`;
         if (!pk1[pikerEle])
           pk1[pikerEle] = new ColorPicker(
@@ -153,7 +153,7 @@ const richTextEditor = (editor, opts = {}) => {
     const pk2 = {};
     options.fonts?.hilite && rte.add("hiliteColor", {
       icon: `${icons?.hiliteColor || '<b style="pointer-events:none;" class="rte-hilite-btn">A</b>'}
-          <div id="hilite-picker-${// @ts-ignore
+          <div id="hilite-picker-${// @ts-expect-error
       editor.Config.container?.replace("#", "")}"
             class="${options.darkColorPicker ? "rte-color-picker dark" : "rte-color-picker light"}">
           </div>`,
@@ -162,7 +162,7 @@ const richTextEditor = (editor, opts = {}) => {
         title: "Font Highlight"
       },
       result: (rte2) => {
-        const pikerEle = `#hilite-picker-${// @ts-ignore
+        const pikerEle = `#hilite-picker-${// @ts-expect-error
         editor.Config.container?.replace("#", "")}`;
         if (!pk2[pikerEle])
           pk2[pikerEle] = new ColorPicker(

package/dist/common/grapesBlocks/tuiImageEditor/index.js

@@ -161,7 +161,7 @@ const plugin = (editor) => {
         am.FileUploader().uploadFile(
           {
             dataTransfer: {
-              // @ts-ignore
+              // @ts-expect-error
               files: [file]
             }
           },

package/dist/components/Editor.astro

@@ -13,7 +13,7 @@ interface Props extends PluginPageTypeEditorProps {}
 // Extract the content from Astro props
 const { content, id = '' } = Astro.props as Props;
 
-const token = Astro.locals.StudioCMS.plugins?.editorCSRFToken;
+const token = Astro.locals?.StudioCMS?.plugins?.editorCSRFToken;
 ---
 
 <div

package/dist/components/render.d.ts

@@ -0,0 +1,15 @@
+declare const renderer: {
+    name: string;
+    renderer: (content: string) => Promise<string>;
+    sanitizeOpts: {
+        allowElements?: string[] | undefined;
+        blockElements?: string[] | undefined;
+        dropElements?: string[] | undefined;
+        allowAttributes?: Record<string, string[]> | undefined;
+        dropAttributes?: Record<string, string[]> | undefined;
+        allowComponents?: boolean | undefined;
+        allowCustomElements?: boolean | undefined;
+        allowComments?: boolean | undefined;
+    } | undefined;
+};
+export default renderer;

package/dist/components/render.js

@@ -0,0 +1,11 @@
+import { preRenderer } from "../lib/prerender.js";
+import { shared } from "../lib/shared.js";
+const renderer = {
+  name: "@studiocms/wysiwyg",
+  renderer: preRenderer,
+  sanitizeOpts: shared?.sanitize
+};
+var render_default = renderer;
+export {
+  render_default as default
+};

package/dist/index.d.ts

@@ -3,8 +3,18 @@
  * loaded when a user imports the StudioCMS plugin in their Astro configuration file. These
  * directives must be first at the top of the file and can only be preceded by this comment.
  */
+import type { AstroIntegration } from 'astro';
 import { type StudioCMSPlugin } from 'studiocms/plugins';
 import { type WYSIWYGSchemaOptions } from './types.js';
+/**
+ * Creates an internal Astro integration for WYSIWYG rendering.
+ * This is used for testing and internal purposes.
+ *
+ * @param {string} packageIdentifier - The package identifier for the integration.
+ * @param {WYSIWYGSchemaOptions} [options] - Optional configuration options for the WYSIWYG plugin.
+ * @returns {AstroIntegration} The configured Astro integration.
+ */
+export declare function internalWysiwygIntegration(packageIdentifier: string, options?: WYSIWYGSchemaOptions): AstroIntegration;
 /**
  * Creates and configures the StudioCMS WYSIWYG Editor plugin.
  *

package/dist/index.js

@@ -3,46 +3,51 @@ import { definePlugin } from "studiocms/plugins";
 import { GRAPES_CSS_PATH, PARTIAL_PATH, STORE_ENDPOINT_PATH } from "./consts.js";
 import { shared } from "./lib/shared.js";
 import { WYSIWYGSchema } from "./types.js";
-function wysiwyg(opts) {
-  const { resolve } = createResolver(import.meta.url);
-  const options = WYSIWYGSchema.parse(opts);
-  const packageIdentifier = "@studiocms/wysiwyg";
+function internalWysiwygIntegration(packageIdentifier, options) {
+  const resolvedOptions = WYSIWYGSchema.parse(options);
+  const resEntrypoint = (path) => `@studiocms/wysiwyg/routes/${path}`;
   const routes = [
     {
-      entrypoint: resolve("./routes/partial.astro"),
+      entrypoint: resEntrypoint("partial.astro"),
       pattern: PARTIAL_PATH,
       prerender: false
     },
     {
-      entrypoint: resolve("./routes/grapes.css.js"),
+      entrypoint: resEntrypoint("grapes.css.js"),
       pattern: GRAPES_CSS_PATH,
       prerender: false
     },
     {
-      entrypoint: resolve("./routes/store.js"),
+      entrypoint: resEntrypoint("store.js"),
       pattern: STORE_ENDPOINT_PATH,
       prerender: false
     }
   ];
+  return {
+    name: packageIdentifier,
+    hooks: {
+      "astro:config:setup": ({ injectRoute }) => {
+        for (const route of routes) {
+          injectRoute(route);
+        }
+      },
+      "astro:config:done": () => {
+        shared.sanitize = resolvedOptions?.sanitize;
+      }
+    }
+  };
+}
+function wysiwyg(opts) {
+  const { resolve } = createResolver(import.meta.url);
+  const options = WYSIWYGSchema.parse(opts);
+  const packageIdentifier = "@studiocms/wysiwyg";
   return definePlugin({
     identifier: packageIdentifier,
     name: "StudioCMS WYSIWYG Editor",
     studiocmsMinimumVersion: "0.1.0-beta.23",
     hooks: {
       "studiocms:astro:config": ({ addIntegrations }) => {
-        addIntegrations({
-          name: packageIdentifier,
-          hooks: {
-            "astro:config:setup": ({ injectRoute }) => {
-              for (const route of routes) {
-                injectRoute(route);
-              }
-            },
-            "astro:config:done": () => {
-              shared.sanitize = options?.sanitize;
-            }
-          }
-        });
+        addIntegrations(internalWysiwygIntegration(packageIdentifier, options));
       },
       "studiocms:config:setup": ({ setRendering }) => {
         setRendering({
@@ -50,7 +55,7 @@ function wysiwyg(opts) {
             {
               identifier: "studiocms/wysiwyg",
               label: "WYSIWYG",
-              rendererComponent: resolve("./components/Render.astro"),
+              rendererComponent: resolve("./components/render.js"),
               pageContentComponent: resolve("./components/Editor.astro")
             }
           ]
@@ -61,5 +66,6 @@ function wysiwyg(opts) {
 }
 var index_default = wysiwyg;
 export {
-  index_default as default
+  index_default as default,
+  internalWysiwygIntegration
 };

package/dist/lib/db.d.ts

@@ -35,7 +35,7 @@ export declare const UseSDK: Effect.Effect<{
         symbols: unknown[];
         pages: unknown[];
         __STUDIOCMS_HTML?: string | undefined;
-    }>[], Error | import("studiocms/sdk/effect/db").LibSQLDatabaseError, never>;
+    }>[], Error | import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
     /**
      * Retrieves a specific entry of the plugin data by its ID.
      *
@@ -49,7 +49,7 @@ export declare const UseSDK: Effect.Effect<{
         symbols: unknown[];
         pages: unknown[];
         __STUDIOCMS_HTML?: string | undefined;
-    }> | undefined, Error | import("studiocms/sdk/effect/db").LibSQLDatabaseError, never>;
+    }> | undefined, Error | import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
     /**
      * Inserts or updates a plugin data entry with the specified ID and data.
      *
@@ -71,7 +71,7 @@ export declare const UseSDK: Effect.Effect<{
         symbols: unknown[];
         pages: unknown[];
         __STUDIOCMS_HTML?: string | undefined;
-    }>, Error | import("studiocms/sdk/effect/db").LibSQLDatabaseError, never>;
+    }>, Error | import("@withstudiocms/effect/drizzle").LibSQLClientError, never>;
     /**
      * Returns the inferred type for the plugin data schema.
      */

package/dist/lib/shared.js

@@ -1,5 +1,4 @@
-const shared = globalThis.studiocmsWYSIWYG || // biome-ignore lint/suspicious/noAssignInExpressions: This is a valid use case.
-(globalThis.studiocmsWYSIWYG = {
+const shared = globalThis.studiocmsWYSIWYG || (globalThis.studiocmsWYSIWYG = {
   sanitize: void 0
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/wysiwyg",
-  "version": "0.1.0-beta.26",
+  "version": "0.1.0-beta.28",
   "description": "Add A WYSIWYG Editor to your StudioCMS project with ease!",
   "author": {
     "name": "withstudiocms",
@@ -52,28 +52,30 @@
       "types": "./dist/types.d.ts",
       "default": "./dist/types.js"
     },
-    "./components/*": "./dist/components/*"
+    "./components/*": "./dist/components/*",
+    "./routes/*": "./dist/routes/*"
   },
   "type": "module",
   "dependencies": {
-    "astro-integration-kit": "^0.19.0",
+    "astro-integration-kit": "^0.19.1",
     "deepmerge-ts": "^7.1.5",
-    "grapesjs": "^0.22.12",
+    "grapesjs": "^0.22.13",
     "tui-image-editor": "^3.15.3"
   },
   "devDependencies": {
     "@types/node": "^22.0.0"
   },
   "peerDependencies": {
-    "@studiocms/ui": "^1.0.0-beta.0",
+    "@studiocms/ui": "^1.0.0-beta.3",
     "astro": "^5.12.9",
     "vite": "^6.3.4",
-    "@withstudiocms/component-registry": "0.1.0-beta.2",
-    "studiocms": "0.1.0-beta.26"
+    "@withstudiocms/component-registry": "0.1.0-beta.4",
+    "studiocms": "0.1.0-beta.28"
   },
   "scripts": {
     "build": "buildkit build 'src/**/*.{ts,astro,css,js}'",
     "dev": "buildkit dev 'src/**/*.{ts,astro,css,js}'",
+    "test": "vitest",
     "typecheck": "tspc -p tsconfig.tspc.json"
   }
 }

package/dist/components/Render.astro

@@ -1,24 +0,0 @@
----
-import { createRenderer } from 'studiocms:component-registry/runtime';
-import type { PluginPageTypeRendererProps } from 'studiocms/types';
-import { preRenderer } from '../lib/prerender.js';
-import { shared } from '../lib/shared.js';
-
-// @ts-expect-error - $$result is a global variable injected by Astro during compilation and not a editor-known variable
-const ssrResult: SSRResult = $$result;
-
-// Define render function
-const render = await createRenderer(ssrResult, shared?.sanitize, preRenderer);
-
-interface Props extends PluginPageTypeRendererProps {}
-
-// Get default content
-const { defaultContent } = Astro.props.data;
-
-// Get content to render
-const contentToRender = defaultContent?.content || '<h1>Error: No content found</h1>';
-
-// Render content
-const renderedContent = await render(contentToRender);
----
-<Fragment set:html={renderedContent} />