mirror of https://github.com/TriliumNext/Notes
Merge branch 'develop' into ai-llm-integration
perf3ct
commit
b00c20c357
@ -1,13 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
|
|
||||||
cd src/public
|
|
||||||
echo Summary
|
|
||||||
cloc HEAD \
|
|
||||||
--git --md \
|
|
||||||
--include-lang=javascript,typescript
|
|
||||||
|
|
||||||
echo By file
|
|
||||||
cloc HEAD \
|
|
||||||
--git --md \
|
|
||||||
--include-lang=javascript,typescript \
|
|
||||||
--by-file | grep \.js\|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,24 @@
|
|||||||
|
import { t } from "../../services/i18n.js";
|
||||||
|
import NoteContextAwareWidget from "../note_context_aware_widget.js";
|
||||||
|
|
||||||
|
const TPL = `
|
||||||
|
<button type="button"
|
||||||
|
class="export-svg-button"
|
||||||
|
title="${t("png_export_button.button_title")}">
|
||||||
|
<span class="bx bxs-file-png"></span>
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default class PngExportButton extends NoteContextAwareWidget {
|
||||||
|
isEnabled() {
|
||||||
|
return super.isEnabled() && ["mermaid", "mindMap"].includes(this.note?.type ?? "") && this.note?.isContentAvailable() && this.noteContext?.viewScope?.viewMode === "default";
|
||||||
|
}
|
||||||
|
|
||||||
|
doRender() {
|
||||||
|
super.doRender();
|
||||||
|
|
||||||
|
this.$widget = $(TPL);
|
||||||
|
this.$widget.on("click", () => this.triggerEvent("exportPng", { ntxId: this.ntxId }));
|
||||||
|
this.contentSized();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
import type { EventData } from "../../components/app_context.js";
|
||||||
|
import { t } from "../../services/i18n.js";
|
||||||
|
import options from "../../services/options.js";
|
||||||
|
import NoteContextAwareWidget from "../note_context_aware_widget.js";
|
||||||
|
|
||||||
|
const TPL = `
|
||||||
|
<button type="button"
|
||||||
|
class="switch-layout-button">
|
||||||
|
<span class="bx"></span>
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default class SwitchSplitOrientationButton extends NoteContextAwareWidget {
|
||||||
|
isEnabled() {
|
||||||
|
return super.isEnabled()
|
||||||
|
&& ["mermaid"].includes(this.note?.type ?? "")
|
||||||
|
&& this.note?.isContentAvailable()
|
||||||
|
&& !this.note?.hasLabel("readOnly")
|
||||||
|
&& this.noteContext?.viewScope?.viewMode === "default";
|
||||||
|
}
|
||||||
|
|
||||||
|
doRender(): void {
|
||||||
|
super.doRender();
|
||||||
|
this.$widget = $(TPL);
|
||||||
|
this.$widget.on("click", () => {
|
||||||
|
const currentOrientation = options.get("splitEditorOrientation");
|
||||||
|
options.save("splitEditorOrientation", toggleOrientation(currentOrientation));
|
||||||
|
});
|
||||||
|
this.#adjustIcon();
|
||||||
|
this.contentSized();
|
||||||
|
}
|
||||||
|
|
||||||
|
#adjustIcon() {
|
||||||
|
const currentOrientation = options.get("splitEditorOrientation");
|
||||||
|
const upcomingOrientation = toggleOrientation(currentOrientation);
|
||||||
|
const $icon = this.$widget.find("span.bx");
|
||||||
|
$icon
|
||||||
|
.toggleClass("bxs-dock-bottom", upcomingOrientation === "vertical")
|
||||||
|
.toggleClass("bxs-dock-left", upcomingOrientation === "horizontal");
|
||||||
|
|
||||||
|
if (upcomingOrientation === "vertical") {
|
||||||
|
this.$widget.attr("title", t("switch_layout_button.title_vertical"));
|
||||||
|
} else {
|
||||||
|
this.$widget.attr("title", t("switch_layout_button.title_horizontal"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
|
||||||
|
if (loadResults.isOptionReloaded("splitEditorOrientation")) {
|
||||||
|
this.#adjustIcon();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleOrientation(orientation: string) {
|
||||||
|
if (orientation === "horizontal") {
|
||||||
|
return "vertical";
|
||||||
|
} else {
|
||||||
|
return "horizontal";
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import type FNote from "../../entities/fnote.js";
|
||||||
|
import attributes from "../../services/attributes.js";
|
||||||
|
import { t } from "../../services/i18n.js";
|
||||||
|
import OnClickButtonWidget from "../buttons/onclick_button.js";
|
||||||
|
|
||||||
|
export default class ToggleReadOnlyButton extends OnClickButtonWidget {
|
||||||
|
|
||||||
|
private isReadOnly?: boolean;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this
|
||||||
|
.title(() => this.isReadOnly ? t("toggle_read_only_button.unlock-editing") : t("toggle_read_only_button.lock-editing"))
|
||||||
|
.titlePlacement("bottom")
|
||||||
|
.icon(() => this.isReadOnly ? "bx-lock-open-alt" : "bx-lock-alt")
|
||||||
|
.onClick(() => this.#toggleReadOnly());
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggleReadOnly() {
|
||||||
|
if (!this.noteId || !this.note) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isReadOnly) {
|
||||||
|
attributes.removeOwnedLabelByName(this.note, "readOnly");
|
||||||
|
} else {
|
||||||
|
attributes.setLabel(this.noteId, "readOnly");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async refreshWithNote(note: FNote | null | undefined) {
|
||||||
|
const isReadOnly = !!note?.hasLabel("readOnly");
|
||||||
|
|
||||||
|
if (isReadOnly !== this.isReadOnly) {
|
||||||
|
this.isReadOnly = isReadOnly;
|
||||||
|
this.refreshIcon();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
isEnabled() {
|
||||||
|
return super.isEnabled()
|
||||||
|
&& this.note?.type === "mermaid"
|
||||||
|
&& this.note?.isContentAvailable()
|
||||||
|
&& this.noteContext?.viewScope?.viewMode === "default";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,261 +0,0 @@
|
|||||||
import { t } from "../services/i18n.js";
|
|
||||||
import libraryLoader from "../services/library_loader.js";
|
|
||||||
import NoteContextAwareWidget from "./note_context_aware_widget.js";
|
|
||||||
import server from "../services/server.js";
|
|
||||||
import utils from "../services/utils.js";
|
|
||||||
import { loadElkIfNeeded, postprocessMermaidSvg } from "../services/mermaid.js";
|
|
||||||
import type FNote from "../entities/fnote.js";
|
|
||||||
import type { EventData } from "../components/app_context.js";
|
|
||||||
import ScrollingContainer from "./containers/scrolling_container.js";
|
|
||||||
import Split from "split.js";
|
|
||||||
import { DEFAULT_GUTTER_SIZE } from "../services/resizer.js";
|
|
||||||
|
|
||||||
const TPL = `<div class="mermaid-widget">
|
|
||||||
<style>
|
|
||||||
.mermaid-widget {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.mobile .mermaid-widget {
|
|
||||||
min-height: 200px;
|
|
||||||
flex-grow: 2;
|
|
||||||
flex-basis: 0;
|
|
||||||
border-bottom: 1px solid var(--main-border-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.desktop .mermaid-widget + .gutter {
|
|
||||||
border-bottom: 1px solid var(--main-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mermaid-render {
|
|
||||||
overflow: auto;
|
|
||||||
height: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="mermaid-error alert alert-warning">
|
|
||||||
<p><strong>${t("mermaid.diagram_error")}</strong></p>
|
|
||||||
<p class="error-content"></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mermaid-render"></div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
let idCounter = 1;
|
|
||||||
|
|
||||||
export default class MermaidWidget extends NoteContextAwareWidget {
|
|
||||||
|
|
||||||
private $display!: JQuery<HTMLElement>;
|
|
||||||
private $errorContainer!: JQuery<HTMLElement>;
|
|
||||||
private $errorMessage!: JQuery<HTMLElement>;
|
|
||||||
private dirtyAttachment?: boolean;
|
|
||||||
private zoomHandler?: () => void;
|
|
||||||
private zoomInstance?: SvgPanZoom.Instance;
|
|
||||||
private splitInstance?: Split.Instance;
|
|
||||||
private lastNote?: FNote;
|
|
||||||
|
|
||||||
isEnabled() {
|
|
||||||
return super.isEnabled() && this.note?.type === "mermaid" && this.note.isContentAvailable() && this.noteContext?.viewScope?.viewMode === "default";
|
|
||||||
}
|
|
||||||
|
|
||||||
doRender() {
|
|
||||||
this.$widget = $(TPL);
|
|
||||||
this.contentSized();
|
|
||||||
this.$display = this.$widget.find(".mermaid-render");
|
|
||||||
this.$errorContainer = this.$widget.find(".mermaid-error");
|
|
||||||
this.$errorMessage = this.$errorContainer.find(".error-content");
|
|
||||||
}
|
|
||||||
|
|
||||||
async refreshWithNote(note: FNote) {
|
|
||||||
const isSameNote = (this.lastNote === note);
|
|
||||||
|
|
||||||
this.cleanup();
|
|
||||||
this.$errorContainer.hide();
|
|
||||||
|
|
||||||
await libraryLoader.requireLibrary(libraryLoader.MERMAID);
|
|
||||||
|
|
||||||
mermaid.mermaidAPI.initialize({
|
|
||||||
startOnLoad: false,
|
|
||||||
...(getMermaidConfig() as any)
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!isSameNote) {
|
|
||||||
this.$display.empty();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$errorContainer.hide();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const svg = await this.renderSvg();
|
|
||||||
|
|
||||||
if (this.dirtyAttachment) {
|
|
||||||
const payload = {
|
|
||||||
role: "image",
|
|
||||||
title: "mermaid-export.svg",
|
|
||||||
mime: "image/svg+xml",
|
|
||||||
content: svg,
|
|
||||||
position: 0
|
|
||||||
};
|
|
||||||
|
|
||||||
server.post(`notes/${this.noteId}/attachments?matchBy=title`, payload).then(() => {
|
|
||||||
this.dirtyAttachment = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$display.html(svg);
|
|
||||||
this.$display.attr("id", `mermaid-render-${idCounter}`);
|
|
||||||
|
|
||||||
// Fit the image to bounds.
|
|
||||||
const $svg = this.$display.find("svg");
|
|
||||||
$svg.attr("width", "100%").attr("height", "100%");
|
|
||||||
|
|
||||||
// Enable pan to zoom.
|
|
||||||
this.#setupPanZoom($svg[0], isSameNote);
|
|
||||||
} catch (e: any) {
|
|
||||||
console.warn(e);
|
|
||||||
this.#cleanUpZoom();
|
|
||||||
this.$display.empty();
|
|
||||||
this.$errorMessage.text(e.message);
|
|
||||||
this.$errorContainer.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.#setupResizer();
|
|
||||||
this.lastNote = note;
|
|
||||||
}
|
|
||||||
|
|
||||||
cleanup() {
|
|
||||||
super.cleanup();
|
|
||||||
if (this.zoomHandler) {
|
|
||||||
$(window).off("resize", this.zoomHandler);
|
|
||||||
this.zoomHandler = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#cleanUpZoom() {
|
|
||||||
if (this.zoomInstance) {
|
|
||||||
this.zoomInstance.destroy();
|
|
||||||
this.zoomInstance = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleInt(show: boolean | null | undefined): void {
|
|
||||||
super.toggleInt(show);
|
|
||||||
|
|
||||||
if (!show) {
|
|
||||||
this.cleanup();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async renderSvg() {
|
|
||||||
idCounter++;
|
|
||||||
|
|
||||||
if (!this.note) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
const blob = await this.note.getBlob();
|
|
||||||
const content = blob?.content || "";
|
|
||||||
|
|
||||||
await loadElkIfNeeded(content);
|
|
||||||
const { svg } = await mermaid.mermaidAPI.render(`mermaid-graph-${idCounter}`, content);
|
|
||||||
return postprocessMermaidSvg(svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
async #setupPanZoom(svgEl: SVGElement, isSameNote: boolean) {
|
|
||||||
// Clean up
|
|
||||||
let pan = null;
|
|
||||||
let zoom = null;
|
|
||||||
if (this.zoomInstance) {
|
|
||||||
// Store pan and zoom for same note, when the user is editing the note.
|
|
||||||
if (isSameNote && this.zoomInstance) {
|
|
||||||
pan = this.zoomInstance.getPan();
|
|
||||||
zoom = this.zoomInstance.getZoom();
|
|
||||||
}
|
|
||||||
this.#cleanUpZoom();
|
|
||||||
}
|
|
||||||
|
|
||||||
const svgPanZoom = (await import("svg-pan-zoom")).default;
|
|
||||||
const zoomInstance = svgPanZoom(svgEl, {
|
|
||||||
zoomEnabled: true,
|
|
||||||
controlIconsEnabled: true
|
|
||||||
});
|
|
||||||
|
|
||||||
if (pan && zoom) {
|
|
||||||
// Restore the pan and zoom.
|
|
||||||
zoomInstance.zoom(zoom);
|
|
||||||
zoomInstance.pan(pan);
|
|
||||||
} else {
|
|
||||||
// New instance, reposition properly.
|
|
||||||
zoomInstance.center();
|
|
||||||
zoomInstance.fit();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.zoomHandler = () => {
|
|
||||||
zoomInstance.resize();
|
|
||||||
zoomInstance.fit();
|
|
||||||
zoomInstance.center();
|
|
||||||
};
|
|
||||||
this.zoomInstance = zoomInstance;
|
|
||||||
$(window).on("resize", this.zoomHandler);
|
|
||||||
}
|
|
||||||
|
|
||||||
#setupResizer() {
|
|
||||||
if (!utils.isDesktop()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const selfEl = this.$widget;
|
|
||||||
const scrollingContainer = this.parent?.children.find((ch) => ch instanceof ScrollingContainer)?.$widget;
|
|
||||||
|
|
||||||
if (!selfEl.length || !scrollingContainer?.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.splitInstance) {
|
|
||||||
this.splitInstance = Split([ selfEl[0], scrollingContainer[0] ], {
|
|
||||||
sizes: [ 50, 50 ],
|
|
||||||
direction: "vertical",
|
|
||||||
gutterSize: DEFAULT_GUTTER_SIZE,
|
|
||||||
onDragEnd: () => this.zoomHandler?.()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
|
|
||||||
if (this.noteId && loadResults.isNoteContentReloaded(this.noteId)) {
|
|
||||||
this.dirtyAttachment = true;
|
|
||||||
|
|
||||||
await this.refresh();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async exportSvgEvent({ ntxId }: EventData<"exportSvg">) {
|
|
||||||
if (!this.isNoteContext(ntxId) || this.note?.type !== "mermaid") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const svg = await this.renderSvg();
|
|
||||||
utils.downloadSvg(this.note.title, svg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getMermaidConfig(): MermaidConfig {
|
|
||||||
const documentStyle = window.getComputedStyle(document.documentElement);
|
|
||||||
const mermaidTheme = documentStyle.getPropertyValue("--mermaid-theme");
|
|
||||||
|
|
||||||
return {
|
|
||||||
theme: mermaidTheme.trim(),
|
|
||||||
securityLevel: "antiscript",
|
|
||||||
// TODO: Are all these options correct?
|
|
||||||
flow: { useMaxWidth: false },
|
|
||||||
sequence: { useMaxWidth: false },
|
|
||||||
gantt: { useMaxWidth: false },
|
|
||||||
class: { useMaxWidth: false },
|
|
||||||
state: { useMaxWidth: false },
|
|
||||||
pie: { useMaxWidth: true },
|
|
||||||
journey: { useMaxWidth: false },
|
|
||||||
git: { useMaxWidth: false }
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -0,0 +1,271 @@
|
|||||||
|
import type FNote from "../../entities/fnote.js";
|
||||||
|
import utils from "../../services/utils.js";
|
||||||
|
import EditableCodeTypeWidget from "./editable_code.js";
|
||||||
|
import TypeWidget from "./type_widget.js";
|
||||||
|
import Split from "split.js";
|
||||||
|
import { DEFAULT_GUTTER_SIZE } from "../../services/resizer.js";
|
||||||
|
import options from "../../services/options.js";
|
||||||
|
import type SwitchSplitOrientationButton from "../floating_buttons/switch_layout_button.js";
|
||||||
|
import type { EventData } from "../../components/app_context.js";
|
||||||
|
import type OnClickButtonWidget from "../buttons/onclick_button.js";
|
||||||
|
|
||||||
|
const TPL = `\
|
||||||
|
<div class="note-detail-split note-detail-printable">
|
||||||
|
<div class="note-detail-split-editor-col">
|
||||||
|
<div class="note-detail-split-editor"></div>
|
||||||
|
<div class="admonition caution note-detail-error-container hidden-ext"></div>
|
||||||
|
</div>
|
||||||
|
<div class="note-detail-split-preview-col">
|
||||||
|
<div class="note-detail-split-preview"></div>
|
||||||
|
<div class="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.note-detail-split {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split-editor-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split-preview-col {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split .note-detail-split-editor {
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split .note-detail-split-editor .note-detail-code {
|
||||||
|
contain: size !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split .note-detail-error-container {
|
||||||
|
font-family: var(--monospace-font-family);
|
||||||
|
margin: 5px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split .note-detail-split-preview {
|
||||||
|
transition: opacity 250ms ease-in-out;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split .note-detail-split-preview.on-error {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Horizontal layout */
|
||||||
|
|
||||||
|
.note-detail-split.split-horizontal > .note-detail-split-preview-col {
|
||||||
|
border-left: 1px solid var(--main-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split.split-horizontal > .note-detail-split-editor-col,
|
||||||
|
.note-detail-split.split-horizontal > .note-detail-split-preview-col {
|
||||||
|
height: 100%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split.split-horizontal .note-detail-split-preview {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertical layout */
|
||||||
|
|
||||||
|
.note-detail-split.split-vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split.split-vertical > .note-detail-split-editor-col,
|
||||||
|
.note-detail-split.split-vertical > .note-detail-split-preview-col {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split.split-vertical > .note-detail-split-editor-col {
|
||||||
|
border-top: 1px solid var(--main-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-split.split-vertical .note-detail-split-preview-col {
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Read-only view */
|
||||||
|
|
||||||
|
.note-detail-split.split-read-only .note-detail-split-preview-col {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Abstract `TypeWidget` which contains a preview and editor pane, each displayed on half of the available screen.
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
*
|
||||||
|
* - The two panes are resizeable via a split, on desktop. The split can be optionally customized via {@link buildSplitExtraOptions}.
|
||||||
|
* - Can display errors to the user via {@link setError}.
|
||||||
|
* - Horizontal or vertical orientation for the editor/preview split, adjustable via {@link SwitchSplitOrientationButton}.
|
||||||
|
*/
|
||||||
|
export default abstract class AbstractSplitTypeWidget extends TypeWidget {
|
||||||
|
|
||||||
|
private splitInstance?: Split.Instance;
|
||||||
|
|
||||||
|
protected $preview!: JQuery<HTMLElement>;
|
||||||
|
private $editorCol!: JQuery<HTMLElement>;
|
||||||
|
private $previewCol!: JQuery<HTMLElement>;
|
||||||
|
private $editor!: JQuery<HTMLElement>;
|
||||||
|
private $errorContainer!: JQuery<HTMLElement>;
|
||||||
|
private editorTypeWidget: EditableCodeTypeWidget;
|
||||||
|
private layoutOrientation?: "horizontal" | "vertical";
|
||||||
|
private isReadOnly?: boolean;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.editorTypeWidget = new EditableCodeTypeWidget();
|
||||||
|
this.editorTypeWidget.isEnabled = () => true;
|
||||||
|
this.editorTypeWidget.getExtraOpts = this.buildEditorExtraOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
doRender(): void {
|
||||||
|
this.$widget = $(TPL);
|
||||||
|
|
||||||
|
// Preview pane
|
||||||
|
this.$previewCol = this.$widget.find(".note-detail-split-preview-col");
|
||||||
|
this.$preview = this.$widget.find(".note-detail-split-preview");
|
||||||
|
|
||||||
|
// Editor pane
|
||||||
|
this.$editorCol = this.$widget.find(".note-detail-split-editor-col");
|
||||||
|
this.$editor = this.$widget.find(".note-detail-split-editor");
|
||||||
|
this.$editor.append(this.editorTypeWidget.render());
|
||||||
|
this.$errorContainer = this.$widget.find(".note-detail-error-container");
|
||||||
|
this.#adjustLayoutOrientation();
|
||||||
|
|
||||||
|
// Preview pane buttons
|
||||||
|
const $previewButtons = this.$previewCol.find(".preview-buttons");
|
||||||
|
const previewButtons = this.buildPreviewButtons();
|
||||||
|
$previewButtons.toggle(previewButtons.length > 0);
|
||||||
|
for (const previewButton of previewButtons) {
|
||||||
|
const $button = previewButton.render();
|
||||||
|
$button.removeClass("button-widget")
|
||||||
|
.addClass("btn")
|
||||||
|
.addClass("tn-tool-button");
|
||||||
|
$previewButtons.append($button);
|
||||||
|
previewButton.refreshIcon();
|
||||||
|
}
|
||||||
|
|
||||||
|
super.doRender();
|
||||||
|
}
|
||||||
|
|
||||||
|
cleanup(): void {
|
||||||
|
this.#destroyResizer();
|
||||||
|
}
|
||||||
|
|
||||||
|
async doRefresh(note: FNote | null | undefined) {
|
||||||
|
this.#adjustLayoutOrientation();
|
||||||
|
|
||||||
|
if (note && !this.isReadOnly) {
|
||||||
|
await this.editorTypeWidget.initialized;
|
||||||
|
this.editorTypeWidget.noteContext = this.noteContext;
|
||||||
|
this.editorTypeWidget.spacedUpdate = this.spacedUpdate;
|
||||||
|
this.editorTypeWidget.doRefresh(note);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#adjustLayoutOrientation() {
|
||||||
|
// Read-only
|
||||||
|
const isReadOnly = this.note?.hasLabel("readOnly");
|
||||||
|
if (this.isReadOnly !== isReadOnly) {
|
||||||
|
this.$editorCol.toggle(!isReadOnly);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical vs horizontal layout
|
||||||
|
const layoutOrientation = (!utils.isMobile() ? options.get("splitEditorOrientation") ?? "horizontal" : "vertical");
|
||||||
|
if (this.layoutOrientation !== layoutOrientation || this.isReadOnly !== isReadOnly) {
|
||||||
|
this.$widget
|
||||||
|
.toggleClass("split-horizontal", !isReadOnly && layoutOrientation === "horizontal")
|
||||||
|
.toggleClass("split-vertical", !isReadOnly && layoutOrientation === "vertical")
|
||||||
|
.toggleClass("split-read-only", isReadOnly);
|
||||||
|
this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical");
|
||||||
|
this.isReadOnly = isReadOnly;
|
||||||
|
this.#destroyResizer();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.splitInstance) {
|
||||||
|
this.#setupResizer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#setupResizer() {
|
||||||
|
if (!utils.isDesktop()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let elements = [ this.$editorCol[0], this.$previewCol[0] ];
|
||||||
|
if (this.layoutOrientation === "vertical") {
|
||||||
|
elements.reverse();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.splitInstance?.destroy();
|
||||||
|
|
||||||
|
if (!this.isReadOnly) {
|
||||||
|
this.splitInstance = Split(elements, {
|
||||||
|
sizes: [ 50, 50 ],
|
||||||
|
direction: this.layoutOrientation,
|
||||||
|
gutterSize: DEFAULT_GUTTER_SIZE,
|
||||||
|
...this.buildSplitExtraOptions()
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.splitInstance = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#destroyResizer() {
|
||||||
|
this.splitInstance?.destroy();
|
||||||
|
this.splitInstance = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called upon when the split between the preview and content pane is initialized. Can be used to add additional listeners if needed.
|
||||||
|
*/
|
||||||
|
buildSplitExtraOptions(): Split.Options {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called upon when the code editor is being initialized. Can be used to add additional options to the editor.
|
||||||
|
*/
|
||||||
|
buildEditorExtraOptions(): Partial<CodeMirrorOpts> {
|
||||||
|
return {
|
||||||
|
lineWrapping: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
buildPreviewButtons(): OnClickButtonWidget[] {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
setError(message: string | null | undefined) {
|
||||||
|
this.$errorContainer.toggleClass("hidden-ext", !message);
|
||||||
|
this.$preview.toggleClass("on-error", !!message);
|
||||||
|
this.$errorContainer.text(message ?? "");
|
||||||
|
}
|
||||||
|
|
||||||
|
getData() {
|
||||||
|
return this.editorTypeWidget.getData();
|
||||||
|
}
|
||||||
|
|
||||||
|
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
|
||||||
|
if (loadResults.isOptionReloaded("splitEditorOrientation")) {
|
||||||
|
this.refresh();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,228 @@
|
|||||||
|
import type { EventData } from "../../components/app_context.js";
|
||||||
|
import type FNote from "../../entities/fnote.js";
|
||||||
|
import { t } from "../../services/i18n.js";
|
||||||
|
import server from "../../services/server.js";
|
||||||
|
import utils from "../../services/utils.js";
|
||||||
|
import OnClickButtonWidget from "../buttons/onclick_button.js";
|
||||||
|
import AbstractSplitTypeWidget from "./abstract_split_type_widget.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A specialization of `SplitTypeWidget` meant for note types that have a SVG preview.
|
||||||
|
*
|
||||||
|
* This adds the following functionality:
|
||||||
|
*
|
||||||
|
* - Automatic handling of the preview when content or the note changes via {@link renderSvg}.
|
||||||
|
* - Built-in pan and zoom functionality with automatic re-centering.
|
||||||
|
* - Automatically displays errors to the user if {@link renderSvg} failed.
|
||||||
|
* - Automatically saves the SVG attachment.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTypeWidget {
|
||||||
|
|
||||||
|
private $renderContainer!: JQuery<HTMLElement>;
|
||||||
|
private zoomHandler: () => void;
|
||||||
|
private zoomInstance?: SvgPanZoom.Instance;
|
||||||
|
private svg?: string;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.zoomHandler = () => {
|
||||||
|
if (this.zoomInstance) {
|
||||||
|
this.zoomInstance.resize();
|
||||||
|
this.zoomInstance.fit();
|
||||||
|
this.zoomInstance.center();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
doRender(): void {
|
||||||
|
super.doRender();
|
||||||
|
this.$renderContainer = $(`<div>`)
|
||||||
|
.addClass("render-container")
|
||||||
|
.css("height", "100%");
|
||||||
|
this.$preview.append(this.$renderContainer);
|
||||||
|
$(window).on("resize", this.zoomHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
async doRefresh(note: FNote | null | undefined) {
|
||||||
|
super.doRefresh(note);
|
||||||
|
|
||||||
|
const blob = await note?.getBlob();
|
||||||
|
const content = blob?.content || "";
|
||||||
|
this.onContentChanged(content, true);
|
||||||
|
|
||||||
|
// Save the SVG when entering a note only when it does not have an attachment.
|
||||||
|
this.note?.getAttachments().then((attachments) => {
|
||||||
|
const attachmentName = `${this.attachmentName}.svg`;
|
||||||
|
if (!attachments.find((a) => a.title === attachmentName)) {
|
||||||
|
this.#saveSvg();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getData(): { content: string; } {
|
||||||
|
const data = super.getData();
|
||||||
|
this.onContentChanged(data.content, false);
|
||||||
|
this.#saveSvg();
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Triggers an update of the preview pane with the provided content.
|
||||||
|
*
|
||||||
|
* @param content the content that will be passed to `renderSvg` for rendering. It is not the SVG content.
|
||||||
|
* @param recenter `true` to reposition the pan/zoom to fit the image and to center it.
|
||||||
|
*/
|
||||||
|
async onContentChanged(content: string, recenter: boolean) {
|
||||||
|
if (!this.note) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let svg: string = "";
|
||||||
|
try {
|
||||||
|
svg = await this.renderSvg(content);
|
||||||
|
|
||||||
|
// Rendering was succesful.
|
||||||
|
this.setError(null);
|
||||||
|
|
||||||
|
if (svg === this.svg) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.svg = svg;
|
||||||
|
this.$renderContainer.html(svg);
|
||||||
|
} catch (e: unknown) {
|
||||||
|
// Rendering failed.
|
||||||
|
this.setError((e as Error)?.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.#setupPanZoom(!recenter);
|
||||||
|
}
|
||||||
|
|
||||||
|
#saveSvg() {
|
||||||
|
const payload = {
|
||||||
|
role: "image",
|
||||||
|
title: `${this.attachmentName}.svg`,
|
||||||
|
mime: "image/svg+xml",
|
||||||
|
content: this.svg,
|
||||||
|
position: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
server.post(`notes/${this.noteId}/attachments?matchBy=title`, payload);
|
||||||
|
}
|
||||||
|
|
||||||
|
cleanup(): void {
|
||||||
|
this.#cleanUpZoom();
|
||||||
|
$(window).off("resize", this.zoomHandler);
|
||||||
|
super.cleanup();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called upon when the SVG preview needs refreshing, such as when the editor has switched to a new note or the content has switched.
|
||||||
|
*
|
||||||
|
* The method must return a valid SVG string that will be automatically displayed in the preview.
|
||||||
|
*
|
||||||
|
* @param content the content of the note, in plain text.
|
||||||
|
*/
|
||||||
|
abstract renderSvg(content: string): Promise<string>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called to obtain the name of the note attachment (without .svg extension) that will be used for storing the preview.
|
||||||
|
*/
|
||||||
|
abstract get attachmentName(): string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param preservePanZoom `true` to keep the pan/zoom settings of the previous image, or `false` to re-center it.
|
||||||
|
*/
|
||||||
|
async #setupPanZoom(preservePanZoom: boolean) {
|
||||||
|
// Clean up
|
||||||
|
let pan = null;
|
||||||
|
let zoom = null;
|
||||||
|
if (preservePanZoom && this.zoomInstance) {
|
||||||
|
// Store pan and zoom for same note, when the user is editing the note.
|
||||||
|
pan = this.zoomInstance.getPan();
|
||||||
|
zoom = this.zoomInstance.getZoom();
|
||||||
|
this.#cleanUpZoom();
|
||||||
|
}
|
||||||
|
|
||||||
|
const $svgEl = this.$renderContainer.find("svg");
|
||||||
|
|
||||||
|
// Fit the image to bounds
|
||||||
|
$svgEl.attr("width", "100%")
|
||||||
|
.attr("height", "100%")
|
||||||
|
.css("max-width", "100%");
|
||||||
|
|
||||||
|
if (!$svgEl.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const svgPanZoom = (await import("svg-pan-zoom")).default;
|
||||||
|
const zoomInstance = svgPanZoom($svgEl[0], {
|
||||||
|
zoomEnabled: true,
|
||||||
|
controlIconsEnabled: false
|
||||||
|
});
|
||||||
|
|
||||||
|
if (preservePanZoom && pan && zoom) {
|
||||||
|
// Restore the pan and zoom.
|
||||||
|
zoomInstance.zoom(zoom);
|
||||||
|
zoomInstance.pan(pan);
|
||||||
|
} else {
|
||||||
|
// New instance, reposition properly.
|
||||||
|
zoomInstance.resize();
|
||||||
|
zoomInstance.center();
|
||||||
|
zoomInstance.fit();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.zoomInstance = zoomInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildSplitExtraOptions(): Split.Options {
|
||||||
|
return {
|
||||||
|
onDrag: () => this.zoomHandler?.()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
buildPreviewButtons(): OnClickButtonWidget[] {
|
||||||
|
return [
|
||||||
|
new OnClickButtonWidget()
|
||||||
|
.icon("bx-zoom-in")
|
||||||
|
.title(t("relation_map_buttons.zoom_in_title"))
|
||||||
|
.titlePlacement("top")
|
||||||
|
.onClick(() => this.zoomInstance?.zoomIn())
|
||||||
|
, new OnClickButtonWidget()
|
||||||
|
.icon("bx-zoom-out")
|
||||||
|
.title(t("relation_map_buttons.zoom_out_title"))
|
||||||
|
.titlePlacement("top")
|
||||||
|
.onClick(() => this.zoomInstance?.zoomOut())
|
||||||
|
, new OnClickButtonWidget()
|
||||||
|
.icon("bx-crop")
|
||||||
|
.title(t("relation_map_buttons.reset_pan_zoom_title"))
|
||||||
|
.titlePlacement("top")
|
||||||
|
.onClick(() => this.zoomHandler())
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
#cleanUpZoom() {
|
||||||
|
if (this.zoomInstance) {
|
||||||
|
this.zoomInstance.destroy();
|
||||||
|
this.zoomInstance = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async exportSvgEvent({ ntxId }: EventData<"exportSvg">) {
|
||||||
|
if (!this.isNoteContext(ntxId) || this.note?.type !== "mermaid" || !this.svg) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
utils.downloadSvg(this.note.title, this.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
async exportPngEvent({ ntxId }: EventData<"exportPng">) {
|
||||||
|
if (!this.isNoteContext(ntxId) || this.note?.type !== "mermaid" || !this.svg) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
utils.downloadSvgAsPng(this.note.title, this.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import { describe, expect, it, vi } from "vitest";
|
||||||
|
import { trimIndentation } from "../../../../../../spec/support/utils.js";
|
||||||
|
import { validateMermaid } from "./mermaid.js";
|
||||||
|
|
||||||
|
describe("Mermaid linter", () => {
|
||||||
|
|
||||||
|
(global as any).CodeMirror = {
|
||||||
|
Pos(line: number, col: number) {
|
||||||
|
return { line, col };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
it("reports correctly bad diagram type", async () => {
|
||||||
|
const input = trimIndentation`\
|
||||||
|
stateDiagram-v23
|
||||||
|
[*] -> Still
|
||||||
|
`;
|
||||||
|
|
||||||
|
const result = await validateMermaid(input);
|
||||||
|
expect(result).toMatchObject([{
|
||||||
|
message: "Expecting 'SPACE', 'NL', 'SD', got 'ID'",
|
||||||
|
from: { line: 0, col: 0 },
|
||||||
|
to: { line: 0, col: 1 }
|
||||||
|
}]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("reports correctly basic arrow missing in diagram", async () => {
|
||||||
|
const input = trimIndentation`\
|
||||||
|
xychart-beta horizontal
|
||||||
|
title "Percentage usge"
|
||||||
|
x-axis [data, sys, usr, var]
|
||||||
|
y-axis 0--->100
|
||||||
|
bar [20, 70, 0, 0]
|
||||||
|
`;
|
||||||
|
|
||||||
|
const result = await validateMermaid(input);
|
||||||
|
expect(result).toMatchObject([{
|
||||||
|
message: "Expecting 'ARROW_DELIMITER', got 'MINUS'",
|
||||||
|
from: { line: 3, col: 8 },
|
||||||
|
to: { line: 3, col: 9 }
|
||||||
|
}]);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
import mermaid from "mermaid";
|
||||||
|
|
||||||
|
interface MermaidParseError extends Error {
|
||||||
|
hash: {
|
||||||
|
text: string;
|
||||||
|
token: string;
|
||||||
|
line: number;
|
||||||
|
loc: {
|
||||||
|
first_line: number;
|
||||||
|
first_column: number;
|
||||||
|
last_line: number;
|
||||||
|
last_column: number;
|
||||||
|
};
|
||||||
|
expected: string[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function registerErrorReporter() {
|
||||||
|
CodeMirror.registerHelper("lint", null, validateMermaid);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function validateMermaid(text: string) {
|
||||||
|
if (!text.trim()) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await mermaid.parse(text);
|
||||||
|
} catch (e: unknown) {
|
||||||
|
console.warn("Got validation error", JSON.stringify(e));
|
||||||
|
|
||||||
|
const mermaidError = (e as MermaidParseError);
|
||||||
|
const loc = mermaidError.hash.loc;
|
||||||
|
|
||||||
|
let firstCol = loc.first_column + 1;
|
||||||
|
let lastCol = loc.last_column + 1;
|
||||||
|
|
||||||
|
if (firstCol === 1 && lastCol === 1) {
|
||||||
|
firstCol = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let messageLines = mermaidError.message.split("\n");
|
||||||
|
if (messageLines.length >= 4) {
|
||||||
|
messageLines = messageLines.slice(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
message: messageLines.join("\n"),
|
||||||
|
severity: "error",
|
||||||
|
from: CodeMirror.Pos(loc.first_line - 1, firstCol),
|
||||||
|
to: CodeMirror.Pos(loc.last_line - 1, lastCol)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return [];
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid.js";
|
||||||
|
import AbstractSvgSplitTypeWidget from "./abstract_svg_split_type_widget.js";
|
||||||
|
|
||||||
|
let idCounter = 1;
|
||||||
|
let registeredErrorReporter = false;
|
||||||
|
|
||||||
|
export class MermaidTypeWidget extends AbstractSvgSplitTypeWidget {
|
||||||
|
|
||||||
|
static getType() {
|
||||||
|
return "mermaid";
|
||||||
|
}
|
||||||
|
|
||||||
|
get attachmentName(): string {
|
||||||
|
return "mermaid-export";
|
||||||
|
}
|
||||||
|
|
||||||
|
async renderSvg(content: string) {
|
||||||
|
const mermaid = (await import("mermaid")).default;
|
||||||
|
await loadElkIfNeeded(mermaid, content);
|
||||||
|
if (!registeredErrorReporter) {
|
||||||
|
// (await import("./linters/mermaid.js")).default();
|
||||||
|
registeredErrorReporter = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
mermaid.initialize({
|
||||||
|
startOnLoad: false,
|
||||||
|
...(getMermaidConfig() as any),
|
||||||
|
});
|
||||||
|
|
||||||
|
idCounter++;
|
||||||
|
const { svg } = await mermaid.render(`mermaid-graph-${idCounter}`, content);
|
||||||
|
return postprocessMermaidSvg(svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue