From 95622bc44b74a59c6c0ba2eb05fe3bee583a7980 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Tue, 4 Apr 2023 16:40:37 -0700 Subject: [PATCH] Editor line wrapping support (not used yet) --- src-web/components/core/Editor/Editor.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src-web/components/core/Editor/Editor.tsx b/src-web/components/core/Editor/Editor.tsx index c1b5e648..a74d152d 100644 --- a/src-web/components/core/Editor/Editor.tsx +++ b/src-web/components/core/Editor/Editor.tsx @@ -35,6 +35,7 @@ export interface EditorProps { onFocus?: () => void; onBlur?: () => void; singleLine?: boolean; + wrapLines?: boolean; format?: (v: string) => string; autocomplete?: GenericCompletionConfig; actions?: ReactNode; @@ -59,6 +60,7 @@ const _Editor = forwardRef(function Editor( format, autocomplete, actions, + wrapLines, }: EditorProps, ref, ) { @@ -93,6 +95,15 @@ const _Editor = forwardRef(function Editor( cm.current?.view.dispatch({ effects: effect }); }, [placeholder]); + // Update wrap lines + const wrapLinesCompartment = useRef(new Compartment()); + useEffect(() => { + if (cm.current === null) return; + const ext = wrapLines ? [EditorView.lineWrapping] : []; + const effect = wrapLinesCompartment.current.reconfigure(ext); + cm.current?.view.dispatch({ effects: effect }); + }, [wrapLines]); + // Update language extension when contentType changes useEffect(() => { if (cm.current === null) return; @@ -126,16 +137,15 @@ const _Editor = forwardRef(function Editor( doc: `${defaultValue ?? ''}`, extensions: [ languageCompartment.of(langExt), - placeholderCompartment.current.of( - placeholderExt(placeholderElFromText(placeholder ?? '')), - ), + placeholderCompartment.current.of([]), + wrapLinesCompartment.current.of([]), ...getExtensions({ container, + readOnly, + singleLine, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, - readOnly, - singleLine, }), ], });