@crystallize/design-system 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/rich-text-editor/i18n/i18n.test.ts

@@ -0,0 +1,14 @@
+import { replaceI18nVariablesInString } from '.';
+
+describe('RichTextEditor i18n', () => {
+  it('replaces variable parts of a translation string correctly', async () => {
+    expect(replaceI18nVariablesInString('Hi {{name}}!', 'you')).toBe('Hi you!');
+    expect(replaceI18nVariablesInString('Hi {{whatever-goes here}}!', 'you')).toBe('Hi you!');
+    expect(replaceI18nVariablesInString('It can be replace {{name}} many times {{name}}', 'you')).toBe(
+      'It can be replace you many times you',
+    );
+    expect(replaceI18nVariablesInString('It needs correct formatting {name}}', 'you')).toBe(
+      'It needs correct formatting {name}}',
+    );
+  });
+});

package/src/rich-text-editor/i18n/index.tsx

@@ -0,0 +1,64 @@
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+
+import type { I18N } from './types';
+
+const I18nContext = createContext<I18N | null>(null);
+
+export type SupportedLanguages = 'en';
+
+export { default as labelTranslationEn } from './translations/en';
+
+export function I18nProvider({
+  language,
+  labelTranslations,
+  children,
+}: {
+  language: SupportedLanguages;
+  labelTranslations?: I18N;
+  children: ReactNode;
+}) {
+  const [translations, setTranslations] = useState<I18N | null>(labelTranslations || null);
+
+  useEffect(() => {
+    let unmounted = false;
+    (async function load() {
+      if (!labelTranslations) {
+        const resource = await import(`./translations/${language}.ts`);
+        if (!unmounted) {
+          setTranslations(resource.default);
+        }
+      }
+    })();
+
+    return () => {
+      unmounted = true;
+    };
+  }, [language, labelTranslations]);
+
+  return <I18nContext.Provider value={translations}>{children}</I18nContext.Provider>;
+}
+
+export function replaceI18nVariablesInString(str: string, replaceWith: string) {
+  return str.replace(/({{[^}]+}})/g, replaceWith);
+}
+
+export function useTr() {
+  const context = useContext(I18nContext);
+
+  return (key: keyof I18N, units?: number) => {
+    const thereAreUnits = typeof units === 'number';
+    const keyToUse = thereAreUnits && units > 1 ? `${key}_plural` : key;
+
+    if (context && keyToUse in context) {
+      // @ts-expect-error
+      const tr: string = context[keyToUse];
+
+      if (thereAreUnits) {
+        return replaceI18nVariablesInString(tr, units.toString());
+      }
+      return tr;
+    }
+
+    return '';
+  };
+}

package/src/rich-text-editor/i18n/translations/en.ts

