@dxos/react-ui-editor 0.3.10-next.ef70620 → 0.3.11-main.0e40963

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

@@ -1,99 +0,0 @@
-//
-// 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/hyperlink/hyperlinkTooltip.tsx

@@ -1,61 +0,0 @@
-//
-// 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/hyperlink/hyperlinkWidget.tsx

@@ -1,119 +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';
-
-// 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/hyperlink/index.ts

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

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

@@ -1,8 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './basic';
-export * from './change';
-export * from './hyperlink';
-export * from './markdown';

package/src/components/TextEditor/extensions/markdown/bundle.ts

@@ -1,99 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
-import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import {
-  bracketMatching,
-  defaultHighlightStyle,
-  foldKeymap,
-  indentOnInput,
-  syntaxHighlighting,
-} from '@codemirror/language';
-import { languages } from '@codemirror/language-data';
-import { lintKeymap } from '@codemirror/lint';
-import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
-import { EditorState, type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import {
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  EditorView,
-  highlightActiveLine,
-  highlightActiveLineGutter,
-  highlightSpecialChars,
-  keymap,
-  placeholder,
-  rectangularSelection,
-} from '@codemirror/view';
-// import { GFM } from '@lezer/markdown';
-
-import type { ThemeMode } from '@dxos/react-ui';
-
-import { markdownTagsExtension } from './tags';
-import { markdownHighlightStyle } from './theme';
-
-export type MarkdownBundleOptions = {
-  themeMode?: ThemeMode;
-  placeholder?: string;
-};
-
-export const markdownBundle = ({ themeMode, placeholder: _placeholder }: MarkdownBundleOptions): Extension[] => {
-  // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
-  // https://codemirror.net/docs/ref/#codemirror.basicSetup
-  return [
-    bracketMatching(),
-    closeBrackets(),
-    _placeholder && placeholder(_placeholder),
-
-    EditorState.allowMultipleSelections.of(true),
-    EditorView.lineWrapping,
-
-    // autocompletion(),
-    crosshairCursor(),
-    dropCursor(),
-    drawSelection(),
-    highlightActiveLine(),
-    highlightActiveLineGutter(),
-    highlightSelectionMatches(),
-    highlightSpecialChars(),
-    history(),
-    indentOnInput(),
-    rectangularSelection(),
-
-    keymap.of([
-      ...closeBracketsKeymap,
-      // ...completionKeymap,
-      ...defaultKeymap,
-      ...foldKeymap,
-      ...historyKeymap,
-      ...lintKeymap,
-      ...searchKeymap,
-      indentWithTab,
-    ]),
-
-    // Main extension.
-    // https://github.com/codemirror/lang-markdown
-    markdown({
-      base: markdownLanguage,
-      codeLanguages: languages,
-      extensions: [
-        // TODO(burdon): This seems to upgrade the parser.
-        // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
-        // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-        // https://github.github.com/gfm
-        // GFM,
-
-        // Custom styling.
-        markdownTagsExtension,
-      ],
-    }),
-
-    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-    syntaxHighlighting(markdownHighlightStyle),
-    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-  ].filter(Boolean) as Extension[];
-};

package/src/components/TextEditor/extensions/markdown/tags.ts

@@ -1,38 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { styleTags, Tag } from '@lezer/highlight';
-import { type MarkdownConfig } from '@lezer/markdown';
-
-export const markdownTags = {
-  headingMark: Tag.define(),
-  quoteMark: Tag.define(),
-  listMark: Tag.define(),
-  linkMark: Tag.define(),
-  emphasisMark: Tag.define(),
-  codeMark: Tag.define(),
-  codeText: Tag.define(),
-  inlineCode: Tag.define(),
-  url: Tag.define(),
-  linkReference: Tag.define(),
-  linkLabel: Tag.define(),
-};
-
-export const markdownTagsExtension: MarkdownConfig = {
-  props: [
-    styleTags({
-      HeaderMark: markdownTags.headingMark,
-      QuoteMark: markdownTags.quoteMark,
-      ListMark: markdownTags.listMark,
-      LinkMark: markdownTags.linkMark,
-      EmphasisMark: markdownTags.emphasisMark,
-      CodeMark: markdownTags.codeMark,
-      CodeText: markdownTags.codeText,
-      InlineCode: markdownTags.inlineCode,
-      URL: markdownTags.url,
-      LinkReference: markdownTags.linkReference,
-      LinkLabel: markdownTags.linkLabel,
-    }),
-  ],
-};