allow toggling editing state by double clicking on textarea/input ele…

…ment
blacksmithgu · Nov 2, 2024 · 82f2272 · 82f2272
1 parent bccbaa6
commit 82f2272
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/src/ui/fields/editable.tsx b/src/ui/fields/editable.tsx
@@ -353,7 +353,7 @@ export function TextEditable(props: EditableState<string> & { markdown?: boolean
         (e: MouseEvent) => {
             dispatch({
                 type: "editing-toggled",
-                newValue: true,
+                newValue: !state.isEditing,
             });
         },
         [text.current, props.sourcePath, state.updater, state.isEditing, state.content]
@@ -368,7 +368,7 @@ export function TextEditable(props: EditableState<string> & { markdown?: boolean
         </Fragment>
     );
     const editor = (
-        <UncontrolledTextEditable onInput={onInput} inline={props.inline} dispatch={dispatch} text={text.current} />
+        <UncontrolledTextEditable toggler={dblClick} onInput={onInput} inline={props.inline} dispatch={dispatch} text={text.current} />
     );
     return (
         <span className="has-texteditable" onDblClick={dblClick}>
@@ -382,11 +382,13 @@ export function UncontrolledTextEditable({
     text,
     dispatch,
     onInput,
+		toggler
 }: {
     inline?: boolean;
     text: string;
     dispatch?: Dispatch<EditableAction<string>>;
     onInput?: (e: KeyboardEvent) => unknown;
+		toggler?: (e: MouseEvent) => void;
 }) {
     const [txt, setText] = useState(text);
     useEffect(() => {
@@ -400,11 +402,11 @@ export function UncontrolledTextEditable({
     );
 
     return !inline ? (
-        <textarea className="datacore-editable" onChange={onChangeCb} onKeyUp={onInput}>
+        <textarea onDblClick={toggler} className="datacore-editable" onChange={onChangeCb} onKeyUp={onInput}>
             {txt}
         </textarea>
     ) : (
-        <input className="datacore-editable" type="text" onChange={onChangeCb} onKeyUp={onInput} />
+        <input onDblClick={toggler} className="datacore-editable" type="text" onChange={onChangeCb} onKeyUp={onInput} />
     );
 }
 /** An editable list of items.