@dxos/react-ui-editor 0.3.9-main.4e39f3a → 0.3.9-main.501fe30

package/src/automerge/automerge.stories.tsx

@@ -2,17 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import { basicSetup } from '@codemirror/basic-setup';
+import '@preact/signals-react'; // Register react integration
+import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import { EditorView } from '@codemirror/view';
+import { basicSetup } from 'codemirror';
+import get from 'lodash.get';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { type Prop, next as automerge } from '@dxos/automerge/automerge';
+import { type Prop } from '@dxos/automerge/automerge';
+import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
 
-import { plugin as amgPlugin, reconcile } from './automerge-plugin';
-import { Peer } from './demo';
+import { type IDocHandle, automergePlugin } from './automerge-plugin';
 
 type EditorProps = {
-  handle: Peer;
+  handle: IDocHandle;
   path: Prop[];
 };
 
@@ -21,27 +24,13 @@ const Editor = ({ handle, path }: EditorProps) => {
   const editorRoot = useRef<EditorView>();
 
   useEffect(() => {
-    const doc = handle.doc;
-    const source = doc.text; // this should use path
-    const plugin = amgPlugin(doc, path);
     const view = (editorRoot.current = new EditorView({
-      doc: source,
-      extensions: [basicSetup, plugin],
-      dispatch: (transaction) => {
-        view.update([transaction]);
-        reconcile(handle, view);
-      },
+      doc: get(handle.docSync()!, path),
+      extensions: [basicSetup, automergePlugin(handle, path)],
       parent: containerRef.current as any,
     }));
 
-    const handleChange = () => {
-      reconcile(handle, view);
-    };
-
-    handle.changeEvent.on(handleChange);
-
     return () => {
-      handle.changeEvent.off(handleChange);
       view.destroy();
     };
   }, []);
@@ -50,31 +39,29 @@ const Editor = ({ handle, path }: EditorProps) => {
 };
 
 const Story = () => {
-  const [object1, setObject1] = useState<Peer | null>(null);
-  const [object2, setObject2] = useState<Peer | null>(null);
-  const [stats1, setStats1] = useState<any>({});
-  const [stats2, setStats2] = useState<any>({});
+  const [object1, setObject1] = useState<DocHandle<any> | null>(null);
+  const [object2, setObject2] = useState<DocHandle<any> | null>(null);
 
   useEffect(() => {
-    const object1 = new Peer();
-    object1.doc = automerge.from({ text: 'Hello world!' });
-
-    const object2 = new Peer();
-    object2.doc = automerge.init();
-
-    const r1 = object1.replicate();
-    const r2 = object2.replicate();
-
-    void r1.readable.pipeTo(r2.writable);
-    void r2.readable.pipeTo(r1.writable);
-
-    setObject1(object1);
-    setObject2(object2);
-
-    setInterval(() => {
-      setStats1({ ...object1.stats });
-      setStats2({ ...object2.stats });
-    }, 500);
+    queueMicrotask(async () => {
+      const repo1 = new Repo({
+        network: [new BroadcastChannelNetworkAdapter()],
+      });
+      const repo2 = new Repo({
+        network: [new BroadcastChannelNetworkAdapter()],
+      });
+
+      const object1 = repo1.create();
+      object1.change((doc: any) => {
+        doc.text = 'Hello world!';
+      });
+
+      const object2 = repo2.find(object1.url);
+      await object2.whenReady();
+
+      setObject1(object1);
+      setObject2(object2);
+    });
   }, []);
 
   if (!object1 || !object2) {
@@ -85,11 +72,9 @@ const Story = () => {
     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', width: '100vw' }}>
       <div>
         <Editor handle={object1} path={['text']} />
-        <div style={{ whiteSpace: 'pre' }}>{JSON.stringify(stats1, null, 2)}</div>
       </div>
       <div>
         <Editor handle={object2} path={['text']} />
-        <div style={{ whiteSpace: 'pre' }}>{JSON.stringify(stats2, null, 2)}</div>
       </div>
     </div>
   );

package/src/components/Editor/Editor.stories.tsx

@@ -9,14 +9,16 @@ import React, { useState } from 'react';
 import { type PublicKey } from '@dxos/react-client';
 import { TextObject, TextKind, useQuery, useSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { ClientDecorator, setupPeersInSpace, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
+import { setupPeersInSpace, textGenerator, useDataGenerator, ClientRepeater } from '@dxos/react-client/testing';
 import { useId } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { Editor, type EditorProps } from './Editor';
 import { EditorDocument, types as schema } from '../../testing';
 
 export default {
   component: Editor,
+  decorators: [withTheme],
 };
 
 const Story = ({ spaceKey, ...params }: Pick<EditorProps, 'slots'> & { spaceKey: PublicKey }) => {
@@ -54,8 +56,7 @@ const { spaceKey: markdownSpaceKey, clients: markdownClients } = await setupPeer
 });
 
 export const Markdown = {
-  render: (args: { id: number }) => <Story {...args} spaceKey={markdownSpaceKey} />,
-  decorators: [ClientDecorator({ clients: markdownClients })],
+  render: () => <ClientRepeater Component={Story} clients={markdownClients} args={{ spaceKey: markdownSpaceKey }} />,
 };
 
 const { spaceKey: richSpaceKey, clients: richClients } = await setupPeersInSpace({
@@ -68,7 +69,7 @@ const { spaceKey: richSpaceKey, clients: richClients } = await setupPeersInSpace
 });
 
 export const Rich = {
-  render: (args: { id: number }) => <Story {...args} spaceKey={richSpaceKey} />,
+  render: () => <ClientRepeater Component={Story} clients={richClients} args={{ spaceKey: richSpaceKey }} />,
   args: {
     slots: {
       editor: {
@@ -76,5 +77,4 @@ export const Rich = {
       },
     },
   },
-  decorators: [ClientDecorator({ clients: richClients })],
 };

package/src/components/Editor/Editor.tsx

@@ -16,7 +16,6 @@ export type EditorProps = UseTextModelOptions & {
 
 /**
  * Memoized editor which depends on DXOS platform.
- *
  * Determines which editor to render based on the kind of text.
  */
 // NOTE: Without `memo`, if parent component uses `observer` the editor re-renders excessively.
@@ -24,6 +23,10 @@ export type EditorProps = UseTextModelOptions & {
 export const Editor = memo(
   forwardRef<TipTapEditor | MarkdownEditorRef, EditorProps>(({ slots, ...params }, forwardedRef) => {
     const model = useTextModel(params);
+    if (!model) {
+      return null;
+    }
+
     if (model?.content instanceof YXmlFragment) {
       return <RichTextEditor ref={forwardedRef as Ref<TipTapEditor>} model={model} slots={slots} />;
     } else {

package/src/components/Markdown/Markdown.stories.tsx

@@ -8,50 +8,63 @@ import React, { useState } from 'react';
 
 import { PublicKey } from '@dxos/react-client';
 import { TextKind } from '@dxos/react-client/echo';
-import { ClientDecorator, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
+import { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
 import { useId } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor } from './Markdown';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {
   component: MarkdownEditor,
+  decorators: [withTheme],
 };
 
+const content = [
+  '',
+  '',
+  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
+  '',
+  'This is a link: https://www.dxos.org',
+  '',
+  '',
+].join('\n');
+
 export const Default = {
   args: {
     model: {
       id: 'editor',
-      content: 'Hello, Storybook!',
+      content,
     },
   },
 };
 
 const replicator = new Replicator(TextKind.PLAIN);
 
+const Story = () => {
+  const [generate, setGenerate] = useState(false);
+  const generateId = useId('generate');
+
+  const [id] = useState(PublicKey.random().toHex());
+  const model = useYjsModel({ id, replicator });
+
+  useDataGenerator({
+    generator: generate ? textGenerator : undefined,
+    options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
+  });
+
+  return (
+    <main className='flex-1 min-w-0 p-4'>
+      <div id={generateId} className='flex'>
+        <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
+        Generate Data
+      </div>
+      <MarkdownEditor model={model} />
+    </main>
+  );
+};
+
 export const WithYjs = {
-  render: () => {
-    const [generate, setGenerate] = useState(false);
-    const generateId = useId('generate');
-
-    const [id] = useState(PublicKey.random().toHex());
-    const model = useYjsModel({ id, replicator });
-
-    useDataGenerator({
-      generator: generate ? textGenerator : undefined,
-      options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
-    });
-
-    return (
-      <main className='flex-1 min-w-0 p-4'>
-        <div id={generateId} className='flex'>
-          <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
-          Generate Data
-        </div>
-        <MarkdownEditor model={model} />
-      </main>
-    );
-  },
   // TODO(wittjosiah): Decorator for doing this without clients being initialized?
-  decorators: [ClientDecorator({ count: 2 })],
+  render: () => <ClientRepeater count={2} Component={Story} />,
 };

package/src/components/Markdown/Markdown.tsx

@@ -15,7 +15,7 @@ import {
 import { languages } from '@codemirror/language-data';
 import { lintKeymap } from '@codemirror/lint';
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
-import { EditorState, StateField, type Text } from '@codemirror/state';
+import { EditorState, type Extension, StateField, type Text } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import {
   keymap,
@@ -30,6 +30,7 @@ import {
   EditorView,
 } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
+// import { GFM } from '@lezer/markdown';
 import { vim } from '@replit/codemirror-vim';
 import React, {
   type KeyboardEvent,
@@ -48,16 +49,18 @@ import { getColorForValue } from '@dxos/react-ui-theme';
 import { YText } from '@dxos/text-model';
 
 import { markdownTagsExtension } from './markdownTags';
-import { markdownDarkHighlighting, markdownTheme } from './markdownTheme';
+import { markdownHighlightStyle, markdownTheme } from './markdownTheme';
 import { type EditorModel, type EditorSlots } from '../../model';
 
 export const EditorModes = ['default', 'vim'] as const;
 export type EditorMode = (typeof EditorModes)[number];
 
 export type MarkdownEditorProps = {
-  model?: EditorModel;
+  model: EditorModel;
   slots?: EditorSlots;
   editorMode?: EditorMode;
+  showWidgets?: boolean;
+  extensions?: Extension[];
   onChange?: (content: string | Text) => void;
 };
 
@@ -68,7 +71,7 @@ export type MarkdownEditorRef = {
 };
 
 export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
-  ({ model, slots = {}, editorMode, onChange }, forwardedRef) => {
+  ({ model, slots = {}, editorMode, extensions = [], onChange }, forwardedRef) => {
     const { id, content, provider, peer } = model ?? {};
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
@@ -115,51 +118,77 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
       const state = EditorState.create({
         doc: content?.toString(),
         extensions: [
-          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799.
+          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
           listenChangesExtension,
 
-          ...(editorMode === 'vim' ? [vim()] : []),
-
+          // TODO(burdon): Create custom bundle to make this class more reusable and retire simpler TextEditor component.
           // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
-          highlightActiveLineGutter(),
-          highlightSpecialChars(),
-          history(),
-          drawSelection(),
-          dropCursor(),
-          EditorState.allowMultipleSelections.of(true),
-          indentOnInput(),
-          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+          // https://codemirror.net/docs/ref/#codemirror.basicSetup
+          autocompletion(),
           bracketMatching(),
           closeBrackets(),
-          autocompletion(),
-          rectangularSelection(),
           crosshairCursor(),
+          dropCursor(),
+          drawSelection(),
           highlightActiveLine(),
+          highlightActiveLineGutter(),
           highlightSelectionMatches(),
+          highlightSpecialChars(),
+          history(),
+          indentOnInput(),
           placeholder(slots.editor?.placeholder ?? ''), // TODO(burdon): Needs consistent styling.
+          rectangularSelection(),
+          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+          EditorState.allowMultipleSelections.of(true),
+          EditorView.lineWrapping,
+
           keymap.of([
             ...closeBracketsKeymap,
+            ...completionKeymap,
             ...defaultKeymap,
-            ...searchKeymap,
-            ...historyKeymap,
             ...foldKeymap,
-            ...completionKeymap,
+            ...historyKeymap,
             ...lintKeymap,
+            ...searchKeymap,
             indentWithTab,
           ]),
-          EditorView.lineWrapping,
 
-          // Themes.
-          markdown({ base: markdownLanguage, codeLanguages: languages, extensions: [markdownTagsExtension] }),
+          // Main extension.
+          // https://github.com/codemirror/lang-markdown
+          markdown({
+            base: markdownLanguage,
+            codeLanguages: languages,
+            extensions: [
+              // TODO(burdon): This seems to upgrade the parser.
+              // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
+              // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+              // https://github.github.com/gfm
+              // GFM,
+
+              // Custom styling.
+              markdownTagsExtension,
+            ],
+          }),
+
+          // Theme.
           EditorView.theme({ ...markdownTheme, ...slots.editor?.markdownTheme }),
           ...(themeMode === 'dark'
             ? [syntaxHighlighting(oneDarkHighlightStyle)]
             : [syntaxHighlighting(defaultHighlightStyle)]),
+
           // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-          syntaxHighlighting(markdownDarkHighlighting),
+          syntaxHighlighting(markdownHighlightStyle),
+
+          // Settings.
+          ...(editorMode === 'vim' ? [vim()] : []),
 
+          // TODO(burdon): Move to extensions.
           // Replication and awareness (incl. remote selection).
+          // https://codemirror.net/docs/ref/#collab
           ...(content instanceof YText ? [yCollab(content, provider?.awareness)] : []),
+
+          // Custom.
+          ...extensions,
         ],
       });
 

package/src/components/Markdown/markdownTheme.ts

@@ -32,6 +32,10 @@ export const cursor = '#ffffff';
 
 const monospace = get(tokens, 'fontFamily.mono', ['monospace']).join(',');
 
+// TODO(burdon): Subtle difference in layout for documents and stacks.
+// TODO(burdon): On first character, height of editor changes by a few pixels.
+// TODO(burdon): Is the '&' prefix required? If so, document.
+
 export const markdownTheme = {
   // TODO(thure): consider whether these commented-out rules from one-dark-theme should be integrated.
   // '&': {
@@ -71,24 +75,28 @@ export const markdownTheme = {
   //   color: '#ddd'
   // },
 
-  '.dark & .cm-tooltip': {
+  '.cm-tooltip': {
+    backgroundColor: 'transparent',
     border: 'none',
-    backgroundColor: tooltipBackground,
-  },
-  '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
-    borderTopColor: 'transparent',
-    borderBottomColor: 'transparent',
-  },
-  '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
-    borderTopColor: tooltipBackground,
-    borderBottomColor: tooltipBackground,
-  },
-  '.dark & .cm-tooltip-autocomplete': {
-    '& > ul > li[aria-selected]': {
-      backgroundColor: highlightBackground,
-      color: ivory,
-    },
   },
+  // '.dark & .cm-tooltip': {
+  //   border: 'none',
+  //   backgroundColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
+  //   borderTopColor: 'transparent',
+  //   borderBottomColor: 'transparent',
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
+  //   borderTopColor: tooltipBackground,
+  //   borderBottomColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip-autocomplete': {
+  //   '& > ul > li[aria-selected]': {
+  //     backgroundColor: highlightBackground,
+  //     color: ivory,
+  //   },
+  // },
   '&.cm-focused': {
     outline: 'none',
   },
@@ -160,6 +168,13 @@ export const markdownTheme = {
   '& .cm-yLineSelection': {
     margin: '0',
   },
+  '.cm-link': {
+    color: 'rgb(20 89 208)',
+    textDecorationLine: 'underline',
+    textDecorationThickness: '1px',
+    textUnderlineOffset: '2px',
+    borderRadius: '.125rem',
+  },
   ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
     const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
     // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
@@ -170,7 +185,7 @@ export const markdownTheme = {
   }, {}),
 };
 
-export const markdownDarkHighlighting = HighlightStyle.define(
+export const markdownHighlightStyle = HighlightStyle.define(
   [
     {
       tag: [

package/src/components/RichText/RichText.stories.tsx

@@ -8,15 +8,17 @@ import React, { useState } from 'react';
 
 import { PublicKey } from '@dxos/react-client';
 import { TextKind } from '@dxos/react-client/echo';
-import { ClientDecorator, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
+import { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
 import { useId } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { RichTextEditor, type RichTextEditorProps } from './RichText';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {
   component: RichTextEditor,
+  decorators: [withTheme],
 };
 
 export const Default = {
@@ -29,40 +31,42 @@ export const Default = {
 };
 
 const replicator = new Replicator(TextKind.RICH);
-export const WithYjs = {
-  render: (args: Omit<RichTextEditorProps, 'model'>) => {
-    const [generate, setGenerate] = useState(false);
-    const generateId = useId('generate');
 
-    const [id] = useState(PublicKey.random().toHex());
-    const model = useYjsModel({ id, replicator });
+const Story = (args: Omit<RichTextEditorProps, 'model'>) => {
+  const [generate, setGenerate] = useState(false);
+  const generateId = useId('generate');
 
-    useDataGenerator({
-      generator: generate ? textGenerator : undefined,
-      options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
-    });
+  const [id] = useState(PublicKey.random().toHex());
+  const model = useYjsModel({ id, replicator });
 
-    return (
-      <main className='flex-1 min-w-0 p-4'>
-        <div id={generateId} className='flex'>
-          <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
-          Generate Data
-        </div>
-        <RichTextEditor
-          {...args}
-          model={model}
-          slots={{
-            editor: {
-              className: mx(
-                'z-0 rounded bg-white text-neutral-900 w-full p-4 dark:bg-neutral-850 dark:text-white min-bs-[12em]',
-                args.slots?.editor?.className,
-              ),
-            },
-          }}
-        />
-      </main>
-    );
-  },
+  useDataGenerator({
+    generator: generate ? textGenerator : undefined,
+    options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
+  });
+
+  return (
+    <main className='flex-1 min-w-0 p-4'>
+      <div id={generateId} className='flex'>
+        <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
+        Generate Data
+      </div>
+      <RichTextEditor
+        {...args}
+        model={model}
+        slots={{
+          editor: {
+            className: mx(
+              'z-0 rounded bg-white text-neutral-900 w-full p-4 dark:bg-neutral-850 dark:text-white min-bs-[12em]',
+              args.slots?.editor?.className,
+            ),
+          },
+        }}
+      />
+    </main>
+  );
+};
+
+export const WithYjs = {
   // TODO(wittjosiah): Decorator for doing this without clients being initialized?
-  decorators: [ClientDecorator({ count: 2 })],
+  render: () => <ClientRepeater count={2} Component={Story} />,
 };

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -3,28 +3,69 @@
 //
 
 import '@dxosTheme';
-import React, { useState } from 'react';
+import { markdown } from '@codemirror/lang-markdown';
+import { ArrowCircleUp } from '@phosphor-icons/react';
+import React, { StrictMode, useState } from 'react';
+import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
-import { fixedInsetFlexLayout, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, getSize, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
+import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
 import { useTextModel } from '../../model';
 
+const text = [
+  '',
+  '',
+  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
+  '',
+  '',
+].join('\n');
+
+const hyperLinkTooltip = () =>
+  createHyperlinkTooltip((el, url) => {
+    const web = new URL(url);
+    createRoot(el).render(
+      <StrictMode>
+        <div className='flex gap-1 items-center'>
+          <ArrowCircleUp className={mx(getSize(6), 'text-blue-500')} />
+          <p className='pr-1'>{web.origin}</p>
+        </div>
+      </StrictMode>,
+    );
+  });
+
 const Story = () => {
-  const [item] = useState({ text: new TextObject('Hello world!') });
+  const [item] = useState({ text: new TextObject(text) });
   const model = useTextModel({ text: item.text });
 
   return (
-    <div className={mx(fixedInsetFlexLayout, groupSurface, 'p-4 gap-4')}>
-      <TextEditor model={model} slots={{ root: { className: mx(inputSurface, 'px-2') } }} />
-      <pre>{JSON.stringify(model?.content?.toString(), null, 2)}</pre>
+    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+      <div className='flex justify-center p-8'>
+        <div className='w-[800px]'>
+          <TextEditor
+            model={model}
+            extensions={[
+              markdown(),
+              hyperlinkDecoration({ link: false }),
+              hyperLinkTooltip(),
+              // EditorView.domEventHandlers({
+              //   mousedown: (e, view) => {},
+              // }),
+            ]}
+            slots={{ root: { className: mx(inputSurface, 'p-2') } }}
+          />
+        </div>
+      </div>
     </div>
   );
 };
 
 export default {
   component: TextEditor,
+  decorators: [withTheme],
   render: Story,
 };
 

package/src/components/TextEditor/TextEditor.tsx

@@ -96,6 +96,7 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
             : [syntaxHighlighting(defaultHighlightStyle)]),
 
           // Replication.
+          // TODO(burdon): Move to default extensions.
           ...(content instanceof YText ? [yCollab(content, undefined)] : []),
 
           // Custom.