@dxos/react-ui-editor 0.8.4-main.c1de068 → 0.8.4-main.e098934

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

@@ -0,0 +1,335 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, type Extension, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
+import { type ComponentType, type FC } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+
+import { decorationSetToArray } from '../../util';
+
+import { nodeToJson } from './xml-util';
+
+export type StateDispatch<T> = T | ((state: T) => T);
+
+/**
+ * Manages widget state.
+ */
+export interface XmlWidgetStateManager {
+  updateWidget<T>(id: string, props: StateDispatch<T>): void;
+}
+
+export type XmlEventHandler<TEvent = any> = (event: TEvent) => void;
+
+/**
+ * Widget component.
+ */
+export type XmlWidgetProps<TContext = any, TProps = any> = TProps & {
+  _tag: string;
+  context: TContext;
+  onEvent?: XmlEventHandler;
+};
+
+/**
+ * Factory for creating widgets.
+ */
+export type XmlWidgetFactory = (props: XmlWidgetProps, onEvent?: XmlEventHandler) => WidgetType | null;
+
+/**
+ * Widget registry definition.
+ */
+export type XmlWidgetDef = {
+  block?: boolean;
+  /** Native widget. */
+  factory?: XmlWidgetFactory;
+  /** React widget. */
+  Component?: FC<XmlWidgetProps>;
+};
+
+export type XmlWidgetRegistry = Record<string, XmlWidgetDef>;
+
+/**
+ * Update context.
+ */
+export const xmlTagContextEffect = StateEffect.define<any>();
+
+/**
+ * Update widget.
+ */
+export const xmlTagUpdateEffect = StateEffect.define<{ id: string; value: any }>();
+
+/**
+ * Reset all state.
+ */
+export const xmlTagResetEffect = StateEffect.define();
+
+type WidgetDecorationSet = {
+  from: number;
+  decorations: DecorationSet;
+};
+
+type XmlWidgetStateMap = Record<string, any>;
+
+export type XmlWidgetState = {
+  id: string;
+  props: any;
+  root: HTMLElement;
+  Component: ComponentType<any>;
+};
+
+export interface XmlWidgetNotifier {
+  mounted(widget: XmlWidgetState): void;
+  unmounted(id: string): void;
+}
+
+export type XmlTagsOptions = {
+  registry?: XmlWidgetRegistry;
+  /**
+   * Called when a widget is mounted or unmounted.
+   */
+  setWidgets?: (widgets: XmlWidgetState[]) => void;
+};
+
+/**
+ * Extension that adds thread-related functionality including XML tag decorations.
+ */
+export const xmlTags = (options: XmlTagsOptions = {}): Extension => {
+  //
+  // Context state.
+  //
+  const contextState = StateField.define<any>({
+    create: () => undefined,
+    update: (value, tr) => {
+      for (const effect of tr.effects) {
+        if (effect.is(xmlTagContextEffect)) {
+          return effect.value;
+        }
+      }
+
+      return value;
+    },
+  });
+
+  //
+  // Active widgets.
+  //
+  const widgets = new Map<string, XmlWidgetState>();
+  const notifier = {
+    mounted: (widget: XmlWidgetState) => {
+      widgets.set(widget.id, widget);
+      options.setWidgets?.([...widgets.values()]);
+    },
+    unmounted: (id: string) => {
+      widgets.delete(id);
+      options.setWidgets?.([...widgets.values()]);
+    },
+  } satisfies XmlWidgetNotifier;
+
+  //
+  // Widget decorations.
+  //
+  const decorationsState = StateField.define<WidgetDecorationSet>({
+    create: (state) => {
+      return buildDecorations(
+        state,
+        0,
+        state.doc.length,
+        state.field(contextState),
+        state.field(widgetState),
+        options,
+        notifier,
+      );
+    },
+    update: ({ from, decorations }, tr) => {
+      for (const effect of tr.effects) {
+        if (effect.is(xmlTagResetEffect)) {
+          return { from: 0, decorations: Decoration.none };
+        }
+      }
+
+      if (tr.docChanged) {
+        const { state } = tr;
+
+        // Flag if the transaction has modified the head of the document.
+        // (i.e., any changes that touch before the current `from` position).
+        const reset = tr.changes.touchesRange(0, from);
+
+        // Since append-only, rebuild decorations from after the last widget.
+        const result = buildDecorations(
+          state,
+          reset ? 0 : from,
+          state.doc.length,
+          state.field(contextState),
+          state.field(widgetState),
+          options,
+          notifier,
+        );
+
+        // Merge with existing decorations.
+        return {
+          from: result.from,
+          decorations: decorations.update({ add: decorationSetToArray(result.decorations) }),
+        };
+      }
+
+      // No document changes: avoid mapping decorations through an empty ChangeSet,
+      // which can throw when the decoration set was created for a different base length.
+      // Simply return the existing decorations unchanged.
+      return { from, decorations };
+    },
+    provide: (field) => [
+      EditorView.decorations.from(field, (v) => v.decorations),
+      EditorView.atomicRanges.of((view) => view.state.field(field).decorations || Decoration.none),
+    ],
+  });
+
+  //
+  // Widget state management.
+  //
+  const widgetState = StateField.define<XmlWidgetStateMap>({
+    create: () => ({}),
+    update: (map, tr) => {
+      for (const effect of tr.effects) {
+        if (effect.is(xmlTagResetEffect)) {
+          return {};
+        }
+
+        if (effect.is(xmlTagUpdateEffect)) {
+          // Update accumulated widget props by id.
+          const { id, value } = effect.value;
+          const state = typeof value === 'function' ? value(map[id]) : value;
+
+          // Find and render widget.
+          const { decorations } = tr.state.field(decorationsState);
+          for (const range of decorationSetToArray(decorations)) {
+            const deco = range.value;
+            const widget = deco?.spec?.widget;
+            if (widget && widget instanceof PlaceholderWidget && widget.id === effect.value.id && widget.root) {
+              const props = { ...widget.props, ...state };
+              notifier.mounted({ id: widget.id, props, root: widget.root, Component: widget.Component });
+            }
+          }
+
+          return { ...map, [id]: state };
+        }
+      }
+
+      return map;
+    },
+  });
+
+  return [contextState, decorationsState, widgetState];
+};
+
+/**
+ * Creates widget decorations for XML tags in the document using the syntax tree.
+ */
+const buildDecorations = (
+  state: EditorState,
+  from: number,
+  to: number,
+  context: any,
+  widgetState: XmlWidgetStateMap,
+  options: XmlTagsOptions,
+  notifier: XmlWidgetNotifier,
+): WidgetDecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const tree = syntaxTree(state);
+  if (!tree || (tree.type.name === 'Program' && tree.length === 0)) {
+    return { from, decorations: Decoration.none };
+  }
+
+  tree.iterate({
+    from,
+    to,
+    enter: (node) => {
+      switch (node.type.name) {
+        // XML Element.
+        case 'Element': {
+          try {
+            if (options.registry) {
+              const props = nodeToJson(state, node.node);
+              if (props) {
+                const def = options.registry[props._tag];
+                if (def) {
+                  const { block, factory, Component } = def;
+                  const state = props.id ? widgetState[props.id] : undefined;
+                  const args = { context, ...props, ...state };
+                  const widget: WidgetType | undefined = factory
+                    ? factory(args)
+                    : Component
+                      ? props.id && new PlaceholderWidget(props.id, Component, args, notifier)
+                      : undefined;
+
+                  if (widget) {
+                    from = node.node.to;
+                    builder.add(
+                      node.node.from,
+                      node.node.to,
+                      Decoration.replace({
+                        widget,
+                        block,
+                        atomic: true,
+                        inclusive: true,
+                      }),
+                    );
+                  }
+                }
+              }
+            }
+          } catch (err) {
+            log.catch(err);
+          }
+
+          return false; // Don't descend into children.
+        }
+      }
+    },
+  });
+
+  return { from, decorations: builder.finish() };
+};
+
+/**
+ * Placeholder for React widgets.
+ */
+class PlaceholderWidget<TProps = {}> extends WidgetType {
+  private _root: HTMLElement | null = null;
+
+  constructor(
+    public readonly id: string,
+    public readonly Component: FC<TProps>,
+    public readonly props: TProps,
+    private readonly notifier: XmlWidgetNotifier,
+  ) {
+    super();
+    invariant(id);
+  }
+
+  get root() {
+    return this._root;
+  }
+
+  override eq(other: WidgetType): boolean {
+    return other instanceof PlaceholderWidget && this.id === other.id;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+
+  override toDOM(_view: EditorView): HTMLElement {
+    this._root = document.createElement('span');
+    this.notifier.mounted({ id: this.id, props: this.props, root: this._root, Component: this.Component });
+    return this._root;
+  }
+
+  override destroy(_dom: HTMLElement): void {
+    this.notifier.unmounted(this.id);
+    this._root = null;
+  }
+}

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, isNotFalsy } 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;
@@ -96,18 +96,6 @@ 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),
       });
 

