@dxos/react-ui-editor 0.6.11-staging.e6894a4 → 0.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.6.11-staging.e6894a4",
+  "version": "0.6.11",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -47,19 +47,19 @@
     "lodash.sortby": "^4.7.0",
     "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.6.11-staging.e6894a4",
-    "@dxos/automerge": "0.6.11-staging.e6894a4",
-    "@dxos/debug": "0.6.11-staging.e6894a4",
-    "@dxos/context": "0.6.11-staging.e6894a4",
-    "@dxos/display-name": "0.6.11-staging.e6894a4",
-    "@dxos/echo-schema": "0.6.11-staging.e6894a4",
-    "@dxos/invariant": "0.6.11-staging.e6894a4",
-    "@dxos/log": "0.6.11-staging.e6894a4",
-    "@dxos/protocols": "0.6.11-staging.e6894a4",
-    "@dxos/react-async": "0.6.11-staging.e6894a4",
-    "@dxos/util": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-theme": "0.6.11-staging.e6894a4"
+    "@dxos/async": "0.6.11",
+    "@dxos/automerge": "0.6.11",
+    "@dxos/context": "0.6.11",
+    "@dxos/debug": "0.6.11",
+    "@dxos/display-name": "0.6.11",
+    "@dxos/echo-schema": "0.6.11",
+    "@dxos/log": "0.6.11",
+    "@dxos/react-ui": "0.6.11",
+    "@dxos/react-ui-theme": "0.6.11",
+    "@dxos/protocols": "0.6.11",
+    "@dxos/react-hooks": "0.6.11",
+    "@dxos/util": "0.6.11",
+    "@dxos/invariant": "0.6.11"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -82,21 +82,21 @@
     "vite": "^5.3.4",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/config": "0.6.11-staging.e6894a4",
