@dxos/react-ui-editor 0.8.4-main.3a94e84 → 0.8.4-main.3c1ae3b

package/src/stories/TextEditor.stories.tsx

@@ -2,32 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { javascript } from '@codemirror/lang-javascript';
 import { openSearchPanel } from '@codemirror/search';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { log } from '@dxos/log';
-import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import {
-  EditorStory,
-  allExtensions,
-  content,
-  defaultExtensions,
-  global,
-  largeWithImages,
-  links,
-  longText,
-  names,
-  renderLinkButton,
-  text,
-} from './components';
-import { editorMonospace } from '../defaults';
 import {
   InputModeExtensions,
-  autocomplete,
   decorateMarkdown,
   folding,
   image,
@@ -37,14 +21,29 @@ import {
   staticCompletion,
   typeahead,
 } from '../extensions';
-import { str } from '../testing';
+import { str } from '../util';
+
+import {
+  EditorStory,
+  allExtensions,
+  content,
+  defaultExtensions,
+  global,
+  largeWithImages,
+  longText,
+  names,
+  text,
+} from './components';
 
-const meta: Meta<typeof EditorStory> = {
+const meta = {
   title: 'ui/react-ui-editor/TextEditor',
   component: EditorStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { layout: 'fullscreen', controls: { disable: true } },
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+    controls: { disable: true },
+  },
+} satisfies Meta<typeof EditorStory>;
 
 export default meta;
 
@@ -52,7 +51,9 @@ export default meta;
 // Default
 //
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} />,
 };
 