package/src/stories/Command.stories.tsx

@@ -4,19 +4,20 @@
 
 import '@dxos-theme';
 
-import React, { useState, type KeyboardEvent } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type KeyboardEvent, useState } from 'react';
 
-import { Button, Icon, Input, DropdownMenu } from '@dxos/react-ui';
+import { Button, Icon, Input } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { EditorStory } from './components';
-import { RefDropdownMenu } from '../components';
 import { editorWidth } from '../defaults';
-import { command, type Action, floatingMenu } from '../extensions';
+import { type Action, command, floatingMenu } 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('');
 
@@ -40,10 +41,10 @@ const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) =>
   };
 
   return (
-    <div className='flex w-full justify-center'>
+    <div className='flex is-full justify-center'>
       <div
         className={mx(
-          'flex w-full p-2 gap-2 items-center bg-modalSurface border border-separator rounded-md',
+          'flex is-full p-2 gap-2 items-center bg-modalSurface border border-separator rounded-md',
           editorWidth,
         )}
       >
@@ -64,34 +65,26 @@ const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) =>
   );
 };
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/Command',
   decorators: [withTheme, withLayout({ fullscreen: true })],
   render: () => (
-    <RefDropdownMenu.Provider>
-      <EditorStory
-        text={str('# Command', '', '', '')}
-        extensions={[
-          floatingMenu(),
-          command({
-            renderDialog: createRenderer(CommandDialog),
-            onHint: () => "Press '/' for commands",
-          }),
-        ]}
-      />
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content>
-          <DropdownMenu.Viewport>
-            <DropdownMenu.Item onClick={() => console.log('!')}>Test</DropdownMenu.Item>
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </RefDropdownMenu.Provider>
+    <EditorStory
+      text={str('# Command', '', '', '')}
+      extensions={[
+        floatingMenu(),
+        command({
+          renderDialog: createRenderer(CommandDialog),
+          onHint: () => "Press '/' for commands",
+        }),
+      ]}
+    />
   ),
   parameters: { layout: 'fullscreen' },
