chore(react/type_widget): force line wrapping

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

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.
debounceUpdate?: boolean;
lineWrapping?: boolean;
}) {
const editorRef = useRef<VanillaCodeMirror>(null);
const containerRef = useRef<HTMLPreElement>(null);
@ -76,6 +77,7 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
}
spacedUpdate.scheduleUpdate();
}}
{...editorProps}
/>
<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 containerRef = useSyncedRef(externalContainerRef);
const initialized = useRef($.Deferred());
@ -149,7 +151,7 @@ export function CodeEditor({ parentComponent, ntxId, containerRef: externalConta
mime={mime}
editorRef={codeEditorRef}
containerRef={containerRef}
lineWrapping={codeLineWrapEnabled}
lineWrapping={lineWrapping ?? codeLineWrapEnabled}
onInitialized={() => {
if (externalContainerRef && containerRef.current) {
externalContainerRef.current = containerRef.current;

View File

@ -6,6 +6,7 @@ import { TypeWidgetProps } from "../type_widget";
import "./SplitEditor.css";
import Split from "split.js";
import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
import { CodeEditor, EditableCode } from "../code/Code";
interface SplitEditorProps extends TypeWidgetProps {
error?: string | null;
@ -21,14 +22,20 @@ interface SplitEditorProps extends TypeWidgetProps {
* - 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.
*/
export default function SplitEditor({ note, error, splitOptions }: SplitEditorProps) {
export default function SplitEditor({ note, error, splitOptions, ...editorProps }: SplitEditorProps) {
const splitEditorOrientation = useSplitOrientation();
const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
const containerRef = useRef<HTMLDivElement>(null);
const editor = (!readOnly &&
<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>}

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[] {
return [];
}