@k2b/editor 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/editor",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Configurable Markdown editor for SolidJS: editor, toolbar, bubble menu, and slash menu on one shared state.",
   "type": "module",
   "sideEffects": [
@@ -69,7 +69,7 @@
     "@codemirror/state": "6.7.1",
     "@codemirror/view": "6.43.7",
     "@k2b/stdlib": "0.30.0",
-    "@k2b/ui": "0.39.0",
+    "@k2b/ui": "0.41.0",
     "@lezer/common": "1.5.3",
     "@lezer/highlight": "1.2.4",
     "@lezer/markdown": "1.7.2",

package/src/Toolbar.tsx

@@ -1,7 +1,21 @@
 import { EditorView } from "@codemirror/view";
-import { Dropdown, type DropdownPosition, IconButton, Tooltip, Toolbar as UiToolbar, useLocale } from "@k2b/ui";
-import { createSignal, For, type JSX, onCleanup, onMount, Show } from "solid-js";
+import {
+  createDictation,
+  type DictationAlternative,
+  DictationBar,
+  DictationButton,
+  type DictationSource,
+  Dropdown,
+  type DropdownPosition,
+  dictationBarShown,
+  IconButton,
+  Tooltip,
+  Toolbar as UiToolbar,
+  useLocale,
+} from "@k2b/ui";
+import { createEffect, createMemo, createSignal, For, type JSX, on, onCleanup, onMount, Show } from "solid-js";
 import { ariaShortcut, shortcutLabel } from "./actions";
+import { dictationTarget } from "./dictation";
 import type { EditorAction, EditorHandle } from "./editor-state";
 import { editorMessages } from "./messages";
 
@@ -42,6 +56,12 @@ export type ToolbarProps = {
    * and give up the same height in the page above it, so the caret line stays visible.
    */
   liftAboveKeyboard?: boolean;
+  /**
+   * Live dictation as the first control after the action row, so it never scrolls away. While it runs, the dictation
+   * bar stands in for the action row in the same line; on a phone it fills the line. Without a source there is no
+   * microphone.
+   */
+  dictation?: { source: DictationSource; alternative?: DictationAlternative };
 };
 
 const isMenu = (item: ToolbarItem): item is ToolbarMenu => "kind" in item && item.kind === "menu";
@@ -114,6 +134,22 @@ export function Toolbar(props: ToolbarProps) {
   const [coarse, setCoarse] = createSignal(false);
   const [lift, setLift] = createSignal(0);
   let root!: HTMLDivElement;
+  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: dictationTarget(props.editor),
+    disabled: () => !props.dictation || !props.editor.state() || Boolean(props.editor.state()?.readOnly),
+  });
+  // A note that turns read-only, or a host that drops the source, ends dictation; the words so far stay.
+  // A memo compares the value, so ordinary edits never end it.
+  const dictationScope = createMemo(() => `${Boolean(props.dictation)}:${Boolean(props.editor.state()?.readOnly)}`);
+  createEffect(on(dictationScope, () => dictation.end(), { defer: true }));
+  const dictating = () => Boolean(props.dictation) && dictationBarShown(dictation);
 
   onMount(() => {
     const pointer = window.matchMedia("(pointer: coarse)");
@@ -173,34 +209,40 @@ export function Toolbar(props: ToolbarProps) {
       class={props.class ?? "k2b-editor-toolbar flex min-w-0 items-center gap-2 text-dimmed"}
       // The stylesheet sizes every control's icon here, the host's start and end controls included.
       data-k2b-editor-toolbar=""
+      data-dictating={dictating() ? "" : undefined}
       style={{ "margin-bottom": lift() ? `${lift()}px` : undefined }}
       on:mousedown={(event) => event.preventDefault()}
     >
       {props.start}
-      <UiToolbar label={props.label ?? t().formatting} class={props.toolsClass ?? "no-scrollbar min-w-0 flex-1 overflow-x-auto"}>
-        <For each={props.groups}>
-          {(group, index) => (
-            <>
-              <UiToolbar.Group label={group.label} class={group.class ?? "shrink-0"}>
-                <For each={group.items}>
-                  {(item) =>
-                    isCustom(item) ? (
-                      item.render()
-                    ) : isMenu(item) ? (
-                      <ToolbarMenuButton editor={props.editor} menu={item} coarse={coarse()} />
-                    ) : (
-                      <ToolbarButton editor={props.editor} action={item} />
-                    )
-                  }
-                </For>
-              </UiToolbar.Group>
-              <Show when={index() < props.groups.length - 1}>
-                <UiToolbar.Separator class={group.separatorClass} />
-              </Show>
-            </>
-          )}
-        </For>
-      </UiToolbar>
+      <Show when={!dictating()} fallback={<DictationBar dictation={dictation} />}>
+        <UiToolbar label={props.label ?? t().formatting} class={props.toolsClass ?? "no-scrollbar min-w-0 flex-1 overflow-x-auto"}>
+          <For each={props.groups}>
+            {(group, index) => (
+              <>
+                <UiToolbar.Group label={group.label} class={group.class ?? "shrink-0"}>
+                  <For each={group.items}>
+                    {(item) =>
+                      isCustom(item) ? (
+                        item.render()
+                      ) : isMenu(item) ? (
+                        <ToolbarMenuButton editor={props.editor} menu={item} coarse={coarse()} />
+                      ) : (
+                        <ToolbarButton editor={props.editor} action={item} />
+                      )
+                    }
+                  </For>
+                </UiToolbar.Group>
+                <Show when={index() < props.groups.length - 1}>
+                  <UiToolbar.Separator class={group.separatorClass} />
+                </Show>
+              </>
+            )}
+          </For>
+        </UiToolbar>
+      </Show>
+      <Show when={props.dictation && !dictating()}>
+        <DictationButton dictation={dictation} size="xs" class="text-dimmed" />
+      </Show>
       {props.end}
     </div>
   );

package/src/collab/remote-cursors.ts

@@ -339,12 +339,17 @@ export const remoteCursors = (ytext: Y.Text, awareness: Awareness): Extension =>
             const base = view.scrollDOM.getBoundingClientRect();
             const edge = view.contentDOM.getBoundingClientRect();
             const padding = parseFloat(getComputedStyle(view.contentDOM).paddingLeft);
+            // A rendered block hides the source the other person edits, so no line of it shows the caret's place: the
+            // caret runs along the whole block, which a line-high caret at its top would misstate.
+            // The block as drawn, which a widget may offset from the line the editor gives it.
+            const box = view.coordsAtPos(block.from, 1);
+            if (!box) return [];
             const rect = new RectangleMarker(
-              "cm-remoteCaret",
+              "cm-remoteCaret cm-remoteCaret-block",
               edge.left + padding - base.left + view.scrollDOM.scrollLeft,
-              view.documentTop + block.top - base.top + view.scrollDOM.scrollTop,
+              box.top - base.top + view.scrollDOM.scrollTop,
               null,
-              view.defaultLineHeight,
+              box.bottom - box.top,
             );
             return [new RemoteCaretMarker(rect, color, name, idle)];
           }

package/src/dictation.ts

@@ -0,0 +1,13 @@
+import type { DictationTarget } from "@k2b/ui";
+import { codeMirrorDictationTarget, dictationExtension } from "@k2b/ui/text-editor";
+import type { EditorHandle } from "./editor-state";
+
+/**
+ * A dictation target for the shared editor. Words go into the document at once, as typed text does, so a shared
+ * document shows them to everyone and they last as long as the host saves typed text. The mark follows local and
+ * remote edits; Discard removes exactly the dictated ranges in one step, including what the person typed inside them.
+ */
+export function dictationTarget(editor: EditorHandle): DictationTarget {
+  editor.use(dictationExtension());
+  return codeMirrorDictationTarget(editor.view);
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 export { ariaShortcut, isApple, markdownActions, shortcutLabel } from "./actions";
 export { BubbleMenu, type BubbleMenuProps } from "./BubbleMenu";
+export { dictationTarget } from "./dictation";
 export { Editor, type EditorProps } from "./Editor";
 export { asUndoStep, createEditor, type EditorAction, type EditorHandle } from "./editor-state";
 export { editorMessages } from "./messages";

package/src/markdown/block-previews.tsx

@@ -251,7 +251,7 @@ class QueryBlockWidget extends WidgetType {
     if (this.placeholder) return this.placeholder.estimatedHeight;
     if (this.chart) return 66 + (this.chart.subtitle ? 44 : 28) + 8 + (this.chart.kind === "stat" ? 160 : 288);
     // Query tables have 14px / 21px text, 16px cell padding and row dividers;
-    // controls, widget padding/border and table spacing add 65px.
+    // controls, widget padding/border and table spacing add 65px, the space around the frame 16px.
     // The truncated count paragraph inherits 16px / 1.6 text (25.6px) in
     // `.cm-query-block-preview.notebook-book-content` and 1rem block margins
     // from app.css. Its top margin collapses with the table's bottom margin,
@@ -263,7 +263,7 @@ class QueryBlockWidget extends WidgetType {
       : this.html?.includes('class="notebook-query-pager"')
         ? 36
         : 0;
-    return rows ? rows * 38 + 65 + countHeight : 120;
+    return rows ? rows * 38 + 81 + countHeight : 136;
   }
 }
 

package/src/markdown/named-blocks.ts

@@ -82,8 +82,12 @@ export const namedBlocksExtension = (): Extension => {
     stateField,
     blockWidgetLineNavigationExtension(stateField, (value) => value.atomicDecorations),
     EditorView.theme({
+      // A block of the editor, measured without margins: an inline label would sit in a taller line box than the
+      // editor measures, and every line after it would drift from where the editor places it.
       ".cm-named-block-handle": {
+        display: "flex",
         margin: "0 !important",
+        padding: "0.35rem 0 0.15rem",
       },
     }),
   ];

package/src/styles.css

@@ -9,6 +9,19 @@
   }
 }
 
