From daa5dc0fb1ec2db6889565fc9c091f3dbdbbda6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Mon, 12 Apr 2021 16:20:49 +0200 Subject: [PATCH] fix: fix lowlight decorations for vue 3 --- .../Examples/CodeBlockLanguage/index.vue | 18 ++++++++++-------- .../demos/Nodes/CodeBlockLowlight/index.vue | 10 ++++++---- .../src/code-block-lowlight.ts | 19 ++++++++++++++++--- .../src/lowlight-plugin.ts | 9 ++++----- 4 files changed, 36 insertions(+), 20 deletions(-) diff --git a/docs/src/demos/Examples/CodeBlockLanguage/index.vue b/docs/src/demos/Examples/CodeBlockLanguage/index.vue index a1e8fbfe..2179ef41 100644 --- a/docs/src/demos/Examples/CodeBlockLanguage/index.vue +++ b/docs/src/demos/Examples/CodeBlockLanguage/index.vue @@ -16,10 +16,10 @@ import Text from '@tiptap/extension-text' import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight' import CodeBlockComponent from './CodeBlockComponent' -// install all highlight.js languages -import 'lowlight' +// load all highlight.js languages +import lowlight from 'lowlight' -// or install specific languages only +// load specific languages only // import lowlight from 'lowlight/lib/core' // import javascript from 'highlight.js/lib/languages/javascript' // lowlight.registerLanguage('javascript', javascript) @@ -41,11 +41,13 @@ export default { Document, Paragraph, Text, - CodeBlockLowlight.extend({ - addNodeView() { - return VueNodeViewRenderer(CodeBlockComponent) - }, - }), + CodeBlockLowlight + .extend({ + addNodeView() { + return VueNodeViewRenderer(CodeBlockComponent) + }, + }) + .configure({ lowlight }), ], content: `

diff --git a/docs/src/demos/Nodes/CodeBlockLowlight/index.vue b/docs/src/demos/Nodes/CodeBlockLowlight/index.vue index 69976deb..603082d9 100644 --- a/docs/src/demos/Nodes/CodeBlockLowlight/index.vue +++ b/docs/src/demos/Nodes/CodeBlockLowlight/index.vue @@ -15,10 +15,10 @@ import Paragraph from '@tiptap/extension-paragraph' import Text from '@tiptap/extension-text' import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight' -// install all highlight.js languages -import 'lowlight' +// load all highlight.js languages +import lowlight from 'lowlight' -// or install specific languages only +// load specific languages only // import lowlight from 'lowlight/lib/core' // import javascript from 'highlight.js/lib/languages/javascript' // lowlight.registerLanguage('javascript', javascript) @@ -40,7 +40,9 @@ export default { Document, Paragraph, Text, - CodeBlockLowlight, + CodeBlockLowlight.configure({ + lowlight, + }), ], content: `

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 2deb1d70..115be13c 100644 --- a/packages/extension-code-block-lowlight/src/code-block-lowlight.ts +++ b/packages/extension-code-block-lowlight/src/code-block-lowlight.ts @@ -1,11 +1,24 @@ -import CodeBlock from '@tiptap/extension-code-block' +import lowlight from 'lowlight/lib/core' +import CodeBlock, { CodeBlockOptions } from '@tiptap/extension-code-block' import { LowlightPlugin } from './lowlight-plugin' -export const CodeBlockLowlight = CodeBlock.extend({ +export interface CodeBlockLowlightOptions extends CodeBlockOptions { + lowlight: any, +} + +export const CodeBlockLowlight = CodeBlock.extend({ + defaultOptions: { + ...CodeBlock.config.defaultOptions, + lowlight, + }, + addProseMirrorPlugins() { return [ ...this.parentConfig.addProseMirrorPlugins?.() || [], - LowlightPlugin({ name: 'codeBlock' }), + LowlightPlugin({ + name: 'codeBlock', + lowlight: this.options.lowlight, + }), ] }, }) diff --git a/packages/extension-code-block-lowlight/src/lowlight-plugin.ts b/packages/extension-code-block-lowlight/src/lowlight-plugin.ts index 7b099358..28a80d5e 100644 --- a/packages/extension-code-block-lowlight/src/lowlight-plugin.ts +++ b/packages/extension-code-block-lowlight/src/lowlight-plugin.ts @@ -2,7 +2,6 @@ import { Plugin, PluginKey } from 'prosemirror-state' import { Decoration, DecorationSet } from 'prosemirror-view' import { Node as ProsemirrorNode } from 'prosemirror-model' import { findChildren } from '@tiptap/core' -import lowlight from 'lowlight/lib/core' function parseNodes(nodes: any[], className: string[] = []): { text: string, classes: string[] }[] { return nodes @@ -26,7 +25,7 @@ function parseNodes(nodes: any[], className: string[] = []): { text: string, cla .flat() } -function getDecorations({ doc, name }: { doc: ProsemirrorNode, name: string}) { +function getDecorations({ doc, name, lowlight }: { doc: ProsemirrorNode, name: string, lowlight: any }) { const decorations: Decoration[] = [] findChildren(doc, node => node.type.name === name) @@ -58,12 +57,12 @@ function getDecorations({ doc, name }: { doc: ProsemirrorNode, name: string}) { return DecorationSet.create(doc, decorations) } -export function LowlightPlugin({ name }: { name: string }) { +export function LowlightPlugin({ name, lowlight }: { name: string, lowlight: any }) { return new Plugin({ key: new PluginKey('lowlight'), state: { - init: (_, { doc }) => getDecorations({ doc, name }), + init: (_, { doc }) => getDecorations({ doc, name, lowlight }), apply: (transaction, decorationSet, oldState, newState) => { const oldNodeName = oldState.selection.$head.parent.type.name const newNodeName = newState.selection.$head.parent.type.name @@ -95,7 +94,7 @@ export function LowlightPlugin({ name }: { name: string }) { }) ) ) { - return getDecorations({ doc: transaction.doc, name }) + return getDecorations({ doc: transaction.doc, name, lowlight }) } return decorationSet.map(transaction.mapping, transaction.doc)