@matrajs/solid 0.15.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nahim Hossain Shohan
+
+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,59 @@
+# @matrajs/solid
+
+Solid bindings for [Matra](https://matrajs.com): `createMatra`, and a signal
+that follows the editor.
+
+```sh
+npm i @matrajs/core @matrajs/solid
+```
+
+```tsx
+import { starterKit } from '@matrajs/core'
+import { createMatra } from '@matrajs/solid'
+
+export function Editor() {
+  const { editor, mount, state } = createMatra({
+    extensions: starterKit,
+    content: '<p>Hello</p>',
+  })
+
+  return (
+    <>
+      <button
+        onClick={() => editor.commands.toggleBold()}
+        aria-pressed={state().isActive('bold')}
+      >
+        Bold
+      </button>
+      <div ref={mount} />
+    </>
+  )
+}
+```
+
+## What it adds
+
+Solid's reactivity is not a render loop, so there is no external-store shape to
+reach for. A signal that bumps on every change is enough: everything reading
+`state()` re-runs and nothing else does.
+
+- **`state()` returns the editor itself**, not a copy. A toolbar asks
+  `isActive` at render time, and cloning a document to answer that would be the
+  expensive way to do nothing. What changes behind it is a version counter,
+  because the editor is one object that never changes identity — a signal
+  holding it directly would never notify.
+- **`onCleanup` destroys it**, so the element is safe to reuse.
+- **`mount` is guarded**, because a ref can run twice under a hot reload.
+
+The editor is created immediately rather than on mount, so `commands`,
+`getJSON()` and `getText()` all work before anything is on screen — which is
+what SSR and a test both need.
+
+## Styling
+
+Matra ships no appearance. See
+[the styling guide](https://matrajs.com/docs/styling).
+
+## Licence
+
+MIT.

package/dist/index.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var core = require('@matrajs/core');
+var solidJs = require('solid-js');
+
+// src/index.ts
+function createMatra(options) {
+  const editor = core.createEditor(options);
+  const [version, bump] = solidJs.createSignal(0);
+  const republish = () => bump((count) => count + 1);
+  const offChange = editor.on("change", republish);
+  const offSelection = editor.on("selectionChange", republish);
+  solidJs.onCleanup(() => {
+    offChange();
+    offSelection();
+    editor.destroy();
+  });
+  const mount = (element) => {
+    if (!editor.unsafe.view) editor.mount(element);
+  };
+  const state = () => {
+    version();
+    return editor;
+  };
+  return { editor, mount, state };
+}
+
+exports.createMatra = createMatra;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["createEditor","createSignal","onCleanup"],"mappings":";;;;;;AAyCO,SAAS,YACd,OAAA,EACgB;AAChB,EAAA,MAAM,MAAA,GAASA,kBAAa,OAAO,CAAA;AAInC,EAAA,MAAM,CAAC,OAAA,EAAS,IAAI,CAAA,GAAIC,qBAAa,CAAC,CAAA;AACtC,EAAA,MAAM,YAAY,MAAM,IAAA,CAAK,CAAC,KAAA,KAAU,QAAQ,CAAC,CAAA;AAEjD,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,EAAA,CAAG,QAAA,EAAU,SAAS,CAAA;AAC/C,EAAA,MAAM,YAAA,GAAe,MAAA,CAAO,EAAA,CAAG,iBAAA,EAAmB,SAAS,CAAA;AAE3D,EAAAC,iBAAA,CAAU,MAAM;AACd,IAAA,SAAA,EAAU;AACV,IAAA,YAAA,EAAa;AACb,IAAA,MAAA,CAAO,OAAA,EAAQ;AAAA,EACjB,CAAC,CAAA;AAED,EAAA,MAAM,KAAA,GAAQ,CAAC,OAAA,KAAyB;AAGtC,IAAA,IAAI,CAAC,MAAA,CAAO,MAAA,CAAO,IAAA,EAAM,MAAA,CAAO,MAAM,OAAO,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,MAAM,QAA6B,MAAM;AACvC,IAAA,OAAA,EAAQ;AACR,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AAEA,EAAA,OAAO,EAAE,MAAA,EAAQ,KAAA,EAAO,KAAA,EAAM;AAChC","file":"index.cjs","sourcesContent":["import { type AnyDef, type Editor, type EditorOptions, createEditor } from '@matrajs/core'\nimport { type Accessor, createSignal, onCleanup } from 'solid-js'\n\n/**\n * Solid bindings.\n *\n * Solid's reactivity is not a render loop, so there is no `useSyncExternalStore`\n * shape to reach for: a signal that bumps on every change is enough, and\n * everything reading it re-runs and nothing else does.\n */\n\nexport interface MatraEditor<T extends readonly AnyDef[]> {\n  /** The editor. It exists before anything is on screen. */\n  editor: Editor<T>\n  /** `ref={mount}` on the element the editor should live in. */\n  mount: (element: HTMLElement) => void\n  /**\n   * Read this inside JSX to re-run when the editor changes.\n   *\n   * It returns the editor itself rather than a copy, because a toolbar asks\n   * `isActive` at render time and cloning a document to answer that would be\n   * the expensive way to do nothing.\n   */\n  state: Accessor<Editor<T>>\n}\n\n/**\n * Create an editor bound to this component's lifetime.\n *\n * ```tsx\n * const { editor, mount, state } = createMatra({ extensions: starterKit })\n *\n * return (\n *   <>\n *     <button onClick={() => editor.commands.toggleBold()}\n *             aria-pressed={state().isActive('bold')}>Bold</button>\n *     <div ref={mount} />\n *   </>\n * )\n * ```\n */\nexport function createMatra<const T extends readonly AnyDef[]>(\n  options: EditorOptions<T>,\n): MatraEditor<T> {\n  const editor = createEditor(options)\n\n  // A counter rather than the editor itself: the editor is one object that\n  // never changes identity, so a signal holding it would never notify.\n  const [version, bump] = createSignal(0)\n  const republish = () => bump((count) => count + 1)\n\n  const offChange = editor.on('change', republish)\n  const offSelection = editor.on('selectionChange', republish)\n\n  onCleanup(() => {\n    offChange()\n    offSelection()\n    editor.destroy()\n  })\n\n  const mount = (element: HTMLElement) => {\n    // Guarded, because a ref can run twice under a hot reload and two views on\n    // one element is two carets fighting over it.\n    if (!editor.unsafe.view) editor.mount(element)\n  }\n\n  const state: Accessor<Editor<T>> = () => {\n    version()\n    return editor\n  }\n\n  return { editor, mount, state }\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,42 @@
+import { AnyDef, Editor, EditorOptions } from '@matrajs/core';
+import { Accessor } from 'solid-js';
+
+/**
+ * Solid bindings.
+ *
+ * Solid's reactivity is not a render loop, so there is no `useSyncExternalStore`
+ * shape to reach for: a signal that bumps on every change is enough, and
+ * everything reading it re-runs and nothing else does.
+ */
+interface MatraEditor<T extends readonly AnyDef[]> {
+    /** The editor. It exists before anything is on screen. */
+    editor: Editor<T>;
+    /** `ref={mount}` on the element the editor should live in. */
+    mount: (element: HTMLElement) => void;
+    /**
+     * Read this inside JSX to re-run when the editor changes.
+     *
+     * It returns the editor itself rather than a copy, because a toolbar asks
+     * `isActive` at render time and cloning a document to answer that would be
+     * the expensive way to do nothing.
+     */
+    state: Accessor<Editor<T>>;
+}
+/**
+ * Create an editor bound to this component's lifetime.
+ *
+ * ```tsx
+ * const { editor, mount, state } = createMatra({ extensions: starterKit })
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => editor.commands.toggleBold()}
+ *             aria-pressed={state().isActive('bold')}>Bold</button>
+ *     <div ref={mount} />
+ *   </>
+ * )
+ * ```
+ */
+declare function createMatra<const T extends readonly AnyDef[]>(options: EditorOptions<T>): MatraEditor<T>;
+
+export { type MatraEditor, createMatra };

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import { AnyDef, Editor, EditorOptions } from '@matrajs/core';
+import { Accessor } from 'solid-js';
+
+/**
+ * Solid bindings.
+ *
+ * Solid's reactivity is not a render loop, so there is no `useSyncExternalStore`
+ * shape to reach for: a signal that bumps on every change is enough, and
+ * everything reading it re-runs and nothing else does.
+ */
+interface MatraEditor<T extends readonly AnyDef[]> {
+    /** The editor. It exists before anything is on screen. */
+    editor: Editor<T>;
+    /** `ref={mount}` on the element the editor should live in. */
+    mount: (element: HTMLElement) => void;
+    /**
+     * Read this inside JSX to re-run when the editor changes.
+     *
+     * It returns the editor itself rather than a copy, because a toolbar asks
+     * `isActive` at render time and cloning a document to answer that would be
+     * the expensive way to do nothing.
+     */
+    state: Accessor<Editor<T>>;
+}
+/**
+ * Create an editor bound to this component's lifetime.
+ *
+ * ```tsx
+ * const { editor, mount, state } = createMatra({ extensions: starterKit })
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => editor.commands.toggleBold()}
+ *             aria-pressed={state().isActive('bold')}>Bold</button>
+ *     <div ref={mount} />
+ *   </>
+ * )
+ * ```
+ */
+declare function createMatra<const T extends readonly AnyDef[]>(options: EditorOptions<T>): MatraEditor<T>;
+
+export { type MatraEditor, createMatra };

package/dist/index.js

@@ -0,0 +1,28 @@
+import { createEditor } from '@matrajs/core';
+import { createSignal, onCleanup } from 'solid-js';
+
+// src/index.ts
+function createMatra(options) {
+  const editor = createEditor(options);
+  const [version, bump] = createSignal(0);
+  const republish = () => bump((count) => count + 1);
+  const offChange = editor.on("change", republish);
+  const offSelection = editor.on("selectionChange", republish);
+  onCleanup(() => {
+    offChange();
+    offSelection();
+    editor.destroy();
+  });
+  const mount = (element) => {
+    if (!editor.unsafe.view) editor.mount(element);
+  };
+  const state = () => {
+    version();
+    return editor;
+  };
+  return { editor, mount, state };
+}
+
+export { createMatra };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;AAyCO,SAAS,YACd,OAAA,EACgB;AAChB,EAAA,MAAM,MAAA,GAAS,aAAa,OAAO,CAAA;AAInC,EAAA,MAAM,CAAC,OAAA,EAAS,IAAI,CAAA,GAAI,aAAa,CAAC,CAAA;AACtC,EAAA,MAAM,YAAY,MAAM,IAAA,CAAK,CAAC,KAAA,KAAU,QAAQ,CAAC,CAAA;AAEjD,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,EAAA,CAAG,QAAA,EAAU,SAAS,CAAA;AAC/C,EAAA,MAAM,YAAA,GAAe,MAAA,CAAO,EAAA,CAAG,iBAAA,EAAmB,SAAS,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAA,EAAU;AACV,IAAA,YAAA,EAAa;AACb,IAAA,MAAA,CAAO,OAAA,EAAQ;AAAA,EACjB,CAAC,CAAA;AAED,EAAA,MAAM,KAAA,GAAQ,CAAC,OAAA,KAAyB;AAGtC,IAAA,IAAI,CAAC,MAAA,CAAO,MAAA,CAAO,IAAA,EAAM,MAAA,CAAO,MAAM,OAAO,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,MAAM,QAA6B,MAAM;AACvC,IAAA,OAAA,EAAQ;AACR,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AAEA,EAAA,OAAO,EAAE,MAAA,EAAQ,KAAA,EAAO,KAAA,EAAM;AAChC","file":"index.js","sourcesContent":["import { type AnyDef, type Editor, type EditorOptions, createEditor } from '@matrajs/core'\nimport { type Accessor, createSignal, onCleanup } from 'solid-js'\n\n/**\n * Solid bindings.\n *\n * Solid's reactivity is not a render loop, so there is no `useSyncExternalStore`\n * shape to reach for: a signal that bumps on every change is enough, and\n * everything reading it re-runs and nothing else does.\n */\n\nexport interface MatraEditor<T extends readonly AnyDef[]> {\n  /** The editor. It exists before anything is on screen. */\n  editor: Editor<T>\n  /** `ref={mount}` on the element the editor should live in. */\n  mount: (element: HTMLElement) => void\n  /**\n   * Read this inside JSX to re-run when the editor changes.\n   *\n   * It returns the editor itself rather than a copy, because a toolbar asks\n   * `isActive` at render time and cloning a document to answer that would be\n   * the expensive way to do nothing.\n   */\n  state: Accessor<Editor<T>>\n}\n\n/**\n * Create an editor bound to this component's lifetime.\n *\n * ```tsx\n * const { editor, mount, state } = createMatra({ extensions: starterKit })\n *\n * return (\n *   <>\n *     <button onClick={() => editor.commands.toggleBold()}\n *             aria-pressed={state().isActive('bold')}>Bold</button>\n *     <div ref={mount} />\n *   </>\n * )\n * ```\n */\nexport function createMatra<const T extends readonly AnyDef[]>(\n  options: EditorOptions<T>,\n): MatraEditor<T> {\n  const editor = createEditor(options)\n\n  // A counter rather than the editor itself: the editor is one object that\n  // never changes identity, so a signal holding it would never notify.\n  const [version, bump] = createSignal(0)\n  const republish = () => bump((count) => count + 1)\n\n  const offChange = editor.on('change', republish)\n  const offSelection = editor.on('selectionChange', republish)\n\n  onCleanup(() => {\n    offChange()\n    offSelection()\n    editor.destroy()\n  })\n\n  const mount = (element: HTMLElement) => {\n    // Guarded, because a ref can run twice under a hot reload and two views on\n    // one element is two carets fighting over it.\n    if (!editor.unsafe.view) editor.mount(element)\n  }\n\n  const state: Accessor<Editor<T>> = () => {\n    version()\n    return editor\n  }\n\n  return { editor, mount, state }\n}\n"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@matrajs/solid",
+  "version": "0.15.0",
+  "description": "Solid bindings for Matra — createMatra, and a signal that follows it.",
+  "license": "MIT",
+  "author": "Nahim Hossain Shohan",
+  "homepage": "https://matrajs.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amrelaco/matra.git",
+    "directory": "packages/solid"
+  },
+  "bugs": {
+    "url": "https://github.com/amrelaco/matra/issues"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "solid",
+    "solid-js",
+    "matra"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@matrajs/core": "^0.15.0"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  }
+}