@dxos/react-ui-editor 0.3.10 → 0.3.11-main.008b7c6

package/dist/types/src/hooks/yjs/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/yjs/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/types/src/hooks/yjs/space-provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"space-provider.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/yjs/space-provider.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAO7C;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;gBAEtB,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA+BlH,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,mBAAmB;CAG5B"}

package/dist/types/src/hooks/yjs/yjs.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"yjs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/yjs/yjs.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;AAWxC,wBAIE;AA+BF,eAAO,MAAM,OAAO;;CAGnB,CAAC"}

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/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;
-    },
-  });
-};

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

@@ -1,61 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { hoverTooltip } from '@codemirror/view';
-
-import { tooltipContent } from '@dxos/react-ui-theme';
-
-const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
-
-export type TooltipOptions = {
-  onHover: (el: Element, url: string) => void;
-  regexp?: RegExp;
-};
-
-/**
- * https://codemirror.net/examples/tooltip
- * https://codemirror.net/docs/ref/#view.hoverTooltip
- * https://github.com/codemirror/view/blob/main/src/tooltip.ts
- */
-export const tooltip = ({ onHover, regexp = markdownLinkRegexp }: TooltipOptions): Extension =>
-  hoverTooltip((view, pos) => {
-    const { from, text } = view.state.doc.lineAt(pos);
-    const p = pos - from;
-
-    let idx = 0;
-    let match;
-    do {
-      match = text.substring(idx).match(regexp);
-      if (!match) {
-        match = undefined;
-        break;
-      }
-
-      idx = text.indexOf(match[0]);
-      if (p >= idx && p < idx + match[0].length) {
-        break;
-      }
-
-      idx += match[0].length;
-    } while (true);
-
-    if (!match) {
-      return null;
-    }
-
-    const [, , url] = match ?? [];
-
-    return {
-      pos: idx + from,
-      end: idx + from + match[0].length,
-      above: true,
-      create: () => {
-        const el = document.createElement('div');
-        el.className = tooltipContent({}, 'pli-2 plb-1');
-        onHover(el, url);
-        return { dom: el, offset: { x: 0, y: 12 } };
-      },
-    };
-  });

package/src/hooks/automerge/handle.ts

@@ -1,14 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import type * as A from '@dxos/automerge/automerge';
-
-export type IDocHandle<T = any> = {
-  docSync(): A.Doc<T> | undefined;
-  change(callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): void;
-  changeAt(heads: A.Heads, callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): string[] | undefined;
-
-  addListener(event: 'change', listener: () => void): void;
-  removeListener(event: 'change', listener: () => void): void;
-};

package/src/hooks/automerge/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export { type IDocHandle } from './handle';
-export { automergePlugin, type AutomergePlugin } from './plugin';

package/src/hooks/automerge/plugin.ts

@@ -1,134 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import {
-  Annotation,
-  type EditorState,
-  type Extension,
-  Facet,
-  StateEffect,
-  StateField,
-  type Transaction,
-  type TransactionSpec,
-} from '@codemirror/state';
-import { ViewPlugin, type EditorView, type PluginValue, type ViewUpdate } from '@codemirror/view';
-
-import * as automerge from '@dxos/automerge/automerge';
-import { type Heads, type Prop } from '@dxos/automerge/automerge';
-
-import { PatchSemaphore } from './PatchSemaphore';
-import { type IDocHandle } from './handle';
-
-export type Value = {
-  lastHeads: Heads;
-  path: Prop[];
-  unreconciledTransactions: Transaction[];
-};
-
-type UpdateHeads = {
-  newHeads: Heads;
-};
-
-export const effectType = StateEffect.define<UpdateHeads>({});
-
-export const updateHeads = (newHeads: Heads): StateEffect<UpdateHeads> => effectType.of({ newHeads });
-
-export const getLastHeads = (state: EditorState, field: Field): Heads => state.field(field).lastHeads;
-
-export const getPath = (state: EditorState, field: Field): Prop[] => state.field(field).path;
-
-export type Field = StateField<Value>;
-
-const semaphoreFacet = Facet.define<PatchSemaphore, PatchSemaphore>({
-  combine: (values) => values.at(-1)!, // Take last.
-});
-
-export type AutomergePlugin = {
-  extension: Extension;
-};
-
-export const automergePlugin = (handle: IDocHandle, path: Prop[]): AutomergePlugin => {
-  const stateField: StateField<Value> = StateField.define({
-    create: () => ({
-      lastHeads: automerge.getHeads(handle.docSync()!),
-      unreconciledTransactions: [],
-      path: path.slice(),
-    }),
-    update: (value: Value, tr: Transaction) => {
-      const result: Value = {
-        lastHeads: value.lastHeads,
-        unreconciledTransactions: value.unreconciledTransactions.slice(),
-        path: path.slice(),
-      };
-      let clearUnreconciled = false;
-      for (const effect of tr.effects) {
-        if (effect.is(effectType)) {
-          result.lastHeads = effect.value.newHeads;
-          clearUnreconciled = true;
-        }
-      }
-      if (clearUnreconciled) {
-        result.unreconciledTransactions = [];
-      } else {
-        if (!isReconcileTx(tr)) {
-          result.unreconciledTransactions.push(tr);
-        }
-      }
-      return result;
-    },
-  });
-
-  const semaphore = new PatchSemaphore(stateField);
-
-  const viewPlugin = ViewPlugin.fromClass(
-    class AutomergeCodemirrorViewPlugin implements PluginValue {
-      private _view: EditorView;
-
-      constructor(view: EditorView) {
-        this._view = view;
-        handle.addListener('change', this._handleChange);
-      }
-
-      update(update: ViewUpdate) {
-        if (update.transactions.length > 0 && update.transactions.some((t) => !isReconcileTx(t))) {
-          queueMicrotask(() => {
-            this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
-          });
-        }
-      }
-
-      destroy() {
-        handle.addListener('change', this._handleChange);
-      }
-
-      private _handleChange = () => {
-        this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
-      };
-    },
-  );
-
-  return {
-    extension: [stateField, semaphoreFacet.of(semaphore), viewPlugin],
-  };
-};
-
-export const reconcileAnnotationType = Annotation.define<unknown>();
-
-export const isReconcileTx = (tr: Transaction): boolean => !!tr.annotation(reconcileAnnotationType);
-
-export const makeReconcile = (tr: TransactionSpec) => {
-  if (tr.annotations != null) {
-    if (tr.annotations instanceof Array) {
-      tr.annotations = [...tr.annotations, reconcileAnnotationType.of({})];
-    } else {
-      tr.annotations = [tr.annotations, reconcileAnnotationType.of({})];
-    }
-  } else {
-    tr.annotations = [reconcileAnnotationType.of({})];
-  }
-  // return {
-  // ...tr,
-  // annotations: reconcileAnnotationType.of({})
-  // }
-};

package/src/hooks/automerge/translation/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './automerge-to-codemirror';
-export * from './codemirror-to-automerge';

package/src/hooks/yjs/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './cursors';
-export * from './space-provider';