@studiocms/html 0.1.0-beta.22

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present 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,21 @@
+# @studiocms/html Plugin
+
+Add HTML support to StudioCMS
+
+## Usage
+
+Add this plugin in your StudioCMS config. (`studiocms.config.mjs`)
+
+```ts
+import { defineStudioCMSConfig } from 'studiocms/config';
+import htmlPlugin from '@studiocms/html';
+
+export default defineStudioCMSConfig({
+    // other options here
+    plugins: [htmlPlugin()]
+});
+```
+
+## License
+
+[MIT Licensed](./LICENSE).

package/dist/components/editor.astro

@@ -0,0 +1,154 @@
+---
+import 'suneditor/dist/css/suneditor.min.css';
+import 'codemirror/lib/codemirror.css';
+import 'katex/dist/katex.min.css';
+import type { PluginPageTypeEditorProps } from 'studiocms/types';
+
+interface Props extends PluginPageTypeEditorProps {}
+
+const { content } = Astro.props;
+---
+<div class="editor-container">
+    <textarea id="page-content" name="page-content">{content}</textarea>
+</div>
+
+<script>
+    import sunEditor from 'suneditor';
+    import plugins from 'suneditor/src/plugins';
+    import CodeMirror from 'codemirror';
+    import 'codemirror/mode/htmlmixed/htmlmixed'
+    import katex from 'katex';
+
+    const editor = sunEditor.create('page-content', {
+        display: 'block',
+        width: '100%',
+        height: '400',
+        popupDisplay: 'full',
+        charCounter: true,
+        charCounterLabel: 'Characters :',
+        placeholder: 'Start typing something...',
+        codeMirror: CodeMirror,
+        katex: katex,
+        plugins: plugins,
+        buttonList: [
+            // default
+            ['undo', 'redo'],
+            ['font', 'fontSize', 'formatBlock'],
+            ['paragraphStyle', 'blockquote'],
+            ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
+            ['fontColor', 'hiliteColor', 'textStyle'],
+            ['removeFormat'],
+            ['outdent', 'indent'],
+            ['align', 'horizontalRule', 'list', 'lineHeight'],
+            ['table', 'link', 'image', 'video', 'audio', 'math'],
+            // ['imageGallery'],
+            ['fullScreen', 'showBlocks', 'codeView'],
+            ['preview'],
+            // (min-width: 1546)
+            ['%1546', [
+                ['undo', 'redo'],
+                ['font', 'fontSize', 'formatBlock'],
+                ['paragraphStyle', 'blockquote'],
+                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
+                ['fontColor', 'hiliteColor', 'textStyle'],
+                ['removeFormat'],
+                ['outdent', 'indent'],
+                ['align', 'horizontalRule', 'list', 'lineHeight'],
+                ['table', 'link', 'image', 'video', 'audio', 'math'],
+                // ['imageGallery'],
+                ['fullScreen', 'showBlocks', 'codeView'],
+                ['-right', ':i-More Misc-default.more_vertical', 'preview']
+            ]],
+            // (min-width: 1455)
+            ['%1455', [
+                ['undo', 'redo'],
+                ['font', 'fontSize', 'formatBlock'],
+                ['paragraphStyle', 'blockquote'],
+                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
+                ['fontColor', 'hiliteColor', 'textStyle'],
+                ['removeFormat'],
+                ['outdent', 'indent'],
+                ['align', 'horizontalRule', 'list', 'lineHeight'],
+                ['table', 'link', 'image', 'video', 'audio', 'math'],
+                // ['imageGallery'],
+                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview']
+            ]],
+            // (min-width: 1326)
+            ['%1326', [
+                ['undo', 'redo'],
+                ['font', 'fontSize', 'formatBlock'],
+                ['paragraphStyle', 'blockquote'],
+                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
+                ['fontColor', 'hiliteColor', 'textStyle'],
+                ['removeFormat'],
+                ['outdent', 'indent'],
+                ['align', 'horizontalRule', 'list', 'lineHeight'],
+                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview'],
+                ['-right', ':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math']
+            ]],
+            // (min-width: 1123)
+            ['%1123', [
+                ['undo', 'redo'],
+                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
+                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
+                ['fontColor', 'hiliteColor', 'textStyle'],
+                ['removeFormat'],
+                ['outdent', 'indent'],
+                ['align', 'horizontalRule', 'list', 'lineHeight'],
+                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview'],
+                ['-right', ':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math']
+            ]],
+            // (min-width: 817)
+            ['%817', [
+                ['undo', 'redo'],
+                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
+                ['bold', 'underline', 'italic', 'strike'],
+                [':t-More Text-default.more_text', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
+                ['removeFormat'],
+                ['outdent', 'indent'],
+                ['align', 'horizontalRule', 'list', 'lineHeight'],
+                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview'],
+                ['-right', ':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math']
+            ]],
+            // (min-width: 673)
+            ['%673', [
+                ['undo', 'redo'],
+                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
+                [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
+                ['removeFormat'],
+                ['outdent', 'indent'],
+                ['align', 'horizontalRule', 'list', 'lineHeight'],
+                [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math'],
+                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview']
+            ]],
+            // (min-width: 525)
+            ['%525', [
+                ['undo', 'redo'],
+                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
+                [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
+                ['removeFormat'],
+                ['outdent', 'indent'],
+                [':e-More Line-default.more_horizontal', 'align', 'horizontalRule', 'list', 'lineHeight'],
+                [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math'],
+                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview']
+            ]],
+            // (min-width: 420)
+            ['%420', [
+                ['undo', 'redo'],
+                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
+                [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle', 'removeFormat'],
+                [':e-More Line-default.more_horizontal', 'outdent', 'indent', 'align', 'horizontalRule', 'list', 'lineHeight'],
+                [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math'],
+                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview']
+            ]]
+        ],
+    });
+
+    editor.onChange = (contents, core) => { 
+        console.debug("Saving new Update")
+        editor.save() 
+        console.debug("Updating Content to:", contents)
+        core.context.element.originElement.innerHTML = contents;
+        console.debug('Save complete!')
+    }
+</script>

package/dist/components/renderer.astro

@@ -0,0 +1,25 @@
+---
+import { createRenderer } from 'studiocms:component-registry/runtime';
+import type { SSRResult } from 'astro';
+import type { PluginPageTypeRendererProps } from 'studiocms/types';
+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.htmlConfig?.sanitize);
+
+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} />

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * These triple-slash directives defines dependencies to various declaration files that will be
+ * 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.
+ */
+/// <reference types="./virtual.d.ts" preserve="true" />
+import { type StudioCMSPlugin } from 'studiocms/plugins';
+import { type HTMLSchemaOptions } from './types.js';
+/**
+ * Creates the StudioCMS HTML plugin.
+ *
+ * This plugin integrates HTML page type support into StudioCMS, providing editor and renderer components.
+ * It resolves configuration options, sets up Astro integrations, and registers the HTML page type for rendering.
+ *
+ * @param options - Optional configuration for the HTML schema.
+ * @returns The StudioCMS plugin configuration object.
+ */
+export declare function studiocmsHTML(options?: HTMLSchemaOptions): StudioCMSPlugin;
+export default studiocmsHTML;

package/dist/index.js

@@ -0,0 +1,48 @@
+import { createResolver } from "astro-integration-kit";
+import { definePlugin } from "studiocms/plugins";
+import { shared } from "./lib/shared.js";
+import { HTMLSchema } from "./types.js";
+function studiocmsHTML(options) {
+  const { resolve } = createResolver(import.meta.url);
+  const packageIdentifier = "@studiocms/html";
+  const parseResult = HTMLSchema.safeParse(options);
+  if (!parseResult.success) {
+    throw new Error(`Invalid HTML options: ${parseResult.error.message}`);
+  }
+  const resolvedOptions = parseResult.data;
+  return definePlugin({
+    identifier: packageIdentifier,
+    name: "StudioCMS HTML",
+    studiocmsMinimumVersion: "0.1.0-beta.21",
+    hooks: {
+      "studiocms:astro:config": ({ addIntegrations }) => {
+        addIntegrations({
+          name: packageIdentifier,
+          hooks: {
+            "astro:config:done": () => {
+              shared.htmlConfig = resolvedOptions;
+            }
+          }
+        });
+      },
+      "studiocms:config:setup": ({ setRendering }) => {
+        setRendering({
+          pageTypes: [
+            // Define the HTML page type
+            {
+              identifier: "studiocms/html",
+              label: "HTML",
+              pageContentComponent: resolve("./components/editor.astro"),
+              rendererComponent: resolve("./components/renderer.astro")
+            }
+          ]
+        });
+      }
+    }
+  });
+}
+var index_default = studiocmsHTML;
+export {
+  index_default as default,
+  studiocmsHTML
+};

package/dist/lib/shared.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLSchemaOptions } from '../types.js';
+export declare const symbol: symbol;
+/**
+ * A shared object that is either retrieved from the global scope using a symbol or
+ * initialized as a new object with a `htmlConfig` property.
+ *
+ * @remarks
+ * The `@ts-ignore` comments are used to suppress TypeScript errors related to the use of
+ * the global scope and assignment within expressions. The `biome-ignore` comment is used
+ * to suppress linting errors for the same reason.
+ */
+export declare const shared: {
+    htmlConfig?: HTMLSchemaOptions;
+};

package/dist/lib/shared.js

@@ -0,0 +1,13 @@
+const symbol = Symbol.for("@studiocms/html");
+const shared = (
+  // @ts-ignore
+  globalThis[symbol] || // @ts-ignore
+  // biome-ignore lint/suspicious/noAssignInExpressions: This is a valid use case for assignment in expressions.
+  (globalThis[symbol] = {
+    htmlConfig: void 0
+  })
+);
+export {
+  shared,
+  symbol
+};

package/dist/types.d.ts

@@ -0,0 +1,62 @@
+import { z } from 'astro/zod';
+/**
+ * Defines the schema for HTML configuration options.
+ *
+ * The schema includes an optional `sanitize` property, which is validated
+ * using the `StudioCMSSanitizeOptionsSchema`. If no value is provided,
+ * the default is an empty object.
+ */
+export declare const HTMLSchema: z.ZodDefault<z.ZodOptional<z.ZodObject<{
+    /** Sanitization options for HTML content. See {@link StudioCMSSanitizeOptionsSchema} for details. */
+    sanitize: z.ZodOptional<z.ZodObject<{
+        allowElements: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        blockElements: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        dropElements: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        allowAttributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
+        dropAttributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
+        allowComponents: z.ZodOptional<z.ZodBoolean>;
+        allowCustomElements: z.ZodOptional<z.ZodBoolean>;
+        allowComments: z.ZodOptional<z.ZodBoolean>;
+    }, "strip", z.ZodTypeAny, {
+        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;
+    }, {
+        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;
+    }>>;
+}, "strip", z.ZodTypeAny, {
+    sanitize?: {
+        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;
+}, {
+    sanitize?: {
+        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 type HTMLSchemaOptions = z.infer<typeof HTMLSchema>;

package/dist/types.js

@@ -0,0 +1,9 @@
+import { z } from "astro/zod";
+import { StudioCMSSanitizeOptionsSchema } from "studiocms/schemas";
+const HTMLSchema = z.object({
+  /** Sanitization options for HTML content. See {@link StudioCMSSanitizeOptionsSchema} for details. */
+  sanitize: StudioCMSSanitizeOptionsSchema
+}).optional().default({});
+export {
+  HTMLSchema
+};

package/dist/virtual.d.ts

@@ -0,0 +1,3 @@
+declare module 'virtual:studiocms/plugins/renderers' {
+	export const studiocms_html: typeof import('./components/renderer.astro').default;
+}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@studiocms/html",
+  "version": "0.1.0-beta.22",
+  "description": "Add HTML Support to your StudioCMS project with ease!",
+  "author": {
+    "name": "withstudiocms",
+    "url": "https://studiocms.dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/withstudiocms/studiocms.git",
+    "directory": "packages/@studiocms/html"
+  },
+  "contributors": [
+    "Adammatthiesen",
+    "jdtjenkins",
+    "dreyfus92",
+    "code.spirit"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "astro",
+    "astrocms",
+    "astrodb",
+    "astrostudio",
+    "astro-integration",
+    "astro-studio",
+    "astro-studiocms",
+    "cms",
+    "studiocms",
+    "withastro",
+    "plugin",
+    "studiocms-plugin"
+  ],
+  "homepage": "https://studiocms.dev",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "default": "./dist/types.js"
+    },
+    "./v/types": {
+      "types": "./dist/virtual.d.ts",
+      "default": "./dist/virtual.d.js"
+    },
+    "./editor": "./dist/components/editor.astro",
+    "./renderer": "./dist/components/renderer.astro"
+  },
+  "type": "module",
+  "dependencies": {
+    "astro-integration-kit": "^0.18",
+    "codemirror": "5.65.19",
+    "katex": "^0.16.22",
+    "suneditor": "^2.47.6"
+  },
+  "devDependencies": {
+    "@types/codemirror": "5.60.16",
+    "@types/node": "^22.0.0"
+  },
+  "peerDependencies": {
+    "astro": "^5.12.6",
+    "effect": "^3.17.3",
+    "vite": "^6.3.4",
+    "studiocms": "0.1.0-beta.22"
+  },
+  "scripts": {
+    "build": "buildkit build 'src/**/*.{ts,astro,css,json,png}'",
+    "dev": "buildkit dev 'src/**/*.{ts,astro,css,json,png}'",
+    "typecheck": "tspc -p tsconfig.tspc.json"
+  }
+}