@studiocms/wysiwyg 0.1.0-experimental.5 → 0.1.0

package/dist/routes/store.js

@@ -0,0 +1,121 @@
+import { apiResponseLogger } from "studiocms:logger";
+import {
+  AllResponse,
+  Cause,
+  createEffectAPIRoutes,
+  createJsonResponse,
+  Effect,
+  genLogger,
+  OptionsResponse,
+  ParseResult,
+  Schema
+} from "studiocms/effect";
+import { CSRF_COOKIE_NAME, CSRF_HEADER_NAME } from "../consts.js";
+import { UseSDK } from "../lib/db.js";
+const POSTJsonSchema = (schema) => Schema.Struct({
+  projectId: Schema.String,
+  data: Schema.mutable(schema)
+});
+const parsePOSTJsonRequest = (context, schema) => Effect.tryPromise(() => context.request.json()).pipe(
+  Effect.flatMap((data) => Schema.decodeUnknown(POSTJsonSchema(schema))(data)),
+  Effect.mapError((error) => {
+    console.error("Error parsing POST JSON request:", error);
+    if (error instanceof ParseResult.ParseError) {
+      return new Error(`Invalid request data: ${error.message}`);
+    }
+    if (error instanceof Cause.UnknownException) {
+      return new Error(`Unknown error occurred: ${error.message}`);
+    }
+    return new Error("Failed to parse request data: Unknown error");
+  })
+);
+const handleCSRF = ({ request, cookies }) => Effect.try(() => {
+  const submittedToken = request.headers.get(CSRF_HEADER_NAME);
+  const storedToken = cookies.get(CSRF_COOKIE_NAME)?.value;
+  if (!submittedToken || !storedToken || submittedToken !== storedToken) {
+    console.warn("CSRF token validation failed");
+    return apiResponseLogger(403, "CSRF token validation failed");
+  }
+});
+const handleUserSessionVerification = ({ locals }) => Effect.try(() => {
+  const userData = locals.StudioCMS.security?.userSessionData.isLoggedIn;
+  if (!userData) {
+    console.warn("User is not logged in, returning 403 Unauthorized");
+    return apiResponseLogger(403, "Unauthorized");
+  }
+  const isAuthorized = locals.StudioCMS.security?.userPermissionLevel.isEditor;
+  if (!isAuthorized) {
+    console.warn("User does not have editor permissions, returning 403 Unauthorized");
+    return apiResponseLogger(403, "Unauthorized");
+  }
+});
+const apiChecks = Effect.fn(function* (context) {
+  const userCheck = yield* handleUserSessionVerification(context);
+  if (userCheck instanceof Response) {
+    return userCheck;
+  }
+  const csrfCheck = yield* handleCSRF(context);
+  if (csrfCheck instanceof Response) {
+    return csrfCheck;
+  }
+  return void 0;
+});
+const { GET, POST, OPTIONS, ALL } = createEffectAPIRoutes(
+  {
+    GET: (ctx) => genLogger("@studiocms/wysiwyg/routes/store:GET")(function* () {
+      const { load } = yield* UseSDK;
+      const securityCheck = yield* apiChecks(ctx);
+      if (securityCheck instanceof Response) {
+        return securityCheck;
+      }
+      const searchParams = ctx.url.searchParams;
+      const projectId = searchParams.get("projectId");
+      if (!projectId) {
+        return apiResponseLogger(400, "Project ID is required");
+      }
+      const projectData = yield* load(projectId);
+      if (!projectData) {
+        return apiResponseLogger(404, "Project not found");
+      }
+      return new Response(JSON.stringify(projectData), {
+        headers: {
+          "Content-Type": "application/json",
+          "Cache-Control": "no-store, private"
+        }
+      });
+    }),
+    POST: (ctx) => genLogger("@studiocms/wysiwyg/routes/store:POST")(function* () {
+      const { store, types } = yield* UseSDK;
+      const securityCheck = yield* apiChecks(ctx);
+      if (securityCheck instanceof Response) {
+        return securityCheck;
+      }
+      const { projectId, data } = yield* parsePOSTJsonRequest(ctx, types._Schema);
+      const result = yield* store(projectId, data);
+      if (!result) {
+        return apiResponseLogger(500, "Failed to store project data");
+      }
+      return apiResponseLogger(200, "Project data stored successfully");
+    }),
+    OPTIONS: () => Effect.try(() => OptionsResponse({ allowedMethods: ["GET", "POST"] })),
+    ALL: () => Effect.try(() => AllResponse())
+  },
+  {
+    cors: { methods: ["GET", "POST", "OPTIONS"] },
+    onError: (error) => {
+      console.error("API Error:", error);
+      return createJsonResponse(
+        { error: "Internal Server Error" },
+        {
+          status: 500
+        }
+      );
+    }
+  }
+);
+export {
+  ALL,
+  GET,
+  OPTIONS,
+  POST
+};

