@dxos/react-ui-editor 0.5.9-main.f099efe → 0.5.9-next.73dcc17

package/dist/lib/browser/index.mjs

@@ -3163,6 +3163,10 @@ var formattingKeymap = (options = {}) => {
       {
         key: "meta-b",
         run: toggleStrong
+      },
+      {
+        key: "meta-i",
+        run: toggleEmphasis
       }
     ])
   ];
@@ -3584,13 +3588,6 @@ var markdownHighlightStyle = (readonly) => {
       tag: tags.strikethrough,
       class: strikethrough
     },
-    // Naked URLs.
-    {
-      tag: [
-        markdownTags.URL
-      ],
-      class: inlineUrl
-    },
     // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
     // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
     // when a language is specified. In this case, the syntax highlighting extensions will colorize
@@ -3623,6 +3620,101 @@ var markdownHighlightStyle = (readonly) => {
   });
 };
 
+// packages/ui/react-ui-editor/src/extensions/markdown/linkPaste.ts
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { Transaction } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+var VALID_PROTOCOLS = [
+  "http:",
+  "https:",
+  "mailto:",
+  "tel:"
+];
+var createTextLink = (text, url) => `[${text}](${url})`;
+var createUrlLink = (url) => {
+  const displayUrl = formatUrlForDisplay(url);
+  return `[${displayUrl}](${url})`;
+};
+var formatUrlForDisplay = (url) => {
+  const withoutProtocol = url.replace(/^https?:\/\//, "");
+  return truncateQueryParams(withoutProtocol);
+};
+var truncateQueryParams = (url, maxQueryLength = 15) => {
+  const [urlBase, queryString] = url.split("?");
+  if (!queryString) {
+    return urlBase;
+  }
+  if (queryString.length > maxQueryLength) {
+    const truncatedQuery = queryString.slice(0, maxQueryLength) + "...";
+    return `${urlBase}?${truncatedQuery}`;
+  } else {
+    return `${urlBase}?${queryString}`;
+  }
+};
+var isValidUrl = (str) => {
+  try {
+    const url = new URL(str);
+    return VALID_PROTOCOLS.includes(url.protocol);
+  } catch (e) {
+    return false;
+  }
+};
+var onNextUpdate = (callback) => setTimeout(callback, 0);
+var linkPastePlugin = ViewPlugin4.fromClass(class {
+  constructor(view) {
+    this.view = view;
+  }
+  update(update2) {
+    for (const tr of update2.transactions) {
+      const event = tr.annotation(Transaction.userEvent);
+      if (event === "input.paste") {
+        this.handleInputRead(this.view, tr);
+      }
+    }
+  }
+  handleInputRead(view, tr) {
+    const changes = tr.changes;
+    if (changes.empty) {
+      return;
+    }
+    changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+      const insertedText = view.state.sliceDoc(fromB, toB);
+      if (isValidUrl(insertedText) && !this.isInCodeBlock(view.state, fromB)) {
+        const replacedText = tr.startState.sliceDoc(fromA, toA);
+        onNextUpdate(() => {
+          view.dispatch(this.createLinkTransaction(view.state, fromA, toB, insertedText, replacedText));
+        });
+      }
+    });
+  }
+  /**
+   * Determines if a given position is within a code block.
+   * Traverses the syntax tree upwards from the position,
+   * checking for CodeBlock or FencedCode nodes.
+   */
+  isInCodeBlock(state2, pos) {
+    const tree = syntaxTree2(state2);
+    let node = tree.resolveInner(pos, -1);
+    while (node) {
+      if (node.name.includes("Code") || node.name.includes("FencedCode")) {
+        return true;
+      }
+      node = node.parent;
+    }
+    return false;
+  }
+  createLinkTransaction(state2, from, to, url, text) {
+    const linkText = text.trim() ? createTextLink(text, url) : createUrlLink(url);
+    return state2.update({
+      changes: {
+        from,
+        to,
+        insert: linkText
+      }
+    });
+  }
+});
+
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 var createMarkdownExtensions = ({ themeMode } = {}) => {
   return [
@@ -3648,6 +3740,7 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
+    linkPastePlugin,
     keymap7.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab2,
@@ -3660,9 +3753,9 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
-import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var HorizontalRuleWidget = class extends WidgetType3 {
   toDOM() {
@@ -3761,7 +3854,7 @@ var buildDecorations = (view, options, focus) => {
   const atomicDeco = new RangeSetBuilder2();
   const { state: state2 } = view;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree2(state2).iterate({
+    syntaxTree3(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3878,7 +3971,7 @@ var buildDecorations = (view, options, focus) => {
 var forceUpdate = StateEffect4.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin4.fromClass(class {
+    ViewPlugin5.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
       }
@@ -3967,7 +4060,7 @@ var formattingStyles = EditorView12.baseTheme({
 });
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { StateField as StateField5 } from "@codemirror/state";
 import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
@@ -4010,7 +4103,7 @@ var preloadImage = (url) => {
 var buildDecorations2 = (from, to, state2) => {
   const decorations = [];
   const cursor = state2.selection.main.head;
-  syntaxTree3(state2).iterate({
+  syntaxTree4(state2).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
@@ -4050,11 +4143,11 @@ var imageUpload = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
-  const syntax = syntaxTree4(view.state).resolveInner(pos, side);
+  const syntax = syntaxTree5(view.state).resolveInner(pos, side);
   let link = null;
   for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
     link = node.name === "Link" ? node : null;
@@ -4084,7 +4177,7 @@ var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
 });
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
 import { Decoration as Decoration7, EditorView as EditorView14, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
@@ -4103,7 +4196,7 @@ var update = (state2, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree5(state2).iterate({
+  syntaxTree6(state2).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -4263,7 +4356,7 @@ var EditorModes = {
 };
 
 // packages/ui/react-ui-editor/src/extensions/state.ts
-import { Transaction } from "@codemirror/state";
+import { Transaction as Transaction2 } from "@codemirror/state";
 import { EditorView as EditorView15, keymap as keymap9 } from "@codemirror/view";
 import { debounce as debounce2 } from "@dxos/async";
 import { invariant as invariant4 } from "@dxos/invariant";
@@ -4339,7 +4432,7 @@ var state = ({ getState, setState } = {}) => {
                 yMargin: 0
               }),
               selection: state2.selection,
-              annotations: Transaction.userEvent.of(scrollAnnotation)
+              annotations: Transaction2.userEvent.of(scrollAnnotation)
             });
           }
           return true;