@dxos/ui-editor 0.0.0 → 0.8.4-main.05e74ebcff

package/src/extensions/factories.ts

@@ -17,7 +17,6 @@ import {
   keymap,
   lineNumbers,
   placeholder,
-  scrollPastEnd,
 } from '@codemirror/view';
 import { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
 import defaultsDeep from 'lodash.defaultsdeep';
@@ -27,15 +26,14 @@ import { type DocAccessor } from '@dxos/echo-db';
 import { log } from '@dxos/log';
 import { type Messenger } from '@dxos/protocols';
 import { type Identity } from '@dxos/protocols/proto/dxos/client/services';
-import { type HuePalette } from '@dxos/ui-theme';
-import { type ThemeMode } from '@dxos/ui-types';
+import { type ChromaticPalette, type ThemeMode } from '@dxos/ui-types';
 import { hexToHue, isTruthy } from '@dxos/util';
 
 import { baseTheme, createFontTheme, editorGutter } from '../styles';
-
 import { automerge } from './automerge';
 import { SpaceAwarenessProvider, awareness } from './awareness';
 import { focus } from './focus';
+import { scrollPastEnd } from './scrolling';
 
 //
 // Basic
@@ -145,6 +143,19 @@ export const createBasicExtensions = (propsProp?: BasicExtensionsOptions): Exten
     props.lineWrapping && EditorView.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
+    // `EditorState.readOnly` is advisory — CodeMirror doesn't auto-reject doc-changing
+    // transactions. Some extensions (e.g. `@codemirror/lang-markdown`'s Enter handler that
+    // continues a list) dispatch programmatic edits regardless. Drop user-initiated edits
+    // (`input` / `delete` keymap dispatches plus `undo` / `redo` from the history extension)
+    // but pass programmatic dispatches — streaming `MarkdownStream` and similar consumers
+    // depend on being able to populate the doc themselves.
+    props.readOnly &&
+      EditorState.transactionFilter.of((tr) =>
+        tr.docChanged &&
+        (tr.isUserEvent('input') || tr.isUserEvent('delete') || tr.isUserEvent('undo') || tr.isUserEvent('redo'))
+          ? []
+          : tr,
+      ),
     props.scrollPastEnd && scrollPastEnd(),
     props.tabbable && tabbable,
     props.tabSize && EditorState.tabSize.of(props.tabSize),
@@ -181,12 +192,12 @@ export const createBasicExtensions = (propsProp?: BasicExtensionsOptions): Exten
 export type ThemeExtensionsOptions = {
   monospace?: boolean;
   themeMode?: ThemeMode;
+  scrollbarThin?: boolean;
   slots?: {
     editor?: {
       className?: string;
     };
-    scroll?: {
-      // NOTE: Do not apply vertical padding to scroll container.
+    scroller?: {
       className?: string;
     };
     content?: {
@@ -198,13 +209,13 @@ export type ThemeExtensionsOptions = {
 
 export const grow: ThemeExtensionsOptions['slots'] = {
   editor: {
-    className: 'bs-full is-full',
+    className: 'h-full w-full',
   },
 } as const;
 
 export const fullWidth: ThemeExtensionsOptions['slots'] = {
   editor: {
-    className: 'is-full',
+    className: 'w-full',
   },
 } as const;
 
@@ -220,11 +231,12 @@ export const defaultStyles = {
  */
 export const createThemeExtensions = ({
   monospace,
-  themeMode,
+  scrollbarThin,
   slots: slotsProp,
   syntaxHighlighting: syntaxHighlightingProp,
+  themeMode,
 }: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, slotsProp, defaultThemeSlots);
+  const slots: NonNullable<ThemeExtensionsOptions['slots']> = defaultsDeep({}, slotsProp, defaultThemeSlots);
   return [
     baseTheme,
     EditorView.darkTheme.of(themeMode === 'dark'),
@@ -233,11 +245,16 @@ export const createThemeExtensions = ({
       syntaxHighlighting(HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
-    slots.scroll?.className &&
+    (slots.scroller?.className || scrollbarThin) &&
       ViewPlugin.fromClass(
         class {
           constructor(view: EditorView) {
-            view.scrollDOM.classList.add(...slots.scroll.className.split(/\s+/));
+            if (slots.scroller?.className) {
+              view.scrollDOM.classList.add(...slots.scroller.className.split(/\s+/));
+            }
+            if (scrollbarThin) {
+              view.scrollDOM.style.setProperty('--scrollbar-size', '4px');
+            }
           }
         },
       ),
@@ -263,7 +280,7 @@ export const createDataExtensions = <T>({ id, text, messenger, identity }: DataE
 
   if (messenger && identity) {
     const peerId = identity?.identityKey.toHex();
-    const hue = (identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0');
+    const hue = (identity?.profile?.data?.hue as ChromaticPalette | undefined) ?? hexToHue(peerId ?? '0');
     extensions.push(
       awareness(
         new SpaceAwarenessProvider({
@@ -271,8 +288,8 @@ export const createDataExtensions = <T>({ id, text, messenger, identity }: DataE
           channel: `awareness.${id}`,
           peerId: identity.identityKey.toHex(),
           info: {
-            darkColor: `var(--dx-${hue}Cursor)`,
-            lightColor: `var(--dx-${hue}Cursor)`,
+            darkColor: `var(--color-${hue}-border)`,
+            lightColor: `var(--color-${hue}-border)`,
             displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
           },
         }),

package/src/extensions/folding.ts

@@ -17,37 +17,20 @@ export const folding = (): Extension => {
       placeholderDOM: () => Domino.of('span').root,
     }),
     foldGutter({
+      // NOTE: We can't animate since the element is remounted on state change.
       markerDOM: (open) => {
         return Domino.of('div')
-          .classNames('flex bs-full justify-center items-center')
-          .children(
+          .classNames('flex h-full justify-center items-center')
+          .append(
             Domino.of('svg', Domino.SVG)
-              .classNames(mx('is-4 bs-4 cursor-pointer', open && 'rotate-90'))
-              .children(
+              .classNames(mx('w-4 h-4 cursor-pointer', open && 'rotate-90'))
+              .append(
                 Domino.of('use', Domino.SVG).attributes({
                   href: Domino.icon('ph--caret-right--regular'),
                 }),
               ),
           ).root;
       },
-      // TODO(burdon): markerDOM is called either way, defeating the animation: transition-transform duration-200
-      // domEventHandlers: {
-      //   click: (view, line: BlockInfo, event) => {
-      //     event.preventDefault();
-      //     event.stopPropagation();
-      //     const range = foldable(view.state, line.from, line.to);
-      //     if (range) {
-      //       view.dispatch({ effects: foldEffect.of(range) });
-      //       (event.target as HTMLElement)?.classList.add('rotate-90');
-      //     } else {
-      //       foldedRanges(view.state).between(line.from, line.to, (from, to) => {
-      //         view.dispatch({ effects: unfoldEffect.of({ from, to }) });
-      //         (event.target as HTMLElement)?.classList.remove('rotate-90');
-      //       });
-      //     }
-      //     return true;
-      //   },
-      // },
     }),
     EditorView.theme({
       '.cm-foldGutter': {

package/src/extensions/index.ts

@@ -4,7 +4,6 @@
 
 export * from './annotations';
 export * from './autocomplete';
-export * from './autoscroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
@@ -26,9 +25,9 @@ export * from './modes';
 export * from './outliner';
 export * from './preview';
 export * from './replacer';
-export * from './selection';
 export * from './scrolling';
+export * from './selection';
+export * from './snippets';
 export * from './state';
 export * from './submit';
 export * from './tags';
-export * from './typewriter';

package/src/extensions/markdown/action.ts

@@ -8,7 +8,6 @@ import { type Node } from '@dxos/app-graph';
 import { type MenuActionProperties } from '@dxos/ui-types';
 
 import { createComment } from '../comments';
-
 import {
   Inline,
   List,

package/src/extensions/markdown/bundle.ts

@@ -6,8 +6,7 @@ import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { jsonLanguage } from '@codemirror/lang-json';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { xml } from '@codemirror/lang-xml';
-import { LanguageDescription, syntaxHighlighting } from '@codemirror/language';
+import { type LanguageDescription, foldNodeProp, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
@@ -18,6 +17,8 @@ import { isTruthy } from '@dxos/util';
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
 export type MarkdownBundleOptions = {
+  /** Additional fenced-code languages prepended to the standard language-data list. */
+  codeLanguages?: LanguageDescription[];
   extensions?: MarkdownConfig[];
   indentWithTab?: boolean;
   setextHeading?: boolean;
@@ -45,8 +46,9 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       base: markdownLanguage,
 
       // Languages for syntax highlighting fenced code blocks.
+      // Caller-supplied languages are checked first so they can override defaults.
       defaultCodeLanguage: jsonLanguage,
-      codeLanguages: languages,
+      codeLanguages: [...(options.codeLanguages ?? []), ...languages],
 
       // Don't complete HTML tags.
       completeHTMLTags: false,
@@ -56,6 +58,10 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
         // GFM provided by default.
         markdownTagsExtensions,
         ...(options.extensions ?? defaultExtensions()),
+        // Disable folding for fenced code blocks by overriding foldNodeProp.
+        // Note: returning null from foldService does not prevent syntaxFolding fallback,
+        // so we must override the node prop directly on the FencedCode node type.
+        noFencedCodeFolding,
       ],
     }),
 
@@ -77,12 +83,20 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
   ];
 };
 
-const xmlLanguageDesc = LanguageDescription.of({
-  name: 'xml',
-  alias: ['html', 'xhtml'],
-  extensions: ['xml', 'xhtml'],
-  load: async () => xml(),
-});
+/**
+ * Disables folding for fenced code blocks.
+ *
+ * foldService cannot block folding because returning null just defers to the next service,
+ * and CodeMirror always falls back to syntaxFolding (which reads foldNodeProp).
+ * The only reliable fix is to override foldNodeProp on FencedCode to return null.
+ */
+const noFencedCodeFolding: MarkdownConfig = {
+  props: [
+    foldNodeProp.add({
+      FencedCode: () => null,
+    }),
+  ],
+};
 
 /**
  * Default customizations.

package/src/extensions/markdown/decorate.ts

@@ -8,12 +8,10 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 import { type SyntaxNodeRef } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
-import { mx } from '@dxos/ui-theme';
 
 import { type HeadingLevel, markdownTheme } from '../../styles';
 import { type RenderCallback } from '../../types';
 import { wrapWithCatch } from '../../util';
-
 import { adjustChanges } from './changes';
 import { image } from './image';
 import { bulletListIndentationWidth, formattingStyles, orderedListIndentationWidth } from './styles';
@@ -56,7 +54,6 @@ class LinkButton extends WidgetType {
     return this.url === other.url;
   }
 
-  // TODO(burdon): Create icon and link directly without react?
   override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this.render(el, { url: this.url }, view);
@@ -132,8 +129,8 @@ class TextWidget extends WidgetType {
 const hide = Decoration.replace({});
 const blockQuote = Decoration.line({ class: 'cm-blockquote' });
 const fencedCodeLine = Decoration.line({ class: 'cm-code cm-codeblock-line' });
-const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-start') });
-const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-end') });
+const fencedCodeLineFirst = Decoration.line({ class: 'cm-code cm-codeblock-line cm-codeblock-start' });
+const fencedCodeLineLast = Decoration.line({ class: 'cm-code cm-codeblock-line cm-codeblock-end' });
 const commentBlockLine = fencedCodeLine;
 const commentBlockLineFirst = fencedCodeLineFirst;
 const commentBlockLineLast = fencedCodeLineLast;
@@ -244,14 +241,14 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               headers
                 .slice(from - 1)
                 .map((level) => level?.number ?? 0)
-                .join('.') + ' ';
+                .join('.') + '). ';
 
             if (num.length) {
               atomicDecoRanges.push({
                 from: mark.from,
                 to: mark.from + len,
                 deco: Decoration.replace({
-                  widget: new TextWidget(num, markdownTheme.heading(level)),
+                  widget: new TextWidget(num, markdownTheme.heading(level).className),
                 }),
               });
             }
@@ -440,11 +437,11 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
           decoRanges.push({
             from: marks[0].to,
-            to: marks[1].from,
+            to: !editing && options.renderLinkButton ? node.to : marks[1].from,
             deco: Decoration.mark({
               tagName: 'a',
               attributes: {
-                class: 'cm-link',
+                class: options.renderLinkButton ? 'cm-link cm-link-with-button' : 'cm-link',
                 href: url,
                 rel: 'noreferrer',
                 target: '_blank',
@@ -457,7 +454,9 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
               from: marks[1].from,
               to: node.to,
               deco: options.renderLinkButton
-                ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
+                ? Decoration.replace({
+                    widget: new LinkButton(url, options.renderLinkButton),
+                  })
                 : hide,
             });
           }
@@ -527,8 +526,12 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
   }
 
   const atomicDeco = new RangeSetBuilder<Decoration>();
-  for (const { from, to, deco: d } of atomicDecoRanges) {
-    atomicDeco.add(from, to, d);
+  for (const { from, to, deco } of atomicDecoRanges) {
+    // Skip replace decorations that span line breaks (not allowed by CodeMirror plugins).
+    if (from < to && state.doc.lineAt(from).number !== state.doc.lineAt(to).number) {
+      continue;
+    }
+    atomicDeco.add(from, to, deco);
   }
 
   return {

package/src/extensions/markdown/formatting.ts

@@ -1245,20 +1245,15 @@ export const getFormatting = (state: EditorState): Formatting => {
 };
 
 /**
- * Hook provides an extension to compute the current formatting state.
+ * Extension to compute and publish the current formatting state.
+ * @param onStateChange - Callback invoked with the current formatting state when the editor state changes.
+ * @param delay - Debounce/throttle delay in ms.
  */
-export const formattingListener = (stateProvider: () => Formatting | undefined, delay = 100): Extension => {
+export const formattingListener = (onStateChange: (state: Formatting) => void, delay = 100): Extension => {
   return EditorView.updateListener.of(
     debounceAndThrottle((update: ViewUpdate) => {
       if (update.docChanged || update.selectionSet) {
-        const state = stateProvider();
-        if (!state) {
-          return;
-        }
-
-        Object.entries(getFormatting(update.state)).forEach(([key, active]) => {
-          state[key as keyof Formatting] = active as any;
-        });
+        onStateChange(getFormatting(update.state));
       }
     }, delay),
   );

package/src/extensions/markdown/highlight.ts

@@ -145,13 +145,21 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
         class: 'font-mono',
       },
 
-      // Headings.
-      { tag: tags.heading1, class: markdownTheme.heading(1) },
-      { tag: tags.heading2, class: markdownTheme.heading(2) },
-      { tag: tags.heading3, class: markdownTheme.heading(3) },
-      { tag: tags.heading4, class: markdownTheme.heading(4) },
-      { tag: tags.heading5, class: markdownTheme.heading(5) },
-      { tag: tags.heading6, class: markdownTheme.heading(6) },
+      // Headings — use CSS properties only (no class:) so CodeMirror generates scoped CSS via
+      // StyleModule that overrides vscodeDarkStyle's t.heading rule. When class: is present,
+      // HighlightStyle silently ignores all other CSS properties (they're mutually exclusive).
+      // Font sizes use Tailwind v4 CSS variables so nothing is hardcoded.
+      {
+        tag: tags.heading,
+        color: 'var(--color-cm-heading) !important',
+        fontWeight: '300',
+      },
+      { tag: tags.heading1, ...markdownTheme.heading(1) },
+      { tag: tags.heading2, ...markdownTheme.heading(2) },
+      { tag: tags.heading3, ...markdownTheme.heading(3) },
+      { tag: tags.heading4, ...markdownTheme.heading(4) },
+      { tag: tags.heading5, ...markdownTheme.heading(5) },
+      { tag: tags.heading6, ...markdownTheme.heading(6) },
 
       // Emphasis.
       { tag: tags.emphasis, class: 'italic' },

package/src/extensions/markdown/link.ts

@@ -12,39 +12,33 @@ import { tooltipContent } from '@dxos/ui-theme';
 import { type RenderCallback } from '../../types';
 
 export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
-  return hoverTooltip(
-    (view, pos, side) => {
-      const syntax = syntaxTree(view.state).resolveInner(pos, side);
-      let link = null;
-      for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
-        link = node.name === 'Link' ? node : null;
-      }
+  return hoverTooltip((view, pos, side) => {
+    const syntax = syntaxTree(view.state).resolveInner(pos, side);
+    let link = null;
+    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 url = link && link.getChild('URL');
+    if (!url || !link) {
+      return null;
+    }
 
-      const urlText = view.state.sliceDoc(url.from, url.to);
-      if (urlText.startsWith('dxn')) {
-        return null;
-      }
-      return {
-        pos: link.from,
-        end: link.to,
-        // NOTE: Forcing above causes the tooltip to flicker.
-        // above: true,
-        create: () => {
-          const el = document.createElement('div');
-          el.className = tooltipContent({});
-          renderTooltip(el, { url: urlText }, view);
-          return { dom: el, offset: { x: 0, y: 4 } };
-        },
-      };
-    },
-    {
-      // NOTE: 0 = default of 300ms.
-      hoverTime: 1,
-    },
-  );
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    if (urlText.startsWith('dxn')) {
+      return null;
+    }
+
+    return {
+      pos: link.from,
+      end: link.to,
+      above: true,
+      create: () => {
+        const el = document.createElement('div');
+        el.className = tooltipContent({});
+        renderTooltip(el, { url: urlText }, view);
+        return { dom: el, offset: { x: 0, y: 4 } };
+      },
+    };
+  });
 };

package/src/extensions/markdown/parser.test.ts

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-// @ts-ignore
 import { testTree } from '@lezer/generator/test';
 import { parser } from '@lezer/markdown';
 import { describe, test } from 'vitest';

package/src/extensions/markdown/styles.ts

@@ -18,7 +18,7 @@ export const formattingStyles = EditorView.theme({
     width: '100%',
     height: '0',
     verticalAlign: 'middle',
-    borderTop: '1px solid var(--dx-cmSeparator)',
+    borderTop: '1px solid var(--color-cm-separator)',
     opacity: 0.5,
   },
 
@@ -43,20 +43,45 @@ export const formattingStyles = EditorView.theme({
    * Blockquote.
    */
   '& .cm-blockquote': {
-    background: 'var(--dx-cmCodeblock)',
-    borderLeft: '2px solid var(--dx-cmSeparator)',
+    background: 'var(--color-cm-codeblock)',
+    borderLeft: '2px solid var(--color-cm-separator)',
     paddingLeft: '1rem',
-    margin: '0',
+    margin: 0,
   },
 
   /**
    * Code and codeblocks.
    */
+  '& code': {
+    fontFamily: fontMono,
+    color: 'var(--color-cm-code)',
+    whiteSpace: 'nowrap',
+  },
   '& .cm-code': {
     fontFamily: fontMono,
+    color: 'var(--color-cm-code)',
+  },
+  // Inline code spans (triggered by backticks) use `cm-code-inline` + `font-mono`.
+  // Different monospace font metrics can slightly overflow the fixed CodeMirror line box,
+  // so constrain them to the target 24px height.
+  '& .cm-code-inline': {
+    fontFamily: fontMono,
+    height: '24px',
+    // display: 'inline-flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    color: 'var(--color-cm-code-inline)',
+  },
+  '& .cm-code-mark': {
+    fontFamily: fontMono,
+    height: '24px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    overflow: 'hidden',
   },
   '& .cm-codeblock-line': {
-    background: 'var(--dx-cmCodeblock)',
+    background: 'var(--color-cm-codeblock)',
     paddingInline: '1rem !important',
   },
   '& .cm-codeblock-start': {
@@ -87,16 +112,24 @@ export const formattingStyles = EditorView.theme({
    */
   '.cm-table *': {
     fontFamily: fontMono,
+    lineHeight: 1.5,
     textDecoration: 'none !important',
   },
   '.cm-table-head': {
     padding: '2px 16px 2px 0px',
+    overflowWrap: 'break-word',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'keep-all',
     textAlign: 'left',
-    borderBottom: '1px solid var(--dx-cmSeparator)',
-    color: 'var(--dx-subdued)',
+    color: 'var(--color-subdued)',
+    borderBottom: '1px solid var(--color-cm-separator)',
   },
   '.cm-table-cell': {
     padding: '2px 16px 2px 0px',
+    overflowWrap: 'break-word',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'keep-all',
+    verticalAlign: 'top',
   },
 
   /**
@@ -113,12 +146,12 @@ export const formattingStyles = EditorView.theme({
   },
   '.cm-image-with-loader': {
     display: 'block',
-    opacity: '0',
+    opacity: 0,
     transitionDuration: '350ms',
     transitionProperty: 'opacity',
   },
   '.cm-image-with-loader.cm-loaded-image': {
-    opacity: '1',
+    opacity: 1,
   },
   '.cm-image-wrapper': {
     'grid-template-columns': '1fr',

package/src/extensions/markdown/table.ts

@@ -107,6 +107,28 @@ const update = (state: EditorState, _options: TableOptions) => {
   return builder.finish();
 };
 
+/** Renders cell text into el, processing inline markdown (bold, italic, code). */
+const renderCellContent = (el: HTMLElement, text: string): void => {
+  const parts = text.split(/(`[^`\n]+`|\*\*[^*\n]+\*\*|__[^_\n]+__|\*[^*\n]+\*|_[^_\n]+_)/);
+  for (const part of parts) {
+    if (part.length > 2 && part.startsWith('`') && part.endsWith('`')) {
+      const code = document.createElement('code');
+      code.textContent = part.slice(1, -1);
+      el.appendChild(code);
+    } else if ((part.startsWith('**') && part.endsWith('**')) || (part.startsWith('__') && part.endsWith('__'))) {
+      const strong = document.createElement('strong');
+      strong.textContent = part.slice(2, -2);
+      el.appendChild(strong);
+    } else if ((part.startsWith('*') && part.endsWith('*')) || (part.startsWith('_') && part.endsWith('_'))) {
+      const em = document.createElement('em');
+      em.textContent = part.slice(1, -1);
+      el.appendChild(em);
+    } else {
+      el.appendChild(document.createTextNode(part));
+    }
+  }
+};
+
 class TableWidget extends WidgetType {
   constructor(readonly _table: Table) {
     super();
@@ -132,7 +154,7 @@ class TableWidget extends WidgetType {
     this._table.header?.forEach((cell) => {
       const th = document.createElement('th');
       th.setAttribute('class', 'cm-table-head');
-      tr.appendChild(th).textContent = cell;
+      renderCellContent(tr.appendChild(th), cell);
     });
 
     const body = table.appendChild(document.createElement('tbody'));
@@ -141,7 +163,7 @@ class TableWidget extends WidgetType {
       row.forEach((cell) => {
         const td = document.createElement('td');
         td.setAttribute('class', 'cm-table-cell');
-        tr.appendChild(td).textContent = cell;
+        renderCellContent(tr.appendChild(td), cell);
       });
     });
 

package/src/extensions/outliner/outliner.test.ts

@@ -8,7 +8,6 @@ import { describe, test } from 'vitest';
 
 import { join } from '../../util';
 import { createMarkdownExtensions } from '../markdown';
-
 import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
 import { listItemToString, outlinerTree, treeFacet } from './tree';