@dxos/react-ui-editor 0.8.2-main.5ca3450 → 0.8.2-main.600d381

package/src/components/EditorToolbar/headings.ts

@@ -2,10 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type EditorView } from '@codemirror/view';
+
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { setHeading } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const createHeadingGroupAction = (value: string) =>
@@ -20,7 +23,7 @@ const createHeadingGroupAction = (value: string) =>
     'ph--text-h--regular',
   );
 
-const createHeadingActions = (value: string) =>
+const createHeadingActions = (getView: () => EditorView) =>
   Object.entries({
     '0': 'ph--paragraph--regular',
     '1': 'ph--text-h-one--regular',
@@ -31,12 +34,10 @@ const createHeadingActions = (value: string) =>
     '6': 'ph--text-h-six--regular',
   }).map(([levelStr, icon]) => {
     const level = parseInt(levelStr);
-    return createEditorAction(
-      { type: 'heading', data: level, checked: value === levelStr },
+    return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
+      label: ['heading level label', { count: level, ns: translationKey }],
       icon,
-      ['heading level label', { count: level, ns: translationKey }],
-      `heading--${levelStr}`,
-    );
+    });
   });
 
 const computeHeadingValue = (state: EditorToolbarState) => {
@@ -45,10 +46,10 @@ const computeHeadingValue = (state: EditorToolbarState) => {
   return header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : '';
 };
 
-export const createHeadings = (state: EditorToolbarState) => {
+export const createHeadings = (state: EditorToolbarState, getView: () => EditorView) => {
   const headingValue = computeHeadingValue(state);
   const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(headingValue);
+  const headingActions = createHeadingActions(getView);
   return {
     nodes: [headingGroupAction as NodeArg<any>, ...headingActions],
     edges: [

package/src/components/EditorToolbar/image.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createEditorAction } from './util';
+
+const createImageUploadAction = (onImageUpload: () => void) =>
+  createEditorAction('image', onImageUpload, {
+    testId: 'editor.toolbar.image',
+    icon: 'ph--image-square--regular',
+  });
+
+export const createImageUpload = (onImageUpload: () => void) => ({
+  nodes: [createImageUploadAction(onImageUpload)],
+  edges: [{ source: 'root', target: 'image' }],
+});

package/src/components/EditorToolbar/lists.ts

@@ -2,11 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type EditorView } from '@codemirror/view';
+
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { type PayloadType } from '../../extensions';
+import { addList, List, removeList } from '../../extensions';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',
@@ -21,15 +23,32 @@ const createListGroupAction = (value: string) =>
     value,
   } as ToolbarMenuActionGroupProperties);
 
-const createListActions = (value: string) =>
-  Object.entries(listStyles).map(([listStyle, icon]) =>
-    createEditorAction({ type: `list-${listStyle}` as PayloadType, checked: value === listStyle }, icon),
-  );
+const createListActions = (value: string, getView: () => EditorView) =>
+  Object.entries(listStyles).map(([listStyle, icon]) => {
+    const checked = value === listStyle;
+    return createEditorAction(
+      `list-${listStyle}`,
+      () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+
+        const listType = listStyle === 'ordered' ? List.Ordered : listStyle === 'bullet' ? List.Bullet : List.Task;
+        if (checked) {
+          removeList(listType)(view);
+        } else {
+          addList(listType)(view);
+        }
+      },
+      { checked, icon },
+    );
+  });
 
-export const createLists = (state: EditorToolbarState) => {
+export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
   const value = state.listStyle ?? '';
   const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value);
