stilo-editor 0.2.0 → 0.3.0

package/dist/vue/index.d.ts

@@ -0,0 +1,5 @@
+/** Public API of the Stilo Vue wrapper. */
+/** The editor with the default UI. */
+export { StiloEditor, type StiloEditorEmits, type StiloEditorProps } from './stilo-editor';
+/** The editor alone, for a custom UI. */
+export { type UseStiloEditorOptions, type UseStiloEditorResult, useStiloEditor, } from './use-stilo-editor';

package/dist/vue/stilo-editor.d.ts

@@ -0,0 +1,52 @@
+import { type Editor, type EditorEvents, type EditorOptions, type EventHandler } from '../index';
+import { type Messages, type ToolbarOptions } from '../ui/index';
+/**
+ * Events of {@link StiloEditor}: `ready` with the editor once it is created, and the editor
+ * events with the same payload, `selectionchange` under the name `selectionChange`.
+ */
+export type StiloEditorEmits = {
+    ready: (editor: Editor) => void;
+    input: EventHandler<EditorEvents['input']>;
+    selectionChange: EventHandler<EditorEvents['selectionchange']>;
+    transaction: EventHandler<EditorEvents['transaction']>;
+    focus: EventHandler<EditorEvents['focus']>;
+    blur: EventHandler<EditorEvents['blur']>;
+};
+/** Props of {@link StiloEditor}. */
+export interface StiloEditorProps extends Omit<EditorOptions, 'element' | 'extensions'> {
+    /** Extensions to load. Default: `[defaultExtensions()]`. */
+    extensions?: EditorOptions['extensions'];
+    /** The default toolbar: `true` (default), `false`, or its options without `container`. */
+    toolbar?: boolean | Omit<ToolbarOptions, 'container' | 'messages'>;
+    /** The status bar with the word and character count, under the editor. Default: `false`. */
+    statusBar?: boolean;
+    /** Strings of the toolbar and the status bar. Default: `en`. */
+    messages?: Messages;
+}
+/**
+ * The editor with the default UI. The props are read once, when the editor is created, except
+ * `editable`, which follows its changes.
+ */
+export declare const StiloEditor: import("vue").DefineSetupFnComponent<StiloEditorProps, StiloEditorEmits, {}, StiloEditorProps & {
+    onBlur?: ((payload: {
+        editor: Editor;
+        event: FocusEvent;
+    }) => any) | undefined;
+    onFocus?: ((payload: {
+        editor: Editor;
+        event: FocusEvent;
+    }) => any) | undefined;
+    onInput?: ((payload: {
+        editor: Editor;
+        transaction: import("prosemirror-state").Transaction | null;
+    }) => any) | undefined;
+    onReady?: ((editor: Editor) => any) | undefined;
+    onSelectionChange?: ((payload: {
+        editor: Editor;
+        transaction: import("prosemirror-state").Transaction;
+    }) => any) | undefined;
+    onTransaction?: ((payload: {
+        editor: Editor;
+        transaction: import("prosemirror-state").Transaction;
+    }) => any) | undefined;
+}, import("vue").PublicProps>;

package/dist/vue/use-stilo-editor.d.ts

@@ -0,0 +1,19 @@
+import { type MaybeRefOrGetter, type ShallowRef } from 'vue';
+import { Editor, type EditorOptions } from '../index';
+/** Options of {@link useStiloEditor}: the editor options without `element`. */
+export interface UseStiloEditorOptions extends Omit<EditorOptions, 'element' | 'editable'> {
+    /** Whether the content is editable; a ref or a getter is followed. Default: `true`. */
+    editable?: MaybeRefOrGetter<boolean | undefined>;
+}
+/** What {@link useStiloEditor} returns. */
+export interface UseStiloEditorResult {
+    /** Template ref of the element that holds the editor: `<div ref="element">`. */
+    element: ShallowRef<HTMLElement | null>;
+    /** The editor; `null` before the element is mounted, on the server and after unmount. */
+    editor: ShallowRef<Editor | null>;
+}
+/**
+ * Creates an editor inside the element bound to `element` and destroys it when the element goes.
+ * The options are read once, when the editor is created; only `editable` follows its changes.
+ */
+export declare function useStiloEditor(options: UseStiloEditorOptions): UseStiloEditorResult;

package/dist/vue.js

