@dxos/react-ui-editor 0.6.5 → 0.6.6-main.e1a6e1f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.6.5",
+  "version": "0.6.6-main.e1a6e1f",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -21,7 +21,7 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.17.0",
+    "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.6.0",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-markdown": "^6.2.5",
@@ -35,7 +35,7 @@
     "@fluentui/react-tabster": "^9.19.0",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
-    "@lezer/markdown": "^1.2.0",
+    "@lezer/markdown": "^1.3.0",
     "@radix-ui/react-context": "^1.0.0",
     "@replit/codemirror-vim": "^6.0.14",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
@@ -47,19 +47,19 @@
     "lodash.sortby": "^4.7.0",
     "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.6.5",
-    "@dxos/context": "0.6.5",
-    "@dxos/debug": "0.6.5",
-    "@dxos/display-name": "0.6.5",
-    "@dxos/echo-schema": "0.6.5",
-    "@dxos/automerge": "0.6.5",
-    "@dxos/log": "0.6.5",
-    "@dxos/invariant": "0.6.5",
-    "@dxos/protocols": "0.6.5",
-    "@dxos/react-ui-theme": "0.6.5",
-    "@dxos/react-ui": "0.6.5",
-    "@dxos/react-async": "0.6.5",
-    "@dxos/util": "0.6.5"
+    "@dxos/async": "0.6.6-main.e1a6e1f",
+    "@dxos/automerge": "0.6.6-main.e1a6e1f",
+    "@dxos/context": "0.6.6-main.e1a6e1f",
+    "@dxos/debug": "0.6.6-main.e1a6e1f",
+    "@dxos/invariant": "0.6.6-main.e1a6e1f",
+    "@dxos/echo-schema": "0.6.6-main.e1a6e1f",
+    "@dxos/log": "0.6.6-main.e1a6e1f",
+    "@dxos/display-name": "0.6.6-main.e1a6e1f",
+    "@dxos/protocols": "0.6.6-main.e1a6e1f",
+    "@dxos/react-async": "0.6.6-main.e1a6e1f",
+    "@dxos/react-ui": "0.6.6-main.e1a6e1f",
+    "@dxos/react-ui-theme": "0.6.6-main.e1a6e1f",
+    "@dxos/util": "0.6.6-main.e1a6e1f"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -85,22 +85,22 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.5.0",
-    "@dxos/automerge": "0.6.5",
-    "@dxos/config": "0.6.5",
-    "@dxos/echo-signals": "0.6.5",
-    "@dxos/keyboard": "0.6.5",
-    "@dxos/echo-typegen": "0.6.5",
-    "@dxos/react-ui": "0.6.5",
-    "@dxos/random": "0.6.5",
-    "@dxos/react-client": "0.6.5",
-    "@dxos/storybook-utils": "0.6.5",
-    "@braneframe/types": "0.6.5"
+    "@dxos/automerge": "0.6.6-main.e1a6e1f",
+    "@dxos/config": "0.6.6-main.e1a6e1f",
+    "@dxos/echo-signals": "0.6.6-main.e1a6e1f",
+    "@dxos/keyboard": "0.6.6-main.e1a6e1f",
+    "@dxos/echo-typegen": "0.6.6-main.e1a6e1f",
+    "@dxos/random": "0.6.6-main.e1a6e1f",
+    "@dxos/react-client": "0.6.6-main.e1a6e1f",
+    "@dxos/react-ui": "0.6.6-main.e1a6e1f",
+    "@dxos/storybook-utils": "0.6.6-main.e1a6e1f",
+    "@braneframe/types": "0.6.6-main.e1a6e1f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-client": "0.6.5"
+    "@dxos/react-client": "0.6.6-main.e1a6e1f"
   },
   "publishConfig": {
     "access": "public"

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

@@ -23,7 +23,7 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor, type TextEditorProps } from './TextEditor';
 import {
-  EditorModes,
+  InputModeExtensions,
   annotations,
   autocomplete,
   blast,
@@ -511,7 +511,7 @@ export const Vim = {
   render: () => (
     <Story
       text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', text.paragraphs)}
-      extensions={[defaults, EditorModes.vim]}
+      extensions={[defaults, InputModeExtensions.vim]}
     />
   ),
 };

package/src/components/TextEditor/TextEditor.tsx

@@ -19,7 +19,7 @@ import { log } from '@dxos/log';
 import { useDefaultValue } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
-import { documentId, editorMode, focusEvent } from '../../extensions';
+import { documentId, editorInputMode, focusEvent } from '../../extensions';
 import { logChanges } from '../../util';
 
 export type CursorInfo = {
@@ -143,7 +143,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       }
 
       // Remove tabster attribute (rely on custom keymap).
-      if (state.facet(editorMode).noTabster) {
+      if (state.facet(editorInputMode).noTabster) {
         rootRef.current?.removeAttribute('data-tabster');
       }
 
@@ -153,7 +153,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
         log('destroy', { id, instanceId });
         view?.destroy();
       };
-    }, [id, selection, scrollTo, editorMode, extensions]);
+    }, [id, selection, scrollTo, extensions]);
 
     // Focus editor on Enter (e.g., when tabbing to this component).
     const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -10,13 +10,14 @@ import { TextType } from '@braneframe/types';
 import { create } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { createDocAccessor } from '@dxos/react-client/echo';