+  const listActionsMap = createListActions(value, getView);
   return {
     nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
     edges: [

package/src/components/EditorToolbar/search.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { openSearchPanel } from '@codemirror/search';
+import { type EditorView } from '@codemirror/view';
+
+import { createEditorAction } from './util';
+
+const createSearchAction = (getView: () => EditorView) =>
+  createEditorAction('search', () => openSearchPanel(getView()), {
+    testId: 'editor.toolbar.search',
+    icon: 'ph--magnifying-glass--regular',
+  });
+
+export const createSearch = (getView: () => EditorView) => ({
+  nodes: [createSearchAction(getView)],
+  edges: [{ source: 'root', target: 'search' }],
+});

package/src/components/EditorToolbar/util.ts

@@ -2,21 +2,23 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type EditorView } from '@codemirror/view';
 import { useMemo } from 'react';
 
+import { type Action } from '@dxos/app-graph';
 import { live, type Live } from '@dxos/live-object';
-import { type Label, type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
 import {
   type MenuSeparator,
   type MenuItemGroup,
   type ToolbarMenuActionGroupProperties,
-  type MenuActionProperties,
   createMenuAction,
   createMenuItemGroup,
   type ActionGraphProps,
+  type MenuActionProperties,
 } from '@dxos/react-ui-menu';
 
-import type { EditorAction, EditorActionPayload, EditorViewMode, Formatting } from '../../extensions';
+import type { EditorAction, EditorViewMode, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
 export type EditorToolbarState = Formatting &
@@ -31,16 +33,18 @@ export type EditorToolbarFeatureFlags = Partial<{
   formatting: boolean;
   lists: boolean;
   blocks: boolean;
-  comment: boolean;
   search: boolean;
-  viewMode: boolean;
+  // TODO(wittjosiah): Factor out. Depend on plugin-level capabilities.
+  comment: boolean;
+  image: () => void;
+  viewMode: (mode: EditorViewMode) => void;
 }>;
 
 export type EditorToolbarActionGraphProps = {
   state: Live<EditorToolbarState>;
+  getView: () => EditorView;
   // TODO(wittjosiah): Control positioning.
   customActions?: () => ActionGraphProps;
-  onAction: (action: EditorAction) => void;
 };
 
 export type EditorToolbarProps = ThemedClassName<
@@ -49,17 +53,13 @@ export type EditorToolbarProps = ThemedClassName<
 
 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 createEditorAction = (id: string, invoke: () => void, properties: Partial<MenuActionProperties>) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = properties;
+  return createMenuAction(id, invoke, { label, ...rest }) as Action<MenuActionProperties>;
+};
 
 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/view-mode.ts

@@ -6,6 +6,7 @@ import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { type EditorViewMode } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const createViewModeGroupAction = (value: string) =>
@@ -20,24 +21,24 @@ const createViewModeGroupAction = (value: string) =>
     'ph--eye--regular',
   );
 
-const createViewModeActions = (value: string) =>
+const createViewModeActions = (value: string, onViewModeChange: (mode: EditorViewMode) => void) =>
   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 },
+    const checked = viewMode === value;
+    return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode as EditorViewMode), {
+      label: [`${viewMode} mode label`, { ns: translationKey }],
+      checked,
       icon,
-      [`${viewMode} mode label`, { ns: translationKey }],
-      `view-mode--${viewMode}`,
-    );
+    });
   });
 