-};
+} satisfies Meta<typeof Button>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/CommandMenu.stories.tsx

@@ -5,30 +5,30 @@
 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 { Testing, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-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 { Domino } from '../util';
+
+import { EditorStory, names } from './components';
 
 const generator: ValueGenerator = faker as any;
 
@@ -36,13 +36,12 @@ 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 { commandMenu, groupsRef, ...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 +62,18 @@ const groups: CommandMenuGroup[] = [
   },
 ];
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-editor/CommandMenu',
+  render: DefaultStory,
   decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: (args) => <DefaultStory {...args} />,
   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 +81,12 @@ 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')
+          .child(Domino.of('span').text('Press'))
+          .child(Domino.of('span').text('/').classNames('border border-separator rounded-sm mx-1 px-1'))
+          .child(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,10 +137,6 @@ export const Link: Story = {
 
     return <DefaultStory {...args} getMenu={getMenu} />;
   },
-  args: {
-    text: str('# Link', '', names.join(' '), ''),
-    trigger: ['/', '@'],
-  },
   decorators: [
     withClientProvider({
       createSpace: true,
@@ -156,4 +150,9 @@ export const Link: Story = {
       },
     }),
   ],
+  args: {
+    text: str('# Link', '', names.join(' '), ''),
+    trigger: ['/', '@'],
+    getMenu: () => [],
+  },
 };