+import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
 import { Tooltip, useThemeContext } from '@dxos/react-ui';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import {
+  type Action,
   type Comment,
   comments,
   createBasicExtensions,
@@ -24,6 +25,7 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
+  type EditorViewMode,
   formattingKeymap,
   image,
   table,
@@ -37,15 +39,16 @@ faker.seed(101);
 
 const Story: FC<{ content: string }> = ({ content }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(create(TextType, { content }));
+  const [text] = useState(createEchoObject(create(TextType, { content })));
   const [formattingState, formattingObserver] = useFormattingState();
+  const [viewMode, setViewMode] = useState<EditorViewMode>('preview');
   const { parentRef, view } = useTextEditor(() => {
     return {
       id: text.id,
       doc: text.content,
       extensions: [
         formattingObserver,
-        createBasicExtensions(),
+        createBasicExtensions({ readonly: viewMode === 'readonly' }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
         createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
@@ -56,15 +59,21 @@ const Story: FC<{ content: string }> = ({ content }) => {
             return id;
           },
         }),
-        decorateMarkdown(),
         formattingKeymap(),
         image(),
-        table(),
+        ...(viewMode !== 'source' ? [decorateMarkdown(), table()] : []),
       ],
     };
-  }, [text, formattingObserver, themeMode]);
+  }, [text, formattingObserver, viewMode, themeMode]);
 
-  const handleAction = useActionHandler(view);
+  const handleToolbarAction = useActionHandler(view);
+  const handleAction = (action: Action) => {
+    if (action.type === 'view-mode') {
+      setViewMode(action.data);
+    } else {
+      handleToolbarAction?.(action);
+    }
+  };
 
   const [_comments, setComments] = useState<Comment[]>([]);
   useComments(view, text.id, _comments);
