@dxos/react-ui-editor 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

package/src/util/react.tsx

@@ -6,8 +6,8 @@ import React, { type FC } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { ThemeProvider, Tooltip } from '@dxos/react-ui';
-import { type RenderCallback } from '@dxos/ui-editor';
-import { defaultTx } from '@dxos/ui-theme';
+import { defaultTx } from '@dxos/react-ui';
+import { type RenderCallback } from '@dxos/ui-editor/types';
 
 /**
  * @deprecated Use `trim` from `@dxos/util`.

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

@@ -1 +0,0 @@
-{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorContent/EditorContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAErE,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,cAAc,CAAC;AAE7E,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAC9C;IACE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,GAAG,kBAAkB,CACvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa;gBAXV,OAAO;YACX,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;0CA8DrC,CAAC"}

package/dist/types/src/components/EditorContent/controller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorContent/controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,IAAI,IAAI,UAAU,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,EAAE,gBAO5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,UAAU,GAAG,IAAI,KAAG,gBA2BhE,CAAC"}

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

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

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

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

package/dist/types/src/components/EditorToolbar/actions.d.ts

@@ -1,25 +0,0 @@
-import { type EditorView } from '@codemirror/view';
-import { type Node } from '@dxos/app-graph';
-import { type MenuItemGroup, type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
-import { type MenuActionProperties } from '@dxos/ui-types';
-import { type EditorToolbarState } from './useEditorToolbar';
-export declare const createLists: (state: EditorToolbarState, getView: () => EditorView) => {
-    nodes: (Node.NodeArg<any, Record<string, any>> | Readonly<Omit<Readonly<{
-        id: string;
-        type: string;
-        cacheable?: string[];
-        properties: Readonly<MenuActionProperties>;
-        data: Node.ActionData<never>;
-    }>, "properties"> & {
-        properties: Readonly<MenuActionProperties>;
-        _actionContext?: Node.ActionContext;
-    }>)[];
-    edges: {
-        source: string;
-        target: string;
-        relation: string;
-    }[];
-};
-export declare const createEditorAction: (id: string, props: Partial<MenuActionProperties>, invoke: () => void) => Node.Action<MenuActionProperties>;
-export declare const createEditorActionGroup: (id: string, props: Omit<ToolbarMenuActionGroupProperties, "icon">, icon?: string) => MenuItemGroup<ToolbarMenuActionGroupProperties>;
-//# sourceMappingURL=actions.d.ts.map

package/dist/types/src/components/EditorToolbar/actions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/actions.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,gCAAgC,EAGtC,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAI3D,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAQ7D,eAAO,MAAM,WAAW,GAAI,OAAO,kBAAkB,EAAE,SAAS,MAAM,UAAU;;;;;;;;;;;;;;;;CAW/E,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,IAAI,MAAM,EAAE,OAAO,OAAO,CAAC,oBAAoB,CAAC,EAAE,QAAQ,MAAM,IAAI,KAM/F,IAAI,CAAC,MAAM,CAAC,oBAAoB,CACvC,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,IAAI,MAAM,EACV,OAAO,IAAI,CAAC,gCAAgC,EAAE,MAAM,CAAC,EACrD,OAAO,MAAM,KACZ,aAAa,CAAC,gCAAgC,CAShD,CAAC"}

package/dist/types/src/components/EditorToolbar/useEditorToolbar.d.ts

@@ -1,11 +0,0 @@
-import { Atom } from '@effect-atom/atom-react';
-import { type EditorViewMode, type Formatting } from '@dxos/ui-editor';
-export type EditorToolbarState = {
-    viewMode?: EditorViewMode;
-} & Formatting;
-/**
- * Creates an atom for editor toolbar state.
- * @deprecated Use Editor.Root
- */
-export declare const useEditorToolbar: (initialState?: EditorToolbarState) => Atom.Writable<EditorToolbarState>;
-//# sourceMappingURL=useEditorToolbar.d.ts.map

