@dxos/react-ui-editor 0.3.10 → 0.3.11-main.00a28cb

package/src/components/TextEditor/extensions/code.ts

@@ -1,99 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Range } from '@codemirror/state';
-import {
-  ViewPlugin,
-  type DecorationSet,
-  EditorView,
-  type ViewUpdate,
-  Decoration,
-  type BlockInfo,
-} from '@codemirror/view';
-import get from 'lodash.get';
-
-import { mx } from '@dxos/react-ui-theme';
-
-import { tokens } from '../../../styles';
-
-const CODE_REGEX = /```[\s\S]*?```/gs;
-
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '& .cm-code-block': {
-    display: 'block',
-    paddingInline: '4px !important',
-  },
-  '&light .cm-code-block': {
-    background: get(tokens, 'extend.colors.neutral.50'),
-  },
-  '&dark .cm-code-block': {
-    background: get(tokens, 'extend.colors.neutral.850'),
-  },
-  '& .cm-code-block-first': {
-    paddingTop: '4px !important',
-    borderTopLeftRadius: '4px',
-    borderTopRightRadius: '4px',
-  },
-  '& .cm-code-block-last': {
-    paddingBottom: '4px !important',
-    borderBottomLeftRadius: '4px',
-    borderBottomRightRadius: '4px',
-  },
-});
-
-const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
-  const start = lines.findIndex((line) => line.from >= from);
-  const end = lines.findIndex((line) => line.to >= to);
-  return [start, end];
-};
-
-export const code = () => {
-  const getDecorations = (view: EditorView) => {
-    const decorations: Range<Decoration>[] = [];
-    if (view.state.readOnly) {
-      const text = view.state.doc.sliceString(0);
-      const matches = text.matchAll(CODE_REGEX);
-      const blocks = view.viewportLineBlocks;
-      for (const match of matches) {
-        const range = getLineRange(blocks, match.index!, match.index! + match[0].length);
-        for (let i = range[0]; i <= range[1]; i++) {
-          const block = blocks[i];
-          decorations.push(
-            Decoration.line({
-              class: mx(
-                'cm-code-block',
-                i === range[0] && 'cm-code-block-first',
-                i === range[1] && 'cm-code-block-last',
-              ),
-            }).range(block.from),
-          );
-        }
-      }
-    }
-
-    return Decoration.set(decorations);
-  };
-
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = getDecorations(view);
-        }
-
-        update(update: ViewUpdate) {
-          if (update.docChanged || update.viewportChanged) {
-            this.decorations = getDecorations(update.view);
-          }
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-    styles,
-  ];
-};

package/src/components/TextEditor/extensions/comments.ts

