@dxos/react-ui-editor 0.3.11-next.e28df4f → 0.3.11-next.f4c1077

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.11-next.e28df4f",
+  "version": "0.3.11-next.f4c1077",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,7 +23,7 @@
     "@codemirror/state": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.23.0",
-    "@fluentui/react-tabster": "^9.17.4",
+    "@fluentui/react-tabster": "^9.18.0",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
     "@lezer/markdown": "^1.2.0",
@@ -36,24 +36,23 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.3.11-next.e28df4f",
-    "@dxos/automerge": "0.3.11-next.e28df4f",
-    "@dxos/context": "0.3.11-next.e28df4f",
-    "@dxos/display-name": "0.3.11-next.e28df4f",
-    "@dxos/echo-schema": "0.3.11-next.e28df4f",
-    "@dxos/invariant": "0.3.11-next.e28df4f",
-    "@dxos/debug": "0.3.11-next.e28df4f",
-    "@dxos/log": "0.3.11-next.e28df4f",
-    "@dxos/protocols": "0.3.11-next.e28df4f",
-    "@dxos/react-async": "0.3.11-next.e28df4f",
-    "@dxos/react-ui-theme": "0.3.11-next.e28df4f",
-    "@dxos/react-ui": "0.3.11-next.e28df4f",
-    "@dxos/text-model": "0.3.11-next.e28df4f",
-    "@dxos/util": "0.3.11-next.e28df4f"
+    "@dxos/automerge": "0.3.11-next.f4c1077",
+    "@dxos/async": "0.3.11-next.f4c1077",
+    "@dxos/debug": "0.3.11-next.f4c1077",
+    "@dxos/context": "0.3.11-next.f4c1077",
+    "@dxos/echo-schema": "0.3.11-next.f4c1077",
+    "@dxos/invariant": "0.3.11-next.f4c1077",
+    "@dxos/log": "0.3.11-next.f4c1077",
+    "@dxos/react-async": "0.3.11-next.f4c1077",
+    "@dxos/display-name": "0.3.11-next.f4c1077",
+    "@dxos/react-ui": "0.3.11-next.f4c1077",
+    "@dxos/protocols": "0.3.11-next.f4c1077",
+    "@dxos/react-ui-theme": "0.3.11-next.f4c1077",
+    "@dxos/text-model": "0.3.11-next.f4c1077",
+    "@dxos/util": "0.3.11-next.f4c1077"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.0",
-    "@faker-js/faker": "^8.3.1",
     "@phosphor-icons/react": "^2.0.5",
     "@preact/signals-react": "^1.3.6",
     "@testing-library/dom": "^8.17.1",
@@ -77,19 +76,20 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.1",
-    "@dxos/config": "0.3.11-next.e28df4f",
-    "@dxos/echo-typegen": "0.3.11-next.e28df4f",
-    "@dxos/echo-signals": "0.3.11-next.e28df4f",
-    "@dxos/keyboard": "0.3.11-next.e28df4f",
-    "@dxos/react-ui": "0.3.11-next.e28df4f",
-    "@dxos/react-client": "0.3.11-next.e28df4f",
-    "@dxos/storybook-utils": "0.3.11-next.e28df4f"
+    "@dxos/echo-signals": "0.3.11-next.f4c1077",
+    "@dxos/config": "0.3.11-next.f4c1077",
+    "@dxos/echo-typegen": "0.3.11-next.f4c1077",
+    "@dxos/keyboard": "0.3.11-next.f4c1077",
+    "@dxos/react-client": "0.3.11-next.f4c1077",
+    "@dxos/random": "0.3.11-next.f4c1077",
+    "@dxos/storybook-utils": "0.3.11-next.f4c1077",
+    "@dxos/react-ui": "0.3.11-next.f4c1077"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.11-next.e28df4f"
+    "@dxos/react-client": "0.3.11-next.f4c1077"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,7 +5,6 @@
 import '@dxosTheme';
 
 import { type EditorView } from '@codemirror/view';
-import { faker } from '@faker-js/faker';
 import { ArrowSquareOut } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, { type FC, StrictMode, useRef, useState } from 'react';
