prosemirror-highlight 0.11.0 → 0.12.0

package/README.md

@@ -77,6 +77,25 @@ export const shikiLazyPlugin = createHighlightPlugin({ parser: lazyParser })
 
 </details>
 
+<details>
+<summary>Set code block background color based on theme</summary>
+
+When using Shiki, two CSS variables are set automatically to the `<pre>` element:
+
+- `--prosekit-highlight`: The text color of the code block
+- `--prosekit-highlight-bg`: The background color of the code block
+
+You can use these variables to set the background color and text color of the code block.
+
+```css
+.ProseMirror pre {
+  color: var(--prosekit-highlight, inherit);
+  background-color: var(--prosekit-highlight-bg, inherit);
+}
+```
+
+</details>
+
 ### With [lowlight] (based on [Highlight.js])
 
 <details>
@@ -103,7 +122,7 @@ export const lowlightPlugin = createHighlightPlugin({ parser })
 <summary>Static loading of all languages</summary>
 
 ```ts
-import { refractor } from 'refractor'
+import { refractor } from 'refractor/lib/all'
 
 import { createHighlightPlugin } from 'prosemirror-highlight'
 import { createParser } from 'prosemirror-highlight/refractor'

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 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-D9kxOI8-.js';
+import { P as Parser, L as LanguageExtractor } from './types-BIUZQh-P.js';
 
 /**
  * Represents a cache of doc positions to the node and decorations at that position

package/dist/index.js

@@ -79,7 +79,7 @@ function createHighlightPlugin({
   nodeTypes = ["code_block", "codeBlock"],
   languageExtractor = (node) => node.attrs.language
 }) {
-  const key = new PluginKey();
+  const key = new PluginKey("prosemirror-highlight");
   return new Plugin({
     key,
     state: {
@@ -166,7 +166,8 @@ function calculateDecoration(doc, parser, nodeTypes, languageExtractor, cache) {
         const decorations = parser({
           content: node.textContent,
           language: language || void 0,
-          pos
+          pos,
+          size: node.nodeSize
         });
         if (decorations && Array.isArray(decorations)) {
           cache.set(pos, node, decorations);

package/dist/lowlight.d.ts

@@ -1,5 +1,5 @@
 import { Root } from 'hast';
-import { P as Parser } from './types-D9kxOI8-.js';
+import { P as Parser } from './types-BIUZQh-P.js';
 import 'prosemirror-model';
 import 'prosemirror-view';
 

package/dist/refractor.d.ts

@@ -1,5 +1,5 @@
 import { Refractor } from 'refractor/lib/core';
-import { P as Parser } from './types-D9kxOI8-.js';
+import { P as Parser } from './types-BIUZQh-P.js';
 import 'prosemirror-model';
 import 'prosemirror-view';
 

package/dist/shiki.d.ts

@@ -1,5 +1,5 @@
 import { Highlighter, CodeToTokensOptions, BundledLanguage, BundledTheme } from 'shiki';
-import { P as Parser } from './types-D9kxOI8-.js';
+import { P as Parser } from './types-BIUZQh-P.js';
 import 'prosemirror-model';
 import 'prosemirror-view';
 

package/dist/shiki.js

@@ -2,16 +2,21 @@
 import { Decoration } from "prosemirror-view";
 import "shiki";
 function createParser(highlighter, options) {
-  return function parser({ content, language, pos }) {
+  return function parser({ content, language, pos, size }) {
     var _a;
     const decorations = [];
-    const { tokens } = highlighter.codeToTokens(content, {
+    const { tokens, fg, bg, rootStyle } = highlighter.codeToTokens(content, {
       lang: language,
       // Use provided options for themes or just use first loaded theme
       ...options != null ? options : {
         theme: highlighter.getLoadedThemes()[0]
       }
     });
+    const style = rootStyle || (fg && bg ? `--prosekit-highlight:${fg};--prosekit-highlight-bg:${bg}` : "");
+    if (style) {
+      const decoration = Decoration.node(pos, pos + size, { style });
+      decorations.push(decoration);
+    }
     let from = pos + 1;
     for (const line of tokens) {
       for (const token of line) {

package/dist/sugar-high.d.ts

@@ -1,4 +1,4 @@
-import { P as Parser } from './types-D9kxOI8-.js';
+import { P as Parser } from './types-BIUZQh-P.js';
 import 'prosemirror-model';
 import 'prosemirror-view';
 

package/dist/{types-D9kxOI8-.d.ts → types-BIUZQh-P.d.ts}

@@ -3,8 +3,9 @@ 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.
+ * array of ProseMirror 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: {
     /**
@@ -19,6 +20,10 @@ type Parser = (options: {
      * The language of the code block node.
      */
     language?: string;
+    /**
+     * The size of the code block node.
+     */
+    size: number;
 }) => Decoration[] | Promise<void>;
 /**
  * A function that extracts the language of a code block node.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prosemirror-highlight",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A ProseMirror plugin to highlight code blocks",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -59,8 +59,8 @@
     "prosemirror-transform": "^1.8.0",
     "prosemirror-view": "^1.32.4",
     "refractor": "^4.8.1",
-    "shiki": "^1.9.0",
-    "sugar-high": "^0.6.1"
+    "shiki": "^1.9.0 || ^2.0.0",
+    "sugar-high": "^0.6.1 || ^0.7.0 || ^0.8.0"
   },
   "peerDependenciesMeta": {
     "@types/hast": {
@@ -95,27 +95,27 @@
     }
   },
   "devDependencies": {
-    "@antfu/ni": "^0.23.1",
-    "@ocavue/eslint-config": "^2.11.1",
+    "@antfu/ni": "^0.23.2",
+    "@ocavue/eslint-config": "^2.12.2",
     "@types/hast": "^3.0.4",
     "@types/node": "^20.17.5",
-    "eslint": "^9.14.0",
-    "highlight.js": "^11.10.0",
+    "eslint": "^9.17.0",
+    "highlight.js": "^11.11.1",
     "jsdom": "^25.0.1",
-    "lowlight": "^3.2.0",
-    "prettier": "^3.4.1",
+    "lowlight": "^3.3.0",
+    "prettier": "^3.4.2",
     "prosemirror-example-setup": "^1.2.3",
-    "prosemirror-model": "^1.24.0",
+    "prosemirror-model": "^1.24.1",
     "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.10.2",
-    "prosemirror-view": "^1.37.0",
+    "prosemirror-view": "^1.37.2",
     "refractor": "^4.8.1",
-    "shiki": "^1.24.0",
-    "sugar-high": "^0.7.5",
+    "shiki": "^2.1.0",
+    "sugar-high": "^0.8.2",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.11",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.11",
     "vitest": "^2.1.8"
   },
   "renovate": {