@@ -0,0 +1,66 @@
+import type { I18N } from '../types';
+
+const translations: I18N = {
+  actionClearTextFormatting: 'Clear text formatting',
+  actionTextFormattingOptions: 'Formatting options for additional text styles',
+  actionFormatAsStrongLabel: 'Format text as bold',
+  actionFormatAsStrongTitle: 'Bold (Ctrl+B)',
+  actionFormatAsStrongTitleApple: 'Bold (⌘B)',
+  actionFormatAsEmphasizedLabel: 'Format text as italics',
+  actionFormatAsEmphasizedTitle: 'Italic (Ctrl+I)',
+  actionFormatAsEmphasizedTitleApple: 'Italic (⌘I)',
+  actionFormatAsUnderlinedLabel: 'Underline text',
+  actionFormatAsUnderlinedTitle: 'Underlined (Ctrl+U)',
+  actionFormatAsUnderlinedTitleApple: 'Underlined (⌘U)',
+  actionFormatWithStrikethroughLabel: 'Format text with a strikethrough',
+  actionFormatWithStrikethroughTitle: 'Strikethrough',
+  actionFormatWithSubscriptLabel: 'Format text as subscript',
+  actionFormatWithSubscriptTitle: 'Subscript',
+  actionFormatWithSuperscriptLabel: 'Format text as superscript',
+  actionFormatWithSuperscriptTitle: 'Superscript',
+  actionInsertCodeBlock: 'Insert code block',
+  actionInsertlink: 'Insert link',
+  actionCopyJSON: 'Copy JSON',
+  actionCopyCode: 'Copy code',
+  actionClear: 'Clear editor',
+  actionFormatCode: 'Format code with Prettier',
+  actionTableInsertRowsAbove: 'Insert row above',
+  actionTableInsertRowsAbove_plural: 'Insert {{rows}} rows above',
+  actionTableInsertRowsBelow: 'Insert row above',
+  actionTableInsertRowsBelow_plural: 'Insert {{rows}} rows above',
+  actionTableInsertColumnsBefore: 'Insert column left',
+  actionTableInsertColumnsBefore_plural: 'Insert {{columns}} columns left',
+  actionTableInsertColumnsAfter: 'Insert column right',
+  actionTableInsertColumnsAfter_plural: 'Insert {{columns}} columns right',
+  actionTableAddRowHeader: 'Add row header',
+  actionTableRemoveRowHeader: 'Remove row header',
+  actionTableAddColumnHeader: 'Add column header',
+  actionTableRemoveColumnHeader: 'Remove column header',
+  actionTableDeleteColumn: 'Delete column',
+  actionTableDeleteRow: 'Delete row',
+  actionTableDeleteTable: 'Delete table',
+  actionTableOpenOptions: 'Open table options',
+  actionUndoLabel: 'Undo',
+  actionUndoTitle: 'Undo (Ctrl+Z)',
+  actionUndoTitleApple: 'Undo (⌘Z)',
+  actionRedoLabel: 'Undo',
+  actionRedoTitle: 'Undo (Ctrl+Y)',
+  actionRedoTitleApple: 'Redo (⌘Y)',
+  codeSelectLanguage: 'Select language',
+  linkEditorLink: 'Link',
+  linkEditorRel: 'Rel',
+  linkEditorTarget: 'Target',
+  linkEditorCommit: 'Done',
+  linkEditorEdit: 'Edit',
+  linkPreviewReplaceTextWithTitle: 'Replace link text with its title',
+  horizontalRule: 'Horizontal rule',
+  table: 'Table',
+  insertTableTitle: 'Insert table',
+  insertTableDescription:
+    'Define your starting point of a table, you can add and remove columns and rows after creation.',
+  insertTableRows: 'Rows',
+  insertTableColumns: 'Columns',
+  insertTableCommit: 'Insert table',
+} as const;
+
+export default translations;

package/src/rich-text-editor/i18n/types.ts

@@ -0,0 +1,62 @@
+export type I18NKeys =
+  | 'actionClearTextFormatting'
+  | 'actionTextFormattingOptions'
+  | 'actionFormatAsStrongLabel'
+  | 'actionFormatAsStrongTitle'
+  | 'actionFormatAsStrongTitleApple'
+  | 'actionFormatAsEmphasizedLabel'
+  | 'actionFormatAsEmphasizedTitle'
+  | 'actionFormatAsEmphasizedTitleApple'
+  | 'actionFormatAsUnderlinedLabel'
+  | 'actionFormatAsUnderlinedTitle'
+  | 'actionFormatAsUnderlinedTitleApple'
+  | 'actionFormatWithStrikethroughLabel'
+  | 'actionFormatWithStrikethroughTitle'
+  | 'actionFormatWithSubscriptLabel'
+  | 'actionFormatWithSubscriptTitle'
+  | 'actionFormatWithSuperscriptLabel'
+  | 'actionFormatWithSuperscriptTitle'
+  | 'actionCopyJSON'
+  | 'actionClear'
+  | 'actionFormatCode'
+  | 'actionCopyCode'
+  | 'actionInsertCodeBlock'
+  | 'actionInsertlink'
+  | 'actionTableInsertRowsAbove'
+  | 'actionTableInsertRowsAbove_plural'
+  | 'actionTableInsertRowsBelow'
+  | 'actionTableInsertRowsBelow_plural'
+  | 'actionTableInsertColumnsBefore'
+  | 'actionTableInsertColumnsBefore_plural'
+  | 'actionTableInsertColumnsAfter'
+  | 'actionTableInsertColumnsAfter_plural'
+  | 'actionTableAddRowHeader'
+  | 'actionTableRemoveRowHeader'
+  | 'actionTableAddColumnHeader'
+  | 'actionTableRemoveColumnHeader'
+  | 'actionTableDeleteColumn'
+  | 'actionTableDeleteRow'
+  | 'actionTableDeleteTable'
+  | 'actionTableOpenOptions'
+  | 'actionUndoLabel'
+  | 'actionUndoTitle'
+  | 'actionUndoTitleApple'
+  | 'actionRedoLabel'
+  | 'actionRedoTitle'
+  | 'actionRedoTitleApple'
+  | 'codeSelectLanguage'
+  | 'linkEditorLink'
+  | 'linkEditorRel'
+  | 'linkEditorTarget'
+  | 'linkEditorCommit'
+  | 'linkEditorEdit'
+  | 'linkPreviewReplaceTextWithTitle'
+  | 'horizontalRule'
+  | 'table'
+  | 'insertTableTitle'
+  | 'insertTableDescription'
+  | 'insertTableRows'
+  | 'insertTableColumns'
+  | 'insertTableCommit';
+
+export type I18N = Record<I18NKeys, string>;

