gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-06 14:44:25 +01:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

chore(react/type_widget): force line wrapping

Browse Source
This commit is contained in:
Elian Doran 2025-09-20 13:00:15 +03:00
parent 425ffc02d8
commit b19da81572
No known key found for this signature in database
3 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/widgets/type_widgets/code/Code.tsx
View File

@ -35,9 +35,10 @@ export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWi
) )
} }
export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: TypeWidgetProps & { export function EditableCode({ note, ntxId, debounceUpdate, parentComponent, ...editorProps }: TypeWidgetProps & {
// if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview. // if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
debounceUpdate?: boolean; debounceUpdate?: boolean;
lineWrapping?: boolean;
}) { }) {
const editorRef = useRef<VanillaCodeMirror>(null); const editorRef = useRef<VanillaCodeMirror>(null);
const containerRef = useRef<HTMLPreElement>(null); const containerRef = useRef<HTMLPreElement>(null);
@ -76,6 +77,7 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
} }
spacedUpdate.scheduleUpdate(); spacedUpdate.scheduleUpdate();
}} }}
{...editorProps}
/> />
<TouchBar> <TouchBar>
@ -87,7 +89,7 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
) )
} }
export function CodeEditor({ parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, mime, onInitialized, ...editorProps }: Omit<CodeMirrorProps, "onThemeChange" | "lineWrapping"> & Pick<TypeWidgetProps, "parentComponent" | "ntxId">) { export function CodeEditor({ parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, mime, onInitialized, lineWrapping, ...editorProps }: Omit<CodeMirrorProps, "onThemeChange"> & Pick<TypeWidgetProps, "parentComponent" | "ntxId">) {
const codeEditorRef = useRef<VanillaCodeMirror>(null); const codeEditorRef = useRef<VanillaCodeMirror>(null);
const containerRef = useSyncedRef(externalContainerRef); const containerRef = useSyncedRef(externalContainerRef);
const initialized = useRef($.Deferred()); const initialized = useRef($.Deferred());
@ -149,7 +151,7 @@ export function CodeEditor({ parentComponent, ntxId, containerRef: externalConta
mime={mime} mime={mime}
editorRef={codeEditorRef} editorRef={codeEditorRef}
containerRef={containerRef} containerRef={containerRef}
lineWrapping={codeLineWrapEnabled} lineWrapping={lineWrapping ?? codeLineWrapEnabled}
onInitialized={() => { onInitialized={() => {
if (externalContainerRef && containerRef.current) { if (externalContainerRef && containerRef.current) {
externalContainerRef.current = containerRef.current; externalContainerRef.current = containerRef.current;

11
apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
View File

@ -6,6 +6,7 @@ import { TypeWidgetProps } from "../type_widget";
import "./SplitEditor.css"; import "./SplitEditor.css";
import Split from "split.js"; import Split from "split.js";
import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer"; import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
import { CodeEditor, EditableCode } from "../code/Code";
interface SplitEditorProps extends TypeWidgetProps { interface SplitEditorProps extends TypeWidgetProps {
error?: string | null; error?: string | null;
@ -21,14 +22,20 @@ interface SplitEditorProps extends TypeWidgetProps {
* - Can display errors to the user via {@link setError}. * - Can display errors to the user via {@link setError}.
* - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button. * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
*/ */
export default function SplitEditor({ note, error, splitOptions }: SplitEditorProps) { export default function SplitEditor({ note, error, splitOptions, ...editorProps }: SplitEditorProps) {
const splitEditorOrientation = useSplitOrientation(); const splitEditorOrientation = useSplitOrientation();
const [ readOnly ] = useNoteLabelBoolean(note, "readOnly"); const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const editor = (!readOnly && const editor = (!readOnly &&
<div className="note-detail-split-editor-col"> <div className="note-detail-split-editor-col">
<div className="note-detail-split-editor">Detail goes here.</div> <div className="note-detail-split-editor">
<EditableCode
note={note}
lineWrapping={false}
{...editorProps}
/>
</div>
{error && <Admonition type="caution" className="note-detail-error-container"> {error && <Admonition type="caution" className="note-detail-error-container">
{error} {error}
</Admonition>} </Admonition>}

9
apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
View File

@ -84,15 +84,6 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
} }
} }
/**
* Called upon when the code editor is being initialized. Can be used to add additional options to the editor.
*/
buildEditorExtraOptions(): Partial<EditorConfig> {
return {
lineWrapping: false
};
}
buildPreviewButtons(): OnClickButtonWidget[] { buildPreviewButtons(): OnClickButtonWidget[] {
return []; return [];
} }