@dxos/react-ui-editor 0.6.8-main.046e6cf → 0.6.8-staging.63bcb81

package/dist/types/src/hooks/useTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAK5D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,GAAG;QACtD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,YAAY,CAAC,GAAG;IACrF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,WACjB,aAAa,CAAC,kBAAkB,CAAC,SAClC,cAAc,KACnB,aA6HF,CAAC"}
+{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,EAA6D,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,GAAG;QACtD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC,GAAG;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,WACjB,aAAa,CAAC,kBAAkB,CAAC,SAClC,cAAc,KACnB,aAwHF,CAAC"}

package/dist/types/src/index.d.ts

@@ -3,6 +3,7 @@ export { type Extension, type EditorState } from '@codemirror/state';
 export { type EditorView, keymap } from '@codemirror/view';
 export { tags } from '@lezer/highlight';
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
+export { getToken } from './styles';
 export * from './components';
 export * from './defaults';
 export * from './extensions';

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/types/src/styles/markdown.d.ts

@@ -1,19 +1,9 @@
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export declare const heading: (level: HeadingLevel) => string;
-export declare const text = "text-neutral-800 dark:text-neutral-200";
-export declare const light = "text-neutral-200 dark:text-neutral-800";
-export declare const mark: string;
-export declare const paragraph = "mlb-1";
-export declare const bold = "font-bold";
-export declare const italic = "italic";
-export declare const strikethrough = "line-through";
-export declare const code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
-export declare const codeMark = "font-mono text-primary-500";
-export declare const codeBlock = "mlb-2 font-mono bg-neutral-500/10 p-3 rounded";
-export declare const inlineUrl: string;
-export declare const blockquote: string;
-export declare const horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800";
-export declare const unorderedList = "mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2";
-export declare const orderedList = "mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[counters(section,_\".\")_\"._\"] [counter-reset:section] [&>li:before]:mlb-1";
-export declare const listItem = "contents before:[counter-increment:section]";
+export declare const theme: {
+    mark: string;
+    code: string;
+    codeMark: string;
+    blockquote: string;
+    heading: (level: HeadingLevel) => string;
+};
 //# sourceMappingURL=markdown.d.ts.map

package/dist/types/src/styles/markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAcjD,eAAO,MAAM,OAAO,UAAW,YAAY,WAE1C,CAAC;AAEF,eAAO,MAAM,IAAI,2CAA2C,CAAC;AAC7D,eAAO,MAAM,KAAK,2CAA2C,CAAC;AAE9D,eAAO,MAAM,IAAI,QAAmE,CAAC;AAErF,eAAO,MAAM,SAAS,UAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,cAAc,CAAC;AAChC,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C,eAAO,MAAM,IAAI,mEAAmE,CAAC;AACrF,eAAO,MAAM,QAAQ,+BAA+B,CAAC;AACrD,eAAO,MAAM,SAAS,kDAAkD,CAAC;AAEzE,eAAO,MAAM,SAAS,QAAmB,CAAC;AAE1C,eAAO,MAAM,UAAU,QAAwF,CAAC;AAEhH,eAAO,MAAM,cAAc,0GAC8E,CAAC;AAG1G,eAAO,MAAM,aAAa,wHAC6F,CAAC;AACxH,eAAO,MAAM,WAAW,+IACkH,CAAC;AAE3I,eAAO,MAAM,QAAQ,gDAAgD,CAAC"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAcjD,eAAO,MAAM,KAAK;;;;;qBAMC,YAAY;CAG9B,CAAC"}

package/dist/types/src/styles/theme.d.ts

@@ -1,4 +1,5 @@
-import { type ThemeStyles } from './tokens';
+import { type StyleSpec } from 'style-mod';
+export type ThemeStyles = Record<string, StyleSpec>;
 /**
  * Minimal styles.
  * https://codemirror.net/examples/styling
@@ -9,6 +10,7 @@ import { type ThemeStyles } from './tokens';
  *
  * Main layout:
  * https://codemirror.net/examples/styling
+ * https://codemirror.net/docs/guide (DOM Structure).
  *
  * <div class="cm-editor [cm-focused] [generated classes]">
  *   <div class="cm-scroller">

package/dist/types/src/styles/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,UAAU,CAAC;AAKpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,YAAY,EAAE,WAkQ1B,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAMpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,YAAY,EAAE,WAmQ1B,CAAC"}

package/dist/types/src/styles/tokens.d.ts

@@ -1,8 +1,6 @@
-import type { StyleSpec } from 'style-mod';
-import { type TailwindConfig } from '@dxos/react-ui-theme';
-export type ThemeStyles = {
-    [selector: string]: StyleSpec;
-};
-export declare const tokens: TailwindConfig['theme'];
-export declare const getToken: (path: string, defaultValue?: any) => any;
+/**
+ * @deprecated
+ * Replace with CSS vars.
+ */
+export declare const getToken: (path: string, defaultValue?: string | string[]) => string;
 //# sourceMappingURL=tokens.d.ts.map