@@ -1,173 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import {
-  keymap,
-  type DecorationSet,
-  type Rect,
-  type ViewUpdate,
-  Decoration,
-  EditorView,
-  MatchDecorator,
-  ViewPlugin,
-  WidgetType,
-} from '@codemirror/view';
-
-import { debounce } from '@dxos/async';
-import { invariant } from '@dxos/invariant';
-
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '& .cm-bookmark': {
-    cursor: 'pointer',
-    margin: '4px',
-    padding: '4px',
-    backgroundColor: 'yellow',
-  },
-  '& .cm-bookmark-selected': {
-    backgroundColor: 'orange',
-  },
-});
-
-class BookmarkWidget extends WidgetType {
-  constructor(private readonly _pos: number, private readonly _id: string, private readonly _handleClick: () => void) {
-    super();
-    invariant(this._id);
-  }
-
-  override eq(other: BookmarkWidget) {
-    return this._id === other._id;
-  }
-
-  override toDOM() {
-    const span = document.createElement('span');
-    span.className = 'cm-bookmark';
-    span.textContent = '§';
-    span.onclick = () => this._handleClick();
-    return span;
-  }
-}
-
-type CommentsInfo = {
-  active?: string;
-  items?: { id: string; pos: number; location: Rect | null }[];
-};
-
-export type CommentsOptions = {
-  key?: string;
-  onCreate?: (from: number, to: number) => string | void;
-  onUpdate?: (info: CommentsInfo) => void;
-};
-
-// https://www.markdownguide.org/extended-syntax/#footnotes
-// TODO(burdon): Record span in automerge model?
-// TODO(burdon): Extended markdown: https://www.markdownguide.org/extended-syntax
-export const comments = (options: CommentsOptions = {}): Extension => {
-  let active: string | undefined;
-
-  const bookmarkMatcher = new MatchDecorator({
-    regexp: /\[\^(\w+)\]/g,
-    decoration: (match, view, pos) => {
-      const id = match[1];
-      return Decoration.replace({
-        id,
-        widget: new BookmarkWidget(pos, id, () => handleUpdate({ active: id })),
-      });
-    },
-  });
-
-  const bookmarks = ViewPlugin.fromClass(
-    class {
-      bookmarks: DecorationSet;
-      constructor(view: EditorView) {
-        this.bookmarks = bookmarkMatcher.createDeco(view);
-      }
-
-      update(update: ViewUpdate) {
-        this.bookmarks = bookmarkMatcher.updateDeco(update, this.bookmarks);
-      }
-    },
-    {
-      decorations: (instance) => instance.bookmarks,
-      provide: (plugin) =>
-        EditorView.atomicRanges.of((view) => {
-          return view.plugin(plugin)?.bookmarks || Decoration.none;
-        }),
-    },
-  );
-
-  const handleUpdate = debounce((data: CommentsInfo) => {
-    options.onUpdate?.(data);
-  }, 200);
-
-  return [
-    keymap.of([
-      {
-        key: options?.key ?? 'shift-meta-c',
-        run: (view) => {
-          // Insert footnote.
-          const { from, to, head } = view.state.selection.main;
-          const id = options.onCreate?.(from, to);
-          if (id) {
-            const tag = `[^${id}]`;
-            // TODO(burdon): Add selection.
-            view.dispatch({
-              changes: { from: head, insert: tag },
-              selection: { anchor: head + tag.length },
-            });
-
-            return true;
-          }
-
-          return false;
-        },
-      },
-    ]),
-
-    bookmarks,
-
-    // Monitor cursor movement.
-    EditorView.updateListener.of((update) => {
-      active = undefined;
-      if (!options.onUpdate) {
-        return;
-      }
-
-      const { view, state } = update;
-      const pos = state.selection.main.head;
-
-      const decorations: { from: number; to: number; value: Decoration }[] = [];
-      const rangeSet = view.plugin(bookmarks)?.bookmarks;
-      let closest = Infinity;
-      // TODO(burdon): Handle multiple visible ranges in large documents.
-      const { from, to } = /* view.visibleRanges?.[0] ?? */ { from: 0, to: state.doc.length };
-      rangeSet?.between(from, to, (from, to, value) => {
-        decorations.push({ from, to, value });
-        const d = Math.min(Math.abs(pos - from), Math.abs(pos - to));
-        if (d < closest) {
-          // TODO(burdon): Update class of selected.
-          active = value.spec.id;
-          closest = d;
-        }
-      });
-
-      if (decorations.length) {
-        handleUpdate({
-          active,
-          items: decorations.map(
-            ({
-              from,
-              value: {
-                spec: { id },
-              },
-            }) => ({ id: id as string, pos: from, location: view.coordsAtPos(from) }),
-          ),
-        });
-      }
-    }),
-
-    styles,
-  ];
-};

package/src/components/TextEditor/extensions/experimental.tsx

