@dxos/react-ui-editor 0.3.9-main.4e39f3a → 0.3.9-main.501fe30

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

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 DXOS.org
+// Copyright CodeMirror
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, type RangeSet, RangeSetBuilder, StateField, type Transaction } from '@codemirror/state';
+import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+
+// Adapted from:
+// https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
+// https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
+
+// TODO(burdon): Adapt to make all markdown editable?
+
+// TODO(burdon): Research overlays.
+//  https://stackoverflow.com/questions/26933344/codemirror-detect-and-create-links-inside-editor
+//  https://codemirror.net/5/doc/manual.html#addOverlay
+//  https://codemirror.net/5/demo/simplemode.html
+//  https://codemirror.net/5/demo/search.html (Search dialog).
+
+class Link extends WidgetType {
+  constructor(private readonly _anchor: number, private readonly _text: string, private readonly _url?: string) {
+    super();
+  }
+
+  override eq(other: any) {
+    return this._text === other.text && this._url === other.url;
+  }
+
+  toDOM(view: EditorView) {
+    const link = document.createElement('a');
+    link.setAttribute('class', 'cm-link');
+    link.textContent = this._text;
+    if (this._url) {
+      link.setAttribute('target', '_blank');
+      link.href = this._url;
+    } else {
+      link.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: this._anchor,
+          },
+        });
+      };
+    }
+
+    return link;
+  }
+}
+
+type HyperlinkDecorationConfig = {
+  link?: boolean;
+};
+
+/**
+ * Creates a state field to replace AST elements with a hyperlink widget.
+ * https://codemirror.net/docs/ref/#state.StateField
+ */
+export const hyperlinkDecoration = ({ link }: HyperlinkDecorationConfig = {}) => {
+  return StateField.define<RangeSet<any>>({
+    create: (state) => update(state, link),
+    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, link),
+    provide: (field) => EditorView.decorations.from(field),
+  });
+};
+
+const update = (state: EditorState, link?: boolean) => {
+  const builder = new RangeSetBuilder();
+  const cursor = state.selection.main.head;
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      // Check if cursor is inside text.
+      if (cursor < node.from || cursor > node.to) {
+        if (node.name === 'Link') {
+          const marks = node.node.getChildren('LinkMark');
+          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
+
+          const urlNode = node.node.getChild('URL');
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
+
+          builder.add(
+            node.from,
+            node.to,
+            Decoration.replace({
+              widget: new Link(node.from, text, link ? url : undefined),
+            }),
+          );
+
+          return false;
+        }
+      }
+
+      return true;
+    },
+  });
+
+  return builder.finish();
+};

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

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { hoverTooltip } from '@codemirror/view';
+
+import { tooltipContent } from '@dxos/react-ui-theme';
+
+const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
+
+export type OnHyperlinkHover = (el: Element, url: string) => void;
+
+/**
+ * https://codemirror.net/examples/tooltip
+ * https://codemirror.net/docs/ref/#view.hoverTooltip
+ * https://github.com/codemirror/view/blob/main/src/tooltip.ts
+ */
+// TODO(burdon): Create config object.
+export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markdownLinkRegexp) =>
+  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('a');
+        el.innerText = '_'; // Required so doesn't collapse.
+        el.className = tooltipContent({}, 'mb-2 p-1');
+        el.setAttribute('target', '_blank');
+        el.setAttribute('href', url);
+        onHover(el, url);
+        return { dom: el };
+      },
+    };
+  });

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

@@ -0,0 +1,119 @@
+//
+// 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';
+
+// Notes: Can't edit widget content (or cursor nav through them).
+// - https://discuss.codemirror.net/t/focusing-inputs-within-widgets/5178/7
+//   Widgets intentionally always get set to contenteditable=false,
+//   or they would become part of CodeMirror’s editable content element.
+//   You should be able to introduce new contenteditable=true child elements inside of them.
+
+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: (view) => view.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 hyperlinkStyle = EditorView.baseTheme({
+  '.cm-hyperlink-label': {
+    cursor: 'pointer',
+    textDecoration: 'underline',
+  },
+  '.cm-hyperlink-bracket': {
+    opacity: 0.2,
+  },
+  '.cm-hyperlink-url': {
+    opacity: 0.5,
+    fontFamily: 'monospace',
+  },
+});
+
+export const hyperlinkWidget: Extension = [hyperLinkExtension(), hyperlinkStyle];

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

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './hyperlinkDecoration';
+export * from './hyperlinkTooltip';
+export * from './hyperlinkWidget';

package/src/components/TextEditor/index.ts

@@ -6,4 +6,6 @@ export { type StyleSpec } from 'style-mod';
 export { tags } from '@lezer/highlight';
 
 export * from './TextEditor';
+
+export * from './extensions';
 export * from './theme';

package/src/components/TextEditor/theme.ts

@@ -10,6 +10,7 @@ import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
 const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
 
 /**
+ * Minimal styles.
  * https://codemirror.net/examples/styling
  */
 // TODO(burdon): If given a "theme" suffix, `__docgen` properties are added to the object.
