@dxos/react-ui-editor 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/extensions/factories.ts

@@ -1,284 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
-import { bracketMatching } from '@codemirror/language';
-import { searchKeymap } from '@codemirror/search';
-import { type ChangeSpec, EditorState, type Extension, type TransactionSpec } from '@codemirror/state';
-import {
-  EditorView,
-  type KeyBinding,
-  ViewPlugin,
-  drawSelection,
-  dropCursor,
-  highlightActiveLine,
-  keymap,
-  lineNumbers,
-  placeholder,
-  scrollPastEnd,
-} from '@codemirror/view';
-import { vscodeDarkInit, vscodeDarkStyle, vscodeLightInit, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
-import defaultsDeep from 'lodash.defaultsdeep';
-import merge from 'lodash.merge';
-
-import { generateName } from '@dxos/display-name';
-import { log } from '@dxos/log';
-import { type DocAccessor, type Space } from '@dxos/react-client/echo';
-import { type Identity } from '@dxos/react-client/halo';
-import { type ThemeMode } from '@dxos/react-ui';
-import { type HuePalette } from '@dxos/react-ui-theme';
-import { hexToHue, isTruthy } from '@dxos/util';
-
-import { editorGutter, editorMonospace } from '../defaults';
-import { type ThemeStyles, defaultTheme } from '../styles';
-
-import { automerge } from './automerge';
-import { SpaceAwarenessProvider, awareness } from './awareness';
-import { focus } from './focus';
-
-//
-// Basic
-//
-
-export const filterChars = (chars: RegExp) => {
-  return EditorState.transactionFilter.of((transaction) => {
-    if (!transaction.docChanged) return transaction;
-
-    const changes: ChangeSpec[] = [];
-    transaction.changes.iterChanges((fromA, toA, fromB, toB, text) => {
-      const inserted = text.toString();
-      const filtered = inserted.replace(chars, '');
-      if (inserted !== filtered) {
-        changes.push({
-          from: fromB,
-          to: toB,
-          insert: filtered,
-        });
-      }
-    });
-
-    if (changes.length) {
-      return [transaction, { changes, sequential: true } as TransactionSpec];
-    }
-    return transaction;
-  });
-};
-
-/**
- * https://codemirror.net/docs/extensions
- * https://github.com/codemirror/basic-setup
- * https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
- * https://github.com/codemirror/theme-one-dark
- */
-export type BasicExtensionsOptions = {
-  allowMultipleSelections?: boolean;
-  bracketMatching?: boolean;
-  closeBrackets?: boolean;
-  dropCursor?: boolean;
-  drawSelection?: boolean;
-  editable?: boolean;
-  focus?: boolean;
-  highlightActiveLine?: boolean;
-  history?: boolean;
-  indentWithTab?: boolean;
-  keymap?: null | 'default' | 'standard';
-  lineNumbers?: boolean;
-  /** If false then do not set a max-width or side margin on the editor. */
-  lineWrapping?: boolean;
-  monospace?: boolean;
-  placeholder?: string;
-  /** If true user cannot edit the text, but they can still select and copy it. */
-  readOnly?: boolean;
-  search?: boolean;
-  /** NOTE: Do not use with stack sections. */
-  scrollPastEnd?: boolean;
-  standardKeymap?: boolean;
-  tabSize?: number;
-};
-
-const defaultBasicOptions: BasicExtensionsOptions = {
-  allowMultipleSelections: true,
-  bracketMatching: true,
-  closeBrackets: true,
-  drawSelection: true,
-  focus: true,
-  history: true,
-  keymap: 'standard',
-  lineWrapping: true,
-  search: false,
-} as const;
-
-const keymaps: { [key: string]: readonly KeyBinding[] } = {
-  // https://codemirror.net/docs/ref/#commands.standardKeymap
-  standard: standardKeymap,
-  // https://codemirror.net/docs/ref/#commands.defaultKeymap
-  default: defaultKeymap,
-};
-
-export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
-  const props = defaultsDeep({}, _props, defaultBasicOptions);
-  return [
-    // NOTE: Doesn't catch errors in keymap functions.
-    EditorView.exceptionSink.of((err) => {
-      log.catch(err);
-    }),
-
-    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
-    props.bracketMatching && bracketMatching(),
-    props.closeBrackets && closeBrackets(),
-    props.dropCursor && dropCursor(),
-    props.drawSelection && drawSelection({ cursorBlinkRate: 1_200 }),
-    props.editable !== undefined && EditorView.editable.of(props.editable),
-    props.focus && focus,
-    props.highlightActiveLine && highlightActiveLine(),
-    props.history && history(),
-    props.lineNumbers && [lineNumbers(), editorGutter],
-    props.lineWrapping && EditorView.lineWrapping,
-    props.monospace && editorMonospace,
-    props.placeholder && placeholder(props.placeholder),
-    props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
-    props.scrollPastEnd && scrollPastEnd(),
-    props.tabSize && EditorState.tabSize.of(props.tabSize),
-
-    // https://codemirror.net/docs/ref/#view.KeyBinding
-    keymap.of(
-      [
-        ...((props.keymap && keymaps[props.keymap]) ?? []),
-        // NOTE: Tabs are also configured by markdown extension.
-        // https://codemirror.net/docs/ref/#commands.indentWithTab
-        ...(props.indentWithTab ? [indentWithTab] : []),
-        // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-        ...(props.closeBrackets ? closeBracketsKeymap : []),
-        // https://codemirror.net/docs/ref/#commands.historyKeymap
-        ...(props.history ? historyKeymap : []),
-        // https://codemirror.net/docs/ref/#search.searchKeymap
-        ...(props.search ? searchKeymap : []),
-        // Disable bindings that conflict with system shortcuts.
-        // TODO(burdon): Catalog global shortcuts.
-        {
-          key: 'Mod-Shift-k',
-          preventDefault: true,
-          run: () => true,
-        },
-      ].filter(isTruthy),
-    ),
-  ].filter(isTruthy);
-};
-
-//
-// Theme
-//
-
-export type ThemeExtensionsOptions = {
-  themeMode?: ThemeMode;
-  styles?: ThemeStyles;
-  syntaxHighlighting?: boolean;
-  slots?: {
-    editor?: {
-      className?: string;
-    };
-    scroll?: {
-      className?: string;
-    };
-    content?: {
-      className?: string;
-    };
-  };
-};
-
-export const grow: ThemeExtensionsOptions['slots'] = {
-  editor: {
-    className: 'is-full bs-full',
-  },
-} as const;
-
-export const fullWidth: ThemeExtensionsOptions['slots'] = {
-  editor: {
-    className: 'is-full',
-  },
-} as const;
-
-export const defaultThemeSlots = grow;
-
-const semanticTokensSettings = {
-  settings: {
-    background: 'var(--dx-baseSurface)',
-    foreground: 'var(--dx-baseText)',
-  },
-};
-
-export const defaultStyles = {
-  dark: vscodeDarkStyle,
-  light: vscodeLightStyle,
-};
-
-/**
- * https://codemirror.net/examples/styling
- */
-export const createThemeExtensions = ({
-  themeMode,
-  styles,
-  syntaxHighlighting: syntaxHighlightingProps,
-  slots: slotsParam,
-}: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, slotsParam, defaultThemeSlots);
-  return [
-    EditorView.darkTheme.of(themeMode === 'dark'),
-    EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
-    syntaxHighlightingProps && [
-      themeMode === 'dark' ? vscodeDarkInit(semanticTokensSettings) : vscodeLightInit(semanticTokensSettings),
-    ],
-    slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
-    slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
-    slots.scroll?.className &&
-      ViewPlugin.fromClass(
-        class {
-          constructor(view: EditorView) {
-            view.scrollDOM.classList.add(...slots.scroll.className.split(/\s+/));
-          }
-        },
-      ),
-  ].filter(isTruthy);
-};
-
-//
-// Data
-//
-
-export type DataExtensionsProps<T> = {
-  id: string;
-  text?: DocAccessor<T>;
-  space?: Space;
-  identity?: Identity | null;
-};
-
-// TODO(burdon): Move out of react-ui-editor (remove echo deps).
-export const createDataExtensions = <T>({ id, text, space, identity }: DataExtensionsProps<T>): Extension[] => {
-  const extensions: Extension[] = [];
-  if (text) {
-    extensions.push(automerge(text));
-  }
-
-  if (space && identity) {
-    const peerId = identity?.identityKey.toHex();
-    const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
-    extensions.push(
-      awareness(
-        new SpaceAwarenessProvider({
-          space,
-          channel: `awareness.${id}`,
-          peerId: identity.identityKey.toHex(),
-          info: {
-            darkColor: `var(--dx-${hue}Cursor)`,
-            lightColor: `var(--dx-${hue}Cursor)`,
-            displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-          },
-        }),
-      ),
-    );
-  }
-
-  return extensions;
-};

