@dxos/ui-editor 0.0.0

package/src/extensions/factories.ts

@@ -0,0 +1,284 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
+import { HighlightStyle, bracketMatching, syntaxHighlighting } 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 { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
+import defaultsDeep from 'lodash.defaultsdeep';
+
+import { generateName } from '@dxos/display-name';
+import { type DocAccessor } from '@dxos/echo-db';
+import { log } from '@dxos/log';
+import { type Messenger } from '@dxos/protocols';
+import { type Identity } from '@dxos/protocols/proto/dxos/client/services';
+import { type HuePalette } from '@dxos/ui-theme';
+import { type ThemeMode } from '@dxos/ui-types';
+import { hexToHue, isTruthy } from '@dxos/util';
+
+import { baseTheme, createFontTheme, editorGutter } from '../styles';
+
+import { automerge } from './automerge';
+import { SpaceAwarenessProvider, awareness } from './awareness';
+import { focus } from './focus';
+
+//
+// Basic
+//
+
+/**
+ * Enable tabbing into editor (required for tabster to work).
+ */
+export const tabbable = EditorView.contentAttributes.of({ tabindex: '0' });
+
+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;
+  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;
+  tabbable?: 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 = (propsProp?: BasicExtensionsOptions): Extension => {
+  const props = defaultsDeep({}, propsProp, 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.placeholder && placeholder(props.placeholder),
+    props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
+    props.scrollPastEnd && scrollPastEnd(),
+    props.tabbable && tabbable,
+    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 = {
+  monospace?: boolean;
+  themeMode?: ThemeMode;
+  slots?: {
+    editor?: {
+      className?: string;
+    };
+    scroll?: {
+      // NOTE: Do not apply vertical padding to scroll container.
+      className?: string;
+    };
+    content?: {
+      className?: string;
+    };
+  };
+  syntaxHighlighting?: boolean;
+};
+
+export const grow: ThemeExtensionsOptions['slots'] = {
+  editor: {
+    className: 'bs-full is-full',
+  },
+} as const;
+
+export const fullWidth: ThemeExtensionsOptions['slots'] = {
+  editor: {
+    className: 'is-full',
+  },
+} as const;
+
+export const defaultThemeSlots = grow;
+
+export const defaultStyles = {
+  dark: vscodeDarkStyle,
+  light: vscodeLightStyle,
+};
+
+/**
+ * https://codemirror.net/examples/styling
+ */
+export const createThemeExtensions = ({
+  monospace,
+  themeMode,
+  slots: slotsProp,
+  syntaxHighlighting: syntaxHighlightingProp,
+}: ThemeExtensionsOptions = {}): Extension => {
+  const slots = defaultsDeep({}, slotsProp, defaultThemeSlots);
+  return [
+    baseTheme,
+    EditorView.darkTheme.of(themeMode === 'dark'),
+    createFontTheme({ monospace }),
+    syntaxHighlightingProp &&
+      syntaxHighlighting(HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light)),
+    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>;
+  messenger?: Messenger;
+  identity?: Identity | null;
+};
+
+export const createDataExtensions = <T>({ id, text, messenger, identity }: DataExtensionsProps<T>): Extension[] => {
+  const extensions: Extension[] = [];
+  if (text) {
+    extensions.push(automerge(text));
+  }
+
+  if (messenger && identity) {
+    const peerId = identity?.identityKey.toHex();
+    const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
+    extensions.push(
+      awareness(
+        new SpaceAwarenessProvider({
+          messenger,
+          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/focus.ts

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

@@ -0,0 +1,63 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { codeFolding, foldGutter } from '@codemirror/language';
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+import { Domino, mx } from '@dxos/ui';
+
+/**
+ * https://codemirror.net/examples/gutter
+ */
+export const folding = (): Extension => {
+  return [
+    codeFolding({
+      placeholderDOM: () => Domino.of('span').root,
+    }),
+    foldGutter({
+      markerDOM: (open) => {
+        return Domino.of('div')
+          .classNames('flex bs-full justify-center items-center')
+          .children(
+            Domino.of('svg', Domino.SVG)
+              .classNames(mx('is-4 bs-4 cursor-pointer', open && 'rotate-90'))
+              .children(
+                Domino.of('use', Domino.SVG).attributes({
+                  href: Domino.icon('ph--caret-right--regular'),
+                }),
+              ),
+          ).root;
+      },
+      // TODO(burdon): markerDOM is called either way, defeating the animation: transition-transform duration-200
+      // domEventHandlers: {
+      //   click: (view, line: BlockInfo, event) => {
+      //     event.preventDefault();
+      //     event.stopPropagation();
+      //     const range = foldable(view.state, line.from, line.to);
+      //     if (range) {
+      //       view.dispatch({ effects: foldEffect.of(range) });
+      //       (event.target as HTMLElement)?.classList.add('rotate-90');
+      //     } else {
+      //       foldedRanges(view.state).between(line.from, line.to, (from, to) => {
+      //         view.dispatch({ effects: unfoldEffect.of({ from, to }) });
+      //         (event.target as HTMLElement)?.classList.remove('rotate-90');
+      //       });
+      //     }
+      //     return true;
+      //   },
+      // },
+    }),
+    EditorView.theme({
+      '.cm-foldGutter': {
+        opacity: 0.3,
+        transition: 'opacity 0.3s',
+        width: '32px',
+      },
+      '.cm-foldGutter:hover': {
+        opacity: 1,
+      },
+    }),
+  ];
+};

package/src/extensions/hashtag.ts

@@ -0,0 +1,68 @@
+//
+// 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/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

@@ -0,0 +1,34 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './annotations';
+export * from './autocomplete';
+export * from './autoscroll';
+export * from './automerge';
+export * from './awareness';
+export * from './blast';
+export * from './blocks';
+export * from './bookmarks';
+export * from './comments';
+export * from './debug';
+export * from './dnd';
+export * from './factories';
+export * from './focus';
+export * from './folding';
+export * from './hashtag';
+export * from './json';
+export * from './listener';
+export * from './markdown';
+export * from './mention';
+export * from './modal';
+export * from './modes';
+export * from './outliner';
+export * from './preview';
+export * from './replacer';
+export * from './selection';
+export * from './scrolling';
+export * from './state';
+export * from './submit';
+export * from './tags';
+export * from './typewriter';

package/src/extensions/json.ts

@@ -0,0 +1,57 @@
+//
+// 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

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+import { isNonNullable } from '@dxos/util';
+
+import { documentId } from './selection';
+
+export type ListenerOptions = {
+  onFocus?: (event: { id: string; focusing: boolean }) => void;
+  onChange?: (event: { id: string; text: string }) => void;
+};
+
+export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
+  return [
+    onFocus &&
+      EditorView.focusChangeEffect.of((state, focusing) => {
+        onFocus({ id: state.facet(documentId), focusing });
+        return null;
+      }),
+
+    onChange &&
+      EditorView.updateListener.of(({ state, docChanged }) => {
+        if (docChanged) {
+          onChange({ id: state.facet(documentId), text: state.doc.toString() });
+        }
+      }),
+  ].filter(isNonNullable);
+};

package/src/extensions/markdown/action.ts

@@ -0,0 +1,117 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+import { type Node } from '@dxos/app-graph';
+import { type MenuActionProperties } from '@dxos/ui-types';
+
+import { createComment } from '../comments';
+
+import {
+  Inline,
+  List,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
+  insertTable,
+  removeBlockquote,
+  removeCodeblock,
+  removeLink,
+  removeList,
+  setHeading,
+  setStyle,
+  toggleBlockquote,
+  toggleList,
+  toggleStyle,
+} from './formatting';
+
+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 = Node.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();
+    }
+  });
+};