@@ -19,11 +20,16 @@ export const defaultStyles: {
   '&.cm-focused': {
     outline: 'none',
   },
-  '.cm-placeholder': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-  },
-  '& .cm-scroller': {
+  '.cm-scroller': {
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
     overflow: 'visible',
   },
+  '.cm-tooltip': {
+    backgroundColor: 'transparent',
+    border: 'none',
+  },
+  '.cm-link': {
+    color: get(tokens, 'extend.colors.primary.500'),
+    textDecoration: 'underline',
+  },
 };

package/dist/types/src/automerge/demo.d.ts

@@ -1,25 +0,0 @@
-import { Event } from '@dxos/async';
-import { type Doc, next as automerge, type ChangeOptions, type ChangeFn, type Heads } from '@dxos/automerge/automerge';
-export declare class Peer {
-    changeEvent: Event<void>;
-    storage: Map<string, Uint8Array>;
-    stats: {
-        messagesSent: number;
-        messagesReceived: number;
-        bytesSent: number;
-        bytesReceived: number;
-        snapshotBytes: number;
-        incrementalBytes: number;
-    };
-    doc: Doc<{
-        text: string;
-    }>;
-    change(options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>): void;
-    changeAt(scope: Heads, options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>): automerge.Heads | null;
-    replicate(): {
-        readable: ReadableStream<Uint8Array>;
-        writable: WritableStream<Uint8Array>;
-    };
-    private _handleChange;
-}
-//# sourceMappingURL=demo.d.ts.map

package/dist/types/src/automerge/demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"demo.d.ts","sourceRoot":"","sources":["../../../../src/automerge/demo.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EACL,KAAK,GAAG,EACR,IAAI,IAAI,SAAS,EACjB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,KAAK,EAEX,MAAM,2BAA2B,CAAC;AAEnC,qBAAa,IAAI;IACf,WAAW,cAAe;IAE1B,OAAO,0BAAiC;IACxC,KAAK;;;;;;;MAOH;IAEF,GAAG,EAAG,GAAG,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE5B,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC;IAKrF,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC;IAOrG,SAAS,IAAI;QAAE,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;QAAC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAA;KAAE;IAgD3F,OAAO,CAAC,aAAa;CAgBtB"}

package/src/automerge/demo.ts

@@ -1,106 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Event } from '@dxos/async';
-import {
-  type Doc,
-  next as automerge,
-  type ChangeOptions,
-  type ChangeFn,
-  type Heads,
-  type SyncState,
-} from '@dxos/automerge/automerge';
-
-export class Peer {
-  changeEvent = new Event();
-
-  storage = new Map<string, Uint8Array>();
-  stats = {
-    messagesSent: 0,
-    messagesReceived: 0,
-    bytesSent: 0,
-    bytesReceived: 0,
-    snapshotBytes: 0,
-    incrementalBytes: 0,
-  };
-
-  doc!: Doc<{ text: string }>;
-
-  change(options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>) {
-    this.doc = automerge.change(this.doc, options, callback);
-    this._handleChange();
-  }
-
-  changeAt(scope: Heads, options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>) {
-    const { newDoc, newHeads } = automerge.changeAt(this.doc, scope, options, callback);
-    this.doc = newDoc;
-    this._handleChange();
-    return newHeads;
-  }
-
-  replicate(): { readable: ReadableStream<Uint8Array>; writable: WritableStream<Uint8Array> } {
-    let syncState: SyncState = automerge.initSyncState();
-
-    let unsub: (() => void) | undefined;
-    const readable = new ReadableStream({
-      start: (controller) => {
-        unsub = this.changeEvent.on(() => {
-          const [newState, msg] = automerge.generateSyncMessage(this.doc, syncState);
-          syncState = newState;
-
-          if (msg) {
-            this.stats.messagesSent++;
-            this.stats.bytesSent += msg.byteLength;
-            controller.enqueue(msg);
-          }
-        });
-      },
-      pull: (controller) => {
-        const [newState, msg] = automerge.generateSyncMessage(this.doc, syncState);
-        syncState = newState;
-
-        if (msg) {
-          this.stats.messagesSent++;
-          this.stats.bytesSent += msg.byteLength;
-          controller.enqueue(msg);
-        }
-      },
-      cancel: () => {
-        unsub?.();
-      },
-    });
-
-    const writable = new WritableStream({
-      write: (chunk) => {
-        this.stats.messagesReceived++;
-        this.stats.bytesReceived += chunk.byteLength;
-
-        const [newDoc, newState] = automerge.receiveSyncMessage(this.doc, syncState, chunk);
-        this.doc = newDoc;
-        syncState = newState;
-
-        this._handleChange();
-      },
-    });
-
-    return { readable, writable };
-  }
-
-  private _handleChange() {
-    // TODO(dmaretskyi): Save since + debounce.
-
-    if (this.stats.incrementalBytes > 1024 && this.stats.incrementalBytes > this.stats.snapshotBytes) {
-      const snapshot = automerge.save(this.doc);
-      this.stats.snapshotBytes = snapshot.byteLength;
-      this.stats.incrementalBytes = 0;
-      console.log('snapshot save', snapshot.byteLength);
-    } else {
-      const chunk = automerge.saveIncremental(this.doc);
-      this.stats.incrementalBytes += chunk.length;
-      console.log('incremental save', chunk.length);
-    }
-
-    this.changeEvent.emit();
-  }
-}