slate chat -- shift+enter to submit; alt+enter to switch to editing markdown.

Author: williamstein

src/packages/frontend/editors/markdown-input/multimode.tsx

@@ -123,10 +123,22 @@ export default function MultiMarkdownInput({
               padding: "5px 15px",
               height: height ?? "100%",
             }}
+            saveDebounceMs={0}
             actions={{
               set_value: (value) => {
                 onChange?.(value);
               },
+              shiftEnter:
+                onShiftEnter == null
+                  ? undefined
+                  : (value) => {
+                      onChange?.(value);
+                      onShiftEnter();
+                    },
+              altEnter: (value) => {
+                onChange?.(value);
+                setMode("markdown");
+              },
             }}
             font_size={fontSize}
             autoFocus={autoFocus}

src/packages/frontend/editors/slate/editable-markdown.tsx

@@ -119,6 +119,7 @@ interface Props {
   onBlur?: () => void;
   autoFocus?: boolean;
   hideSearch?: boolean;
+  saveDebounceMs?: number;
 }
 
 export const EditableMarkdown: React.FC<Props> = React.memo(
@@ -141,6 +142,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo(
     onBlur,
     autoFocus,
     hideSearch,
+    saveDebounceMs,
   }) => {
     if (disableWindowing == null) {
       disableWindowing = !USE_WINDOWING;
@@ -322,10 +324,18 @@ export const EditableMarkdown: React.FC<Props> = React.memo(
     // We don't want to do saveValue too much, since it presumably can be slow,
     // especially if the document is large. By debouncing, we only do this when
     // the user pauses typing for a moment. Also, this avoids making too many commits.
-    const saveValueDebounce = useMemo(
-      () => debounce(() => editor.saveValue(), SAVE_DEBOUNCE_MS),
-      []
-    );
+    // For tiny documents, user can make this small or even 0 to not dbounce.
+    const saveValueDebounce =
+      saveDebounceMs != null && !saveDebounceMs
+        ? () => editor.saveValue()
+        : useMemo(
+            () =>
+              debounce(
+                () => editor.saveValue(),
+                saveDebounceMs ?? SAVE_DEBOUNCE_MS
+              ),
+            []
+          );
 
     function onKeyDown(e) {
       if (read_only) {

src/packages/frontend/editors/slate/keyboard/actions.ts

@@ -69,3 +69,4 @@ register(
     return true;
   }
 );
+

src/packages/frontend/editors/slate/keyboard/shift-enter.ts

@@ -11,7 +11,19 @@ import { register } from "./register";
 import { hardbreak } from "../elements/break";
 import { isWhitespaceParagraph, isWhitespaceText } from "../padding";
 
-register({ key: "Enter", shift: true }, ({ editor }) => {
+register({ key: "Enter", shift: true }, ({ editor, extra }) => {
+  // Configured editor so shift+enter does some action, e.g., "submit chat".
+  // In this case, we do that instead of the various things below involving
+  // newlines, which can instead be done with control+enter.
+  const shiftEnter = extra?.actions?.shiftEnter;
+  if (shiftEnter != null) {
+    shiftEnter(editor.getMarkdownValue());
+    return true;
+  }
+  return softBreak({ editor });
+});
+
+function softBreak({ editor }) {
   // In a table, the only option is to insert a <br/>.
   const fragment = editor.getFragment();
   if (isElementOfType(fragment?.[0], "table")) {
@@ -50,4 +62,6 @@ register({ key: "Enter", shift: true }, ({ editor }) => {
   Transforms.insertNodes(editor, [hardbreak()]);
   Transforms.move(editor, { distance: 1 });
   return true;
-});
+}
+
+register({ key: "Enter", ctrl: true }, softBreak);

src/packages/frontend/editors/slate/keyboard/sync.ts

@@ -10,7 +10,12 @@ register(
     { key: "Enter", alt: true },
     { key: "Enter", meta: true },
   ],
-  ({ editor }) => {
+  ({ editor, extra }) => {
+    const altEnter = extra?.actions?.altEnter;
+    if (altEnter != null) {
+      altEnter(editor.getMarkdownValue());
+      return true;
+    }
     editor.inverseSearch(true);
     return true;
   }

src/packages/frontend/editors/slate/types.ts

@@ -46,4 +46,6 @@ export interface Actions {
   change_font_size?: (delta?: number, id?: string, zoom?: number) => void;
   undo?: (id: string) => void;
   redo?: (id: string) => void;
+  shiftEnter?: (value: string) => void;
+  altEnter?: (value: string) => void;
 }