@dxos/react-ui-editor 0.8.4-main.67995b8 → 0.8.4-main.a4bbb77

package/src/extensions/tags/xml-util.ts

@@ -0,0 +1,94 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorState } from '@codemirror/state';
+import { type SyntaxNode } from '@lezer/common';
+
+import { invariant } from '@dxos/invariant';
+
+export type Tag = Record<string, any> & {
+  _tag: string;
+};
+
+/**
+ * Parse XML Element.
+ */
+export const nodeToJson = (state: EditorState, node: SyntaxNode): Tag | undefined => {
+  invariant(node.type.name === 'Element', 'Node is not an Element');
+
+  // Find the opening tag.
+  const openTag = node.node.getChild('OpenTag') || node.node.getChild('SelfClosingTag');
+  if (openTag) {
+    // Extract tag name.
+    const tagName = openTag.getChild('TagName');
+    if (!tagName) {
+      return;
+    }
+
+    const tag: Tag = {
+      _tag: state.doc.sliceString(tagName.from, tagName.to),
+    };
+
+    // Extract attributes.
+    let attributeNode = openTag.getChild('Attribute');
+    while (attributeNode) {
+      const attrName = attributeNode.getChild('AttributeName');
+      const attrValue = attributeNode.getChild('AttributeValue');
+      if (attrName) {
+        const attr = state.doc.sliceString(attrName.from, attrName.to);
+
+        // Default for attributes without values.
+        let value: string | boolean = true;
+
+        if (attrValue) {
+          const rawValue = state.doc.sliceString(attrValue.from, attrValue.to);
+          // Remove quotes if present.
+          if (
+            (rawValue.startsWith('"') && rawValue.endsWith('"')) ||
+            (rawValue.startsWith("'") && rawValue.endsWith("'"))
+          ) {
+            value = rawValue.slice(1, -1);
+          } else {
+            value = rawValue;
+          }
+        }
+
+        tag[attr] = value;
+      }
+
+      // Get next sibling attribute.
+      attributeNode = attributeNode.nextSibling;
+    }
+
+    // Extract children for non-self-closing tags.
+    if (node.type.name === 'Element' && openTag.type.name !== 'SelfClosingTag') {
+      const children: any[] = [];
+      let child = node.node.firstChild;
+
+      while (child) {
+        // Skip the opening and closing tags.
+        if (child.type.name !== 'OpenTag' && child.type.name !== 'CloseTag') {
+          if (child.type.name === 'Text') {
+            const text = state.doc.sliceString(child.from, child.to).trim();
+            if (text) {
+              children.push(text);
+            }
+          } else if (child.type.name === 'Element') {
+            const data = nodeToJson(state, child);
+            if (data) {
+              children.push(data);
+            }
+          }
+        }
+        child = child.nextSibling;
+      }
+
+      if (children.length > 0) {
+        tag.children = children;
+      }
+    }
+
+    return tag;
+  }
+};

package/src/hooks/useTextEditor.ts

@@ -4,7 +4,7 @@
 
 import { EditorState, type EditorStateConfig, type Text } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup, type TabsterTypes } from '@fluentui/react-tabster';
+import { type TabsterTypes, useFocusableGroup } from '@fluentui/react-tabster';
 import {
   type DependencyList,
   type KeyboardEventHandler,
@@ -17,9 +17,9 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
-import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
+import { type MaybeProvider, getProviderValue, isTruthy } from '@dxos/util';
 
-import { type EditorSelection, documentId, createEditorStateTransaction, editorInputMode } from '../extensions';
+import { type EditorSelection, createEditorStateTransaction, documentId, editorInputMode } from '../extensions';
 import { debugDispatcher } from '../util';
 
 let instanceCount = 0;
@@ -35,8 +35,8 @@ export type CursorInfo = {
 
 export type UseTextEditor = {
   // TODO(burdon): Rename.
-  parentRef: RefObject<HTMLDivElement>;
-  view?: EditorView;
+  parentRef: RefObject<HTMLDivElement | null>;
+  view: EditorView | null;
   focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
     tabIndex: 0;
     onKeyUp: KeyboardEventHandler<HTMLDivElement>;
@@ -66,11 +66,11 @@ export const useTextEditor = (
 
   // NOTE: Increments by 2 in strict mode.
   const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = useState<EditorView>();
+  const [view, setView] = useState<EditorView | null>(null);
   const parentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    let view: EditorView;
+    let view: EditorView | null = null;
     if (parentRef.current) {
       log('create', { id, instanceId, doc: initialValue?.length ?? 0 });
 
@@ -96,19 +96,7 @@ export const useTextEditor = (
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
           }),
-          // TODO(burdon): Factor out debug inspector.
-          // ViewPlugin.fromClass(
-          //   class {
-          //     constructor(_view: EditorView) {
-          //       log('construct', { id });
-          //     }
-          //
-          //     destroy() {
-          //       log('destroy', { id });
-          //     }
-          //   },
-          // ),
-        ].filter(isNotFalsy),
+        ].filter(isTruthy),
       });
 
       // https://codemirror.net/docs/ref/#view.EditorViewConfig