-    "@dxos/automerge": "0.6.11-staging.e6894a4",
-    "@dxos/echo-signals": "0.6.11-staging.e6894a4",
-    "@dxos/echo-typegen": "0.6.11-staging.e6894a4",
-    "@dxos/keyboard": "0.6.11-staging.e6894a4",
-    "@dxos/random": "0.6.11-staging.e6894a4",
-    "@dxos/storybook-utils": "0.6.11-staging.e6894a4",
-    "@dxos/react-client": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui": "0.6.11-staging.e6894a4"
+    "@dxos/automerge": "0.6.11",
+    "@dxos/config": "0.6.11",
+    "@dxos/echo-signals": "0.6.11",
+    "@dxos/echo-typegen": "0.6.11",
+    "@dxos/keyboard": "0.6.11",
+    "@dxos/random": "0.6.11",
+    "@dxos/react-client": "0.6.11",
+    "@dxos/react-ui": "0.6.11",
+    "@dxos/storybook-utils": "0.6.11"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-client": "0.6.11-staging.e6894a4"
+    "@dxos/react-client": "0.6.11"
   },
   "publishConfig": {
     "access": "public"

package/src/InputMode.stories.tsx

@@ -6,9 +6,9 @@ import '@dxos-theme';
 
 import React, { useState } from 'react';
 
-import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dxos/react-ui';
+import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-ui';
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
-import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './components';
 import {
@@ -39,7 +39,7 @@ const Story = ({ autoFocus, initialValue, placeholder, readonly }: StoryProps) =
         editorInputMode ? InputModeExtensions[editorInputMode] : [],
         createBasicExtensions({ placeholder, lineWrapping: true, readonly }),
         createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         decorateMarkdown(),
         formattingKeymap(),
         trackFormatting,
@@ -54,12 +54,10 @@ const Story = ({ autoFocus, initialValue, placeholder, readonly }: StoryProps) =
   //  Also not sure if view is even guaranteed to exist at this point.
   return (
     <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      <Tooltip.Provider>
-        <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
-          <Toolbar.Markdown />
-          <EditorInputModeToolbar editorInputMode={editorInputMode} setEditorInputMode={setEditorInputMode} />
-        </Toolbar.Root>
-      </Tooltip.Provider>
+      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+        <Toolbar.Markdown />
+        <EditorInputModeToolbar editorInputMode={editorInputMode} setEditorInputMode={setEditorInputMode} />
+      </Toolbar.Root>
 
       <div role='none' className='grow overflow-hidden'>
         <div className={attentionSurface} ref={parentRef} />
@@ -100,7 +98,7 @@ const EditorInputModeToolbar = ({
 
 export default {
   title: 'react-ui-editor/InputMode',
-  decorators: [withTheme, withFullscreen()],
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },
   render: Story,
 };

package/src/TextEditor.stories.tsx

@@ -3,7 +3,7 @@
 //
 
 import '@dxos-theme';
-
+import { javascript } from '@codemirror/lang-javascript';
 import { markdown } from '@codemirror/lang-markdown';
 import { openSearchPanel } from '@codemirror/search';
 import { type Extension } from '@codemirror/state';
@@ -22,9 +22,9 @@ import { faker } from '@dxos/random';
 import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
 import { Button, DensityProvider, Input, useThemeContext } from '@dxos/react-ui';
 import { baseSurface, mx, getSize } from '@dxos/react-ui-theme';
-import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { editorContent, editorGutter } from './defaults';
+import { editorContent, editorGutter, editorMonospace } from './defaults';
 import {
   InputModeExtensions,
   annotations,
@@ -68,6 +68,15 @@ const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
 const img = '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)';
 
+const code = str(
+  '// Code',
+  'const Component = () => {',
+  '  const x = 100;',
+  '',
+  '  return () => <div>Test</div>;',
+  '};',
+);
+
 const content = {
   tasks: str(
     //
@@ -111,22 +120,9 @@ const content = {
     '',
   ),
 
-  code: str(
-    '### Code',
-    '',
-    '```bash',
-    '$ ls -las',
-    '```',
-    '',
-    '```tsx',
-    'const Component = () => {',
-    '  const x = 100;',
-    '',
-    '  return () => <div>Test</div>;',
-    '};',
-    '```',
-    '',
-  ),
+  typescript: code,
+
+  codeblocks: str('### Code', '', '```bash', '$ ls -las', '```', '', '```tsx', code, '```', ''),
 
   comment: str('<!--', 'A comment', '-->', '', 'No comment.', 'Partial comment. <!-- comment. -->'),
 
@@ -195,12 +191,9 @@ const text = str(
   content.tasks,
   content.numbered,
 
-  '---',
-  content.headings,
-
   '---',
   '## Misc',
-  content.code,
+  content.codeblocks,
   content.table,
   content.image,
   content.footer,
@@ -261,12 +254,15 @@ const renderLinkButton = (el: Element, url: string) => {
 // Story
 //
 
+type DebugMode = 'syntax' | 'raw';
+
 type StoryProps = {
   id?: string;
-  debug?: boolean;
+  debug?: DebugMode;
   text?: string;
   readonly?: boolean;
   placeholder?: string;
+  lineNumbers?: boolean;
   onReady?: (view: EditorView) => void;
 } & Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'>;
 
@@ -279,6 +275,7 @@ const Story = ({
   placeholder = 'New document.',
   scrollTo,
   selection,
+  lineNumbers,
   onReady,
 }: StoryProps) => {
   const [object] = useState(createEchoObject(create(Expando, { content: text ?? '' })));
@@ -290,16 +287,18 @@ const Story = ({
       initialValue: text,
       extensions: [
         createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-        createBasicExtensions({ readonly, placeholder, scrollPastEnd: true }),
+        createBasicExtensions({ readonly, placeholder, lineNumbers, scrollPastEnd: true }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({
           themeMode,
+          syntaxHighlighting: true,
           slots: {
             content: {
               className: editorContent,
             },
           },
         }),
+        editorGutter,
         extensions || [],
         debug ? debugTree(setTree) : [],
       ],
@@ -318,7 +317,12 @@ const Story = ({
   return (
     <div className='flex w-full'>
       <div role='none' className='flex w-full overflow-hidden' ref={parentRef} {...focusAttributes} />
-      {debug && (
+      {debug === 'raw' && (
+        <div className='w-[800px] border-l border-separator overflow-auto'>
+          <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>{view?.state.doc.toString()}</pre>
+        </div>
+      )}
+      {debug === 'syntax' && (
         <div className='w-[800px] border-l border-separator overflow-auto'>
           <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>
             {JSON.stringify(tree, null, 2)}
@@ -331,7 +335,7 @@ const Story = ({
 
 export default {
   title: 'react-ui-editor/TextEditor',
-  decorators: [withTheme, withFullscreen()],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
   render: Story,
   parameters: { translations, layout: 'fullscreen' },
 };
@@ -345,8 +349,24 @@ const defaultExtensions: Extension[] = [
   linkTooltip(renderLinkTooltip),
 ];
 
+const allExtensions: Extension[] = [
+  autocomplete({
+    onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+  }),
+  decorateMarkdown({ numberedHeadings: { from: 2, to: 4 }, renderLinkButton, selectionChangeDelay: 100 }),
+  formattingKeymap(),
+  linkTooltip(renderLinkTooltip),
+  image(),
+  table(),
+  folding(),
+];
+
 export const Default = {
-  render: () => <Story text={text} extensions={defaultExtensions} selection={{ anchor: 99, head: 110 }} />,
+  render: () => <Story text={text} extensions={defaultExtensions} />,
+};
+
+export const Everything = {
+  render: () => <Story text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
 };
 
 export const Empty = {
@@ -390,7 +410,7 @@ const headings = str(
 const global = new Map<string, EditorSelectionState>();
 
 export const Folding = {
-  render: () => <Story text={text} extensions={[editorGutter, folding()]} />,
+  render: () => <Story text={text} extensions={[folding()]} />,
 };
 
 export const Scrolling = {
@@ -445,7 +465,7 @@ export const Image = {
 };
 
 export const Code = {
-  render: () => <Story text={str(content.code, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <Story text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const Lists = {
@@ -466,7 +486,7 @@ export const OrderedList = {
 };
 
 export const TaskList = {
-  render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug />,
+  render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw' />,
 };
 
 export const Table = {
@@ -486,6 +506,12 @@ export const CommentedOut = {
   ),
 };
 
+export const Typescript = {
+  render: () => (
+    <Story text={content.typescript} lineNumbers extensions={[editorMonospace, javascript({ typescript: true })]} />
+  ),
+};
+
 //
 // Custom
 //
@@ -669,7 +695,7 @@ export const Typewriter = {
 export const Blast = {
   render: () => (
     <Story
-      text={str('# Blast', '', content.paragraphs, content.code, content.paragraphs)}
+      text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
         typewriter({ items: typewriterItems }),
         blast(

package/src/defaults.ts

@@ -8,7 +8,9 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { fontMono } from './styles';
 
-const margin = '!mt-[16px]';
+// TODO(burdon): Define scrollMargins for fixed gutter?
+//  https://codemirror.net/docs/ref/#view.EditorView^scrollMargins
+const margin = '!mt-[1rem]';
 
 /**
  * CodeMirror content width.
@@ -20,16 +22,16 @@ export const editorContent = mx(margin, '!mli-auto w-full max-w-[min(50rem,100%-
 /**
  * Margin for numbers.
  */
-export const editorFullWidth = mx(margin, '!ml-[3rem]');
+export const editorFullWidth = mx(margin);
 
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
-// TODO(burdon): Define scrollMargins for fixed gutter.
 export const editorGutter = EditorView.theme({
   // Match margin from content.
   '.cm-gutters': {
     marginTop: '16px',
+    paddingRight: '1rem',
   },
 });
 

package/src/extensions/automerge/automerge.stories.tsx

@@ -10,12 +10,11 @@ import React, { useEffect, useState } from 'react';
 import { Repo } from '@dxos/automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { Expando, create } from '@dxos/echo-schema';
-import { type PublicKey } from '@dxos/keys';
 import { Filter, DocAccessor, createDocAccessor, useSpace, useQuery, type Space } from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
-import { ClientRepeater } from '@dxos/react-client/testing';
+import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { editorContent } from '../../defaults';
 import { useTextEditor } from '../../hooks';
@@ -95,12 +94,12 @@ const Story = () => {
 export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
   render: () => <Story />,
-  parameters: { translations, layout: 'fullscreen' },
+  parameters: { translations },
 };
 
-const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
+const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();

package/src/extensions/factories.ts

@@ -4,9 +4,10 @@
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
-import { bracketMatching } from '@codemirror/language';
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import {
   EditorView,
   type KeyBinding,
@@ -131,6 +132,7 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
 export type ThemeExtensionsOptions = {
   themeMode?: ThemeMode;
   styles?: ThemeStyles;
+  syntaxHighlighting?: boolean;
   slots?: {
     editor?: {
       className?: string;
@@ -147,13 +149,22 @@ const defaultThemeSlots = {
   },
 };
 
-// TODO(burdon): Should only have one baseTheme?
-// https://codemirror.net/examples/styling
-export const createThemeExtensions = ({ themeMode, styles, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
+/**
+ * https://codemirror.net/examples/styling
+ */
+export const createThemeExtensions = ({
+  themeMode,
+  styles,
+  syntaxHighlighting: _syntaxHighlighting,
+  slots: _slots,
+}: ThemeExtensionsOptions = {}): Extension => {
   const slots = defaultsDeep({}, _slots, defaultThemeSlots);
   return [
     EditorView.darkTheme.of(themeMode === 'dark'),
     EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
+    // https://github.com/codemirror/theme-one-dark
+    _syntaxHighlighting &&
+      (themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
   ].filter(isNotFalsy);

package/src/extensions/folding.tsx

@@ -4,28 +4,41 @@
 
 import { codeFolding, foldGutter } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import React from 'react';
 
 import { Icon } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { renderRoot } from './util';
+import { createElement, renderRoot } from './util';
 
 export type FoldingOptions = {};
 
 /**
  * https://codemirror.net/examples/gutter
  */
+// TODO(burdon): Remember folding state.
 export const folding = (_props: FoldingOptions = {}): Extension => [
   codeFolding({
-    placeholderDOM: () => document.createElement('div'),
+    placeholderDOM: () => {
+      return document.createElement('span'); // Collapse content.
+    },
   }),
   foldGutter({
     markerDOM: (open) => {
       return renderRoot(
-        document.createElement('div'),
-        <Icon icon='ph--caret-right--regular' classNames={[getSize(3), 'm-2 cursor-pointer', open && 'rotate-90']} />,
+        createElement('div', { className: 'flex h-full items-center' }),
+        <Icon icon='ph--caret-right--regular' classNames={[getSize(3), 'mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },
   }),
+  EditorView.theme({
+    '.cm-foldGutter': {
+      opacity: 0.3,
+      transition: 'opacity 0.3s',
+    },
+    '.cm-foldGutter:hover': {
+      opacity: 1,
+    },
+  }),
 ];

package/src/extensions/markdown/bundle.ts

@@ -5,11 +5,10 @@
 import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { lintKeymap } from '@codemirror/lint';
 import { type Extension } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { keymap } from '@codemirror/view';
 
 import { type ThemeMode } from '@dxos/react-ui';
@@ -54,9 +53,6 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
       ],
     }),
 
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
 

package/src/extensions/markdown/decorate.ts

@@ -17,6 +17,19 @@ import { table } from './table';
 import { theme, type HeadingLevel } from '../../styles';
 import { wrapWithCatch } from '../util';
 
+/**
+ * Unicode characters.
+ * NOTE: Depends on font.
+ * https://www.compart.com/en/unicode (nice resource).
+ * https://en.wikipedia.org/wiki/List_of_Unicode_characters
+ */
+const Unicode = {
+  emDash: '\u2014',
+  bullet: '\u2022',
+  bulletSmall: '\u2219',
+  bulletSquare: '\u2b1d',
+};
+
 //
 // Widgets
 //
@@ -67,12 +80,18 @@ class CheckboxWidget extends WidgetType {
       input.setAttribute('disabled', 'true');
     } else {
       input.onmousedown = (event: Event) => {
-        const pos = view.posAtDOM(span);
-        const text = view.state.sliceDoc(pos, pos + 3);
-        if (text === (this._checked ? '[x]' : '[ ]')) {
+        // Could be beginning of line.
+        const line = view.state.doc.lineAt(view.posAtDOM(span));
+        const text = view.state.sliceDoc(line.from, line.to);
+        const match = text.match(/^\s*- (\[[xX ]]).*/);
+        if (match) {
+          const [, checked] = match;
+          const pos = line.from + text.indexOf(checked);
+          this._checked = checked !== '[ ]';
           view.dispatch({
             changes: { from: pos + 1, to: pos + 2, insert: this._checked ? ' ' : 'x' },
           });
+
           event.preventDefault();
         }
       };
@@ -246,17 +265,20 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       }
 
       case 'ListItem': {
+        const line = state.doc.lineAt(node.from);
+
         // Set indentation.
         const list = getCurrentListLevel();
         const width = list.type === 'OrderedList' ? orderedListIndentationWidth : bulletListIndentationWidth;
         const offset = ((list.level ?? 0) + 1) * width;
-        const line = state.doc.lineAt(node.from);
         if (node.from === line.to - 1) {
           // Abort if only the hyphen is typed.
           return false;
         }
 
-        // Add line decoration for continuation indent.
+        // Add line decoration for the continuation indent.
+        // TODO(burdon): Bug if indentation is more than one indentation unit (e.g., 4 spaces) from the previous line.
+
         deco.add(
           line.from,
           line.from,
@@ -268,32 +290,26 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           }),
         );
 
-        // Remove indentation spaces.
-        const text = state.doc.sliceString(line.from, node.to);
-        const whitespace = text.match(/^ */)?.[0].length ?? 0;
-        if (whitespace) {
-          atomicDeco.add(line.from, line.from + whitespace, hide);
-        }
-
         break;
       }
 
       case 'ListMark': {
+        const list = getCurrentListLevel();
+
         // Look-ahead for task marker.
-        // NOTE: Requires space to exist (otherwise processes as a link).
+        // NOTE: Requires space to exist (otherwise the text is parsed as the start of a link).
         const next = tree.resolve(node.to + 1, 1);
         if (next?.name === 'TaskMarker') {
-          atomicDeco.add(node.from, node.to + 1, hide);
           break;
         }
 
-        const list = getCurrentListLevel();
-
         // TODO(burdon): Option to make hierarchical; or a), i), etc.
-        const label = list.type === 'OrderedList' ? `${++list.number}.` : '•';
+        const label = list.type === 'OrderedList' ? `${++list.number}.` : Unicode.bulletSmall;
+        const line = state.doc.lineAt(node.from);
+        const to = state.doc.sliceString(node.to, node.to + 1) === ' ' ? node.to + 1 : node.to;
         atomicDeco.add(
-          node.from,
-          node.to + 1,
+          line.from,
+          to,
           Decoration.replace({
             widget: new TextWidget(
               label,
@@ -305,10 +321,11 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       }
 
       case 'TaskMarker': {
-        if (!editingRange(state, node, focus)) {
-          const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
-          atomicDeco.add(node.from, node.to + 1, checked ? checkedTask : uncheckedTask);
-        }
+        const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
+        // Check if the next character is a space and if so, include it in the replacement.
+        const line = state.doc.lineAt(node.from);
+        const to = state.doc.sliceString(node.to, node.to + 1) === ' ' ? node.to + 1 : node.to;
+        atomicDeco.add(line.from, to, checked ? checkedTask : uncheckedTask);
         break;
       }
 

package/src/extensions/util/react.tsx

@@ -8,6 +8,21 @@ import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from '@dxos/react-ui';
 import { defaultTx } from '@dxos/react-ui-theme';
 
+export type ElementOptions = {
+  className?: string;
+};
+
+export const createElement = (tag: string, options?: ElementOptions, children?: ReactNode): HTMLElement => {
+  const el = document.createElement(tag);
+  if (options?.className) {
+    el.className = options.className;
+  }
+  if (children) {
+    el.append(...(Array.isArray(children) ? children : [children]));
+  }
+  return el;
+};
+
 export const renderRoot = (root: HTMLElement, node: ReactNode): HTMLElement => {
   createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
   return root;