prosemirror-highlight 0.5.0 → 0.7.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/prosemirror-highlight?color=a1b858&label=)](https://www.npmjs.com/package/prosemirror-highlight)
 
-Highlight your code blocks in [ProseMirror], with any syntax highlighter you like!
+Highlight your [ProseMirror] code blocks with any syntax highlighter you like!
 
 ## Usage
 
@@ -12,12 +12,12 @@ Highlight your code blocks in [ProseMirror], with any syntax highlighter you lik
 <summary>Static loading of a fixed set of languages</summary>
 
 ```ts
-import { getHighlighter } from 'shiki'
+import { getSingletonHighlighter } from 'shiki'
 
 import { createHighlightPlugin } from 'prosemirror-highlight'
 import { createParser } from 'prosemirror-highlight/shiki'
 
-const highlighter = await getHighlighter({
+const highlighter = await getSingletonHighlighter({
   themes: ['github-light'],
   langs: ['javascript', 'typescript', 'python'],
 })
@@ -31,15 +31,17 @@ export const shikiPlugin = createHighlightPlugin({ parser })
 <summary>Dynamic loading of arbitrary languages</summary>
 
 ```ts
-import { getHighlighter, type Highlighter, type BuiltinLanguage } from 'shiki'
+import {
+  getSingletonHighlighter,
+  type BuiltinLanguage,
+  type Highlighter,
+} from 'shiki'
 
 import { createHighlightPlugin } from 'prosemirror-highlight'
 import { createParser, type Parser } from 'prosemirror-highlight/shiki'
 
-let highlighterPromise: Promise<void> | undefined
 let highlighter: Highlighter | undefined
 let parser: Parser | undefined
-const loadedLanguages = new Set<string>()
 
 /**
  * Lazy load highlighter and highlighter languages.
@@ -49,25 +51,18 @@ const loadedLanguages = new Set<string>()
  * Otherwise, it returns an array of decorations.
  */
 const lazyParser: Parser = (options) => {
-  if (!highlighterPromise) {
-    highlighterPromise = getHighlighter({
+  if (!highlighter) {
+    return getSingletonHighlighter({
       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 BuiltinLanguage).then(() => {
-      loadedLanguages.add(language)
-    })
+  const language = options.language as BuiltinLanguage
+  if (language && !highlighter.getLoadedLanguages().includes(language)) {
+    return highlighter.loadLanguage(language)
   }
 
   if (!parser) {
@@ -82,82 +77,6 @@ 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'
-
-import { createHighlightPlugin } from 'prosemirror-highlight'
-import { createParser } from 'prosemirror-highlight/shikiji'
-
-const highlighter = await getHighlighter({
-  themes: ['vitesse-light'],
-  langs: ['javascript', 'typescript', 'python'],
-})
-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>
@@ -195,6 +114,35 @@ export const refractorPlugin = createHighlightPlugin({ parser })
 
 </details>
 
+### With [Sugar high]
+
+<details>
+<summary>Highlight with CSS</summary>
+
+```ts
+import { createHighlightPlugin } from 'prosemirror-highlight'
+import { createParser } from 'prosemirror-highlight/sugar-high'
+
+const parser = createParser()
+export const sugarHighPlugin = createHighlightPlugin({ parser })
+```
+
+```css
+:root {
+  --sh-class: #2d5e9d;
+  --sh-identifier: #354150;
+  --sh-sign: #8996a3;
+  --sh-property: #0550ae;
+  --sh-entity: #249a97;
+  --sh-jsxliterals: #6266d1;
+  --sh-string: #00a99a;
+  --sh-keyword: #f47067;
+  --sh-comment: #a19595;
+}
+```
+
+</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)
@@ -212,6 +160,6 @@ MIT
 [lowlight]: https://github.com/wooorm/lowlight
 [Highlight.js]: https://github.com/highlightjs/highlight.js
 [Shiki]: https://github.com/shikijs/shiki
-[Shikiji]: https://github.com/antfu/shikiji
 [refractor]: https://github.com/wooorm/refractor
 [Prism]: https://github.com/PrismJS/prism
+[Sugar high]: https://github.com/huozhi/sugar-high

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

package/dist/lowlight.d.ts

@@ -1,5 +1,5 @@
 import { Root } from 'hast';
-import { P as Parser } from './types-hA0ujWQ1.js';
+import { P as Parser } from './types-D9kxOI8-.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-hA0ujWQ1.js';
+import { P as Parser } from './types-D9kxOI8-.js';
 import 'prosemirror-model';
 import 'prosemirror-view';
 

package/dist/shiki.d.ts

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

package/dist/sugar-high.d.ts

@@ -0,0 +1,7 @@
+import { P as Parser } from './types-D9kxOI8-.js';
+import 'prosemirror-model';
+import 'prosemirror-view';
+
+declare function createParser(): Parser;
+
+export { Parser, createParser };

package/dist/sugar-high.js

@@ -0,0 +1,36 @@
+// src/sugar-high.ts
+import { Decoration } from "prosemirror-view";
+import { tokenize } from "sugar-high";
+var types = [
+  "identifier",
+  "keyword",
+  "string",
+  "class",
+  "property",
+  "entity",
+  "jsxliterals",
+  "sign",
+  "comment",
+  "break",
+  "space"
+];
+function createParser() {
+  return function parser({ content, pos }) {
+    const decorations = [];
+    const tokens = tokenize(content);
+    let from = pos + 1;
+    for (const [type, content2] of tokens) {
+      const to = from + content2.length;
+      const decoration = Decoration.inline(from, to, {
+        class: `sh__token--${types[type]}`,
+        style: `color: var(--sh-${types[type]})`
+      });
+      decorations.push(decoration);
+      from = to;
+    }
+    return decorations;
+  };
+}
+export {
+  createParser
+};

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "prosemirror-highlight",
   "type": "module",
-  "version": "0.5.0",
-  "packageManager": "pnpm@8.13.1",
+  "version": "0.7.0",
   "description": "A ProseMirror plugin to highlight code blocks",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -18,7 +17,6 @@
     "editor",
     "highlight.js",
     "shiki",
-    "shikiji",
     "refractor",
     "lowlight",
     "prism"
@@ -44,9 +42,9 @@
       "types": "./dist/shiki.d.ts",
       "default": "./dist/shiki.js"
     },
-    "./shikiji": {
-      "types": "./dist/shikiji.d.ts",
-      "default": "./dist/shikiji.js"
+    "./sugar-high": {
+      "types": "./dist/sugar-high.d.ts",
+      "default": "./dist/sugar-high.js"
     }
   },
   "files": [
@@ -61,8 +59,8 @@
     "prosemirror-transform": "^1.8.0",
     "prosemirror-view": "^1.32.4",
     "refractor": "^4.8.1",
-    "shiki": "^1.0.0",
-    "shikiji": "^0.8.0 || ^0.9.0 || ^0.10.0"
+    "shiki": "^1.9.0",
+    "sugar-high": "^0.6.1"
   },
   "peerDependenciesMeta": {
     "@types/hast": {
@@ -92,33 +90,33 @@
     "shiki": {
       "optional": true
     },
-    "shikiji": {
+    "sugar-high": {
       "optional": true
     }
   },
   "devDependencies": {
     "@antfu/ni": "^0.21.12",
-    "@ocavue/eslint-config": "^1.4.0",
-    "@types/hast": "^3.0.3",
-    "@types/node": "^20.10.6",
-    "eslint": "^8.56.0",
+    "@ocavue/eslint-config": "^1.6.0",
+    "@types/hast": "^3.0.4",
+    "@types/node": "^20.14.7",
+    "eslint": "^8.57.0",
     "highlight.js": "^11.9.0",
-    "jsdom": "^23.0.1",
+    "jsdom": "^24.1.0",
     "lowlight": "^3.1.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.3.2",
     "prosemirror-example-setup": "^1.2.2",
-    "prosemirror-model": "^1.19.4",
+    "prosemirror-model": "^1.21.1",
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-state": "^1.4.3",
-    "prosemirror-transform": "^1.8.0",
-    "prosemirror-view": "^1.32.7",
+    "prosemirror-transform": "^1.9.0",
+    "prosemirror-view": "^1.33.8",
     "refractor": "^4.8.1",
-    "shiki": "^1.0.0",
-    "shikiji": "^0.10.2",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vitest": "^1.1.1"
+    "shiki": "^1.9.0",
+    "sugar-high": "^0.7.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
   },
   "renovate": {
     "dependencyDashboard": true,
@@ -129,6 +127,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsup",
+    "build:playground": "vite build",
     "lint": "eslint .",
     "fix": "eslint --fix . && prettier --write .",
     "start": "esno src/index.ts",

package/dist/shikiji.d.ts

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

package/dist/shikiji.js

@@ -1,26 +0,0 @@
-// src/shikiji.ts
-import { Decoration } from "prosemirror-view";
-function createParser(highlighter) {
-  return function parser({ content, language, pos }) {
-    const decorations = [];
-    const tokens = highlighter.codeToThemedTokens(content, {
-      lang: language
-    });
-    let from = pos + 1;
-    for (const line of tokens) {
-      for (const token of line) {
-        const to = from + token.content.length;
-        const decoration = Decoration.inline(from, to, {
-          style: `color: ${token.color}`
-        });
-        decorations.push(decoration);
-        from = to;
-      }
-      from += 1;
-    }
-    return decorations;
-  };
-}
-export {
-  createParser
-};

package/src/index.ts

@@ -1,3 +0,0 @@
-export { DecorationCache } from './cache'
-export { createHighlightPlugin, type HighlightPluginState } from './plugin'
-export type { LanguageExtractor, Parser } from './types'