package/dist/schema.d.ts

@@ -0,0 +1,60 @@
+import { Schema } from 'studiocms/effect';
+/**
+ * Schema definition for an array containing elements of any type.
+ *
+ * This schema allows for arrays that can contain any type of elements,
+ */
+export declare const AnyArray: Schema.mutable<Schema.Array$<typeof Schema.Unknown>>;
+/**
+ * Schema definition for a mutable string.
+ *
+ * This schema allows for strings that can be modified after creation.
+ */
+export declare const MString: Schema.mutable<typeof Schema.String>;
+/**
+ * Creates a mutable schema for a struct with the specified fields.
+ *
+ * @template F - The fields of the struct.
+ * @returns A mutable schema for the struct with the given fields.
+ */
+export declare const MStruct: <F extends Schema.Struct.Fields>(fields: F) => Schema.mutable<Schema.Struct<F>>;
+/**
+ * Creates a mutable array schema for elements of type `V`.
+ * @template V - The type of elements in the array.
+ * @returns A mutable schema for an array containing elements of type `V`.
+ */
+export declare const MArray: <V extends Schema.Schema.Any>(val: V) => Schema.mutable<Schema.Array$<V>>;
+/**
+ * Creates a mutable record schema with specified key and value types.
+ *
+ * @template K - The type of the keys in the record.
+ * @template V - The type of the values in the record.
+ * @param opts - An object containing the key and value types.
+ * @returns A mutable schema for a record with specified key and value types.
+ */
+export declare const MRecord: <K extends Schema.Schema.All, V extends Schema.Schema.All>(opts: {
+    readonly key: K;
+    readonly value: V;
+}) => Schema.mutable<Schema.Record$<K, V>>;
+/**
+ * Creates a mutable array schema for a struct with specified fields.
+ *
+ * @template F - The fields of the struct.
+ * @returns A mutable schema for an array containing structs with the specified fields.
+ */
+export declare const MArrayStruct: <F extends Schema.Struct.Fields>(fields: F) => Schema.mutable<Schema.Array$<Schema.mutable<Schema.Struct<F>>>>;
+/**
+ * Schema definition for StudioCMS project data.
+ *
+ * This schema describes the structure of the project data used in StudioCMS,
+ * including optional HTML content, data sources, assets, styles, symbols, and pages.
+ *
+ */
+export declare const studioCMSProjectDataSchema: Schema.Struct<{
+    dataSources: Schema.mutable<Schema.Array$<typeof Schema.Unknown>>;
+    assets: Schema.mutable<Schema.Array$<typeof Schema.Unknown>>;
+    styles: Schema.mutable<Schema.Array$<typeof Schema.Unknown>>;
+    symbols: Schema.mutable<Schema.Array$<typeof Schema.Unknown>>;
+    pages: Schema.mutable<Schema.Array$<typeof Schema.Unknown>>;
+    __STUDIOCMS_HTML: Schema.optional<Schema.mutable<typeof Schema.String>>;
+}>;

package/dist/schema.js

