@dxos/react-ui-editor 0.3.11-main.674a7f9 → 0.3.11-main.6901f09

package/src/extensions/markdown/heading.ts

@@ -22,10 +22,10 @@ const buildDecorations = (view: EditorView): DecorationSet => {
           case 'ATXHeading5':
           case 'ATXHeading6': {
             const mark = node.node.getChild('HeaderMark');
-
-            // Check if cursor is inside text.
-            if (mark && (cursor < node.from || cursor > node.to)) {
-              builder.add(mark.from, mark.to + 1, Decoration.replace({}));
+            if (mark) {
+              if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
+                builder.add(mark.from, mark.to + 1, Decoration.replace({}));
+              }
             }
           }
         }
@@ -43,7 +43,6 @@ export const heading = () => {
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view);
         }
@@ -53,7 +52,7 @@ export const heading = () => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
   ];

package/src/extensions/markdown/highlight.ts

@@ -128,13 +128,13 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       // Markdown marks.
       {
         tag: [markdownTags.CodeMark, markdownTags.HeaderMark, markdownTags.QuoteMark, markdownTags.EmphasisMark],
-        class: readonly ? 'hidden' : mark,
+        class: mark,
       },
 
       // E.g., code block language (after ```).
       {
         tag: [tags.function(tags.variableName), tags.labelName],
-        class: readonly ? 'hidden' : codeMark,
+        class: codeMark,
       },
 
       {
@@ -143,12 +143,12 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       },
 
       // Headings.
-      { tag: tags.heading1, class: heading(1, readonly) },
-      { tag: tags.heading2, class: heading(2, readonly) },
-      { tag: tags.heading3, class: heading(3, readonly) },
-      { tag: tags.heading4, class: heading(4, readonly) },
-      { tag: tags.heading5, class: heading(5, readonly) },
-      { tag: tags.heading6, class: heading(6, readonly) },
+      { tag: tags.heading1, class: heading(1) },
+      { tag: tags.heading2, class: heading(2) },
+      { tag: tags.heading3, class: heading(3) },
+      { tag: tags.heading4, class: heading(4) },
+      { tag: tags.heading5, class: heading(5) },
+      { tag: tags.heading6, class: heading(6) },
 
       // Emphasis.
       { tag: tags.emphasis, class: italic },
@@ -165,7 +165,7 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
       // when a language is specified. In this case, the syntax highlighting extensions will colorize
       // the code, but all other CSS properties will be inherited.
-      // IMPORTANT: Therefore, the fenced code block will use the base editor font.
+      // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
       {
         tag: [markdownTags.CodeText, markdownTags.InlineCode],
         class: code,
@@ -180,12 +180,6 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
         tag: [markdownTags.TableCell],
         class: 'font-mono',
       },
-
-      // Main content, paragraphs, etc.
-      // {
-      //   tag: [tags.content],
-      //   fontFamily: getToken('fontFamily.body', []).join(','),
-      // },
     ],
     {
       scope: markdownLanguage,

package/src/extensions/markdown/hr.ts

@@ -51,11 +51,9 @@ const buildDecorations = (view: EditorView): DecorationSet => {
 
 export const hr = () => {
   return [
-    styles,
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view);
         }
@@ -65,8 +63,9 @@ export const hr = () => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
+    styles,
   ];
 };

package/src/extensions/markdown/index.ts

@@ -4,6 +4,7 @@
 
 export * from './bundle';
 export * from './code';
+export * from './formatting';
 export * from './heading';
 export * from './highlight';
 export * from './hr';

package/src/extensions/markdown/link.ts

@@ -22,6 +22,7 @@ import { tooltipContent } from '@dxos/react-ui-theme';
 // https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
 // https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
 
+// TODO(burdon): Callback to dynamically lookup title of linked pages.
 export type LinkOptions = {
   link?: boolean;
   onHover?: (el: Element, url: string) => void;
@@ -37,7 +38,6 @@ export const link = (options: LinkOptions = {}): Extension => {
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view, options);
         }
