Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-11 19:22:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(mermaid): support readonly mode

Browse Source
This commit is contained in:
Elian Doran 2025-03-22 12:23:50 +02:00
parent ef9bec9dd4
commit 8996a56680
No known key found for this signature in database
1 changed files with 44 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
View File

@ -10,11 +10,11 @@ import type { EventData } from "../../components/app_context.js";
const TPL = `\ const TPL = `\
<div class="note-detail-split note-detail-printable"> <div class="note-detail-split note-detail-printable">
<div class="note-detail-split-first-col"> <div class="note-detail-split-editor-col">
<div class="note-detail-split-editor"></div> <div class="note-detail-split-editor"></div>
<div class="note-detail-error-container alert alert-warning hidden-ext"></div> <div class="note-detail-error-container alert alert-warning hidden-ext"></div>
</div> </div>
<div class="note-detail-split-second-col"> <div class="note-detail-split-preview-col">
<div class="note-detail-split-preview"></div> <div class="note-detail-split-preview"></div>
</div> </div>
@ -24,7 +24,7 @@ const TPL = `\
height: 100%; height: 100%;
} }
.note-detail-split-first-col { .note-detail-split-editor-col {
display: flex; display: flex;
} }
@ -49,7 +49,7 @@ const TPL = `\
/* Horizontal layout */ /* Horizontal layout */
.note-detail-split.split-horizontal > .note-detail-split-second-col { .note-detail-split.split-horizontal > .note-detail-split-preview-col {
border-left: 1px solid var(--main-border-color); border-left: 1px solid var(--main-border-color);
} }
@ -62,7 +62,7 @@ const TPL = `\
height: 100%; height: 100%;
} }
.note-detail-split.split-horizontal .note-detail-split-first-col { .note-detail-split.split-horizontal .note-detail-split-editor-col {
flex-direction: column; flex-direction: column;
} }
@ -77,13 +77,19 @@ const TPL = `\
height: 50%; height: 50%;
} }
.note-detail-split.split-vertical > .note-detail-split-first-col { .note-detail-split.split-vertical > .note-detail-split-editor-col {
border-top: 1px solid var(--main-border-color); border-top: 1px solid var(--main-border-color);
} }
.note-detail-split.split-vertical .note-detail-split-second-col { .note-detail-split.split-vertical .note-detail-split-preview-col {
order: -1; order: -1;
} }
/* Read-only view */
.note-detail-split.split-read-only .note-detail-split-preview-col {
width: 100%;
}
</style> </style>
</div> </div>
`; `;
@ -102,12 +108,13 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
private splitInstance?: Split.Instance; private splitInstance?: Split.Instance;
protected $preview!: JQuery<HTMLElement>; protected $preview!: JQuery<HTMLElement>;
private $firstCol!: JQuery<HTMLElement>; private $editorCol!: JQuery<HTMLElement>;
private $secondCol!: JQuery<HTMLElement>; private $previewCol!: JQuery<HTMLElement>;
private $editor!: JQuery<HTMLElement>; private $editor!: JQuery<HTMLElement>;
private $errorContainer!: JQuery<HTMLElement>; private $errorContainer!: JQuery<HTMLElement>;
private editorTypeWidget: EditableCodeTypeWidget; private editorTypeWidget: EditableCodeTypeWidget;
private layoutOrientation?: "horizontal" | "vertical"; private layoutOrientation?: "horizontal" | "vertical";
private isReadOnly?: boolean;
constructor() { constructor() {
super(); super();
@ -119,8 +126,8 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
doRender(): void { doRender(): void {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$firstCol = this.$widget.find(".note-detail-split-first-col"); this.$editorCol = this.$widget.find(".note-detail-split-editor-col");
this.$secondCol = this.$widget.find(".note-detail-split-second-col"); this.$previewCol = this.$widget.find(".note-detail-split-preview-col");
this.$preview = this.$widget.find(".note-detail-split-preview"); this.$preview = this.$widget.find(".note-detail-split-preview");
this.$editor = this.$widget.find(".note-detail-split-editor"); this.$editor = this.$widget.find(".note-detail-split-editor");
this.$editor.append(this.editorTypeWidget.render()); this.$editor.append(this.editorTypeWidget.render());
@ -138,9 +145,8 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
async doRefresh(note: FNote | null | undefined) { async doRefresh(note: FNote | null | undefined) {
this.#adjustLayoutOrientation(); this.#adjustLayoutOrientation();
if (note && !this.isReadOnly) {
await this.editorTypeWidget.initialized; await this.editorTypeWidget.initialized;
if (note) {
this.editorTypeWidget.noteContext = this.noteContext; this.editorTypeWidget.noteContext = this.noteContext;
this.editorTypeWidget.spacedUpdate = this.spacedUpdate; this.editorTypeWidget.spacedUpdate = this.spacedUpdate;
this.editorTypeWidget.doRefresh(note); this.editorTypeWidget.doRefresh(note);
@ -148,15 +154,24 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
} }
#adjustLayoutOrientation() { #adjustLayoutOrientation() {
// Read-only
const isReadOnly = this.note?.hasLabel("readOnly");
if (this.isReadOnly !== isReadOnly) {
this.$editorCol.toggle(!isReadOnly);
}
// Vertical vs horizontal layout
const layoutOrientation = options.get("splitEditorOrientation") ?? "horizontal"; const layoutOrientation = options.get("splitEditorOrientation") ?? "horizontal";
if (this.layoutOrientation === layoutOrientation) { if (this.layoutOrientation === layoutOrientation && this.isReadOnly === isReadOnly) {
return; return;
} }
this.$widget this.$widget
.toggleClass("split-horizontal", layoutOrientation === "horizontal") .toggleClass("split-horizontal", !isReadOnly && layoutOrientation === "horizontal")
.toggleClass("split-vertical", layoutOrientation === "vertical"); .toggleClass("split-vertical", !isReadOnly && layoutOrientation === "vertical")
.toggleClass("split-read-only", isReadOnly);
this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical"); this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical");
this.isReadOnly = isReadOnly;
this.#setupResizer(); this.#setupResizer();
} }
@ -165,18 +180,23 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
return; return;
} }
let elements = [ this.$firstCol[0], this.$secondCol[0] ]; let elements = [ this.$editorCol[0], this.$previewCol[0] ];
if (this.layoutOrientation === "vertical") { if (this.layoutOrientation === "vertical") {
elements.reverse(); elements.reverse();
} }
this.splitInstance?.destroy(); this.splitInstance?.destroy();
if (!this.isReadOnly) {
this.splitInstance = Split(elements, { this.splitInstance = Split(elements, {
sizes: [ 50, 50 ], sizes: [ 50, 50 ],
direction: this.layoutOrientation, direction: this.layoutOrientation,
gutterSize: DEFAULT_GUTTER_SIZE, gutterSize: DEFAULT_GUTTER_SIZE,
...this.buildSplitExtraOptions() ...this.buildSplitExtraOptions()
}); });
} else {
this.splitInstance = undefined;
}
} }
/** /**