@@ -0,0 +1,101 @@
+import { Q as e, t } from "./src-DxTXpULc.js";
+import { h as n, t as r } from "./ui-WFNvrkbM.js";
+import { defineComponent as i, h as a, shallowRef as o, toValue as s, watch as c } from "vue";
+//#region src/vue/use-stilo-editor.ts
+function l(t) {
+	let n = o(null), r = o(null), i = () => s(t.editable) ?? !0;
+	return c(n, (n, a, o) => {
+		if (!n) return;
+		let s = new e({
+			...t,
+			editable: i(),
+			element: n
+		});
+		r.value = s, o(() => {
+			s.destroy(), r.value = null;
+		});
+	}, { flush: "post" }), c(i, (e) => {
+		r.value && r.value.isEditable !== e && r.value.setEditable(e);
+	}), {
+		element: n,
+		editor: r
+	};
+}
+var u = /* @__PURE__ */ i((e, { emit: i }) => {
+	let { extensions: s = [t()], toolbar: u, statusBar: f, messages: p, ...m } = e, { element: h, editor: g } = l({
+		...m,
+		extensions: s,
+		editable: () => e.editable
+	}), _ = o(null), v = o(null), y = {
+		input: (e) => i("input", e),
+		selectionchange: (e) => i("selectionChange", e),
+		transaction: (e) => i("transaction", e),
+		focus: (e) => i("focus", e),
+		blur: (e) => i("blur", e)
+	};
+	return c(g, (e, t, a) => {
+		if (!e) return;
+		let o, s;
+		u && _.value && (o = r(e, {
+			...u === !0 ? {} : u,
+			container: _.value,
+			messages: p
+		})), f && v.value && (s = n(e, {
+			container: v.value,
+			messages: p
+		}));
+		let c = Object.keys(y).map((t) => d(e, t, y));
+		i("ready", e), a(() => {
+			if (!e.isDestroyed) {
+				o?.destroy(), s?.destroy();
+				for (let e of c) e();
+			}
+		});
+	}), () => a("div", null, [
+		u ? a("div", { ref: _ }) : null,
+		a("div", { ref: h }),
+		f ? a("div", { ref: v }) : null
+	]);
+}, {
+	name: "StiloEditor",
+	props: {
+		extensions: null,
+		content: null,
+		editable: {
+			type: Boolean,
+			default: void 0
+		},
+		autofocus: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		ariaLabel: null,
+		compactParagraphs: {
+			type: Boolean,
+			default: void 0
+		},
+		toolbar: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		statusBar: {
+			type: Boolean,
+			default: !1
+		},
+		messages: null
+	},
+	emits: [
+		"ready",
+		"input",
+		"selectionChange",
+		"transaction",
+		"focus",
+		"blur"
+	]
+});
+function d(e, t, n) {
+	let r = n[t];
+	return e.on(t, r), () => e.off(t, r);
+}
+//#endregion
+export { u as StiloEditor, l as useStiloEditor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stilo-editor",
-  "version": "0.2.0",
-  "description": "Open-source HTML5 WYSIWYG rich text editor built on ProseMirror: clean HTML, headless core, fast on very large documents.",
+  "version": "0.3.0",
+  "description": "A complete rich text editor. Everything included, ready in minutes. Open-source WYSIWYG HTML editor built on ProseMirror: clean HTML in and out, headless core.",
   "keywords": [
     "wysiwyg",
     "wysiwyg-editor",
@@ -21,7 +21,7 @@
   ],
   "author": "Alessio Coggiola <alessio.coggiola@gmail.com>",
   "license": "MIT",
-  "homepage": "https://github.com/kojak8791/stilo-editor#readme",
+  "homepage": "https://kojak8791.github.io/stilo-editor/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kojak8791/stilo-editor.git"
@@ -45,6 +45,22 @@
       "types": "./dist/ui/index.d.ts",
       "import": "./dist/ui.js"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "svelte": "./dist/svelte/index.js"
+    },
+    "./svelte/action": {
+      "types": "./dist/svelte/action.d.ts",
+      "import": "./dist/svelte/action.js"
+    },
     "./content.css": "./dist/content.css",
     "./ui.css": "./dist/ui.css",
     "./style.css": "./dist/style.css"
@@ -86,13 +102,36 @@
     "prosemirror-transform": "^1.12.2",
     "prosemirror-view": "^1.42.6"
   },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "svelte": "^4 || ^5",
+    "vue": "^3.4"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@biomejs/biome": "^2.5.15",
     "@playwright/test": "^1.64.0",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "jsdom": "^30.1.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "svelte": "^5.57.2",
     "typescript": "^7.0.2",
     "vite": "^8.3.4",
-    "vitest": "^5.0.3"
+    "vitest": "^5.0.3",
+    "vue": "^3.5.44"
   }
 }