diff --git a/demos/package.json b/demos/package.json index 35f8b538f..95f8062bb 100644 --- a/demos/package.json +++ b/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", diff --git a/docs/api/nodes/code-block-lowlight.md b/docs/api/nodes/code-block-lowlight.md index c3be51449..d707a5c5f 100644 --- a/docs/api/nodes/code-block-lowlight.md +++ b/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 `
` and `` HTML tags.
+With the CodeBlockLowlight extension you can add fenced code blocks to your documents. It’ll wrap the code in `` and `` 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 ```
(three backticks and a space) or ∼∼∼
(three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing ```css
. That should add a `language-css` class to the ``-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.
diff --git a/package-lock.json b/package-lock.json
index 49cf49126..929d9f6d7 100644
--- a/package-lock.json
+++ b/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",
diff --git a/packages/extension-code-block-lowlight/package.json b/packages/extension-code-block-lowlight/package.json
index b3c2b2eaf..e1b6d21b2 100644
--- a/packages/extension-code-block-lowlight/package.json
+++ b/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"
diff --git a/packages/extension-code-block-lowlight/src/code-block-lowlight.ts b/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
index 458f502cb..c2d5c9079 100644
--- a/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
+++ b/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({
addOptions() {
return {
...this.parent?.(),
- lowlight,
+ lowlight: {},
defaultLanguage: null,
}
},
diff --git a/packages/extension-code-block-lowlight/src/lowlight-plugin.ts b/packages/extension-code-block-lowlight/src/lowlight-plugin.ts
index adfde9a35..333d87fce 100644
--- a/packages/extension-code-block-lowlight/src/lowlight-plugin.ts
+++ b/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'),
diff --git a/tests/cypress/integration/extensions/codeBlockLowlight.spec.ts b/tests/cypress/integration/extensions/codeBlockLowlight.spec.ts
index 5380f8ba9..af78e74f7 100644
--- a/tests/cypress/integration/extensions/codeBlockLowlight.spec.ts
+++ b/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: {