@dxos/react-ui-editor 0.6.7 → 0.6.8-main.3be982f

package/src/{hooks/TextEditor.stories.tsx → TextEditor.stories.tsx}

@@ -3,32 +3,31 @@
 //
 
 import '@dxosTheme';
+
 import { markdown } from '@codemirror/lang-markdown';
 import { ArrowSquareOut, X } from '@phosphor-icons/react';
 import { effect, useSignal } from '@preact/signals-react';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { type FC, type KeyboardEvent, StrictMode, useMemo, useState } from 'react';
+import React, { type FC, type KeyboardEvent, StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { TextType } from '@braneframe/types';
-import { create } from '@dxos/echo-schema';
+import { create, Expando } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 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, getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
+import { baseSurface, defaultTx, mx, getSize } from '@dxos/react-ui-theme';
+import { withFullscreen, withTheme } from '@dxos/storybook-utils';
 
-import { useTextEditor, type UseTextEditorProps } from './useTextEditor';
+import { editorContent } from './defaults';
 import {
   InputModeExtensions,
   annotations,
   autocomplete,
   blast,
   command,
-  // commentBlock,
   comments,
   createBasicExtensions,
   createDataExtensions,
@@ -38,6 +37,7 @@ import {
   decorateMarkdown,
   defaultOptions,
   dropFile,
+  folding,
   formattingKeymap,
   image,
   linkTooltip,
@@ -51,8 +51,9 @@ import {
   type Comment,
   type CommentsOptions,
   type SelectionState,
-} from '../extensions';
-import translations from '../translations';
+} from './extensions';
+import { useTextEditor, type UseTextEditorProps } from './hooks';
+import translations from './translations';
 
 faker.seed(101);
 
@@ -62,10 +63,10 @@ const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
 const img = '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)';
 
-const text = {
+const content = {
   tasks: str(
     //
-    '## Tasks',
+    '### Task List',
     '',
     `- [x] ${faker.lorem.sentences()}`,
     `- [ ] ${faker.lorem.sentences()}`,
@@ -75,28 +76,38 @@ const text = {
     '',
   ),
 
-  list: str(
+  bullets: str(
     //
-    '## List',
+    '### BulletList',
     '',
     `- ${faker.lorem.sentences()}`,
     `- ${faker.lorem.sentences()}`,
+    `  - ${faker.lorem.sentences()}`,
+    `  - ${faker.lorem.sentences()}`,
     `- ${faker.lorem.sentences()}`,
     '',
   ),
 
   numbered: str(
     //
-    '## Numbered',
+    '### OrderedList (part 1)',
+    '',
+    `1. ${faker.lorem.sentences()}`,
+    `1. ${faker.lorem.sentences()}`,
+    `1. ${faker.lorem.sentences()}`,
+    `    1. ${faker.lorem.sentences()}`,
+    `    1. ${faker.lorem.sentences()}`,
+    `        1. ${faker.lorem.sentences()}`,
+    `1. ${faker.lorem.sentences()}`,
+    '',
+    '### OrderedList (part 2)',
     '',
     `1. ${faker.lorem.sentences()}`,
-    `2. ${faker.lorem.sentences()}`,
-    `3. ${faker.lorem.sentences()}`,
     '',
   ),
 
   code: str(
-    '## Code',
+    '### Code',
     '',
     '```',
     '$ ls -las',
@@ -115,16 +126,18 @@ const text = {
   comment: str('<!--', 'A comment', '-->', '', 'No comment.', 'Partial comment. <!-- comment. -->'),
 
   links: str(
-    '## Links',
+    '### Links',
     '',
     'This is a naked link https://dxos.org within a sentence.',
     '',
     'Take a look at [DXOS](https://dxos.org) and how to [get started](https://docs.dxos.org/guide/getting-started.html).',
     '',
+    'This is all about https://dxos.org and related technologies.',
+    '',
   ),
 
   table: str(
-    '# Table',
+    '### Tables',
     '',
     `| ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} |`,
     `|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|`,
@@ -134,49 +147,56 @@ const text = {
     '',
   ),
 
-  image: str('# Image', '', img),
+  image: str('### Image', '', img),
 
   headings: str(
     ...[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)`.'),
+
+  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',
+    '> block quote.',
+  ),
+
   paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
 
   footer: str('', '', '', '', ''),
 };
 
-const document = str(
+const text = str(
   '# Markdown',
+  'Composer Markdown Editor',
   '',
-  '> 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',
-  '> block quote.',
-  '',
-  'This is all about https://dxos.org and related technologies.',
-  '',
-  'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
-  '',
-  '---',
-  text.links,
-  '---',
-  text.list,
-  '---',
-  text.tasks,
-  '---',
-  text.numbered,
+
   '---',
-  text.code,
+  '## Basics',
+  content.blockquotes,
+  content.formatting,
+  content.links,
+
   '---',
-  text.headings,
+  '## Lists',
+  content.bullets,
+  content.tasks,
+  content.numbered,
+
   '---',
-  text.table,
+  content.headings,
+
   '---',
-  text.image,
-  text.footer,
+  '## Misc',
+  content.code,
+  content.table,
+  content.image,
+  content.footer,
 );
 
 const links = [
@@ -249,67 +269,73 @@ type StoryProps = {
 const Story = ({
   id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
   text,
-  extensions: _extensions = [],
+  extensions,
   readonly,
   placeholder = 'New document.',
   selection,
 }: StoryProps) => {
-  const [object] = useState(createEchoObject(create(TextType, { content: text ?? '' })));
+  const [object] = useState(createEchoObject(create(Expando, { content: text ?? '' })));
   const { themeMode } = useThemeContext();
-  const extensions = useMemo(
-    () => [
-      createBasicExtensions({ readonly, placeholder }),
-      createMarkdownExtensions({ themeMode }),
-      createThemeExtensions({
-        themeMode,
-        slots: {
-          editor: { className: 'min-bs-dvh px-8 bg-white dark:bg-black' },
-        },
-      }),
-      createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-      _extensions,
-    ],
-    [_extensions, object],
-  );
-
   const { parentRef, focusAttributes } = useTextEditor(
-    () => ({ id, initialValue: text, extensions, selection }),
-    [extensions],
+    () => ({
+      id,
+      initialValue: text,
+      extensions: [
+        createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
+        createBasicExtensions({ readonly, placeholder }),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            content: {
+              className: editorContent,
+            },
+          },
+        }),
+        extensions || [],
+      ],
+      selection,
+    }),
+    [object, extensions, themeMode],
   );
 
-  return <div role='none' ref={parentRef} className={mx(textBlockWidth, 'min-bs-dvh')} {...focusAttributes} />;
+  return <div role='none' className='flex w-full overflow-hidden' ref={parentRef} {...focusAttributes} />;
 };
 
 export default {
-  title: 'react-ui-editor/useTextEditor',
-  decorators: [withTheme],
+  title: 'react-ui-editor/TextEditor',
+  decorators: [withTheme, withFullscreen()],
   render: Story,
   parameters: { translations, layout: 'fullscreen' },
 };
 
-// TODO(burdon): Test invalid inputs (e.g., selection).
-
 const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
-  decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
+  decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100, numberedHeadings: { from: 1, to: 4 } }),
   formattingKeymap(),
-  image(),
-  table(),
   linkTooltip(renderLinkTooltip),
 ];
 
 export const Default = {
-  render: () => <Story text={document} extensions={defaults} />,
+  render: () => <Story text={text} extensions={defaults} />,
 };
 
 export const Readonly = {
-  render: () => <Story text={document} extensions={defaults} readonly />,
+  render: () => <Story text={text} extensions={defaults} readonly />,
+};
+
+export const Empty = {
+  render: () => <Story extensions={defaults} />,
 };
 
 export const NoExtensions = {
-  render: () => <Story text={document} />,
+  render: () => <Story text={text} />,
+};
+
+export const Folding = {
+  render: () => <Story text={text} extensions={[folding()]} />,
 };
 
 const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
@@ -319,8 +345,14 @@ const largeWithImages = faker.helpers
   .flatMap((x) => x)
   .join('\n\n');
 
-export const Empty = {
-  render: () => <Story />,
+const headings = str(
+  ...[1, 2, 2, 3, 3, 4, 4, 4, 5, 5, 2, 3, 3, 2, 2, 6, 1]
+    .map((level) => ['#'.repeat(level) + ' ' + faker.lorem.sentence(3), faker.lorem.sentences(), ''])
+    .flat(),
+);
+
+export const Headings = {
+  render: () => <Story text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
 };
 
 const global = new Map<string, SelectionState>();
@@ -342,31 +374,46 @@ export const ScrollingWithImages = {
 };
 
 export const Links = {
-  render: () => <Story text={str(text.links, text.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
+  render: () => <Story text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
 };
 
 export const Image = {
-  render: () => <Story text={str(text.image, text.footer)} extensions={[image()]} />,
+  render: () => <Story text={str(content.image, content.footer)} extensions={[image()]} />,
 };
 
 export const Code = {
-  render: () => <Story text={str(text.code, text.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <Story text={str(content.code, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const Lists = {
   render: () => (
-    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[decorateMarkdown()]} />
+    <Story
+      text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
+      extensions={[decorateMarkdown()]}
+    />
   ),
 };
 
+export const BulletList = {
+  render: () => <Story text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
+};
+
+export const OrderedList = {
+  render: () => <Story text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
+};
+
+export const TaskList = {
+  render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} />,
+};
+
 export const Table = {
-  render: () => <Story text={str(text.table, text.footer)} extensions={[table()]} />,
+  render: () => <Story text={str(content.table, content.footer)} extensions={[table()]} />,
 };
 
 export const Autocomplete = {
   render: () => (
     <Story
-      text={str('# Autocomplete', '', 'Press Ctrl-Space...', text.footer)}
+      text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
       extensions={[
         decorateMarkdown({ renderLinkButton }),
         autocomplete({
@@ -380,7 +427,7 @@ export const Autocomplete = {
 export const CommentedOut = {
   render: () => (
     <Story
-      text={str('# Commented out', '', text.comment, text.footer)}
+      text={str('# Commented out', '', content.comment, content.footer)}
       extensions={[
         decorateMarkdown(),
         markdown(),
@@ -393,7 +440,7 @@ export const CommentedOut = {
 export const Mention = {
   render: () => (
     <Story
-      text={str('# Mention', '', 'Type @...', text.footer)}
+      text={str('# Mention', '', 'Type @...', content.footer)}
       extensions={[
         mention({
           onSearch: (text) => names.filter((name) => name.toLowerCase().startsWith(text.toLowerCase())),
@@ -466,7 +513,7 @@ export const Comments = {
     const _comments = useSignal<Comment[]>([]);
     return (
       <Story
-        text={str('# Comments', '', text.paragraphs, text.footer)}
+        text={str('# Comments', '', content.paragraphs, content.footer)}
         extensions={[
           createExternalCommentSync(
             'test',
@@ -504,7 +551,7 @@ export const Comments = {
 export const Vim = {
   render: () => (
     <Story
-      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', text.paragraphs)}
+      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
       extensions={[defaults, InputModeExtensions.vim]}
     />
   ),
@@ -534,7 +581,7 @@ const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewrite
 export const Listener = {
   render: () => (
     <Story
-      text={str('# Listener', '', text.footer)}
+      text={str('# Listener', '', content.footer)}
       extensions={[
         listener({
           onFocus: (focusing) => {
@@ -552,7 +599,7 @@ export const Listener = {
 export const Typewriter = {
   render: () => (
     <Story
-      text={str('# Typewriter', '', text.paragraphs, text.footer)}
+      text={str('# Typewriter', '', content.paragraphs, content.footer)}
       extensions={[typewriter({ items: typewriterItems })]}
     />
   ),
@@ -561,7 +608,7 @@ export const Typewriter = {
 export const Blast = {
   render: () => (
     <Story
-      text={str('# Blast', '', text.paragraphs, text.code, text.paragraphs)}
+      text={str('# Blast', '', content.paragraphs, content.code, content.paragraphs)}
       extensions={[
         typewriter({ items: typewriterItems }),
         blast(

package/src/components/Toolbar/Toolbar.tsx

@@ -61,6 +61,8 @@ const ToolbarSeparator = () => <div role='separator' className='grow' />;
 // Root
 //
 
+const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
+
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
     state: (Formatting & { comment?: boolean; mode?: EditorViewMode; selection?: boolean }) | undefined;
@@ -68,8 +70,6 @@ export type ToolbarProps = ThemedClassName<
   }>
 >;
 
-const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
-
 const ToolbarRoot = ({ children, onAction, classNames, state }: ToolbarProps) => {
   return (
     <ToolbarContextProvider onAction={onAction} state={state}>
@@ -320,11 +320,11 @@ const MarkdownHeading = () => {
 //
 
 const markdownStyles: ButtonProps[] = [
-  { type: 'strong', Icon: TextB, getState: (state) => state.strong },
-  { type: 'emphasis', Icon: TextItalic, getState: (state) => state.emphasis },
-  { type: 'strikethrough', Icon: TextStrikethrough, getState: (state) => state.strikethrough },
-  { type: 'code', Icon: Code, getState: (state) => state.code },
-  { type: 'link', Icon: Link, getState: (state) => state.link },
+  { type: 'strong', Icon: TextB, getState: (state) => !!state?.strong },
+  { type: 'emphasis', Icon: TextItalic, getState: (state) => !!state?.emphasis },
+  { type: 'strikethrough', Icon: TextStrikethrough, getState: (state) => !!state?.strikethrough },
+  { type: 'code', Icon: Code, getState: (state) => !!state?.code },
+  { type: 'link', Icon: Link, getState: (state) => !!state?.link },
 ];
 
 const MarkdownStyles = () => {
@@ -380,7 +380,7 @@ const markdownBlocks: ButtonProps[] = [
   {
     type: 'blockquote',
     Icon: Quotes,
-    getState: (state) => state.blockQuote,
+    getState: (state) => !!state?.blockQuote,
   },
   {
     type: 'codeblock',
@@ -482,6 +482,14 @@ const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
 const MarkdownActions = () => {
   const { onAction, state } = useToolbarContext('MarkdownActions');
   const { t } = useTranslation(translationKey);
+
+  let toolTipKey = 'comment label';
+  if (state?.comment) {
+    toolTipKey = 'selection overlaps existing comment label';
+  } else if (state?.selection === false) {
+    toolTipKey = 'select text to comment label';
+  }
+
   return (
     <>
       {/* TODO(burdon): Toggle readonly state. */}
@@ -495,7 +503,7 @@ const MarkdownActions = () => {
         onClick={() => onAction?.({ type: 'comment' })}
         disabled={!state || state.comment || !state.selection}
       >
-        {t('comment label')}
+        {t(toolTipKey)}
       </ToolbarButton>
     </>
   );

package/src/defaults.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { EditorView } from '@codemirror/view';
+
+export { 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 editorWithToolbarLayout =
+  'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
+
+export const editorGutter = EditorView.baseTheme({
+  '.cm-gutters': {
+    // Match margin from content.
+    marginTop: '16px',
+    // Inside within content margin.
+    marginRight: '-32px',
+    width: '32px',
+    backgroundColor: 'transparent !important',
+  },
+});

package/src/extensions/autocomplete.ts

@@ -20,14 +20,14 @@ export type AutocompleteResult = Completion;
 
 export type AutocompleteOptions = {
   activateOnTyping?: boolean;
-  onSearch: (text: string) => Completion[];
+  onSearch?: (text: string) => Completion[];
 };
 
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ activateOnTyping, onSearch }: AutocompleteOptions) => {
-  return [
+export const autocomplete = ({ activateOnTyping, onSearch }: AutocompleteOptions = {}) => {
+  const extentions = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
     // TODO(burdon): Set custom keymap.
@@ -44,20 +44,26 @@ export const autocomplete = ({ activateOnTyping, onSearch }: AutocompleteOptions
       // TODO(burdon): Styles/fragments.
       tooltipClass: () => 'shadow rounded',
     }),
-
-    // TODO(burdon): Optional decoration via addToOptions
-    markdownLanguage.data.of({
-      autocomplete: (context: CompletionContext): CompletionResult | null => {
-        const match = context.matchBefore(/\w*/);
-        if (!match || (match.from === match.to && !context.explicit)) {
-          return null;
-        }
-
-        return {
-          from: match.from,
-          options: onSearch(match.text.toLowerCase()),
-        };
-      },
-    }),
   ];
+
+  if (onSearch) {
+    extentions.push(
+      // TODO(burdon): Optional decoration via addToOptions
+      markdownLanguage.data.of({
+        autocomplete: (context: CompletionContext): CompletionResult | null => {
+          const match = context.matchBefore(/\w*/);
+          if (!match || (match.from === match.to && !context.explicit)) {
+            return null;
+          }
+
+          return {
+            from: match.from,
+            options: onSearch(match.text.toLowerCase()),
+          };
+        },
+      }),
+    );
+  }
+
+  return extentions;
 };

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

@@ -7,10 +7,9 @@ import '@dxosTheme';
 import '@preact/signals-react';
 import React, { useEffect, useState } from 'react';
 
-import { TextType } from '@braneframe/types';
 import { Repo } from '@dxos/automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
-import { create, type Expando } from '@dxos/echo-schema';
+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';
@@ -18,6 +17,7 @@ import { ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
+import { editorContent } from '../../defaults';
 import { useTextEditor } from '../../hooks';
 import translations from '../../translations';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
@@ -45,9 +45,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
         createThemeExtensions({
           themeMode,
           slots: {
-            editor: { className: 'w-full bg-white dark:bg-black' },
-            // TODO(burdon): Sufficient padding so indicator isn't clipped.
-            content: { className: '!m-8' },
+            editor: { className: editorContent },
           },
         }),
         createDataExtensions({ id: 'test', text: source, space, identity }),
@@ -136,7 +134,7 @@ export const WithEcho = {
           space.db.add(
             create({
               type: 'test',
-              content: create(TextType, { content: initialContent }),
+              content: create(Expando, { content: initialContent }),
             }),
           );
         }}

package/src/extensions/comments.ts

@@ -611,6 +611,10 @@ const hasActiveSelection = (state: EditorState): boolean => {
   return state.selection.ranges.some((range) => !range.empty);
 };
 
+/**
+ * Manages external comment synchronization for the editor.
+ * This class subscribes to external comment updates and applies them to the editor view.
+ */
 class ExternalCommentSync implements PluginValue {
   private readonly unsubscribe: () => void;
 

package/src/extensions/factories.ts

@@ -30,8 +30,7 @@ import { hexToHue, isNotFalsy } from '@dxos/util';
 
 import { automerge } from './automerge';
 import { awareness, SpaceAwarenessProvider } from './awareness';
-import { type ThemeStyles } from '../styles';
-import { defaultTheme } from '../themes';
+import { type ThemeStyles, defaultTheme } from '../styles';
 
 //
 // Basic
@@ -146,6 +145,8 @@ const defaultThemeSlots = {
   },
 };
 
+// TODO(burdon): Should only have one baseTheme?
+// https://codemirror.net/examples/styling
 export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
   const slots = defaultsDeep({}, _slots, defaultThemeSlots);
   return [