@dxos/react-ui-editor 0.6.9 → 0.6.10-main.48c066e

package/dist/lib/browser/index.mjs

@@ -60,8 +60,8 @@ var theme = {
 
 // packages/ui/react-ui-editor/src/styles/tokens.ts
 import get from "lodash.get";
-import { tailwindConfig } from "@dxos/react-ui-theme";
-var tokens = tailwindConfig({}).theme;
+import { tokens } from "@dxos/react-ui-theme";
+window.__tokens = tokens;
 var getToken = (path, defaultValue) => {
   const value = get(tokens, path, defaultValue);
   return value?.toString() ?? "";
@@ -101,35 +101,21 @@ var defaultTheme = {
   * NOTE: Gutters should have the same top margin as the content.
   */
   ".cm-gutters": {
-    background: "transparent"
+    background: "var(--dx-base)"
   },
   ".cm-gutter": {},
   ".cm-gutterElement": {
+    fontSize: "16px",
     lineHeight: 1.5
   },
   //
-  // Cursor
-  //
-  "&light .cm-cursor, &light .cm-dropCursor": {
-    borderLeft: "2px solid black"
-  },
-  "&dark .cm-cursor, &dark .cm-dropCursor": {
-    borderLeft: "2px solid white"
-  },
-  "&light .cm-placeholder": {
-    color: getToken("extend.semanticColors.description.light", "rgba(0,0,0,.2)")
-  },
-  "&dark .cm-placeholder": {
-    color: getToken("extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
-  },
-  //
   // line
   //
   ".cm-line": {
     paddingInline: 0
   },
   ".cm-activeLine": {
-    background: "transparent"
+    background: "var(--dx-hoverSurface)"
   },
   //
   // gutter
@@ -138,19 +124,28 @@ var defaultTheme = {
     minWidth: "36px"
   },
   //
-  // Selection
+  // Cursor
   //
-  "&light .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.100")
+  "&light .cm-cursor, &light .cm-dropCursor": {
+    borderLeft: "2px solid black"
   },
-  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.200")
+  "&dark .cm-cursor, &dark .cm-dropCursor": {
+    borderLeft: "2px solid white"
+  },
+  "&light .cm-placeholder": {
+    color: getToken("extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+  },
+  "&dark .cm-placeholder": {
+    color: getToken("extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
   },
-  "&dark .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.700")
+  //
+  // Selection
+  //
+  ".cm-selectionBackground": {
+    background: "var(--dx-selectionSurface) !important"
   },
-  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.600")
+  ".cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: "var(--dx-selectionSurface) !important"
   },
   //
   // Search
@@ -280,7 +275,6 @@ var defaultTheme = {
       background: getToken("extend.colors.neutral.600")
     }
   },
-  // TODO(burdon): Factor out element specific logic.
   //
   // table
   //
@@ -425,7 +419,7 @@ var styles = EditorView.baseTheme({
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
-var autocomplete = ({ activateOnTyping, onSearch } = {}) => {
+var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
   const extentions = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -435,6 +429,7 @@ var autocomplete = ({ activateOnTyping, onSearch } = {}) => {
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
       activateOnTyping,
+      override,
       // closeOnBlur: false,
       // defaultKeymap: false,
       // TODO(burdon): Styles/fragments.
@@ -2295,7 +2290,7 @@ var dropFile = (options = {}) => {
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { defaultKeymap, history, historyKeymap, standardKeymap } from "@codemirror/commands";
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
 import { bracketMatching } from "@codemirror/language";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
@@ -2340,7 +2335,9 @@ var createBasicExtensions = (_props) => {
     props.bracketMatching && bracketMatching(),
     props.closeBrackets && closeBrackets(),
     props.dropCursor && dropCursor2(),
-    props.drawSelection && drawSelection(),
+    props.drawSelection && drawSelection({
+      cursorBlinkRate: 1200
+    }),
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
@@ -2355,9 +2352,11 @@ var createBasicExtensions = (_props) => {
     // https://codemirror.net/docs/ref/#view.KeyBinding
     keymap5.of([
       ...(props.keymap && keymaps[props.keymap]) ?? [],
-      // NOTE: Tab configured by markdown extension.
+      // NOTE: Tabs are also configured by markdown extension.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
-      // ...(props.indentWithTab ? [indentWithTab] : []),
+      ...props.indentWithTab ? [
+        indentWithTab
+      ] : [],
       // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
       ...props.closeBrackets ? closeBracketsKeymap : [],
       // https://codemirror.net/docs/ref/#commands.historyKeymap
@@ -2443,7 +2442,7 @@ var listener = ({ onFocus, onChange }) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
-import { indentWithTab } from "@codemirror/commands";
+import { indentWithTab as indentWithTab2 } from "@codemirror/commands";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
 import { EditorView as EditorView11, keymap as keymap6 } from "@codemirror/view";
@@ -3604,7 +3603,7 @@ var processAction = (view, action) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 import { completionKeymap as completionKeymap2 } from "@codemirror/autocomplete";
-import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from "@codemirror/commands";
+import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab3 } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
@@ -3812,6 +3811,8 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
       base: markdownLanguage3,
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
+      // Don't complete HTML tags.
+      completeHTMLTags: false,
       // Parser extensions.
       extensions: [
         // GFM provided by default.
@@ -3825,7 +3826,7 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     keymap7.of([
       // TODO(burdon): Indent by 4 if in task list.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
-      indentWithTab2,
+      indentWithTab3,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
       ...defaultKeymap2,
       ...completionKeymap2,
@@ -4235,7 +4236,7 @@ var autoHideTags = /* @__PURE__ */ new Set([
   "SuperscriptMark"
 ]);
 var bulletListIndentationWidth = 24;
-var orderedListIndentationWidth = 32;
+var orderedListIndentationWidth = 36;
 var buildDecorations2 = (view, options, focus) => {
   const deco = new RangeSetBuilder3();
   const atomicDeco = new RangeSetBuilder3();
@@ -4336,31 +4337,36 @@ var buildDecorations2 = (view, options, focus) => {
         const list = getCurrentList();
         const width = list.type === "OrderedList" ? orderedListIndentationWidth : bulletListIndentationWidth;
         const offset = ((list.level ?? 0) + 1) * width;
-        const start = state2.doc.lineAt(node.from);
-        deco.add(start.from, start.from, Decoration7.line({
+        const line = state2.doc.lineAt(node.from);
+        if (node.from === line.to - 1) {
+          return false;
+        }
+        deco.add(line.from, line.from, Decoration7.line({
           class: "cm-list-item",
           attributes: {
-            // Subtract 0.25em to account for the space CM adds to Paragraph nodes following the ListItem.
-            // Note: This makes the cursor appear to be left of the margin.
-            style: `padding-left: ${offset}px; text-indent: calc(-${width}px - 0.25em);`
+            style: `padding-left: ${offset}px; text-indent: -${width}px;`
           }
         }));
-        const line = state2.doc.sliceString(start.from, node.to);
-        const whitespace = line.match(/^ */)?.[0].length ?? 0;
+        const text = state2.doc.sliceString(line.from, node.to);
+        const whitespace = text.match(/^ */)?.[0].length ?? 0;
         if (whitespace) {
-          atomicDeco.add(start.from, start.from + whitespace, hide);
+          atomicDeco.add(line.from, line.from + whitespace, hide);
         }
         break;
       }
       case "ListMark": {
-        const task = tree.resolve(node.to + 1, 1).name === "TaskMarker";
-        if (task) {
-          atomicDeco.add(node.from, node.to, hide);
+        const next = tree.resolve(node.to + 1, 1);
+        if (next?.name === "TaskMarker") {
+          atomicDeco.add(node.from, node.to + 1, hide);
           break;
         }
         const list = getCurrentList();
-        const label = list.type === "OrderedList" ? `${++list.number}.` : "-";
-        atomicDeco.add(node.from, node.to, Decoration7.replace({
+        const text = state2.doc.sliceString(node.from, node.to + 1);
+        if (list.type === "BulletList" && text[1] !== " ") {
+          return false;
+        }
+        const label = list.type === "OrderedList" ? `${++list.number}.` : "\u2022";
+        atomicDeco.add(node.from, node.to + 1, Decoration7.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -4368,10 +4374,7 @@ var buildDecorations2 = (view, options, focus) => {
       case "TaskMarker": {
         if (!editingRange(state2, node, focus)) {
           const checked = state2.doc.sliceString(node.from + 1, node.to - 1) === "x";
-          atomicDeco.add(node.from - 2, node.from - 1, Decoration7.mark({
-            class: "cm-task-checkbox"
-          }));
-          atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+          atomicDeco.add(node.from, node.to + 1, checked ? checkedTask : uncheckedTask);
         }
         break;
       }
@@ -4570,7 +4573,7 @@ var formattingStyles = EditorView14.baseTheme({
   },
   "& .cm-task": {
     display: "inline-block",
-    width: `calc(${bulletListIndentationWidth}px - 0.25em)`,
+    width: `${bulletListIndentationWidth}px`,
     color: getToken("extend.colors.blue.500")
   },
   "& .cm-task-checkbox": {
@@ -4582,6 +4585,7 @@ var formattingStyles = EditorView14.baseTheme({
   "& .cm-list-mark": {
     display: "inline-block",
     textAlign: "right",
+    paddingRight: "0.5em",
     fontVariant: "tabular-nums"
   },
   "& .cm-list-mark-bullet": {
@@ -5243,17 +5247,16 @@ var Toolbar = {
 
 // packages/ui/react-ui-editor/src/defaults.ts
 import { EditorView as EditorView16 } from "@codemirror/view";
-var editorContent = "!mt-[16px] !mb-[32px] !mli-auto w-full max-w-[min(50rem,100%-4rem)]";
+import { mx as mx4 } from "@dxos/react-ui-theme";
+var marginY = "!mt-[16px] !mb-[32px]";
+var editorContent = mx4(marginY, "!mli-auto w-full max-w-[min(50rem,100%-2rem)]");
+var editorFullWidth = mx4(marginY, "!ml-[3rem]");
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
 var editorGutter = EditorView16.baseTheme({
   ".cm-gutters": {
     // Match margin from content.
     marginTop: "16px",
-    marginBottom: "16px",
-    // Inside within content margin.
-    marginRight: "-32px",
-    width: "32px",
-    backgroundColor: "transparent !important"
+    marginBottom: "16px"
   }
 });
 var editorMonospace = EditorView16.baseTheme({
@@ -5458,6 +5461,7 @@ export {
   documentId2 as documentId,
   dropFile,
   editorContent,
+  editorFullWidth,
   editorGutter,
   editorInputMode,
   editorMonospace,