prosemirror-highlight 0.3.2 → 0.4.0

package/README.md

@@ -8,13 +8,16 @@ Highlight your code blocks in [ProseMirror], with any syntax highlighter you lik
 
 ### With [Shiki]
 
+<details>
+<summary>Static loading of a fixed set of languages</summary>
+
 ```ts
 import { getHighlighter, setCDN } from 'shiki'
 
 import { createHighlightPlugin } from 'prosemirror-highlight'
 import { createParser } from 'prosemirror-highlight/shiki'
 
-setCDN('https://unpkg.com/shiki@0.14.6/')
+setCDN('https://unpkg.com/shiki@0.14.7/')
 
 const highlighter = await getHighlighter({
   theme: 'github-light',
@@ -24,8 +27,70 @@ const parser = createParser(highlighter)
 export const shikiPlugin = createHighlightPlugin({ parser })
 ```
 
+</details>
+
+<details>
+<summary>Dynamic loading of arbitrary languages</summary>
+
+```ts
+import { getHighlighter, setCDN, type Highlighter, type Lang } from 'shiki'
+
+import { createHighlightPlugin } from 'prosemirror-highlight'
+import { createParser, type Parser } from 'prosemirror-highlight/shiki'
+
+setCDN('https://unpkg.com/shiki@0.14.7/')
+
+let highlighterPromise: Promise<void> | undefined
+let highlighter: Highlighter | undefined
+let parser: Parser | undefined
+const loadedLanguages = new Set<string>()
+
+/**
+ * Lazy load highlighter and highlighter languages.
+ *
+ * When the highlighter or the required language is not loaded, it returns a
+ * promise that resolves when the highlighter or the language is loaded.
+ * Otherwise, it returns an array of decorations.
+ */
+const lazyParser: Parser = (options) => {
+  if (!highlighterPromise) {
+    highlighterPromise = getHighlighter({
+      themes: ['github-light'],
+      langs: [],
+    }).then((h) => {
+      highlighter = h
+    })
+    return highlighterPromise
+  }
+
+  if (!highlighter) {
+    return highlighterPromise
+  }
+
+  const language = options.language
+  if (language && !loadedLanguages.has(language)) {
+    return highlighter.loadLanguage(language as Lang).then(() => {
+      loadedLanguages.add(language)
+    })
+  }
+
+  if (!parser) {
+    parser = createParser(highlighter)
+  }
+
+  return parser(options)
+}
+
+export const shikiLazyPlugin = createHighlightPlugin({ parser: lazyParser })
+```
+
+</details>
+
 ### With [Shikiji]
 
+<details>
+<summary>Static loading of a fixed set of languages</summary>
+
 ```ts
 import { getHighlighter } from 'shikiji'
 
@@ -40,8 +105,68 @@ const parser = createParser(highlighter)
 export const shikijiPlugin = createHighlightPlugin({ parser })
 ```
 
+</details>
+
+<details>
+<summary>Dynamic loading of arbitrary languages</summary>
+
+```ts
+import { getHighlighter, type Highlighter, type BuiltinLanguage } from 'shikiji'
+
+import { createHighlightPlugin, type Parser } from 'prosemirror-highlight'
+import { createParser } from 'prosemirror-highlight/shikiji'
+
+let highlighterPromise: Promise<void> | undefined
+let highlighter: Highlighter | undefined
+let parser: Parser | undefined
+const loadedLanguages = new Set<string>()
+
+/**
+ * Lazy load highlighter and highlighter languages.
+ *
+ * When the highlighter or the required language is not loaded, it returns a
+ * promise that resolves when the highlighter or the language is loaded.
+ * Otherwise, it returns an array of decorations.
+ */
+const lazyParser: Parser = (options) => {
+  if (!highlighterPromise) {
+    highlighterPromise = getHighlighter({
+      themes: ['vitesse-light'],
+      langs: [],
+    }).then((h) => {
+      highlighter = h
+    })
+    return highlighterPromise
+  }
+
+  if (!highlighter) {
+    return highlighterPromise
+  }
+
+  const language = options.language
+  if (language && !loadedLanguages.has(language)) {
+    return highlighter.loadLanguage(language as BuiltinLanguage).then(() => {
+      loadedLanguages.add(language)
+    })
+  }
+
+  if (!parser) {
+    parser = createParser(highlighter)
+  }
+
+  return parser(options)
+}
+
+export const shikijiLazyPlugin = createHighlightPlugin({ parser: lazyParser })
+```
+
+</details>
+
 ### With [lowlight] (based on [Highlight.js])
 
