@dxos/react-ui-editor 0.4.5-main.f10c180 → 0.4.5-next.ea4f804

package/src/components/Toolbar/Toolbar.tsx

@@ -33,6 +33,7 @@ import {
   Select,
   type ThemedClassName,
   Toolbar as NaturalToolbar,
+  Tooltip,
   type ToolbarToggleGroupItemProps,
   useTranslation,
 } from '@dxos/react-ui';
@@ -41,6 +42,8 @@ import { getSize } from '@dxos/react-ui-theme';
 import { type Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
+const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
+
 const HeadingIcons: { [key: string]: Icon } = {
   '0': Paragraph,
   '1': TextHOne,
@@ -112,10 +115,20 @@ type ToolbarButtonProps = ToolbarToggleGroupItemProps & { Icon: Icon };
 
 const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   return (
-    <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
-      <Icon className={iconStyles} />
-      <span className='sr-only'>{children}</span>
-    </NaturalToolbar.ToggleGroupItem>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon className={iconStyles} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.ToggleGroupItem>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
   );
 };
 
@@ -129,40 +142,50 @@ const MarkdownHeading = () => {
   const value = header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : undefined;
   const HeadingIcon = HeadingIcons[value ?? '0'];
   return (
-    <Select.Root
-      disabled={value === null}
-      value={value ?? '0'}
-      onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
-    >
-      <NaturalToolbar.Button asChild>
-        <Select.TriggerButton variant='ghost' classNames={buttonStyles}>
-          <span className='sr-only'>{t('heading label')}</span>
-          <HeadingIcon className={iconStyles} />
-        </Select.TriggerButton>
-      </NaturalToolbar.Button>
-      <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} />}
+    <Tooltip.Root>
+      <Select.Root
+        disabled={value === null}
+        value={value ?? '0'}
+        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>
+          </NaturalToolbar.Button>
+        </Tooltip.Trigger>
+        <Select.Portal>
+          <Select.Content>
+            <Select.ScrollUpButton />
+            <Select.Viewport>
+              <Select.Option value='0'>
+                <Paragraph className={iconStyles} />
               </Select.Option>
-            ))}
-          </Select.Viewport>
-          <Select.ScrollDownButton />
-          <Select.Arrow />
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
+              {[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>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {t('heading label')}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
   );
 };
 
@@ -276,15 +299,25 @@ const MarkdownExtended = () => {
   const { onAction } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
   return (
-    <NaturalToolbar.Button
-      variant='ghost'
-      data-testid='editor.toolbar.comment'
-      onClick={() => onAction?.({ type: 'comment' })}
-      classNames={buttonStyles}
-    >
-      <ChatText className={iconStyles} />
-      <span className='sr-only'>{t('comment label')}</span>
-    </NaturalToolbar.Button>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button
+          variant='ghost'
+          data-testid='editor.toolbar.comment'
+          onClick={() => onAction?.({ type: 'comment' })}
+          classNames={buttonStyles}
+        >
+          <ChatText className={iconStyles} />
+          <span className='sr-only'>{t('comment label')}</span>
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {t('comment label')}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
   );
 };
 

package/src/index.ts

@@ -1,6 +1,7 @@
 //
 // Copyright 2022 DXOS.org
 //
+import translations from './translations';
 
 export { type Extension, type EditorState } from '@codemirror/state';
 export { type EditorView, keymap } from '@codemirror/view';
@@ -20,3 +21,4 @@ export {
 } from './styles';
 export * from './themes';
 export * from './util';
+export { translations };

package/src/translations.ts

@@ -8,10 +8,11 @@ export default [
   {
     'en-US': {
       [translationKey]: {
-        'strong label': 'Strong',
-        'emphasis label': 'Emphasis',
-        'strikethrough label': 'Strike-through',
+        'strong label': 'Bold',
+        'emphasis label': 'Italics',
+        'strikethrough label': 'Strikethrough',
         'code label': 'Code',
+        'link label': 'Link',
         'list-bullet label': 'Bullet list',
         'list-ordered label': 'Numbered list',
         'list-task label': 'Task list',
@@ -19,6 +20,7 @@ export default [
         'codeblock label': 'Code block',
         'comment label': 'Create comment',
         'heading label': 'Heading level',
+        'table label': 'Create table',
       },
     },
   },