@dxos/react-ui-editor 0.6.9 → 0.6.10-main.3cfcc89

package/src/TextEditor.stories.tsx

@@ -2,13 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxosTheme';
+import '@dxos-theme';
 
 import { markdown } from '@codemirror/lang-markdown';
+import { openSearchPanel } from '@codemirror/search';
+import { type Extension } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
 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, useState } from 'react';
+import React, { type FC, type KeyboardEvent, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { create, Expando } from '@dxos/echo-schema';
@@ -50,6 +53,8 @@ import {
   type Comment,
   type CommentsOptions,
   type EditorSelectionState,
+  debugTree,
+  type DebugNode,
 } from './extensions';
 import { renderRoot } from './extensions/util';
 import { useTextEditor, type UseTextEditorProps } from './hooks';
@@ -66,7 +71,7 @@ const img = '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1
 const content = {
   tasks: str(
     //
-    '### Task List',
+    '### TaskList',
     '',
     `- [x] ${faker.lorem.sentences()}`,
     `- [ ] ${faker.lorem.sentences()}`,
@@ -109,7 +114,7 @@ const content = {
   code: str(
     '### Code',
     '',
-    '```',
+    '```bash',
     '$ ls -las',
     '```',
     '',
@@ -199,6 +204,7 @@ const text = str(
   content.table,
   content.image,
   content.footer,
+  '=== LAST LINE ===',
 );
 
 const links = [
@@ -212,17 +218,15 @@ const links = [
 const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
 
 const hover =
-  'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
+  'rounded-sm text-baseText text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
 const renderLinkTooltip = (el: Element, url: string) => {
   const web = new URL(url);
   createRoot(el).render(
-    <StrictMode>
-      <a href={url} target='_blank' rel='noreferrer' className={hover}>
-        {web.origin}
-        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1')} />
-      </a>
-    </StrictMode>,
+    <a href={url} target='_blank' rel='noreferrer' className={hover}>
+      {web.origin}
+      <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1')} />
+    </a>,
   );
 };
 
@@ -234,26 +238,22 @@ const Key: FC<{ char: string }> = ({ char }) => (
 
 const onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
   createRoot(el).render(
-    <StrictMode>
-      <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
-        <div>Create comment</div>
-        <div className='flex gap-1'>
-          {keySymbols(parseShortcut(shortcut)).map((char) => (
-            <Key key={char} char={char} />
-          ))}
-        </div>
+    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
+      <div>Create comment</div>
+      <div className='flex gap-1'>
+        {keySymbols(parseShortcut(shortcut)).map((char) => (
+          <Key key={char} char={char} />
+        ))}
       </div>
-    </StrictMode>,
+    </div>,
   );
 };
 
 const renderLinkButton = (el: Element, url: string) => {
   createRoot(el).render(
-    <StrictMode>
-      <a href={url} target='_blank' rel='noreferrer' className={hover}>
-        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-[2px]')} />
-      </a>
-    </StrictMode>,
+    <a href={url} target='_blank' rel='noreferrer' className={hover}>
+      <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-[2px]')} />
+    </a>,
   );
 };
 
@@ -263,29 +263,34 @@ const renderLinkButton = (el: Element, url: string) => {
 
 type StoryProps = {
   id?: string;
+  debug?: boolean;
   text?: string;
   readonly?: boolean;
   placeholder?: string;
+  onReady?: (view: EditorView) => void;
 } & Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'>;
 
 const Story = ({
   id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
+  debug,
   text,
   extensions,
   readonly,
   placeholder = 'New document.',
   scrollTo,
   selection,
+  onReady,
 }: StoryProps) => {
   const [object] = useState(createEchoObject(create(Expando, { content: text ?? '' })));
   const { themeMode } = useThemeContext();
-  const { parentRef, focusAttributes } = useTextEditor(
+  const [tree, setTree] = useState<DebugNode>();
+  const { parentRef, focusAttributes, view } = useTextEditor(
     () => ({
       id,
       initialValue: text,
       extensions: [
         createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-        createBasicExtensions({ readonly, placeholder }),
+        createBasicExtensions({ readonly, placeholder, scrollPastEnd: true }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({
           themeMode,
@@ -296,6 +301,7 @@ const Story = ({
           },
         }),
         extensions || [],
+        debug ? debugTree(setTree) : [],
       ],
       scrollTo,
       selection,
@@ -303,7 +309,24 @@ const Story = ({
     [object, extensions, themeMode],
   );
 
-  return <div role='none' className='flex w-full overflow-hidden' ref={parentRef} {...focusAttributes} />;
+  useEffect(() => {
+    if (view) {
+      onReady?.(view);
+    }
+  }, [view]);
+
+  return (
+    <div className='flex w-full'>
+      <div role='none' className='flex w-full overflow-hidden' ref={parentRef} {...focusAttributes} />
+      {debug && (
+        <div className='w-[800px] border-l border-separator overflow-auto'>
+          <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>
+            {JSON.stringify(tree, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default {
@@ -313,7 +336,7 @@ export default {
   parameters: { translations, layout: 'fullscreen' },
 };
 
-const defaults = [
+const defaultExtensions: Extension[] = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
@@ -323,37 +346,34 @@ const defaults = [
 ];
 
 export const Default = {
-  render: () => <Story text={text} extensions={defaults} selection={{ anchor: 99, head: 110 }} />,
+  render: () => <Story text={text} extensions={defaultExtensions} 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 Empty = {
+  render: () => <Story extensions={defaultExtensions} />,
 };
 
 export const Readonly = {
-  render: () => <Story text={text} extensions={defaults} readonly />,
-};
-
-export const Empty = {
-  render: () => <Story extensions={defaults} />,
+  render: () => <Story text={text} extensions={defaultExtensions} readonly />,
 };
 
 export const NoExtensions = {
   render: () => <Story text={text} />,
 };
 
-export const Folding = {
-  render: () => <Story text={text} extensions={[editorGutter, folding()]} />,
+export const Vim = {
+  render: () => (
+    <Story
+      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
+      extensions={[defaultExtensions, InputModeExtensions.vim]}
+    />
+  ),
 };
 
+//
+// Scrolling
+//
+
 const longText = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
 
 const largeWithImages = faker.helpers
@@ -367,12 +387,12 @@ const headings = str(
     .flat(),
 );
 
-export const Headings = {
-  render: () => <Story text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
-};
-
 const global = new Map<string, EditorSelectionState>();
 
+export const Folding = {
+  render: () => <Story text={text} extensions={[editorGutter, folding()]} />,
+};
+
 export const Scrolling = {
   render: () => (
     <Story
@@ -386,7 +406,34 @@ export const Scrolling = {
 };
 
 export const ScrollingWithImages = {
-  render: () => <Story text={str('# Large Document', '', largeWithImages)} extensions={[image()]} />,
+  render: () => (
+    <Story text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
+  ),
+};
+
+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={defaultExtensions}
+        scrollTo={idx}
+        selection={{ anchor: idx, head: idx + word.length }}
+      />
+    );
+  },
+};
+
+//
+// Markdown
+//
+
+export const Headings = {
+  render: () => <Story text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
 };
 
 export const Links = {
@@ -419,35 +466,39 @@ export const OrderedList = {
 };
 
 export const TaskList = {
-  render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <Story text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug />,
 };
 
 export const Table = {
-  render: () => <Story text={str(content.table, content.footer)} extensions={[table()]} />,
+  render: () => <Story text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
-export const Autocomplete = {
+export const CommentedOut = {
   render: () => (
     <Story
-      text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
+      text={str('# Commented out', '', content.comment, content.footer)}
       extensions={[
-        decorateMarkdown({ renderLinkButton }),
-        autocomplete({
-          onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
-        }),
+        decorateMarkdown(),
+        markdown(),
+        // commentBlock()
       ]}
     />
   ),
 };
 
-export const CommentedOut = {
+//
+// Custom
+//
+
+export const Autocomplete = {
   render: () => (
     <Story
-      text={str('# Commented out', '', content.comment, content.footer)}
+      text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
       extensions={[
-        decorateMarkdown(),
-        markdown(),
-        // commentBlock()
+        decorateMarkdown({ renderLinkButton }),
+        autocomplete({
+          onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+        }),
       ]}
     />
   ),
@@ -466,7 +517,13 @@ export const Mention = {
   ),
 };
 
-const CommandDialog: FC<{ onClose: (action?: CommandAction) => void }> = ({ onClose }) => {
+export const Search = {
+  render: () => (
+    <Story text={str('# Search', text)} extensions={defaultExtensions} onReady={(view) => openSearchPanel(view)} />
+  ),
+};
+
+const CommandDialog = ({ onClose }: { onClose: (action?: CommandAction) => void }) => {
   const [text, setText] = useState('');
   const handleInsert = () => {
     onClose(text.length ? { insert: text + '\n' } : undefined);
@@ -561,15 +618,6 @@ export const Comments = {
   },
 };
 
-export const Vim = {
-  render: () => (
-    <Story
-      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
-      extensions={[defaults, InputModeExtensions.vim]}
-    />
-  ),
-};
-
 export const Annotations = {
   render: () => <Story text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />,
 };
@@ -589,8 +637,6 @@ export const DND = {
   ),
 };
 
-const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
-
 export const Listener = {
   render: () => (
     <Story
@@ -609,6 +655,8 @@ export const Listener = {
   ),
 };
 
+const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
+
 export const Typewriter = {
   render: () => (
     <Story

package/src/components/Toolbar/Toolbar.tsx

@@ -12,6 +12,7 @@ import {
   ListBullets,
   ListChecks,
   ListNumbers,
+  MagnifyingGlass,
   Paragraph,
   Quotes,
   TextStrikethrough,
@@ -140,89 +141,6 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   );
 };
 
-//
-// View Mode
-//
-
-const ViewModeIcons: Record<EditorViewMode, Icon> = {
-  preview: PencilSimple,
-  readonly: PencilSimpleSlash,
-  source: MarkdownLogo,
-};
-
-const MarkdownView = ({ mode }: { mode: EditorViewMode }) => {
-  const { t } = useTranslation(translationKey);
-  const { onAction } = useToolbarContext('ViewMode');
-  const ModeIcon = ViewModeIcons[mode ?? 'preview'];
-  const suppressNextTooltip = useRef<boolean>(false);
-  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
-  const [selectOpen, setSelectOpen] = useState<boolean>(false);
-  return (
-    <Tooltip.Root
-      open={tooltipOpen}
-      onOpenChange={(nextOpen) => {
-        if (nextOpen && suppressNextTooltip.current) {
-          suppressNextTooltip.current = false;
-          return setTooltipOpen(false);
-        } else {
-          return setTooltipOpen(nextOpen);
-        }
-      }}
-    >
-      {/* TODO(thure): `Select` encounters a ref error if used here (repro: select a heading, then select another
-            heading). Determine the root cause and fix or report to Radix. */}
-      <DropdownMenu.Root
-        open={selectOpen}
-        onOpenChange={(nextOpen: boolean) => {
-          if (!nextOpen) {
-            suppressNextTooltip.current = true;
-          }
-          return setSelectOpen(nextOpen);
-        }}
-      >
-        <Tooltip.Trigger asChild>
-          <NaturalToolbar.Button asChild>
-            <DropdownMenu.Trigger asChild>
-              <Button variant='ghost' classNames={buttonStyles}>
-                <span className='sr-only'>{t('mode label')}</span>
-                <ModeIcon className={iconStyles} />
-                <CaretDown />
-              </Button>
-            </DropdownMenu.Trigger>
-          </NaturalToolbar.Button>
-        </Tooltip.Trigger>
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content classNames='is-min md:is-min' onCloseAutoFocus={(e) => e.preventDefault()}>
-            <DropdownMenu.Viewport>
-              {EditorViewModes.map((value) => {
-                const Icon = ViewModeIcons[value];
-                return (
-                  <DropdownMenu.CheckboxItem
-                    key={value}
-                    checked={value === mode}
-                    onClick={() => onAction?.({ type: 'view-mode', data: value })}
-                  >
-                    <Icon className={iconStyles} />
-                    <span className='whitespace-nowrap grow'>{t(`${value} mode label`)}</span>
-                    <Check className={value === mode ? 'visible' : 'invisible'} />
-                  </DropdownMenu.CheckboxItem>
-                );
-              })}
-            </DropdownMenu.Viewport>
-            <DropdownMenu.Arrow />
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Root>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {t('view mode label')}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-};
-
 //
 // Heading
 //
@@ -474,28 +392,109 @@ const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
   );
 };
 
+//
+// View Mode
+//
+
+const ViewModeIcons: Record<EditorViewMode, Icon> = {
+  preview: PencilSimple,
+  readonly: PencilSimpleSlash,
+  source: MarkdownLogo,
+};
+
+const MarkdownView = ({ mode }: { mode: EditorViewMode }) => {
+  const { t } = useTranslation(translationKey);
+  const { onAction } = useToolbarContext('ViewMode');
+  const ModeIcon = ViewModeIcons[mode ?? 'preview'];
+  const suppressNextTooltip = useRef<boolean>(false);
+  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+  const [selectOpen, setSelectOpen] = useState<boolean>(false);
+  return (
+    <Tooltip.Root
+      open={tooltipOpen}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen && suppressNextTooltip.current) {
+          suppressNextTooltip.current = false;
+          return setTooltipOpen(false);
+        } else {
+          return setTooltipOpen(nextOpen);
+        }
+      }}
+    >
+      {/* TODO(thure): `Select` encounters a ref error if used here (repro: select a heading, then select another
+            heading). Determine the root cause and fix or report to Radix. */}
+      <DropdownMenu.Root
+        open={selectOpen}
+        onOpenChange={(nextOpen: boolean) => {
+          if (!nextOpen) {
+            suppressNextTooltip.current = true;
+          }
+          return setSelectOpen(nextOpen);
+        }}
+      >
+        <Tooltip.Trigger asChild>
+          <NaturalToolbar.Button asChild>
+            <DropdownMenu.Trigger asChild>
+              <Button variant='ghost' classNames={buttonStyles}>
+                <span className='sr-only'>{t('mode label')}</span>
+                <ModeIcon className={iconStyles} />
+                <CaretDown />
+              </Button>
+            </DropdownMenu.Trigger>
+          </NaturalToolbar.Button>
+        </Tooltip.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content classNames='is-min md:is-min' onCloseAutoFocus={(e) => e.preventDefault()}>
+            <DropdownMenu.Viewport>
+              {EditorViewModes.map((value) => {
+                const Icon = ViewModeIcons[value];
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={value}
+                    checked={value === mode}
+                    onClick={() => onAction?.({ type: 'view-mode', data: value })}
+                  >
+                    <Icon className={iconStyles} />
+                    <span className='whitespace-nowrap grow'>{t(`${value} mode label`)}</span>
+                    <Check className={value === mode ? 'visible' : 'invisible'} />
+                  </DropdownMenu.CheckboxItem>
+                );
+              })}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {t('view mode label')}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
 //
 // Actions
 //
 
-// TODO(burdon): Make extensible.
 const MarkdownActions = () => {
   const { onAction, state } = useToolbarContext('MarkdownActions');
   const { t } = useTranslation(translationKey);
 
-  let toolTipKey = 'comment label';
+  let commentToolTipKey = 'comment label';
   if (state?.comment) {
-    toolTipKey = 'selection overlaps existing comment label';
+    commentToolTipKey = 'selection overlaps existing comment label';
   } else if (state?.selection === false) {
-    toolTipKey = 'select text to comment label';
+    commentToolTipKey = 'select text to comment label';
   }
 
   return (
     <>
-      {/* TODO(burdon): Toggle readonly state. */}
-      {/* <ToolbarButton value='comment' Icon={BookOpenText} onClick={() => onAction?.({ type: 'comment' })}> */}
-      {/*  {t('comment label')} */}
-      {/* </ToolbarButton> */}
+      <ToolbarButton value='search' Icon={MagnifyingGlass} onClick={() => onAction?.({ type: 'search' })}>
+        {t('search label')}
+      </ToolbarButton>
       <ToolbarButton
         value='comment'
         Icon={ChatText}
@@ -503,7 +502,7 @@ const MarkdownActions = () => {
         onClick={() => onAction?.({ type: 'comment' })}
         disabled={!state || state.comment || !state.selection}
       >
-        {t(toolTipKey)}
+        {t(commentToolTipKey)}
       </ToolbarButton>
     </>
   );

package/src/defaults.ts

@@ -4,32 +4,37 @@
 
 import { EditorView } from '@codemirror/view';
 
-import { getToken } from './styles';
+import { mx } from '@dxos/react-ui-theme';
+
+import { fontMono } from './styles';
+
+const margin = '!mt-[16px]';
 
 /**
  * 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] !mb-[32px] !mli-auto w-full max-w-[min(50rem,100%-4rem)]';
+export const editorContent = mx(margin, '!mli-auto w-full max-w-[min(50rem,100%-2rem)]');
+
+/**
+ * Margin for numbers.
+ */
+export const editorFullWidth = mx(margin, '!ml-[3rem]');
 
 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({
+// TODO(burdon): Define scrollMargins for fixed gutter.
+export const editorGutter = EditorView.theme({
+  // Match margin from content.
   '.cm-gutters': {
-    // Match margin from content.
     marginTop: '16px',
-    marginBottom: '16px',
-    // Inside within content margin.
-    marginRight: '-32px',
-    width: '32px',
-    backgroundColor: 'transparent !important',
   },
 });
 
-export const editorMonospace = EditorView.baseTheme({
+export const editorMonospace = EditorView.theme({
   '.cm-content': {
-    fontFamily: `${getToken('fontFamily.mono')} !important`,
+    fontFamily: fontMono,
   },
 });

package/src/extensions/annotations.ts

@@ -69,10 +69,10 @@ export const annotations = (options: AnnotationOptions = {}): Extension => {
   ];
 };
 
-const styles = EditorView.baseTheme({
+const styles = EditorView.theme({
   '.cm-annotation': {
     textDecoration: 'underline',
     textDecorationStyle: 'wavy',
-    textDecorationColor: 'red',
+    textDecorationColor: 'var(--dx-error)',
   },
 });