@dxos/react-ui-editor 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/dist/lib/browser/index.mjs

@@ -296,7 +296,7 @@ var EditorContent = /* @__PURE__ */ forwardRef(({ classNames, id, extensions, se
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: mx("is-full outline-none focus:border-accentSurface focus-within:border-neutralFocusIndicator", classNames),
+    className: mx("w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator", classNames),
     ref: parentRef,
     ...focusable ? focusAttributes : {}
   });
@@ -702,7 +702,7 @@ import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React2, { Fragment, useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 import { addEventListener } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
-import { DX_ANCHOR_ACTIVATE, Icon, Popover, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { DX_ANCHOR_ACTIVATE, Icon, Popover, ScrollArea, toLocalizedString, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/EditorMenuProvider/EditorMenuProvider.tsx";
 var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp, defaultOpen, numItems = 8, onOpenChange, onActivate, onSelect, onCancel }) => {
   const { tx } = useThemeContext();
@@ -714,7 +714,7 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     onChange: (open2) => {
       invariant(viewRef.current, void 0, {
         F: __dxlog_file2,
-        L: 65,
+        L: 66,
         S: void 0,
         A: [
           "viewRef.current",
@@ -733,8 +733,8 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
       return;
     }
     return addEventListener(root, DX_ANCHOR_ACTIVATE, (event) => {
-      const { trigger, refId } = event;
-      if (!refId) {
+      const { trigger, dxn } = event;
+      if (!dxn) {
         triggerRef.current = trigger;
         if (onActivate) {
           onActivate({
@@ -756,7 +756,7 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
   const handleSelect = useCallback2((item) => {
     invariant(viewRef.current, void 0, {
       F: __dxlog_file2,
-      L: 102,
+      L: 101,
       S: void 0,
       A: [
         "viewRef.current",
@@ -780,34 +780,36 @@ var EditorMenuProvider = ({ children, view, groups, currentItem, open: openProp,
     virtualRef: triggerRef
   }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
     align: "start",
-    classNames: tx("menu.content", "menu--exotic-unfocusable", {
-      elevation: "positioned"
-    }, [
-      "overflow-y-auto",
+    classNames: [
+      "flex flex-col",
       !menuGroups.length && "hidden"
-    ]),
+    ],
     style: {
       maxBlockSize: 36 * numItems + 10
     },
-    /**
-       * NOTE: We keep the focus in the editor, but Radix routes escape key.
-       */
+    // NOTE: We keep the focus in the editor, but Radix routes escape key.
     onEscapeKeyDown: () => {
-      onCancel?.({
-        view
-      });
+      const currentView = viewRef.current;
+      if (currentView) {
+        onCancel?.({
+          view: currentView
+        });
+      }
     },
     onOpenAutoFocus: (event) => event.preventDefault()
   }, /* @__PURE__ */ React2.createElement(Popover.Viewport, {
-    classNames: tx("menu.viewport", "menu__viewport--exotic-unfocusable", {})
-  }, /* @__PURE__ */ React2.createElement(Menu, {
+    asChild: true,
+    classNames: "dx-container"
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
+    thin: true
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React2.createElement(Menu, {
     groups: menuGroups,
     currentItem,
     onSelect: handleSelect
-  })), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))), /* @__PURE__ */ React2.createElement("div", {
-    ref: setRoot,
+  })))), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
-    className: "contents"
+    className: "contents",
+    ref: setRoot
   }, children));
 };
 var Menu = ({ groups, currentItem, onSelect }) => {
@@ -819,14 +821,14 @@ var Menu = ({ groups, currentItem, onSelect }) => {
     currentItem,
     onSelect
   }), index < groups.length - 1 && /* @__PURE__ */ React2.createElement("div", {
-    className: tx("menu.separator", "menu__item", {})
+    className: tx("menu.separator", {})
   }))));
 };
 var MenuGroup = ({ group, currentItem, onSelect }) => {
   const { tx } = useThemeContext();
   const { t } = useTranslation();
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, group.label && /* @__PURE__ */ React2.createElement("div", {
-    className: tx("menu.groupLabel", "menu__group__label", {})
+    className: tx("menu.groupLabel", {})
   }, /* @__PURE__ */ React2.createElement("span", null, toLocalizedString(group.label, t))), group.items.map((item) => /* @__PURE__ */ React2.createElement(MenuItem, {
     key: item.id,
     item,
@@ -854,8 +856,8 @@ var MenuItem = ({ item, current, onSelect }) => {
   ]);
   return /* @__PURE__ */ React2.createElement("li", {
     ref: listRef,
-    className: tx("menu.item", "menu__item--exotic-unfocusable", {}, [
-      current && "bg-hoverSurface"
+    className: tx("menu.item", {}, [
+      current && "bg-hover-surface"
     ]),
     onClick: handleSelect
   }, item.icon && /* @__PURE__ */ React2.createElement(Icon, {
@@ -934,10 +936,21 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
     handleOpenChange
   ]);
   const handleSelect = useCallback3(({ view, item }) => {
+    const { range } = view.state.field(popoverStateField) ?? {};
+    if (range) {
+      view.dispatch({
+        changes: {
+          from: range.from,
+          to: range.to,
+          insert: ""
+        }
+      });
+    }
     void item.onSelect?.({
       view,
       head: view.state.selection.main.head
     });
+    view.focus();
   }, []);
   const handleCancel = useCallback3(({ view }) => {
     const { range, trigger: trigger2 } = view.state.field(popoverStateField) ?? {};
@@ -1019,7 +1032,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder: placeholder2, filter =
 import { Atom } from "@effect-atom/atom-react";
 import React3, { memo, useMemo as useMemo3 } from "react";
 import { ElevationProvider } from "@dxos/react-ui";
-import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
+import { Menu as Menu2, MenuBuilder, useMenuActions } from "@dxos/react-ui-menu";
 
 // src/components/EditorToolbar/actions.ts
 import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
@@ -1041,11 +1054,13 @@ var createLists = (state, getView) => {
     edges: [
       {
         source: "root",
-        target: "list"
+        target: "list",
+        relation: "child"
       },
       ...listActionsMap.map(({ id }) => ({
         source: listGroupAction.id,
-        target: id
+        target: id,
+        relation: "child"
       }))
     ]
   };
@@ -1149,11 +1164,13 @@ var createBlocks = (state, getView) => {
     edges: [
       {
         source: "root",
-        target: "block"
+        target: "block",
+        relation: "child"
       },
       ...blockActions.map(({ id }) => ({
         source: blockGroupAction.id,
-        target: id
+        target: id,
+        relation: "child"
       }))
     ]
   };
@@ -1202,11 +1219,13 @@ var createFormatting = (state, getView) => {
     edges: [
       {
         source: "root",
-        target: "formatting"
+        target: "formatting",
+        relation: "child"
       },
       ...formattingActions.map(({ id }) => ({
         source: formattingGroupAction.id,
-        target: id
+        target: id,
+        relation: "child"
       }))
     ]
   };
@@ -1222,13 +1241,13 @@ var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
   value
 }, "ph--text-h--regular");
 var createHeadingActions = (currentLevel, getView) => Object.entries({
-  "0": "ph--paragraph--regular",
-  "1": "ph--text-h-one--regular",
-  "2": "ph--text-h-two--regular",
-  "3": "ph--text-h-three--regular",
-  "4": "ph--text-h-four--regular",
-  "5": "ph--text-h-five--regular",
-  "6": "ph--text-h-six--regular"
+  0: "ph--paragraph--regular",
+  1: "ph--text-h-one--regular",
+  2: "ph--text-h-two--regular",
+  3: "ph--text-h-three--regular",
+  4: "ph--text-h-four--regular",
+  5: "ph--text-h-five--regular",
+  6: "ph--text-h-six--regular"
 }).map(([levelStr, icon]) => {
   const level = parseInt(levelStr);
   return createEditorAction(`heading--${levelStr}`, {
@@ -1260,11 +1279,13 @@ var createHeadings = (state, getView) => {
     edges: [
       {
         source: "root",
-        target: "heading"
+        target: "heading",
+        relation: "child"
       },
       ...headingActions.map(({ id }) => ({
         source: headingGroupAction.id,
-        target: id
+        target: id,
+        relation: "child"
       }))
     ]
   };
@@ -1282,7 +1303,8 @@ var createImageUpload = (onImageUpload) => ({
   edges: [
     {
       source: "root",
-      target: "image"
+      target: "image",
+      relation: "child"
     }
   ]
 });
@@ -1300,7 +1322,8 @@ var createSearch = (getView) => ({
   edges: [
     {
       source: "root",
-      target: "search"
+      target: "search",
+      relation: "child"
     }
   ]
 });
@@ -1341,11 +1364,13 @@ var createViewMode = (state, onViewModeChange) => {
     edges: [
       {
         source: "root",
-        target: "viewMode"
+        target: "viewMode",
+        relation: "child"
       },
       ...viewModeActions.map(({ id }) => ({
         source: viewModeGroupAction.id,
-        target: id
+        target: id,
+        relation: "child"
       }))
     ]
   };
@@ -1356,11 +1381,11 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, role, attendableId, onAc
   const menuProps = useEditorToolbarActionGraph(props);
   return /* @__PURE__ */ React3.createElement(ElevationProvider, {
     elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ React3.createElement(MenuProvider, {
+  }, /* @__PURE__ */ React3.createElement(Menu2.Root, {
     ...menuProps,
     attendableId,
     onAction
-  }, /* @__PURE__ */ React3.createElement(ToolbarMenu, {
+  }, /* @__PURE__ */ React3.createElement(Menu2.Toolbar, {
     classNames,
     textBlockWidth: true
   })));
@@ -1387,41 +1412,34 @@ var useEditorToolbarActionGraph = ({ state, getView, customActions, ...features
 };
 var createToolbarActions = ({ state, getView, customActions, ...features }) => {
   return Atom.make((get) => {
-    const graph = {
-      nodes: [],
-      edges: []
-    };
-    const addSubGraph = (graph2, subGraph) => {
-      graph2.nodes.push(...subGraph.nodes);
-      graph2.edges.push(...subGraph.edges);
-    };
     const stateSnapshot = get(state);
+    const builder = MenuBuilder.make();
     if (features?.showHeadings ?? true) {
-      addSubGraph(graph, createHeadings(stateSnapshot, getView));
+      builder.subgraph(createHeadings(stateSnapshot, getView));
     }
     if (features?.showFormatting ?? true) {
-      addSubGraph(graph, createFormatting(stateSnapshot, getView));
+      builder.subgraph(createFormatting(stateSnapshot, getView));
     }
     if (features?.showLists ?? true) {
-      addSubGraph(graph, createLists(stateSnapshot, getView));
+      builder.subgraph(createLists(stateSnapshot, getView));
     }
     if (features?.showBlocks ?? true) {
-      addSubGraph(graph, createBlocks(stateSnapshot, getView));
+      builder.subgraph(createBlocks(stateSnapshot, getView));
     }
     if (features?.onImageUpload) {
-      addSubGraph(graph, createImageUpload(features.onImageUpload));
+      builder.subgraph(createImageUpload(features.onImageUpload));
     }
-    addSubGraph(graph, createGapSeparator());
+    builder.separator("gap");
     if (customActions) {
-      addSubGraph(graph, get(customActions));
+      builder.subgraph(get(customActions));
     }
     if (features?.showSearch ?? true) {
-      addSubGraph(graph, createSearch(getView));
+      builder.subgraph(createSearch(getView));
     }
     if (features?.onViewModeChange) {
-      addSubGraph(graph, createViewMode(stateSnapshot, features.onViewModeChange));
+      builder.subgraph(createViewMode(stateSnapshot, features.onViewModeChange));
     }
-    return graph;
+    return builder.build();
   });
 };
 
@@ -1463,15 +1481,17 @@ var EditorRoot = /* @__PURE__ */ forwardRef2(({ children, extensions: extensions
   }, children));
 });
 EditorRoot.displayName = "Editor.Root";
+var EDITOR_VIEWPORT_NAME = "Editor.Viewport";
 var EditorViewport = ({ classNames, children }) => {
   return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: mx2("grid grid-rows-[min-content_1fr] bs-full overflow-hidden", classNames)
+    className: mx2("grid grid-rows-[min-content_1fr] h-full overflow-hidden", classNames)
   }, children);
 };
-EditorViewport.displayName = "Editor.Viewport";
+EditorViewport.displayName = EDITOR_VIEWPORT_NAME;
+var EDITOR_CONTENT_NAME = "Editor.Content";
 var EditorContent2 = ({ extensions: providedExtensions, ...props }) => {
-  const { extensions: additionalExtensions = [], setController } = useEditorContext(EditorContent2.displayName);
+  const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_CONTENT_NAME);
   const extensions = useMemo5(() => [
     additionalExtensions,
     providedExtensions
@@ -1485,13 +1505,14 @@ var EditorContent2 = ({ extensions: providedExtensions, ...props }) => {
     ref: setController
   });
 };
-EditorContent2.displayName = "Editor.Content";
+EditorContent2.displayName = EDITOR_CONTENT_NAME;
+var EDITOR_TOOLBAR_NAME = "Editor.Toolbar";
 var EditorToolbar2 = (props) => {
-  const { controller, state } = useEditorContext(EditorToolbar2.displayName);
+  const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
   const getView = useCallback4(() => {
     invariant3(controller?.view, void 0, {
       F: __dxlog_file4,
-      L: 140,
+      L: 146,
       S: void 0,
       A: [
         "controller?.view",
@@ -1508,7 +1529,7 @@ var EditorToolbar2 = (props) => {
     state
   });
 };
-EditorToolbar2.displayName = "Editor.Toolbar";
+EditorToolbar2.displayName = EDITOR_TOOLBAR_NAME;
 var Editor = {
   Root: EditorRoot,
   Viewport: EditorViewport,
@@ -1527,20 +1548,20 @@ var EditorPreviewProvider = ({ children, onLookup }) => {
   const [value, setValue] = useState5({});
   const [open, setOpen] = useState5(false);
   const handleActivate = useCallback5((event) => {
-    const { refId, label, trigger: dxTrigger } = event;
+    const { dxn, label, trigger } = event;
     setValue((value2) => ({
       ...value2,
       link: {
         label,
-        ref: refId
+        dxn
       },
       pending: true
     }));
-    triggerRef.current = dxTrigger;
+    triggerRef.current = trigger;
     queueMicrotask(() => setOpen(true));
     void onLookup?.({
       label,
-      ref: refId
+      dxn
     }).then((target) => setValue((value2) => ({
       ...value2,
       target: target ?? void 0,
@@ -1572,9 +1593,9 @@ var EditorPreviewProvider = ({ children, onLookup }) => {
   }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
     virtualRef: triggerRef
   }), /* @__PURE__ */ React5.createElement("div", {
-    ref: setRoot,
     role: "none",
-    className: "contents"
+    className: "contents",
+    ref: setRoot
   }, children)));
 };
 export {