@dxos/react-ui-editor 0.7.5-main.9d26e3a → 0.7.5-main.e9bb01b

package/src/components/EditorToolbar/util.ts

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { create, type ReactiveObject } from '@dxos/live-object';
+import { type Label, type ThemedClassName } from '@dxos/react-ui';
+import {
+  type MenuSeparator,
+  type MenuItemGroup,
+  type ToolbarMenuActionGroupProperties,
+  type MenuActionProperties,
+  createMenuAction,
+  createMenuItemGroup,
+  type ActionGraphProps,
+} from '@dxos/react-ui-menu';
+
+import type { EditorAction, EditorActionPayload, EditorViewMode, Formatting } from '../../extensions';
+import { translationKey } from '../../translations';
+
+export type EditorToolbarState = Formatting &
+  Partial<{ comment: boolean; viewMode: EditorViewMode; selection: boolean }>;
+
+export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
+  return useMemo(() => create<EditorToolbarState>(initialState), []);
+};
+
+export type EditorToolbarFeatureFlags = Partial<{
+  headings: boolean;
+  formatting: boolean;
+  lists: boolean;
+  blocks: boolean;
+  comment: boolean;
+  search: boolean;
+  viewMode: boolean;
+}>;
+
+export type EditorToolbarActionGraphProps = {
+  state: ReactiveObject<EditorToolbarState>;
+  // TODO(wittjosiah): Control positioning.
+  customActions?: () => ActionGraphProps;
+  onAction: (action: EditorAction) => void;
+};
+
+export type EditorToolbarProps = ThemedClassName<
+  EditorToolbarActionGraphProps & EditorToolbarFeatureFlags & { attendableId?: string; role?: string }
+>;
+
+export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
+
+export const createEditorAction = (
+  payload: EditorActionPayload & Partial<MenuActionProperties>,
+  icon: string,
+  label: Label = [`${payload.type} label`, { ns: translationKey }],
+  id: string = payload.type,
+) => createMenuAction(id, { icon, label, ...payload }) as EditorAction;
+
+export const createEditorActionGroup = (
+  id: string,
+  props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
+  icon?: string,
+) => createMenuItemGroup(id, { icon, iconOnly: true, ...props });
+
+export const editorToolbarSearch = createEditorAction({ type: 'search' }, 'ph--magnifying-glass--regular');

package/src/components/EditorToolbar/viewMode.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type NodeArg } from '@dxos/app-graph';
+import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+
+import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { translationKey } from '../../translations';
+
+const createViewModeGroupAction = (value: string) =>
+  createEditorActionGroup(
+    'viewMode',
+    {
+      variant: 'dropdownMenu',
+      applyActive: true,
+      selectCardinality: 'single',
+      value,
+    } as ToolbarMenuActionGroupProperties,
+    'ph--eye--regular',
+  );
+
+const createViewModeActions = (value: string) =>
+  Object.entries({
+    preview: 'ph--eye--regular',
+    source: 'ph--pencil-simple--regular',
+    readonly: 'ph--pencil-slash--regular',
+  }).map(([viewMode, icon]) => {
+    return createEditorAction(
+      { type: 'view-mode', data: viewMode, checked: viewMode === value },
+      icon,
+      [`${viewMode} mode label`, { ns: translationKey }],
+      `view-mode--${viewMode}`,
+    );
+  });
+
+export const createViewMode = (state: EditorToolbarState) => {
+  const value = state.viewMode ?? 'source';
+  const viewModeGroupAction = createViewModeGroupAction(value);
+  const viewModeActions = createViewModeActions(value);
+  return {
+    nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
+    edges: [
+      { source: 'root', target: 'viewMode' },
+      ...viewModeActions.map(({ id }) => ({ source: viewModeGroupAction.id, target: id })),
+    ],
+  };
+};

package/src/components/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './Toolbar';
+export * from './EditorToolbar';

package/src/extensions/comments.ts