package/src/extensions/floating-menu.ts

@@ -1,126 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-import { type CleanupFn, addEventListener } from '@dxos/async';
-
-export type FloatingMenuOptions = {
-  icon?: string;
-  height?: number;
-  padding?: number;
-};
-
-export const floatingMenu = (options: FloatingMenuOptions = {}) => [
-  ViewPlugin.fromClass(
-    class {
-      view: EditorView;
-      tag: HTMLElement;
-      rafId?: number | null;
-      cleanup?: CleanupFn;
-
-      constructor(view: EditorView) {
-        this.view = view;
-
-        // Position context.
-        const container = view.scrollDOM;
-        if (getComputedStyle(container).position === 'static') {
-          container.style.position = 'relative';
-        }
-
-        {
-          const icon = document.createElement('dx-icon');
-          icon.setAttribute('icon', options.icon ?? 'ph--dots-three-vertical--regular');
-
-          this.tag = document.createElement('dx-anchor');
-          this.tag.classList.add('cm-floating-menu-trigger');
-          this.tag.appendChild(icon);
-        }
-
-        container.appendChild(this.tag);
-
-        // Listen for scroll events.
-        const handler = () => this.scheduleUpdate();
-        this.cleanup = addEventListener(container, 'scroll', handler);
-        this.scheduleUpdate();
-      }
-
-      destroy() {
-        this.cleanup?.();
-        this.tag.remove();
-        if (this.rafId != null) {
-          cancelAnimationFrame(this.rafId);
-        }
-      }
-
-      update(update: ViewUpdate) {
-        this.tag.dataset.focused = update.view.hasFocus ? 'true' : 'false';
-        if (!update.view.hasFocus) {
-          return;
-        }
-
-        // TODO(burdon): Timer to fade in/out.
-        /*if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
-          this.tag.style.display = 'none';
-          this.tag.classList.add('opacity-10');
-        } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-          this.tag.style.display = '';
-        } else */ if (
-          update.docChanged ||
-          update.focusChanged ||
-          update.geometryChanged ||
-          update.selectionSet ||
-          update.viewportChanged
-        ) {
-          this.scheduleUpdate();
-        }
-      }
-
-      updateButtonPosition() {
-        const { x, width } = this.view.contentDOM.getBoundingClientRect();
-
-        const pos = this.view.state.selection.main.head;
-        const line = this.view.lineBlockAt(pos);
-        const coords = this.view.coordsAtPos(line.from);
-        if (!coords) {
-          return;
-        }
-
-        const lineHeight = coords.bottom - coords.top;
-        const dy = (lineHeight - (options.height ?? 32)) / 2;
-
-        const offsetTop = coords.top + dy;
-        const offsetLeft = x + width + (options.padding ?? 8);
-
-        this.tag.style.top = `${offsetTop}px`;
-        this.tag.style.left = `${offsetLeft}px`;
-        this.tag.style.display = '';
-      }
-
-      scheduleUpdate() {
-        if (this.rafId != null) {
-          cancelAnimationFrame(this.rafId);
-        }
-
-        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
-      }
-    },
-  ),
-
-  EditorView.theme({
-    '.cm-floating-menu-trigger': {
-      position: 'fixed',
-      padding: '0',
-      border: 'none',
-      opacity: '0',
-      display: 'grid',
-      placeContent: 'center',
-      width: '2rem',
-      height: '2rem',
-    },
-    '&:focus-within .cm-floating-menu-trigger': {
-      opacity: '1',
-    },
-  }),
-];

