bauer/obsidian-dataview-autocompletion
1
0
Fork 0
mirror of https://github.com/dnlbauer/obsidian-dataview-autocompletion.git synced 2026-09-10 22:25:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: render suggestions similar to dataview render

Browse Source
This commit is contained in:
daniel
2024-12-23 10:02:02 +01:00
parent dac07242cd
commit 5bfb3116bc
2 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/DataviewSuggester.ts
View File

@@ -70,52 +70,54 @@ export class DataviewSuggester extends EditorSuggest<String> {
return [];
}
renderSuggestion(value: string, el: HTMLElement): void {
// Split the value into parts based on the <mark> tags and their content
const parts = value.split(/(<mark>.*?<\/mark>)/g);
renderMarkdownSuggestion(value: string, el: HTMLElement): void {
// render markdown preview of inline dataview metadata field
let suggestionText = this.context!.editor.getLine(this.context!.start.line).slice(this.context!.start.ch-1, this.context!.start.ch)!
suggestionText += value.replace(/<mark>(.*?)<\/mark>/g, "$1");
suggestionText += suggestionText.startsWith("(") ? ")" : "]"
const container = el.createDiv("dataview-suggestion-content");
const titleDiv = container.createDiv("dataview-suggestion-title");
parts.forEach((textPart) => {
if (textPart.startsWith("<mark>") && textPart.endsWith("</mark>")) {
const text = textPart.slice(6, -7); // Remove <mark> and </mark>
titleDiv.createEl("span", { text, cls: "dataview-suggestion-highlight" });
} else {
titleDiv.appendText(textPart);
}
});
if (value.indexOf("[[") !== -1 || value.indexOf("]]") !== -1 || value.indexOf("](") !== -1) {
const noteDiv = container.createDiv("dataview-suggestion-note");
let suggestionText = "";
parts.forEach((textPart) => {
if (textPart.startsWith("<mark>") && textPart.endsWith("</mark>")) {
const text = textPart.slice(6, -7); // Remove <mark> and </mark>
suggestionText += text;
} else {
suggestionText += textPart;
}
});
MarkdownRenderer.render(
this.app,
htmlToMarkdown(suggestionText),
noteDiv,
el,
this.context!.file.path,
this.app.workspace.getActiveViewOfType(MarkdownView)!,
);
}
renderSourceSuggestion(value: string, el: HTMLElement): void {
// render source text with highlights
// replaces <mark>...</mark> with <span>...</span>
const parts = value.split(/(<mark>.*?<\/mark>)/g);
parts.forEach((textPart) => {
if (textPart.startsWith("<mark>") && textPart.endsWith("</mark>")) {
const text = textPart.slice(6, -7); // Remove <mark> and </mark>
el.createEl("span", { text, cls: "dataview-suggestion-highlight" });
} else {
el.appendText(textPart);
}
});
}
renderSuggestion(value: string, el: HTMLElement): void {
const container = el.createDiv("dataview-suggestion-content");
const titleDiv = container.createDiv("dataview-suggestion-title");
const noteDiv = container.createDiv("dataview-suggestion-note");
this.renderMarkdownSuggestion(value, titleDiv);
this.renderSourceSuggestion(value, noteDiv);
}
selectSuggestion(value: string, evt: MouseEvent | KeyboardEvent): void {
const { editor, start, end } = this.context!;
// remove marks from selection
value = value.replace(/<mark>(.*?)<\/mark>/g, "$1");
const { editor, start, end } = this.context!;
editor.replaceRange(value, start, end);
const newCursorPos = {
line: end.line + 1,
ch: 0,
line: end.line,
ch: start.ch + value.length + 1,
};
editor.setCursor(newCursorPos);
}

3
styles.css
View File

@@ -10,7 +10,7 @@ div.dataview-suggestion-title {
overflow-wrap: break-word;
}
div.dataview-suggestion-note p {
div.dataview-suggestion-title p {
margin-block: 0px;
}
@@ -20,6 +20,7 @@ div.dataview-suggestion-note{
width: 100%;
flex-basis: 100%;
overflow-wrap: break-word;
padding-left: 8px;
}
span.dataview-suggestion-highlight {