@@ -1,114 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Adapted from: https://github.com/uiwjs/react-codemirror/blob/master/extensions/hyper-link/src/index.ts
-//
-
-import { type Extension } from '@codemirror/state';
-import {
-  Decoration,
-  type DecorationSet,
-  EditorView,
-  MatchDecorator,
-  ViewPlugin,
-  type ViewUpdate,
-} from '@codemirror/view';
-
-// TODO(burdon): Reconcile with theme.
-export const styles = EditorView.baseTheme({
-  '.cm-hyperlink-label': {
-    cursor: 'pointer',
-    textDecoration: 'underline',
-  },
-  '.cm-hyperlink-bracket': {
-    opacity: 0.2,
-  },
-  '.cm-hyperlink-url': {
-    opacity: 0.5,
-    fontFamily: 'monospace',
-  },
-});
-
-const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
-
-/**
- * Custom link decorator.
- * NOTE: The default markdown extension formats links by default.
- * @deprecated
- */
-const linkDecorator = () =>
-  new MatchDecorator({
-    regexp: markdownLinkRegexp,
-    decorate: (add, from, to, match, view) => {
-      const [_, label, url] = match;
-      const p0 = {
-        start: from,
-        end: from + 1,
-      };
-
-      const p1 = {
-        start: from + 1,
-        end: from + 1 + label.length,
-      };
-
-      const p2 = {
-        start: p1.end,
-        end: p1.end + 1,
-      };
-
-      const p3 = {
-        start: p1.end + 1,
-        end: p1.end + 1 + url.length + 2,
-      };
-
-      add(
-        p0.start,
-        p0.end,
-        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
-      );
-      add(p1.start, p1.end, Decoration.mark({ class: 'cm-hyperlink-label' }));
-      add(
-        p2.start,
-        p2.end,
-        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
-      );
-      add(p3.start, p3.end, Decoration.mark({ class: 'cm-hyperlink-url', _attributes: { style: 'display: none' } }));
-    },
-  });
-
-export function hyperLinkExtension() {
-  return ViewPlugin.fromClass(
-    class HyperLinkView {
-      readonly decorator: MatchDecorator;
-      decorations: DecorationSet;
-      constructor(view: EditorView) {
-        this.decorator = linkDecorator();
-        this.decorations = this.decorator.createDeco(view);
-      }
-
-      update(update: ViewUpdate) {
-        if (update.docChanged || update.viewportChanged) {
-          this.decorations = this.decorator.updateDeco(update, this.decorations);
-        }
-      }
-    },
-    {
-      decorations: (value) => value.decorations,
-      eventHandlers: {
-        // TODO(burdon): CLick to expand link.
-        // https://discuss.codemirror.net/t/decorator-iteration-on-click-event/4226/2
-        mousedown: function (event, view) {
-          const pos = view.posAtDOM(event.target as Node);
-          if (pos !== 0) {
-            console.log(this);
-          }
-        },
-        // TODO(burdon): Hide when cursor moves away.
-        keydown: (event, view) => {
-          view.update([]);
-        },
-      },
-    },
-  );
-}
-
-export const hyperlinkWidget: Extension = [hyperLinkExtension(), styles];

package/src/components/TextEditor/extensions/highlight.ts

