@dxos/react-ui-editor 0.4.8 → 0.4.9-main.1057b49

package/src/components/Toolbar/Toolbar.tsx

@@ -24,6 +24,8 @@ import {
   TextHFive,
   TextHSix,
   TextItalic,
+  CaretDown,
+  Check,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';
@@ -32,13 +34,14 @@ import { useDropzone } from 'react-dropzone';
 import {
   DensityProvider,
   ElevationProvider,
-  Select,
   Toolbar as NaturalToolbar,
   Tooltip,
   type ThemedClassName,
   type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
   type ToolbarButtonProps as NaturalToolbarButtonProps,
   useTranslation,
+  DropdownMenu,
+  Button,
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
@@ -156,9 +159,9 @@ const MarkdownHeading = () => {
         }
       }}
     >
-      <Select.Root
-        disabled={value === null}
-        value={value ?? '0'}
+      {/* TODO(thure): `Select` encounters a ref error if used here (repro: select a heading, then select another
+            heading). Determine the root cause and fix or report to Radix. */}
+      <DropdownMenu.Root
         open={selectOpen}
         onOpenChange={(nextOpen: boolean) => {
           if (!nextOpen) {
@@ -166,39 +169,42 @@ const MarkdownHeading = () => {
           }
           return setSelectOpen(nextOpen);
         }}
-        onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
       >
         <Tooltip.Trigger asChild>
           <NaturalToolbar.Button asChild>
-            <Select.TriggerButton variant='ghost' classNames={buttonStyles}>
-              <span className='sr-only'>{t('heading label')}</span>
-              <HeadingIcon className={iconStyles} />
-            </Select.TriggerButton>
+            <DropdownMenu.Trigger asChild>
+              <Button variant='ghost' classNames={buttonStyles} disabled={value === null}>
+                <span className='sr-only'>{t('heading label')}</span>
+                <HeadingIcon className={iconStyles} />
+                <CaretDown />
+              </Button>
+            </DropdownMenu.Trigger>
           </NaturalToolbar.Button>
         </Tooltip.Trigger>
-        <Select.Portal>
-          <Select.Content>
-            <Select.ScrollUpButton />
-            <Select.Viewport>
-              <Select.Option value='0'>
-                <Paragraph className={iconStyles} />
-              </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} />}
-                </Select.Option>
-              ))}
-            </Select.Viewport>
-            <Select.ScrollDownButton />
-            <Select.Arrow />
-          </Select.Content>
-        </Select.Portal>
-      </Select.Root>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content classNames='is-min md:is-min' onCloseAutoFocus={(e) => e.preventDefault()}>
+            <DropdownMenu.Viewport>
+              {Object.keys(HeadingIcons).map((level) => {
+                const Icon = HeadingIcons[level];
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={level}
+                    checked={value === level}
+                    onClick={() => onAction?.({ type: 'heading', data: level })}
+                  >
+                    <span className='sr-only'>{t('heading level label', { count: parseInt(level) })}</span>
+                    <Icon className={iconStyles} />
+                    <DropdownMenu.ItemIndicator>
+                      <Check />
+                    </DropdownMenu.ItemIndicator>
+                  </DropdownMenu.CheckboxItem>
+                );
+              })}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
       <Tooltip.Portal>
         <Tooltip.Content {...tooltipProps}>
           {t('heading label')}

package/src/index.ts

@@ -9,7 +9,6 @@ export { type EditorView, keymap } from '@codemirror/view';
 export { tags } from '@lezer/highlight';
 
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
-export { Doc, YText, YXmlFragment } from '@dxos/text-model'; // TODO(burdon): Remove.
 
 export * from './components';
 export * from './extensions';

package/src/translations.ts

@@ -22,6 +22,9 @@ export default [
         'image label': 'Insert image',
         'heading label': 'Heading level',
         'table label': 'Create table',
+        'heading level label_zero': 'Paragraph',
+        'heading level label_one': 'Heading level {{count}}',
+        'heading level label_other': 'Heading level {{count}}',
       },
     },
   },