prosemirror-math 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ocavue
+
+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,118 @@
+# prosemirror-math
+
+Math editing extensions for [ProseMirror](https://prosemirror.net/). Provides node specs, node views, input rules, and plugins for inline and block math.
+
+## Installation
+
+```bash
+npm install prosemirror-math
+```
+
+## Usage
+
+### Node specs
+
+`mathBlockSpec` and `mathInlineSpec` are [NodeSpec](https://prosemirror.net/docs/ref/#model.NodeSpec) objects that you can add to your schema.
+
+```ts
+import { mathBlockSpec, mathInlineSpec } from 'prosemirror-math'
+import { Schema } from 'prosemirror-model'
+
+const schema = new Schema({
+  nodes: {
+    doc: { content: 'block+' },
+    paragraph: { content: 'inline*', group: 'block', parseDOM: [{ tag: 'p' }], toDOM: () => ['p', 0] },
+    text: { group: 'inline' },
+    mathBlock: { ...mathBlockSpec,   },
+    mathInline: { ...mathInlineSpec,  },
+  },
+})
+```
+
+### Node views
+
+`createMathBlockView` and `createMathInlineView` create [NodeView](https://prosemirror.net/docs/ref/#view.NodeView) instances with a source editor and a rendered display area. You provide your own math rendering function (e.g. using [Temml](https://temml.org/) or [KaTeX](https://katex.org/)).
+
+```ts
+import { createMathBlockView, createMathInlineView } from 'prosemirror-math'
+import { EditorView } from 'prosemirror-view'
+import Temml from 'temml'
+
+const view = new EditorView(document.body, {
+  state,
+  nodeViews: {
+    mathBlock: (node) => createMathBlockView(node, (text, element) => {
+      Temml.render(text, element, { displayMode: true })
+    }),
+    mathInline: (node) => createMathInlineView(node, (text, element) => {
+      Temml.render(text, element, { displayMode: false })
+    }),
+  },
+})
+```
+
+### Input rules
+
+`createMathInlineInputRule` creates a ProseMirror [InputRule](https://prosemirror.net/docs/ref/#inputrules.InputRule) that converts `$...$` or `$$...$$` into an inline math node.
+
+```ts
+import { inputRules } from 'prosemirror-inputrules'
+import { createMathInlineInputRule } from 'prosemirror-math'
+
+const plugin = inputRules({
+  rules: [createMathInlineInputRule('mathInline')],
+})
+```
+
+### Enter rule
+
+`mathBlockEnterRule` is an [EnterRule](https://github.com/prosekit/prosekit/tree/master/packages/prosemirror-enter-rules) that converts a paragraph containing `$$` into a math block when Enter is pressed.
+
+```ts
+import { createEnterRulePlugin } from 'prosemirror-enter-rules'
+import { mathBlockEnterRule } from 'prosemirror-math'
+
+const plugin = createEnterRulePlugin({
+  rules: [mathBlockEnterRule],
+})
+```
+
+### Cursor inside plugin
+
+`createCursorInsidePlugin` adds a `prosekit-head-inside` CSS class to math nodes when the cursor is inside them, useful for styling the active math node.
+
+```ts
+import { createCursorInsidePlugin } from 'prosemirror-math'
+
+const plugin = createCursorInsidePlugin(['mathBlock', 'mathInline'])
+```
+
+## API
+
+### Node specs
+
+- **`mathBlockSpec`** — NodeSpec for block math (`div.prosekit-math-block > pre > code`)
+- **`mathInlineSpec`** — NodeSpec for inline math (`span.prosekit-math-inline > code`)
+
+### Node views
+
+- **`createMathBlockView(node, renderMath)`** — Creates a block math NodeView
+- **`createMathInlineView(node, renderMath)`** — Creates an inline math NodeView
+
+The `renderMath` callback receives `(text: string, element: HTMLElement)` and should render the math into the element.
+
+### Input rules
+
+- **`createMathInlineInputRule(nodeType)`** — Creates an InputRule for inline math
+
+### Enter rules
+
+- **`mathBlockEnterRule`** — EnterRule for converting `$$` into a math block
+
+### Plugins
+
+- **`createCursorInsidePlugin(nodeTypes)`** — Plugin that decorates math nodes containing the cursor
+
+## License
+
+MIT

package/dist/prosemirror-math.d.ts

@@ -0,0 +1,42 @@
+import { Plugin } from "prosemirror-state";
+import { NodeView } from "prosemirror-view";
+import { EnterRule } from "prosemirror-enter-rules";
+import { InputRule } from "prosemirror-inputrules";
+import { Node, NodeSpec } from "prosemirror-model";
+
+//#region src/cursor-inside-plugin.d.ts
+declare function createCursorInsidePlugin(nodeTypes: string[]): Plugin;
+//#endregion
+//#region src/math-block-enter-rule.d.ts
+declare const mathBlockEnterRule: EnterRule;
+//#endregion
+//#region src/math-block-spec.d.ts
+declare const mathBlockSpec: NodeSpec;
+//#endregion
+//#region src/math-block-view.d.ts
+/**
+ * The function to render a math block.
+ *
+ * @param code - The code of the math block. For example, a TeX expression.
+ * @param element - A `<div>` element to render the math block.
+ */
+type RenderMathBlock = (code: string, element: HTMLElement) => void;
+declare function createMathBlockView(node: Node, renderMathBlock: RenderMathBlock): NodeView;
+//#endregion
+//#region src/math-inline-input-rule.d.ts
+declare function createMathInlineInputRule(nodeType: string): InputRule;
+//#endregion
+//#region src/math-inline-spec.d.ts
+declare const mathInlineSpec: NodeSpec;
+//#endregion
+//#region src/math-inline-view.d.ts
+/**
+ * The function to render a math inline.
+ *
+ * @param code - The code of the math inline. For example, a TeX expression.
+ * @param element - A `<span>` element to render the math inline.
+ */
+type RenderMathInline = (code: string, element: HTMLElement) => void;
+declare function createMathInlineView(node: Node, renderMathInline: RenderMathInline): NodeView;
+//#endregion
+export { type RenderMathBlock, type RenderMathInline, createCursorInsidePlugin, createMathBlockView, createMathInlineInputRule, createMathInlineView, mathBlockEnterRule, mathBlockSpec, mathInlineSpec };

package/dist/prosemirror-math.js

@@ -0,0 +1,154 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { createTextBlockEnterRule } from "prosemirror-enter-rules";
+import { supportsRegexLookbehind } from "@ocavue/utils";
+import { InputRule } from "prosemirror-inputrules";
+
+//#region src/cursor-inside-plugin.ts
+function createCursorInsideDecoration(state, nodeTypes) {
+	const { $head } = state.selection;
+	const node = $head.parent;
+	if (!nodeTypes.includes(node.type.name)) return;
+	const before = $head.before();
+	const deco = Decoration.node(before, before + node.nodeSize, { class: "prosekit-head-inside" });
+	return DecorationSet.create(state.doc, [deco]);
+}
+const key = new PluginKey("prosemirror-math-cursor-inside");
+function createCursorInsidePlugin(nodeTypes) {
+	return new Plugin({
+		key,
+		state: {
+			init() {},
+			apply(tr, oldValue, oldState, newState) {
+				if (oldState.selection.eq(newState.selection) && tr.docChanged === false) return oldValue;
+				return createCursorInsideDecoration(newState, nodeTypes);
+			}
+		},
+		props: { decorations(state) {
+			return key.getState(state);
+		} }
+	});
+}
+
+//#endregion
+//#region src/math-block-enter-rule.ts
+const MATH_BLOCK_ENTER_REGEXP = /^\$\$$/;
+const mathBlockEnterRule = /* @__PURE__ */ createTextBlockEnterRule({
+	regex: MATH_BLOCK_ENTER_REGEXP,
+	type: "mathBlock"
+});
+
+//#endregion
+//#region src/math-block-spec.ts
+const mathBlockSpec = {
+	atom: false,
+	group: "block",
+	content: "text*",
+	code: true,
+	toDOM() {
+		return [
+			"div",
+			{ class: "prosekit-math-block" },
+			["pre", ["code", 0]]
+		];
+	},
+	parseDOM: [{ tag: "div.prosekit-math-block" }]
+};
+
+//#endregion
+//#region src/create-element.ts
+function createElement(tag, className, ...children) {
+	const element = document.createElement(tag);
+	if (className) element.className = className;
+	if (children.length > 0) element.append(...children);
+	return element;
+}
+
+//#endregion
+//#region src/math-block-view.ts
+function createMathBlockView(node, renderMathBlock) {
+	const code = createElement("code");
+	const source = createElement("pre", "prosekit-math-source", code);
+	const display = createElement("div", "prosekit-math-display", source);
+	const dom = createElement("div", "prosekit-math-block", source, display);
+	let prevText = "";
+	const render = (node) => {
+		const nodeText = node.textContent;
+		if (prevText !== nodeText) {
+			prevText = nodeText;
+			renderMathBlock(nodeText, display);
+		}
+	};
+	render(node);
+	return {
+		dom,
+		contentDOM: code,
+		update: (node) => {
+			render(node);
+			return true;
+		}
+	};
+}
+
+//#endregion
+//#region src/math-inline-input-rule.ts
+const MATH_INPUT_REGEXP = (supportsRegexLookbehind() ? "(?<!\\$)" : "") + "(\\$\\$?)([^\\s$](?:[^$]*[^\\s$])?)\\1$";
+function createMathInlineInputRule(nodeType) {
+	return new InputRule(new RegExp(MATH_INPUT_REGEXP), (state, match, start, end) => {
+		const { tr, schema } = state;
+		const mathText = match[2];
+		if (!mathText) return null;
+		const type = schema.nodes[nodeType];
+		if (!type) return null;
+		const node = type.create(null, schema.text(mathText));
+		tr.replaceWith(start, end, node);
+		return tr;
+	});
+}
+
+//#endregion
+//#region src/math-inline-spec.ts
+const mathInlineSpec = {
+	atom: false,
+	inline: true,
+	group: "inline",
+	content: "text*",
+	selectable: false,
+	code: true,
+	toDOM() {
+		return [
+			"span",
+			{ class: "prosekit-math-inline" },
+			["code", 0]
+		];
+	},
+	parseDOM: [{ tag: "span.prosekit-math-inline" }]
+};
+
+//#endregion
+//#region src/math-inline-view.ts
+function createMathInlineView(node, renderMathInline) {
+	const source = createElement("code", "prosekit-math-source");
+	const display = createElement("span", "prosekit-math-display", source);
+	const dom = createElement("span", "prosekit-math-inline", source, display);
+	let prevText = "";
+	const render = (node) => {
+		const nodeText = node.textContent;
+		if (prevText !== nodeText) {
+			prevText = nodeText;
+			renderMathInline(nodeText, display);
+		}
+	};
+	render(node);
+	return {
+		dom,
+		contentDOM: source,
+		update: (node) => {
+			render(node);
+			return true;
+		}
+	};
+}
+
+//#endregion
+export { createCursorInsidePlugin, createMathBlockView, createMathInlineInputRule, createMathInlineView, mathBlockEnterRule, mathBlockSpec, mathInlineSpec };

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "prosemirror-math",
+  "type": "module",
+  "version": "0.0.1",
+  "private": false,
+  "description": "Math extensions for ProseMirror",
+  "author": {
+    "name": "ocavue",
+    "email": "ocavue@gmail.com"
+  },
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/ocavue",
+  "homepage": "https://github.com/prosekit/prosekit#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/prosekit/prosekit.git",
+    "directory": "packages/prosemirror-math"
+  },
+  "bugs": {
+    "url": "https://github.com/prosekit/prosekit/issues"
+  },
+  "keywords": [
+    "ProseMirror"
+  ],
+  "sideEffects": false,
+  "main": "./dist/prosemirror-math.js",
+  "module": "./dist/prosemirror-math.js",
+  "exports": {
+    ".": {
+      "types": "./dist/prosemirror-math.d.ts",
+      "default": "./dist/prosemirror-math.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@ocavue/utils": "^1.5.0",
+    "prosemirror-inputrules": "^1.4.0",
+    "prosemirror-model": "^1.25.4",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-view": "^1.41.6",
+    "prosemirror-enter-rules": "^0.1.2"
+  },
+  "devDependencies": {
+    "diffable-html-snapshot": "^0.2.0",
+    "temml": "^0.13.1",
+    "tsdown": "^0.20.3",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.18",
+    "vitest-browser-commands": "^0.2.0",
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/core": "^0.10.0",
+    "@prosekit/pm": "^0.1.15"
+  },
+  "publishConfig": {
+    "dev": {}
+  },
+  "dev": {
+    "entry": {
+      "prosemirror-math": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "build:tsc": "tsc -b tsconfig.json",
+    "build:tsdown": "tsdown"
+  },
+  "types": "./dist/prosemirror-math.d.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/prosemirror-math.d.ts"
+      ]
+    }
+  }
+}

package/src/create-element.spec.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+
+import { createElement } from './create-element'
+
+describe('createElement', () => {
+  it('creates an element with the given tag', () => {
+    const el = createElement('div')
+    expect(el.tagName).toBe('DIV')
+  })
+
+  it('sets the className when provided', () => {
+    const el = createElement('span', 'my-class')
+    expect(el.className).toBe('my-class')
+  })
+
+  it('does not set className when empty string', () => {
+    const el = createElement('div', '')
+    expect(el.className).toBe('')
+  })
+
+  it('appends children', () => {
+    const child1 = document.createElement('span')
+    const child2 = document.createElement('em')
+    const el = createElement('div', '', child1, child2)
+    expect(el.children.length).toBe(2)
+    expect(el.children[0]).toBe(child1)
+    expect(el.children[1]).toBe(child2)
+  })
+
+  it('sets className and appends children together', () => {
+    const child = document.createElement('code')
+    const el = createElement('pre', 'source', child)
+    expect(el.tagName).toBe('PRE')
+    expect(el.className).toBe('source')
+    expect(el.children.length).toBe(1)
+    expect(el.children[0]).toBe(child)
+  })
+})

package/src/create-element.ts

@@ -0,0 +1,14 @@
+export function createElement<Tag extends keyof HTMLElementTagNameMap>(
+  tag: Tag,
+  className?: string,
+  ...children: HTMLElement[]
+): HTMLElementTagNameMap[Tag] {
+  const element: HTMLElementTagNameMap[Tag] = document.createElement(tag)
+  if (className) {
+    element.className = className
+  }
+  if (children.length > 0) {
+    element.append(...children)
+  }
+  return element
+}

package/src/cursor-inside-plugin.spec.ts

@@ -0,0 +1,51 @@
+import { TextSelection } from '@prosekit/pm/state'
+import { describe, expect, it } from 'vitest'
+
+import { setupTest } from './testing'
+
+describe('cursorInsidePlugin', () => {
+  it('applies decoration when cursor is inside mathBlock', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.mathBlock('x^2')))
+
+    // Place cursor inside the math block
+    const { state } = editor.view
+    const tr = state.tr.setSelection(
+      TextSelection.near(state.doc.resolve(2)),
+    )
+    editor.view.dispatch(tr)
+
+    const mathBlock = editor.view.dom.querySelector('.prosekit-math-block')
+    expect(mathBlock?.classList.contains('prosekit-head-inside')).toBe(true)
+  })
+
+  it('applies decoration when cursor is inside mathInline', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.paragraph(n.mathInline('y'))))
+
+    // Place cursor inside the math inline node
+    const { state } = editor.view
+    const tr = state.tr.setSelection(
+      TextSelection.near(state.doc.resolve(2)),
+    )
+    editor.view.dispatch(tr)
+
+    const mathInline = editor.view.dom.querySelector('.prosekit-math-inline')
+    expect(mathInline?.classList.contains('prosekit-head-inside')).toBe(true)
+  })
+
+  it('does not apply decoration when cursor is outside math nodes', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.paragraph('hello'), n.mathBlock('x^2')))
+
+    // Place cursor inside the paragraph (position 2 should be inside "hello")
+    const { state } = editor.view
+    const tr = state.tr.setSelection(
+      TextSelection.near(state.doc.resolve(2)),
+    )
+    editor.view.dispatch(tr)
+
+    const mathBlock = editor.view.dom.querySelector('.prosekit-math-block')
+    expect(mathBlock?.classList.contains('prosekit-head-inside')).toBe(false)
+  })
+})