@@ -73,6 +82,7 @@ const Story: FC<{ content: string }> = ({ content }) => {
     <Tooltip.Provider>
       <div role='none' className='fixed inset-0 flex flex-col'>
         <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+          <Toolbar.View mode={viewMode} />
           <Toolbar.Markdown />
           <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
           <Toolbar.Separator />

package/src/components/Toolbar/Toolbar.tsx

@@ -26,6 +26,9 @@ import {
   TextItalic,
   CaretDown,
   Check,
+  PencilSimpleSlash,
+  MarkdownLogo,
+  PencilSimple,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';
@@ -45,7 +48,7 @@ import {
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { type Action, type ActionType, type Formatting } from '../../extensions';
+import { type EditorViewMode, type Action, type ActionType, type Formatting, EditorViewModes } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const iconStyles = getSize(5);
@@ -60,7 +63,7 @@ const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    state: (Formatting & { comment?: boolean; selection?: boolean }) | undefined;
+    state: (Formatting & { comment?: boolean; mode?: EditorViewMode; selection?: boolean }) | undefined;
     onAction?: (action: Action) => void;
   }>
 >;
@@ -72,7 +75,10 @@ const ToolbarRoot = ({ children, onAction, classNames, state }: ToolbarProps) =>
     <ToolbarContextProvider onAction={onAction} state={state}>
       <DensityProvider density='fine'>
         <ElevationProvider elevation='chrome'>
-          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1', classNames]}>
+          <NaturalToolbar.Root
+            classNames={['p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden', classNames]}
+            style={{ contain: 'layout' }}
+          >
             {children}
           </NaturalToolbar.Root>
         </ElevationProvider>
@@ -134,6 +140,89 @@ 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
 //
@@ -420,6 +509,7 @@ export const Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
+  View: MarkdownView,
   Markdown: MarkdownStandard,
   Custom: MarkdownCustom,
   Actions: MarkdownActions,

package/src/extensions/autocomplete.ts

@@ -19,13 +19,14 @@ import { keymap } from '@codemirror/view';
 export type AutocompleteResult = Completion;
 
 export type AutocompleteOptions = {
+  activateOnTyping?: boolean;
   onSearch: (text: string) => Completion[];
 };
 
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
+export const autocomplete = ({ activateOnTyping, onSearch }: AutocompleteOptions) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -35,7 +36,7 @@ export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping: false,
+      activateOnTyping,
 
       // closeOnBlur: false,
       // defaultKeymap: false,
@@ -44,7 +45,6 @@ export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
       tooltipClass: () => 'shadow rounded',
     }),
 
