diff --git a/demo/stories/markdown/markup.ts b/demo/stories/markdown/markup.ts index 15266b38e..0dce8ea48 100644 --- a/demo/stories/markdown/markup.ts +++ b/demo/stories/markdown/markup.ts @@ -252,7 +252,7 @@ Sample text here... Syntax highlighting -\`\`\` js +\`\`\`javascript var foo = function (bar) { return bar++; }; diff --git a/src/extensions/markdown/CodeBlock/CodeBlockHighlight/CodeBlockHighlight.ts b/src/extensions/markdown/CodeBlock/CodeBlockHighlight/CodeBlockHighlight.ts index f298830c6..80c44b0e1 100644 --- a/src/extensions/markdown/CodeBlock/CodeBlockHighlight/CodeBlockHighlight.ts +++ b/src/extensions/markdown/CodeBlock/CodeBlockHighlight/CodeBlockHighlight.ts @@ -7,7 +7,7 @@ import {Plugin, PluginKey} from 'prosemirror-state'; import type {Step} from 'prosemirror-transform'; // @ts-ignore // TODO: fix cjs build import {findChildrenByType} from 'prosemirror-utils'; -import {Decoration, DecorationSet} from 'prosemirror-view'; +import {Decoration, DecorationSet, type EditorView} from 'prosemirror-view'; import type {ExtensionAuto} from '../../../../core'; import {capitalize} from '../../../../lodash'; @@ -64,6 +64,7 @@ export const CodeBlockHighlight: ExtensionAuto = (bui builder.addPlugin(() => { let modulesLoaded = false; + let view: EditorView | null = null; const selectItems: LangSelectItem[] = []; const mapping: Record = {}; @@ -90,6 +91,8 @@ export const CodeBlockHighlight: ExtensionAuto = (bui } } } + + view?.dispatch(view.state.tr.setMeta(key, {modulesLoaded})); } }); return getDecorations(state.doc); @@ -99,6 +102,10 @@ export const CodeBlockHighlight: ExtensionAuto = (bui return DecorationSet.empty; } + if (tr.getMeta(key)?.modulesLoaded) { + return getDecorations(tr.doc); + } + if (tr.docChanged) { const oldNodeName = oldState.selection.$head.parent.type.name; const newNodeName = newState.selection.$head.parent.type.name; @@ -143,13 +150,15 @@ export const CodeBlockHighlight: ExtensionAuto = (bui return decos.map(tr.mapping, tr.doc); }, }, - view: (view) => - codeLangSelectTooltipViewCreator( + view: (v) => { + view = v; + return codeLangSelectTooltipViewCreator( view, selectItems, mapping, Boolean(opts.lineNumbers?.enabled), - ), + ); + }, props: { decorations: (state) => { return key.getState(state); diff --git a/tests/visual-tests/__snapshots__/MarkdownExtensions.visual.test.tsx-snapshots/Extensions-Markdown-Code-dark-chromium-linux.png b/tests/visual-tests/__snapshots__/MarkdownExtensions.visual.test.tsx-snapshots/Extensions-Markdown-Code-dark-chromium-linux.png index 16e123ad8..06466242d 100644 Binary files a/tests/visual-tests/__snapshots__/MarkdownExtensions.visual.test.tsx-snapshots/Extensions-Markdown-Code-dark-chromium-linux.png and b/tests/visual-tests/__snapshots__/MarkdownExtensions.visual.test.tsx-snapshots/Extensions-Markdown-Code-dark-chromium-linux.png differ diff --git a/tests/visual-tests/__snapshots__/MarkdownExtensions.visual.test.tsx-snapshots/Extensions-Markdown-Code-light-chromium-linux.png b/tests/visual-tests/__snapshots__/MarkdownExtensions.visual.test.tsx-snapshots/Extensions-Markdown-Code-light-chromium-linux.png index 2f13b5a7d..7d308c3cc 100644 Binary files a/tests/visual-tests/__snapshots__/MarkdownExtensions.visual.test.tsx-snapshots/Extensions-Markdown-Code-light-chromium-linux.png and b/tests/visual-tests/__snapshots__/MarkdownExtensions.visual.test.tsx-snapshots/Extensions-Markdown-Code-light-chromium-linux.png differ