package/src/extensions/focus.ts

@@ -1,36 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { StateEffect, StateField } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-
-const focusEffect = StateEffect.define<boolean>();
-
-export const focusField = StateField.define<boolean>({
-  create: () => false,
-  update: (value, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(focusEffect)) {
-        return effect.value;
-      }
-    }
-
-    return value;
-  },
-});
-
-/**
- * Manage focus.
- */
-export const focus = [
-  focusField,
-  EditorView.domEventHandlers({
-    focus: (_event, view) => {
-      requestAnimationFrame(() => view.dispatch({ effects: focusEffect.of(true) }));
-    },
-    blur: (_event, view) => {
-      requestAnimationFrame(() => view.dispatch({ effects: focusEffect.of(false) }));
-    },
-  }),
-];

package/src/extensions/folding.tsx

@@ -1,44 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { codeFolding, foldGutter } from '@codemirror/language';
-import { type Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import React from 'react';
-
-import { Domino, Icon } from '@dxos/react-ui';
-
-import { renderRoot } from '../util';
-
-export type FoldingOptions = {};
-
-/**
- * https://codemirror.net/examples/gutter
- */
-export const folding = (_props: FoldingOptions = {}): Extension => [
-  codeFolding({
-    placeholderDOM: () => {
-      return document.createElement('span'); // Collapse content.
-    },
-  }),
-  foldGutter({
-    markerDOM: (open) => {
-      return renderRoot(
-        Domino.of('div').classNames('flex h-full items-center').build(),
-        // TODO(burdon): Use sprite directly.
-        <Icon icon='ph--caret-right--bold' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
-      );
-    },
-  }),
-  EditorView.theme({
-    '.cm-foldGutter': {
-      opacity: 0.3,
-      transition: 'opacity 0.3s',
-      width: '32px',
-    },
-    '.cm-foldGutter:hover': {
-      opacity: 1,
-    },
-  }),
-];

package/src/extensions/hashtag.tsx

@@ -1,68 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import {
-  Decoration,
-  type DecorationSet,
-  EditorView,
-  MatchDecorator,
-  ViewPlugin,
-  type ViewUpdate,
-  WidgetType,
-} from '@codemirror/view';
-
-import { getHashStyles, mx } from '@dxos/react-ui-theme';
-
-class TagWidget extends WidgetType {
-  constructor(private _text: string) {
-    super();
-  }
-
-  toDOM(): HTMLSpanElement {
-    const span = document.createElement('span');
-    span.className = mx('cm-tag', getHashStyles(this._text).surface);
-    span.textContent = this._text;
-    return span;
-  }
-}
-
-const tagMatcher = new MatchDecorator({
-  regexp: /#(\w+)\W/g,
-  decoration: (match) =>
-    Decoration.replace({
-      widget: new TagWidget(match[1]),
-    }),
-});
-
-// TODO(burdon): Autocomplete from existing tags?
-export const hashtag = (): Extension => [
-  ViewPlugin.fromClass(
-    class {
-      tags: DecorationSet;
-      constructor(view: EditorView) {
-        this.tags = tagMatcher.createDeco(view);
-      }
-
-      update(update: ViewUpdate) {
-        this.tags = tagMatcher.updateDeco(update, this.tags);
-      }
-    },
-    {
-      decorations: (instance) => instance.tags,
-      provide: (plugin) =>
-        EditorView.atomicRanges.of((view) => {
-          return view.plugin(plugin)?.tags || Decoration.none;
-        }),
-    },
-  ),
-
-  EditorView.theme({
-    '.cm-tag': {
-      borderRadius: '4px',
-      marginRight: '6px',
-      padding: '2px 6px',
-    },
-  }),
-];

package/src/extensions/index.ts

@@ -1,30 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './annotations';
-export * from './autocomplete';
-export * from './autoscroll';
-export * from './automerge';
-export * from './awareness';
-export * from './blast';
-export * from './command-dialog';
-export * from './command-menu';
-export * from './comments';
-export * from './debug';
-export * from './dnd';
-export * from './factories';
-export * from './floating-menu';
-export * from './focus';
-export * from './folding';
-export * from './hashtag';
-export * from './json';
-export * from './listener';
-export * from './markdown';
-export * from './mention';
-export * from './modes';
-export * from './outliner';
-export * from './preview';
-export * from './selection';
-export * from './tags';
-export * from './typewriter';

package/src/extensions/json.ts

@@ -1,57 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { json, jsonParseLinter } from '@codemirror/lang-json';
-import { type LintSource, linter } from '@codemirror/lint';
-import { type Extension } from '@codemirror/state';
-import Ajv, { type ValidateFunction } from 'ajv';
-
-import { type JsonSchemaType } from '@dxos/echo/internal';
-
-export type JsonExtensionsOptions = {
-  schema?: JsonSchemaType;
-};
-
-export const createJsonExtensions = ({ schema }: JsonExtensionsOptions = {}): Extension => {
-  let lintSource: LintSource = jsonParseLinter();
-  if (schema) {
-    // NOTE: Relaxing strict mode to allow additional custom schema properties.
-    const ajv = new Ajv({ allErrors: false, strict: false });
-    const validate = ajv.compile(schema);
-    lintSource = schemaLinter(validate);
-  }
-
-  return [json(), linter(lintSource)];
-};
-
-const schemaLinter =
-  (validate: ValidateFunction): LintSource =>
-  (view) => {
-    try {
-      const jsonText = view.state.doc.toString();
-      const jsonData = JSON.parse(jsonText);
-      const valid = validate(jsonData);
-      if (valid) {
-        return [];
-      }
-
-      return (
-        validate.errors?.map((err: any) => ({
-          from: 0,
-          to: jsonText.length,
-          severity: 'error',
-          message: `${err.instancePath || '(root)'} ${err.message}`,
-        })) ?? []
-      );
-    } catch (err: unknown) {
-      return [
-        {
-          from: 0,
-          to: view.state.doc.length,
-          severity: 'error',
-          message: 'Invalid JSON: ' + (err as Error).message,
-        },
-      ];
-    }
-  };

package/src/extensions/listener.ts

@@ -1,38 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-
-import { documentId } from './selection';
-
-export type ListenerOptions = {
-  onFocus?: (focusing: boolean) => void;
-  onChange?: (text: string, id: string) => void;
-};
-
-/**
- * Event listener.
- * @deprecated Use EditorView.updateListener and listen for specific update events.
- */
-export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
-  const extensions: Extension[] = [];
-
-  onFocus &&
-    extensions.push(
-      EditorView.focusChangeEffect.of((_, focusing) => {
-        onFocus(focusing);
-        return null;
-      }),
-    );
-
-  onChange &&
-    extensions.push(
-      EditorView.updateListener.of((update) => {
-        onChange(update.state.doc.toString(), update.state.facet(documentId));
-      }),
-    );
-
-  return extensions;
-};