@crystallize/design-system 1.10.0 → 1.11.1

package/package.json

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

package/src/iconography/info.tsx

@@ -20,7 +20,7 @@ export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
       />
       <path
         fillRule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M18.253 3.85212C18.253 5.04383 17.2869 6.00991 16.0952 6.00991C14.9035 6.00991 13.9374 5.04383 13.9374 3.85212C13.9374 2.66041 14.9035 1.69434 16.0952 1.69434C17.2869 1.69434 18.253 2.66041 18.253 3.85212ZM16.0952 5.34999C16.9224 5.34999 17.5931 4.67937 17.5931 3.85212C17.5931 3.02487 16.9224 2.35425 16.0952 2.35425C15.2679 2.35425 14.5973 3.02487 14.5973 3.85212C14.5973 4.67937 15.2679 5.34999 16.0952 5.34999Z"
         fill="#528693"
       />
@@ -30,7 +30,7 @@ export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
       />
       <path
         fillRule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M11.2842 18.976L11.3049 18.9785C11.5112 19.0031 11.7201 18.9658 11.9049 18.8714C12.0891 18.7772 12.2409 18.6306 12.3411 18.4504C12.3471 18.4394 12.352 18.4277 12.3558 18.4158C12.3317 18.4124 12.3048 18.4091 12.2731 18.4053C12.0384 18.3881 11.8084 18.33 11.5936 18.2335C11.2334 18.0797 10.9456 17.7933 10.7906 17.433C10.6341 17.0694 10.6252 16.6594 10.7658 16.2894C10.9266 15.8663 11.1487 15.4689 11.4246 15.1101L11.6291 14.8181C11.6293 14.8178 11.629 14.8184 11.6291 14.8181C12.0038 14.2802 12.4092 13.763 12.8423 13.2707L12.9418 13.1535C12.9894 13.097 13.0361 13.0418 13.0821 12.9874C13.2314 12.8108 13.3734 12.6428 13.5141 12.4665L13.5237 12.4544L13.5339 12.4428C14.107 11.7899 14.5194 11.0128 14.7386 10.1733C14.8642 9.60674 14.7724 9.1134 14.5125 8.69961C14.2452 8.27422 13.7678 7.88337 13.0466 7.60647L13.0376 7.60304C12.2034 7.26882 11.3198 7.07373 10.4221 7.02572C10.2586 7.02444 10.0952 7.03841 9.93422 7.06745L9.91342 7.0712L9.89242 7.07362C9.77981 7.08656 9.67209 7.12639 9.57839 7.18964C9.48729 7.25113 9.41209 7.33296 9.35867 7.42842C9.35249 7.44171 9.33941 7.47402 9.32659 7.52286C9.31959 7.54951 9.31383 7.57671 9.30949 7.60325C9.36308 7.61115 9.41754 7.61364 9.47206 7.61055L9.51828 7.60793L9.63538 7.61773C9.79024 7.6263 9.94419 7.64682 10.0959 7.67913L10.1211 7.68451L10.1459 7.69185C10.6213 7.83272 11.1176 8.10198 11.3044 8.65041L11.3058 8.6547C11.4603 9.11879 11.309 9.5616 11.1547 9.87197C10.9947 10.194 10.7584 10.5161 10.546 10.7961C10.1932 11.2626 9.79323 11.726 9.4222 12.1559L9.4167 12.1622L9.30686 12.2896L9.29607 12.301C8.50411 13.1358 7.82119 14.0671 7.26353 15.0728C6.95101 15.7053 6.92585 16.2828 7.10297 16.7755C7.28379 17.2785 7.70442 17.772 8.42421 18.1631L8.42623 18.1642C9.29923 18.6426 10.2687 18.9197 11.2633 18.9749L11.2842 18.976ZM6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8828 13.0625 13.7326 13.2401 13.582 13.4182C13.5366 13.4719 13.4912 13.5256 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659Z"
         fill="#528693"
       />

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,65 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+import labelTranslationEn from './translations/en';
+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({
+  labelTranslations,
+  children,
+}: {
+  language: SupportedLanguages;
+  labelTranslations?: I18N;
+  children: ReactNode;
+}) {
+  const translations = labelTranslations || labelTranslationEn;
+  // const [translations, setTranslations] = useState<I18N>(labelTranslations || labelTranslationEn);
+
+  // useEffect(() => {
+  //   let unmounted = false;
+  //   (async function load() {
+  //     if (language !== 'en') {
+  //       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());
           }
         }