@dxos/react-ui-editor 0.8.4-main.ead640a → 0.8.4-main.effb148878

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,78 +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 { str } from '../testing';
-
-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 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={[]} />,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/styles/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './markdown';
-export * from './theme';
-export * from './tokens';

package/src/styles/markdown.ts

@@ -1,26 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { mx } from '@dxos/react-ui-theme';
-
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-
-// https://tailwindcss.com/docs/font-weight
-const headings: Record<HeadingLevel, string> = {
-  1: 'text-4xl',
-  2: 'text-3xl',
-  3: 'text-2xl',
-  4: 'text-xl',
-  5: 'text-lg',
-  6: '', // TODO(burdon): Should be text-base, but that's a color in our system.
-};
-
-export const theme = {
-  code: 'font-mono !no-underline text-neutral-700 dark:text-neutral-300',
-  codeMark: 'font-mono text-primary-500',
-  mark: 'opacity-50',
-  heading: (level: HeadingLevel) => {
-    return mx(headings[level], 'dark:text-primary-400');
-  },
-};

package/src/styles/theme.ts

@@ -1,269 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type StyleSpec } from 'style-mod';
-
-import { fontBody } from './tokens';
-
-export type ThemeStyles = Record<string, StyleSpec>;
-
-/**
- * Minimal styles.
- * https://codemirror.net/examples/styling
- *
- * Examples:
- * - https://github.com/codemirror/view/blob/main/src/theme.ts
- * - https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts
- *
- * Main layout:
- * https://codemirror.net/examples/styling
- * https://codemirror.net/docs/guide (DOM Structure).
- *
- * <div class="cm-editor [cm-focused] [generated classes]">
- *   <div class="cm-scroller">
- *     <div class="cm-gutters">
- *       <div class="cm-gutter [...]">
- *         <div class="cm-gutterElement">...</div>
- *       </div>
- *     </div>
- *     <div class="cm-content" role="textbox" contenteditable="true">
- *       <div class="cm-line"></div>
- *     </div>
- *     <div class="cm-selectionLayer">
- *       <div class="cm-selectionBackground"></div>
- *     </div>
- *     <div class="cm-cursorLayer">
- *       <div class="cm-cursor"></div>
- *     </div>
- *   </div>
- * </div>
- *
- * NOTE: `light` and `dark` selectors are preprocessed by CodeMirror and can only be in the base theme.
- * NOTE: Use 'unset' to remove default CM style.
- */
-export const defaultTheme: ThemeStyles = {
-  '&': {},
-  '&.cm-focused': {
-    outline: 'none',
-  },
-
-  /**
-   * Scroller
-   */
-  '.cm-scroller': {
-    overflowY: 'auto',
-  },
-
-  /**
-   * Content
-   * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
-   */
-  '.cm-content': {
-    padding: 'unset',
-    fontFamily: fontBody,
-    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: '16px',
-    lineHeight: '24px',
-    color: 'unset',
-  },
-
-  /**
-   * Gutters
-   * NOTE: Gutters should have the same top margin as the content.
-   */
-  '.cm-gutters': {
-    borderRight: 'none',
-    // background: 'transparent',
-  },
-  '.cm-gutter': {},
-  '.cm-gutter.cm-lineNumbers': {
-    paddingRight: '4px',
-    borderRight: '1px solid var(--dx-subduedSeparator)',
-  },
-  '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
-    minWidth: '40px',
-  },
-  /**
-   * Height is set to match the corresponding line (which may have wrapped).
-   */
-  '.cm-gutterElement': {
-    lineHeight: '24px',
-    fontSize: '12px',
-  },
-
-  /**
-   * Line.
-   */
-  '.cm-line': {
-    lineHeight: '24px',
-    paddingInline: 0,
-  },
-  '.cm-activeLine': {
-    background: 'var(--dx-cmActiveLine)',
-  },
-
-  /**
-   * Cursor (layer).
-   */
-  '.cm-cursor, .cm-dropCursor': {
-    borderLeft: '2px solid var(--dx-cmCursor)',
-  },
-  '.cm-placeholder': {
-    fontFamily: fontBody,
-    color: 'var(--dx-placeholder)',
-  },
-
-  /**
-   * Selection (layer).
-   */
-  '.cm-selectionBackground': {
-    background: 'var(--dx-cmSelection)',
-  },
-  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: 'var(--dx-cmFocusedSelection)',
-  },
-
-  /**
-   * Search.
-   * NOTE: Matches comment.
-   */
-  '.cm-searchMatch': {
-    margin: '0 -3px',
-    padding: '3px',
-    borderRadius: '3px',
-    background: 'var(--dx-cmHighlightSurface)',
-    color: 'var(--dx-cmHighlight)',
-  },
-  '.cm-searchMatch-selected': {
-    textDecoration: 'underline',
-  },
-
-  /**
-   * Link.
-   */
-  '.cm-link': {
-    textDecorationLine: 'underline',
-    textDecorationThickness: '1px',
-    textDecorationColor: 'var(--dx-separator)',
-    textUnderlineOffset: '2px',
-    borderRadius: '.125rem',
-  },
-  '.cm-link > span': {
-    color: 'var(--dx-accentText)',
-  },
-
-  /**
-   * Tooltip.
-   */
-  '.cm-tooltip': {
-    background: 'var(--dx-baseSurface)',
-  },
-  '.cm-tooltip-below': {},
-
-  /**
-   * Autocomplete.
-   * https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
-   */
-  '.cm-tooltip.cm-tooltip-autocomplete': {
-    marginTop: '6px',
-    marginLeft: '-10px',
-    border: '2px solid var(--dx-separator)',
-    borderRadius: '4px',
-  },
-  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
-    maxHeight: '20em',
-  },
-  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
-    padding: '4px',
-  },
-  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-    background: 'var(--dx-activeSurface)',
-    color: 'var(--dx-activeSurfaceText)',
-  },
-  '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
-    paddingLeft: '4px !important',
-    color: 'var(--dx-hoverSurfaceText)',
-  },
-
-  '.cm-completionInfo': {
-    width: '360px !important',
-    margin: '-10px 1px 0 1px',
-    padding: '8px !important',
-    borderColor: 'var(--dx-separator)',
-  },
-  '.cm-completionIcon': {
-    display: 'none',
-  },
-  '.cm-completionLabel': {
-    fontFamily: fontBody,
-    color: 'var(--dx-description)',
-    padding: '0 4px',
-  },
-  '.cm-completionMatchedText': {
-    textDecoration: 'none !important',
-    color: 'var(--dx-baseText)',
-  },
-
-  /**
-   * Panels
-   * https://github.com/codemirror/search/blob/main/src/search.ts#L745
-   *
-   * Find/replace panel.
-   * <div class="cm-announced">...</div>
-   * <div class="cm-scroller">...</div>
-   * <div class="cm-panels cm-panels-bottom">
-   *   <div class="cm-search cm-panel">
-   *     <input class="cm-textfield" />
-   *     <button class="cm-button">...</button>
-   *     <label><input type="checkbox" />...</label>
-   *   </div>
-   * </div
-   */
-  // TODO(burdon): Implement custom panel (with icon buttons).
-  '.cm-panels': {},
-  '.cm-panel': {
-    fontFamily: fontBody,
-    backgroundColor: 'var(--surface-bg)',
-  },
-  '.cm-panel input, .cm-panel button, .cm-panel label': {
-    color: 'var(--dx-subdued)',
-    fontFamily: fontBody,
-    fontSize: '14px',
-    all: 'unset',
-    margin: '3px !important',
-    padding: '2px 6px !important',
-    outline: '1px solid transparent',
-  },
-  '.cm-panel input, .cm-panel button': {
-    backgroundColor: 'var(--dx-inputSurface)',
-  },
-  '.cm-panel input:focus, .cm-panel button:focus': {
-    outline: '1px solid var(--dx-neutralFocusIndicator)',
-  },
-  '.cm-panel label': {
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-  '.cm-panel input.cm-textfield': {},
-  '.cm-panel input[type=checkbox]': {
-    width: '8px',
-    height: '8px',
-    marginRight: '6px !important',
-    padding: '2px !important',
-    color: 'var(--dx-neutralFocusIndicator)',
-  },
-  '.cm-panel button': {
-    '&:hover': {
-      backgroundColor: 'var(--dx-accentSurfaceHover) !important',
-    },
-    '&:active': {
-      backgroundColor: 'var(--dx-accentSurfaceHover)',
-    },
-  },
-  '.cm-panel.cm-search': {
-    padding: '4px',
-    borderTop: '1px solid var(--dx-separator)',
-  },
-};

