mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-27 14:59:27 +08:00
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>
This commit is contained in:
parent
fd593bb93e
commit
39f5e4c31e
@ -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",
|
||||
|
@ -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>``` </code> (three backticks and a space) or <code>∼∼∼ </code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>```css </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.
|
||||
|
||||
|
7
package-lock.json
generated
7
package-lock.json
generated
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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,
|
||||
}
|
||||
},
|
||||
|
@ -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'),
|
||||
|
||||
|
@ -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: {
|
||||
|
Loading…
Reference in New Issue
Block a user