@@ -22,13 +22,15 @@ import {
   ViewPlugin,
 } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { debounce, type UnsubscribeCallback } from '@dxos/async';
+import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
 import { documentId } from './selection';
+import { type EditorToolbarState } from '../components';
 import { type Comment, type Range } from '../types';
 import { Cursor, overlap, singleValueFacet, callbackWrapper } from '../util';
 
@@ -608,26 +610,17 @@ export const createExternalCommentSync = (
     },
   );
 
-export const useCommentState = (): [{ comment: boolean; selection: boolean }, Extension] => {
-  const [state, setState] = useState<{ comment: boolean; selection: boolean }>({
-    comment: false,
-    selection: false,
-  });
-
-  const observer = useMemo(
+export const useCommentState = (state: ReactiveObject<EditorToolbarState>): Extension => {
+  return useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
-          setState({
-            comment: selectionOverlapsComment(update.state),
-            selection: hasActiveSelection(update.state),
-          });
+          state.comment = selectionOverlapsComment(update.state);
+          state.selection = hasActiveSelection(update.state);
         }
       }),
-    [],
+    [state],
   );
-
-  return [state, observer];
 };
 
 /**

package/src/extensions/markdown/decorate.ts

@@ -73,7 +73,7 @@ class CheckboxWidget extends WidgetType {
 
   override toDOM(view: EditorView) {
     const input = document.createElement('input');
-    input.className = 'cm-task-checkbox ch-checkbox';
+    input.className = 'cm-task-checkbox dx-checkbox';
     input.type = 'checkbox';
     input.tabIndex = -1;
     input.checked = this._checked;

package/src/extensions/markdown/{action.ts → editorAction.ts}

@@ -4,6 +4,9 @@
 
 import { type EditorView } from '@codemirror/view';
 
+import { type Action } from '@dxos/app-graph';
+import { type MenuActionProperties } from '@dxos/react-ui-menu';
+
 import {
   Inline,
   List,
@@ -24,7 +27,7 @@ import {
 } from './formatting';
 import { createComment } from '../comments';
 
-export type ActionType =
+export type PayloadType =
   | 'view-mode'
   | 'blockquote'
   | 'strong'
@@ -44,18 +47,20 @@ export type ActionType =
   | 'strikethrough'
   | 'table';
 
-export type Action = {
-  type: ActionType;
+export type EditorActionPayload = {
+  type: PayloadType;
   data?: any;
 };
 
-export type ActionHandler = (view: EditorView, action: Action) => void;
+export type EditorAction = Action<MenuActionProperties & EditorActionPayload>;
+
+export type EditorPayloadHandler = (view: EditorView, payload: EditorActionPayload) => void;
 
-export const processAction: ActionHandler = (view, action) => {
+export const processEditorPayload: EditorPayloadHandler = (view, { type, data }) => {
   let inlineType, listType;
-  switch (action.type) {
+  switch (type) {
     case 'heading':
-      setHeading(parseInt(action.data))(view);
+      setHeading(parseInt(data))(view);
       break;
 
     case 'strong':
@@ -63,42 +68,39 @@ export const processAction: ActionHandler = (view, action) => {
     case 'strikethrough':
     case 'code':
       inlineType =
-        action.type === 'strong'
+        type === 'strong'
           ? Inline.Strong
-          : action.type === 'emphasis'
+          : type === 'emphasis'
             ? Inline.Emphasis
-            : action.type === 'strikethrough'
+            : type === 'strikethrough'
               ? Inline.Strikethrough
               : Inline.Code;
-      (typeof action.data === 'boolean' ? setStyle(inlineType, action.data) : toggleStyle(inlineType))(view);
+      (typeof data === 'boolean' ? setStyle(inlineType, data) : toggleStyle(inlineType))(view);
       break;
 
     case 'list-ordered':
     case 'list-bullet':
     case 'list-task':
-      listType =
-        action.type === 'list-ordered' ? List.Ordered : action.type === 'list-bullet' ? List.Bullet : List.Task;
-      (action.data === false ? removeList(listType) : action.data === true ? addList(listType) : toggleList(listType))(
-        view,
-      );
+      listType = type === 'list-ordered' ? List.Ordered : type === 'list-bullet' ? List.Bullet : List.Task;
+      (data === false ? removeList(listType) : data === true ? addList(listType) : toggleList(listType))(view);
       break;
 
     case 'blockquote':
-      (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
+      (data === false ? removeBlockquote : data === true ? addBlockquote : toggleBlockquote)(view);
       break;
     case 'codeblock':
-      (action.data === false ? removeCodeblock : addCodeblock)(view);
+      (data === false ? removeCodeblock : addCodeblock)(view);
       break;
     case 'table':
       insertTable(view);
       break;
 
     case 'link':
-      (action.data === false ? removeLink : addLink())(view);
+      (data === false ? removeLink : addLink())(view);
       break;
 
     case 'image':
-      addLink({ url: action.data, image: true })(view);
+      addLink({ url: data, image: true })(view);
       break;
 
     case 'comment':

package/src/extensions/markdown/formatting.test.ts

@@ -182,12 +182,13 @@ describe('removeStyle', () => {
 
   testCommand('can remove code style', 'a `{variable}`', code, 'a {variable}');
 
-  testCommand(
-    'can remove emphasis across multiple blocks',
-    '{*one*\n\n# *two*\n\n> 1. *three} four*\n',
-    em,
-    '{one\n\n# two\n\n> 1. three} *four*\n',
-  );
+  // TODO(dmaretskyi): Flaky on CI: https://cloud.nx.app/runs/0byxg4Uq5G/task/react-ui-editor%3Atest
+  // testCommand(
+  //   'can remove emphasis across multiple blocks',
+  //   '{*one*\n\n# *two*\n\n> 1. *three} four*\n',
+  //   em,
+  //   '{one\n\n# two\n\n> 1. three} *four*\n',
+  // );
 
   testCommand('can shrink existing styles', '*one {two three} four*', em, '*one* {two three} *four*');
 

package/src/extensions/markdown/formatting.ts

@@ -15,7 +15,11 @@ import {
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
+
+import { type ReactiveObject } from '@dxos/live-object';
+
+import { type EditorToolbarState } from '../../components';
 
 // Markdown refs:
 // https://github.github.com/gfm
@@ -25,11 +29,11 @@ import { useMemo, useState } from 'react';
 // For inline styles `strong`, `emphasis`, `strikethrough`, and `code`,
 // the field only holds true when *all* selected text has the style,
 // or when the selection is a cursor inside such a style.
-export type Formatting = {
-  blankLine?: boolean;
+export type Formatting = Partial<{
+  blankLine: boolean;
   // The type of the block at the selection.
   // If multiple different block types are selected, this will hold null.
-  blockType?:
+  blockType:
     | 'codeblock'
     | 'heading1'
     | 'heading2'
@@ -41,20 +45,20 @@ export type Formatting = {
     | 'tablecell'
     | null;
   // Whether all selected text is wrapped in a blockquote.
-  blockQuote?: boolean;
+  blockQuote: boolean;
   // Whether the selected text is strong.
-  strong?: boolean;
+  strong: boolean;
   // Whether the selected text is emphasized.
-  emphasis?: boolean;
+  emphasis: boolean;
   // Whether the selected text is stricken through.
-  strikethrough?: boolean;
+  strikethrough: boolean;
   // Whether the selected text is inline code.
-  code?: boolean;
+  code: boolean;
   // Whether there are links in the selected text.
-  link?: boolean;
+  link: boolean;
   // If all selected blocks have the same (innermost) list style, that is indicated here.
-  listStyle?: null | 'ordered' | 'bullet' | 'task';
-};
+  listStyle: null | 'ordered' | 'bullet' | 'task';
+}>;
 
 export const formattingEquals = (a: Formatting, b: Formatting) =>
   a.blockType === b.blockType &&
@@ -1246,24 +1250,16 @@ export const getFormatting = (state: EditorState): Formatting => {
 /**
  * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (): [Formatting | undefined, Extension] => {
-  const [state, setState] = useState<Formatting>();
-  const observer = useMemo(
+export const useFormattingState = (state: ReactiveObject<EditorToolbarState>): Extension => {
+  return useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
-          setState((prevState) => {
-            const newState = getFormatting(update.state);
-            if (!prevState || !formattingEquals(prevState, newState)) {
-              return newState;
-            }
-
-            return prevState;
+          Object.entries(getFormatting(update.state)).forEach(([key, active]) => {
+            state[key as keyof Formatting] = active as any;
           });
         }
       }),
     [],
   );
-
-  return [state, observer];
 };

package/src/extensions/markdown/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './action';
+export * from './editorAction';
 export * from './bundle';
 export * from './debug';
 export * from './decorate';

package/src/extensions/markdown/styles.ts

@@ -110,4 +110,25 @@ export const formattingStyles = EditorView.theme({
     borderTop: '0.5rem solid transparent',
     borderBottom: '0.5rem solid transparent',
   },
+  '.cm-image-with-loader': {
+    display: 'block',
+    opacity: '0',
+    transitionDuration: '350ms',
+    transitionProperty: 'opacity',
+  },
+  '.cm-image-with-loader.cm-loaded-image': {
+    opacity: '1',
+  },
+  '.cm-image-wrapper': {
+    'grid-template-columns': '1fr',
+    display: 'grid',
+    margin: '0.5rem 0',
+    overflow: 'hidden',
+    transitionDuration: '350ms',
+    transitionProperty: 'height',
+    '& > *': {
+      'grid-row-start': 1,
+      'grid-column-start': 1,
+    },
+  },
 });

package/src/hooks/useActionHandler.ts

@@ -3,10 +3,10 @@
 //
 
 import { type EditorView } from '@codemirror/view';
+import { useCallback } from 'react';
 
-import { type ToolbarProps } from '../components';
-import { processAction } from '../extensions';
+import { type EditorAction, processEditorPayload } from '../extensions';
 
-export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {
-  return (action) => view && processAction(view, action);
+export const useActionHandler = (view?: EditorView | null) => {
+  return useCallback((action: EditorAction) => view && processEditorPayload(view, action.properties), [view]);
 };

package/src/index.ts

@@ -14,6 +14,10 @@ export * from './components';
 export * from './defaults';
 export * from './extensions';
 export * from './hooks';
+export {
+  stackItemContentEditorClassNames,
+  stackItemContentToolbarClassNames,
+} from './styles/stack-item-content-class-names';
 export * from './types';
 export * from './util';
 

package/src/styles/markdown.ts

@@ -13,7 +13,7 @@ const headings: Record<HeadingLevel, string> = {
   3: 'text-2xl',
   4: 'text-xl',
   5: 'text-lg',
-  6: 'text-md',
+  6: '', // TODO(burdon): Should be text-base, but that's a color in our system.
 };
 
 export const theme = {

package/src/styles/stack-item-content-class-names.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { mx } from '@dxos/react-ui-theme';
+
+export const stackItemContentEditorClassNames = (role?: string) =>
+  mx(
+    'dx-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface',
+    role === 'article' ? 'min-bs-0' : '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24',
+  );
+
+export const stackItemContentToolbarClassNames = (role?: string) =>
+  mx(
+    'attention-surface is-full border-be !border-separator',
+    role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
+  );

package/src/styles/theme.ts

@@ -149,7 +149,7 @@ export const defaultTheme: ThemeStyles = {
    * Tooltip.
    */
   '.cm-tooltip': {
-    background: 'var(--dx-base)',
+    background: 'var(--dx-baseSurface)',
   },
   '.cm-tooltip-below': {},
 