package/src/stories/CommandDialog.stories.tsx

@@ -0,0 +1,89 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type KeyboardEvent, useState } from 'react';
+
+import { Button, Icon, Input } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/react-ui-theme';
+
+import { editorWidth } from '../defaults';
+import { type Action, commandDialog } from '../extensions';
+import { str } from '../testing';
+import { createRenderer } from '../util';
+
+import { EditorStory } from './components';
+
+const CommandDialog = ({ onAction }: { onAction: (action?: Action) => 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 is-full justify-center'>
+      <div
+        className={mx(
+          'flex is-full p-2 gap-2 items-center bg-modalSurface 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>
+        <Button variant='ghost' classNames='pli-0' onClick={() => onAction({ type: 'cancel' })}>
+          <Icon icon='ph--x--regular' size={5} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-editor/CommandDialog',
+  render: () => (
+    <EditorStory
+      text={str('# Command', '', '', '')}
+      extensions={[
+        commandDialog({
+          renderDialog: createRenderer(CommandDialog),
+          onHint: () => "Press '?' to ask a question",
+        }),
+      ]}
+    />
+  ),
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/CommandMenu.stories.tsx

@@ -2,47 +2,44 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type EditorView } from '@codemirror/view';
-import { type StoryObj } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useRef } from 'react';
 
 import { Obj, Query } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { createObjectFactory, Testing, type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { Domino } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 
-import { EditorStory, names } from './components';
 import {
-  CommandMenu,
   type CommandMenuGroup,
   type CommandMenuItem,
-  RefPopover,
+  CommandMenuProvider,
   coreSlashCommands,
   filterItems,
   insertAtCursor,
   insertAtLineStart,
   linkSlashCommands,
 } from '../components';
-import { useCommandMenu, type UseCommandMenuOptions } from '../extensions';
+import { type UseCommandMenuOptions, useCommandMenu } from '../extensions';
 import { str } from '../testing';
-import { createElement } from '../util';
+
+import { EditorStory, names } from './components';
 
 const generator: ValueGenerator = faker as any;
 
 type StoryProps = Omit<UseCommandMenuOptions, 'viewRef'> & { text: string };
 
 const DefaultStory = ({ text, ...options }: StoryProps) => {
-  const viewRef = useRef<EditorView>();
-  const { commandMenu, groupsRef, currentItem, onSelect, ...props } = useCommandMenu({ viewRef, ...options });
+  const viewRef = useRef<EditorView>(null);
+  const { groupsRef, commandMenu, ...commandMenuProps } = useCommandMenu({ viewRef, ...options });
 
   return (
-    <RefPopover modal={false} {...props}>
+    <CommandMenuProvider groups={groupsRef.current} {...commandMenuProps}>
       <EditorStory ref={viewRef} text={text} placeholder={''} extensions={commandMenu} />
-      <CommandMenu groups={groupsRef.current} currentItem={currentItem} onSelect={onSelect} />
-    </RefPopover>
+    </CommandMenuProvider>
   );
 };
 
@@ -63,18 +60,18 @@ const groups: CommandMenuGroup[] = [
   },
 ];
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-editor/CommandMenu',
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: (args) => <DefaultStory {...args} />,
+  render: DefaultStory,
+  decorators: [withTheme],
   parameters: {
     layout: 'fullscreen',
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 // TODO(burdon): Not working.
 export const Slash: Story = {
@@ -82,13 +79,14 @@ export const Slash: Story = {
     text: str('# Slash', '', names.join(' '), ''),
     trigger: '/',
     placeholder: {
-      content: () => {
-        return createElement('div', undefined, [
-          createElement('span', { text: 'Press' }),
-          createElement('span', { className: 'border border-separator rounded-sm mx-1 px-1', text: '/' }),
-          createElement('span', { text: 'for commands' }),
-        ]);
-      },
+      content: () =>
+        Domino.of('div')
+          .children(
+            Domino.of('span').text('Press'),
+            Domino.of('span').text('/').classNames('border border-separator rounded-sm mx-1 px-1'),
+            Domino.of('span').text('for commands'),
+          )
+          .build(),
     },
     getMenu: (text) => {
       return filterItems(groups, (item) =>
@@ -99,7 +97,7 @@ export const Slash: Story = {
 };
 
 export const Link: Story = {
-  render: (args) => {
+  render: (args: StoryProps) => {
     const { space } = useClientProvider();
     const getMenu = useCallback(
       async (trigger: string, query?: string): Promise<CommandMenuGroup[]> => {
@@ -123,7 +121,7 @@ export const Link: Story = {
               label: object.name,
               icon: 'ph--user--regular',
               onSelect: (view, head) => {
-                const link = `[${object.name}][${Obj.getDXN(object)}]`;
+                const link = `[${object.name}](${Obj.getDXN(object)})`;
                 if (query?.startsWith('@')) {
                   insertAtLineStart(view, head, `!${link}\n`);
                 } else {
@@ -139,21 +137,22 @@ export const Link: Story = {
 
     return <DefaultStory {...args} getMenu={getMenu} />;
   },
-  args: {
-    text: str('# Link', '', names.join(' '), ''),
-    trigger: ['/', '@'],
-  },
   decorators: [
     withClientProvider({
       createSpace: true,
       onInitialized: async (client) => {
         client.addTypes([Testing.Contact]);
       },
-      onSpaceCreated: async ({ space }) => {
+      onCreateSpace: async ({ space }) => {
         const createObjects = createObjectFactory(space.db, generator);
         await createObjects([{ type: Testing.Contact, count: 10 }]);
         await space.db.flush({ indexes: true });
       },
     }),
   ],
+  args: {
+    text: str('# Link', '', names.join(' '), ''),
+    trigger: ['/', '@'],
+    getMenu: () => [],
+  },
 };

package/src/stories/Comments.stories.tsx

@@ -2,36 +2,40 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { effect, useSignal } from '@preact/signals-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type FC } from 'react';
 
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { EditorStory, content, longText } from './components';
 import { annotations, comments, createExternalCommentSync } from '../extensions';
 import { str } from '../testing';
 import { type Comment } from '../types';
 import { createRenderer } from '../util';
 
-const meta: Meta<typeof EditorStory> = {
+import { EditorStory, content, longText } from './components';
+
+const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Comments
 //
 
-export const Comments = {
+export const Comments: Story = {
   render: () => {
     const _comments = useSignal<Comment[]>([]);
     return (
@@ -91,7 +95,7 @@ const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
 // Annotations
 //
 
-export const Annotations = {
+export const Annotations: Story = {
   render: () => (
     <EditorStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
   ),

package/src/stories/EditorToolbar.stories.tsx

@@ -2,28 +2,26 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { attentionSurface, mx } from '@dxos/react-ui-theme';
-import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { EditorToolbar, useEditorToolbarState } from '../components';
 import { editorWidth } from '../defaults';
 import {
   InputModeExtensions,
-  createMarkdownExtensions,
   createBasicExtensions,
+  createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
   formattingKeymap,
   useFormattingState,
 } from '../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../hooks';
+import { type UseTextEditorProps, useTextEditor } from '../hooks';
 import { translations } from '../translations';
 import { type EditorInputMode, type EditorViewMode } from '../types';
 
@@ -43,8 +41,8 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
       moveToEndOfLine: true,
       extensions: [
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly' }),
-        createMarkdownExtensions({ themeMode }),
+        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
+        createMarkdownExtensions(),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),
         formattingKeymap(),
@@ -75,12 +73,15 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations, layout: 'fullscreen' },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 

package/src/stories/Experimental.stories.tsx

@@ -2,35 +2,39 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React from 'react';
 
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { EditorStory, content } from './components';
-import { typewriter, blast, defaultOptions, dropFile } from '../extensions';
+import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
 import { str } from '../testing';
 
-const meta: Meta<typeof EditorStory> = {
+import { EditorStory, content } from './components';
+
+const meta = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen' },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 //
 // Typewriter
 //
 
-const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
+const typewriterItems = localStorage.getItem('dxos.org/testing/typewriter')?.split(',');
 
-export const Typewriter = {
+export const Typewriter: Story = {
   render: () => (
     <EditorStory
       text={str('# Typewriter', '', content.paragraphs, content.footer)}
@@ -43,7 +47,7 @@ export const Typewriter = {
 // Blast
 //
 
-export const Blast = {
+export const Blast: Story = {
   render: () => (
     <EditorStory
       text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
@@ -70,7 +74,7 @@ export const Blast = {
 // DND
 //
 
-export const DND = {
+export const DND: Story = {
   render: () => (
     <EditorStory
       text={str('# DND', '')}