+/* The dictation bar's controls match the toolbar's own, so the row keeps its height when the bar stands in. */
+[data-k2b-editor-toolbar] .k2b-dictation-bar {
+  --k2b-dictation-control: 1.75rem;
+}
+
+/* While dictating, the bar stands in for the action row. On a phone it fills the whole toolbar line; the host's start
+   and end controls come back when dictation ended. */
+@media (max-width: 47.999rem) {
+  [data-k2b-editor-toolbar][data-dictating] > :not(.k2b-dictation-bar) {
+    display: none;
+  }
+}
+
 /* ── Slash-command autocomplete palette ─────────────────────────────────
    The CodeMirror autocomplete tooltip is portaled outside the editor
    surface AND its theme is injected as a runtime `<style>` after this file
@@ -269,13 +282,21 @@
   }
 }
 
-/* A rendered block in the editor, and the box the note's server preview reserves for a chart in its place. */
+/* A rendered block in the editor, and the box the note's server preview reserves for a chart in its place. The editor
+   measures blocks without margins, so the space above and below the frame is the block's own padding and the frame is
+   drawn inside it; a margin would move every line after the block away from where the editor places it. */
 .cm-query-block-widget {
+  position: relative;
   display: block;
-  margin: 0.5rem 0;
-  padding: 0.5rem;
+  padding: calc(1rem + 1px) calc(0.5rem + 1px);
+}
+.cm-query-block-widget::before {
+  content: "";
+  position: absolute;
+  inset: 0.5rem 0;
   border: 1px solid var(--ui-border);
   border-radius: var(--k2b-radius-control);
+  pointer-events: none;
 }
 .cm-query-block-preview.notebook-book-content {
   max-width: none;