package/dist/types/src/components/EditorToolbar/useEditorToolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEditorToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/useEditorToolbar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,kBAAkB,GAAG;IAAE,QAAQ,CAAC,EAAE,cAAc,CAAA;CAAE,GAAG,UAAU,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,eAAc,kBAAuB,KAAG,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAGxG,CAAC"}

package/dist/types/src/stories/CommandDialog.stories.d.ts

@@ -1,14 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-declare const meta: {
-    title: string;
-    render: () => React.JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-//# sourceMappingURL=CommandDialog.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CommandDialog.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/CommandDialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAuC,MAAM,OAAO,CAAC;AA8D5D,QAAA,MAAM,IAAI;;;;;;;CAOqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/src/components/EditorContent/EditorContent.tsx

@@ -1,83 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Transaction } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { initialSync } from '@dxos/ui-editor';
-import { mx } from '@dxos/ui-theme';
-
-import { type UseTextEditorProps, useTextEditor } from '../../hooks';
-
-import { type EditorController, createEditorController } from './controller';
-
-export type EditorContentProps = ThemedClassName<
-  {
-    focusable?: boolean;
-    value?: string;
-    onChange?: (value: string) => void;
-  } & UseTextEditorProps
->;
-
-/**
- * Minimal text editor.
- * NOTE: This shouold not be used with the automerge extension.
- * @deprecated Use Editor.Content
- */
-export const EditorContent = forwardRef<EditorController, EditorContentProps>(
-  ({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
-    const { parentRef, focusAttributes, view } = useTextEditor(
-      () => ({
-        id,
-        initialValue: value,
-        selectionEnd,
-        extensions: [
-          extensions ?? [],
-          EditorView.updateListener.of(({ view, docChanged, transactions }) => {
-            const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
-            if (!isInitialSync && docChanged) {
-              onChange?.(view.state.doc.toString());
-            }
-          }),
-        ],
-        ...props,
-      }),
-      [id, extensions, selectionEnd, onChange],
-    );
-
-    // External controller.
-    useImperativeHandle(forwardedRef, () => {
-      return createEditorController(view);
-    }, [id, view]);
-
-    // Set initial value and cursor position.
-    useEffect(() => {
-      requestAnimationFrame(() => {
-        view?.dispatch({
-          annotations: initialSync,
-          changes: value ? [{ from: 0, to: view?.state.doc.length ?? 0, insert: value ?? '' }] : [],
-          selection: selectionEnd ? { anchor: view?.state.doc.length ?? 0 } : undefined,
-        });
-
-        if (selectionEnd) {
-          view?.focus();
-        }
-      });
-    }, [view, value, selectionEnd]);
-
-    return (
-      <div
-        role='none'
-        className={mx(
-          'w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator',
-          classNames,
-        )}
-        ref={parentRef}
-        {...(focusable ? focusAttributes : {})}
-      />
-    );
-  },
-);

package/src/components/EditorContent/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './controller';
-export * from './EditorContent';

package/src/components/EditorToolbar/actions.ts

@@ -1,87 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-
-import { type Node } from '@dxos/app-graph';
-import {
-  type MenuItemGroup,
-  type ToolbarMenuActionGroupProperties,
-  createMenuAction,
-  createMenuItemGroup,
-} from '@dxos/react-ui-menu';
-import { List, addList, removeList } from '@dxos/ui-editor';
-import { type MenuActionProperties } from '@dxos/ui-types';
-
-import { translationKey } from '../../translations';
-
-import { type EditorToolbarState } from './useEditorToolbar';
-
-const listStyles = {
-  bullet: 'ph--list-bullets--regular',
-  ordered: 'ph--list-numbers--regular',
-  task: 'ph--list-checks--regular',
-};
-
-export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state.listStyle ?? '';
-  const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value, getView);
-  return {
-    nodes: [listGroupAction as Node.NodeArg<any>, ...listActionsMap],
-    edges: [
-      { source: 'root', target: 'list', relation: 'child' },
-      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id, relation: 'child' })),
-    ],
-  };
-};
-
-export const createEditorAction = (id: string, props: Partial<MenuActionProperties>, invoke: () => void) => {
-  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
-
-  return createMenuAction(id, invoke, {
-    label,
-    ...rest,
-  }) as Node.Action<MenuActionProperties>;
-};
-
-export const createEditorActionGroup = (
-  id: string,
-  props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
-  icon?: string,
-): MenuItemGroup<ToolbarMenuActionGroupProperties> => {
-  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
-
-  return createMenuItemGroup(id, {
-    label,
-    icon,
-    iconOnly: true,
-    ...rest,
-  }) as MenuItemGroup<ToolbarMenuActionGroupProperties>;
-};
-
-const createListGroupAction = (value: string) =>
-  createEditorActionGroup('list', {
-    variant: 'toggleGroup',
-    selectCardinality: 'single',
-    value,
-  } as ToolbarMenuActionGroupProperties);
-
-const createListActions = (value: string, getView: () => EditorView) =>
-  Object.entries(listStyles).map(([listStyle, icon]) => {
-    const checked = value === listStyle;
-    return createEditorAction(`list-${listStyle}`, { checked, icon }, () => {
-      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);
-      }
-    });
-  });