+<details>
+<summary>Static loading of all languages</summary>
+
 ```ts
 import 'highlight.js/styles/default.css'
 
@@ -55,8 +180,13 @@ const parser = createParser(lowlight)
 export const lowlightPlugin = createHighlightPlugin({ parser })
 ```
 
+</details>
+
 ### With [refractor] (based on [Prism])
 
+<details>
+<summary>Static loading of all languages</summary>
+
 ```ts
 import { refractor } from 'refractor'
 
@@ -67,6 +197,8 @@ const parser = createParser(refractor)
 export const refractorPlugin = createHighlightPlugin({ parser })
 ```
 
+</details>
+
 ## Online demo
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/ocavue/prosemirror-highlight?file=playground%2Fmain.ts)

package/dist/index.d.ts

@@ -1,25 +1,19 @@
 import { Node } from 'prosemirror-model';
 import { Transaction, Plugin } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { P as Parser, L as LanguageExtractor } from './types-wUmJTPF3.js';
+import { P as Parser, L as LanguageExtractor } from './types-hA0ujWQ1.js';
 
 /**
  * Represents a cache of doc positions to the node and decorations at that position
  */
 declare class DecorationCache {
     private cache;
-    constructor(cache?: Map<number, {
-        node: Node;
-        decorations: Decoration[];
-    }>);
+    constructor(cache?: Map<number, [node: Node, decorations: Decoration[]]>);
     /**
      * Gets the cache entry at the given doc position, or null if it doesn't exist
      * @param pos The doc position of the node you want the cache for
      */
-    get(pos: number): {
-        node: Node;
-        decorations: Decoration[];
-    } | undefined;
+    get(pos: number): [node: Node, decorations: Decoration[]] | undefined;
     /**
      * Sets the cache entry at the given position with the give node/decoration
      * values
@@ -41,7 +35,7 @@ declare class DecorationCache {
      * Removes the cache entry at the given position
      * @param pos The doc position to remove from cache
      */
-    private remove;
+    remove(pos: number): void;
     /**
      * Invalidates the cache by removing all decoration entries on nodes that have
      * changed, updating the positions of the nodes that haven't and removing all
@@ -58,6 +52,7 @@ declare class DecorationCache {
 interface HighlightPluginState {
     cache: DecorationCache;
     decorations: DecorationSet;
+    promises: Promise<void>[];
 }
 /**
  * Creates a plugin that highlights the contents of all nodes (via Decorations)

package/dist/index.js

@@ -24,7 +24,7 @@ var DecorationCache = class _DecorationCache {
     if (pos < 0) {
       return;
     }
-    this.cache.set(pos, { node, decorations });
+    this.cache.set(pos, [node, decorations]);
   }
   /**
    * Removes the value at the oldPos (if it exists) and sets the new position to
@@ -55,7 +55,7 @@ var DecorationCache = class _DecorationCache {
   invalidate(tr) {
     const returnCache = new _DecorationCache(this.cache);
     const mapping = tr.mapping;
-    this.cache.forEach(({ node, decorations }, pos) => {
+    this.cache.forEach(([node, decorations], pos) => {
       if (pos < 0) {
         return;
       }
@@ -89,31 +89,62 @@ function createHighlightPlugin({
     state: {
       init(_, instance) {
         const cache = new DecorationCache();
-        const decorations = getDecorationSet(
+        const [decorations, promises] = calculateDecoration(
           instance.doc,
           parser,
           nodeTypes,
           languageExtractor,
           cache
         );
-        return { cache, decorations };
+        return { cache, decorations, promises };
       },
-      apply(tr, data) {
+      apply: (tr, data) => {
         const cache = data.cache.invalidate(tr);
-        if (!tr.docChanged) {
+        const refresh = !!tr.getMeta("prosemirror-highlight-refresh");
+        if (!tr.docChanged && !refresh) {
           const decorations2 = data.decorations.map(tr.mapping, tr.doc);
-          return { cache, decorations: decorations2 };
+          const promises2 = data.promises;
+          return { cache, decorations: decorations2, promises: promises2 };
         }
-        const decorations = getDecorationSet(
+        const [decorations, promises] = calculateDecoration(
           tr.doc,
           parser,
           nodeTypes,
           languageExtractor,
           cache
         );
-        return { cache, decorations };
+        return { cache, decorations, promises };
       }
     },
+    view: (view) => {
+      const promises = /* @__PURE__ */ new Set();
+      const refresh = () => {
+        if (promises.size > 0) {
+          return;
+        }
+        const tr = view.state.tr.setMeta("prosemirror-highlight-refresh", true);
+        view.dispatch(tr);
+      };
+      const check = () => {
+        var _a;
+        const state = key.getState(view.state);
+        for (const promise of (_a = state == null ? void 0 : state.promises) != null ? _a : []) {
+          promises.add(promise);
+          promise.then(() => {
+            promises.delete(promise);
+            refresh();
+          }).catch(() => {
+            promises.delete(promise);
+          });
+        }
+      };
+      check();
+      return {
+        update: () => {
+          check();
+        }
+      };
+    },
     props: {
       decorations(state) {
         var _a;
@@ -122,8 +153,9 @@ function createHighlightPlugin({
     }
   });
 }
