@dxos/react-ui-editor 0.3.11-main.800163e → 0.3.11-main.80db41b

package/dist/lib/browser/index.mjs

@@ -1,6 +1,7 @@
 // packages/ui/react-ui-editor/src/index.ts
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
+import { keymap as keymap7 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/index.ts
 import { tags as tags2 } from "@lezer/highlight";
@@ -13,7 +14,7 @@ import defaultsDeep2 from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState } from "react";
 import { log as log2 } from "@dxos/log";
 import { useThemeContext } from "@dxos/react-ui";
-import { attentionSurface, mx as mx3 } from "@dxos/react-ui-theme";
+import { focusRing, mx as mx3 } from "@dxos/react-ui-theme";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
@@ -782,7 +783,7 @@ var Blaster = class {
   initialize() {
     invariant(!this._canvas && !this._ctx, void 0, {
       F: __dxlog_file,
-      L: 138,
+      L: 141,
       S: this,
       A: [
         "!this._canvas && !this._ctx",
@@ -819,7 +820,7 @@ var Blaster = class {
   start() {
     invariant(this._canvas && this._ctx, void 0, {
       F: __dxlog_file,
-      L: 177,
+      L: 180,
       S: this,
       A: [
         "this._canvas && this._ctx",
@@ -1073,11 +1074,25 @@ var logChanges = (trs) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 var styles2 = EditorView5.baseTheme({
-  "& .cm-comment": {
+  "&light .cm-comment, &light .cm-comment-current": {
+    mixBlendMode: "darken"
+  },
+  "&dark .cm-comment, &dark .cm-comment-current": {
+    mixBlendMode: "plus-lighter"
+  },
+  "&light .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
   },
-  "& .cm-comment-current": {
+  "&light .cm-comment-current": {
     backgroundColor: getToken("extend.colors.yellow.100")
+  },
+  "&dark .cm-comment": {
+    color: getToken("extend.colors.yellow.50"),
+    backgroundColor: getToken("extend.colors.yellow.900")
+  },
+  "&dark .cm-comment-current": {
+    color: getToken("extend.colors.yellow.100"),
+    backgroundColor: getToken("extend.colors.yellow.950")
   }
 });
 var commentMark = Decoration2.mark({
@@ -1703,12 +1718,11 @@ import { ViewPlugin as ViewPlugin3, EditorView as EditorView8, Decoration as Dec
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var styles3 = EditorView8.baseTheme({
   "& .cm-code": {
-    paddingInline: "1rem !important",
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
   "& .cm-codeblock": {
-    display: "inline-block",
     width: "100%",
+    paddingInline: "1rem !important",
     position: "relative",
     "&::after": {
       content: '""',
@@ -1729,12 +1743,14 @@ var styles3 = EditorView8.baseTheme({
     }
   },
   "& .cm-codeblock-first": {
+    display: "inline-block",
     "&::after": {
       borderTopLeftRadius: ".5rem",
       borderTopRightRadius: ".5rem"
     }
   },
   "& .cm-codeblock-last": {
+    display: "inline-block",
     "&::after": {
       borderBottomLeftRadius: ".5rem",
       borderBottomRightRadius: ".5rem"
@@ -1782,7 +1798,7 @@ var buildDecorations = (view) => {
               }));
             } else {
               builder.add(block.from, block.from, Decoration3.line({
-                class: mx2("cm-code cm-codeblock")
+                class: mx2("cm-code cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
               }));
             }
           }
@@ -2589,11 +2605,11 @@ var defaultTheme = {
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get3(tokens, "extend.colors.neutral.900", "black"),
+    color: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get3(tokens, "extend.colors.neutral.100", "white"),
+    color: get3(tokens, "extend.semanticColors.base.fg.dark", "white"),
     caretColor: "white"
   },
   //
@@ -2605,8 +2621,11 @@ var defaultTheme = {
   "&dark .cm-cursor, &dark .cm-dropCursor": {
     borderLeft: "2px solid white"
   },
-  ".cm-placeholder": {
-    fontWeight: 100
+  "&light .cm-placeholder": {
+    color: get3(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+  },
+  "&dark .cm-placeholder": {
+    color: get3(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
   },
   //
   // line
@@ -2947,11 +2966,10 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeh
 });
 var defaultSlots = {
   root: {
-    // TODO(burdon): Add focusRing by default/as property?
-    className: mx3("flex flex-col grow overflow-y-auto", attentionSurface)
+    className: mx3("grow", focusRing)
   },
   editor: {
-    className: "h-full p-2"
+    className: "bs-full"
   }
 };
 var defaultTextSlots = {
@@ -2968,6 +2986,16 @@ import React2 from "react";
 import { Button, DensityProvider, Select } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
+var ToolbarRoot = ({ children, onAction }) => {
+  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
+    onAction
+  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "toolbar",
+    className: "flex w-full shrink-0 p-2 gap-4 items-center whitespace-nowrap overflow-hidden"
+  }, children)));
+};
 var ToolbarButton = ({ Icon, onClick, title }) => {
   const { onAction } = useToolbarContext("ToolbarButton");
   const handleClick = () => {
@@ -2985,16 +3013,6 @@ var ToolbarButton = ({ Icon, onClick, title }) => {
     className: getSize(5)
   }));
 };
-var ToolbarRoot = ({ children, onAction }) => {
-  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
-    onAction
-  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
-    density: "fine"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    role: "toolbar",
-    className: "flex w-full shrink-0 p-2 gap-4 items-center whitespace-nowrap overflow-hidden"
-  }, children)));
-};
 var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
   className: "grow"
 });
@@ -3411,10 +3429,19 @@ var useTextModel = (props) => {
   ]);
   return model;
 };
+var useInMemoryTextModel = ({ id, defaultContent }) => {
+  const [content, setContent] = useState4(defaultContent ?? "");
+  return {
+    id,
+    content,
+    setContent,
+    text: () => content
+  };
+};
 var createModel = ({ space, identity, text }) => {
   invariant3(isAutomergeObject(text), void 0, {
     F: __dxlog_file6,
-    L: 34,
+    L: 50,
     S: void 0,
     A: [
       "isAutomergeObject(text)",
@@ -3498,6 +3525,7 @@ export {
   image,
   insertCodeblock,
   insertTable,
+  keymap7 as keymap,
   link,
   listener,
   logChanges,
@@ -3524,6 +3552,7 @@ export {
   useActionHandler,
   useComments,
   useEditorView,
+  useInMemoryTextModel,
   useTextEditor,
   useTextModel,
   useToolbarContext