feat: support sugar-high (#29)

ocavue · May 21, 2024 · 6d367fe · 6d367fe
1 parent 2bb14b3
commit 6d367fe
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -195,6 +195,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)
@@ -215,3 +244,4 @@ MIT
 [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
diff --git a/package.json b/package.json
@@ -42,6 +42,9 @@
     },
     "./shikiji": {
       "default": "./src/shikiji.ts"
+    },
+    "./sugar-high": {
+      "default": "./src/sugar-high.ts"
     }
   },
   "files": [
@@ -67,7 +70,8 @@
     "prosemirror-view": "^1.32.4",
     "refractor": "^4.8.1",
     "shiki": "^1.0.0",
-    "shikiji": "^0.8.0 || ^0.9.0 || ^0.10.0"
+    "shikiji": "^0.8.0 || ^0.9.0 || ^0.10.0",
+    "sugar-high": "^0.6.1"
   },
   "peerDependenciesMeta": {
     "@types/hast": {
@@ -99,6 +103,9 @@
     },
     "shikiji": {
       "optional": true
+    },
+    "sugar-high": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -120,6 +127,7 @@
     "refractor": "^4.8.1",
     "shiki": "^1.0.0",
     "shikiji": "^0.10.2",
+    "sugar-high": "^0.6.1",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
@@ -149,6 +157,10 @@
       "./shikiji": {
         "types": "./dist/shikiji.d.ts",
         "default": "./dist/shikiji.js"
+      },
+      "./sugar-high": {
+        "types": "./dist/sugar-high.d.ts",
+        "default": "./dist/sugar-high.js"
       }
     },
     "typesVersions": {

diff --git a/playground/index.html b/playground/index.html
@@ -17,19 +17,26 @@
         border-radius: 6px;
       }
 
-      .editor {
-        margin: 8px;
+      body {
+        column-count: auto;
+        column-gap: 20px;
+        column-width: 500px;
       }
 
-      body {
-        display: grid;
-        grid-template-columns: repeat(1, minmax(0, 1fr));
+      body > * {
+        break-inside: avoid;
       }
 
-      @media (min-width: 1200px) {
-        body {
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
+      :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;
       }
     </style>
   </head>

diff --git a/playground/main.ts b/playground/main.ts
@@ -11,6 +11,8 @@ import { shikijiPlugin } from './shikiji'
 import { shikijiLazyPlugin } from './shikiji-lazy'
 import shikijiLazyCode from './shikiji-lazy?raw'
 import shikijiCode from './shikiji?raw'
+import { sugarHighPlugin } from './sugar-high'
+import sugarHighCode from './sugar-high?raw'
 
 function getOrCreateElement(id: string): HTMLElement {
   let element = document.getElementById(id)
@@ -53,6 +55,13 @@ function main() {
     code: refractorCode,
   })
 
+  setupView({
+    mount: getOrCreateElement('editor-sugar-high'),
+    plugin: sugarHighPlugin,
+    title: 'Sugar High Example',
+    code: sugarHighCode,
+  })
+
   setupView({
     mount: getOrCreateElement('editor-shiki-lazy'),
     plugin: shikiLazyPlugin,

diff --git a/playground/sugar-high.ts b/playground/sugar-high.ts
@@ -0,0 +1,5 @@
+import { createHighlightPlugin } from 'prosemirror-highlight'
+import { createParser } from 'prosemirror-highlight/sugar-high'
+
+const parser = createParser()
+export const sugarHighPlugin = createHighlightPlugin({ parser })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/sugar-high.ts b/src/sugar-high.ts
@@ -0,0 +1,48 @@
+import { Decoration } from 'prosemirror-view'
+import { tokenize } from 'sugar-high'
+
+import type { Parser } from './types'
+
+export type { Parser }
+
+/**
+ * Copied from https://github.com/huozhi/sugar-high/blob/v0.6.1/lib/index.js#L80-L107
+ */
+const types = [
+  'identifier',
+  'keyword',
+  'string',
+  'class',
+  'property',
+  'entity',
+  'jsxliterals',
+  'sign',
+  'comment',
+  'break',
+  'space',
+] as const
+
+export function createParser(): Parser {
+  return function parser({ content, pos }) {
+    const decorations: Decoration[] = []
+
+    const tokens = tokenize(content)
+
+    let from = pos + 1
+
+    for (const [type, content] of tokens) {
+      const to = from + content.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
+  }
+}
diff --git a/test/plugin.spec.ts b/test/plugin.spec.ts
@@ -149,4 +149,100 @@ describe('createHighlightPlugin', () => {
     `,
     )
   })
+
+  it('can highlight code blocks with sugar-high', async () => {
+    const { createParser } = await import('../src/sugar-high')
+
+    const parser = createParser()
+    const plugin = createHighlightPlugin({ parser })
+
+    const state = EditorState.create({ doc, plugins: [plugin] })
+    const view = new EditorView(document.createElement('div'), { state })
+
+    const html = await formatHtml(view.dom.outerHTML)
+    expect(html).toMatchInlineSnapshot(
+      `
+      "<div contenteditable="true" translate="no" class="ProseMirror">
+        <pre data-language="typescript">
+          <code>
+            <span class="sh__token--identifier" style="">
+              console
+            </span>
+            <span class="sh__token--sign" style="">
+              .
+            </span>
+            <span class="sh__token--property" style="">
+              log
+            </span>
+            <span class="sh__token--sign" style="">
+              (
+            </span>
+            <span class="sh__token--class" style="">
+              123
+            </span>
+            <span class="sh__token--sign" style="">
+              +
+            </span>
+            <span class="sh__token--string" style="">
+              "
+            </span>
+            <span class="sh__token--string" style="">
+              456
+            </span>
+            <span class="sh__token--string" style="">
+              "
+            </span>
+            <span class="sh__token--sign" style="">
+              )
+            </span>
+            <span class="sh__token--sign" style="">
+              ;
+            </span>
+          </code>
+        </pre>
+        <pre data-language="python">
+          <code>
+            <span class="sh__token--identifier" style="">
+              print
+            </span>
+            <span class="sh__token--sign" style="">
+              (
+            </span>
+            <span class="sh__token--string" style="">
+              "
+            </span>
+            <span class="sh__token--string" style="">
+              1+1
+            </span>
+            <span class="sh__token--string" style="">
+              "
+            </span>
+            <span class="sh__token--sign" style="">
+              ,
+            </span>
+            <span class="sh__token--string" style="">
+              "
+            </span>
+            <span class="sh__token--string" style="">
+              =
+            </span>
+            <span class="sh__token--string" style="">
+              "
+            </span>
+            <span class="sh__token--sign" style="">
+              ,
+            </span>
+            <span class="sh__token--class" style="">
+              2
+            </span>
+            <span class="sh__token--sign" style="">
+              )
+            </span>
+          </code>
+        </pre>
+      </div>;
+      "
+    `,
+    )
+  })
 })
diff --git a/tsup.config.ts b/tsup.config.ts
@@ -7,6 +7,7 @@ export default defineConfig({
     'src/refractor.ts',
     'src/shiki.ts',
     'src/shikiji.ts',
+    'src/sugar-high.ts',
   ],
   format: ['esm'],
   clean: true,