@dxos/react-ui-editor 0.3.11-main.5c52a13 → 0.3.11-main.5e05862

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

@@ -13,7 +13,17 @@ 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

@@ -22,19 +22,22 @@ 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/markdown';
 
 // 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,14 +51,15 @@ 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'>
           {children}
@@ -67,20 +71,31 @@ const ToolbarRoot = ({ children, onAction }: ToolbarProps) => {
 
 type ToolbarButtonProps = {
   Icon: Icon;
-  onClick: () => Action | undefined;
+  onClick: (state: Formatting | null) => Action | undefined;
+  getState?: (state: Formatting) => boolean;
+  disable?: (state: Formatting) => boolean;
 } & 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 handleClick = (event: React.MouseEvent) => {
+    const action = onClick(state);
     if (action) {
       onAction?.(action);
+      event.preventDefault();
     }
   };
+  const active = getState && state ? getState(state) : false;
+  const disabled = disable && state ? disable(state) : false;
 
   return (
-    <Button variant='ghost' classNames='p-2' onClick={handleClick} title={title}>
+    <Button
+      variant='ghost'
+      classNames={mx('p-2', active && 'ring')}
+      onMouseDown={handleClick}
+      title={title}
+      disabled={disabled}
+    >
       <Icon className={getSize(5)} />
     </Button>
   );
@@ -89,9 +104,16 @@ 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' : null;
   return (
-    <Select.Root defaultValue='0' onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}>
+    <Select.Root
+      disabled={value === null}
+      value={value ?? '0'}
+      onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
+    >
       <Select.TriggerButton classNames='w-[8rem]' />
       <Select.Portal>
         <Select.Content>
@@ -111,31 +133,86 @@ 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'
+      onClick={(s) => ({ type: 'strong', data: s ? !s.strong : null })}
+      getState={(s) => s.strong}
+      disable={(s) => s.blockType === 'codeblock'}
+    />
+    <ToolbarButton
+      Icon={TextItalic}
+      title='Emphasis'
+      onClick={(s) => ({ type: 'emphasis', data: s ? !s.emphasis : null })}
+      getState={(s) => s.emphasis}
+      disable={(s) => s.blockType === 'codeblock'}
+    />
+    <ToolbarButton
+      Icon={TextStrikethrough}
+      title='Strike-through'
+      onClick={(s) => ({ type: 'strikethrough', data: s ? !s.strikethrough : null })}
+      getState={(s) => s.strikethrough}
+      disable={(s) => s.blockType === 'codeblock'}
+    />
+    <ToolbarButton
+      Icon={Code}
+      title='Inline code'
+      onClick={(s) => ({ type: 'code', data: s ? !s.code : null })}
+      getState={(s) => s.code}
+      disable={(s) => s.blockType === 'codeblock'}
+    />
   </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'
+      onClick={(s) => ({ type: 'list-bullet', data: s ? s.listStyle !== 'bullet' : null })}
+      getState={(s) => s.listStyle === 'bullet'}
+    />
+    <ToolbarButton
+      Icon={ListNumbers}
+      title='Numbered list'
+      onClick={(s) => ({ type: 'list-ordered', data: s ? s.listStyle !== 'ordered' : null })}
+      getState={(s) => s.listStyle === 'ordered'}
+    />
+    <ToolbarButton
+      Icon={ListChecks}
+      title='Task list'
+      onClick={(s) => ({ type: 'list-tasks', data: s ? s.listStyle !== 'task' : null })}
+      getState={(s) => s.listStyle === 'task'}
+    />
   </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={CaretRight}
+      title='Block quote'
+      onClick={(s) => ({ type: 'blockquote', data: s ? !s.blockquote : null })}
+      getState={(s) => s.blockquote}
+    />
+    <ToolbarButton
+      Icon={Code}
+      title='Code block'
+      onClick={(s) => ({ type: 'codeblock', data: s ? s.blockType !== 'codeblock' : null })}
+      getState={(s) => s.blockType === 'codeblock'}
+    />
     <ToolbarButton Icon={Table} title='Table' onClick={() => ({ type: 'table' })} />
   </div>
 );
 
 const MarkdownLinks = () => (
   <div role='none'>
-    <ToolbarButton Icon={Link} title='Link' onClick={() => ({ type: 'link' })} />
+    <ToolbarButton
+      Icon={Link}
+      title='Link'
+      onClick={(s) => ({ type: 'link', data: s ? !s.link : null })}
+      getState={(s) => s.link}
+    />
     <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} />
     <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} />
   </div>

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({