Skip to content

Commit

Permalink
switching the implementation of renderCompactMarkdown depending on …
Browse files Browse the repository at this point in the history 
…whether the call is from `inline-field-live-preview.ts` or not (#2134)

* Revert 7a2b6a1 but only for src/ui/render.ts

* Fix the incorrect cursor overlapping check

* Squashed commit of the following:

commit f4e0bdd
Author: RyotaUshio <[email protected]>
Date:   Sat Oct 14 06:37:10 2023 +0900

    Fix typo

commit 43f3be4
Author: RyotaUshio <[email protected]>
Date:   Sat Oct 14 06:29:01 2023 +0900

    Fix formatting

commit 74e45e4
Author: RyotaUshio <[email protected]>
Date:   Sat Oct 14 06:28:32 2023 +0900

    Fix the starting position of an inline field could not obtained correctly after a document change

commit 7570941
Author: RyotaUshio <[email protected]>
Date:   Sat Oct 14 06:07:03 2023 +0900

    Fix formatting

commit ba7a0a5
Author: RyotaUshio <[email protected]>
Date:   Sat Oct 14 06:04:27 2023 +0900

    Fix the previous commit works only for the first line

commit 08bcd32
Author: RyotaUshio <[email protected]>
Date:   Sat Oct 14 05:54:44 2023 +0900

    Resolve #2101: add a click event handler to inline field widgets in live preview

* Squashed commit of the following:

commit 21591ff
Author: RyotaUshio <[email protected]>
Date:   Sat Oct 14 07:41:40 2023 +0900

    Fix #2107: Prevent inline fields inside a code block from being rendered in live preview

* Squashed commit of the following:

commit f787431
Author: RyotaUshio <[email protected]>
Date:   Sun Oct 29 00:41:52 2023 +0900

    fix formatting

commit 7205a70
Author: RyotaUshio <[email protected]>
Date:   Sun Oct 29 00:28:24 2023 +0900

    separate the inline fields rendering option into one for reading view & one for live preview

* fix the auto-scrolling/flickering issue of inline fields (#2128) and dv.paragraph not working for lists (#2099)

* fix formatting

* Fix #2132 by switching  implementation depending on whether the call is from inline-field-live-preview.ts or not

* switch implementation of `renderCompactMarkdown based on a new boolean parameter, not `component instanceof` test

* remove unnecessary debugging codes & cleanup

---------

Co-authored-by: RyotaUshio <[email protected]>
  • Loading branch information
@RyotaUshio
RyotaUshio and RyotaUshio authored Nov 1, 2023
1 parent ecee8c0 commit ee019cc
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 41 deletions.
130 changes: 95 additions & 35 deletions src/ui/render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,30 @@ import { Literal, Values, Widgets } from "data-model/value";

/** Render simple fields compactly, removing wrapping content like paragraph and span. */
export async function renderCompactMarkdown(
markdown: string,
container: HTMLElement,
sourcePath: string,
component: Component,
isInlineFieldLivePreview: boolean = false
) {
// check if the call is from the CM6 view plugin defined in src/ui/views/inline-field-live-preview.ts
if (isInlineFieldLivePreview) {
await renderCompactMarkdownForInlineFieldLivePreview(markdown, container, sourcePath, component);
} else {
let subcontainer = container.createSpan();
await MarkdownRenderer.renderMarkdown(markdown, subcontainer, sourcePath, component);

let paragraph = subcontainer.querySelector(":scope > p");
if (subcontainer.children.length == 1 && paragraph) {
while (paragraph.firstChild) {
subcontainer.appendChild(paragraph.firstChild);
}
subcontainer.removeChild(paragraph);
}
}
}

async function renderCompactMarkdownForInlineFieldLivePreview(
markdown: string,
container: HTMLElement,
sourcePath: string,
Expand All @@ -19,31 +43,6 @@ export async function renderCompactMarkdown(
if (tmpContainer.childNodes.length == 1 && paragraph) {
container.replaceChildren(...paragraph.childNodes);
} else {
/**
* In most cases, the condition above will be true.
* However, it is not always true, for example:
* ```dataviewjs
* dv.paragraph(`
* - list item 1
* - list item 2
*
* 1. list item 3
* 2. list item 4
* `)
* ```
* MarkdownRenderer.renderMarkdown will render it as:
* <span>
* <ul>
* <li>list item 1</li>
* <li>list item 2</li>
* </ul>
* <ol>
* <li>list item 3</li>
* <li>list item 4</li>
* </ol>
* </span>
* Notice that there is no <p> tag.
*/
container.replaceChildren(...tmpContainer.childNodes);
}

Expand Down Expand Up @@ -76,7 +75,8 @@ export async function renderValue(
settings: QuerySettings,
expandList: boolean = false,
context: ValueRenderContext = "root",
depth: number = 0
depth: number = 0,
isInlineFieldLivePreview: boolean = false
) {
// Prevent infinite recursion.
if (depth > settings.maxRecursiveRenderDepth) {
Expand All @@ -85,22 +85,42 @@ export async function renderValue(
}

if (Values.isNull(field)) {
await renderCompactMarkdown(settings.renderNullAs, container, originFile, component);
await renderCompactMarkdown(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("" + field, container, originFile, component);
await renderCompactMarkdown("" + field, container, originFile, component, isInlineFieldLivePreview);
} else if (Values.isLink(field)) {
await renderCompactMarkdown(field.markdown(), container, originFile, component);
await renderCompactMarkdown(field.markdown(), container, originFile, component, isInlineFieldLivePreview);
} else if (Values.isHtml(field)) {
container.appendChild(field);
} else if (Values.isWidget(field)) {
if (Widgets.isListPair(field)) {
await renderValue(field.key, container, originFile, component, settings, expandList, context, depth);
await renderValue(
field.key,
container,
originFile,
component,
settings,
expandList,
context,
depth,
isInlineFieldLivePreview
);
container.appendText(": ");
await renderValue(field.value, container, originFile, component, settings, expandList, context, depth);
await renderValue(
field.value,
container,
originFile,
component,
settings,
expandList,
context,
depth,
isInlineFieldLivePreview
);
} else if (Widgets.isExternalLink(field)) {
let elem = document.createElement("a");
elem.textContent = field.display ?? field.url;
Expand All @@ -125,7 +145,17 @@ export async function renderValue(
});
for (let child of field) {
let li = list.createEl("li", { cls: "dataview-result-list-li" });
await renderValue(child, li, originFile, component, settings, expandList, "list", depth + 1);
await renderValue(
child,
li,
originFile,
component,
settings,
expandList,
"list",
depth + 1,
isInlineFieldLivePreview
);
}
} else {
if (field.length == 0) {
Expand All @@ -139,7 +169,17 @@ export async function renderValue(
if (first) first = false;
else span.appendText(", ");

await renderValue(val, span, originFile, component, settings, expandList, "list", depth + 1);
await renderValue(
val,
span,
originFile,
component,
settings,
expandList,
"list",
depth + 1,
isInlineFieldLivePreview
);
}
}
} else if (Values.isObject(field)) {
Expand All @@ -154,7 +194,17 @@ export async function renderValue(
for (let [key, value] of Object.entries(field)) {
let li = list.createEl("li", { cls: ["dataview", "dataview-li", "dataview-result-object-li"] });
li.appendText(key + ": ");
await renderValue(value, li, originFile, component, settings, expandList, "list", depth + 1);
await renderValue(
value,
li,
originFile,
component,
settings,
expandList,
"list",
depth + 1,
isInlineFieldLivePreview
);
}
} else {
if (Object.keys(field).length == 0) {
Expand All @@ -169,7 +219,17 @@ export async function renderValue(
else span.appendText(", ");

span.appendText(key + ": ");
await renderValue(value, span, originFile, component, settings, expandList, "list", depth + 1);
await renderValue(
value,
span,
originFile,
component,
settings,
expandList,
"list",
depth + 1,
isInlineFieldLivePreview
);
}
}
} else {
Expand Down
18 changes: 12 additions & 6 deletions src/ui/views/inline-field-live-preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ class InlineFieldWidget extends WidgetType {
public app: App,
public field: InlineField,
public sourcePath: string,
public parentComponent: Component,
public component: Component,
public settings: DataviewSettings,
public view: EditorView
) {
Expand Down Expand Up @@ -235,7 +235,7 @@ class InlineFieldWidget extends WidgetType {
},
});

renderCompactMarkdown(this.field.key, key, this.sourcePath, this.parentComponent);
renderCompactMarkdown(this.field.key, key, this.sourcePath, this.component, true);

const value = renderContainer.createSpan({
cls: ["dataview", "inline-field-value"],
Expand All @@ -244,9 +244,12 @@ class InlineFieldWidget extends WidgetType {
parseInlineValue(this.field.value),
value,
this.sourcePath,
this.parentComponent,
this.component,
this.settings,
false
false,
undefined,
undefined,
true
);

this.addKeyClickHandler(key, renderContainer);
Expand All @@ -259,9 +262,12 @@ class InlineFieldWidget extends WidgetType {
parseInlineValue(this.field.value),
value,
this.sourcePath,
this.parentComponent,
this.component,
this.settings,
false
false,
undefined,
undefined,
true
);
this.addValueClickHandler(value, renderContainer);
}
Expand Down

0 comments on commit ee019cc

Please sign in to comment.