@dxos/react-ui-editor 0.4.3-main.38898ae → 0.4.3-main.3a01342

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 // packages/ui/react-ui-editor/src/index.ts
+import { keymap as keymap8 } from "@codemirror/view";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
-import { keymap as keymap7 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/index.ts
 import { tags as tags2 } from "@lezer/highlight";
@@ -9,7 +9,7 @@ import { tags as tags2 } from "@lezer/highlight";
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView15 } from "@codemirror/view";
-import { vim } from "@replit/codemirror-vim";
+import { useFocusableGroup } from "@fluentui/react-tabster";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
 import { log as log2 } from "@dxos/log";
@@ -3517,13 +3517,42 @@ var mention = ({ onSearch }) => {
   });
 };
 
+// packages/ui/react-ui-editor/src/extensions/modes.ts
+import { Facet as Facet4 } from "@codemirror/state";
+import { keymap as keymap6 } from "@codemirror/view";
+import { vim } from "@replit/codemirror-vim";
+var editorMode = Facet4.define({
+  combine: (modes) => modes[0] ?? {}
+});
+var EditorModes = {
+  default: [],
+  vim: [
+    vim(),
+    editorMode.of({
+      type: "vim",
+      noTabster: true
+    }),
+    keymap6.of([
+      {
+        key: "Alt-Escape",
+        run: (view) => {
+          view.dispatch({
+            userEvent: "focus.container"
+          });
+          return true;
+        }
+      }
+    ])
+  ]
+};
+
 // packages/ui/react-ui-editor/src/extensions/outliner.ts
 var outliner = (options = {}) => {
   return [];
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap6 } from "@codemirror/view";
+import { keymap as keymap7 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -3533,7 +3562,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap6.of([
+    keymap7.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -3821,11 +3850,10 @@ var codeTheme = {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
-var EditorModes = [
-  "default",
-  "vim"
-];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, editorMode, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
+  const tabsterDOMAttribute = useFocusableGroup({
+    tabBehavior: "limited"
+  });
   const { themeMode } = useThemeContext();
   const rootRef = useRef(null);
   const [view, setView] = useState2(null);
@@ -3860,7 +3888,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         EditorView15.exceptionSink.of((err) => {
           log2.catch(err, void 0, {
             F: __dxlog_file3,
-            L: 135,
+            L: 112,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -3876,14 +3904,20 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         EditorView15.contentAttributes.of({
           class: slots.content?.className ?? ""
         }),
+        // Focus.
+        EditorView15.updateListener.of((update2) => {
+          update2.transactions.forEach((transaction) => {
+            if (transaction.isUserEvent("focus.container")) {
+              rootRef.current?.focus();
+            }
+          });
+        }),
         // State.
         EditorView15.editable.of(!readonly),
         EditorState2.readOnly.of(!!readonly),
         // Storage and replication.
         // NOTE: This must come before user extensions.
         model.extension,
-        // TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
-        editorMode === "vim" && vim(),
         // Custom.
         ...extensions
       ].filter(isNotFalsy4)
@@ -3903,6 +3937,9 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     });
     view?.destroy();
     setView(newView);
+    if (state.facet(editorMode).noTabster) {
+      rootRef.current.removeAttribute("data-tabster");
+    }
     return () => {
       newView?.destroy();
       setView(null);
@@ -3911,35 +3948,27 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     rootRef,
     model,
     readonly,
-    editorMode,
     themeMode
   ]);
   const handleKeyUp = useCallback((event) => {
-    const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+    const { key } = event;
     switch (key) {
       case "Enter": {
         view?.focus();
         break;
       }
-      case "Escape": {
-        if (editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey)) {
-          view?.focus();
-        }
-        break;
-      }
     }
   }, [
-    view,
-    editorMode
+    view
   ]);
   return /* @__PURE__ */ React.createElement("div", {
-    key: model.id,
     role: "none",
+    ref: rootRef,
+    key: model.id,
     tabIndex: 0,
-    ...slots.root,
-    // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
     onKeyUp: handleKeyUp,
-    ref: rootRef
+    ...slots.root,
+    ...tabsterDOMAttribute
   });
 });
 var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
@@ -4643,6 +4672,7 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  editorMode,
   editorWithToolbarLayout,
   focusComment,
   formatting,
@@ -4652,7 +4682,7 @@ export {
   hr,
   image,
   insertTable,
-  keymap7 as keymap,
+  keymap8 as keymap,
   link,
   listener,
   logChanges,