package/dist/types/src/components/Toolbar/Toolbar.d.ts

@@ -1,34 +0,0 @@
-import { type Icon } from '@phosphor-icons/react';
-import React, { type PropsWithChildren } from 'react';
-import { type ThemedClassName, type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps } from '@dxos/react-ui';
-import { type EditorViewMode, type Action, type Formatting } from '../../extensions';
-declare const useToolbarContext: (consumerName: string) => ToolbarProps;
-export type ToolbarProps = ThemedClassName<PropsWithChildren<{
-    state: (Formatting & {
-        comment?: boolean;
-        mode?: EditorViewMode;
-        selection?: boolean;
-    }) | undefined;
-    onAction?: (action: Action) => void;
-}>>;
-type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & {
-    Icon: Icon;
-};
-export type MarkdownCustomOptions = {
-    onUpload?: (file: File) => Promise<{
-        url?: string;
-    } | undefined>;
-};
-export declare const Toolbar: {
-    Root: ({ children, onAction, classNames, state }: ToolbarProps) => React.JSX.Element;
-    Button: ({ Icon, children, ...props }: ToolbarToggleButtonProps) => React.JSX.Element;
-    Separator: () => React.JSX.Element;
-    View: ({ mode }: {
-        mode: EditorViewMode;
-    }) => React.JSX.Element;
-    Markdown: () => React.JSX.Element;
-    Custom: ({ onUpload }?: MarkdownCustomOptions) => React.JSX.Element;
-    Actions: () => React.JSX.Element;
-};
-export { useToolbarContext };
-//# sourceMappingURL=Toolbar.d.ts.map

