@dxos/react-ui-editor 0.4.4-main.8a6f0d0 → 0.4.4-main.9f75c97

package/dist/lib/browser/index.mjs

@@ -1091,7 +1091,10 @@ var tokens = tailwindConfig({}).theme;
 var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/styles/layout.ts
-var editorWithToolbarLayout = "fixed inset-0 grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden";
+var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden";
+var editorFillLayoutRoot = "min-bs-full grid";
+var editorFillLayoutEditor = "min-bs-full";
+var editorHalfViewportOverscrollContent = "after:block after:min-bs-[50dvh] after:pointer-events-none";
 
 // packages/ui/react-ui-editor/src/util.ts
 import { log } from "@dxos/log";
@@ -1791,41 +1794,50 @@ var styles4 = EditorView9.baseTheme({
   "& .cm-code": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
-  "& .cm-codeblock": {
+  "& .cm-codeblock-line": {
+    paddingInline: "1rem !important"
+  },
+  "& .cm-codeblock-end": {
+    display: "inline-block",
     width: "100%",
-    paddingInline: "1rem !important",
     position: "relative",
     "&::after": {
-      content: '""',
       position: "absolute",
-      inset: 0
-    }
-  },
-  "&light .cm-codeblock": {
-    "&::after": {
-      background: getToken("extend.semanticColors.input.light"),
-      mixBlendMode: "darken"
-    }
-  },
-  "&dark .cm-codeblock": {
-    "&::after": {
-      background: getToken("extend.semanticColors.input.dark"),
-      mixBlendMode: "lighten"
+      inset: 0,
+      content: '""'
     }
   },
   "& .cm-codeblock-first": {
-    display: "inline-block",
     "&::after": {
       borderTopLeftRadius: ".5rem",
       borderTopRightRadius: ".5rem"
     }
   },
   "& .cm-codeblock-last": {
-    display: "inline-block",
     "&::after": {
       borderBottomLeftRadius: ".5rem",
       borderBottomRightRadius: ".5rem"
     }
+  },
+  "&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line": {
+    background: getToken("extend.semanticColors.input.light"),
+    mixBlendMode: "darken"
+  },
+  "&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line": {
+    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")
+    }
   }
 });
 var getLineRange = (lines, from, to) => {
@@ -1848,8 +1860,8 @@ var LineWidget = class extends WidgetType2 {
     return el;
   }
 };
-var top = new LineWidget("cm-codeblock-first");
-var bottom = new LineWidget("cm-codeblock-last");
+var top = new LineWidget("cm-codeblock-end cm-codeblock-first");
+var bottom = new LineWidget("cm-codeblock-end cm-codeblock-last");
 var buildDecorations = (view) => {
   const builder = new RangeSetBuilder();
   const { state } = view;
@@ -1859,17 +1871,17 @@ var buildDecorations = (view) => {
     syntaxTree(state).iterate({
       enter: (node) => {
         if (node.name === "FencedCode") {
-          const edit = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
+          const editing = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
           const range = getLineRange(blocks, node.from, node.to);
           for (let i = range[0]; i <= range[1]; i++) {
             const block = blocks[i];
-            if (!edit && (i === range[0] || i === range[1])) {
+            if (!editing && (i === range[0] || i === range[1])) {
               builder.add(block.from, block.to, Decoration4.replace({
                 widget: i === range[0] ? top : bottom
               }));
             } else {
               builder.add(block.from, block.from, Decoration4.line({
-                class: mx2("cm-code cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
+                class: mx2("cm-code cm-codeblock-line", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
               }));
             }
           }
@@ -2177,6 +2189,7 @@ var snippets = {
   codeblock: snippet([
     //
     "```#{}",
+    "",
     "```"
   ].join("\n")),
   table: snippet([
@@ -4105,6 +4118,7 @@ var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
   className: "grow"
 });
 var MarkdownHeading = () => {
+  const { t } = useTranslation(translationKey);
   const { onAction, state } = useToolbarContext("MarkdownFormatting");
   const blockType = state ? state.blockType : "paragraph";
   const header = blockType && /heading(\d)/.exec(blockType);
@@ -4117,9 +4131,16 @@ var MarkdownHeading = () => {
       type: "heading",
       data: parseInt(value2)
     })
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, null, /* @__PURE__ */ React2.createElement(HeadingIcon, {
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
+    variant: "ghost",
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("heading label")), /* @__PURE__ */ React2.createElement(HeadingIcon, {
     className: iconStyles
-  })), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
+  }))), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
     value: "0"
   }, /* @__PURE__ */ React2.createElement(Paragraph, {
     className: iconStyles
@@ -4213,7 +4234,7 @@ var MarkdownLists = () => {
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
-    value: state?.listStyle ?? void 0
+    value: state?.listStyle ? `list-${state.listStyle}` : ""
   }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
     key: type,
     value: type,
@@ -4233,7 +4254,7 @@ var markdownBlocks = [
   {
     type: "codeblock",
     Icon: CodeBlock,
-    getState: (state) => state.blockQuote,
+    getState: (state) => state.blockType === "codeblock",
     disabled: (state) => !state.blankLine
   },
   {
@@ -4249,7 +4270,7 @@ var MarkdownBlocks = () => {
   const value = markdownBlocks.find(({ getState }) => state && getState(state));
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
-    value: value?.type
+    value: value?.type ?? ""
   }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
     key: type,
     value: type,
@@ -4681,6 +4702,9 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  editorFillLayoutEditor,
+  editorFillLayoutRoot,
+  editorHalfViewportOverscrollContent,
   editorMode,
   editorWithToolbarLayout,
   focusComment,