@dxos/react-ui-editor 0.3.11-main.fc97a54 → 0.3.11-main.ff3a851

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

@@ -21,7 +21,6 @@ import {
   link,
   table,
   tasklist,
-  useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
 import { markdownTheme } from '../../themes';
@@ -42,7 +41,6 @@ type StoryProps = {
 
 const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const { themeMode } = useThemeContext();
-  const [formattingState, trackFormatting] = useFormattingState();
   const { parentRef, view } = useTextEditor({
     autoFocus,
     doc,
@@ -71,19 +69,16 @@ 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} state={formattingState}>
+          <Toolbar.Root onAction={handleAction}>
             <Toolbar.Markdown />
           </Toolbar.Root>
 

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

@@ -4,26 +4,16 @@
 
 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,
-  useFormattingState,
-} from '../../extensions';
+import { code, comments, formatting, heading, image, table, tasklist, useComments } from '../../extensions';
 import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
 import { MarkdownEditor } from '../TextEditor';
 
@@ -34,12 +24,11 @@ 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;
@@ -50,7 +39,6 @@ const Story: FC<{ content: string }> = ({ content }) => {
       image(),
       table(),
       tasklist(),
-      formattingObserver,
     ],
     [],
   );
@@ -66,7 +54,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} state={formattingState}>
+          <Toolbar.Root onAction={handleAction}>
             <Toolbar.Markdown />
             <Toolbar.Separator />
             <Toolbar.Extended />

package/src/components/Toolbar/Toolbar.tsx

@@ -4,56 +4,37 @@
 
 import {
   type Icon,
+  At,
   CaretRight,
   ChatText,
   Code,
-  CodeBlock,
+  Image,
   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, 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,
-};
+import { getSize } from '@dxos/react-ui-theme';
 
 // TODO(burdon): Revert to string to make extensible?
 export type ActionType =
   | 'blockquote'
-  | 'strong'
+  | 'bold'
   | 'codeblock'
   | 'comment'
   | 'heading'
   | 'image'
-  | 'emphasis'
-  | 'code'
+  | 'italic'
   | 'link'
-  | 'list-bullet'
+  | 'list'
   | 'list-ordered'
   | 'list-tasks'
   | 'mention'
@@ -67,17 +48,16 @@ export type Action = {
 };
 
 export type ToolbarProps = PropsWithChildren<{
-  state: Formatting | null;
   onAction?: (action: Action) => void;
 }>;
 
 const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
 
-const ToolbarRoot = ({ children, onAction, state }: ToolbarProps) => {
+const ToolbarRoot = ({ children, onAction }: ToolbarProps) => {
   return (
-    <ToolbarContextProvider onAction={onAction} state={state}>
+    <ToolbarContextProvider onAction={onAction}>
       <DensityProvider density='fine'>
-        <div role='toolbar' className='flex w-full shrink-0 p-1 gap-4 items-center whitespace-nowrap overflow-hidden'>
+        <div role='toolbar' className='flex w-full shrink-0 p-2 gap-4 items-center whitespace-nowrap overflow-hidden'>
           {children}
         </div>
       </DensityProvider>
@@ -87,32 +67,20 @@ const ToolbarRoot = ({ children, onAction, state }: ToolbarProps) => {
 
 type ToolbarButtonProps = {
   Icon: Icon;
-  disable?: (state: Formatting) => boolean;
-  getState?: (state: Formatting) => boolean;
-  onClick: (state: Formatting | null) => Action | undefined;
+  onClick: () => Action | undefined;
 } & NonNullable<Pick<ButtonProps, 'title'>>;
 
-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);
+const ToolbarButton = ({ Icon, onClick, title }: ToolbarButtonProps) => {
+  const { onAction } = useToolbarContext('ToolbarButton');
+  const handleClick = () => {
+    const action = onClick();
     if (action) {
       onAction?.(action);
-      event.preventDefault();
     }
   };
 
   return (
-    <Button
-      variant='ghost'
-      classNames={mx('p-2', active && 'ring-[1px]')}
-      onMouseDown={handleClick}
-      title={title}
-      disabled={disabled}
-    >
+    <Button variant='ghost' classNames='p-2' onClick={handleClick} title={title}>
       <Icon className={getSize(5)} />
     </Button>
   );
@@ -121,20 +89,10 @@ const ToolbarButton = ({ Icon, onClick, title, getState, disable }: ToolbarButto
 const ToolbarSeparator = () => <div className='grow' />;
 
 const MarkdownHeading = () => {
-  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'];
+  const { onAction } = useToolbarContext('MarkdownFormatting');
   return (
-    <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.Root defaultValue='0' onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}>
+      <Select.TriggerButton classNames='w-[8rem]' />
       <Select.Portal>
         <Select.Content>
           <Select.Viewport>
@@ -153,89 +111,33 @@ const MarkdownHeading = () => {
 
 const MarkdownStyles = () => (
   <div role='none'>
-    <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 })}
-    />
+    <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' })} />
   </div>
 );
 
 const MarkdownLists = () => (
   <div role='none'>
-    <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 })}
-    />
+    <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' })} />
   </div>
 );
 
 const MarkdownBlocks = () => (
   <div role='none'>
-    <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' })} />
+    <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' })} />
   </div>
 );
 
 const MarkdownLinks = () => (
   <div role='none'>
-    <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' })} /> */}
+    <ToolbarButton Icon={Link} title='Link' onClick={() => ({ type: 'link' })} />
+    <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} />
+    <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} />
   </div>
 );
 

package/src/extensions/comments.ts

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