package/dist/types/src/components/Toolbar/Toolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,IAAI,EA2BV,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAGnF,OAAO,EAML,KAAK,eAAe,EACpB,KAAK,2BAA2B,IAAI,kCAAkC,EAGvE,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,MAAM,EAAmB,KAAK,UAAU,EAAmB,MAAM,kBAAkB,CAAC;AAavH,QAAA,MAA+B,iBAAiB,wCAA0C,CAAC;AAE3F,MAAM,MAAM,YAAY,GAAG,eAAe,CACxC,iBAAiB,CAAC;IAChB,KAAK,EAAE,CAAC,UAAU,GAAG;QAAE,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,cAAc,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IACpG,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC,CACH,CAAC;AA4BF,KAAK,wBAAwB,GAAG,kCAAkC,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC;AAyPpF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;CAClE,CAAC;AAkKF,eAAO,MAAM,OAAO;sDAvb4C,YAAY;2CA4BjB,wBAAwB;;qBA6SnD;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE;;4BAlDlB,qBAAqB;;CAwK1D,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/types/src/components/Toolbar/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Toolbar';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Toolbar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/types/src/extensions/markdown/action.d.ts

@@ -1,9 +0,0 @@
-import { type EditorView } from '@codemirror/view';
-export type ActionType = 'view-mode' | 'blockquote' | 'strong' | 'codeblock' | 'comment' | 'heading' | 'image' | 'emphasis' | 'code' | 'link' | 'list-bullet' | 'list-ordered' | 'list-task' | 'mention' | 'prompt' | 'search' | 'strikethrough' | 'table';
-export type Action = {
-    type: ActionType;
-    data?: any;
-};
-export type ActionHandler = (view: EditorView, action: Action) => void;
-export declare const processAction: ActionHandler;
-//# sourceMappingURL=action.d.ts.map

package/dist/types/src/extensions/markdown/action.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/action.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAsBnD,MAAM,MAAM,UAAU,GAClB,WAAW,GACX,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,SAAS,GACT,SAAS,GACT,OAAO,GACP,UAAU,GACV,MAAM,GACN,MAAM,GACN,aAAa,GACb,cAAc,GACd,WAAW,GACX,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,eAAe,GACf,OAAO,CAAC;AAEZ,MAAM,MAAM,MAAM,GAAG;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEvE,eAAO,MAAM,aAAa,EAAE,aA4D3B,CAAC"}