@dxos/react-ui-editor 0.5.9-next.a50ff17 → 0.6.0

package/dist/lib/browser/index.mjs

@@ -477,6 +477,7 @@ import { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirro
 import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
 var dummyProvider = {
   remoteStateChange: new Event(),
   open: () => {
@@ -503,7 +504,10 @@ var awareness = (provider = dummyProvider) => {
 var RemoteSelectionsDecorator = class {
   constructor(view) {
     this.decorations = RangeSet.of([]);
-    this._ctx = new Context();
+    this._ctx = new Context(void 0, {
+      F: __dxlog_file2,
+      L: 85
+    });
     this._lastAnchor = void 0;
     this._lastHead = void 0;
     this._cursorConverter = view.state.facet(Cursor.converter);
@@ -712,7 +716,7 @@ import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
 import { invariant } from "@dxos/invariant";
 import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
   constructor(params) {
@@ -724,7 +728,10 @@ var SpaceAwarenessProvider = class {
     this._info = params.info;
   }
   open() {
-    this._ctx = new Context2();
+    this._ctx = new Context2(void 0, {
+      F: __dxlog_file3,
+      L: 57
+    });
     this._postTask = new DeferredTask(this._ctx, async () => {
       if (this._localState) {
         await this._space.postMessage(this._channel, {
@@ -752,7 +759,7 @@ var SpaceAwarenessProvider = class {
       log2.debug("failed to query awareness", {
         err
       }, {
-        F: __dxlog_file2,
+        F: __dxlog_file3,
         L: 89,
         S: this,
         C: (f, a) => f(...a)
@@ -769,7 +776,7 @@ var SpaceAwarenessProvider = class {
   }
   update(position) {
     invariant(this._postTask, void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file3,
       L: 104,
       S: this,
       A: [
@@ -786,7 +793,7 @@ var SpaceAwarenessProvider = class {
   }
   _handleQueryMessage() {
     invariant(this._postTask, void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file3,
       L: 115,
       S: this,
       A: [
@@ -798,7 +805,7 @@ var SpaceAwarenessProvider = class {
   }
   _handlePostMessage(message) {
     invariant(message.kind === "post", void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file3,
       L: 120,
       S: this,
       A: [
@@ -815,7 +822,7 @@ var SpaceAwarenessProvider = class {
 import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -942,7 +949,7 @@ var Blaster = class {
   }
   initialize() {
     invariant2(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file3,
+      F: __dxlog_file4,
       L: 141,
       S: this,
       A: [
@@ -979,7 +986,7 @@ var Blaster = class {
   }
   start() {
     invariant2(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file3,
+      F: __dxlog_file4,
       L: 180,
       S: this,
       A: [
@@ -1384,13 +1391,13 @@ var editorFillLayoutEditor = "!absolute inset-0";
 
 // packages/ui/react-ui-editor/src/util.ts
 import { log as log3 } from "@dxos/log";
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
   } catch (err) {
     log3.catch(err, void 0, {
-      F: __dxlog_file4,
+      F: __dxlog_file5,
       L: 18,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1416,7 +1423,7 @@ var logChanges = (trs) => {
     log3.info("changes", {
       changes
     }, {
-      F: __dxlog_file4,
+      F: __dxlog_file5,
       L: 39,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1425,7 +1432,7 @@ var logChanges = (trs) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var documentId = Facet4.define({
   combine: (values) => values[0]
 });
@@ -1512,7 +1519,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     const range = comment.range;
     if (!range || range.from === range.to) {
       log4.warn("Invalid range:", range, {
-        F: __dxlog_file5,
+        F: __dxlog_file6,
         L: 132,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1833,11 +1840,11 @@ var useComments = (view, id, comments2) => {
 // packages/ui/react-ui-editor/src/extensions/doc.ts
 import { Facet as Facet5 } from "@codemirror/state";
 import { invariant as invariant3 } from "@dxos/invariant";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/doc.ts";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/doc.ts";
 var documentId2 = Facet5.define({
   combine: (providers) => {
     invariant3(providers.length <= 1, void 0, {
-      F: __dxlog_file6,
+      F: __dxlog_file7,
       L: 11,
       S: void 0,
       A: [
@@ -2142,7 +2149,7 @@ var defaultTheme = {
 };
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var defaultBasicOptions = {
   allowMultipleSelections: true,
   bracketMatching: true,
@@ -2166,7 +2173,7 @@ var createBasicExtensions = (_props) => {
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView9.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
-        F: __dxlog_file7,
+        F: __dxlog_file8,
         L: 90,
         S: void 0,
         C: (f, a) => f(...a)
@@ -3156,6 +3163,10 @@ var formattingKeymap = (options = {}) => {
       {
         key: "meta-b",
         run: toggleStrong
+      },
+      {
+        key: "meta-i",
+        run: toggleEmphasis
       }
     ])
   ];
@@ -3577,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
@@ -3616,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 [
@@ -3641,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,
@@ -3653,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() {
@@ -3754,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) => {
@@ -3871,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));
       }
@@ -3960,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 = {}) => {
@@ -4003,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");
@@ -4043,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;
@@ -4077,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 = {}) => {
@@ -4096,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": {
@@ -4181,7 +4281,7 @@ var TableWidget = class extends WidgetType5 {
 // packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
 import { log as log6 } from "@dxos/log";
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ onSearch }) => {
   return autocompletion2({
     // TODO(burdon): Not working.
@@ -4196,7 +4296,7 @@ var mention = ({ onSearch }) => {
         log6.info("completion context", {
           context
         }, {
-          F: __dxlog_file8,
+          F: __dxlog_file9,
           L: 26,
           S: void 0,
           C: (f, a) => f(...a)
@@ -4256,18 +4356,18 @@ 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";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/state.ts";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/state.ts";
 var scrollAnnotation = "dxos.org/cm/scrolling";
 var keyPrefix = "dxos.org/react-ui-editor/state";
 var localStorageStateStoreAdapter = {
   setState: (id, state2) => {
     invariant4(id, void 0, {
-      F: __dxlog_file9,
+      F: __dxlog_file10,
       L: 35,
       S: void 0,
       A: [
@@ -4279,7 +4379,7 @@ var localStorageStateStoreAdapter = {
   },
   getState: (id) => {
     invariant4(id, void 0, {
-      F: __dxlog_file9,
+      F: __dxlog_file10,
       L: 39,
       S: void 0,
       A: [
@@ -4332,7 +4432,7 @@ var state = ({ getState, setState } = {}) => {
                 yMargin: 0
               }),
               selection: state2.selection,
-              annotations: Transaction.userEvent.of(scrollAnnotation)
+              annotations: Transaction2.userEvent.of(scrollAnnotation)
             });
           }
           return true;
@@ -4400,7 +4500,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
 var instanceCount = 0;
 var TextEditor = /* @__PURE__ */ forwardRef(({
   id,
@@ -4440,7 +4540,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({
       id,
       instanceId
     }, {
-      F: __dxlog_file10,
+      F: __dxlog_file11,
       L: 91,
       S: void 0,
       C: (f, a) => f(...a)
@@ -4452,7 +4552,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({
         // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
         EditorView16.exceptionSink.of((err) => {
           log7.catch(err, void 0, {
-            F: __dxlog_file10,
+            F: __dxlog_file11,
             L: 104,
             S: void 0,
             C: (f, a) => f(...a)
@@ -4499,7 +4599,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({
         id,
         instanceId
       }, {
-        F: __dxlog_file10,
+        F: __dxlog_file11,
         L: 153,
         S: void 0,
         C: (f, a) => f(...a)
@@ -4856,7 +4956,7 @@ import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster
 import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
 import { log as log8 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var useTextEditor = (cb = () => ({}), deps = []) => {
   let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo2(cb, deps ?? []);
   const onUpdate = useRef3();
@@ -4868,7 +4968,7 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
       log8("create", {
         id
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file12,
         L: 50,
         S: void 0,
         C: (f, a) => f(...a)
@@ -4880,7 +4980,7 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
           // TODO(burdon): Doesn't catch errors in keymap functions.
           EditorView17.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
-              F: __dxlog_file11,
+              F: __dxlog_file12,
               L: 60,
               S: void 0,
               C: (f, a) => f(...a)
@@ -4911,7 +5011,7 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
       log8("destroy", {
         id
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file12,
         L: 88,
         S: void 0,
         C: (f, a) => f(...a)