@@ -0,0 +1,24 @@
+import { Schema } from "studiocms/effect";
+const AnyArray = Schema.mutable(Schema.Array(Schema.Unknown));
+const MString = Schema.mutable(Schema.String);
+const MStruct = (fields) => Schema.mutable(Schema.Struct(fields));
+const MArray = (val) => Schema.mutable(Schema.Array(val));
+const MRecord = (opts) => Schema.mutable(Schema.Record(opts));
+const MArrayStruct = (fields) => MArray(MStruct(fields));
+const studioCMSProjectDataSchema = Schema.Struct({
+  dataSources: AnyArray,
+  assets: AnyArray,
+  styles: AnyArray,
+  symbols: AnyArray,
+  pages: AnyArray,
+  __STUDIOCMS_HTML: Schema.optional(MString)
+});
+export {
+  AnyArray,
+  MArray,
+  MArrayStruct,
+  MRecord,
+  MString,
+  MStruct,
+  studioCMSProjectDataSchema
+};

package/dist/styles/editor.css

@@ -0,0 +1,150 @@
+:root {
+  --gjs-color-blue: hsl(259, 55%, 60%);
+}
+.save-indicator {
+  stroke: var(--text-normal);
+  transition: stroke 150ms ease-in-out;
+}
+.save-indicator.dirty {
+  stroke: var(--warning-base);
+}
+.save-indicator .dirty-indicator {
+  display: none;
+  transition: all 150ms ease-in-out;
+}
+.save-indicator.dirty .dirty-indicator {
+  display: block !important;
+}
+.scms-grapesjs-container {
+  width: 100%;
+  height: 100%;
+  min-height: 80vh;
+  overflow: hidden;
+  border: 2px solid var(--border);
+  border-radius: var(--radius-md);
+  font-family:
+    Inter,
+    system-ui,
+    Avenir,
+    Helvetica,
+    Arial,
+    sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.scms-grapesjs-container .editor {
+  width: 100%;
+  height: 100%;
+}
+.scms-grapesjs-container .editor #gjs {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.gjs-one-bg {
+  background-color: var(--background-step-3);
+}
+.gjs-two-color {
+  color: var(--text-normal);
+}
+.gjs-three-bg {
+  background-color: var(--background-base);
+  color: var(--text-muted);
+}
+.gjs-four-color,
+.gjs-four-color-h:hover {
+  color: var(--primary-base);
+}
+[data-tooltip]::after {
+  background: rgba(51, 51, 51, 0.9);
+}
+.gjs-pn-commands {
+  min-height: 40px;
+}
+#gjs-sm-float {
+  display: none;
+}
+.gjs-logo-version {
+  background-color: #756467;
+}
+.gjs-pn-btn.gjs-pn-active {
+  box-shadow: none;
+}
+.CodeMirror {
+  min-height: 450px;
+  margin-bottom: 8px;
+}
+.grp-handler-close {
+  background-color: transparent;
+  color: #ddd;
+}
+.grp-handler-cp-wrap {
+  border-color: transparent;
+}
+.gjs-rte-toolbar {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.44);
+  border-radius: 3px;
+}
+.gjs-rte-action {
+  font-size: 1rem;
+  border-right: none;
+  padding: 10px;
+  min-width: 35px;
+}
+.gjs-rte-actionbar {
+  max-width: 600px;
+  flex-wrap: wrap;
+}
+.rte-hilite-btn {
+  padding: 3px 6px;
+  border-radius: 3px;
+  background: rgba(210, 120, 201, 0.3);
+}
+.rte-color-picker {
+  display: none;
+  padding: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.34);
+  border-radius: 5px;
+  position: absolute;
+  top: 55px;
+  width: 250px;
+  transition: all 2s ease;
+}
+.rte-color-picker:before {
+  content: "";
+  position: absolute;
+  top: -20px;
+  left: 46%;
+  border-width: 10px;
+  border-style: solid;
+}
+.rte-color-picker.dark {
+  background: rgba(0, 0, 0, 0.8);
+}
+.rte-color-picker.dark:before {
+  border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent;
+}
+.rte-color-picker.light {
+  background: rgba(255, 255, 255, 0.75);
+}
+.rte-color-picker.light:before {
+  border-color: transparent transparent rgba(255, 255, 255, 0.75) transparent;
+}
+.rte-color-picker > div {
+  width: 30px;
+  display: inline-block;
+  height: 30px;
+  margin: 5px;
+  border-radius: 100%;
+  opacity: 0.7;
+}
+.rte-color-picker > div:hover {
+  opacity: 1;
+}
+.picker-wrapper {
+  padding: 20px;
+}

