gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 08:58:58 +01:00
Code Issues Actions 11 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 toast from "../../../services/toast";
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 CKEditorWithWatchdog, { CKEditorApi } from "./CKEditorWithWatchdog";
import "./EditableText.css";
@ -23,6 +23,7 @@ export default function EditableText({ note, parentComponent, ntxId, noteContext
const editorApiRef = useRef<CKEditorApi>(null);
const [ language ] = useNoteLabel(note, "language");
const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
const [ codeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
const isClassicEditor = isMobile() || textNoteEditorType === "ckeditor-classic";
const initialized = useRef(deferred<void>());
const spacedUpdate = useEditorSpacedUpdate({
@ -110,9 +111,10 @@ export default function EditableText({ note, parentComponent, ntxId, noteContext
});
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
className="note-detail-editable-text-editor use-tn-links" tabIndex={300}
className="note-detail-editable-text-editor use-tn-links"
tabIndex={300}
content={content}
contentLanguage={language}
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 { TypeWidgetProps } from "../type_widget";
import "./ReadOnlyText.css";
import { useNoteBlob, useNoteLabel, useTriliumEvent } from "../../react/hooks";
import { useNoteBlob, useNoteLabel, useTriliumEvent, useTriliumOptionBool } from "../../react/hooks";
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
@ -21,6 +21,7 @@ import appContext from "../../../components/app_context";
export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetProps) {
const blob = useNoteBlob(note);
const contentRef = useRef<HTMLDivElement>(null);
const [ codeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
const { isRtl } = useNoteLanguage(note);
// Apply necessary transforms.
@ -50,7 +51,7 @@ export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetPro
return (
<div
className="note-detail-readonly-text note-detail-printable"
className={`note-detail-readonly-text note-detail-printable ${codeBlockWordWrap ? "word-wrap" : ""}`}
tabindex={100}
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 {
doRender() {
super.doRender();
this.refreshCodeBlockOptions();
}
refreshCodeBlockOptions() {
const wordWrap = options.is("codeBlockWordWrap");
this.$widget.toggleClass("word-wrap", wordWrap);
}
async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.isOptionReloaded("codeBlockWordWrap")) {
this.refreshCodeBlockOptions();
}
if (loadResults.getAttributeRows().find((attr) =>
attr.type === "label" &&
attr.name === "language" &&