package/dist/types/src/styles/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3E,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,cAAc,CAAC,OAAO,CAA4B,CAAC;AAExE,eAAO,MAAM,QAAQ,SAAU,MAAM,iBAAgB,GAAG,QAAgD,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens.ts"],"names":[],"mappings":"AAUA;;;GAGG;AACH,eAAO,MAAM,QAAQ,SAAU,MAAM,iBAAiB,MAAM,GAAG,MAAM,EAAE,KAAG,MAGzE,CAAC"}

package/package.json

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

package/src/TextEditor.stories.tsx

@@ -17,11 +17,11 @@ import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
-import { Button, DensityProvider, Input, ThemeProvider, useThemeContext } from '@dxos/react-ui';
-import { baseSurface, defaultTx, mx, getSize } from '@dxos/react-ui-theme';
+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 { editorContent } from './defaults';
+import { editorContent, editorGutter } from './defaults';
 import {
   InputModeExtensions,
   annotations,
@@ -47,11 +47,11 @@ import {
   table,
   typewriter,
   type CommandAction,
-  type CommandOptions,
   type Comment,
   type CommentsOptions,
-  type SelectionState,
+  type EditorSelectionState,
 } from './extensions';
+import { renderRoot } from './extensions/util';
 import { useTextEditor, type UseTextEditorProps } from './hooks';
 import translations from './translations';
 
@@ -153,17 +153,19 @@ const content = {
     ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
   ),
 
-  formatting: str('### Formatting', 'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.'),
+  formatting: str('### Formatting', '', 'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.', ''),
 
   blockquotes: str(
     '### Blockquotes',
+    '',
     '> This is a block quote.',
     '',
     '> This is a long wrapping block quote. Neque reiciendis ullam quae error labore sit, at, et, nulla, aut at nostrum omnis quas nostrum, at consectetur vitae eos asperiores non omnis ullam in beatae at vitae deserunt asperiores sapiente.',
     '',
-    '> This is',
-    '> a multi-line',
+    '> This is ...',
+    '> ... a multi-line ...',
     '> block quote.',
+    '',
   ),
 
   paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
@@ -264,7 +266,7 @@ type StoryProps = {
   text?: string;
   readonly?: boolean;
   placeholder?: string;
-} & Pick<UseTextEditorProps, 'selection' | 'extensions'>;
+} & Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'>;
 
 const Story = ({
   id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
@@ -272,6 +274,7 @@ const Story = ({
   extensions,
   readonly,
   placeholder = 'New document.',
+  scrollTo,
   selection,
 }: StoryProps) => {
   const [object] = useState(createEchoObject(create(Expando, { content: text ?? '' })));
@@ -294,6 +297,7 @@ const Story = ({
         }),
         extensions || [],
       ],
+      scrollTo,
       selection,
     }),
     [object, extensions, themeMode],
