fix(CodeBlock): apply syntax highlighting on initial render (#902)

Author: makhnatkin

demo/stories/markdown/markup.ts

@@ -252,7 +252,7 @@ Sample text here...
 
 Syntax highlighting
 
-\`\`\` js
+\`\`\`javascript
 var foo = function (bar) {
     return bar++;
 };

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<CodeBlockHighlightOptions> = (bui
 
     builder.addPlugin(() => {
         let modulesLoaded = false;
+        let view: EditorView | null = null;
 
         const selectItems: LangSelectItem[] = [];
         const mapping: Record<string, string> = {};
@@ -90,6 +91,8 @@ export const CodeBlockHighlight: ExtensionAuto<CodeBlockHighlightOptions> = (bui
                                     }
                                 }
                             }
+
+                            view?.dispatch(view.state.tr.setMeta(key, {modulesLoaded}));
                         }
                     });
                     return getDecorations(state.doc);
@@ -99,6 +102,10 @@ export const CodeBlockHighlight: ExtensionAuto<CodeBlockHighlightOptions> = (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<CodeBlockHighlightOptions> = (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);