@dxos/react-ui-editor 0.8.4-main.f9ba587 → 0.8.4-main.fcfe5033a5

package/src/extensions/factories.ts

@@ -1,259 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { searchKeymap } from '@codemirror/search';
-import { EditorState, type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import {
-  EditorView,
-  type KeyBinding,
-  ViewPlugin,
-  drawSelection,
-  dropCursor,
-  highlightActiveLine,
-  keymap,
-  lineNumbers,
-  placeholder,
-  scrollPastEnd,
-} from '@codemirror/view';
-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, isNotFalsy } from '@dxos/util';
-
-import { automerge } from './automerge';
-import { SpaceAwarenessProvider, awareness } from './awareness';
-import { focus } from './focus';
-import { editorGutter, editorMonospace } from '../defaults';
-import { type ThemeStyles, defaultTheme } from '../styles';
-
-//
-// Basic
-//
-
-export const preventNewline = EditorState.transactionFilter.of((tr) => (tr.newDoc.lines > 1 ? [] : tr));
-
-/**
- * https://codemirror.net/docs/extensions
- * https://github.com/codemirror/basic-setup
- * https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
- */
-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;
-  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: true,
-} 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(isNotFalsy),
-    ),
-  ].filter(isNotFalsy);
-};
-
-//
-// Theme
-//
-
-export type ThemeExtensionsOptions = {
-  themeMode?: ThemeMode;
-  styles?: ThemeStyles;
-  syntaxHighlighting?: boolean;
-  slots?: {
-    editor?: {
-      className?: string;
-    };
-    scroll?: {
-      className?: string;
-    };
-    scroller?: {
-      className?: string;
-    };
-    content?: {
-      className?: string;
-    };
-  };
-};
-
-export const grow = {
-  editor: {
-    className: 'is-full bs-full',
-  },
-} as const;
-
-export const fullWidth = {
-  editor: {
-    className: 'is-full',
-  },
-} as const;
-
-export const defaultThemeSlots = grow;
-
-/**
- * https://codemirror.net/examples/styling
- */
-export const createThemeExtensions = ({
-  themeMode,
-  styles,
-  syntaxHighlighting: _syntaxHighlighting,
-  slots: _slots,
-}: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, _slots, defaultThemeSlots);
-  return [
-    EditorView.darkTheme.of(themeMode === 'dark'),
-    EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
-    // https://github.com/codemirror/theme-one-dark
-    _syntaxHighlighting &&
-      (themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
-    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);
-          }
-        },
-      ),
-    slots.scroller?.className &&
-      ViewPlugin.fromClass(
-        class {
-          constructor(view: EditorView) {
-            view.dom.querySelector('.cm-scroller')?.classList.add(...slots.scroller.className.split(' '));
-          }
-        },
-      ),
-  ].filter(isNotFalsy);
-};
-
-//
-// 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: {
-            displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-            darkColor: `var(--dx-${hue}Cursor)`,
-            lightColor: `var(--dx-${hue}Cursor)`,
-          },
-        }),
-      ),
-    );
-  }
-
-  return extensions;
-};

package/src/extensions/focus.ts

@@ -1,35 +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) => {
-      setTimeout(() => view.dispatch({ effects: focusEffect.of(true) }));
-    },
-    blur: (event, view) => {
-      setTimeout(() => view.dispatch({ effects: focusEffect.of(false) }));
-    },
-  }),
-];

package/src/extensions/folding.tsx

