@matrajs/react 0.0.1

package/README.md

@@ -0,0 +1,12 @@
+# @matrajs/react
+
+React bindings: `useEditor`, `useEditorState`, `useEditorFocus` and `EditorContent`.
+
+```bash
+npm i matra @matrajs/react
+```
+
+- Docs: https://matrajs.com
+- Source: https://github.com/amrelaco/matra
+
+MIT.

package/dist/index.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@matrajs/core');
+
+// src/editor-content.tsx
+function EditorContent({
+  editor,
+  ...rest
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element || editor.unsafe.view) return;
+    editor.mount(element);
+  }, [editor]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...rest });
+}
+function useEditor(options) {
+  const ref = react.useRef(null);
+  if (ref.current === null) ref.current = core.createEditor(options);
+  const editor = ref.current;
+  react.useEffect(() => {
+    return () => {
+      editor.destroy();
+      ref.current = null;
+    };
+  }, [editor]);
+  return editor;
+}
+function useEditorState(editor, select) {
+  const subscribe = react.useRef((onChange) => {
+    const offChange = editor.on("change", onChange);
+    const offSelection = editor.on("selectionChange", onChange);
+    return () => {
+      offChange();
+      offSelection();
+    };
+  }).current;
+  return react.useSyncExternalStore(
+    subscribe,
+    () => select(editor),
+    () => select(editor)
+  );
+}
+function useEditorFocus(editor) {
+  const [focused, setFocused] = react.useState(false);
+  react.useEffect(() => {
+    const onFocus = editor.on("focus", () => setFocused(true));
+    const onBlur = editor.on("blur", () => setFocused(false));
+    return () => {
+      onFocus();
+      onBlur();
+    };
+  }, [editor]);
+  return focused;
+}
+
+exports.EditorContent = EditorContent;
+exports.useEditor = useEditor;
+exports.useEditorFocus = useEditorFocus;
+exports.useEditorState = useEditorState;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/editor-content.tsx","../src/use-editor.ts"],"names":["useRef","useEffect","jsx","createEditor","useSyncExternalStore","useState"],"mappings":";;;;;;;AAcO,SAAS,aAAA,CAA2C;AAAA,EACzD,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,MAAM,GAAA,GAAMA,aAA8B,IAAI,CAAA;AAE9C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AACpB,IAAA,IAAI,CAAC,OAAA,IAAW,MAAA,CAAO,MAAA,CAAO,IAAA,EAAM;AACpC,IAAA,MAAA,CAAO,MAAM,OAAO,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,uBAAOC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AAClC;ACfO,SAAS,UACd,OAAA,EACW;AACX,EAAA,MAAM,GAAA,GAAMF,aAAyB,IAAI,CAAA;AACzC,EAAA,IAAI,IAAI,OAAA,KAAY,IAAA,EAAM,GAAA,CAAI,OAAA,GAAUG,kBAAa,OAAO,CAAA;AAC5D,EAAA,MAAM,SAAS,GAAA,CAAI,OAAA;AAEnB,EAAAF,gBAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,OAAA,EAAQ;AACf,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,IAChB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAO,MAAA;AACT;AAQO,SAAS,cAAA,CACd,QACA,MAAA,EACG;AACH,EAAA,MAAM,SAAA,GAAYD,YAAAA,CAAO,CAAC,QAAA,KAAyB;AACjD,IAAA,MAAM,SAAA,GAAY,MAAA,CAAO,EAAA,CAAG,QAAA,EAAU,QAAQ,CAAA;AAC9C,IAAA,MAAM,YAAA,GAAe,MAAA,CAAO,EAAA,CAAG,iBAAA,EAAmB,QAAQ,CAAA;AAC1D,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,EAAU;AACV,MAAA,YAAA,EAAa;AAAA,IACf,CAAA;AAAA,EACF,CAAC,CAAA,CAAE,OAAA;AAEH,EAAA,OAAOI,0BAAA;AAAA,IACL,SAAA;AAAA,IACA,MAAM,OAAO,MAAM,CAAA;AAAA,IACnB,MAAM,OAAO,MAAM;AAAA,GACrB;AACF;AAGO,SAAS,eAA4C,MAAA,EAA4B;AACtF,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC5C,EAAAJ,gBAAU,MAAM;AACd,IAAA,MAAM,UAAU,MAAA,CAAO,EAAA,CAAG,SAAS,MAAM,UAAA,CAAW,IAAI,CAAC,CAAA;AACzD,IAAA,MAAM,SAAS,MAAA,CAAO,EAAA,CAAG,QAAQ,MAAM,UAAA,CAAW,KAAK,CAAC,CAAA;AACxD,IAAA,OAAO,MAAM;AACX,MAAA,OAAA,EAAQ;AACR,MAAA,MAAA,EAAO;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AACX,EAAA,OAAO,OAAA;AACT","file":"index.cjs","sourcesContent":["import type { AnyDef, Editor } from '@matrajs/core'\nimport { useEffect, useRef } from 'react'\n\nexport interface EditorContentProps<T extends readonly AnyDef[] = readonly AnyDef[]>\n  extends React.HTMLAttributes<HTMLDivElement> {\n  editor: Editor<T>\n}\n\n/**\n * The element the editor mounts into.\n *\n * The mount is guarded on `unsafe.view` so StrictMode's double-invoke in\n * development cannot leave two views attached to one element.\n */\nexport function EditorContent<T extends readonly AnyDef[]>({\n  editor,\n  ...rest\n}: EditorContentProps<T>) {\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element || editor.unsafe.view) return\n    editor.mount(element)\n  }, [editor])\n\n  return <div ref={ref} {...rest} />\n}\n","import { createEditor } from '@matrajs/core'\nimport type { AnyDef, Editor, EditorOptions } from '@matrajs/core'\nimport { useEffect, useRef, useState, useSyncExternalStore } from 'react'\n\n/**\n * Create an editor that lives for the lifetime of the component.\n *\n * The editor is created lazily on first render and destroyed on unmount.\n * Options are read once — changing them later will not recreate the editor,\n * because tearing down a live document on a prop change loses the user's work.\n * Use the returned editor's commands to change things instead.\n */\nexport function useEditor<const T extends readonly AnyDef[]>(\n  options: EditorOptions<T>,\n): Editor<T> {\n  const ref = useRef<Editor<T> | null>(null)\n  if (ref.current === null) ref.current = createEditor(options)\n  const editor = ref.current\n\n  useEffect(() => {\n    return () => {\n      editor.destroy()\n      ref.current = null\n    }\n  }, [editor])\n\n  return editor\n}\n\n/**\n * Re-render when the editor changes.\n *\n * Toolbars need this: without it, `editor.commands` mutate the document but\n * React never hears about it, so active states go stale.\n */\nexport function useEditorState<T extends readonly AnyDef[], S>(\n  editor: Editor<T>,\n  select: (editor: Editor<T>) => S,\n): S {\n  const subscribe = useRef((onChange: () => void) => {\n    const offChange = editor.on('change', onChange)\n    const offSelection = editor.on('selectionChange', onChange)\n    return () => {\n      offChange()\n      offSelection()\n    }\n  }).current\n\n  return useSyncExternalStore(\n    subscribe,\n    () => select(editor),\n    () => select(editor),\n  )\n}\n\n/** True while the editor has DOM focus. */\nexport function useEditorFocus<T extends readonly AnyDef[]>(editor: Editor<T>): boolean {\n  const [focused, setFocused] = useState(false)\n  useEffect(() => {\n    const onFocus = editor.on('focus', () => setFocused(true))\n    const onBlur = editor.on('blur', () => setFocused(false))\n    return () => {\n      onFocus()\n      onBlur()\n    }\n  }, [editor])\n  return focused\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { AnyDef, Editor, EditorOptions } from '@matrajs/core';
+
+interface EditorContentProps<T extends readonly AnyDef[] = readonly AnyDef[]> extends React.HTMLAttributes<HTMLDivElement> {
+    editor: Editor<T>;
+}
+/**
+ * The element the editor mounts into.
+ *
+ * The mount is guarded on `unsafe.view` so StrictMode's double-invoke in
+ * development cannot leave two views attached to one element.
+ */
+declare function EditorContent<T extends readonly AnyDef[]>({ editor, ...rest }: EditorContentProps<T>): react.JSX.Element;
+
+/**
+ * Create an editor that lives for the lifetime of the component.
+ *
+ * The editor is created lazily on first render and destroyed on unmount.
+ * Options are read once — changing them later will not recreate the editor,
+ * because tearing down a live document on a prop change loses the user's work.
+ * Use the returned editor's commands to change things instead.
+ */
+declare function useEditor<const T extends readonly AnyDef[]>(options: EditorOptions<T>): Editor<T>;
+/**
+ * Re-render when the editor changes.
+ *
+ * Toolbars need this: without it, `editor.commands` mutate the document but
+ * React never hears about it, so active states go stale.
+ */
+declare function useEditorState<T extends readonly AnyDef[], S>(editor: Editor<T>, select: (editor: Editor<T>) => S): S;
+/** True while the editor has DOM focus. */
+declare function useEditorFocus<T extends readonly AnyDef[]>(editor: Editor<T>): boolean;
+
+export { EditorContent, type EditorContentProps, useEditor, useEditorFocus, useEditorState };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { AnyDef, Editor, EditorOptions } from '@matrajs/core';
+
+interface EditorContentProps<T extends readonly AnyDef[] = readonly AnyDef[]> extends React.HTMLAttributes<HTMLDivElement> {
+    editor: Editor<T>;
+}
+/**
+ * The element the editor mounts into.
+ *
+ * The mount is guarded on `unsafe.view` so StrictMode's double-invoke in
+ * development cannot leave two views attached to one element.
+ */
+declare function EditorContent<T extends readonly AnyDef[]>({ editor, ...rest }: EditorContentProps<T>): react.JSX.Element;
+
+/**
+ * Create an editor that lives for the lifetime of the component.
+ *
+ * The editor is created lazily on first render and destroyed on unmount.
+ * Options are read once — changing them later will not recreate the editor,
+ * because tearing down a live document on a prop change loses the user's work.
+ * Use the returned editor's commands to change things instead.
+ */
+declare function useEditor<const T extends readonly AnyDef[]>(options: EditorOptions<T>): Editor<T>;
+/**
+ * Re-render when the editor changes.
+ *
+ * Toolbars need this: without it, `editor.commands` mutate the document but
+ * React never hears about it, so active states go stale.
+ */
+declare function useEditorState<T extends readonly AnyDef[], S>(editor: Editor<T>, select: (editor: Editor<T>) => S): S;
+/** True while the editor has DOM focus. */
+declare function useEditorFocus<T extends readonly AnyDef[]>(editor: Editor<T>): boolean;
+
+export { EditorContent, type EditorContentProps, useEditor, useEditorFocus, useEditorState };

package/dist/index.js

@@ -0,0 +1,60 @@
+import { useRef, useEffect, useSyncExternalStore, useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { createEditor } from '@matrajs/core';
+
+// src/editor-content.tsx
+function EditorContent({
+  editor,
+  ...rest
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || editor.unsafe.view) return;
+    editor.mount(element);
+  }, [editor]);
+  return /* @__PURE__ */ jsx("div", { ref, ...rest });
+}
+function useEditor(options) {
+  const ref = useRef(null);
+  if (ref.current === null) ref.current = createEditor(options);
+  const editor = ref.current;
+  useEffect(() => {
+    return () => {
+      editor.destroy();
+      ref.current = null;
+    };
+  }, [editor]);
+  return editor;
+}
+function useEditorState(editor, select) {
+  const subscribe = useRef((onChange) => {
+    const offChange = editor.on("change", onChange);
+    const offSelection = editor.on("selectionChange", onChange);
+    return () => {
+      offChange();
+      offSelection();
+    };
+  }).current;
+  return useSyncExternalStore(
+    subscribe,
+    () => select(editor),
+    () => select(editor)
+  );
+}
+function useEditorFocus(editor) {
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    const onFocus = editor.on("focus", () => setFocused(true));
+    const onBlur = editor.on("blur", () => setFocused(false));
+    return () => {
+      onFocus();
+      onBlur();
+    };
+  }, [editor]);
+  return focused;
+}
+
+export { EditorContent, useEditor, useEditorFocus, useEditorState };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/editor-content.tsx","../src/use-editor.ts"],"names":["useRef","useEffect"],"mappings":";;;;;AAcO,SAAS,aAAA,CAA2C;AAAA,EACzD,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,MAAM,GAAA,GAAM,OAA8B,IAAI,CAAA;AAE9C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AACpB,IAAA,IAAI,CAAC,OAAA,IAAW,MAAA,CAAO,MAAA,CAAO,IAAA,EAAM;AACpC,IAAA,MAAA,CAAO,MAAM,OAAO,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AAClC;ACfO,SAAS,UACd,OAAA,EACW;AACX,EAAA,MAAM,GAAA,GAAMA,OAAyB,IAAI,CAAA;AACzC,EAAA,IAAI,IAAI,OAAA,KAAY,IAAA,EAAM,GAAA,CAAI,OAAA,GAAU,aAAa,OAAO,CAAA;AAC5D,EAAA,MAAM,SAAS,GAAA,CAAI,OAAA;AAEnB,EAAAC,UAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,OAAA,EAAQ;AACf,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,IAChB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAO,MAAA;AACT;AAQO,SAAS,cAAA,CACd,QACA,MAAA,EACG;AACH,EAAA,MAAM,SAAA,GAAYD,MAAAA,CAAO,CAAC,QAAA,KAAyB;AACjD,IAAA,MAAM,SAAA,GAAY,MAAA,CAAO,EAAA,CAAG,QAAA,EAAU,QAAQ,CAAA;AAC9C,IAAA,MAAM,YAAA,GAAe,MAAA,CAAO,EAAA,CAAG,iBAAA,EAAmB,QAAQ,CAAA;AAC1D,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,EAAU;AACV,MAAA,YAAA,EAAa;AAAA,IACf,CAAA;AAAA,EACF,CAAC,CAAA,CAAE,OAAA;AAEH,EAAA,OAAO,oBAAA;AAAA,IACL,SAAA;AAAA,IACA,MAAM,OAAO,MAAM,CAAA;AAAA,IACnB,MAAM,OAAO,MAAM;AAAA,GACrB;AACF;AAGO,SAAS,eAA4C,MAAA,EAA4B;AACtF,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAAC,UAAU,MAAM;AACd,IAAA,MAAM,UAAU,MAAA,CAAO,EAAA,CAAG,SAAS,MAAM,UAAA,CAAW,IAAI,CAAC,CAAA;AACzD,IAAA,MAAM,SAAS,MAAA,CAAO,EAAA,CAAG,QAAQ,MAAM,UAAA,CAAW,KAAK,CAAC,CAAA;AACxD,IAAA,OAAO,MAAM;AACX,MAAA,OAAA,EAAQ;AACR,MAAA,MAAA,EAAO;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AACX,EAAA,OAAO,OAAA;AACT","file":"index.js","sourcesContent":["import type { AnyDef, Editor } from '@matrajs/core'\nimport { useEffect, useRef } from 'react'\n\nexport interface EditorContentProps<T extends readonly AnyDef[] = readonly AnyDef[]>\n  extends React.HTMLAttributes<HTMLDivElement> {\n  editor: Editor<T>\n}\n\n/**\n * The element the editor mounts into.\n *\n * The mount is guarded on `unsafe.view` so StrictMode's double-invoke in\n * development cannot leave two views attached to one element.\n */\nexport function EditorContent<T extends readonly AnyDef[]>({\n  editor,\n  ...rest\n}: EditorContentProps<T>) {\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element || editor.unsafe.view) return\n    editor.mount(element)\n  }, [editor])\n\n  return <div ref={ref} {...rest} />\n}\n","import { createEditor } from '@matrajs/core'\nimport type { AnyDef, Editor, EditorOptions } from '@matrajs/core'\nimport { useEffect, useRef, useState, useSyncExternalStore } from 'react'\n\n/**\n * Create an editor that lives for the lifetime of the component.\n *\n * The editor is created lazily on first render and destroyed on unmount.\n * Options are read once — changing them later will not recreate the editor,\n * because tearing down a live document on a prop change loses the user's work.\n * Use the returned editor's commands to change things instead.\n */\nexport function useEditor<const T extends readonly AnyDef[]>(\n  options: EditorOptions<T>,\n): Editor<T> {\n  const ref = useRef<Editor<T> | null>(null)\n  if (ref.current === null) ref.current = createEditor(options)\n  const editor = ref.current\n\n  useEffect(() => {\n    return () => {\n      editor.destroy()\n      ref.current = null\n    }\n  }, [editor])\n\n  return editor\n}\n\n/**\n * Re-render when the editor changes.\n *\n * Toolbars need this: without it, `editor.commands` mutate the document but\n * React never hears about it, so active states go stale.\n */\nexport function useEditorState<T extends readonly AnyDef[], S>(\n  editor: Editor<T>,\n  select: (editor: Editor<T>) => S,\n): S {\n  const subscribe = useRef((onChange: () => void) => {\n    const offChange = editor.on('change', onChange)\n    const offSelection = editor.on('selectionChange', onChange)\n    return () => {\n      offChange()\n      offSelection()\n    }\n  }).current\n\n  return useSyncExternalStore(\n    subscribe,\n    () => select(editor),\n    () => select(editor),\n  )\n}\n\n/** True while the editor has DOM focus. */\nexport function useEditorFocus<T extends readonly AnyDef[]>(editor: Editor<T>): boolean {\n  const [focused, setFocused] = useState(false)\n  useEffect(() => {\n    const onFocus = editor.on('focus', () => setFocused(true))\n    const onBlur = editor.on('blur', () => setFocused(false))\n    return () => {\n      onFocus()\n      onBlur()\n    }\n  }, [editor])\n  return focused\n}\n"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@matrajs/react",
+  "version": "0.0.1",
+  "description": "React bindings for Matra \u2014 useEditor and EditorContent.",
+  "license": "MIT",
+  "author": "Nahim Hossain Shohan",
+  "homepage": "https://matrajs.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amrelaco/matra.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/amrelaco/matra/issues"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "react",
+    "matra",
+    "prosemirror"
+  ],
+  "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"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@matrajs/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}