-export const createViewMode = (state: EditorToolbarState) => {
+export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {
   const value = state.viewMode ?? 'source';
   const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value);
+  const viewModeActions = createViewModeActions(value, onViewModeChange);
   return {
     nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
     edges: [

package/src/hooks/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './useActionHandler';
 export * from './useTextEditor';

package/dist/types/src/hooks/useActionHandler.d.ts

@@ -1,4 +0,0 @@
-import { type EditorView } from '@codemirror/view';
-import { type EditorAction } from '../extensions';
-export declare const useActionHandler: (view?: EditorView | null) => (action: EditorAction) => void | null | undefined;
-//# sourceMappingURL=useActionHandler.d.ts.map

package/dist/types/src/hooks/useActionHandler.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useActionHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useActionHandler.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,KAAK,YAAY,EAAwB,MAAM,eAAe,CAAC;AAExE,eAAO,MAAM,gBAAgB,GAAI,OAAO,UAAU,GAAG,IAAI,cAC3B,YAAY,4BACzC,CAAC"}

package/dist/types/src/stories/InputMode.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputMode.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/InputMode.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAmB,MAAM,OAAO,CAAC;AAiBxC,OAAO,EAAmC,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGpF,KAAK,UAAU,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,kBAAkB,CAAC;AAqEpF,eAAO,MAAM,OAAO;;CAanB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC;;;iEAxFwE,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FpF,wBAKE"}

package/src/hooks/useActionHandler.ts

@@ -1,12 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-import { useCallback } from 'react';
-
-import { type EditorAction, processEditorPayload } from '../extensions';
-
-export const useActionHandler = (view?: EditorView | null) => {
-  return useCallback((action: EditorAction) => view && processEditorPayload(view, action.properties), [view]);
-};

package/src/stories/InputMode.stories.tsx

@@ -1,124 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React, { useState } from 'react';
-
-import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-ui';
-import { attentionSurface, mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { EditorToolbar, useEditorToolbarState } from '../components';
-import {
-  type EditorInputMode,
-  decorateMarkdown,
-  createMarkdownExtensions,
-  formattingKeymap,
-  useFormattingState,
-  createBasicExtensions,
-  createThemeExtensions,
-  InputModeExtensions,
-} from '../extensions';
-import { useActionHandler, useTextEditor, type UseTextEditorProps } from '../hooks';
-import translations from '../translations';
-
-type StoryProps = { placeholder?: string; readOnly?: boolean } & UseTextEditorProps;
-
-const DefaultStory = ({ autoFocus, initialValue, placeholder, readOnly }: StoryProps) => {
-  const { themeMode } = useThemeContext();
-  const toolbarState = useEditorToolbarState({ viewMode: 'source' });
-  const trackFormatting = useFormattingState(toolbarState);
-  const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
-  const { parentRef, view } = useTextEditor(
-    () => ({
-      autoFocus,
-      initialValue,
-      moveToEndOfLine: true,
-      extensions: [
-        editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({ placeholder, lineWrapping: true, readOnly }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        decorateMarkdown(),
-        formattingKeymap(),
-        trackFormatting,
-      ],
-    }),
-    [editorInputMode, themeMode, placeholder, readOnly],
-  );
-
-  const handleAction = useActionHandler(view);
-
-  // TODO(marijn): This doesn't update the state on view changes.
-  //  Also not sure if view is even guaranteed to exist at this point.
-  return (
-    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      {toolbarState && <EditorToolbar onAction={handleAction} state={toolbarState} />}
-      <div role='none' className='grow overflow-hidden'>
-        <div className={attentionSurface} ref={parentRef} />
-      </div>
-    </div>
-  );
-};
-
-const _EditorInputModeToolbar = ({
-  editorInputMode,
-  setEditorInputMode,
-}: {
-  editorInputMode: EditorInputMode;
-  setEditorInputMode: (mode: EditorInputMode) => void;
-}) => {
-  return (
-    <Select.Root value={editorInputMode} onValueChange={(value) => setEditorInputMode(value as EditorInputMode)}>
-      <NaturalToolbar.Button asChild>
-        <Select.TriggerButton variant='ghost'>{editorInputMode}</Select.TriggerButton>
-      </NaturalToolbar.Button>
-      <Select.Portal>
-        <Select.Content>
-          <Select.ScrollUpButton />
-          <Select.Viewport>
-            {['default', 'vim'].map((mode) => (
-              <Select.Option key={mode} value={mode}>
-                {mode}
-              </Select.Option>
-            ))}
-          </Select.Viewport>
-          <Select.ScrollDownButton />
-          <Select.Arrow />
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-  );
-};
-
-export const Default = {
-  render: () => {
-    const { themeMode } = useThemeContext();
-    const { parentRef } = useTextEditor({
-      extensions: [
-        //
-        createBasicExtensions({ placeholder: 'Enter text...' }),
-        createThemeExtensions({ themeMode }),
-      ],
-    });
-
-    return <div ref={parentRef} className={attentionSurface} />;
-  },
-};
-
-export const Markdown = {
-  args: {
-    autoFocus: true,
-    placeholder: 'Text...',
-    initialValue: '# Demo\n\nThis is a document.\n\n',
-  },
-};
-
-export default {
-  title: 'ui/react-ui-editor/InputMode',
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
-  parameters: { translations, layout: 'fullscreen' },
-};