feat(mermaid): basic horizontal layout

This commit is contained in:
Elian Doran 2025-03-21 21:52:05 +02:00
parent 56da5f7761
commit 395d76a156
No known key found for this signature in database
3 changed files with 20 additions and 7 deletions

View File

@ -40,7 +40,6 @@ import EditButton from "../widgets/buttons/edit_button.js";
import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js";
import ShowTocWidgetButton from "../widgets/buttons/show_toc_widget_button.js";
import ShowHighlightsListWidgetButton from "../widgets/buttons/show_highlights_list_widget_button.js";
import MermaidWidget from "../widgets/mermaid.js";
import NoteWrapperWidget from "../widgets/note_wrapper.js";
import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
import SharedInfoWidget from "../widgets/shared_info.js";
@ -215,7 +214,6 @@ export default class DesktopLayout {
.child(new ContextualHelpButton())
.child(new HideFloatingButtonsButton())
)
.child(new MermaidWidget())
.child(
new ScrollingContainer()
.filling()

View File

@ -197,7 +197,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
// https://github.com/zadam/trilium/issues/2522
const isBackendNote = this.noteContext?.noteId === "_backendLog";
const isSqlNote = this.mime === "text/x-sqlite;schema=trilium";
const isFullHeightNoteType = ["canvas", "webView", "noteMap", "mindMap", "geoMap"].includes(this.type ?? "");
const isFullHeightNoteType = ["canvas", "webView", "noteMap", "mindMap", "geoMap", "mermaid"].includes(this.type ?? "");
const isFullHeight = (!this.noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote)
|| this.noteContext?.viewScope?.viewMode === "attachments"
|| isBackendNote;

View File

@ -1,15 +1,32 @@
import type { EventData } from "../../components/app_context.js";
import type FNote from "../../entities/fnote.js";
import EditableCodeTypeWidget from "./editable_code.js";
import TypeWidget from "./type_widget.js";
const TPL = `\
<div class="note-detail-split-editor note-detail-printable">
<div class="note-detail-split note-detail-printable split-horizontal">
<div class="note-detail-split-preview">
Preview goes here.
</div>
<div class="note-detail-split-editor">
</div>
<style>
.note-detail-split {
display: flex;
height: 100%;
}
.note-detail-split.split-horizontal > div {
height: 100%;
width: 50%;
}
.note-detail-split .note-detail-split-editor {
width: 100%;
}
</style>
</div>
`;
@ -26,7 +43,6 @@ export default class SplitTypeEditor extends TypeWidget {
}
doRender(): void {
console.log("Render");
this.$widget = $(TPL);
this.$preview = this.$widget.find(".note-detail-split-preview");
@ -40,7 +56,6 @@ export default class SplitTypeEditor extends TypeWidget {
await this.editorTypeWidget.initialized;
if (note) {
console.log("Refresh with ", note);
this.editorTypeWidget.noteContext = this.noteContext;
this.editorTypeWidget.spacedUpdate = this.spacedUpdate;
this.editorTypeWidget.doRefresh(note);