@dxos/react-ui-editor 0.6.8-main.046e6cf → 0.6.8-staging.77f93a3

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/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

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,YAAY,EAAE,WAwP1B,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.77f93a3",
   "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.77f93a3",
+    "@dxos/context": "0.6.8-staging.77f93a3",
+    "@dxos/automerge": "0.6.8-staging.77f93a3",
+    "@dxos/debug": "0.6.8-staging.77f93a3",
+    "@dxos/echo-schema": "0.6.8-staging.77f93a3",
+    "@dxos/display-name": "0.6.8-staging.77f93a3",
+    "@dxos/invariant": "0.6.8-staging.77f93a3",
+    "@dxos/log": "0.6.8-staging.77f93a3",
+    "@dxos/protocols": "0.6.8-staging.77f93a3",
+    "@dxos/react-ui": "0.6.8-staging.77f93a3",
+    "@dxos/react-async": "0.6.8-staging.77f93a3",
+    "@dxos/util": "0.6.8-staging.77f93a3",
+    "@dxos/react-ui-theme": "0.6.8-staging.77f93a3"
   },
   "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/config": "0.6.8-staging.77f93a3",
+    "@dxos/automerge": "0.6.8-staging.77f93a3",
+    "@dxos/echo-typegen": "0.6.8-staging.77f93a3",
+    "@dxos/echo-signals": "0.6.8-staging.77f93a3",
+    "@dxos/keyboard": "0.6.8-staging.77f93a3",
+    "@dxos/random": "0.6.8-staging.77f93a3",
+    "@dxos/react-client": "0.6.8-staging.77f93a3",
+    "@dxos/react-ui": "0.6.8-staging.77f93a3",
+    "@dxos/storybook-utils": "0.6.8-staging.77f93a3"
   },
   "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.77f93a3"
   },
   "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

@@ -11,7 +11,7 @@ export { getToken } from './styles';
  * 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%-4rem)]';
 
 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,6 +20,7 @@ export const editorGutter = EditorView.baseTheme({
   '.cm-gutters': {
     // Match margin from content.
     marginTop: '16px',
+    marginBottom: '16px',
     // Inside within content margin.
     marginRight: '-32px',
     width: '32px',

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';
 
 //
@@ -201,28 +202,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 +278,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 +521,7 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
       },
     ),
     formattingStyles,
+    linkPastePlugin,
     image(),
     table(),
   ];
@@ -522,7 +529,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 +586,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([
       {

package/src/extensions/markdown/highlight.ts

@@ -7,7 +7,7 @@ import { HighlightStyle } from '@codemirror/language';
 import { tags, styleTags, Tag } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 
-import { blockquote, bold, code, codeMark, getToken, heading, italic, mark, strikethrough } from '../../styles';
+import { getToken, theme } from '../../styles';
 
 /**
  * Custom tags defined and processed by the GFM lezer extension.
@@ -49,6 +49,8 @@ export const markdownTagsExtensions: MarkdownConfig[] = [
   },
 ];
 
+export type HighlightOptions = {};
+
 /**
  * Styling based on `lezer` parser tags.
  * https://codemirror.net/examples/styling
@@ -60,7 +62,7 @@ export const markdownTagsExtensions: MarkdownConfig[] = [
  * - https://github.com/codemirror/language/blob/main/src/highlight.ts#L194
  * - https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts#L115
  */
-export const markdownHighlightStyle = (readonly?: boolean) => {
+export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
   return HighlightStyle.define(
     [
       {
@@ -99,6 +101,7 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
           tags.inserted,
           tags.invalid,
         ],
+        // TODO(burdon): Explain.
         color: 'inherit !important',
       },
 
@@ -111,38 +114,49 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
           markdownTags.LinkReference,
           markdownTags.ListMark,
         ],
-        class: mark,
+        class: theme.mark,
       },
 
       // Markdown marks.
       {
-        tag: [markdownTags.CodeMark, markdownTags.HeaderMark, markdownTags.QuoteMark, markdownTags.EmphasisMark],
-        class: mark,
+        tag: [
+          //
+          markdownTags.CodeMark,
+          markdownTags.HeaderMark,
+          markdownTags.QuoteMark,
+          markdownTags.EmphasisMark,
+        ],
+        class: theme.mark,
       },
 
       // E.g., code block language (after ```).
       {
-        tag: [tags.function(tags.variableName), tags.labelName],
-        class: codeMark,
+        tag: [
+          //
+          tags.function(tags.variableName),
+          tags.labelName,
+        ],
+        class: theme.codeMark,
       },
 
+      // Fonts.
       {
         tag: [tags.monospace],
         class: 'font-mono',
       },
 
       // Headings.
-      { 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) },
+      { tag: tags.heading1, class: theme.heading(1) },
+      { tag: tags.heading2, class: theme.heading(2) },
+      { tag: tags.heading3, class: theme.heading(3) },
+      { tag: tags.heading4, class: theme.heading(4) },
+      { tag: tags.heading5, class: theme.heading(5) },
+      { tag: tags.heading6, class: theme.heading(6) },
 
       // Emphasis.
-      { tag: tags.emphasis, class: italic },
-      { tag: tags.strong, class: bold },
-      { tag: tags.strikethrough, class: strikethrough },
+      { tag: tags.emphasis, class: 'italic' },
+      { tag: tags.strong, class: 'font-bold' },
+      { tag: tags.strikethrough, class: 'line-through' },
 
       // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
       // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
@@ -151,12 +165,12 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
       {
         tag: [markdownTags.CodeText, markdownTags.InlineCode],
-        class: code,
+        class: theme.code,
       },
 
       {
         tag: [markdownTags.QuoteMark],
-        class: blockquote,
+        class: theme.blockquote,
       },
 
       {
@@ -167,7 +181,7 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
     {
       scope: markdownLanguage,
       all: {
-        fontFamily: getToken('fontFamily.body', []).join(','),
+        fontFamily: getToken('fontFamily.body'),
       },
     },
   );