package/dist/styles/grapes.css

@@ -0,0 +1,71 @@
+:root {
+  --gjs-color-blue: hsl(259 73% 67%);
+  body {
+    background-color: hsl(0, 0%, 97%);
+  }
+  * ::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+  }
+  * ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+  }
+  * ::-webkit-scrollbar {
+    width: 10px;
+  }
+  [data-gjs-type=wrapper] {
+    min-height: 100vh;
+    padding-top: 0.001em;
+  }
+  .gjs-dashed *[data-gjs-highlightable] {
+    outline: 1px dashed rgba(170, 170, 170, 0.7);
+    outline-offset: -2px;
+  }
+  .gjs-selected {
+    outline: 2px solid hsl(259 73% 67%) !important;
+    outline-offset: -2px;
+  }
+  .gjs-selected-parent {
+    outline: 2px solid hsl(48 100% 61%) !important;
+  }
+  .gjs-no-select {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+  .gjs-freezed {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .gjs-no-pointer {
+    pointer-events: none;
+  }
+  .gjs-pointer-init {
+    pointer-events: initial;
+  }
+  .gjs-plh-image {
+    background: #f5f5f5;
+    border: none;
+    height: 100px;
+    width: 100px;
+    display: block;
+    outline: 3px solid hsl(48 100% 61%);
+    cursor: pointer;
+    outline-offset: -2px;
+  }
+  .gjs-grabbing {
+    cursor: grabbing;
+  }
+  .gjs-is__grabbing {
+    overflow-x: hidden;
+  }
+  .gjs-is__grabbing,
+  .gjs-is__grabbing * {
+    cursor: grabbing !important;
+  }
+  * {
+    box-sizing: border-box;
+  }
+  body {
+    margin: 0;
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,66 @@
+import { z } from 'astro/zod';
+import type { Schema } from 'studiocms/effect';
+import type { studioCMSProjectDataSchema } from './schema.js';
+export interface WysiwygDBContent extends Schema.SimplifyMutable<typeof studioCMSProjectDataSchema.Type> {
+}
+/**
+ * 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 WYSIWYGSchema: z.ZodDefault<z.ZodOptional<z.ZodObject<{
+    /** Sanitization options for WYSIWYG 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 WYSIWYGSchemaOptions = z.infer<typeof WYSIWYGSchema>;

package/dist/types.js

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

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@studiocms/wysiwyg",
-  "version": "0.1.0-experimental.5",
+  "version": "0.1.0",
   "description": "Add A WYSIWYG Editor to your StudioCMS project with ease!",
   "author": {
-    "name": "Adam Matthiesen | Jacob Jenkins | Paul Valladares",
+    "name": "withstudiocms",
     "url": "https://studiocms.dev"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/withstudiocms/experiments.git",
-    "directory": "packages/studiocms_wysiwyg"
+    "url": "git+https://github.com/withstudiocms/studiocms.git",
+    "directory": "packages/@studiocms/wysiwyg"
   },
   "contributors": [
     "Adammatthiesen",
@@ -23,12 +23,10 @@
     "astrocms",
     "astrodb",
     "astrostudio",
-    "astro-integration",
     "astro-studio",
     "astro-studiocms",
     "cms",
     "studiocms",
-    "withastro",
     "plugin",
     "studiocms-plugin"
   ],
@@ -43,39 +41,43 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/wysiwyg/index.d.ts",
-      "default": "./dist/wysiwyg/index.js"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
-    "./components/*": "./dist/wysiwyg/components/*",
-    "./v/types": "./dist/wysiwyg/virtual.d.ts",
-    "./studio": {
-      "types": "./dist/studio/index.d.ts",
-      "default": "./dist/studio/index.js"
+    "./consts": {
+      "types": "./dist/consts.d.ts",
+      "default": "./dist/consts.js"
     },
-    "./studio/components/*": "./dist/studio/components/*",
-    "./studio/v/types": "./dist/studio/virtual.d.ts"
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "default": "./dist/types.js"
+    },
+    "./components/*": "./dist/components/*",
+    "./routes/*": "./dist/routes/*"
   },
   "type": "module",
   "dependencies": {
-    "@grapesjs/studio-sdk": "^1.0.35",
-    "@grapesjs/studio-sdk-plugins": "^1.0.16",
-    "@studiocms/ui": "^0.4.16",
-    "astro-integration-kit": "^0.18",
-    "grapesjs": "^0.22.6",
-    "ultrahtml": "^1.5.3",
-    "tui-image-editor": "^3.15.3",
-    "@studiocms/grapesjs-plugin": "0.1.0"
+    "astro-integration-kit": "^0.19.1",
+    "deepmerge-ts": "^7.1.5",
+    "grapesjs": "^0.22.14",
+    "tui-image-editor": "^3.15.3"
   },
   "devDependencies": {
     "@types/node": "^22.0.0"
   },
   "peerDependencies": {
-    "astro": "^5.7.1",
-    "studiocms": ">=0.1.0-beta.18",
-    "vite": "^6.2.5"
+    "@studiocms/ui": "^1.0.0",
+    "astro": "^5.12.9",
+    "vite": "^6.3.4",
+    "@withstudiocms/component-registry": "0.1.0",
+    "studiocms": "0.1.0"
   },
   "scripts": {
-    "build": "build-scripts build 'src/**/*.{ts,astro,css,js}'",
-    "dev": "build-scripts dev 'src/**/*.{ts,astro,css,js}'"
+    "build": "buildkit build 'src/**/*.{ts,astro,css,js}'",
+    "dev": "buildkit dev 'src/**/*.{ts,astro,css,js}'",
+    "test": "vitest",
+    "effect-check": "pnpm effect-language-service diagnostics --project tsconfig.tspc.json",
+    "ci:effect-check": "pnpm effect-check --format github-actions",
+    "typecheck": "tspc -p tsconfig.tspc.json"
   }
 }

package/dist/common/prepareRender.d.ts

@@ -1,11 +0,0 @@
-import type { SSRResult } from 'astro';
-import type { PluginPageTypeRendererProps } from 'studiocms/types';
-import type { SanitizeOptions } from 'ultrahtml/transformers/sanitize';
-/**
- * Prepares HTML content for rendering in the WYSIWYG editor.
- * @param result - The Astro SSR result object
- * @param data - The page data containing content to render
- * @param sanitize - Optional sanitization options for HTML content
- * @returns Transformed HTML ready for rendering
- */
-export declare function prepareRender(result: SSRResult, data: PluginPageTypeRendererProps['data'], sanitize?: SanitizeOptions | undefined): Promise<string>;

package/dist/common/prepareRender.js

@@ -1,24 +0,0 @@
-import { importComponentsKeys } from "studiocms/lib/renderer/runtime.js";
-import { createComponentProxy, transformHTML } from "studiocms/runtime";
-import { parse } from "../utils.js";
-async function prepareRender(result, data, sanitize) {
-  const _components = await importComponentsKeys();
-  const components = createComponentProxy(result, _components);
-  let contentToRender = "<h1>Error: No content found</h1>";
-  try {
-    if (data.defaultContent?.content) {
-      const parsed = parse(data.defaultContent.content);
-      if (parsed?.__STUDIOCMS_HTML) {
-        contentToRender = parsed.__STUDIOCMS_HTML;
-      } else {
-        contentToRender = "<h1>Error: Content found but invalid format</h1>";
-      }
-    }
-  } catch (error) {
-    contentToRender = `<h1>Error parsing content: ${error instanceof Error ? error.message : "Unknown error"}</h1>`;
-  }
-  return transformHTML(contentToRender, components, sanitize);
-}
-export {
-  prepareRender
-};

package/dist/studio/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} />