@@ -1,46 +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 { Icon } from '@dxos/react-ui';
-
-import { createElement, renderRoot } from '../util';
-
-export type FoldingOptions = {};
-
-/**
- * https://codemirror.net/examples/gutter
- */
-// TODO(burdon): Remember folding state (to state).
-export const folding = (_props: FoldingOptions = {}): Extension => [
-  codeFolding({
-    placeholderDOM: () => {
-      return document.createElement('span'); // Collapse content.
-    },
-  }),
-  foldGutter({
-    markerDOM: (open) => {
-      // TODO(burdon): Use sprite directly.
-      const el = createElement('div', { className: 'flex h-full items-center' });
-      return renderRoot(
-        el,
-        <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 { getHashColor, 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', getHashColor(this._text).tag);
-    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/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-schema';
-
-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;
-};

package/src/extensions/markdown/action.ts

@@ -1,116 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-
-import { type Action } from '@dxos/app-graph';
-import { type MenuActionProperties } from '@dxos/react-ui-menu';
-
-import {
-  Inline,
-  List,
-  addBlockquote,
-  addCodeblock,
-  addLink,
-  addList,
-  insertTable,
-  removeBlockquote,
-  removeCodeblock,
-  removeLink,
-  removeList,
-  setHeading,
-  setStyle,
-  toggleBlockquote,
-  toggleList,
-  toggleStyle,
-} from './formatting';
-import { createComment } from '../comments';
-
-export type PayloadType =
-  | 'view-mode'
-  | 'blockquote'
-  | 'strong'
-  | 'codeblock'
-  | 'comment'
-  | 'heading'
-  | 'image'
-  | 'emphasis'
-  | 'code'
-  | 'link'
-  | 'list-bullet'
-  | 'list-ordered'
-  | 'list-task'
-  | 'mention'
-  | 'prompt'
-  | 'search'
-  | 'strikethrough'
-  | 'table';
-
-export type EditorActionPayload = {
-  type: PayloadType;
-  data?: any;
-};
-
-export type EditorAction = Action<MenuActionProperties & EditorActionPayload>;
-
-export type EditorPayloadHandler = (view: EditorView, payload: EditorActionPayload) => void;
-
-export const processEditorPayload: EditorPayloadHandler = (view, { type, data }) => {
-  let inlineType, listType;
-  switch (type) {
-    case 'heading':
-      setHeading(parseInt(data))(view);
-      break;
-
-    case 'strong':
-    case 'emphasis':
-    case 'strikethrough':
-    case 'code':
-      inlineType =
-        type === 'strong'
-          ? Inline.Strong
-          : type === 'emphasis'
-            ? Inline.Emphasis
-            : type === 'strikethrough'
-              ? Inline.Strikethrough
-              : Inline.Code;
-      (typeof data === 'boolean' ? setStyle(inlineType, data) : toggleStyle(inlineType))(view);
-      break;
-
-    case 'list-ordered':
-    case 'list-bullet':
-    case 'list-task':
-      listType = type === 'list-ordered' ? List.Ordered : type === 'list-bullet' ? List.Bullet : List.Task;
-      (data === false ? removeList(listType) : data === true ? addList(listType) : toggleList(listType))(view);
-      break;
-
-    case 'blockquote':
-      (data === false ? removeBlockquote : data === true ? addBlockquote : toggleBlockquote)(view);
-      break;
-    case 'codeblock':
-      (data === false ? removeCodeblock : addCodeblock)(view);
-      break;
-    case 'table':
-      insertTable(view);
-      break;
-
-    case 'link':
-      (data === false ? removeLink : addLink())(view);
-      break;
-
-    case 'image':
-      addLink({ url: data, image: true })(view);
-      break;
-
-    case 'comment':
-      createComment(view);
-      break;
-  }
-
-  requestAnimationFrame(() => {
-    if (!view.hasFocus) {
-      view.focus();
-    }
-  });
-};

package/src/extensions/markdown/bundle.ts

@@ -1,71 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { completionKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import { syntaxHighlighting } from '@codemirror/language';
-import { languages } from '@codemirror/language-data';
-import { type Extension } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-
-import { type ThemeMode } from '@dxos/react-ui';
-import { isNotFalsy } from '@dxos/util';
-
-import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
-
-export type MarkdownBundleOptions = {
-  themeMode?: ThemeMode;
-  indentWithTab?: boolean;
-};
-
-/**
- * Creates markdown extensions.
- * To be used in conjunction with createBasicExtensions.
- *
- * Refs:
- * https://codemirror.net/docs/community
- * https://codemirror.net/docs/ref/#codemirror.basicSetup
- */
-export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): Extension[] => {
-  return [
-    // Main extension.
-    // https://github.com/codemirror/lang-markdown
-    // https://codemirror.net/5/mode/markdown/index.html (demo).
-    markdown({
-      // GRM by default (vs strict CommonMark):
-      // Table, TaskList, Strikethrough, and Autolink.
-      // NOTE: This extends the parser; it doesn't affect rendering.
-      // https://github.github.com/gfm
-      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage,
-
-      // Languages for syntax highlighting fenced code blocks.
-      codeLanguages: languages,
-
-      // Don't complete HTML tags.
-      completeHTMLTags: false,
-
-      // Parser extensions.
-      extensions: [
-        // GFM provided by default.
-        markdownTagsExtensions,
-      ],
-    }),
-
-    // Custom styles.
-    syntaxHighlighting(markdownHighlightStyle()),
-
-    keymap.of(
-      [
-        // https://codemirror.net/docs/ref/#commands.indentWithTab
-        options.indentWithTab !== false && indentWithTab,
-
-        // https://codemirror.net/docs/ref/#commands.defaultKeymap
-        ...defaultKeymap,
-        ...completionKeymap,
-      ].filter(isNotFalsy),
-    ),
-  ];
-};