prosemirror-highlight 0.13.1 → 0.14.0

package/README.md

@@ -32,14 +32,40 @@ export const shikiPlugin = createHighlightPlugin({ parser })
 ```ts
 import { createHighlightPlugin } from 'prosemirror-highlight'
 import { createParser, type Parser } from 'prosemirror-highlight/shiki'
+import type { Decoration } from 'prosemirror-view'
 import {
-  getSingletonHighlighter,
+  createHighlighter,
   type BuiltinLanguage,
   type Highlighter,
 } from 'shiki'
 
 let highlighter: Highlighter | undefined
+let highlighterPromise: Promise<void> | undefined
 let parser: Parser | undefined
+const loadedLanguages = new Set<string>()
+
+function loadHighlighter(): Promise<void> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ['github-light', 'github-dark', 'github-dark-dimmed'],
+      langs: [],
+    }).then((h) => {
+      highlighter = h
+    })
+  }
+  return highlighterPromise
+}
+
+async function loadLanguage(
+  highlighter: Highlighter,
+  language: string,
+): Promise<void> {
+  try {
+    return await highlighter.loadLanguage(language as BuiltinLanguage)
+  } finally {
+    loadedLanguages.add(language)
+  }
+}
 
 /**
  * Lazy load highlighter and highlighter languages.
@@ -48,23 +74,25 @@ let parser: Parser | undefined
  * promise that resolves when the highlighter or the language is loaded.
  * Otherwise, it returns an array of decorations.
  */
-const lazyParser: Parser = (options) => {
+const lazyParser: Parser = (options): Promise<void> | Decoration[] => {
   if (!highlighter) {
-    return getSingletonHighlighter({
-      themes: ['github-light'],
-      langs: [],
-    }).then((h) => {
-      highlighter = h
-    })
+    return loadHighlighter()
   }
 
-  const language = options.language as BuiltinLanguage
-  if (language && !highlighter.getLoadedLanguages().includes(language)) {
-    return highlighter.loadLanguage(language)
+  const language = options.language
+  if (language && !loadedLanguages.has(language)) {
+    return loadLanguage(highlighter, language)
   }
 
   if (!parser) {
-    parser = createParser(highlighter)
+    parser = createParser(highlighter, {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+        dim: 'github-dark-dimmed',
+      },
+      defaultColor: 'dim',
+    })
   }
 
   return parser(options)

package/dist/index.d.ts

@@ -53,7 +53,7 @@ declare class DecorationCache {
  */
 interface HighlightPluginState {
   cache: DecorationCache;
-  decorations: DecorationSet;
+  decorations: DecorationSet | undefined;
   promises: Promise<void>[];
 }
 /**

package/dist/index.js

@@ -97,7 +97,7 @@ function createHighlightPlugin({ parser, nodeTypes = ["code_block", "codeBlock"]
 				const refresh = !!tr.getMeta("prosemirror-highlight-refresh");
 				if (!tr.docChanged && !refresh) return {
 					cache,
-					decorations: data.decorations.map(tr.mapping, tr.doc),
+					decorations: data.decorations?.map(tr.mapping, tr.doc),
 					promises: data.promises
 				};
 				const [decorations, promises] = calculateDecoration(tr.doc, parser, nodeTypes, languageExtractor, cache);
@@ -122,7 +122,8 @@ function createHighlightPlugin({ parser, nodeTypes = ["code_block", "codeBlock"]
 					promise.then(() => {
 						promises.delete(promise);
 						refresh();
-					}).catch(() => {
+					}).catch((error) => {
+						console.error("[prosemirror-highlight] Error resolving parser:", error);
 						promises.delete(promise);
 					});
 				}
@@ -138,35 +139,46 @@ function createHighlightPlugin({ parser, nodeTypes = ["code_block", "codeBlock"]
 	});
 }
 function calculateDecoration(doc, parser, nodeTypes, languageExtractor, cache) {
-	const result = [];
+	const allDecorations = [];
 	const promises = [];
-	doc.descendants((node, pos) => {
-		if (!node.type.isTextblock) return true;
-		if (nodeTypes.includes(node.type.name)) {
+	const nodes = collectCodeBlocks(doc, nodeTypes);
+	try {
+		for (const [node, pos] of nodes) {
 			const language = languageExtractor(node);
 			const cached = cache.get(pos);
 			if (cached) {
 				const [_, decorations] = cached;
-				result.push(...decorations);
+				if (decorations.length > 0) allDecorations.push(decorations);
 			} else {
-				const decorations = parser({
+				const parsed = parser({
 					content: node.textContent,
 					language: language || void 0,
 					pos,
 					size: node.nodeSize
 				});
-				if (decorations && Array.isArray(decorations)) {
-					cache.set(pos, node, decorations);
-					result.push(...decorations);
-				} else if (decorations instanceof Promise) {
+				if (parsed && Array.isArray(parsed)) {
+					cache.set(pos, node, parsed);
+					if (parsed.length > 0) allDecorations.push(parsed);
+				} else if (parsed instanceof Promise) {
 					cache.remove(pos);
-					promises.push(decorations);
-				}
+					promises.push(parsed);
+				} else console.error(`[prosemirror-highlight] Invalid parser result:`, parsed);
 			}
 		}
-		return false;
+	} catch (error) {
+		console.error(`[prosemirror-highlight] Error parsing code blocks:`, error);
+	}
+	return [allDecorations.length > 0 ? DecorationSet.create(doc, allDecorations.flat()) : void 0, promises];
+}
+function collectCodeBlocks(doc, nodeTypes) {
+	const nodes = [];
+	doc.descendants((node, pos) => {
+		if (node.type.isTextblock && nodeTypes.includes(node.type.name)) {
+			nodes.push([node, pos]);
+			return false;
+		}
 	});
-	return [DecorationSet.create(doc, result), promises];
+	return nodes;
 }
 
 //#endregion

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/cache.ts","../src/plugin.ts"],"sourcesContent":["import type { Node as ProseMirrorNode } from 'prosemirror-model'\nimport type { Transaction } from 'prosemirror-state'\nimport type { Decoration } from 'prosemirror-view'\n\n/**\n * Represents a cache of doc positions to the node and decorations at that position\n */\nexport class DecorationCache {\n  private cache: Map<number, [node: ProseMirrorNode, decorations: Decoration[]]>\n\n  constructor(\n    cache?: Map<number, [node: ProseMirrorNode, decorations: Decoration[]]>,\n  ) {\n    this.cache = new Map(cache)\n  }\n\n  /**\n   * Gets the cache entry at the given doc position, or null if it doesn't exist\n   * @param pos The doc position of the node you want the cache for\n   */\n  get(pos: number) {\n    return this.cache.get(pos)\n  }\n\n  /**\n   * Sets the cache entry at the given position with the give node/decoration\n   * values\n   * @param pos The doc position of the node to set the cache for\n   * @param node The node to place in cache\n   * @param decorations The decorations to place in cache\n   */\n  set(pos: number, node: ProseMirrorNode, decorations: Decoration[]): void {\n    if (pos < 0) {\n      return\n    }\n\n    this.cache.set(pos, [node, decorations])\n  }\n\n  /**\n   * Removes the value at the oldPos (if it exists) and sets the new position to\n   * the given values\n   * @param oldPos The old node position to overwrite\n   * @param newPos The new node position to set the cache for\n   * @param node The new node to place in cache\n   * @param decorations The new decorations to place in cache\n   */\n  private replace(\n    oldPos: number,\n    newPos: number,\n    node: ProseMirrorNode,\n    decorations: Decoration[],\n  ): void {\n    this.remove(oldPos)\n    this.set(newPos, node, decorations)\n  }\n\n  /**\n   * Removes the cache entry at the given position\n   * @param pos The doc position to remove from cache\n   */\n  remove(pos: number): void {\n    this.cache.delete(pos)\n  }\n\n  /**\n   * Invalidates the cache by removing all decoration entries on nodes that have\n   * changed, updating the positions of the nodes that haven't and removing all\n   * the entries that have been deleted; NOTE: this does not affect the current\n   * cache, but returns an entirely new one\n   * @param tr A transaction to map the current cache to\n   */\n  invalidate(tr: Transaction): DecorationCache {\n    const returnCache = new DecorationCache(this.cache)\n    const mapping = tr.mapping\n\n    this.cache.forEach(([node, decorations], pos) => {\n      if (pos < 0) {\n        return\n      }\n\n      const result = mapping.mapResult(pos)\n      const mappedNode = tr.doc.nodeAt(result.pos)\n\n      if (result.deleted || !mappedNode?.eq(node)) {\n        returnCache.remove(pos)\n      } else if (pos !== result.pos) {\n        // update the decorations' from/to values to match the new node position\n        const updatedDecorations = decorations\n          .map((d): Decoration | null => {\n            // @ts-expect-error: internal api\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n            return d.map(mapping, 0, 0) as Decoration | null\n          })\n          .filter((d): d is Decoration => d != null)\n        returnCache.replace(pos, result.pos, mappedNode, updatedDecorations)\n      }\n    })\n\n    return returnCache\n  }\n}\n","import type { Node as ProseMirrorNode } from 'prosemirror-model'\nimport { Plugin, PluginKey } from 'prosemirror-state'\nimport { type Decoration, DecorationSet } from 'prosemirror-view'\n\nimport { DecorationCache } from './cache'\nimport type { LanguageExtractor, Parser } from './types'\n\n/**\n * Describes the current state of the highlightPlugin\n */\nexport interface HighlightPluginState {\n  cache: DecorationCache\n  decorations: DecorationSet\n  promises: Promise<void>[]\n}\n\n/**\n * Creates a plugin that highlights the contents of all nodes (via Decorations)\n * with a type passed in blockTypes\n */\nexport function createHighlightPlugin({\n  parser,\n  nodeTypes = ['code_block', 'codeBlock'],\n  languageExtractor = (node) => node.attrs.language as string | undefined,\n}: {\n  /**\n   * A function that returns an array of decorations for the given node text\n   * content, language, and position.\n   */\n  parser: Parser\n\n  /**\n   * An array containing all the node type name to target for highlighting.\n   *\n   * @default ['code_block', 'codeBlock']\n   */\n  nodeTypes?: string[]\n\n  /**\n   * A function that returns the language string to use when highlighting that\n   * node. By default, it returns `node.attrs.language`.\n   */\n  languageExtractor?: LanguageExtractor\n}): Plugin<HighlightPluginState> {\n  const key = new PluginKey<HighlightPluginState>('prosemirror-highlight')\n\n  return new Plugin<HighlightPluginState>({\n    key,\n    state: {\n      init(_, instance) {\n        const cache = new DecorationCache()\n        const [decorations, promises] = calculateDecoration(\n          instance.doc,\n          parser,\n          nodeTypes,\n          languageExtractor,\n          cache,\n        )\n\n        return { cache, decorations, promises }\n      },\n      apply: (tr, data) => {\n        const cache = data.cache.invalidate(tr)\n        const refresh = !!tr.getMeta('prosemirror-highlight-refresh')\n\n        if (!tr.docChanged && !refresh) {\n          const decorations = data.decorations.map(tr.mapping, tr.doc)\n          const promises = data.promises\n          return { cache, decorations, promises }\n        }\n\n        const [decorations, promises] = calculateDecoration(\n          tr.doc,\n          parser,\n          nodeTypes,\n          languageExtractor,\n          cache,\n        )\n        return { cache, decorations, promises }\n      },\n    },\n    view: (view) => {\n      const promises = new Set<Promise<void>>()\n\n      // Refresh the decorations when all promises resolve\n      const refresh = () => {\n        if (promises.size > 0) {\n          return\n        }\n        const tr = view.state.tr.setMeta('prosemirror-highlight-refresh', true)\n        view.dispatch(tr)\n      }\n\n      const check = () => {\n        const state = key.getState(view.state)\n\n        for (const promise of state?.promises ?? []) {\n          promises.add(promise)\n          promise\n            .then(() => {\n              promises.delete(promise)\n              refresh()\n            })\n            .catch(() => {\n              promises.delete(promise)\n            })\n        }\n      }\n\n      check()\n\n      return {\n        update: () => {\n          check()\n        },\n      }\n    },\n    props: {\n      decorations(this, state) {\n        return this.getState(state)?.decorations\n      },\n    },\n  })\n}\n\nfunction calculateDecoration(\n  doc: ProseMirrorNode,\n  parser: Parser,\n  nodeTypes: string[],\n  languageExtractor: LanguageExtractor,\n  cache: DecorationCache,\n) {\n  const result: Decoration[] = []\n  const promises: Promise<void>[] = []\n\n  doc.descendants((node, pos) => {\n    if (!node.type.isTextblock) {\n      return true\n    }\n\n    if (nodeTypes.includes(node.type.name)) {\n      const language = languageExtractor(node)\n      const cached = cache.get(pos)\n\n      if (cached) {\n        const [_, decorations] = cached\n        result.push(...decorations)\n      } else {\n        const decorations = parser({\n          content: node.textContent,\n          language: language || undefined,\n          pos,\n          size: node.nodeSize,\n        })\n\n        if (decorations && Array.isArray(decorations)) {\n          cache.set(pos, node, decorations)\n          result.push(...decorations)\n        } else if (decorations instanceof Promise) {\n          cache.remove(pos)\n          promises.push(decorations)\n        }\n      }\n    }\n    return false\n  })\n\n  return [DecorationSet.create(doc, result), promises] as const\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/cache.ts","../src/plugin.ts"],"sourcesContent":["import type { Node as ProseMirrorNode } from 'prosemirror-model'\nimport type { Transaction } from 'prosemirror-state'\nimport type { Decoration } from 'prosemirror-view'\n\n/**\n * Represents a cache of doc positions to the node and decorations at that position\n */\nexport class DecorationCache {\n  private cache: Map<number, [node: ProseMirrorNode, decorations: Decoration[]]>\n\n  constructor(\n    cache?: Map<number, [node: ProseMirrorNode, decorations: Decoration[]]>,\n  ) {\n    this.cache = new Map(cache)\n  }\n\n  /**\n   * Gets the cache entry at the given doc position, or null if it doesn't exist\n   * @param pos The doc position of the node you want the cache for\n   */\n  get(pos: number) {\n    return this.cache.get(pos)\n  }\n\n  /**\n   * Sets the cache entry at the given position with the give node/decoration\n   * values\n   * @param pos The doc position of the node to set the cache for\n   * @param node The node to place in cache\n   * @param decorations The decorations to place in cache\n   */\n  set(pos: number, node: ProseMirrorNode, decorations: Decoration[]): void {\n    if (pos < 0) {\n      return\n    }\n\n    this.cache.set(pos, [node, decorations])\n  }\n\n  /**\n   * Removes the value at the oldPos (if it exists) and sets the new position to\n   * the given values\n   * @param oldPos The old node position to overwrite\n   * @param newPos The new node position to set the cache for\n   * @param node The new node to place in cache\n   * @param decorations The new decorations to place in cache\n   */\n  private replace(\n    oldPos: number,\n    newPos: number,\n    node: ProseMirrorNode,\n    decorations: Decoration[],\n  ): void {\n    this.remove(oldPos)\n    this.set(newPos, node, decorations)\n  }\n\n  /**\n   * Removes the cache entry at the given position\n   * @param pos The doc position to remove from cache\n   */\n  remove(pos: number): void {\n    this.cache.delete(pos)\n  }\n\n  /**\n   * Invalidates the cache by removing all decoration entries on nodes that have\n   * changed, updating the positions of the nodes that haven't and removing all\n   * the entries that have been deleted; NOTE: this does not affect the current\n   * cache, but returns an entirely new one\n   * @param tr A transaction to map the current cache to\n   */\n  invalidate(tr: Transaction): DecorationCache {\n    const returnCache = new DecorationCache(this.cache)\n    const mapping = tr.mapping\n\n    this.cache.forEach(([node, decorations], pos) => {\n      if (pos < 0) {\n        return\n      }\n\n      const result = mapping.mapResult(pos)\n      const mappedNode = tr.doc.nodeAt(result.pos)\n\n      if (result.deleted || !mappedNode?.eq(node)) {\n        returnCache.remove(pos)\n      } else if (pos !== result.pos) {\n        // update the decorations' from/to values to match the new node position\n        const updatedDecorations = decorations\n          .map((d): Decoration | null => {\n            // @ts-expect-error: internal api\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n            return d.map(mapping, 0, 0) as Decoration | null\n          })\n          .filter((d): d is Decoration => d != null)\n        returnCache.replace(pos, result.pos, mappedNode, updatedDecorations)\n      }\n    })\n\n    return returnCache\n  }\n}\n","import type { Node as ProseMirrorNode } from 'prosemirror-model'\nimport { Plugin, PluginKey } from 'prosemirror-state'\nimport { type Decoration, DecorationSet } from 'prosemirror-view'\n\nimport { DecorationCache } from './cache'\nimport type { LanguageExtractor, Parser } from './types'\n\n/**\n * Describes the current state of the highlightPlugin\n */\nexport interface HighlightPluginState {\n  cache: DecorationCache\n  decorations: DecorationSet | undefined\n  promises: Promise<void>[]\n}\n\n/**\n * Creates a plugin that highlights the contents of all nodes (via Decorations)\n * with a type passed in blockTypes\n */\nexport function createHighlightPlugin({\n  parser,\n  nodeTypes = ['code_block', 'codeBlock'],\n  languageExtractor = (node) => node.attrs.language as string | undefined,\n}: {\n  /**\n   * A function that returns an array of decorations for the given node text\n   * content, language, and position.\n   */\n  parser: Parser\n\n  /**\n   * An array containing all the node type name to target for highlighting.\n   *\n   * @default ['code_block', 'codeBlock']\n   */\n  nodeTypes?: string[]\n\n  /**\n   * A function that returns the language string to use when highlighting that\n   * node. By default, it returns `node.attrs.language`.\n   */\n  languageExtractor?: LanguageExtractor\n}): Plugin<HighlightPluginState> {\n  const key = new PluginKey<HighlightPluginState>('prosemirror-highlight')\n\n  return new Plugin<HighlightPluginState>({\n    key,\n    state: {\n      init(_, instance) {\n        const cache = new DecorationCache()\n        const [decorations, promises] = calculateDecoration(\n          instance.doc,\n          parser,\n          nodeTypes,\n          languageExtractor,\n          cache,\n        )\n\n        return { cache, decorations, promises }\n      },\n      apply: (tr, data) => {\n        const cache = data.cache.invalidate(tr)\n        const refresh = !!tr.getMeta('prosemirror-highlight-refresh')\n\n        if (!tr.docChanged && !refresh) {\n          const decorations = data.decorations?.map(tr.mapping, tr.doc)\n          const promises = data.promises\n          return { cache, decorations, promises }\n        }\n\n        const [decorations, promises] = calculateDecoration(\n          tr.doc,\n          parser,\n          nodeTypes,\n          languageExtractor,\n          cache,\n        )\n        return { cache, decorations, promises }\n      },\n    },\n    view: (view) => {\n      const promises = new Set<Promise<void>>()\n\n      // Refresh the decorations when all promises resolve\n      const refresh = () => {\n        if (promises.size > 0) {\n          return\n        }\n        const tr = view.state.tr.setMeta('prosemirror-highlight-refresh', true)\n        view.dispatch(tr)\n      }\n\n      const check = () => {\n        const state = key.getState(view.state)\n\n        for (const promise of state?.promises ?? []) {\n          promises.add(promise)\n          promise\n            .then(() => {\n              promises.delete(promise)\n              refresh()\n            })\n            .catch((error) => {\n              console.error(\n                '[prosemirror-highlight] Error resolving parser:',\n                error,\n              )\n              promises.delete(promise)\n            })\n        }\n      }\n\n      check()\n\n      return {\n        update: () => {\n          check()\n        },\n      }\n    },\n    props: {\n      decorations(this, state) {\n        return this.getState(state)?.decorations\n      },\n    },\n  })\n}\n\nfunction calculateDecoration(\n  doc: ProseMirrorNode,\n  parser: Parser,\n  nodeTypes: string[],\n  languageExtractor: LanguageExtractor,\n  cache: DecorationCache,\n): [DecorationSet | undefined, Promise<void>[]] {\n  const allDecorations: Decoration[][] = []\n  const promises: Promise<void>[] = []\n  const nodes = collectCodeBlocks(doc, nodeTypes)\n\n  try {\n    for (const [node, pos] of nodes) {\n      const language = languageExtractor(node)\n      const cached = cache.get(pos)\n\n      if (cached) {\n        const [_, decorations] = cached\n        if (decorations.length > 0) {\n          allDecorations.push(decorations)\n        }\n      } else {\n        const parsed = parser({\n          content: node.textContent,\n          language: language || undefined,\n          pos,\n          size: node.nodeSize,\n        })\n        if (parsed && Array.isArray(parsed)) {\n          cache.set(pos, node, parsed)\n          if (parsed.length > 0) {\n            allDecorations.push(parsed)\n          }\n        } else if (parsed instanceof Promise) {\n          cache.remove(pos)\n          promises.push(parsed)\n        } else {\n          console.error(\n            `[prosemirror-highlight] Invalid parser result:`,\n            parsed,\n          )\n        }\n      }\n    }\n  } catch (error) {\n    console.error(`[prosemirror-highlight] Error parsing code blocks:`, error)\n  }\n\n  const decorationSet =\n    allDecorations.length > 0\n      ? DecorationSet.create(doc, allDecorations.flat())\n      : undefined\n  return [decorationSet, promises]\n}\n\nfunction collectCodeBlocks(\n  doc: ProseMirrorNode,\n  nodeTypes: string[],\n): Array<[node: ProseMirrorNode, pos: number]> {\n  const nodes: Array<[node: ProseMirrorNode, pos: number]> = []\n  doc.descendants((node, pos) => {\n    if (node.type.isTextblock && nodeTypes.includes(node.type.name)) {\n      nodes.push([node, pos])\n      return false\n    }\n  })\n  return nodes\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prosemirror-highlight",
   "type": "module",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "A ProseMirror plugin to highlight code blocks",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -97,7 +97,7 @@
   "devDependencies": {
     "@ocavue/eslint-config": "^3.11.2",
     "@ocavue/tsconfig": "^0.6.3",
-    "@shikijs/types": "^3.13.0",
+    "@shikijs/types": "^3.22.0",
     "@types/hast": "^3.0.4",
     "@types/node": "^24.0.0",
     "eslint": "^9.39.2",
@@ -105,20 +105,20 @@
     "jsdom": "^28.0.0",
     "lowlight": "^3.3.0",
     "pkg-pr-new": "^0.0.63",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prosemirror-example-setup": "^1.2.3",
-    "prosemirror-model": "^1.25.3",
+    "prosemirror-model": "^1.25.4",
     "prosemirror-schema-basic": "^1.2.4",
-    "prosemirror-state": "^1.4.3",
-    "prosemirror-transform": "^1.10.4",
-    "prosemirror-view": "^1.41.2",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-transform": "^1.11.0",
+    "prosemirror-view": "^1.41.6",
     "refractor": "^5.0.0",
-    "shiki": "^3.13.0",
-    "sugar-high": "^0.9.3",
+    "shiki": "^3.22.0",
+    "sugar-high": "^0.9.5",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.0"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "scripts": {
     "dev": "vite",