diff --git a/demos/package.json b/demos/package.json index abaa5a1a782..b44c9f6de19 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/packages/extension-code-block-lowlight/package.json b/packages/extension-code-block-lowlight/package.json index b3c2b2eafc5..a67970af0c7 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 - ^2.5.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 458f502cba2..c2d5c90797c 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 adfde9a358e..4f2469dd5a1 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 (!isFunction(lowlight.highlight) || !isFunction(lowlight.highlightAuto) || !isFunction(lowlight.listLanguages)) { + 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 5380f8ba98b..af78e74f710 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: {