@dxos/react-ui-editor 0.3.11-main.690ca41 → 0.3.11-main.6ec1cd2

package/src/extensions/comments.ts

@@ -3,19 +3,7 @@
 //
 
 import { type Extension, StateEffect, StateField } from '@codemirror/state';
-import {
-  hoverTooltip,
-  keymap,
-  type Command,
-  type DecorationSet,
-  type ViewUpdate,
-  Decoration,
-  EditorView,
-  MatchDecorator,
-  ViewPlugin,
-  WidgetType,
-  type Rect,
-} from '@codemirror/view';
+import { hoverTooltip, keymap, type Command, Decoration, EditorView, type Rect } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
 
 import { debounce } from '@dxos/async';
@@ -23,24 +11,16 @@ import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
+import { Cursor } from './cursor';
 import { type CommentRange, type EditorModel, type Range } from '../hooks';
 import { getToken } from '../styles';
-import { callbackWrapper, CursorConverter } from '../util';
+import { callbackWrapper } from '../util';
 
 // TODO(burdon): Handle delete, cut, copy, and paste (separately) text that includes comment range.
 // TODO(burdon): Consider breaking into separate plugin (since not standalone)? Like mermaid?
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
-  '& .cm-bookmark': {
-    cursor: 'pointer',
-    margin: '4px',
-    padding: '4px',
-    backgroundColor: 'yellow',
-  },
-  '& .cm-bookmark-selected': {
-    backgroundColor: 'orange',
-  },
   '& .cm-comment': {
     backgroundColor: getToken('extend.colors.yellow.50'),
   },
