@studiocms/wysiwyg 0.1.0-beta.24

package/dist/styles/editor.css

@@ -0,0 +1,150 @@
+:root {
+  --gjs-color-blue: hsl(259, 55%, 60%);
+}
+.save-indicator {
+  stroke: hsl(var(--text-normal));
+  transition: stroke 150ms ease-in-out;
+}
+.save-indicator.dirty {
+  stroke: hsl(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 hsl(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: hsl(var(--background-step-3));
+}
+.gjs-two-color {
+  color: hsl(var(--text-normal));
+}
+.gjs-three-bg {
+  background-color: hsl(var(--background-base));
+  color: hsl(var(--text-muted));
+}
+.gjs-four-color,
+.gjs-four-color-h:hover {
+  color: hsl(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

@@ -0,0 +1,78 @@
+{
+  "name": "@studiocms/wysiwyg",
+  "version": "0.1.0-beta.24",
+  "description": "Add A WYSIWYG Editor 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/wysiwyg"
+  },
+  "contributors": [
+    "Adammatthiesen",
+    "jdtjenkins",
+    "dreyfus92",
+    "code.spirit"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "astro",
+    "astrocms",
+    "astrodb",
+    "astrostudio",
+    "astro-studio",
+    "astro-studiocms",
+    "cms",
+    "studiocms",
+    "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"
+    },
+    "./consts": {
+      "types": "./dist/consts.d.ts",
+      "default": "./dist/consts.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "default": "./dist/types.js"
+    },
+    "./components/*": "./dist/components/*"
+  },
+  "type": "module",
+  "dependencies": {
+    "astro-integration-kit": "^0.18",
+    "deepmerge-ts": "^7.1.5",
+    "grapesjs": "^0.22.12",
+    "tui-image-editor": "^3.15.3"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0"
+  },
+  "peerDependencies": {
+    "@studiocms/ui": "^0.4.17",
+    "astro": "^5.12.8",
+    "vite": "^6.3.4",
+    "studiocms": "0.1.0-beta.24"
+  },
+  "scripts": {
+    "build": "buildkit build 'src/**/*.{ts,astro,css,js}'",
+    "dev": "buildkit dev 'src/**/*.{ts,astro,css,js}'",
+    "typecheck": "tspc -p tsconfig.tspc.json"
+  }
+}