@@ -60,7 +61,7 @@ export const Default = {
 // Everything
 //
 
-export const Everything = {
+export const Everything: Story = {
   render: () => <EditorStory text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
 };
 
@@ -68,7 +69,7 @@ export const Everything = {
 // Empty
 //
 
-export const Empty = {
+export const Empty: Story = {
   render: () => <EditorStory extensions={defaultExtensions} />,
 };
 
@@ -76,7 +77,7 @@ export const Empty = {
 // Readonly
 //
 
-export const Readonly = {
+export const Readonly: Story = {
   render: () => <EditorStory text={text} extensions={defaultExtensions} readOnly />,
 };
 
@@ -84,7 +85,7 @@ export const Readonly = {
 // No Extensions
 //
 
-export const NoExtensions = {
+export const NoExtensions: Story = {
   render: () => <EditorStory text={text} />,
 };
 
@@ -92,7 +93,7 @@ export const NoExtensions = {
 // Vim
 //
 
-export const Vim = {
+export const Vim: Story = {
   render: () => (
     <EditorStory
       text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
@@ -105,16 +106,16 @@ export const Vim = {
 // Listener
 //
 
-export const Listener = {
+export const Listener: Story = {
   render: () => (
     <EditorStory
       text={str('# Listener', '', content.footer)}
       extensions={[
         listener({
-          onFocus: (focusing) => {
+          onFocus: ({ focusing }) => {
             log.info('listener', { focusing });
           },
-          onChange: (text) => {
+          onChange: ({ text }) => {
             log.info('listener', { text });
           },
         }),
@@ -127,7 +128,7 @@ export const Listener = {
 // Folding
 //
 
-export const Folding = {
+export const Folding: Story = {
   render: () => <EditorStory text={text} extensions={[folding()]} />,
 };
 
@@ -135,7 +136,7 @@ export const Folding = {
 // Scrolling
 //
 
-export const Scrolling = {
+export const Scrolling: Story = {
   render: () => (
     <EditorStory
       text={str('# Large Document', '', longText)}
@@ -147,13 +148,13 @@ export const Scrolling = {
   ),
 };
 
-export const ScrollingWithImages = {
+export const ScrollingWithImages: Story = {
   render: () => (
     <EditorStory text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
   ),
 };
 
-export const ScrollTo = {
+export const ScrollTo: Story = {
   render: () => {
     // NOTE: Selection won't appear if text is reformatted.
     const word = 'Scroll to here...';
@@ -174,33 +175,9 @@ export const ScrollTo = {
 // Typescript
 //
 
-export const Typescript = {
+export const Typescript: Story = {
   render: () => (
-    <EditorStory
-      text={content.typescript}
-      lineNumbers
-      extensions={[editorMonospace, javascript({ typescript: true })]}
-    />
-  ),
-};
-
-//
-// Autocomplete
-//
-
-export const Autocomplete = {
-  render: () => (
-    <EditorStory
-      text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
-      extensions={[
-        decorateMarkdown({ renderLinkButton }),
-        autocomplete({
-          onSearch: (text) => {
-            return links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()));
-          },
-        }),
-      ]}
-    />
+    <EditorStory text={content.typescript} lineNumbers monospace extensions={javascript({ typescript: true })} />
   ),
 };
 
@@ -208,14 +185,13 @@ export const Autocomplete = {
 // Typeahead
 //
 
-const completions = ['type', 'AND', 'OR', 'NOT', 'dxos.org'];
+const completions = ['hello world!', 'dxos.org'];
 
-export const Typeahead = {
+export const Typeahead: Story = {
   render: () => (
     <EditorStory
       text={str('# Typeahead', '')}
       extensions={[
-        decorateMarkdown({ renderLinkButton }),
         typeahead({
           onComplete: staticCompletion(completions, { minLength: 2 }),
         }),
@@ -228,7 +204,7 @@ export const Typeahead = {
 // Mention
 //
 
-export const Mention = {
+export const Mention: Story = {
   render: () => (
     <EditorStory
       text={str('# Mention', '', 'Type @...', content.footer)}
@@ -245,7 +221,7 @@ export const Mention = {
 // Search
 //
 
-export const Search = {
+export const Search: Story = {
   render: () => (
     <EditorStory
       text={str('# Search', text)}

package/src/stories/components/EditorStory.tsx

@@ -3,68 +3,73 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import React, { type ReactNode, forwardRef, useEffect, useState, useImperativeHandle, useMemo } from 'react';
+import type * as Schema from 'effect/Schema';
+import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 
-import { Expando } from '@dxos/echo-schema';
+import { Obj, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
-import { live } from '@dxos/live-object';
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { useForwardedRef, useThemeContext } from '@dxos/react-ui';
+import { log } from '@dxos/log';
+import { useMergeRefs, useThemeContext } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { editorSlots, editorGutter } from '../../defaults';
+import { type EditorController, createEditorController } from '../../components';
+import { editorSlots } from '../../defaults';
 import {
   type DebugNode,
   type ThemeExtensionsOptions,
-  createDataExtensions,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   debugTree,
+  decorateMarkdown,
 } from '../../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../../hooks';
+import { type UseTextEditorProps, useTextEditor } from '../../hooks';
 
 // Type definitions.
 export type DebugMode = 'raw' | 'tree' | 'raw+tree';
 
 const defaultId = 'editor-' + PublicKey.random().toHex().slice(0, 8);
 
-export type StoryProps = Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'> &
+export type StoryProps = Pick<UseTextEditorProps, 'id' | 'scrollTo' | 'selection' | 'extensions'> &
   Pick<ThemeExtensionsOptions, 'slots'> & {
-    id?: string;
     debug?: DebugMode;
     debugCustom?: (view: EditorView) => ReactNode;
     text?: string;
-    object?: Expando;
+    // TODO(wittjosiah): Find a simpler way to define this type.
+    object?: Obj.Obj<Schema.Schema.Type<typeof Type.Expando>>;
     readOnly?: boolean;
     placeholder?: string;
     lineNumbers?: boolean;
+    monospace?: boolean;
     onReady?: (view: EditorView) => void;
   };
 
-export const EditorStory = forwardRef<EditorView | undefined, StoryProps>(
-  ({ debug, debugCustom, text, extensions: _extensions, ...props }, forwardedRef) => {
-    const attentionAttrs = useAttentionAttributes('testing');
+export const EditorStory = forwardRef<EditorController, StoryProps>(
+  ({ debug, debugCustom, text, extensions: extensionsParam, ...props }, forwardedRef) => {
+    const controllerRef = useRef<EditorController>(null);
+    const mergedRef = useMergeRefs([controllerRef, forwardedRef]);
+
+    const attentionAttrs = useAttentionAttributes('test-panel');
     const [tree, setTree] = useState<DebugNode>();
-    const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
-    const viewRef = useForwardedRef(forwardedRef);
-    const view = viewRef.current;
+    const [object] = useState(Obj.make(Type.Expando, { content: text ?? '' }));
+
     const extensions = useMemo(
-      () => (debug ? [_extensions, debugTree(setTree)].filter(isNonNullable) : _extensions),
-      [debug, _extensions],
+      () => (debug ? [extensionsParam, debugTree(setTree)].filter(isNonNullable) : extensionsParam),
+      [debug, extensionsParam],
     );
 
+    const view = controllerRef.current?.view;
     return (
-      <div className={mx('w-full h-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
-        <EditorComponent ref={viewRef} object={object} text={text} extensions={extensions} {...props} />
+      <div className={mx('is-full bs-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
+        <EditorComponent ref={mergedRef} object={object} text={text} extensions={extensions} {...props} />
 
         {debug && (
           <div
-            className='grid h-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
+            className='grid bs-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
             {...attentionAttrs}
           >
             {view && debugCustom?.(view)}
@@ -83,8 +88,10 @@ export const EditorStory = forwardRef<EditorView | undefined, StoryProps>(
 
 /**
  * Default story component.
+ * @deprecated
  */
-export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
+// TODO(burdon): Replace with <Editor.Root>
+export const EditorComponent = forwardRef<EditorController, StoryProps>(
   (
     {
       id = defaultId,
@@ -93,6 +100,7 @@ export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
       readOnly,
       placeholder = 'New document.',
       lineNumbers,
+      monospace,
       scrollTo,
       selection,
       extensions,
@@ -111,18 +119,21 @@ export const EditorComponent = forwardRef<EditorView | undefined, StoryProps>(
         selection,
         initialValue: text,
         extensions: [
-          createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
-          createMarkdownExtensions({ themeMode }),
-          createThemeExtensions({ themeMode, syntaxHighlighting: true, slots }),
-          editorGutter,
+          createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true, search: true }),
+          createThemeExtensions({ monospace, themeMode, syntaxHighlighting: true, slots }),
+          createMarkdownExtensions(),
+          decorateMarkdown(),
           extensions || [],
         ],
       }),
       [id, object, extensions, themeMode],
     );
 
-    useImperativeHandle(forwardedRef, () => view, [view]);
+    // External controller.
+    useImperativeHandle(forwardedRef, () => {
+      log.info('view updated', { id });
+      return createEditorController(view);
+    }, [id, view]);
 
     useEffect(() => {
       if (view) {

package/src/stories/components/util.tsx

@@ -19,14 +19,14 @@ import {
   linkTooltip,
   table,
 } from '../../extensions';
-import { str } from '../../testing';
-import { createRenderer } from '../../util';
+import { createRenderer, str } from '../../util';
 
 export const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
 export const img = '![dxos](https://dxos.network/dxos-logotype-blue.png)';
 
 export const code = str(
+  // prettier-ignore
   '// Code',
   'const Component = () => {',
   '  const x = 100;',
@@ -38,7 +38,7 @@ export const code = str(
 // Content blocks for stories
 export const content = {
   tasks: str(
-    //
+    // prettier-ignore
     '### TaskList',
     '',
     `- [x] ${faker.lorem.sentences()}`,
@@ -50,7 +50,7 @@ export const content = {
   ),
 
   bullets: str(
-    //
+    // prettier-ignore
     '### BulletList',
     '',
     `- ${faker.lorem.sentences()}`,
@@ -62,7 +62,7 @@ export const content = {
   ),
 
   numbered: str(
-    //
+    // prettier-ignore
     '### OrderedList (part 1)',
     '',
     `1. ${faker.lorem.sentences()}`,
@@ -81,11 +81,34 @@ export const content = {
 
   typescript: code,
 
-  codeblocks: str('### Code', '', '```bash', '$ ls -las', '```', '', '```tsx', code, '```', ''),
+  codeblocks: str(
+    // prettier-ignore
+    '### Code',
+    '',
+    '```bash',
+    '$ ls -las',
+    '```',
+    '',
+    '```tsx',
+    code,
+    '```',
+    '',
+  ),
 
-  comment: str('<!--', 'A comment', '-->', '', 'No comment.', 'Partial comment. <!-- comment. -->'),
+  comment: str(
+    // prettier-ignore
+    '### Comment',
+    '',
+    '<!--',
+    'A comment',
+    '-->',
+    '',
+    'Partial comment. <!-- comment. -->',
+    '',
+  ),
 
   links: str(
+    // prettier-ignore
     '### Links',
     '',
     'This is a naked link https://dxos.org within a sentence.',
@@ -97,6 +120,7 @@ export const content = {
   ),
 
   table: str(
+    // prettier-ignore
     '### Tables',
     '',
     `| ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} |`,
@@ -113,9 +137,16 @@ export 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(
+    // prettier-ignore
+    '### Formatting',
+    '',
+    'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
+    '',
+  ),
 
   blockquotes: str(
+    // prettier-ignore
     '### Blockquotes',
     '',
     '> This is a block quote.',
@@ -154,6 +185,7 @@ export const text = str(
   '---',
   '## Misc',
   content.codeblocks,
+  content.comment,
   content.table,
   content.image,
   content.footer,

package/src/styles/markdown.ts

@@ -16,11 +16,11 @@ const headings: Record<HeadingLevel, string> = {
   6: '', // TODO(burdon): Should be text-base, but that's a color in our system.
 };
 
-export const theme = {
+export const markdownTheme = {
   code: 'font-mono !no-underline text-neutral-700 dark:text-neutral-300',
   codeMark: 'font-mono text-primary-500',
   mark: 'opacity-50',
   heading: (level: HeadingLevel) => {
-    return mx(headings[level], 'dark:text-primary-400');
+    return mx(headings[level], 'dark:text-neutral-400');
   },
 };