-function getDecorationSet(doc, parser, nodeTypes, languageExtractor, cache) {
+function calculateDecoration(doc, parser, nodeTypes, languageExtractor, cache) {
   const result = [];
+  const promises = [];
   doc.descendants((node, pos) => {
     if (!node.type.isTextblock) {
       return true;
@@ -132,20 +164,26 @@ function getDecorationSet(doc, parser, nodeTypes, languageExtractor, cache) {
       const language = languageExtractor(node);
       const cached = cache.get(pos);
       if (cached) {
-        result.push(...cached.decorations);
+        const [_, decorations] = cached;
+        result.push(...decorations);
       } else {
         const decorations = parser({
           content: node.textContent,
           language: language || void 0,
           pos
         });
-        cache.set(pos, node, decorations);
-        result.push(...decorations);
+        if (decorations && Array.isArray(decorations)) {
+          cache.set(pos, node, decorations);
+          result.push(...decorations);
+        } else if (decorations instanceof Promise) {
+          cache.remove(pos);
+          promises.push(decorations);
+        }
       }
     }
     return false;
   });
-  return DecorationSet.create(doc, result);
+  return [DecorationSet.create(doc, result), promises];
 }
 export {
   DecorationCache,

package/dist/lowlight.d.ts

@@ -1,5 +1,5 @@
 import { Root } from 'hast';
-import { P as Parser } from './types-wUmJTPF3.js';
+import { P as Parser } from './types-hA0ujWQ1.js';
 import 'prosemirror-model';
 import 'prosemirror-view';
 
@@ -9,4 +9,4 @@ type Lowlight = {
 };
 declare function createParser(lowlight: Lowlight): Parser;
 
-export { type Lowlight, createParser };
+export { type Lowlight, Parser, createParser };

package/dist/refractor.d.ts

@@ -1,8 +1,8 @@
 import { Refractor } from 'refractor/lib/core';
-import { P as Parser } from './types-wUmJTPF3.js';
+import { P as Parser } from './types-hA0ujWQ1.js';
 import 'prosemirror-model';
 import 'prosemirror-view';
 
 declare function createParser(refractor: Refractor): Parser;
 
-export { createParser };
+export { Parser, createParser };

package/dist/shiki.d.ts

@@ -1,8 +1,8 @@
 import { Highlighter } from 'shiki';
-import { P as Parser } from './types-wUmJTPF3.js';
+import { P as Parser } from './types-hA0ujWQ1.js';
 import 'prosemirror-model';
 import 'prosemirror-view';
 
 declare function createParser(highlighter: Highlighter): Parser;
 
-export { createParser };
+export { Parser, createParser };

package/dist/shikiji.d.ts

@@ -1,8 +1,8 @@
 import { Highlighter } from 'shikiji';
-import { P as Parser } from './types-wUmJTPF3.js';
+import { P as Parser } from './types-hA0ujWQ1.js';
 import 'prosemirror-model';
 import 'prosemirror-view';
 
 declare function createParser(highlighter: Highlighter): Parser;
 
-export { createParser };
+export { Parser, createParser };

package/dist/shikiji.js

@@ -1,6 +1,5 @@
 // src/shikiji.ts
 import { Decoration } from "prosemirror-view";
-import "shikiji";
 function createParser(highlighter) {
   return function parser({ content, language, pos }) {
     const decorations = [];

package/dist/{types-wUmJTPF3.d.ts → types-hA0ujWQ1.d.ts}

@@ -1,6 +1,11 @@
 import { Node } from 'prosemirror-model';
 import { Decoration } from 'prosemirror-view';
 
+/**
+ * A function that parses the text content of a code block node and returns an
+ * array of decorations. If the underlying syntax highlighter is still loading,
+ * you can return a promise that will be resolved when the highlighter is ready.
+ */
 type Parser = (options: {
     /**
      * The text content of the code block node.
@@ -14,7 +19,10 @@ type Parser = (options: {
      * The language of the code block node.
      */
     language?: string;
-}) => Decoration[];
+}) => Decoration[] | Promise<void>;
+/**
+ * A function that extracts the language of a code block node.
+ */
 type LanguageExtractor = (node: Node) => string | undefined;
 
 export type { LanguageExtractor as L, Parser as P };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "prosemirror-highlight",
   "type": "module",
-  "version": "0.3.2",
-  "packageManager": "pnpm@8.12.0",
+  "version": "0.4.0",
+  "packageManager": "pnpm@8.13.1",
   "description": "A ProseMirror plugin to highlight code blocks",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "prosemirror-transform": "^1.8.0",
     "prosemirror-view": "^1.32.4",
     "refractor": "^4.8.1",
-    "shiki": "^0.14.6",
+    "shiki": "^0.14.0",
     "shikiji": "^0.8.0 || ^0.9.0"
   },
   "peerDependenciesMeta": {
@@ -100,8 +100,8 @@
     "@antfu/ni": "^0.21.12",
     "@ocavue/eslint-config": "^1.4.0",
     "@types/hast": "^3.0.3",
-    "@types/node": "^20.10.4",
-    "eslint": "^8.55.0",
+    "@types/node": "^20.10.6",
+    "eslint": "^8.56.0",
     "highlight.js": "^11.9.0",
     "jsdom": "^23.0.1",
     "lowlight": "^3.1.0",
@@ -111,14 +111,14 @@
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.8.0",
-    "prosemirror-view": "^1.32.6",
+    "prosemirror-view": "^1.32.7",
     "refractor": "^4.8.1",
-    "shiki": "^0.14.6",
-    "shikiji": "^0.8.0",
+    "shiki": "^0.14.7",
+    "shikiji": "^0.9.16",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vite": "^5.0.7",
-    "vitest": "^1.0.4"
+    "vite": "^5.0.10",
+    "vitest": "^1.1.1"
   },
   "renovate": {
     "dependencyDashboard": true,