@dxos/react-ui-editor 0.4.3-main.97fc241 → 0.4.3-main.aa1c078

package/src/components/Toolbar/Toolbar.tsx

@@ -23,6 +23,7 @@ import {
   TextHSix,
   TextItalic,
   Quotes,
+  CaretDown,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
@@ -64,7 +65,7 @@ export type ActionType =
   | 'link'
   | 'list-bullet'
   | 'list-ordered'
-  | 'list-task'
+  | 'list-tasks'
   | 'mention'
   | 'prompt'
   | 'strikethrough'
@@ -98,17 +99,12 @@ const ToolbarRoot = ({ children, onAction, classNames, state }: ToolbarProps) =>
   );
 };
 
-const buttonStyles = 'min-bs-0 p-2';
-const iconStyles = getSize(5);
-
-type ButtonProps = {
-  type: ActionType;
+type ToolbarButtonProps = ToolbarToggleGroupItemProps & {
   Icon: Icon;
-  getState: (state: Formatting) => boolean;
-  disabled?: (state: Formatting) => boolean;
 };
 
-type ToolbarButtonProps = ToolbarToggleGroupItemProps & { Icon: Icon };
+const buttonStyles = 'min-bs-0 p-2';
+const iconStyles = getSize(4);
 
 const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   return (
@@ -122,7 +118,7 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
 const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 const MarkdownHeading = () => {
-  // const { t } = useTranslation(translationKey);
+  const { t } = useTranslation(translationKey);
   const { onAction, state } = useToolbarContext('MarkdownFormatting');
   const blockType = state ? state.blockType : 'paragraph';
   const header = blockType && /heading(\d)/.exec(blockType);
@@ -134,30 +130,21 @@ const MarkdownHeading = () => {
       value={value ?? '0'}
       onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
     >
-      <Select.TriggerButton>
-        <HeadingIcon className={iconStyles} />
-        {/* TODO(burdon): Incorrectly positioned. */}
-        {/* <NaturalToolbar.Button variant='ghost' classNames={buttonStyles}> */}
-        {/*  <span className='sr-only'>{t('heading label')}</span> */}
-        {/*  <HeadingIcon className={iconStyles} /> */}
-        {/*  <CaretDown className={getSize(2)} weight='bold' /> */}
-        {/* </NaturalToolbar.Button> */}
-      </Select.TriggerButton>
+      <Select.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' classNames={buttonStyles}>
+          <span className='sr-only'>{t('heading label')}</span>
+          <HeadingIcon className={iconStyles} />
+          <CaretDown className={getSize(2)} weight='bold' />
+        </NaturalToolbar.Button>
+      </Select.Trigger>
       <Select.Portal>
         <Select.Content>
           <Select.ScrollUpButton />
           <Select.Viewport>
-            <Select.Option value='0'>
-              <Paragraph className={iconStyles} />
-            </Select.Option>
+            <Select.Option value='0'>Paragraph</Select.Option>
             {[1, 2, 3, 4, 5, 6].map((level) => (
               <Select.Option key={level} value={String(level)}>
-                {level === 1 && <TextHOne className={iconStyles} />}
-                {level === 2 && <TextHTwo className={iconStyles} />}
-                {level === 3 && <TextHThree className={iconStyles} />}
-                {level === 4 && <TextHFour className={iconStyles} />}
-                {level === 5 && <TextHFive className={iconStyles} />}
-                {level === 6 && <TextHSix className={iconStyles} />}
+                Heading {level}
               </Select.Option>
             ))}
           </Select.Viewport>
@@ -169,12 +156,14 @@ const MarkdownHeading = () => {
   );
 };
 
-const markdownStyles: ButtonProps[] = [
-  { type: 'strong', Icon: TextB, getState: (state) => state.strong },
-  { type: 'emphasis', Icon: TextItalic, getState: (state) => state.emphasis },
-  { type: 'strikethrough', Icon: TextStrikethrough, getState: (state) => state.strikethrough },
-  { type: 'code', Icon: Code, getState: (state) => state.code },
-  { type: 'link', Icon: Link, getState: (state) => state.link },
+const markdownStyles = [
+  { key: 'strong' as const, Icon: TextB },
+  { key: 'emphasis' as const, Icon: TextItalic },
+  { key: 'strikethrough' as const, Icon: TextStrikethrough },
+  { key: 'code' as const, Icon: Code },
+  { key: 'link' as const, Icon: Link },
+  // <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} />
+  // <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} />
 ];
 
 const MarkdownStyles = () => {
@@ -184,27 +173,27 @@ const MarkdownStyles = () => {
   return (
     <NaturalToolbar.ToggleGroup
       type='multiple'
-      value={markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
+      value={markdownStyles.filter(({ key }) => !!state?.[key]).map(({ key }) => key)}
     >
-      {markdownStyles.map(({ type, getState, Icon }) => (
+      {markdownStyles.map(({ key, Icon }) => (
         <ToolbarButton
-          key={type}
-          value={type}
+          key={key}
+          value={key}
           Icon={Icon}
           disabled={state?.blockType === 'codeblock'}
-          onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+          onClick={() => onAction?.({ type: key, data: state ? !state[key] : null })}
         >
-          {t(`${type} label`)}
+          {t(`${key} label`)}
         </ToolbarButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const markdownLists: ButtonProps[] = [
-  { type: 'list-bullet', Icon: ListBullets, getState: (state) => state.listStyle === 'bullet' },
-  { type: 'list-ordered', Icon: ListNumbers, getState: (state) => state.listStyle === 'ordered' },
-  { type: 'list-task', Icon: ListChecks, getState: (state) => state.listStyle === 'task' },
+const markdownLists = [
+  { key: 'bullet' as const, Icon: ListBullets, actionType: 'list-bullet' as const },
+  { key: 'ordered' as const, Icon: ListNumbers, actionType: 'list-ordered' as const },
+  { key: 'task' as const, Icon: ListChecks, actionType: 'list-tasks' as const },
 ];
 
 const MarkdownLists = () => {
@@ -212,58 +201,62 @@ const MarkdownLists = () => {
   const { t } = useTranslation(translationKey);
   return (
     <NaturalToolbar.ToggleGroup type='single' value={state?.listStyle ?? undefined}>
-      {markdownLists.map(({ type, getState, Icon }) => (
+      {markdownLists.map(({ key, Icon, actionType }) => (
         <ToolbarButton
-          key={type}
-          value={type}
+          key={key}
+          value={key}
           Icon={Icon}
-          onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
+          onClick={() => onAction?.({ type: actionType, data: state ? state.listStyle !== key : null })}
         >
-          {t(`${type} label`)}
+          {t(`${key} label`)}
         </ToolbarButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
 };
 
-const markdownBlocks: ButtonProps[] = [
+const markdownBlocks = [
   {
-    type: 'blockquote',
+    key: 'blockquote' as const,
     Icon: Quotes,
-    getState: (state) => state.blockQuote,
+    pressed: (state: Formatting | null) => state?.blockQuote,
+    action: (state: Formatting | null) => ({ type: 'blockquote' as const, data: state ? !state.blockQuote : null }),
+    disabled: (state: Formatting | null) => false,
   },
   {
-    type: 'codeblock',
+    key: 'codeblock' as const,
     Icon: CodeBlock,
-    getState: (state) => state.blockQuote,
-    disabled: (state) => !state.blankLine,
-  },
-  {
-    type: 'table',
-    Icon: Table,
-    getState: (state) => state.blockType === 'tablecell',
-    disabled: (state) => !state.blankLine,
+    pressed: (state: Formatting | null) => state?.blockType === 'codeblock',
+    action: (state: Formatting | null) => ({ type: 'blockquote' as const, data: state ? !state.blockQuote : null }),
+    disabled: (state: Formatting | null) => !state?.blankLine,
   },
 ];
 
 const MarkdownBlocks = () => {
   const { onAction, state } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
-  const value = markdownBlocks.find(({ getState }) => state && getState(state));
   return (
-    <NaturalToolbar.ToggleGroup type='single' value={value?.type}>
-      {markdownBlocks.map(({ type, disabled, getState, Icon }) => (
-        <ToolbarButton
-          key={type}
-          value={type}
-          Icon={Icon}
-          disabled={!state || disabled?.(state)}
-          onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-        >
-          {t(`${type} label`)}
-        </ToolbarButton>
-      ))}
-    </NaturalToolbar.ToggleGroup>
+    <>
+      <NaturalToolbar.ToggleGroup
+        type='multiple'
+        value={markdownBlocks.filter(({ pressed }) => pressed(state)).map(({ key }) => key)}
+      >
+        {markdownBlocks.map(({ key, Icon, action }) => (
+          <ToolbarButton key={key} value={key} Icon={Icon} onClick={() => onAction?.(action(state))}>
+            {t(`${key} label`)}
+          </ToolbarButton>
+        ))}
+      </NaturalToolbar.ToggleGroup>
+      <NaturalToolbar.Button
+        variant='ghost'
+        disabled={!state?.blankLine}
+        onClick={() => onAction?.({ type: 'table' })}
+        classNames={buttonStyles}
+      >
+        <Table className={iconStyles} />
+        <span className='sr-only'>{t('table label')}</span>
+      </NaturalToolbar.Button>
+    </>
   );
 };
 

package/src/extensions/markdown/formatting.test.ts

@@ -370,7 +370,7 @@ describe('removeBlockquote', () => {
 });
 
 describe('addCodeblock', () => {
-  testCommand('add a code block to a blank line', '{}', addCodeblock, '```{}\n```');
+  testCommand('add a code block to a blank line', '{}', addCodeblock, '```{}\n\n```');
 
   testCommand(
     'can turn a paragraph into a code block',

package/src/extensions/markdown/formatting.ts

@@ -356,6 +356,7 @@ const snippets = {
     [
       //
       '```#{}',
+      '#{}',
       '```',
     ].join('\n'),
   ),
@@ -514,7 +515,6 @@ export const addLink: StateCommand = ({ state, dispatch }) => {
 // Lists
 //
 
-// TODO(burdon): Cursor is positioned incorrectly.
 export const addList =
   (type: List): StateCommand =>
   ({ state, dispatch }) => {
@@ -576,21 +576,18 @@ export const addList =
       // Insert a new list item if the selection is empty.
       const { from, to } = state.doc.lineAt(state.selection.main.anchor);
       if (from === to) {
-        const insert = type === List.Bullet ? '- ' : type === List.Ordered ? '1. ' : '- [ ] ';
         dispatch(
           state.update({
             changes: [
               {
                 from,
-                insert,
+                insert: type === List.Bullet ? '- ' : type === List.Ordered ? '1. ' : '- [ ] ',
               },
             ],
-            selection: { anchor: from + insert.length },
             userEvent: 'format.list.add',
             scrollIntoView: true,
           }),
         );
-
         return true;
       }
 

package/src/hooks/useActionHandler.ts

@@ -54,7 +54,7 @@ export const useActionHandler = (view?: EditorView | null): ToolbarProps['onActi
 
       case 'list-ordered':
       case 'list-bullet':
-      case 'list-task':
+      case 'list-tasks':
         listType =
           action.type === 'list-ordered' ? List.Ordered : action.type === 'list-bullet' ? List.Bullet : List.Task;
         (action.data === false

package/src/translations.ts

@@ -12,9 +12,9 @@ export default [
         'emphasis label': 'Emphasis',
         'strikethrough label': 'Strike-through',
         'code label': 'Code',
-        'list-bullet label': 'Bullet list',
-        'list-ordered label': 'Numbered list',
-        'list-task label': 'Task list',
+        'bullet label': 'Bullet list',
+        'ordered label': 'Numbered list',
+        'task label': 'Task list',
         'blockquote label': 'Block quote',
         'codeblock label': 'Code block',
         'comment label': 'Create comment',