Declare lowlight as a peerDependency (#2625)

Declare lowlight as a peerDependency to delegate
the control of which version of lowlight is used
to the client application

Co-authored-by: Enrique Alcantara <ealcantara@gitlab.com>

demos/package.json

@@ -15,7 +15,8 @@
     "shiki": "^0.10.0",
     "simplify-js": "^1.2.4",
     "y-webrtc": "^10.2.2",
-    "yjs": "^13.5.26"
+    "yjs": "^13.5.26",
+    "lowlight": "^1.20.0"
   },
   "devDependencies": {
     "@types/uuid": "^8.3.4",

docs/api/nodes/code-block-lowlight.md

@@ -7,17 +7,35 @@ icon: terminal-box-fill
 [![Version](https://img.shields.io/npm/v/@tiptap/extension-code-block-lowlight.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-code-block-lowlight)
 [![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-code-block-lowlight.svg)](https://npmcharts.com/compare/@tiptap/extension-code-block-lowlight?minimal=true)
 
-With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
+With the CodeBlockLowlight extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
+
+::: warning Syntax highlight dependency
+This extension relies on the [lowlight](https://github.com/wooorm/lowlight) library to apply syntax highlight to the code block’s content.
+:::
 
 Type <code>&grave;&grave;&grave;&nbsp;</code> (three backticks and a space) or <code>&Tilde;&Tilde;&Tilde;&nbsp;</code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>&grave;&grave;&grave;css&nbsp;</code>. That should add a `language-css` class to the `<code>`-tag.
 
 ## Installation
 ```bash
-npm install @tiptap/extension-code-block-lowlight
+npm install lowlight @tiptap/extension-code-block-lowlight
 ```
 
 ## Settings
 
+### lowlight
+
+You should provide the `lowlight` module to this extension. Decoupling the `lowlight`
+package from the extension allows the client application to control which
+version of lowlight it uses and which programming language packages it needs to load.
+
+```js
+import { lowlight } from 'lowlight/lib/core'
+
+CodeBlockLowlight.configure({
+  lowlight,
+})
+```
+
 ### HTMLAttributes
 Custom HTML attributes that should be added to the rendered HTML tag.
 

package-lock.json

@@ -50,6 +50,7 @@
         "@hocuspocus/provider": "^1.0.0-alpha.29",
         "d3": "^7.3.0",
         "fast-glob": "^3.2.11",
+        "lowlight": "^1.20.0",
         "remixicon": "^2.5.0",
         "shiki": "^0.10.0",
         "simplify-js": "^1.2.4",
@@ -17226,7 +17227,6 @@
       "dependencies": {
         "@tiptap/extension-code-block": "^2.0.0-beta.37",
         "@types/lowlight": "^0.0.3",
-        "lowlight": "^1.20.0",
         "prosemirror-model": "^1.16.1",
         "prosemirror-state": "^1.3.4",
         "prosemirror-view": "^1.23.6"
@@ -17236,7 +17236,8 @@
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "^2.0.0-beta.1"
+        "@tiptap/core": "^2.0.0-beta.1",
+        "lowlight": ">=1.20.0"
       }
     },
     "packages/extension-collaboration": {
@@ -21171,7 +21172,6 @@
       "requires": {
         "@tiptap/extension-code-block": "^2.0.0-beta.37",
         "@types/lowlight": "^0.0.3",
-        "lowlight": "^1.20.0",
         "prosemirror-model": "^1.16.1",
         "prosemirror-state": "^1.3.4",
         "prosemirror-view": "^1.23.6"
@@ -29842,6 +29842,7 @@
         "d3": "^7.3.0",
         "fast-glob": "^3.2.11",
         "iframe-resizer": "^4.3.2",
+        "lowlight": "^1.20.0",
         "postcss": "^8.4.6",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",

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

@@ -21,12 +21,12 @@
     "dist"
   ],
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1"
+    "@tiptap/core": "^2.0.0-beta.1",
+    "lowlight": ">=1.20.0"
   },
   "dependencies": {
     "@tiptap/extension-code-block": "^2.0.0-beta.37",
     "@types/lowlight": "^0.0.3",
-    "lowlight": "^1.20.0",
     "prosemirror-model": "^1.16.1",
     "prosemirror-state": "^1.3.4",
     "prosemirror-view": "^1.23.6"

packages/extension-code-block-lowlight/src/code-block-lowlight.ts

@@ -1,4 +1,3 @@
-import lowlight from 'lowlight/lib/core'
 import CodeBlock, { CodeBlockOptions } from '@tiptap/extension-code-block'
 import { LowlightPlugin } from './lowlight-plugin'
 
@@ -11,7 +10,7 @@ export const CodeBlockLowlight = CodeBlock.extend<CodeBlockLowlightOptions>({
   addOptions() {
     return {
       ...this.parent?.(),
-      lowlight,
+      lowlight: {},
       defaultLanguage: null,
     }
   },

packages/extension-code-block-lowlight/src/lowlight-plugin.ts

@@ -65,7 +65,15 @@ function getDecorations({
   return DecorationSet.create(doc, decorations)
 }
 
+function isFunction(param: Function) {
+  return typeof param === 'function'
+}
+
 export function LowlightPlugin({ name, lowlight, defaultLanguage }: { name: string, lowlight: any, defaultLanguage: string | null | undefined }) {
+  if (!['highlight', 'highlightAuto', 'listLanguages'].every(api => isFunction(lowlight[api]))) {
+    throw Error('You should provide an instance of lowlight to use the code-block-lowlight extension')
+  }
+
   return new Plugin({
     key: new PluginKey('lowlight'),
 

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

@@ -25,10 +25,10 @@ describe('code block highlight', () => {
 
   beforeEach(() => {
     Frontmatter = CodeBlockLowlight
-      .configure({ lowlight })
       .extend({
         name: 'frontmatter',
       })
+      .configure({ lowlight })
 
     editor = new Editor({
       element: createEditorEl(),
@@ -36,7 +36,7 @@ describe('code block highlight', () => {
         Document,
         Text,
         Paragraph,
-        CodeBlockLowlight,
+        CodeBlockLowlight.configure({ lowlight }),
         Frontmatter,
       ],
       content: {