Fix incorrect code block rendering in live preview

src/ui/render.ts

@@ -11,20 +11,45 @@ export async function renderCompactMarkdown(
     markdown: string,
     container: HTMLElement,
     sourcePath: string,
-    component: Component
+    component: Component,
+    isInlineFieldLivePreview: boolean = false
 ) {
-    let subcontainer = container.createSpan();
-    await MarkdownRenderer.render(app, markdown, subcontainer, sourcePath, component);
+    // check if the call is from the CM6 view plugin defined in src/ui/views/inline-field-live-preview.ts
+    if (isInlineFieldLivePreview) {
+        await renderCompactMarkdownForInlineFieldLivePreview(app, markdown, container, sourcePath, component);
+    } else {
+        let subcontainer = container.createSpan();
+        await MarkdownRenderer.render(app, markdown, subcontainer, sourcePath, component);
 
-    let paragraph = subcontainer.querySelector(":scope > p");
-    if (subcontainer.children.length == 1 && paragraph) {
-        while (paragraph.firstChild) {
-            subcontainer.appendChild(paragraph.firstChild);
+        let paragraph = subcontainer.querySelector(":scope > p");
+        if (subcontainer.children.length == 1 && paragraph) {
+            while (paragraph.firstChild) {
+                subcontainer.appendChild(paragraph.firstChild);
+            }
+            subcontainer.removeChild(paragraph);
         }
-        subcontainer.removeChild(paragraph);
     }
 }
 
+async function renderCompactMarkdownForInlineFieldLivePreview(
+    app: App,
+    markdown: string,
+    container: HTMLElement,
+    sourcePath: string,
+    component: Component
+) {
+    const tmpContainer = createSpan();
+    await MarkdownRenderer.render(app, markdown, tmpContainer, sourcePath, component);
+    let paragraph = tmpContainer.querySelector(":scope > p");
+    if (tmpContainer.childNodes.length == 1 && paragraph) {
+        container.appendChild(paragraph.childNodes.item(paragraph.childNodes.length - 1));
+    } else {
+        container.replaceChildren(...tmpContainer.childNodes);
+    }
+
+    tmpContainer.remove();
+}
+
 /** Render a pre block with an error in it; returns the element to allow for dynamic updating. */
 export function renderErrorPre(container: HTMLElement, error: string): HTMLElement {
     let pre = container.createEl("pre", { cls: ["dataview", "dataview-error"] });
@@ -62,15 +87,22 @@ export async function renderValue(
     }
 
     if (Values.isNull(field)) {
-        await renderCompactMarkdown(app, settings.renderNullAs, container, originFile, component);
+        await renderCompactMarkdown(
+            app,
+            settings.renderNullAs,
+            container,
+            originFile,
+            component,
+            isInlineFieldLivePreview
+        );
     } else if (Values.isDate(field)) {
         container.appendText(renderMinimalDate(field, settings, currentLocale()));
     } else if (Values.isDuration(field)) {
         container.appendText(renderMinimalDuration(field));
     } else if (Values.isString(field) || Values.isBoolean(field) || Values.isNumber(field)) {
-        await renderCompactMarkdown(app, "" + field, container, originFile, component);
+        await renderCompactMarkdown(app, "" + field, container, originFile, component, isInlineFieldLivePreview);
     } else if (Values.isLink(field)) {
-        await renderCompactMarkdown(app, field.markdown(), container, originFile, component);
+        await renderCompactMarkdown(app, field.markdown(), container, originFile, component, isInlineFieldLivePreview);
     } else if (Values.isHtml(field)) {
         container.appendChild(field);
     } else if (Values.isWidget(field)) {

src/ui/views/inline-field-live-preview.ts

@@ -9,7 +9,7 @@ import {
     ViewUpdate,
     WidgetType,
 } from "@codemirror/view";
-import { InlineField, extractInlineFields, parseInlineValue } from "data-import/inline-field";
+import { extractInlineFields, InlineField, parseInlineValue } from "data-import/inline-field";
 import { canonicalizeVarName } from "util/normalize";
 import { renderCompactMarkdown, renderValue } from "ui/render";
 import { DataviewSettings } from "settings";
@@ -58,7 +58,7 @@ function buildInlineFields(state: EditorState): RangeSet<InlineFieldValue> {
 export const inlineFieldsField = StateField.define<RangeSet<InlineFieldValue>>({
     create: buildInlineFields,
     update(oldFields, tr) {
-        return tr.docChanged ? buildInlineFields(tr.state) : oldFields;
+        return buildInlineFields(tr.state);
     },
 });
 
@@ -128,9 +128,7 @@ export const replaceInlineFieldsInLivePreview = (app: App, settings: DataviewSet
                 if (update.docChanged) {
                     this.decorations = this.decorations.map(update.changes);
                     this.updateDecorations(update.view);
-                } else if (update.selectionSet) {
-                    this.updateDecorations(update.view);
-                } else if (update.viewportChanged || layoutChanged) {
+                } else if (update.selectionSet || update.viewportChanged || layoutChanged) {
                     this.decorations = this.buildDecorations(update.view);
                 }
             }
@@ -235,12 +233,11 @@ class InlineFieldWidget extends WidgetType {
                 },
             });
 
-            renderCompactMarkdown(this.app, this.field.key, key, this.sourcePath, this.component);
+            renderCompactMarkdown(this.app, this.field.key, key, this.sourcePath, this.component, true);
 
             const value = renderContainer.createSpan({
                 cls: ["dataview", "inline-field-value"],
             });
-
             renderValue(
                 this.app,
                 parseInlineValue(this.field.value),
@@ -260,7 +257,6 @@ class InlineFieldWidget extends WidgetType {
             const value = renderContainer.createSpan({
                 cls: ["dataview", "inline-field-standalone-value"],
             });
-
             renderValue(
                 this.app,
                 parseInlineValue(this.field.value),