fix #8536 -- compositing input support for autoformat

Author: williamstein

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

@@ -19,6 +19,10 @@ OS doesn't take.  On MacOS that includes option+space for now.
 TODO: instead, anytime autoformat happens, there could be an indicator about it in the
 toolbar, with a button to undo it (leaving the space).  This would be general for
 return as well.
+
+IMPORTANT: we also explicitly do this same insertText action in
+frontend/editors/slate/slate-react/components/editable.tsx
+to handle virtual keyboards. See https://github.com/sagemathinc/cocalc/issues/8536
 */
 
 import { toggleCheckbox } from "../elements/checkbox/editable";

src/packages/frontend/editors/slate/slate-react/components/editable.tsx

@@ -273,6 +273,9 @@ export const Editable: React.FC<EditableProps> = (props: EditableProps) => {
         getTargetRanges(): DOMStaticRange[];
         inputType: string;
         isComposing: boolean;
+        ctrlKey?: boolean;
+        altKey?: boolean;
+        metaKey?: boolean;
       },
     ) => {
       if (
@@ -295,6 +298,16 @@ export const Editable: React.FC<EditableProps> = (props: EditableProps) => {
 
         event.preventDefault();
 
+        if (
+          type == "insertText" &&
+          !event.isComposing &&
+          event.data == " " &&
+          !(event.ctrlKey || event.altKey || event.metaKey)
+        ) {
+          editor.insertText(" ", {});
+          return;
+        }
+
         // COMPAT: For the deleting forward/backward input types we don't want
         // to change the selection because it is the range that will be deleted,
         // and those commands determine that for themselves.
@@ -694,6 +707,7 @@ export const Editable: React.FC<EditableProps> = (props: EditableProps) => {
                   }
                 }
               }
+              1;
             }
           },
           [readOnly, attributes.onCut],