@@ -1,128 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Extension, StateEffect, StateField } from '@codemirror/state';
-import { Decoration, EditorView } from '@codemirror/view';
-import sortBy from 'lodash.sortby';
-import { useEffect } from 'react';
-
-import { type DocumentRange } from '../../../hooks';
-
-// TODO(burdon): Detect click, or cursor proximity.
-
-// TODO(burdon): Reconcile with theme.
-const styles = EditorView.baseTheme({
-  '& .cm-highlight': {
-    backgroundColor: 'yellow', // TODO(burdon): Reconcile with tailwind theme.
-  },
-  '& .cm-highlight::before': {
-    content: ']',
-  },
-  '& .cm-highlight-active': {
-    backgroundColor: 'lime',
-  },
-});
-
-const marks = {
-  highlight: Decoration.mark({ class: 'cm-highlight' }),
-  HighlightActive: Decoration.mark({ class: 'cm-highlight-active' }),
-};
-
-type HighlightRange = DocumentRange & { active?: boolean };
-
-// TODO(burdon): Make configurable to support multiple layers.
-const setHighlights = StateEffect.define<HighlightRange[]>();
-
-/**
- * Update field set.
- */
-// TODO(burdon): Reconcile range from data model, vs. in-markdown characters.
-export const useHighlights = (view: EditorView | undefined, ranges: HighlightRange[] = []) => {
-  useEffect(() => {
-    view?.dispatch({
-      effects: setHighlights.of(ranges),
-    });
-  }, [view, ranges]);
-};
-
-/**
- * State field that tracks highlight ranges.
- */
-export const highlightStateField = StateField.define<HighlightRange[]>({
-  create: () => [],
-  update: (threads, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(setHighlights)) {
-        return effect.value;
-      }
-    }
-
-    return threads;
-  },
-});
-
-/**
- * Decorate ranges.
- */
-// TODO(burdon): Pass in field to make reusable (e.g., comments, search).
-export const highlightDecorations = EditorView.decorations.compute([highlightStateField], (state) => {
-  const selectionRanges = state.field(highlightStateField);
-  const decorations =
-    sortBy(selectionRanges ?? [], (selection) => selection.from)?.flatMap((selection) => {
-      const range = { from: selection.from, to: selection.to + 1 };
-      if (selection.to > selection.from) {
-        if (selection.active) {
-          return marks.HighlightActive.range(range.from, range.to);
-        } else {
-          return marks.highlight.range(range.from, range.to);
-        }
-      } else {
-        return [];
-      }
-    }) ?? [];
-
-  return Decoration.set(decorations);
-});
-
-// TODO(burdon): Use current range to create comment.
-// TODO(burdon): Allow/prevent overlapping?
-
-/**
- * Track cursor entering and existing ranges.
- */
-const listener = (options: HighlightOptions) => {
-  return EditorView.updateListener.of((update) => {
-    const { view, state } = update;
-    const { /* from, to, */ head } = state.selection.main;
-    const ranges = state.field(highlightStateField);
-
-    // TODO(burdon): Modify range if editing.
-    // console.log('::::', update);
-
-    // Set active.
-    let mod = false;
-    const newRanges = ranges.map((range) => {
-      const active = head >= range.from && head <= range.to;
-      if (active !== range.active) {
-        mod = true;
-        return { ...range, active };
-      } else {
-        return range;
-      }
-    });
-
-    if (mod) {
-      view.dispatch({ effects: setHighlights.of(newRanges) });
-      options?.onChange?.(newRanges.find((range) => range.active)?.id);
-    }
-  });
-};
-
-export type HighlightOptions = {
-  onChange?: (active?: string) => {};
-};
-
-export const highlight = (options: HighlightOptions = {}): Extension => {
-  return [highlightStateField, highlightDecorations, listener(options), styles];
-};

package/src/components/TextEditor/extensions/image.ts

@@ -1,67 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
-
-export type ImageOptions = {};
-
-export const image = (options: ImageOptions = {}): Extension => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, options),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
-    provide: (field) => EditorView.decorations.from(field),
-  });
-};
-
-const update = (state: EditorState, options: ImageOptions) => {
-  const builder = new RangeSetBuilder();
-  const cursor = state.selection.main.head;
-
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (node.name === 'Image') {
-        const urlNode = node.node.getChild('URL');
-        if (urlNode) {
-          const hide = state.readOnly || cursor < node.from || cursor > node.to;
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(
-            hide ? node.from : node.to,
-            node.to,
-            Decoration.replace({
-              widget: new ImageWidget(url),
-            }),
-          );
-        }
-      }
-    },
-  });
-
-  return builder.finish();
-};
-
-class ImageWidget extends WidgetType {
-  constructor(readonly _url: string) {
-    super();
-  }
-
-  override eq(other: WidgetType) {
-    return this._url === (other as any as ImageWidget)?._url;
-  }
-
-  toDOM(view: EditorView) {
-    const img = document.createElement('img');
-    img.setAttribute('src', this._url);
-    img.setAttribute('class', 'cm-image');
-    return img;
-  }
-}

package/src/components/TextEditor/extensions/listener.ts

@@ -1,23 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { StateField } from '@codemirror/state';
-
-export type ListenerOptions = { onChange: (text: string) => void };
-
-/**
- * Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
- */
-export const listener = ({ onChange }: ListenerOptions) => {
-  return StateField.define({
-    create: () => null,
-    update: (_value, transaction) => {
-      if (transaction.docChanged && onChange) {
-        onChange(transaction.newDoc.toString());
-      }
-
-      return null;
-    },
-  });
-};