package/src/rich-text-editor/plugins/ActionsPlugin/index.tsx

@@ -11,6 +11,7 @@ import { CLEAR_EDITOR_COMMAND, LexicalEditor } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 
 import { ActionMenu } from '../../../action-menu';
+import { useTr } from '../../i18n';
 import { lexicalToCrystallizeRichText } from '../../model/lexical-to-crystallize';
 import type { CrystallizeRichTextActionMenuItem } from '../../types/types';
 
@@ -24,25 +25,6 @@ async function copyJson(editor: LexicalEditor) {
   }
 }
 
-async function exportJson(editor: LexicalEditor) {
-  const json = lexicalToCrystallizeRichText({ editorState: editor.getEditorState() });
-
-  const blob = new Blob([JSON.stringify(json, null, 1)], {
-    type: 'application/json',
-  });
-  const href = URL.createObjectURL(blob);
-
-  const link = document.createElement('a');
-  link.href = href;
-  link.download = 'crystallizeRichText.json';
-
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-
-  URL.revokeObjectURL(href);
-}
-
 export default function ActionsPlugin({
   append,
   prepend,
@@ -51,6 +33,8 @@ export default function ActionsPlugin({
   prepend?: CrystallizeRichTextActionMenuItem[];
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
+  const tr = useTr();
+
   return (
     <div className="z-50 flex items-center ">
       <div></div>
@@ -66,8 +50,7 @@ export default function ActionsPlugin({
                 {actionItem.title}
               </ActionMenu.Item>
             ))}
-        <ActionMenu.Item onSelect={() => copyJson(editor)}>Copy JSON</ActionMenu.Item>
-        <ActionMenu.Item onSelect={() => exportJson(editor)}>Export JSON</ActionMenu.Item>
+        <ActionMenu.Item onSelect={() => copyJson(editor)}>{tr('actionCopyJSON')}</ActionMenu.Item>
         <ActionMenu.Item
           className="danger"
           onSelect={() => {
@@ -75,7 +58,7 @@ export default function ActionsPlugin({
             editor.focus();
           }}
         >
-          Clear paragraph
+          {tr('actionClear')}
         </ActionMenu.Item>
         {!append
           ? null

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/CopyButton/index.tsx

@@ -12,6 +12,8 @@ import { $getNearestNodeFromDOMNode, $getSelection, $setSelection, LexicalEditor
 import { useDebouncedCallback } from 'use-debounce';
 import { $isCodeNode } from '@lexical/code';
 
+import { useTr } from '../../../../i18n';
+
 interface Props {
   editor: LexicalEditor;
   getCodeDOMNode: () => HTMLElement | null;
@@ -19,6 +21,7 @@ interface Props {
 
 export function CopyButton({ editor, getCodeDOMNode }: Props) {
   const [isCopyCompleted, setCopyCompleted] = useState<boolean>(false);
+  const tr = useTr();
 
   const removeSuccessIcon = useDebouncedCallback(() => {
     setCopyCompleted(false);
@@ -54,7 +57,7 @@ export function CopyButton({ editor, getCodeDOMNode }: Props) {
   }
 
   return (
-    <button className="menu-item" onClick={handleClick} aria-label="copy">
+    <button className="menu-item" onClick={handleClick} aria-label={tr('actionCopyCode')}>
       {isCopyCompleted ? <i className="format success" /> : <i className="format copy" />}
     </button>
   );

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx

@@ -12,6 +12,8 @@ import { $getNearestNodeFromDOMNode, LexicalEditor } from 'lexical';
 import type { Options } from 'prettier';
 import { $isCodeNode } from '@lexical/code';
 
+import { useTr } from '../../../../i18n';
+
 interface Props {
   lang: string;
   editor: LexicalEditor;
@@ -69,6 +71,7 @@ function getPrettierOptions(lang: string): Options {
 export function PrettierButton({ lang, editor, getCodeDOMNode }: Props) {
   const [syntaxError, setSyntaxError] = useState<string>('');
   const [tipsVisible, setTipsVisible] = useState<boolean>(false);
+  const tr = useTr();
 
   async function handleClick(): Promise<void> {
     const codeDOMNode = getCodeDOMNode();
@@ -92,6 +95,13 @@ export function PrettierButton({ lang, editor, getCodeDOMNode }: Props) {
 
           parsed = format(content, options);
 
+          /**
+           * Remove EOF from prettier output. This is useful when
+           * using prettier on files, but becomes weird when the code
+           * is embedded within a larger portion of text.
+           */
+          parsed = parsed.replace(/[\r\n]+$/, '');
+
           if (parsed !== '') {
             const selection = codeNode.select(0);
             selection.insertText(parsed);
@@ -129,7 +139,7 @@ export function PrettierButton({ lang, editor, getCodeDOMNode }: Props) {
         onClick={handleClick}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        aria-label="prettier"
+        aria-label={tr('actionFormatCode')}
       >
         {syntaxError ? <i className="format prettier-error" /> : <i className="format prettier" />}
       </button>

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx

@@ -29,7 +29,7 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }): J
 
   const [lang, setLang] = useState('');
   const [isShown, setShown] = useState<boolean>(false);
-  const [shouldListenMouseMove, setShouldListenMouseMove] = useState<boolean>(false);
+  const [shouldListenMouseMove, setShouldListenMouseMove] = useState<boolean>(true);
   const [position, setPosition] = useState<Position>({
     right: '0',
     top: '0',
@@ -43,6 +43,7 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }): J
 
   const debouncedOnMouseMove = useDebouncedCallback((event: MouseEvent) => {
     const { codeDOMNode, isOutside } = getMouseInfo(event);
+
     if (isOutside) {
       setShown(false);
       return;

package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx

@@ -30,6 +30,7 @@ import { Button } from '../../../button';
 import { IconButton } from '../../../icon-button';
 import { Icon } from '../../../iconography';
 import { InputWithLabel } from '../../../input-with-label';
+import { useTr } from '../../i18n';
 import LinkPreview from '../../ui/LinkPreview';
 import { getSelectedNode } from '../../utils/getSelectedNode';
 import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition';
@@ -53,6 +54,7 @@ function FloatingLinkEditor({
   const [target, setTarget] = useState<string | null>(null);
   const [isEditMode, setEditMode] = useState(false);
   const [lastSelection, setLastSelection] = useState<RangeSelection | GridSelection | NodeSelection | null>(null);
+  const tr = useTr();
 
   const updateLinkEditor = useCallback(() => {
     const selection = $getSelection();
@@ -187,14 +189,29 @@ function FloatingLinkEditor({
       {isEditMode ? (
         <div>
           <div className="border-0 border-b border-gray-100-800 border-solid px-3">
-            <InputWithLabel label="Link" type="text" value={linkUrl} onChange={e => setLinkUrl(e.target.value)} />
+            <InputWithLabel
+              label={tr('linkEditorLink')}
+              type="text"
+              value={linkUrl}
+              onChange={e => setLinkUrl(e.target.value)}
+            />
           </div>
 
           <div className="border-0 border-b border-gray-100-800 border-solid px-3">
-            <InputWithLabel label="Rel" type="text" value={rel ?? ''} onChange={e => setRel(e.target.value)} />
+            <InputWithLabel
+              label={tr('linkEditorRel')}
+              type="text"
+              value={rel ?? ''}
+              onChange={e => setRel(e.target.value)}
+            />
           </div>
           <div className="border-0 border-b border-gray-100-800 border-solid px-3">
-            <InputWithLabel label="Target" type="text" value={target ?? ''} onChange={e => setTarget(e.target.value)} />
+            <InputWithLabel
+              label={tr('linkEditorTarget')}
+              type="text"
+              value={target ?? ''}
+              onChange={e => setTarget(e.target.value)}
+            />
           </div>
           <div className="flex px-6 py-2 justify-end">
             <Button
@@ -211,14 +228,14 @@ function FloatingLinkEditor({
                 }
               }}
             >
-              Done
+              {tr('linkEditorCommit')}
             </Button>
           </div>
         </div>
       ) : (
         <>
           <div className="link-input !flex flex-nowrap justify-between items-center max-w-full ">
-            <div className=" grid">
+            <div className="grid">
               <a href={linkUrl} target="_blank" rel="noopener noreferrer">
                 {linkUrl}
               </a>
@@ -241,6 +258,7 @@ function FloatingLinkEditor({
                 tabIndex={0}
                 onMouseDown={event => event.preventDefault()}
                 onClick={() => setEditMode(true)}
+                aria-label={tr('linkEditorEdit')}
               >
                 <Icon.Edit />
               </IconButton>

package/src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -25,6 +25,8 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { mergeRegister } from '@lexical/utils';
 
 import { IconButton } from '../../../icon-button';
+import { useTr } from '../../i18n';
+import { IS_APPLE } from '../../utils/environment';
 import { getDOMRangeRect } from '../../utils/getDOMRangeRect';
 import { getSelectedNode } from '../../utils/getSelectedNode';
 import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition';
@@ -53,6 +55,7 @@ function TextFormatFloatingToolbar({
   isUnderline: boolean;
 }): JSX.Element {
   const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);
+  const tr = useTr();
 
   const insertLink = useCallback(() => {
     if (!isLink) {
@@ -139,7 +142,8 @@ function TextFormatFloatingToolbar({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
             }}
             style={{ padding: 0, overflow: 'hidden' }}
-            aria-label="Format text as bold"
+            title={tr(IS_APPLE ? 'actionFormatAsStrongTitleApple' : 'actionFormatAsStrongTitle')}
+            aria-label={tr('actionFormatAsStrongLabel')}
           >
             <i
               className={`format bold  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
@@ -152,7 +156,8 @@ function TextFormatFloatingToolbar({
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
             }}
-            aria-label="Format text as italics"
+            title={tr('actionFormatAsEmphasizedTitle')}
+            aria-label={tr('actionFormatAsEmphasizedLabel')}
           >
             <i
               className={`format italic  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
@@ -165,7 +170,8 @@ function TextFormatFloatingToolbar({
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
             }}
-            aria-label="Format text to underlined"
+            title={tr('actionFormatAsUnderlinedTitle')}
+            aria-label={tr('actionFormatAsUnderlinedLabel')}
           >
             <i
               className={`format underline  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
@@ -178,7 +184,8 @@ function TextFormatFloatingToolbar({
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
             }}
-            aria-label="Format text with a strikethrough"
+            title={tr('actionFormatWithStrikethroughTitle')}
+            aria-label={tr('actionFormatWithStrikethroughLabel')}
           >
             <i
               className={`format strikethrough  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
@@ -191,8 +198,8 @@ function TextFormatFloatingToolbar({
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
             }}
-            title="Subscript"
-            aria-label="Format Subscript"
+            title={tr('actionFormatWithSubscriptTitle')}
+            aria-label={tr('actionFormatWithSubscriptLabel')}
           >
             <i
               className={`format subscript  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
@@ -205,8 +212,8 @@ function TextFormatFloatingToolbar({
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
             }}
-            title="Superscript"
-            aria-label="Format Superscript"
+            title={tr('actionFormatWithSuperscriptTitle')}
+            aria-label={tr('actionFormatWithSuperscriptLabel')}
           >
             <i
               className={`format superscript  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
@@ -219,7 +226,7 @@ function TextFormatFloatingToolbar({
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
             }}
-            aria-label="Insert code block"
+            aria-label={tr('actionInsertCodeBlock')}
           >
             <i
               className={`format code  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
@@ -227,7 +234,11 @@ function TextFormatFloatingToolbar({
               }`}
             />
           </IconButton>
-          <IconButton style={{ padding: 0, overflow: 'hidden' }} onClick={insertLink} aria-label="Insert link">
+          <IconButton
+            style={{ padding: 0, overflow: 'hidden' }}
+            onClick={insertLink}
+            aria-label={tr('actionInsertlink')}
+          >
             <i
               className={`format link  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
                 isLink ? 'bg-purple-50-900 opacity-100' : 'opacity-60'

package/src/rich-text-editor/plugins/TabFocusPlugin/index.tsx

@@ -6,14 +6,9 @@
  *
  */
 
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {
-  $getSelection,
-  $isRangeSelection,
-  $setSelection,
-  FOCUS_COMMAND,
-} from 'lexical';
-import {useEffect} from 'react';
+import { useEffect } from 'react';
+import { $getSelection, $isRangeSelection, $setSelection, FOCUS_COMMAND } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 
 const COMMAND_PRIORITY_LOW = 1;
 const TAB_TO_FOCUS_INTERVAL = 100;
@@ -48,10 +43,7 @@ export default function TabFocusPlugin(): null {
       (event: FocusEvent) => {
         const selection = $getSelection();
         if ($isRangeSelection(selection)) {
-          if (
-            lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL >
-            event.timeStamp
-          ) {
+          if (lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL > event.timeStamp) {
             $setSelection(selection.clone());
           }
         }

package/src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx

@@ -33,6 +33,7 @@ import {
 import { DropdownMenu } from '../../../dropdown-menu';
 import { IconButton } from '../../../icon-button';
 import { Icon } from '../../../iconography';
+import { useTr } from '../../i18n';
 
 type TableStats = {
   rows: number;
@@ -51,6 +52,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }: TableCel
     columns: 1,
     rows: 1,
   });
+  const tr = useTr();
 
   useEffect(() => {
     return editor.registerMutationListener(TableCellNode, nodeMutations => {
@@ -254,41 +256,48 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }: TableCel
   return (
     <>
       <DropdownMenu.Item onSelect={() => insertTableRowAtSelection(false)}>
-        Insert {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`} above
+        {tr('actionTableInsertRowsAbove', selectionCounts.rows)}
       </DropdownMenu.Item>
       <DropdownMenu.Item onSelect={() => insertTableRowAtSelection(true)}>
-        Insert {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`} below
+        {tr('actionTableInsertRowsBelow', selectionCounts.rows)}
       </DropdownMenu.Item>
       <DropdownMenu.Item onSelect={() => insertTableColumnAtSelection(false)}>
-        Insert {selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} left
+        {tr('actionTableInsertColumnsBefore', selectionCounts.columns)}
       </DropdownMenu.Item>
       <DropdownMenu.Item onSelect={() => insertTableColumnAtSelection(true)}>
-        Insert {selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} right
+        {tr('actionTableInsertColumnsAfter', selectionCounts.columns)}
       </DropdownMenu.Item>
       <DropdownMenu.Item onSelect={() => toggleTableRowIsHeader()}>
-        {(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? 'Remove' : 'Add'} row
-        header
+        {tr(
+          (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW
+            ? 'actionTableRemoveRowHeader'
+            : 'actionTableAddRowHeader',
+        )}
       </DropdownMenu.Item>
       <DropdownMenu.Item onSelect={() => toggleTableColumnIsHeader()}>
-        {(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
-          ? 'Remove'
-          : 'Add'}{' '}
-        column header
+        {tr(
+          (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
+            ? 'actionTableRemoveColumnHeader'
+            : 'actionTableAddColumnHeader',
+        )}
       </DropdownMenu.Item>
       <DropdownMenu.Separator />
       {tableStats.columns > 1 && (
-        <DropdownMenu.Item onSelect={() => deleteTableColumnAtSelection()}>Delete column</DropdownMenu.Item>
+        <DropdownMenu.Item onSelect={() => deleteTableColumnAtSelection()}>
+          {tr('actionTableDeleteColumn')}
+        </DropdownMenu.Item>
       )}
       {tableStats.rows > 1 && (
-        <DropdownMenu.Item onSelect={() => deleteTableRowAtSelection()}>Delete row</DropdownMenu.Item>
+        <DropdownMenu.Item onSelect={() => deleteTableRowAtSelection()}>{tr('actionTableDeleteRow')}</DropdownMenu.Item>
       )}
-      <DropdownMenu.Item onSelect={() => deleteTableAtSelection()}>Delete table</DropdownMenu.Item>
+      <DropdownMenu.Item onSelect={() => deleteTableAtSelection()}>{tr('actionTableDeleteTable')}</DropdownMenu.Item>
     </>
   );
 }
 
 function TableCellActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }) {
   const [editor] = useLexicalComposerContext();
+  const tr = useTr();
 
   const menuButtonRef = useRef(null);
 
@@ -393,7 +402,7 @@ function TableCellActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement
           onOpenChange={isOpen => setIsMenuOpen(isOpen)}
           content={<TableActionMenu tableCellNode={tableCellNode} tableStats={tableStats} />}
         >
-          <IconButton size="xs" className="table-cell-action-button">
+          <IconButton size="xs" className="table-cell-action-button" aria-label={tr('actionTableOpenOptions')}>
             <Icon.Arrow />
           </IconButton>
         </DropdownMenu.Root>