@dxos/react-ui-editor 0.8.4-main.5ad4a44 → 0.8.4-main.60689f5b1c

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

@@ -1,393 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  RangeSetBuilder,
-  StateEffect,
-  StateField,
-  Transaction,
-} 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>;
-
-export const getXmlTextChild = (children: any[]): string | null => {
-  const child = children?.[0];
-  return typeof child === 'string' ? child : null;
-};
-
-/**
- * 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 };
-        }
-      }
-
-      // Check if user pressed Backspace or Delete and remove adjacent decorations if present.
-      const userEvent = tr.annotation(Transaction.userEvent);
-      if (userEvent === 'delete.backward' || userEvent === 'delete.forward') {
-        const { state } = tr;
-        const decorationArray = decorationSetToArray(decorations);
-        const filteredDecorations = [];
-
-        // Get cursor position after the change.
-        const cursorPos = state.selection.main.head;
-
-        for (const range of decorationArray) {
-          let shouldKeep = true;
-
-          // For Backspace (delete.backward), check if decoration is immediately after cursor.
-          if (userEvent === 'delete.backward' && range.from === cursorPos) {
-            shouldKeep = false;
-          }
-
-          // For Delete (delete.forward), check if decoration is immediately before cursor.
-          if (userEvent === 'delete.forward' && range.to === cursorPos) {
-            shouldKeep = false;
-          }
-
-          if (shouldKeep) {
-            // Map the decoration position through the transaction changes.
-            const mappedFrom = tr.changes.mapPos(range.from, -1);
-            const mappedTo = tr.changes.mapPos(range.to, 1);
-
-            // Only keep the decoration if mapping was successful and positions are valid.
-            if (mappedFrom >= 0 && mappedTo >= mappedFrom && mappedTo <= state.doc.length) {
-              filteredDecorations.push({
-                from: mappedFrom,
-                to: mappedTo,
-                value: range.value,
-              });
-            }
-          }
-        }
-
-        // Return updated decorations with adjacent ones removed and positions mapped.
-        return {
-          from,
-          decorations: Decoration.set(filteredDecorations),
-        };
-      }
-
-      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

@@ -1,94 +0,0 @@
-//
-// 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/extensions/typewriter.ts

@@ -1,68 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-
-// TODO(burdon): Review https://github.com/sergeche/codemirror-movie?tab=readme-ov-file
-
-export type DemoOptions = {
-  delay?: number;
-  items?: string[];
-};
-
-const defaultItems = ['hello world!', 'this is a test.', 'this is [DXOS](https://dxos.org)'];
-
-/**
- * Configurable plugin that let's user cycle through pre-configured input script.
- */
-export const typewriter = ({ delay = 75, items = defaultItems }: DemoOptions = {}): Extension => {
-  let t: any;
-  let idx = 0; // TODO(burdon): Make global.
-
-  return [
-    keymap.of([
-      {
-        // Reset.
-        key: "alt-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          idx = 0;
-          return true;
-        },
-      },
-      {
-        // Next prompt.
-        // TODO(burdon): Press 1-9 to select prompt?
-        key: "shift-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          // TODO(burdon): Add space if needed.
-          const text = items[idx++];
-          if (idx === items?.length) {
-            idx = 0;
-          }
-
-          let i = 0;
-          const insert = (d = 0) => {
-            t = setTimeout(() => {
-              const pos = view.state.selection.main.head;
-              view.dispatch({
-                changes: { from: pos, insert: text[i++] },
-                selection: { anchor: pos + 1 },
-              });
-
-              if (i < text.length) {
-                insert(Math.random() * delay * (text[i] === ' ' ? 2 : 1));
-              }
-            }, d);
-          };
-
-          insert();
-          return true;
-        },
-      },
-    ]),
-  ];
-};

package/src/stories/CommandDialog.stories.tsx

@@ -1,89 +0,0 @@
-//
-// 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 = {};