-    // TODO(burdon): Option to create new page?
     // TODO(burdon): Optional decoration via addToOptions
     markdownLanguage.data.of({
       autocomplete: (context: CompletionContext): CompletionResult | null => {

package/src/extensions/comments.ts

@@ -40,6 +40,7 @@ import { callbackWrapper } from '../util';
 // State management.
 //
 
+// TODO(wittjosiah): Factor out, not comments-specific.
 const documentId = Facet.define<string | undefined, string | undefined>({ combine: (values) => values[0] });
 
 type CommentState = {

package/src/extensions/debug.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, type RangeSet, StateField, type Transaction } from '@codemirror/state';
+
+// eslint-disable-next-line no-console
+export const debugNodeLogger = (log: (...args: any[]) => void = console.log) => {
+  const logTokens = (state: EditorState) => syntaxTree(state).iterate({ enter: (node) => log(node.type) });
+  return StateField.define<any>({
+    create: (state) => logTokens(state),
+    update: (_: RangeSet<any>, tr: Transaction) => logTokens(tr.state),
+  });
+};

package/src/extensions/index.ts

@@ -10,6 +10,7 @@ export * from './blast';
 export * from './command';
 export * from './comments';
 export * from './cursor';
+export * from './debug';
 export * from './doc';
 export * from './dnd';
 export * from './factories';

package/src/extensions/markdown/action.ts

@@ -25,6 +25,7 @@ import {
 import { createComment } from '../comments';
 
 export type ActionType =
+  | 'view-mode'
   | 'blockquote'
   | 'strong'
   | 'codeblock'

package/src/extensions/modes.ts

@@ -9,28 +9,31 @@ import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 
 export const focusEvent = 'focus.container';
 
-export type EditorMode = 'default' | 'vim' | 'vscode' | undefined;
+export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
+export type EditorViewMode = (typeof EditorViewModes)[number];
+export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
+export type EditorInputMode = (typeof EditorInputModes)[number];
 
-export type EditorConfig = {
+export type EditorInputConfig = {
   type: string;
   noTabster?: boolean;
 };
 
-export const editorMode = Facet.define<EditorConfig, EditorConfig>({
+export const editorInputMode = Facet.define<EditorInputConfig, EditorInputConfig>({
   combine: (modes) => modes[0] ?? {},
 });
 
-export const EditorModes: { [mode: string]: Extension } = {
+export const InputModeExtensions: { [mode: string]: Extension } = {
   default: [],
   vscode: [
     // https://github.com/replit/codemirror-vscode-keymap
-    editorMode.of({ type: 'vscode' }),
+    editorInputMode.of({ type: 'vscode' }),
     keymap.of(vscodeKeymap),
   ],
   vim: [
     // https://github.com/replit/codemirror-vim
     vim(),
-    editorMode.of({ type: 'vim', noTabster: true }),
+    editorInputMode.of({ type: 'vim', noTabster: true }),
     keymap.of([
       {
         key: 'Alt-Escape',

package/src/hooks/useTextEditor.stories.tsx

@@ -13,10 +13,9 @@ import { withTheme } from '@dxos/storybook-utils';
 import { useActionHandler } from './useActionHandler';
 import { useTextEditor } from './useTextEditor';
 import { Toolbar } from '../components';
-import { createBasicExtensions, createThemeExtensions } from '../extensions';
+import { createBasicExtensions, createThemeExtensions, InputModeExtensions } from '../extensions';
 import {
-  type EditorMode,
-  EditorModes,
+  type EditorInputMode,
   decorateMarkdown,
   createMarkdownExtensions,
   formattingKeymap,
@@ -36,13 +35,13 @@ type StoryProps = {
 const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const { themeMode } = useThemeContext();
   const [formattingState, trackFormatting] = useFormattingState();
-  const [editorMode, setEditorMode] = useState<EditorMode>('default');
+  const [editorInputMode, setEditorInputMode] = useState<EditorInputMode>('default');
   const { parentRef, view } = useTextEditor(
     () => ({
       autoFocus,
       doc,
       extensions: [
-        editorMode ? EditorModes[editorMode] : [],
+        editorInputMode ? InputModeExtensions[editorInputMode] : [],
         createBasicExtensions({ placeholder, lineWrapping: true, readonly }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode }),
@@ -53,7 +52,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         trackFormatting,
       ],
     }),
-    [editorMode, themeMode, placeholder, readonly],
+    [editorInputMode, themeMode, placeholder, readonly],
   );
 
   const handleAction = useActionHandler(view);
@@ -64,7 +63,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
     <div role='none' className={mx('fixed inset-0 flex flex-col')}>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
-        <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
+        <EditorInputModeToolbar editorInputMode={editorInputMode} setEditorInputMode={setEditorInputMode} />
       </Toolbar.Root>
       <div role='none' className='grow overflow-hidden'>
         <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
@@ -73,17 +72,17 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   );
 };
 
-const EditorModeToolbar = ({
-  editorMode,
-  setEditorMode,
+const EditorInputModeToolbar = ({
+  editorInputMode,
+  setEditorInputMode,
 }: {
-  editorMode: EditorMode;
-  setEditorMode: (mode: EditorMode) => void;
+  editorInputMode: EditorInputMode;
+  setEditorInputMode: (mode: EditorInputMode) => void;
 }) => {
   return (
-    <Select.Root value={editorMode} onValueChange={(value) => setEditorMode(value as EditorMode)}>
+    <Select.Root value={editorInputMode} onValueChange={(value) => setEditorInputMode(value as EditorInputMode)}>
       <NaturalToolbar.Button asChild>
-        <Select.TriggerButton variant='ghost'>{editorMode}</Select.TriggerButton>
+        <Select.TriggerButton variant='ghost'>{editorInputMode}</Select.TriggerButton>
       </NaturalToolbar.Button>
       <Select.Portal>
         <Select.Content>

package/src/translations.ts

@@ -25,6 +25,10 @@ export default [
         'heading level label_zero': 'Paragraph',
         'heading level label_one': 'Heading level {{count}}',
         'heading level label_other': 'Heading level {{count}}',
+        'view mode label': 'Editor view',
+        'preview mode label': 'Live preview',
+        'readonly mode label': 'Read only',
+        'source mode label': 'Source',
       },
     },
   },