@dxos/react-ui-editor 0.3.11-next.ee2b64c → 0.4.0

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/comments.ts

@@ -156,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.
    */
@@ -316,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({