@dxos/react-ui-editor 0.4.6-main.e47f68d → 0.4.6

package/dist/lib/browser/index.mjs

@@ -1900,18 +1900,6 @@ import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder } from "@codemirror/state";
 import { EditorView as EditorView10, Decoration as Decoration4, WidgetType as WidgetType2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var FencedCodeBoundary = class extends WidgetType2 {
-  constructor(_className) {
-    super();
-    this._className = _className;
-  }
-  toDOM() {
-    const el = document.createElement("span");
-    el.innerHTML = " ";
-    el.className = mx2("cm-code cm-codeblock", this._className);
-    return el;
-  }
-};
 var HorizontalRuleWidget = class extends WidgetType2 {
   toDOM() {
     const el = document.createElement("span");
@@ -1972,11 +1960,14 @@ var CheckboxWidget = class extends WidgetType2 {
   }
 };
 var hide = Decoration4.replace({});
-var fencedCodeTop = Decoration4.replace({
-  widget: new FencedCodeBoundary("cm-codeblock-end cm-codeblock-first")
+var fencedCodeLine = Decoration4.line({
+  class: mx2("cm-code cm-codeblock-line")
+});
+var fencedCodeLineFirst = Decoration4.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
 });
-var fencedCodeBottom = Decoration4.replace({
-  widget: new FencedCodeBoundary("cm-codeblock-end cm-codeblock-last")
+var fencedCodeLineLast = Decoration4.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
 var horizontalRule = Decoration4.replace({
   widget: new HorizontalRuleWidget()
@@ -2017,12 +2008,9 @@ var buildDecorations = (view, options) => {
             }
             const first = block.from <= node.from;
             const last = block.to >= node.to;
+            builder.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
             if (!editing && (first || last)) {
-              builder.add(block.from, block.to, first ? fencedCodeTop : fencedCodeBottom);
-            } else {
-              builder.add(block.from, block.from, Decoration4.line({
-                class: mx2("cm-code cm-codeblock-line", first && "cm-codeblock-first", last && "cm-codeblock-last")
-              }));
+              builder.add(block.from, block.to, hide);
             }
           }
           return false;
@@ -2113,16 +2101,12 @@ var formattingStyles = EditorView10.baseTheme({
     }
   },
   "& .cm-codeblock-first": {
-    "&::after": {
-      borderTopLeftRadius: ".5rem",
-      borderTopRightRadius: ".5rem"
-    }
+    borderTopLeftRadius: ".5rem",
+    borderTopRightRadius: ".5rem"
   },
   "& .cm-codeblock-last": {
-    "&::after": {
-      borderBottomLeftRadius: ".5rem",
-      borderBottomRightRadius: ".5rem"
-    }
+    borderBottomLeftRadius: ".5rem",
+    borderBottomRightRadius: ".5rem"
   },
   "&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line": {
     background: getToken("extend.semanticColors.input.light"),
@@ -2132,18 +2116,6 @@ var formattingStyles = EditorView10.baseTheme({
     background: getToken("extend.semanticColors.input.dark"),
     mixBlendMode: "lighten"
   },
-  "&light .cm-codeblock-first, &light .cm-codeblock-last": {
-    mixBlendMode: "darken",
-    "&::after": {
-      background: getToken("extend.semanticColors.input.light")
-    }
-  },
-  "&dark .cm-codeblock-first, &dark .cm-codeblock-last": {
-    mixBlendMode: "lighten",
-    "&::after": {
-      background: getToken("extend.semanticColors.input.dark")
-    }
-  },
   "& .cm-hr": {
     display: "inline-block",
     width: "100%",
@@ -3281,6 +3253,14 @@ var image = (options = {}) => {
     provide: (field) => EditorView12.decorations.from(field)
   });
 };
+var preloaded = /* @__PURE__ */ new Set();
+var preloadImage = (url) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement("img");
+    img.src = url;
+    preloaded.add(url);
+  }
+};
 var buildDecorations2 = (from, to, state) => {
   const decorations = [];
   const cursor = state.selection.main.head;
@@ -3291,6 +3271,7 @@ var buildDecorations2 = (from, to, state) => {
         if (urlNode) {
           const hide2 = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
+          preloadImage(url);
           decorations.push(Decoration5.replace({
             block: true,
             widget: new ImageWidget(url)