package/src/styles/tokens.ts

@@ -1,17 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { tokens } from '@dxos/react-ui-theme';
-import { get } from '@dxos/util';
-
-/**
- * Returns the tailwind token value.
- */
-const getToken = (path: string, defaultValue?: string | string[]): string => {
-  const value = get(tokens, path, defaultValue);
-  return value?.toString() ?? '';
-};
-
-export const fontBody = getToken('fontFamily.body');
-export const fontMono = getToken('fontFamily.mono');

package/src/testing/PreviewPopover.tsx

@@ -1,80 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type DxAnchorActivate, Popover } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget } from '../extensions';
-
-type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
-
-type PreviewPopoverValue = Partial<{
-  link: PreviewLinkRef;
-  target: PreviewLinkTarget;
-  pending: boolean;
-}>;
-
-const [PreviewPopoverContextProvider, usePreviewPopover] = createContext<PreviewPopoverValue>('PreviewPopover', {});
-
-type PopoverLookupProviderProps = PropsWithChildren<{
-  onLookup?: PreviewLookup;
-}>;
-
-// TOOD(burdon): Reconcile with PreviewPlugin?
-const PreviewPopoverProvider = ({ children, onLookup }: PopoverLookupProviderProps) => {
-  const trigger = useRef<HTMLElement | null>(null);
-  const [value, setValue] = useState<PreviewPopoverValue>({});
-  const [open, setOpen] = useState(false);
-
-  const handleDxAnchorActivate = useCallback(
-    (event: DxAnchorActivate) => {
-      const { refId, label, trigger: dxTrigger } = event;
-      setValue((value) => ({
-        ...value,
-        link: { label, ref: refId },
-        pending: true,
-      }));
-      trigger.current = dxTrigger;
-      queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref: refId }).then((target) =>
-        setValue((value) => ({
-          ...value,
-          target: target ?? undefined,
-          pending: false,
-        })),
-      );
-    },
-    [onLookup],
-  );
-
-  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!rootRef || !handleDxAnchorActivate) {
-      return;
-    }
-
-    return addEventListener(rootRef, 'dx-anchor-activate' as any, handleDxAnchorActivate, {
-      capture: true,
-      passive: false,
-    });
-  }, [rootRef, handleDxAnchorActivate]);
-
-  return (
-    <PreviewPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <Popover.Root open={open} onOpenChange={setOpen}>
-        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </Popover.Root>
-    </PreviewPopoverContextProvider>
-  );
-};
-
-export { PreviewPopoverProvider, usePreviewPopover };
-
-export type { PopoverLookupProviderProps, PreviewPopoverValue };

package/src/testing/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './util';
-export * from './PreviewPopover';

package/src/testing/util.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-/** deprecated Replace with @dxos/util trim */
-// TODO(burdon): Remove
-export const str = (...lines: string[]) => lines.join('\n');

package/src/types/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './types';

package/src/types/types.ts

@@ -1,32 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-import * as Schema from 'effect/Schema';
-
-// Runtime data structure.
-export type Range = {
-  from: number;
-  to: number;
-};
-
-// Persistent data structure.
-// TODO(burdon): Rename annotation?
-export type Comment = {
-  id: string;
-  cursor?: string;
-};
-
-/**
- * Callback that renders into a DOM element within the editor.
- */
-export type RenderCallback<Props extends object> = (el: HTMLElement, props: Props, view: EditorView) => void;
-
-export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
-export const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
-export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
-
-export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
-export const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
-export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;