@dxos/react-ui-editor 0.3.9-main.2b2db7f → 0.3.9-main.2dc53cf

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

@@ -0,0 +1,108 @@
+//
+// 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;
+
+const linkDecorator = () =>
+  new MatchDecorator({
+    regexp: markdownLinkRegexp, // regexp || defaultRegexp,
+    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,
+      };
+
+      // TODO(burdon): Wrap with tagName?
+      add(p0.start, p0.end, Decoration.mark({ class: 'cm-hyperlink-bracket' }));
+      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' } }));
+    },
+  });
+
+// const anchor = (dom: HTMLAnchorElement) => dom;
+
+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 hyperlink: Extension = [hyperLinkExtension(), hyperLinkStyle];

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

@@ -0,0 +1,76 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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';
+
+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
+ */
+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 };
+      },
+    };
+  });
+
+// 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/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './hyperlink';
+export * from './hyperlinkTooltip';

package/src/components/TextEditor/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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

@@ -0,0 +1,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import get from 'lodash.get';
+import { type StyleSpec } from 'style-mod';
+
+import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
+
+const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+
+/**
+ * https://codemirror.net/examples/styling
+ */
+// TODO(burdon): If given a "theme" suffix, `__docgen` properties are added to the object.
+export const defaultStyles: {
+  [selector: string]: StyleSpec;
+} = {
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+  '& .cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    overflow: 'visible',
+  },
+  '.cm-tooltip': {
+    backgroundColor: 'transparent',
+    border: 'none',
+  },
+};

package/src/components/index.ts

@@ -5,3 +5,4 @@
 export * from './Editor';
 export * from './Markdown';
 export * from './RichText';
+export * from './TextEditor';