gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 17:08:58 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

chore(react/type_widgets): set up code block word wrap

Browse Source
This commit is contained in:
Elian Doran 2025-09-25 13:24:43 +03:00
parent cc6ac7d1da
commit 45bd9b72b9
No known key found for this signature in database
3 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/widgets/type_widgets/text/EditableText.tsx
View File

@ -2,7 +2,7 @@ import { useRef, useState } from "preact/hooks";
import dialog from "../../../services/dialog"; import dialog from "../../../services/dialog";
import toast from "../../../services/toast"; import toast from "../../../services/toast";
import utils, { deferred, isMobile } from "../../../services/utils"; import utils, { deferred, isMobile } from "../../../services/utils";
import { useEditorSpacedUpdate, useKeyboardShortcuts, useNoteLabel, useTriliumEvent, useTriliumOption } from "../../react/hooks"; import { useEditorSpacedUpdate, useKeyboardShortcuts, useNoteLabel, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
import { TypeWidgetProps } from "../type_widget"; import { TypeWidgetProps } from "../type_widget";
import CKEditorWithWatchdog, { CKEditorApi } from "./CKEditorWithWatchdog"; import CKEditorWithWatchdog, { CKEditorApi } from "./CKEditorWithWatchdog";
import "./EditableText.css"; import "./EditableText.css";
@ -23,6 +23,7 @@ export default function EditableText({ note, parentComponent, ntxId, noteContext
const editorApiRef = useRef<CKEditorApi>(null); const editorApiRef = useRef<CKEditorApi>(null);
const [ language ] = useNoteLabel(note, "language"); const [ language ] = useNoteLabel(note, "language");
const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType"); const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
const [ codeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
const isClassicEditor = isMobile() || textNoteEditorType === "ckeditor-classic"; const isClassicEditor = isMobile() || textNoteEditorType === "ckeditor-classic";
const initialized = useRef(deferred<void>()); const initialized = useRef(deferred<void>());
const spacedUpdate = useEditorSpacedUpdate({ const spacedUpdate = useEditorSpacedUpdate({
@ -110,9 +111,10 @@ export default function EditableText({ note, parentComponent, ntxId, noteContext
}); });
return ( return (
<div ref={containerRef} class="note-detail-editable-text note-detail-printable"> <div ref={containerRef} class={`note-detail-editable-text note-detail-printable ${codeBlockWordWrap ? "word-wrap" : ""}`}>
{note && <CKEditorWithWatchdog {note && <CKEditorWithWatchdog
className="note-detail-editable-text-editor use-tn-links" tabIndex={300} className="note-detail-editable-text-editor use-tn-links"
tabIndex={300}
content={content} content={content}
contentLanguage={language} contentLanguage={language}
isClassicEditor={isClassicEditor} isClassicEditor={isClassicEditor}

5
apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useMemo, useRef } from "preact/hooks"; import { useEffect, useMemo, useRef } from "preact/hooks";
import { TypeWidgetProps } from "../type_widget"; import { TypeWidgetProps } from "../type_widget";
import "./ReadOnlyText.css"; import "./ReadOnlyText.css";
import { useNoteBlob, useNoteLabel, useTriliumEvent } from "../../react/hooks"; import { useNoteBlob, useNoteLabel, useTriliumEvent, useTriliumOptionBool } from "../../react/hooks";
import RawHtml from "../../react/RawHtml"; import RawHtml from "../../react/RawHtml";
// we load CKEditor also for read only notes because they contain content styles required for correct rendering of even read only notes // we load CKEditor also for read only notes because they contain content styles required for correct rendering of even read only notes
@ -21,6 +21,7 @@ import appContext from "../../../components/app_context";
export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetProps) { export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetProps) {
const blob = useNoteBlob(note); const blob = useNoteBlob(note);
const contentRef = useRef<HTMLDivElement>(null); const contentRef = useRef<HTMLDivElement>(null);
const [ codeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
const { isRtl } = useNoteLanguage(note); const { isRtl } = useNoteLanguage(note);
// Apply necessary transforms. // Apply necessary transforms.
@ -50,7 +51,7 @@ export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetPro
return ( return (
<div <div
className="note-detail-readonly-text note-detail-printable" className={`note-detail-readonly-text note-detail-printable ${codeBlockWordWrap ? "word-wrap" : ""}`}
tabindex={100} tabindex={100}
dir={isRtl ? "rtl" : "ltr"} dir={isRtl ? "rtl" : "ltr"}
> >

10
apps/client/src/widgets/type_widgets_old/abstract_text_type_widget.ts
View File

@ -10,19 +10,9 @@ import attributes from "../../services/attributes.js";
export default class AbstractTextTypeWidget extends TypeWidget { export default class AbstractTextTypeWidget extends TypeWidget {
doRender() { doRender() {
super.doRender(); super.doRender();
this.refreshCodeBlockOptions();
}
refreshCodeBlockOptions() {
const wordWrap = options.is("codeBlockWordWrap");
this.$widget.toggleClass("word-wrap", wordWrap);
} }
async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.isOptionReloaded("codeBlockWordWrap")) {
this.refreshCodeBlockOptions();
}
if (loadResults.getAttributeRows().find((attr) => if (loadResults.getAttributeRows().find((attr) =>
attr.type === "label" && attr.type === "label" &&
attr.name === "language" && attr.name === "language" &&