@@ -49,7 +49,7 @@ export const link = (options: LinkOptions = {}): Extension => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
   ];
@@ -65,10 +65,12 @@ export const link = (options: LinkOptions = {}): Extension => {
         for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
           link = node.name === 'Link' ? node : null;
         }
+
         const url = link && link.getChild('URL');
         if (!url || !link) {
           return null;
         }
+
         const urlText = view.state.sliceDoc(url.from, url.to);
         return {
           pos: link.from,
@@ -89,7 +91,10 @@ export const link = (options: LinkOptions = {}): Extension => {
 };
 
 class LinkButton extends WidgetType {
-  constructor(private readonly _url: string, private readonly _onAttach: LinkOptions['onRender']) {
+  constructor(
+    private readonly _url: string,
+    private readonly _onAttach: LinkOptions['onRender'],
+  ) {
     super();
   }
 
@@ -105,7 +110,10 @@ class LinkButton extends WidgetType {
 }
 
 class LinkText extends WidgetType {
-  constructor(private readonly _text: string, private readonly _url?: string) {
+  constructor(
+    private readonly _text: string,
+    private readonly _url?: string,
+  ) {
     super();
   }
 
@@ -158,6 +166,7 @@ const buildDecorations = (view: EditorView, options: LinkOptions): DecorationSet
             return false;
           }
 
+          // TODO(burdon): Don't expand if moving cursor up/down.
           if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
             builder.add(
               node.from,

package/src/extensions/markdown/tasklist.ts

@@ -91,7 +91,6 @@ export const tasklist = (options: TasklistOptions = {}) => {
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view);
         }
@@ -103,7 +102,7 @@ export const tasklist = (options: TasklistOptions = {}) => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
     styles,

package/src/hooks/index.ts

@@ -5,5 +5,7 @@
 export * from './awareness-provider';
 export * from './defs';
 
+export * from './useActionHandler';
+export * from './useEditorView';
 export * from './useTextEditor';
 export * from './useTextModel';

package/src/hooks/useActionHandler.ts

@@ -0,0 +1,93 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { EditorView } from '@codemirror/view';
+
+import type { ToolbarProps } from '../components';
+import {
+  createComment,
+  insertTable,
+  setHeading,
+  setStyle,
+  toggleStyle,
+  addLink,
+  removeLink,
+  Inline,
+  List,
+  addList,
+  removeList,
+  toggleList,
+  addBlockquote,
+  removeBlockquote,
+  addCodeblock,
+  removeCodeblock,
+  toggleBlockquote,
+} from '../extensions';
+
+export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {
+  return (action) => {
+    if (!view) {
+      return;
+    }
+
+    let inlineType, listType;
+    switch (action.type) {
+      case 'heading':
+        setHeading(parseInt(action.data))(view);
+        break;
+
+      case 'strong':
+      case 'emphasis':
+      case 'strikethrough':
+      case 'code':
+        inlineType =
+          action.type === 'strong'
+            ? Inline.Strong
+            : action.type === 'emphasis'
+              ? Inline.Emphasis
+              : action.type === 'strikethrough'
+                ? Inline.Strikethrough
+                : Inline.Code;
+        (typeof action.data === 'boolean' ? setStyle(inlineType, action.data) : toggleStyle(inlineType))(view);
+        break;
+
+      case 'list-ordered':
+      case 'list-bullet':
+      case 'list-tasks':
+        listType =
+          action.type === 'list-ordered' ? List.Ordered : action.type === 'list-bullet' ? List.Bullet : List.Task;
+        (action.data === false
+          ? removeList(listType)
+          : action.data === true
+            ? addList(listType)
+            : toggleList(listType))(view);
+        break;
+
+      case 'blockquote':
+        (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
+        break;
+      case 'codeblock':
+        (action.data === false ? removeCodeblock : addCodeblock)(view);
+        break;
+      case 'table':
+        insertTable(view);
+        break;
+
+      case 'link':
+        (action.data === false ? removeLink : addLink)(view);
+        break;
+
+      case 'comment':
+        createComment(view);
+        break;
+    }
+
+    // TODO(burdon): Hack otherwise remains on heading selector.
+    setTimeout(() => {
+      if (!view.hasFocus) {
+        view.focus();
+      }
+    });
+  };
+};

package/src/hooks/useEditorView.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { type RefCallback, useState } from 'react';
+
+/**
+ * Hook for accessing the editor view.
+ *
+ * ```tsx
+ * const Test = () => {
+ *   const [editorRef, editorView] = useEditorView();
+ *   useEffect(() => {
+ *     editorView?.focus();
+ *   }, [editorView]);
+ *   return <TextEditor ref={editorRef} />;
+ * };
+ * ```
+ */
+export const useEditorView = (): [RefCallback<EditorView | null>, EditorView | null] => {
+  const [view, setView] = useState<EditorView | null>(null);
+  return [
+    (ref: EditorView | null) => {
+      setView(ref);
+    },
+    view,
+  ];
+};

package/src/hooks/useTextEditor.ts

@@ -2,28 +2,152 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-import { type RefCallback, useState } from 'react';
+import {
+  EditorSelection,
+  EditorState,
+  type EditorStateConfig,
+  type Extension,
+  type StateEffect,
+} from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { type RefObject, useEffect, useRef, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { type ThemeMode } from '@dxos/react-ui';
+import { isNotFalsy } from '@dxos/util';
+
+import { type ThemeStyles } from '..//styles';
+import { defaultTheme } from '../themes';
+import { logChanges } from '../util';
+
+export type UseTextEditorOptions = {
+  autoFocus?: boolean;
+  scrollTo?: StateEffect<any>;
+  debug?: boolean;
+} & EditorStateConfig;
+
+export type UseTextEditor = {
+  parentRef: RefObject<HTMLDivElement>;
+  view?: EditorView;
+};
 
 /**
- * Hook for accessing the editor view.
- *
- * ```tsx
- * const Test = () => {
- *   const [editorRef, editorView] = useTextEditor();
- *   useEffect(() => {
- *     editorView?.focus();
- *   }, [editorView]);
- *   return <TextEditor ref={editorRef} />;
- * };
- * ```
+ * Hook for creating editor.
  */
-export const useTextEditor = (): [RefCallback<EditorView | null>, EditorView | null] => {
-  const [view, setView] = useState<EditorView | null>(null);
+export const useTextEditor = ({
+  autoFocus,
+  scrollTo,
+  debug,
+  doc,
+  selection,
+  extensions,
+}: UseTextEditorOptions = {}): UseTextEditor => {
+  const onUpdate = useRef<() => void>();
+  const [view, setView] = useState<EditorView>();
+  const parentRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (parentRef.current) {
+      // https://codemirror.net/docs/ref/#state.EditorStateConfig
+      const state = EditorState.create({
+        doc,
+        selection,
+        extensions: [
+          // TODO(burdon): Doesn't catch errors in keymap functions.
+          EditorView.exceptionSink.of((err) => {
+            log.catch(err);
+          }),
+          extensions,
+          EditorView.updateListener.of(() => {
+            onUpdate.current?.();
+          }),
+        ].filter(isNotFalsy),
+      });
+
+      // https://codemirror.net/docs/ref/#view.EditorViewConfig
+      const view = new EditorView({
+        parent: parentRef.current,
+        scrollTo,
+        state,
+        // NOTE: Uncomment to debug/monitor all transactions.
+        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+        dispatchTransactions: (trs, view) => {
+          if (debug) {
+            logChanges(trs);
+          }
+          view.update(trs);
+        },
+      });
+
+      setView(view);
+    }
+
+    return () => {
+      view?.destroy();
+    };
+  }, [parentRef]);
+
+  useEffect(() => {
+    if (view) {
+      // Select end of line if not specified.
+      if (!selection && !view.state.selection.main.anchor) {
+        selection = EditorSelection.single(view.state.doc.line(1).to);
+      }
+
+      // Set selection after first update (since content may rerender on focus).
+      // TODO(burdon): BUG on first render may appear in middle of formatted heading.
+      // TODO(burdon): Make invisible until first render?
+      if (selection || scrollTo) {
+        onUpdate.current = () => {
+          onUpdate.current = undefined;
+          view.dispatch({ selection, effects: scrollTo && [scrollTo], scrollIntoView: !scrollTo });
+        };
+      }
+
+      if (autoFocus) {
+        view.focus();
+      }
+    }
+  }, [view, autoFocus, selection, scrollTo]);
+
+  return { parentRef, view };
+};
+
+// TODO(burdon): Factor out extension factories.
+
+export type DataExtensionsOptions = {
+  readonly?: boolean;
+};
+
+// TODO(burdon): Pass in TextObject (remove model).
+export const createDataExtensions = ({ readonly = false } = {}): Extension => {
   return [
-    (ref: EditorView | null) => {
-      setView(ref);
-    },
-    view,
+    //
+    EditorState.readOnly.of(readonly),
+    EditorView.editable.of(!readonly),
   ];
 };
+
+export type ThemeExtensionsOptions = {
+  theme?: ThemeStyles;
+  themeMode?: ThemeMode;
+  lineWrap?: boolean;
+  slots?: {
+    editor?: {
+      className?: string;
+    };
+    content?: {
+      className?: string;
+    };
+  };
+};
+
+export const createThemeExtensions = ({ theme, themeMode, slots }: ThemeExtensionsOptions = {}): Extension => {
+  return [
+    //
+    EditorView.baseTheme(defaultTheme),
+    theme && EditorView.theme(theme),
+    EditorView.darkTheme.of(themeMode === 'dark'),
+    EditorView.editorAttributes.of({ class: slots?.editor?.className ?? '' }),
+    EditorView.contentAttributes.of({ class: slots?.content?.className ?? '' }),
+  ].filter(isNotFalsy);
+};

package/src/hooks/useTextModel.ts

@@ -3,18 +3,17 @@
 //
 
 import get from 'lodash.get';
-import { useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
-import { isNotNullOrUndefined } from '@dxos/util';
 
 import { SpaceAwarenessProvider } from './awareness-provider';
 import { type EditorModel, modelState } from './defs';
-import { automerge, awareness, AwarenessProvider } from '../extensions';
+import { automerge, awareness } from '../extensions';
 import { cursorColor } from '../styles';
 
 // TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
@@ -31,6 +30,22 @@ export const useTextModel = (props: UseTextModelProps): EditorModel | undefined
   return model;
 };
 
+/**
+ * For use primarily in stories & tests so the dependence on TextObject can be avoided.
+ * @param id
+ * @param defaultContent
+ */
+export const useInMemoryTextModel = ({
+  id,
+  defaultContent,
+}: {
+  id: string;
+  defaultContent?: string;
+}): EditorModel & { setContent: Dispatch<SetStateAction<string>> } => {
+  const [content, setContent] = useState(defaultContent ?? '');
+  return { id, content, setContent, text: () => content };
+};
+
 const createModel = ({ space, identity, text }: UseTextModelProps) => {
   invariant(isAutomergeObject(text));
   const obj = text as any as AutomergeTextCompat;
@@ -49,16 +64,20 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
       peerId: identity?.identityKey.toHex() ?? 'Anonymous',
     });
 
+  const extensions = [
+    //
+    modelState.init(() => model),
+    automerge({ handle: doc.handle, path: doc.path }),
+  ];
+  if (awarenessProvider) {
+    extensions.push(awareness(awarenessProvider));
+  }
+
   const model: EditorModel = {
     id: obj.id,
     content: doc,
     text: () => get(doc.handle.docSync(), doc.path),
-    extension: [
-      modelState.init(() => model),
-      automerge({ handle: doc.handle, path: doc.path }),
-      awarenessProvider && AwarenessProvider.of(awarenessProvider),
-      awareness(),
-    ].filter(isNotNullOrUndefined),
+    extension: extensions,
     peer: identity
       ? {
           id: identity.identityKey.toHex(),

package/src/index.ts

@@ -5,7 +5,7 @@
 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 { type EditorView, keymap } from '@codemirror/view';
 
 export * from './components';
 export * from './extensions';

package/src/styles/markdown.ts

@@ -8,18 +8,17 @@ export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 // TODO(burdon): Better way to align vertically than negative margin? Font-specific?
 // https://tailwindcss.com/docs/font-weight
-export const headings: Record<HeadingLevel, string[]> = {
-  1: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl', '-ml-[10px]'],
-  2: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl', '-ml-[8px]'],
-  3: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl', '-ml-[7px]'],
-  4: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-xl', '-ml-[6px]'],
-  5: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-lg', '-ml-[5px]'],
-  6: ['mbs-4 mbe-2 font-medium text-inherit no-underline', '-ml-[4px]'],
+export const headings: Record<HeadingLevel, string> = {
+  1: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl',
+  2: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl',
+  3: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl',
+  4: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-xl',
+  5: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-lg',
+  6: 'mbs-4 mbe-2 font-medium text-inherit no-underline',
 };
 
-export const heading = (level: HeadingLevel, readonly?: boolean) => {
-  const [style, offset] = headings[level];
-  return mx(style, readonly && offset);
+export const heading = (level: HeadingLevel) => {
+  return headings[level];
 };
 
 export const text = 'text-neutral-800 dark:text-neutral-200';

package/src/themes/default.ts

@@ -49,9 +49,11 @@ export const defaultTheme: ThemeStyles = {
   '&.cm-focused': {
     outline: 'none',
   },
+
   '.cm-scroller': {
-    overflow: 'visible',
+    // overflow: 'visible',
     fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+    lineHeight: 1.4,
   },
 
   '.cm-content': {
@@ -60,11 +62,11 @@ export const defaultTheme: ThemeStyles = {
     fontSize: '16px',
   },
   '&light .cm-content': {
-    color: get(tokens, 'extend.colors.neutral.900', 'black'),
+    color: get(tokens, 'extend.semanticColors.base.fg.light', 'black'),
     caretColor: 'black',
   },
   '&dark .cm-content': {
-    color: get(tokens, 'extend.colors.neutral.100', 'white'),
+    color: get(tokens, 'extend.semanticColors.base.fg.dark', 'white'),
     caretColor: 'white',
   },
 
@@ -77,8 +79,11 @@ export const defaultTheme: ThemeStyles = {
   '&dark .cm-cursor, &dark .cm-dropCursor': {
     borderLeft: '2px solid white',
   },
-  '.cm-placeholder': {
-    fontWeight: 100,
+  '&light .cm-placeholder': {
+    color: get(tokens, 'extend.semanticColors.description.light', 'rgba(0,0,0,.2)'),
+  },
+  '&dark .cm-placeholder': {
+    color: get(tokens, 'extend.semanticColors.description.dark', 'rgba(255,255,255,.2)'),
   },
 
   //
@@ -86,11 +91,9 @@ export const defaultTheme: ThemeStyles = {
   //
   '.cm-line': {
     paddingInline: 0,
-    // TODO(burdon): Other values leave gaps between lines when highlighted.
-    // lineHeight: 'normal',
   },
   '.cm-activeLine': {
-    background: 'inherit',
+    background: 'transparent',
   },
 
   //

package/dist/types/src/components/TextEditor/comments.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"comments.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,UAAU,EAAU,MAAM,kBAAkB,CAAC;AAG3D,OAAO,KAAwD,MAAM,OAAO,CAAC;AA6M7E,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;;;;;mBAoHe,UAAU;;AAJ3B,wBAKE;AAWF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC"}