@@ -98,7 +78,7 @@ const setCommentState = StateEffect.define<CommentsState>();
 const commentsStateField = StateField.define<CommentsState>({
   create: () => ({ ranges: [] }),
   update: (value, tr) => {
-    const cursorConverter = tr.state.facet(CursorConverter);
+    const cursorConverter = tr.state.facet(Cursor.converter);
 
     for (const effect of tr.effects) {
       // Update selection.
@@ -111,7 +91,7 @@ const commentsStateField = StateField.define<CommentsState>({
         const { comments } = effect.value;
         const ranges: ExtendedCommentRange[] = comments
           .map((comment) => {
-            const range = getRangeFromCursor(cursorConverter, comment.cursor);
+            const range = Cursor.getRangeFromCursor(cursorConverter, comment.cursor);
             return range && { ...comment, ...range };
           })
           .filter(nonNullable);
@@ -154,42 +134,13 @@ const highlightDecorations = EditorView.decorations.compute([commentsStateField]
   return Decoration.set(decorations);
 });
 
-/**
- * Optional bookmark widget at the start/end of the selection.
- * May correspond to a markdown bookmark.
- */
-class BookmarkWidget extends WidgetType {
-  constructor(
-    private readonly _anchor: number,
-    private readonly _id: string,
-    private readonly _handleClick?: () => void,
-  ) {
-    super();
-    invariant(this._id);
-  }
-
-  override eq(other: BookmarkWidget) {
-    return this._anchor === other._anchor && this._id === other._id;
-  }
-
-  override toDOM() {
-    const span = document.createElement('span');
-    span.className = 'cm-bookmark';
-    span.textContent = '※';
-    if (this._handleClick) {
-      span.onclick = () => this._handleClick!();
-    }
-    return span;
-  }
-}
-
 export type CommentsOptions = {
   key?: string;
   footnote?: boolean;
   /**
    * Called to create a new thread and return the thread id.
    */
-  onCreate?: (range: string) => string | undefined;
+  onCreate?: (cursor: string, location?: Rect | null) => string | undefined;
   /**
    * Called to notify which thread is currently closest to the cursor.
    */
@@ -197,7 +148,7 @@ export type CommentsOptions = {
   /**
    * Called to render tooltip.
    */
-  onHover?: (el: Element) => void;
+  onHover?: (el: Element, shortcut: string) => void;
 };
 
 /**
@@ -213,13 +164,15 @@ export type CommentsOptions = {
  * 6). Optionally, implements a hoverTooltip to show hints when creating a selection range.
  */
 export const comments = (options: CommentsOptions = {}): Extension => {
+  const { key: shortcut = "meta-'" } = options;
+
   const handleSelect = debounce((state: CommentsState) => options.onSelect?.(state), 200);
 
   /**
    * Create comment thread action.
    */
   const createCommentThread: Command = (view) => {
-    const cursorConverter = view.state.facet(CursorConverter);
+    const cursorConverter = view.state.facet(Cursor.converter);
 
     invariant(options.onCreate);
     const { head, from, to } = view.state.selection.main;
@@ -227,10 +180,10 @@ export const comments = (options: CommentsOptions = {}): Extension => {
       return false;
     }
 
-    const relPos = getCursorFromRange(cursorConverter, { from, to });
-    if (relPos) {
+    const cursor = Cursor.getCursorFromRange(cursorConverter, { from, to });
+    if (cursor) {
       // Create thread via callback.
-      const id = callbackWrapper(options.onCreate)(relPos);
+      const id = callbackWrapper(options.onCreate)(cursor, view.coordsAtPos(from));
       if (id) {
         // Update range.
         view.dispatch({
@@ -254,44 +207,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     return false;
   };
 
-  /**
-   * Bookmark widget decoration.
-   */
-  const bookmarksViewPlugin = ViewPlugin.fromClass(
-    class BookmarkViewPlugin {
-      // Match markdown footnotes (option).
-      // https://www.markdownguide.org/extended-syntax/#footnotes
-      static bookmarkMatcher = new MatchDecorator({
-        regexp: /\[\^(\w+)\]/g,
-        decoration: (match, view, pos) => {
-          const id = match[1];
-          return Decoration.replace({
-            id,
-            widget: new BookmarkWidget(pos, id),
-          });
-        },
-      });
-
-      bookmarks: DecorationSet;
-      constructor(view: EditorView) {
-        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
-      }
-
-      update(update: ViewUpdate) {
-        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update, this.bookmarks);
-      }
-    },
-    {
-      decorations: (instance) => instance.bookmarks,
-      provide: (plugin) =>
-        EditorView.atomicRanges.of((view) => {
-          return view.plugin(plugin)?.bookmarks || Decoration.none;
-        }),
-    },
-  );
-
   return [
-    bookmarksViewPlugin,
     commentsStateField,
     highlightDecorations,
     styles,
@@ -302,7 +218,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     options.onCreate
       ? keymap.of([
           {
-            key: options?.key ?? "meta-'",
+            key: shortcut,
             run: callbackWrapper(createCommentThread),
           },
         ])
@@ -324,7 +240,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
                 create: () => {
                   // TODO(burdon): Dispatch to react callback to render (or use SSR)?
                   const el = document.createElement('div');
-                  options.onHover?.(el);
+                  options.onHover?.(el, shortcut);
                   return { dom: el, offset: { x: 0, y: 8 } };
                 },
               };
@@ -341,7 +257,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     // TODO(burdon): Is there a better (finer grained) way to do this?
     //
     EditorView.updateListener.of(({ view, state, changes }) => {
-      const cursorConverter = view.state.facet(CursorConverter);
+      const cursorConverter = view.state.facet(Cursor.converter);
 
       //
       // Test if need to recompute indexed range if document changes before the end of the range.
@@ -352,7 +268,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
         changes.iterChanges((from, to, from2, to2) => {
           ranges.forEach((range) => {
             if (from2 === to2) {
-              const newRange = getRangeFromCursor(cursorConverter, range.cursor);
+              const newRange = Cursor.getRangeFromCursor(cursorConverter, range.cursor);
               if (!newRange || newRange.to - newRange.from === 0) {
                 // TODO(burdon): Delete range if empty.
                 log.info('deleted comment', { thread: range.id });
@@ -360,7 +276,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
             }
 
             if (from <= range.to) {
-              const newRange = getRangeFromCursor(cursorConverter, range.cursor);
+              const newRange = Cursor.getRangeFromCursor(cursorConverter, range.cursor);
               Object.assign(range, newRange);
               mod = true;
             }
@@ -392,6 +308,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
           }
         });
 
+        // TODO(burdon): Fire debounced callback if range selected (to show hint).
+
         if (selected.active !== active || selected.closest !== closest) {
           view.dispatch({ effects: setSelection.of(selected) });
 
@@ -405,16 +323,3 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     }),
   ];
 };
-
-const getCursorFromRange = (cursorConverter: CursorConverter, range: Range) => {
-  const from = cursorConverter.toCursor(range.from);
-  const to = cursorConverter.toCursor(range.to, -1);
-  return [from, to].join(':');
-};
-
-const getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) => {
-  const parts = cursor.split(':');
-  const from = cursorConverter.fromCursor(parts[0]);
-  const to = cursorConverter.fromCursor(parts[1]);
-  return from !== undefined && to !== undefined ? { from, to } : undefined;
-};

package/src/extensions/cursor.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet } from '@codemirror/state';
+
+import type { Range } from '../hooks';
+
+/**
+ * Converts indexes into the text document into stable peer-independent cursors.
+ *
+ * See:
+ *  - https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+ *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+ *
+ * @param {assoc} number Negative values will associate the cursor with the previous character
+ *                       while positive - with the next one.
+ */
+export interface CursorConverter {
+  toCursor(position: number, assoc?: -1 | 1 | undefined): string;
+  fromCursor(cursor: string): number;
+}
+
+const defaultCursorConverter: CursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor),
+};
+
+export class Cursor {
+  static readonly converter = Facet.define<CursorConverter, CursorConverter>({
+    combine: (providers) => providers[0] ?? defaultCursorConverter,
+  });
+
+  static readonly getCursorFromRange = (cursorConverter: CursorConverter, range: Range) => {
+    const from = cursorConverter.toCursor(range.from);
+    const to = cursorConverter.toCursor(range.to, -1);
+    return [from, to].join(':');
+  };
+
+  static readonly getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) => {
+    const parts = cursor.split(':');
+    const from = cursorConverter.fromCursor(parts[0]);
+    const to = cursorConverter.fromCursor(parts[1]);
+    return from !== undefined && to !== undefined ? { from, to } : undefined;
+  };
+}

package/src/extensions/hr.ts

@@ -28,11 +28,11 @@ class HorizontalRuleWidget extends WidgetType {
     super();
   }
 
-  override eq(other: WidgetType) {
+  override eq(other: this) {
     return this._pos === (other as any as HorizontalRuleWidget)._pos;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     // TODO(burdon): Create <hr> element? Does this clash with markdown parser?
     const el = document.createElement('div');
     el.className = 'cm-hr';

package/src/extensions/image.ts

@@ -72,11 +72,11 @@ class ImageWidget extends WidgetType {
     super();
   }
 
-  override eq(other: WidgetType) {
+  override eq(other: this) {
     return this._url === (other as any as ImageWidget)._url;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const img = document.createElement('img');
     img.setAttribute('src', this._url);
     img.setAttribute('class', 'cm-image');

package/src/extensions/index.ts

@@ -9,6 +9,7 @@ export * from './basic';
 export * from './blast';
 export * from './code';
 export * from './comments';
+export * from './cursor';
 export * from './hr';
 export * from './image';
 export * from './link';

package/src/extensions/link.ts

@@ -93,11 +93,11 @@ class LinkButton extends WidgetType {
     super();
   }
 
-  override eq(other: LinkButton) {
+  override eq(other: this) {
     return this._url === other._url;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this._onAttach!(el, this._url);
     return el;
@@ -109,11 +109,11 @@ class LinkText extends WidgetType {
     super();
   }
 
-  override eq(other: LinkText) {
+  override eq(other: this) {
     return this._url === other._url;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const link = document.createElement('a');
     link.setAttribute('class', 'cm-link');
     link.textContent = this._text;

package/src/extensions/markdown/highlight.ts

@@ -31,7 +31,6 @@ export const markdownTags = {
   CodeText: Tag.define(),
   EmphasisMark: Tag.define(),
   HeaderMark: Tag.define(),
-  // HorizontalRule: Tag.define(),
   InlineCode: Tag.define(),
   LinkLabel: Tag.define(),
   LinkReference: Tag.define(),
@@ -177,13 +176,6 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
         class: blockquote,
       },
 
-      // TODO(burdon): Replace with extension.
-      // {
-      //   tag: [markdownTags.HorizontalRule],
-      //   class: mx(horizontalRule, readonly && '-indent-[100rem]'),
-      // },
-
-      // TODO(burdon): Only if being edited.
       {
         tag: [markdownTags.TableCell],
         class: 'font-mono',

package/src/extensions/table.ts

@@ -81,7 +81,6 @@ const update = (state: EditorState, options: TableOptions) => {
         table.from,
         table.to,
         Decoration.replace({
-          block: true,
           widget: new TableWidget(table),
         }),
       );
@@ -98,14 +97,14 @@ class TableWidget extends WidgetType {
     super();
   }
 
-  override eq(other: TableWidget) {
+  override eq(other: this) {
     return (
       this._table.header?.join() === other._table.header?.join() &&
       this._table.rows?.join() === other._table.rows?.join()
     );
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const table = document.createElement('table');
 
     {
@@ -132,4 +131,8 @@ class TableWidget extends WidgetType {
 
     return table;
   }
+
+  override ignoreEvent(e: Event) {
+    return !/^mouse/.test(e.type);
+  }
 }

package/src/extensions/tasklist.ts

@@ -29,11 +29,11 @@ class CheckboxWidget extends WidgetType {
     super();
   }
 
-  override eq(other: CheckboxWidget) {
+  override eq(other: this) {
     return this._checked === other._checked && this._indent === other._indent;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const wrap = document.createElement('span');
     wrap.className = 'cm-task-item';
     wrap.setAttribute('aria-hidden', 'true');

package/src/extensions/yjs/cursor.ts

@@ -6,12 +6,13 @@ import * as Y from 'yjs';
 
 import { arrayToString, stringToArray } from '@dxos/util';
 
-import { type CursorConverter } from '../../util';
+import { type CursorConverter } from '../cursor';
 
 export const cursorConverter = (text: Y.Text): CursorConverter => ({
   toCursor: (index, assoc) => {
     return arrayToString(Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text, index, assoc)));
   },
+
   fromCursor: (cursor) => {
     return (
       Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(cursor)), text.doc!)?.index ??

package/src/extensions/yjs/yjs.ts

@@ -8,9 +8,9 @@ import type * as YP from 'y-protocols/awareness';
 import type { YText } from '@dxos/text-model';
 
 import { cursorConverter } from './cursor';
-import { CursorConverter } from '../../util';
+import { Cursor } from '../cursor';
 
 export const yjs = (content: YText, awareness?: YP.Awareness) => [
-  CursorConverter.of(cursorConverter(content)),
+  Cursor.converter.of(cursorConverter(content)),
   yCollab(content, awareness),
 ];

package/src/hooks/useTextModel.ts

@@ -30,7 +30,7 @@ export type Range = {
 
 export type CommentRange = {
   id: string;
-  cursor: string;
+  cursor: string; // TODO(burdon): Rename range.
 };
 
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
@@ -41,13 +41,10 @@ export type EditorModel = {
 
   // TODO(burdon): Remove.
   content: string | YText | YXmlFragment | DocAccessor;
-  /**
-   * @deprecated Use CursorConverter.
-   */
-  getCursorFromRange?: (value: Range) => string;
-  getRangeFromCursor?: (cursor: string) => Range | undefined;
+
   // TODO(burdon): Move into extension.
   awareness?: YP.Awareness;
+
   // TODO(burdon): Remove.
   peer?: {
     id: string;
@@ -66,7 +63,7 @@ export type UseTextModelProps = {
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState<EditorModel | undefined>(() => createModel(props));
+  const [model, setModel] = useState<EditorModel | undefined>();
   useEffect(() => setModel(createModel(props)), [identity, space, text]);
   return model;
 };

package/src/hooks/yjs.ts

@@ -6,7 +6,6 @@ import * as decoding from 'lib0/decoding';
 import * as encoding from 'lib0/encoding';
 import { Observable } from 'lib0/observable';
 import * as YP from 'y-protocols/awareness';
-import * as Y from 'yjs';
 import { type Doc } from 'yjs';
 
 import { invariant } from '@dxos/invariant';
@@ -14,9 +13,8 @@ import { log } from '@dxos/log';
 import { type Space } from '@dxos/react-client/echo';
 import { type GossipMessage } from '@dxos/react-client/mesh';
 import type { YText } from '@dxos/text-model';
-import { arrayToString, stringToArray } from '@dxos/util';
 
-import { type EditorModel, modelState, type Range, type UseTextModelProps } from './useTextModel';
+import { type EditorModel, modelState, type UseTextModelProps } from './useTextModel';
 import { yjs } from '../extensions';
 
 export const createYjsModel = ({ identity, space, text }: UseTextModelProps): EditorModel => {
@@ -29,26 +27,6 @@ export const createYjsModel = ({ identity, space, text }: UseTextModelProps): Ed
     id: text.doc.guid,
     content: text.content,
     text: () => text.content!.toString(),
-    // https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
-    // TODO(dmaretskyi): Refactor as cursor-converter.
-    getCursorFromRange: (range: Range) => {
-      const from = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text.content as YText, range.from));
-      const to = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text.content as YText, range.to, -1));
-      return [arrayToString(from), arrayToString(to)].join(':');
-    },
-    getRangeFromCursor: (cursor: string) => {
-      invariant(text.doc);
-      const parts = cursor.split(':');
-      const from = Y.createAbsolutePositionFromRelativePosition(
-        Y.decodeRelativePosition(stringToArray(parts[0])),
-        text.doc,
-      );
-      const to = Y.createAbsolutePositionFromRelativePosition(
-        Y.decodeRelativePosition(stringToArray(parts[1])),
-        text.doc,
-      );
-      return from && to ? { from: from.index, to: to.index } : undefined;
-    },
     extension: [modelState.init(() => model), yjs(text.content as YText, provider?.awareness)],
     awareness: provider?.awareness,
     peer: identity

package/src/index.ts

@@ -5,9 +5,11 @@
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 export { type Extension } from '@codemirror/state';
+export { type EditorView } from '@codemirror/view';
 
 export * from './components';
 export * from './extensions';
 export * from './hooks';
 export { getToken } from './styles';
 export * from './themes';
+export * from './util';

package/src/styles/markdown.ts

@@ -39,10 +39,8 @@ export const codeBlock = 'mlb-2 font-mono bg-neutral-500/10 p-3 rounded';
 
 export const inlineUrl = mx(code, 'px-1');
 
-// TODO(burdon): Replace with widget.
 export const blockquote = mx('pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30', light);
 
-// TODO(burdon): Replace with widget.
 export const horizontalRule =
   'flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800';
 

package/src/themes/default.ts

@@ -6,8 +6,8 @@ import get from 'lodash.get';
 
 import { type ThemeStyles, tokens } from '../styles';
 
-// TODO(burdon): Can we erase All of the default CM styles?
-// TODO(burdon): Theme styles seem to be added multiple times?
+// TODO(burdon): Can we use @apply and import css file?
+//  https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply?
 
 /**
  * Minimal styles.
@@ -86,6 +86,8 @@ export const defaultTheme: ThemeStyles = {
   //
   '.cm-line': {
     paddingInline: 0,
+    // TODO(burdon): Other values leave gaps between lines when highlighted.
+    // lineHeight: 'normal',
   },
   '.cm-activeLine': {
     background: 'inherit',
@@ -119,36 +121,6 @@ export const defaultTheme: ThemeStyles = {
     backgroundColor: get(tokens, 'extend.colors.yellow.700'),
   },
 
-  //
-  // collaboration
-  // TODO(burdon): Review classnames (YJS dependent?) Note: e2e tests depend on this class.
-  //
-
-  '&light .cm-ySelection, &light .cm-yLineSelection': {
-    mixBlendMode: 'multiply',
-  },
-  '&dark .cm-ySelection, &dark .cm-yLineSelection': {
-    mixBlendMode: 'screen',
-  },
-
-  '.cm-ySelectionInfo': {
-    padding: '2px 4px',
-    marginBlockStart: '-4px',
-  },
-  '.cm-ySelection, & .cm-selectionMatch': {
-    paddingBlockStart: '.15em',
-    paddingBlockEnd: '.15em',
-  },
-  '.cm-ySelectionCaret': {
-    display: 'inline-block',
-    insetBlockStart: '.1em',
-    blockSize: '1.4em',
-    verticalAlign: 'top',
-  },
-  '.cm-yLineSelection': {
-    margin: 0,
-  },
-
   //
   // link
   //
@@ -229,16 +201,17 @@ export const defaultTheme: ThemeStyles = {
 
   //
   // font size
-  // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
+  // TODO(thure): This appears to be the best or only way to set selection caret heights,
+  //  but it's far more verbose than it needs to be.
   //
-  ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
-    const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
-
-    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
-    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
-    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
-    return acc;
-  }, {}),
+  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
+  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
+  //
+  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
+  //   return acc;
+  // }, {}),
 
   /**
    * Panels
@@ -292,7 +265,9 @@ export const textTheme: ThemeStyles = {
 };
 
 export const markdownTheme: ThemeStyles = {
-  // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
+  '.cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
   '.cm-placeholder': {
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
   },

package/dist/types/src/util/cursor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/util/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,eAAO,MAAM,eAAe,yCAE1B,CAAC"}