@k2b/ui 0.39.0 → 0.41.0

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

@@ -27,17 +27,20 @@ var _tmpl$ = ["<div class=\"k2b-ste-size-picker\">", "", "</div>"],
 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";
@@ -266,6 +269,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();
@@ -372,6 +376,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 = () => {
@@ -847,7 +871,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);
@@ -879,7 +904,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)),
@@ -1083,10 +1108,10 @@ export function TextEditor(props) {
   });
   return _$ssr(_tmpl$15, `k2b-text-editor ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mode", _$escape(mode(), true), false) + _$ssrAttribute("data-readonly", props.readOnly ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", _$escape(props.loading || !ready(), true), false), _$escape(announcement()), _$escape(_$createComponent(Show, {
     get when() {
-      return !props.presentation || "status" in props || check();
+      return _$memo(() => !!(status() !== undefined && status() !== null))() && status() !== false || check();
     },
     get children() {
-      return _$ssr(_tmpl$10, _$escape(props.status), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$10, _$escape(status()), _$escape(_$createComponent(Show, {
         get when() {
           return check();
         },
@@ -1132,9 +1157,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",
@@ -1176,27 +1210,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"
+              });
+            }
           })];
         }
       })));