@@ -14,6 +13,7 @@ import { createRoot } from 'react-dom/client';
 import { TextObject } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
+import { faker } from '@dxos/random';
 import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -350,9 +350,9 @@ export const Comments = {
         extensions={[
           comments({
             onHover: onCommentsHover,
-            onCreate: (range) => {
+            onCreate: ({ cursor }) => {
               const id = PublicKey.random().toHex();
-              setComments((commentRanges) => [...commentRanges, { id, cursor: range }]);
+              setComments((commentRanges) => [...commentRanges, { id, cursor }]);
               return id;
             },
             onSelect: (state) => {

package/src/components/TextEditor/TextEditor.tsx

@@ -20,7 +20,7 @@ import React, {
 
 import { log } from '@dxos/log';
 import { useThemeContext } from '@dxos/react-ui';
-import { attentionSurface, mx } from '@dxos/react-ui-theme';
+import { focusRing, mx } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
 import { createBasicBundle, createMarkdownExtensions } from '../../extensions';
@@ -258,11 +258,10 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    // TODO(burdon): Add focusRing by default/as property?
-    className: mx('flex flex-col grow overflow-y-auto', attentionSurface),
+    className: mx('grow', focusRing),
   },
   editor: {
-    className: 'h-full p-2',
+    className: 'bs-full',
   },
 };
 

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

@@ -21,6 +21,7 @@ import {
   link,
   table,
   tasklist,
+  useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
 import { markdownTheme } from '../../themes';
@@ -41,6 +42,7 @@ type StoryProps = {
 
 const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const { themeMode } = useThemeContext();
+  const [formattingState, trackFormatting] = useFormattingState();
   const { parentRef, view } = useTextEditor({
     autoFocus,
     doc,
@@ -69,16 +71,19 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
       link(),
       table(),
       tasklist(),
+      trackFormatting,
     ],
   });
 
   const handleAction = useActionHandler(view);
 
+  // FIXME This doesn't update the state on view changes. Also not
+  // sure if view is even guaranteed to exist at this point.
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
       <div className='flex h-full justify-center'>
         <div className='flex flex-col h-full w-[800px]'>
-          <Toolbar.Root onAction={handleAction}>
+          <Toolbar.Root onAction={handleAction} state={formattingState}>
             <Toolbar.Markdown />
           </Toolbar.Root>
 

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

@@ -4,16 +4,26 @@
 
 import '@dxosTheme';
 
-import { faker } from '@faker-js/faker';
 import React, { type FC, useMemo, useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
+import { faker } from '@dxos/random';
 import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
-import { code, comments, formatting, heading, image, table, tasklist, useComments } from '../../extensions';
+import {
+  code,
+  comments,
+  formatting,
+  heading,
+  image,
+  table,
+  tasklist,
+  useComments,
+  useFormattingState,
+} from '../../extensions';
 import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
 import { MarkdownEditor } from '../TextEditor';
 
@@ -24,11 +34,12 @@ const Story: FC<{ content: string }> = ({ content }) => {
   const [_comments, setComments] = useState<Comment[]>([]);
   const [editorRef, editorView] = useEditorView();
   const model = useTextModel({ text: item.text });
+  const [formattingState, formattingObserver] = useFormattingState();
   const extensions = useMemo(
     () => [
       code(),
       comments({
-        onCreate: (cursor) => {
+        onCreate: ({ cursor }) => {
           const id = PublicKey.random().toHex();
           setComments((comments) => [...comments, { id, cursor }]);
           return id;
@@ -39,6 +50,7 @@ const Story: FC<{ content: string }> = ({ content }) => {
       image(),
       table(),
       tasklist(),
+      formattingObserver,
     ],
     [],
   );
@@ -54,7 +66,7 @@ const Story: FC<{ content: string }> = ({ content }) => {
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
       <div className='flex h-full justify-center'>
         <div className='flex flex-col h-full w-[800px]'>
-          <Toolbar.Root onAction={handleAction}>
+          <Toolbar.Root onAction={handleAction} state={formattingState}>
             <Toolbar.Markdown />
             <Toolbar.Separator />
             <Toolbar.Extended />

package/src/components/Toolbar/Toolbar.tsx

@@ -4,37 +4,56 @@
 
 import {
   type Icon,
-  At,
   CaretRight,
   ChatText,
   Code,
-  Image,
+  CodeBlock,
   Link,
   ListBullets,
   ListChecks,
   ListNumbers,
+  Paragraph,
   TextStrikethrough,
   Table,
   TextB,
+  TextHOne,
+  TextHTwo,
+  TextHThree,
+  TextHFour,
+  TextHFive,
+  TextHSix,
   TextItalic,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
 
 import { Button, type ButtonProps, DensityProvider, Select } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { type Formatting } from '../../extensions';
+
+const HeadingIcons: { [key: string]: Icon } = {
+  '0': Paragraph,
+  '1': TextHOne,
+  '2': TextHTwo,
+  '3': TextHThree,
+  '4': TextHFour,
+  '5': TextHFive,
+  '6': TextHSix,
+};
 
 // TODO(burdon): Revert to string to make extensible?
 export type ActionType =
   | 'blockquote'
-  | 'bold'
+  | 'strong'
   | 'codeblock'
   | 'comment'
   | 'heading'
   | 'image'
-  | 'italic'
+  | 'emphasis'
+  | 'code'
   | 'link'
-  | 'list'
+  | 'list-bullet'
   | 'list-ordered'
   | 'list-tasks'
   | 'mention'
@@ -48,16 +67,17 @@ export type Action = {
 };
 
 export type ToolbarProps = PropsWithChildren<{
+  state: Formatting | null;
   onAction?: (action: Action) => void;
 }>;
 
 const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
 
-const ToolbarRoot = ({ children, onAction }: ToolbarProps) => {
+const ToolbarRoot = ({ children, onAction, state }: ToolbarProps) => {
   return (
-    <ToolbarContextProvider onAction={onAction}>
+    <ToolbarContextProvider onAction={onAction} state={state}>
       <DensityProvider density='fine'>
-        <div role='toolbar' className='flex w-full shrink-0 p-2 gap-4 items-center whitespace-nowrap overflow-hidden'>
+        <div role='toolbar' className='flex w-full shrink-0 p-1 gap-4 items-center whitespace-nowrap overflow-hidden'>
           {children}
         </div>
       </DensityProvider>
@@ -67,20 +87,32 @@ const ToolbarRoot = ({ children, onAction }: ToolbarProps) => {
 
 type ToolbarButtonProps = {
   Icon: Icon;
-  onClick: () => Action | undefined;
+  disable?: (state: Formatting) => boolean;
+  getState?: (state: Formatting) => boolean;
+  onClick: (state: Formatting | null) => Action | undefined;
 } & NonNullable<Pick<ButtonProps, 'title'>>;
 
-const ToolbarButton = ({ Icon, onClick, title }: ToolbarButtonProps) => {
-  const { onAction } = useToolbarContext('ToolbarButton');
-  const handleClick = () => {
-    const action = onClick();
+const ToolbarButton = ({ Icon, onClick, title, getState, disable }: ToolbarButtonProps) => {
+  const { onAction, state } = useToolbarContext('ToolbarButton');
+  const active = getState && state ? getState(state) : false;
+  const disabled = disable && state ? disable(state) : false;
+
+  const handleClick = (event: React.MouseEvent) => {
+    const action = onClick(state);
     if (action) {
       onAction?.(action);
+      event.preventDefault();
     }
   };
 
   return (
-    <Button variant='ghost' classNames='p-2' onClick={handleClick} title={title}>
+    <Button
+      variant='ghost'
+      classNames={mx('p-2', active && 'ring-[1px]')}
+      onMouseDown={handleClick}
+      title={title}
+      disabled={disabled}
+    >
       <Icon className={getSize(5)} />
     </Button>
   );
@@ -89,10 +121,20 @@ const ToolbarButton = ({ Icon, onClick, title }: ToolbarButtonProps) => {
 const ToolbarSeparator = () => <div className='grow' />;
 
 const MarkdownHeading = () => {
-  const { onAction } = useToolbarContext('MarkdownFormatting');
+  const { onAction, state } = useToolbarContext('MarkdownFormatting');
+  const blockType = state ? state.blockType : 'paragraph';
+  const header = blockType && /heading(\d)/.exec(blockType);
+  const value = header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : undefined;
+  const HeadingIcon = HeadingIcons[value ?? '0'];
   return (
-    <Select.Root defaultValue='0' onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}>
-      <Select.TriggerButton classNames='w-[8rem]' />
+    <Select.Root
+      disabled={value === null}
+      value={value ?? '0'}
+      onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
+    >
+      <Select.TriggerButton>
+        <HeadingIcon className={getSize(5)} />
+      </Select.TriggerButton>
       <Select.Portal>
         <Select.Content>
           <Select.Viewport>
@@ -111,33 +153,89 @@ const MarkdownHeading = () => {
 
 const MarkdownStyles = () => (
   <div role='none'>
-    <ToolbarButton Icon={TextB} title='Bold' onClick={() => ({ type: 'bold' })} />
-    <ToolbarButton Icon={TextItalic} title='Italic' onClick={() => ({ type: 'italic' })} />
-    <ToolbarButton Icon={TextStrikethrough} title='Strike-through' onClick={() => ({ type: 'strikethrough' })} />
+    <ToolbarButton
+      Icon={TextB}
+      title='String'
+      disable={(s) => s.blockType === 'codeblock'}
+      getState={(s) => s.strong}
+      onClick={(s) => ({ type: 'strong', data: s ? !s.strong : null })}
+    />
+    <ToolbarButton
+      Icon={TextItalic}
+      title='Emphasis'
+      disable={(s) => s.blockType === 'codeblock'}
+      getState={(s) => s.emphasis}
+      onClick={(s) => ({ type: 'emphasis', data: s ? !s.emphasis : null })}
+    />
+    <ToolbarButton
+      Icon={TextStrikethrough}
+      title='Strike-through'
+      disable={(s) => s.blockType === 'codeblock'}
+      getState={(s) => s.strikethrough}
+      onClick={(s) => ({ type: 'strikethrough', data: s ? !s.strikethrough : null })}
+    />
+    <ToolbarButton
+      Icon={Code}
+      title='Inline code'
+      disable={(s) => s.blockType === 'codeblock'}
+      getState={(s) => s.code}
+      onClick={(s) => ({ type: 'code', data: s ? !s.code : null })}
+    />
   </div>
 );
 
 const MarkdownLists = () => (
   <div role='none'>
-    <ToolbarButton Icon={ListBullets} title='Bullet list' onClick={() => ({ type: 'list' })} />
-    <ToolbarButton Icon={ListNumbers} title='Numbered list' onClick={() => ({ type: 'list-ordered' })} />
-    <ToolbarButton Icon={ListChecks} title='Task list' onClick={() => ({ type: 'list-tasks' })} />
+    <ToolbarButton
+      Icon={ListBullets}
+      title='Bullet list'
+      getState={(s) => s.listStyle === 'bullet'}
+      onClick={(s) => ({ type: 'list-bullet', data: s ? s.listStyle !== 'bullet' : null })}
+    />
+    <ToolbarButton
+      Icon={ListNumbers}
+      title='Numbered list'
+      getState={(s) => s.listStyle === 'ordered'}
+      onClick={(s) => ({ type: 'list-ordered', data: s ? s.listStyle !== 'ordered' : null })}
+    />
+    <ToolbarButton
+      Icon={ListChecks}
+      title='Task list'
+      getState={(s) => s.listStyle === 'task'}
+      onClick={(s) => ({ type: 'list-tasks', data: s ? s.listStyle !== 'task' : null })}
+    />
   </div>
 );
 
 const MarkdownBlocks = () => (
   <div role='none'>
-    <ToolbarButton Icon={CaretRight} title='Block quite' onClick={() => ({ type: 'blockquote' })} />
-    <ToolbarButton Icon={Code} title='Code block' onClick={() => ({ type: 'codeblock' })} />
-    <ToolbarButton Icon={Table} title='Table' onClick={() => ({ type: 'table' })} />
+    <ToolbarButton
+      Icon={CaretRight}
+      title='Block quote'
+      getState={(s) => s.blockQuote}
+      onClick={(s) => ({ type: 'blockquote', data: s ? !s.blockQuote : null })}
+    />
+    <ToolbarButton
+      Icon={CodeBlock}
+      title='Code block'
+      disable={(s) => !s.blankLine}
+      getState={(s) => s.blockType === 'codeblock'}
+      onClick={(s) => ({ type: 'codeblock', data: s ? s.blockType !== 'codeblock' : null })}
+    />
+    <ToolbarButton Icon={Table} title='Table' disable={(s) => !s.blankLine} onClick={() => ({ type: 'table' })} />
   </div>
 );
 
 const MarkdownLinks = () => (
   <div role='none'>
-    <ToolbarButton Icon={Link} title='Link' onClick={() => ({ type: 'link' })} />
-    <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} />
-    <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} />
+    <ToolbarButton
+      Icon={Link}
+      title='Link'
+      getState={(s) => s.link}
+      onClick={(s) => ({ type: 'link', data: s ? !s.link : null })}
+    />
+    {/* <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} /> */}
+    {/* <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} /> */}
   </div>
 );
 

package/src/extensions/awareness.ts

@@ -207,7 +207,10 @@ export class RemoteSelectionsDecorator implements PluginValue {
 }
 
 class RemoteCaretWidget extends WidgetType {
-  constructor(private readonly _name: string, private readonly _color: string) {
+  constructor(
+    private readonly _name: string,
+    private readonly _color: string,
+  ) {
     super();
   }
 

package/src/extensions/blast.ts

@@ -125,7 +125,10 @@ class Blaster {
 
   _lastPoint = { x: 0, y: 0 };
 
-  constructor(private readonly _node: HTMLElement, private readonly _options: BlastOptions) {
+  constructor(
+    private readonly _node: HTMLElement,
+    private readonly _options: BlastOptions,
+  ) {
     this._effect = this._options.effect === 1 ? new Effect1(_options) : new Effect2(_options);
   }
 

package/src/extensions/comments.ts

@@ -18,12 +18,22 @@ import { callbackWrapper } from '../util';
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
-  '& .cm-comment': {
+  '&light .cm-comment, &light .cm-comment-current': { mixBlendMode: 'darken' },
+  '&dark .cm-comment, &dark .cm-comment-current': { mixBlendMode: 'plus-lighter' },
+  '&light .cm-comment': {
     backgroundColor: getToken('extend.colors.yellow.50'),
   },
-  '& .cm-comment-current': {
+  '&light .cm-comment-current': {
     backgroundColor: getToken('extend.colors.yellow.100'),
   },
+  '&dark .cm-comment': {
+    color: getToken('extend.colors.yellow.50'),
+    backgroundColor: getToken('extend.colors.yellow.900'),
+  },
+  '&dark .cm-comment-current': {
+    color: getToken('extend.colors.yellow.100'),
+    backgroundColor: getToken('extend.colors.yellow.950'),
+  },
 });
 
 const commentMark = Decoration.mark({ class: 'cm-comment' });
@@ -146,7 +156,7 @@ export type CommentsOptions = {
   /**
    * Called to create a new thread and return the thread id.
    */
-  onCreate?: (cursor: string, location?: Rect | null) => string | undefined;
+  onCreate?: (params: { cursor: string; from: number; location?: Rect | null }) => string | undefined;
   /**
    * Selection cut/deleted.
    */
@@ -306,7 +316,7 @@ export const createComment: Command = (view) => {
   const cursor = Cursor.getCursorFromRange(view.state, { from, to });
   if (cursor) {
     // Create thread via callback.
-    const id = options.onCreate?.(cursor, view.coordsAtPos(from));
+    const id = options.onCreate?.({ cursor, from, location: view.coordsAtPos(from) });
     if (id) {
       // Update range.
       view.dispatch({