@@ -313,13 +317,25 @@ const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
-  decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100, numberedHeadings: { from: 1, to: 4 } }),
+  decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
   formattingKeymap(),
   linkTooltip(renderLinkTooltip),
 ];
 
 export const Default = {
-  render: () => <Story text={text} extensions={defaults} />,
+  render: () => <Story text={text} extensions={defaults} selection={{ anchor: 99, head: 110 }} />,
+};
+
+export const ScrollTo = {
+  render: () => {
+    // NOTE: Selection won't appear if text is reformatted.
+    const word = 'Scroll to here...';
+    const text = str('# Scroll To', longText, '', word, '', longText);
+    const idx = text.indexOf(word);
+    return (
+      <Story text={text} extensions={defaults} scrollTo={idx} selection={{ anchor: idx, head: idx + word.length }} />
+    );
+  },
 };
 
 export const Readonly = {
@@ -335,10 +351,10 @@ export const NoExtensions = {
 };
 
 export const Folding = {
-  render: () => <Story text={text} extensions={[folding()]} />,
+  render: () => <Story text={text} extensions={[editorGutter, folding()]} />,
 };
 
-const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
+const longText = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
 
 const largeWithImages = faker.helpers
   .multiple(() => [faker.lorem.paragraph({ min: 12, max: 16 }), img], { count: 20 })
@@ -355,12 +371,12 @@ export const Headings = {
   render: () => <Story text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
 };
 
-const global = new Map<string, SelectionState>();
+const global = new Map<string, EditorSelectionState>();
 
 export const Scrolling = {
   render: () => (
     <Story
-      text={str('# Large Document', '', large)}
+      text={str('# Large Document', '', longText)}
       extensions={state({
         setState: (id, state) => global.set(id, state),
         getState: (id) => global.get(id),
@@ -489,21 +505,18 @@ const CommandDialog: FC<{ onClose: (action?: CommandAction) => void }> = ({ onCl
   );
 };
 
-const renderCommandDialog: CommandOptions['onRender'] = (el, onClose) => {
-  createRoot(el).render(
-    <StrictMode>
-      <ThemeProvider tx={defaultTx}>
-        <CommandDialog onClose={onClose} />
-      </ThemeProvider>
-    </StrictMode>,
-  );
-};
-
 export const Command = {
   render: () => (
     <Story
       text={str('# Command', '')}
-      extensions={[command({ onRender: renderCommandDialog, onHint: () => 'Press / for commands.' })]}
+      extensions={[
+        command({
+          onRender: (el, onClose) => {
+            renderRoot(el, <CommandDialog onClose={onClose} />);
+          },
+          onHint: () => 'Press / for commands.',
+        }),
+      ]}
     />
   ),
 };
@@ -558,7 +571,7 @@ export const Vim = {
 };
 
 export const Annotations = {
-  render: () => <Story text={str('# Annotations', '', large)} extensions={[annotations({ match: /volup/gi })]} />,
+  render: () => <Story text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />,
 };
 
 export const DND = {

package/src/defaults.ts

@@ -4,14 +4,14 @@
 
 import { EditorView } from '@codemirror/view';
 
-export { getToken } from './styles';
+import { getToken } from './styles';
 
 /**
  * CodeMirror content width.
  * 40rem = 640px. Corresponds to initial plank width (Google docs, Stashpad, etc.)
  * 50rem = 800px. Maximum content width for solo mode.
  */
-export const editorContent = '!mt-[16px] !mli-auto w-full max-w-[min(50rem,100%-4rem)]';
+export const editorContent = '!mt-[16px] !mb-[32px] !mli-auto w-full max-w-[min(50rem,100%-8rem)]';
 
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
@@ -20,9 +20,16 @@ export const editorGutter = EditorView.baseTheme({
   '.cm-gutters': {
     // Match margin from content.
     marginTop: '16px',
+    marginBottom: '16px',
     // Inside within content margin.
     marginRight: '-32px',
     width: '32px',
     backgroundColor: 'transparent !important',
   },
 });
+
+export const editorMonospace = EditorView.baseTheme({
+  '.cm-content': {
+    fontFamily: `${getToken('fontFamily.mono')} !important`,
+  },
+});

package/src/extensions/doc.ts

@@ -6,6 +6,9 @@ import { Facet } from '@codemirror/state';
 
 import { invariant } from '@dxos/invariant';
 
+/**
+ * Currently edited document id as FQ string.
+ */
 export const documentId = Facet.define<string, string>({
   combine: (providers) => {
     invariant(providers.length <= 1);

package/src/extensions/factories.ts

@@ -3,7 +3,7 @@
 //
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
+import { defaultKeymap, history, historyKeymap, standardKeymap } from '@codemirror/commands';
 import { bracketMatching } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
@@ -109,8 +109,9 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     keymap.of(
       [
         ...((props.keymap && keymaps[props.keymap]) ?? []),
+        // NOTE: Tab configured by markdown extension.
         // https://codemirror.net/docs/ref/#commands.indentWithTab
-        ...(props.indentWithTab ? [indentWithTab] : []),
+        // ...(props.indentWithTab ? [indentWithTab] : []),
         // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
         ...(props.closeBrackets ? closeBracketsKeymap : []),
         // https://codemirror.net/docs/ref/#commands.historyKeymap

package/src/extensions/folding.tsx

@@ -6,8 +6,7 @@ import { codeFolding, foldGutter } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
 import React from 'react';
 
-import { ThemeProvider } from '@dxos/react-ui';
-import { defaultTx, getSize, mx } from '@dxos/react-ui-theme';
+import { getSize, mx } from '@dxos/react-ui-theme';
 
 import { renderRoot } from './util';
 
@@ -23,11 +22,10 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
   foldGutter({
     markerDOM: (open) => {
       return renderRoot(
-        <ThemeProvider tx={defaultTx}>
-          <svg className={mx(getSize(3), 'm-3 cursor-pointer', open && 'rotate-90')}>
-            <use href={'/icons.svg#ph--caret-right--regular'} />
-          </svg>
-        </ThemeProvider>,
+        document.createElement('div'),
+        <svg className={mx(getSize(3), 'm-3 cursor-pointer', open && 'rotate-90')}>
+          <use href={'/icons.svg#ph--caret-right--regular'} />
+        </svg>,
       );
     },
   }),

package/src/extensions/markdown/bundle.ts

@@ -15,7 +15,6 @@ import { keymap } from '@codemirror/view';
 import { type ThemeMode } from '@dxos/react-ui';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
-import { linkPastePlugin } from './link-paste';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
@@ -58,9 +57,8 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
 
-    linkPastePlugin,
-
     keymap.of([
+      // TODO(burdon): Indent by 4 if in task list.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab,
 

package/src/extensions/markdown/decorate.ts

@@ -11,8 +11,9 @@ import { invariant } from '@dxos/invariant';
 import { mx } from '@dxos/react-ui-theme';
 
 import { image } from './image';
+import { linkPastePlugin } from './link-paste';
 import { table } from './table';
-import { getToken, heading, type HeadingLevel } from '../../styles';
+import { getToken, theme, type HeadingLevel } from '../../styles';
 import { wrapWithCatch } from '../util';
 
 //
@@ -57,8 +58,9 @@ class CheckboxWidget extends WidgetType {
 
   override toDOM(view: EditorView) {
     const input = document.createElement('input');
-    input.className = 'cm-task-checkbox ch-checkbox ch-focus-ring';
+    input.className = 'cm-task-checkbox ch-checkbox';
     input.type = 'checkbox';
+    input.tabIndex = -1;
     input.checked = this._checked;
     if (view.state.readOnly) {
       input.setAttribute('disabled', 'true');
@@ -201,28 +203,34 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         }
 
         const editing = editingRange(state, node, focus);
-        if (!editing) {
-          const mark = node.node.firstChild!;
-          if (mark?.name === 'HeaderMark') {
-            let text = view.state.sliceDoc(mark.to, node.to).trim();
-            const { from, to } = options.numberedHeadings ?? {};
-            if (from && (!to || level <= to)) {
-              const num = headers
+        if (editing) {
+          break;
+        }
+
+        const mark = node.node.firstChild!;
+        if (mark?.name === 'HeaderMark') {
+          const { from, to = 6 } = options.numberedHeadings ?? {};
+          const text = view.state.sliceDoc(node.from, node.to);
+          const len = text.match(/[#\s]+/)![0].length;
+          if (!from || level < from || level > to) {
+            atomicDeco.add(mark.from, mark.from + len, hide);
+          } else {
+            // TODO(burdon): Number format/style.
+            const num =
+              headers
                 .slice(from - 1)
                 .map((level) => level?.number ?? 0)
-                .join('.');
-              if (num.length) {
-                text = `${num} ${text}`;
-              }
+                .join('.') + ' ';
+
+            if (num.length) {
+              atomicDeco.add(
+                mark.from,
+                mark.from + len,
+                Decoration.replace({
+                  widget: new TextWidget(num, theme.heading(level)),
+                }),
+              );
             }
-
-            deco.add(
-              node.from,
-              node.to,
-              Decoration.replace({
-                widget: new TextWidget(text, heading(level)),
-              }),
-            );
           }
         }
 
@@ -271,7 +279,6 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         // const mark = node.node.firstChild!;
         // console.log(mark?.name);
         // if (mark?.name === 'ListMark') {}
-
         break;
       }
 
@@ -515,6 +522,7 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
       },
     ),
     formattingStyles,
+    linkPastePlugin,
     image(),
     table(),
   ];
@@ -522,7 +530,7 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
 
 const formattingStyles = EditorView.baseTheme({
   '& .cm-code': {
-    fontFamily: getToken('fontFamily.mono', []).join(','),
+    fontFamily: getToken('fontFamily.mono'),
   },
 
   '& .cm-codeblock-line': {
@@ -579,7 +587,6 @@ const formattingStyles = EditorView.baseTheme({
   '& .cm-list-mark': {
     display: 'inline-block',
     textAlign: 'right',
-    color: getToken('extend.colors.neutral.500'),
     fontVariant: 'tabular-nums',
   },
   '& .cm-list-mark-bullet': {

package/src/extensions/markdown/formatting.ts

@@ -3,6 +3,7 @@
 //
 
 import { snippet } from '@codemirror/autocomplete';
+import { indentWithTab } from '@codemirror/commands';
 import { syntaxTree } from '@codemirror/language';
 import {
   type Extension,
@@ -1015,8 +1016,9 @@ export const toggleCodeblock: StateCommand = (target) => {
 //
 
 export type FormattingOptions = {};
+indentWithTab;
 
-export const formattingKeymap = (options: FormattingOptions = {}): Extension => {
+export const formattingKeymap = (_options: FormattingOptions = {}): Extension => {
   return [
     keymap.of([
       {