package/src/components/EditorToolbar/useEditorToolbar.ts

@@ -1,20 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Atom } from '@effect-atom/atom-react';
-import { useMemo } from 'react';
-
-import { type EditorViewMode, type Formatting } from '@dxos/ui-editor';
-
-// TODO(burdon): Move to extensions.
-export type EditorToolbarState = { viewMode?: EditorViewMode } & Formatting;
-
-/**
- * Creates an atom for editor toolbar state.
- * @deprecated Use Editor.Root
- */
-export const useEditorToolbar = (initialState: EditorToolbarState = {}): Atom.Writable<EditorToolbarState> => {
-  // TODO(wittjosiah): Including initialState in the deps causes reactivity issues.
-  return useMemo(() => Atom.make<EditorToolbarState>(initialState), []);
-};

package/src/stories/CommandDialog.stories.tsx

@@ -1,81 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type KeyboardEvent, useState } from 'react';
-
-import { type Button, IconButton, Input } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { editorWidth, join } from '@dxos/ui-editor';
-import { mx } from '@dxos/ui-theme';
-
-import { EditorStory } from './components';
-
-// TODO(burdon): Reimplement with Popover.
-const CommandDialog = ({ onAction }: { onAction: (action?: any) => void }) => {
-  const [text, setText] = useState('');
-
-  const handleInsert = () => {
-    // TODO(burdon): Use queue ref.
-    const link = `![${text}](dxn:queue:data:123)`;
-    onAction(text.length ? { type: 'insert', text: link } : undefined);
-  };
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    switch (event.key) {
-      case 'Enter': {
-        handleInsert();
-        break;
-      }
-      case 'Escape': {
-        onAction();
-        break;
-      }
-    }
-  };
-
-  return (
-    <div className='flex w-full justify-center'>
-      <div
-        className={mx(
-          'flex w-full p-2 gap-2 items-center bg-modal-surface border border-separator rounded-md',
-          editorWidth,
-        )}
-      >
-        <Input.Root>
-          <Input.TextInput
-            autoFocus={true}
-            placeholder='Ask a question...'
-            value={text}
-            onChange={(ev) => setText(ev.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </Input.Root>
-        <IconButton
-          icon='ph--x--regular'
-          label='Cancel'
-          iconOnly
-          variant='ghost'
-          classNames='px-0'
-          onClick={() => onAction({ type: 'cancel' })}
-        />
-      </div>
-    </div>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-editor/CommandDialog',
-  render: () => <EditorStory text={join('# Command', '', '')} extensions={[]} />,
-  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};