fix(extension-code-block-lowlight): use lowlight v3 and update demos (#5374)

.changeset/bright-mayflies-care.md

@@ -0,0 +1,6 @@
+---
+"tiptap-demos": patch
+"@tiptap/extension-code-block-lowlight": patch
+---
+
+declare lowlight to be a peer dep of extension-code-block-lowlight, update usage to v3

demos/includeDependencies.txt

@@ -6,7 +6,6 @@ highlight.js/lib/languages/xml
 highlight.js/lib/core
 linkifyjs
 lowlight
-lowlight/lib/core
 prosemirror-commands
 prosemirror-dropcursor
 prosemirror-gapcursor
@@ -21,6 +20,7 @@ prosemirror-view
 react
 react-dom
 react-dom/client
+use-sync-external-store/shim/with-selector
 shiki
 simplify-js
 tippy.js

demos/package.json

@@ -14,9 +14,9 @@
     "@lexical/react": "^0.11.1",
     "d3": "^7.3.0",
     "fast-glob": "^3.2.11",
-    "highlight.js": "^11.6.0",
+    "highlight.js": "^11.10.0",
     "lexical": "^0.11.1",
-    "lowlight": "^2.7.0",
+    "lowlight": "^3.1.0",
     "remixicon": "^2.5.0",
     "shiki": "^1.10.3",
     "simplify-js": "^1.2.4",

demos/src/Examples/CodeBlockLanguage/React/index.jsx

@@ -1,7 +1,3 @@
-// load specific languages only
-// import { lowlight } from 'lowlight/lib/core'
-// import javascript from 'highlight.js/lib/languages/javascript'
-// lowlight.registerLanguage('javascript', javascript)
 import './styles.scss'
 
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
@@ -13,16 +9,21 @@ import css from 'highlight.js/lib/languages/css'
 import js from 'highlight.js/lib/languages/javascript'
 import ts from 'highlight.js/lib/languages/typescript'
 import html from 'highlight.js/lib/languages/xml'
-// load all highlight.js languages
+// load all languages with "all" or common languages with "common"
-import { lowlight } from 'lowlight'
+import { all, createLowlight } from 'lowlight'
 import React from 'react'
 
-import CodeBlockComponent from './CodeBlockComponent.jsx'
+// eslint-disable-next-line
+import CodeBlockComponent from './CodeBlockComponent'
 
-lowlight.registerLanguage('html', html)
+// create a lowlight instance
-lowlight.registerLanguage('css', css)
+const lowlight = createLowlight(all)
-lowlight.registerLanguage('js', js)
+
-lowlight.registerLanguage('ts', ts)
+// you can also register individual languages
+lowlight.register('html', html)
+lowlight.register('css', css)
+lowlight.register('js', js)
+lowlight.register('ts', ts)
 
 const MenuBar = ({ editor }) => {
   if (!editor) {
@@ -56,7 +57,7 @@ export default () => {
     ],
     content: `
         <p>
-          That’s a boring paragraph followed by a fenced code block:
+          That's a boring paragraph followed by a fenced code block:
         </p>
         <pre><code class="language-javascript">for (var i=1; i <= 20; i++)
 {

demos/src/Examples/CodeBlockLanguage/Vue/index.vue

@@ -21,20 +21,19 @@ import css from 'highlight.js/lib/languages/css'
 import js from 'highlight.js/lib/languages/javascript'
 import ts from 'highlight.js/lib/languages/typescript'
 import html from 'highlight.js/lib/languages/xml'
-// load all highlight.js languages
+// load all languages with "all" or common languages with "common"
-import { lowlight } from 'lowlight'
+import { all, createLowlight } from 'lowlight'
 
 import CodeBlockComponent from './CodeBlockComponent.vue'
 
-lowlight.registerLanguage('html', html)
+// create a lowlight instance
-lowlight.registerLanguage('css', css)
+const lowlight = createLowlight(all)
-lowlight.registerLanguage('js', js)
-lowlight.registerLanguage('ts', ts)
 
-// load specific languages only
+// you can also register languages
-// import { lowlight } from 'lowlight/lib/core'
+lowlight.register('html', html)
-// import javascript from 'highlight.js/lib/languages/javascript'
+lowlight.register('css', css)
-// lowlight.registerLanguage('javascript', javascript)
+lowlight.register('js', js)
+lowlight.register('ts', ts)
 
 export default {
   components: {
@@ -63,7 +62,7 @@ export default {
       ],
       content: `
         <p>
-          That’s a boring paragraph followed by a fenced code block:
+          That's a boring paragraph followed by a fenced code block:
         </p>
         <pre><code class="language-javascript">for (var i=1; i <= 20; i++)
 {

demos/src/Experiments/All/Vue/index.vue

@@ -108,7 +108,9 @@ import TextAlign from '@tiptap/extension-text-align'
 import TextStyle from '@tiptap/extension-text-style'
 import Underline from '@tiptap/extension-underline'
 import { Editor, EditorContent } from '@tiptap/vue-3'
-import { lowlight } from 'lowlight'
+import { all, createLowlight } from 'lowlight'
+
+const lowlight = createLowlight(all)
 
 export default {
   components: {
@@ -182,14 +184,14 @@ export default {
         </p>
         <ul>
           <li>
-            That’s a bullet list with one …
+            That's a bullet list with one …
           </li>
           <li>
             … or two list items.
           </li>
         </ul>
         <p>
-          Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+          Isn't that great? And all of that is editable. But wait, there's more. Let's try a code block:
         </p>
         <pre><code class="language-javascript">for (var i=1; i <= 20; i++)
 {
@@ -203,10 +205,10 @@ export default {
     console.log(i);
 }</code></pre>
         <p>
-          I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
+          I know, I know, this is impressive. It's only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
         </p>
         <blockquote>
-          Wow, that’s amazing. Good work, boy! 👏
+          Wow, that's amazing. Good work, boy! 👏
           <br />
           — Mom
         </blockquote>
@@ -214,9 +216,9 @@ export default {
         <p style="text-align: center">first paragraph</p>
         <p style="text-align: right">second paragraph</p>
         <h2>Color</h2>
-        <p><span style="color: #958DF1">Oh, for some reason that’s purple.</span></p>
+        <p><span style="color: #958DF1">Oh, for some reason that's purple.</span></p>
         <h2>Highlight</h2>
-        <p>This isn’t highlighted.</s></p>
+        <p>This isn't highlighted.</s></p>
         <p><mark>But that one is.</mark></p>
         <p><mark style="background-color: red;">And this is highlighted too, but in a different color.</mark></p>
         <p><mark data-color="#ffa8a8">And this one has a data attribute.</mark></p>

demos/src/Nodes/CodeBlockLowlight/React/index.jsx

@@ -1,7 +1,3 @@
-// load specific languages only
-// import { lowlight } from 'lowlight/lib/core'
-// import javascript from 'highlight.js/lib/languages/javascript'
-// lowlight.registerLanguage('javascript', javascript)
 import './styles.scss'
 
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
@@ -13,14 +9,29 @@ import css from 'highlight.js/lib/languages/css'
 import js from 'highlight.js/lib/languages/javascript'
 import ts from 'highlight.js/lib/languages/typescript'
 import html from 'highlight.js/lib/languages/xml'
-// load all highlight.js languages
+// load all languages with "all" or common languages with "common"
-import { lowlight } from 'lowlight'
+import { all, createLowlight } from 'lowlight'
 import React from 'react'
 
-lowlight.registerLanguage('html', html)
+// create a lowlight instance with all languages loaded
-lowlight.registerLanguage('css', css)
+const lowlight = createLowlight(all)
-lowlight.registerLanguage('js', js)
+
-lowlight.registerLanguage('ts', ts)
+// This is only an example, all supported languages are already loaded above
+// but you can also register only specific languages to reduce bundle-size
+lowlight.register('html', html)
+lowlight.register('css', css)
+lowlight.register('js', js)
+lowlight.register('ts', ts)
+
+/**
+ * Lowlight version 2.x had a different API
+ * import { lowlight } from 'lowlight'
+ *
+ * lowlight.registerLanguage('html', html)
+ * lowlight.registerLanguage('css', css)
+ * lowlight.registerLanguage('js', js)
+ * lowlight.registerLanguage('ts', ts)
+ */
 
 export default () => {
   const editor = useEditor({
@@ -34,7 +45,7 @@ export default () => {
     ],
     content: `
         <p>
-          That’s a boring paragraph followed by a fenced code block:
+          That's a boring paragraph followed by a fenced code block:
         </p>
         <pre><code class="language-javascript">for (var i=1; i <= 20; i++)
 {

demos/src/Nodes/CodeBlockLowlight/Vue/index.vue

@@ -25,13 +25,17 @@ import css from 'highlight.js/lib/languages/css'
 import js from 'highlight.js/lib/languages/javascript'
 import ts from 'highlight.js/lib/languages/typescript'
 import html from 'highlight.js/lib/languages/xml'
-// load all highlight.js languages
+// load all languages with "all" or common languages with "common"
-import { lowlight } from 'lowlight'
+import { all, createLowlight } from 'lowlight'
 
-lowlight.registerLanguage('html', html)
+// create a lowlight instance
-lowlight.registerLanguage('css', css)
+const lowlight = createLowlight(all)
-lowlight.registerLanguage('js', js)
+
-lowlight.registerLanguage('ts', ts)
+// you can also register languages
+lowlight.register('html', html)
+lowlight.register('css', css)
+lowlight.register('js', js)
+lowlight.register('ts', ts)
 
 export default {
   components: {
@@ -56,7 +60,7 @@ export default {
       ],
       content: `
         <p>
-          That’s a boring paragraph followed by a fenced code block:
+          That's a boring paragraph followed by a fenced code block:
         </p>
         <pre><code class="language-javascript">for (var i=1; i <= 20; i++)
 {

package-lock.json

@@ -60,9 +60,9 @@
         "@lexical/react": "^0.11.1",
         "d3": "^7.3.0",
         "fast-glob": "^3.2.11",
-        "highlight.js": "^11.6.0",
+        "highlight.js": "^11.10.0",
         "lexical": "^0.11.1",
-        "lowlight": "^2.7.0",
+        "lowlight": "^3.1.0",
         "remixicon": "^2.5.0",
         "shiki": "^1.10.3",
         "simplify-js": "^1.2.4",
@@ -116,14 +116,6 @@
         "yjs": "^13.6.8"
       }
     },
-    "demos/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "demos/node_modules/@vitejs/plugin-vue": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz",
@@ -345,6 +337,14 @@
         "node": ">=8"
       }
     },
+    "demos/node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "demos/node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -5066,14 +5066,6 @@
         "@types/hast": "^3.0.4"
       }
     },
-    "node_modules/@shikijs/core/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "node_modules/@sveltejs/vite-plugin-svelte": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz",
@@ -5424,11 +5416,11 @@
       "dev": true
     },
     "node_modules/@types/hast": {
-      "version": "2.3.10",
+      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
       "dependencies": {
-        "@types/unist": "^2"
+        "@types/unist": "*"
       }
     },
     "node_modules/@types/json-schema": {
@@ -8328,6 +8320,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-file": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
@@ -8346,6 +8346,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -9603,18 +9615,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/fault": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
-      "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
-      "dependencies": {
-        "format": "^0.2.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -9877,14 +9877,6 @@
         "node": ">= 0.12"
       }
     },
-    "node_modules/format": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
-      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -12398,27 +12390,19 @@
       }
     },
     "node_modules/lowlight": {
-      "version": "2.9.0",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.1.0.tgz",
-      "integrity": "sha512-OpcaUTCLmHuVuBcyNckKfH5B0oA4JUavb/M/8n9iAvanJYNQkrVm4pvyX0SUaqkBG4dnWHKt7p50B3ngAG2Rfw==",
+      "integrity": "sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==",
       "dependencies": {
-        "@types/hast": "^2.0.0",
+        "@types/hast": "^3.0.0",
-        "fault": "^2.0.0",
+        "devlop": "^1.0.0",
-        "highlight.js": "~11.8.0"
+        "highlight.js": "~11.9.0"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/lowlight/node_modules/highlight.js": {
-      "version": "11.8.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
-      "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -18049,7 +18033,8 @@
       "devDependencies": {
         "@tiptap/core": "^2.5.8",
         "@tiptap/extension-code-block": "^2.5.8",
-        "@tiptap/pm": "^2.5.8"
+        "@tiptap/pm": "^2.5.8",
+        "lowlight": "^2 || ^3"
       },
       "funding": {
         "type": "github",
@@ -18058,7 +18043,9 @@
       "peerDependencies": {
         "@tiptap/core": "^2.5.8",
         "@tiptap/extension-code-block": "^2.5.8",
-        "@tiptap/pm": "^2.5.8"
+        "@tiptap/pm": "^2.5.8",
+        "highlight.js": "^11",
+        "lowlight": "^2 || ^3"
       }
     },
     "packages/extension-collaboration": {

packages/extension-code-block-lowlight/package.json

@@ -31,12 +31,15 @@
   "devDependencies": {
     "@tiptap/core": "^2.5.8",
     "@tiptap/extension-code-block": "^2.5.8",
-    "@tiptap/pm": "^2.5.8"
+    "@tiptap/pm": "^2.5.8",
+    "lowlight": "^2 || ^3"
   },
   "peerDependencies": {
     "@tiptap/core": "^2.5.8",
     "@tiptap/extension-code-block": "^2.5.8",
-    "@tiptap/pm": "^2.5.8"
+    "@tiptap/pm": "^2.5.8",
+    "lowlight": "^2 || ^3",
+    "highlight.js": "^11"
   },
   "repository": {
     "type": "git",

tests/cypress/integration/extensions/codeBlockLowlight.spec.ts

@@ -5,7 +5,9 @@ import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { Document } from '@tiptap/extension-document'
 import { Paragraph } from '@tiptap/extension-paragraph'
 import { Text } from '@tiptap/extension-text'
-import { lowlight } from 'lowlight'
+import { all, createLowlight } from 'lowlight'
+
+const lowlight = createLowlight(all)
 
 describe('code block highlight', () => {
   let Frontmatter

tests/cypress/tsconfig.json

@@ -6,7 +6,7 @@
     "sourceMap": false,
     "types": ["cypress", "react", "react-dom"],
     "paths": {
-      "@tiptap/*": ["packages/*/dist", "packages/*/src"],
+      "@tiptap/*": ["packages/*/src", "packages/*/dist"],
       "@tiptap/pm/*": ["../../pm/*/dist"]
     },
     "typeRoots": ["../../node_modules/@types", "../../node_modules/"],