@k2b/ui 0.39.0 → 0.41.0

package/dist/browser/text-editor/TextEditor.js

@@ -36,17 +36,20 @@ var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-ste-size-picker><!$><!/><!$
 import { history, historyKeymap, redo, undo } from "@codemirror/commands";
 import { EditorView, keymap } from "@codemirror/view";
 import { clipboard } from "@k2b/stdlib/solid";
-import { createEffect, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+import { children, createEffect, createMemo, createSignal, createUniqueId, For, on, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Button, IconButton } from "../actions/Button";
 import { Dropdown } from "../actions/Dropdown";
 import { SegmentedControl } from "../actions/SegmentedControl";
 import { Toolbar } from "../actions/Toolbar";
 import { Kbd } from "../content/Kbd";
 import { dialogCore } from "../feedback/dialog-core";
+import { createDictation } from "../inputs/dictation/create-dictation";
+import { DictationBar, DictationButton, dictationBarShown } from "../inputs/dictation/Dictation";
 import { NumberInput } from "../inputs/NumberInput";
 import { LocaleProvider, useLocale } from "../intl/locale";
 import { formatShortcut, keyboardPlatform } from "../intl/shortcut";
 import BottomSheet, { bottomSheetAdaptiveOptions } from "../layout/BottomSheet";
+import { codeMirrorDictationTarget, dictationExtension } from "./dictation";
 import { createTextEditor } from "./engine";
 import { commands, formatLabels } from "./format";
 import { findTables, inspectTableStructure } from "./markdown-table";
@@ -332,6 +335,7 @@ export function TextEditor(props) {
   const locale = useLocale();
   const t = () => textEditorMessages.resolve([locale()]).t;
   const [mode, setMode] = createSignal(props.mode ?? "formatted");
+  const status = children(() => props.status);
   const [ready, setReady] = createSignal(false);
   const [recovery, setRecovery] = createSignal();
   const [notice, setNotice] = createSignal();
@@ -444,6 +448,26 @@ export function TextEditor(props) {
   let root;
   let mount;
   let editor;
+  // The view is read-only while it loads or recovers, too; dictation only runs where words can land.
+  const dictationWritable = () => !props.readOnly && !props.loading && ready() && recovery() === undefined && mode() !== "plain";
+  const dictation = createDictation({
+    source: {
+      start: options => props.dictation.source.start(options),
+      devices: () => props.dictation?.source.devices() ?? Promise.resolve([])
+    },
+    get alternative() {
+      return props.dictation?.alternative;
+    },
+    target: codeMirrorDictationTarget(() => editor?.view),
+    disabled: () => !props.dictation || !dictationWritable()
+  });
+  // A field that turns read-only or plain hides the toolbar; dictation then ends and the words so far stay.
+  // A memo compares the value, so ordinary edits never end it.
+  const dictationScope = createMemo(() => `${Boolean(props.dictation)}:${dictationWritable()}`);
+  createEffect(on(dictationScope, () => dictation.end(), {
+    defer: true
+  }));
+  const dictating = () => Boolean(props.dictation) && dictationBarShown(dictation);
   const menuBlocked = () => !!props.loading || !ready() || recovery() !== undefined;
   const blocked = () => !!props.readOnly || menuBlocked();
   const updateCheck = () => {
@@ -937,7 +961,8 @@ export function TextEditor(props) {
     }
   });
   const selectMode = next => {
-    const restoreEditorFocus = !!editor?.view.contentDOM.contains(document.activeElement);
+    // Returning from the source view removes its switch; keyboard focus then moves into the text.
+    const restoreEditorFocus = !!editor?.view.contentDOM.contains(document.activeElement) || !!root.querySelector(".k2b-ste-views")?.contains(document.activeElement);
     menuOpen = false;
     setCell(undefined);
     setMode(next);
@@ -969,7 +994,7 @@ export function TextEditor(props) {
       }), EditorView.updateListener.of(update => {
         schedulePosition();
         if (update.docChanged) queueMicrotask(() => setDocumentRevision(revision => revision + 1));
-      }), props.extensions ?? []],
+      }), props.extensions ?? [], props.dictation ? dictationExtension() : []],
       host: {
         ...props.host,
         undo: props.host?.undo ?? (() => editor && undo(editor.view)),
@@ -1188,14 +1213,14 @@ export function TextEditor(props) {
     _$insert(_el$23, announcement);
     _$insert(_el$22, _$createComponent(Show, {
       get when() {
-        return !props.presentation || "status" in props || check();
+        return _$memo(() => !!(status() !== undefined && status() !== null))() && status() !== false || check();
       },
       get children() {
         var _el$24 = _$getNextElement(_tmpl$10),
           _el$25 = _el$24.firstChild,
           _el$30 = _el$25.nextSibling,
           [_el$31, _co$6] = _$getNextMarker(_el$30.nextSibling);
-        _$insert(_el$25, () => props.status);
+        _$insert(_el$25, status);
         _$insert(_el$24, _$createComponent(Show, {
           get when() {
             return check();
@@ -1253,9 +1278,18 @@ export function TextEditor(props) {
             return t().formatting;
           },
           get children() {
-            return [_$createComponent(For, {
+            return [_$createComponent(Show, {
+              get when() {
+                return dictating();
+              },
+              get children() {
+                return _$createComponent(DictationBar, {
+                  dictation: dictation
+                });
+              }
+            }), _$createComponent(For, {
               get each() {
-                return [toolbar.slice(0, 3), toolbar.slice(3, 6), toolbar.slice(6)];
+                return _$memo(() => !!dictating())() ? [] : [toolbar.slice(0, 3), toolbar.slice(3, 6), toolbar.slice(6)];
               },
               children: group => _$createComponent(Toolbar.Group, {
                 "class": "k2b-ste-tool-group",
@@ -1299,27 +1333,42 @@ export function TextEditor(props) {
                   });
                 }
               })
-            }), _$createComponent(SegmentedControl, {
-              "class": "k2b-ste-views",
-              size: "sm",
-              get ariaLabel() {
-                return t().view;
-              },
-              get value() {
-                return mode() === "source" ? "source" : "formatted";
+            }), _$createComponent(Show, {
+              get when() {
+                return _$memo(() => mode() === "source")() && !dictating();
               },
-              get options() {
-                return [{
-                  value: "formatted",
-                  label: t().formatted,
-                  icon: "ti ti-typography"
-                }, {
+              get children() {
+                return _$createComponent(SegmentedControl, {
+                  "class": "k2b-ste-views",
+                  size: "sm",
+                  get ariaLabel() {
+                    return t().view;
+                  },
                   value: "source",
-                  label: t().source,
-                  icon: "ti ti-markdown"
-                }];
+                  get options() {
+                    return [{
+                      value: "formatted",
+                      label: t().formatted,
+                      icon: "ti ti-typography"
+                    }, {
+                      value: "source",
+                      label: t().source,
+                      icon: "ti ti-markdown"
+                    }];
+                  },
+                  onValueChange: selectMode
+                });
+              }
+            }), _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!props.dictation)() && !dictating();
               },
-              onValueChange: selectMode
+              get children() {
+                return _$createComponent(DictationButton, {
+                  dictation: dictation,
+                  "class": "k2b-ste-tool k2b-ste-dictate"
+                });
+              }
             })];
           }
         }));