@dxos/react-ui-editor 0.3.9-next.4584ca9 → 0.3.9-next.7522f7a

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

@@ -3,11 +3,8 @@
 //
 
 import { hoverTooltip } from '@codemirror/view';
-import { ArrowCircleUp } from '@phosphor-icons/react';
-import React, { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
 
-import { getSize, mx, tooltipContent } from '@dxos/react-ui-theme';
+import { tooltipContent } from '@dxos/react-ui-theme';
 
 const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
 
@@ -18,6 +15,7 @@ export type OnHyperlinkHover = (el: Element, url: string) => void;
  * 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);
@@ -61,16 +59,3 @@ export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markd
       },
     };
   });
-
-// TODO(burdon): Factor out (remove theme/icon deps)?
-export const defaultHyperLinkTooltip = createHyperlinkTooltip((el, url) => {
-  const web = new URL(url);
-  createRoot(el).render(
-    <StrictMode>
-      <div className='flex gap-1 items-center'>
-        <ArrowCircleUp className={mx(getSize(6), 'text-blue-500')} />
-        <p className='pr-1'>{web.origin}</p>
-      </div>
-    </StrictMode>,
-  );
-});

package/src/components/TextEditor/extensions/{hyperlink.tsx → hyperlinkWidget.tsx}

@@ -15,14 +15,20 @@ import {
 
 // 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.
+//   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, // regexp || defaultRegexp,
+    regexp: markdownLinkRegexp,
     decorate: (add, from, to, match, view) => {
       const [_, label, url] = match;
       const p0 = {
@@ -45,16 +51,21 @@ const linkDecorator = () =>
         end: p1.end + 1 + url.length + 2,
       };
 
-      // TODO(burdon): Wrap with tagName?
-      add(p0.start, p0.end, Decoration.mark({ class: 'cm-hyperlink-bracket' }));
+      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' }));
-      add(p3.start, p3.end, Decoration.mark({ class: 'cm-hyperlink-url', __attributes: { style: 'display: none' } }));
+      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' } }));
     },
   });
 
-// const anchor = (dom: HTMLAnchorElement) => dom;
-
 export function hyperLinkExtension() {
   return ViewPlugin.fromClass(
     class HyperLinkView {
@@ -91,7 +102,7 @@ export function hyperLinkExtension() {
   );
 }
 
-export const hyperLinkStyle = EditorView.baseTheme({
+export const hyperlinkStyle = EditorView.baseTheme({
   '.cm-hyperlink-label': {
     cursor: 'pointer',
     textDecoration: 'underline',
@@ -105,4 +116,4 @@ export const hyperLinkStyle = EditorView.baseTheme({
   },
 });
 
-export const hyperlink: Extension = [hyperLinkExtension(), hyperLinkStyle];
+export const hyperlinkWidget: Extension = [hyperLinkExtension(), hyperlinkStyle];

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

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './hyperlink';
+export * from './hyperlinkDecoration';
 export * from './hyperlinkTooltip';
+export * from './hyperlinkWidget';

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,10 +20,7 @@ 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',
   },
@@ -30,4 +28,8 @@ export const defaultStyles: {
     backgroundColor: 'transparent',
     border: 'none',
   },
+  '.cm-link': {
+    color: get(tokens, 'extend.colors.primary.500'),
+    textDecoration: 'underline',
+  },
 };

package/dist/types/src/components/TextEditor/extensions/hyperlink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hyperlink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlink.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAEL,KAAK,aAAa,EAElB,cAAc,EACd,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AA4C1B,wBAAgB,kBAAkB;wBAGR,cAAc;;mBAOnB,UAAU;GAwB9B;AAED,eAAO,MAAM,cAAc,WAYzB,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,SAAkD,CAAC"}