@matrajs/solid 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -15,9 +15,15 @@ function createMatra(options) {
15
15
  offSelection();
16
16
  editor.destroy();
17
17
  });
18
- const mount = (element) => {
19
- if (!editor.unsafe.view) editor.mount(element);
18
+ let element = null;
19
+ const attach = () => {
20
+ if (element?.isConnected && !editor.unsafe.view) editor.mount(element);
20
21
  };
22
+ const mount = (target) => {
23
+ element = target;
24
+ attach();
25
+ };
26
+ solidJs.onMount(attach);
21
27
  const state = () => {
22
28
  version();
23
29
  return editor;
@@ -1 +1 @@
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"]}
1
+ {"version":3,"sources":["../src/index.ts"],"names":["createEditor","createSignal","onCleanup","onMount"],"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;AAMD,EAAA,IAAI,OAAA,GAA8B,IAAA;AAClC,EAAA,MAAM,SAAS,MAAM;AAGnB,IAAA,IAAI,OAAA,EAAS,eAAe,CAAC,MAAA,CAAO,OAAO,IAAA,EAAM,MAAA,CAAO,MAAM,OAAO,CAAA;AAAA,EACvE,CAAA;AACA,EAAA,MAAM,KAAA,GAAQ,CAAC,MAAA,KAAwB;AACrC,IAAA,OAAA,GAAU,MAAA;AACV,IAAA,MAAA,EAAO;AAAA,EACT,CAAA;AACA,EAAAC,eAAA,CAAQ,MAAM,CAAA;AAEd,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, onMount } 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 // A ref runs when the element is made, before it is in the page — cloned\n // from a template, it does not even belong to the page's document yet. The\n // editor listens on that document for selection changes and puts its drag\n // handle in its body, so it is mounted once the element is in place.\n let element: HTMLElement | null = null\n const attach = () => {\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 (element?.isConnected && !editor.unsafe.view) editor.mount(element)\n }\n const mount = (target: HTMLElement) => {\n element = target\n attach()\n }\n onMount(attach)\n\n const state: Accessor<Editor<T>> = () => {\n version()\n return editor\n }\n\n return { editor, mount, state }\n}\n"]}
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createEditor } from '@matrajs/core';
2
- import { createSignal, onCleanup } from 'solid-js';
2
+ import { createSignal, onCleanup, onMount } from 'solid-js';
3
3
 
4
4
  // src/index.ts
5
5
  function createMatra(options) {
@@ -13,9 +13,15 @@ function createMatra(options) {
13
13
  offSelection();
14
14
  editor.destroy();
15
15
  });
16
- const mount = (element) => {
17
- if (!editor.unsafe.view) editor.mount(element);
16
+ let element = null;
17
+ const attach = () => {
18
+ if (element?.isConnected && !editor.unsafe.view) editor.mount(element);
18
19
  };
20
+ const mount = (target) => {
21
+ element = target;
22
+ attach();
23
+ };
24
+ onMount(attach);
19
25
  const state = () => {
20
26
  version();
21
27
  return editor;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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"]}
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;AAMD,EAAA,IAAI,OAAA,GAA8B,IAAA;AAClC,EAAA,MAAM,SAAS,MAAM;AAGnB,IAAA,IAAI,OAAA,EAAS,eAAe,CAAC,MAAA,CAAO,OAAO,IAAA,EAAM,MAAA,CAAO,MAAM,OAAO,CAAA;AAAA,EACvE,CAAA;AACA,EAAA,MAAM,KAAA,GAAQ,CAAC,MAAA,KAAwB;AACrC,IAAA,OAAA,GAAU,MAAA;AACV,IAAA,MAAA,EAAO;AAAA,EACT,CAAA;AACA,EAAA,OAAA,CAAQ,MAAM,CAAA;AAEd,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, onMount } 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 // A ref runs when the element is made, before it is in the page — cloned\n // from a template, it does not even belong to the page's document yet. The\n // editor listens on that document for selection changes and puts its drag\n // handle in its body, so it is mounted once the element is in place.\n let element: HTMLElement | null = null\n const attach = () => {\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 (element?.isConnected && !editor.unsafe.view) editor.mount(element)\n }\n const mount = (target: HTMLElement) => {\n element = target\n attach()\n }\n onMount(attach)\n\n const state: Accessor<Editor<T>> = () => {\n version()\n return editor\n }\n\n return { editor, mount, state }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@matrajs/solid",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Solid bindings for Matra — createMatra, and a signal that follows it.",
5
5
  "license": "MIT",
6
6
  "author": "Nahim Hossain Shohan",
@@ -40,7 +40,7 @@
40
40
  "README.md"
41
41
  ],
42
42
  "dependencies": {
43
- "@matrajs/core": "^1.0.0"
43
+ "@matrajs/core": "^1.0.2"
44
44
  },
45
45
  "peerDependencies": {
46
46
  "solid-js": ">=1.8"