package/src/cursor-inside-plugin.ts

@@ -0,0 +1,39 @@
+import { Plugin, PluginKey, type EditorState } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+function createCursorInsideDecoration(
+  state: EditorState,
+  nodeTypes: string[],
+): DecorationSet | undefined {
+  const { $head } = state.selection
+  const node = $head.parent
+
+  if (!nodeTypes.includes(node.type.name)) return
+  const before = $head.before()
+  const deco = Decoration.node(before, before + node.nodeSize, { class: 'prosekit-head-inside' })
+  return DecorationSet.create(state.doc, [deco])
+}
+
+type PluginState = DecorationSet | undefined
+
+const key = new PluginKey<PluginState>('prosemirror-math-cursor-inside')
+
+export function createCursorInsidePlugin(nodeTypes: string[]): Plugin {
+  return new Plugin<PluginState>({
+    key,
+    state: {
+      init(): PluginState {
+        return undefined
+      },
+      apply(tr, oldValue, oldState, newState): PluginState {
+        if (oldState.selection.eq(newState.selection) && tr.docChanged === false) return oldValue
+        return createCursorInsideDecoration(newState, nodeTypes)
+      },
+    },
+    props: {
+      decorations(state: EditorState): PluginState | undefined {
+        return key.getState(state)
+      },
+    },
+  })
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { createCursorInsidePlugin } from './cursor-inside-plugin'
+export { mathBlockEnterRule } from './math-block-enter-rule'
+export { mathBlockSpec } from './math-block-spec'
+export { createMathBlockView, type RenderMathBlock } from './math-block-view'
+export { createMathInlineInputRule } from './math-inline-input-rule'
+export { mathInlineSpec } from './math-inline-spec'
+export { createMathInlineView, type RenderMathInline } from './math-inline-view'

package/src/math-block-enter-rule.spec.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { userEvent } from 'vitest/browser'
+
+import { MATH_BLOCK_ENTER_REGEXP } from './math-block-enter-rule'
+import { setupTest } from './testing'
+
+describe('MATH_BLOCK_ENTER_REGEXP', () => {
+  const cases: Array<[input: string, matched: boolean]> = [
+    ['$$', true],
+    ['$', false],
+    ['$$$', false],
+    ['hello', false],
+    ['$$x', false],
+  ]
+
+  it.each(cases)('should handle %s', (input, expected) => {
+    const match = MATH_BLOCK_ENTER_REGEXP.exec(input)
+    expect(match !== null).toBe(expected)
+  })
+})
+
+describe('defineMathBlockEnterRule', () => {
+  const { editor, n } = setupTest()
+
+  it('should create mathBlock when typing $$ and pressing Enter', async () => {
+    editor.set(n.doc(n.p('<a>')))
+
+    await userEvent.keyboard('$$')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p('$$')).toJSON(),
+    )
+
+    await userEvent.keyboard('{Enter}')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.mathBlock()).toJSON(),
+    )
+
+    // Selection should be inside the mathBlock
+    const { $from } = editor.view.state.selection
+    expect($from.parent.type.name).toBe('mathBlock')
+  })
+
+  it('should not create mathBlock when typing $$ inside text', async () => {
+    editor.set(n.doc(n.p('hello <a>')))
+
+    await userEvent.keyboard('$$')
+    await userEvent.keyboard('{Enter}')
+
+    // Should not convert to mathBlock since paragraph had other text
+    expect(editor.view.state.doc.toJSON()).not.toEqual(
+      n.doc(n.mathBlock()).toJSON(),
+    )
+  })
+})

package/src/math-block-enter-rule.ts

@@ -0,0 +1,8 @@
+import { createTextBlockEnterRule, type EnterRule } from 'prosemirror-enter-rules'
+
+export const MATH_BLOCK_ENTER_REGEXP: RegExp = /^\$\$$/
+
+export const mathBlockEnterRule: EnterRule = /* @__PURE__ */ createTextBlockEnterRule({
+  regex: MATH_BLOCK_ENTER_REGEXP,
+  type: 'mathBlock',
+})