@crystallize/design-system 1.9.0 → 1.11.0

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>

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

@@ -58,6 +58,7 @@ import { Dialog } from '../../../dialog';
 import { DropdownMenu } from '../../../dropdown-menu';
 import { IconButton } from '../../../icon-button';
 import { Icon } from '../../../iconography';
+import { useTr } from '../../i18n';
 import type { CrystallizeRichTextActionMenuItem } from '../../types/types';
 import { IS_APPLE } from '../../utils/environment';
 import { getSelectedNode } from '../../utils/getSelectedNode';
@@ -301,6 +302,7 @@ export default function ToolbarPlugin({
   const [isCode, setIsCode] = useState(false);
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
+  const tr = useTr();
 
   const [codeLanguage, setCodeLanguage] = useState<string>('');
   const [isEditable, setIsEditable] = useState(() => editor.isEditable());
@@ -453,9 +455,9 @@ export default function ToolbarPlugin({
           onClick={() => {
             activeEditor.dispatchCommand(UNDO_COMMAND, undefined);
           }}
-          title={IS_APPLE ? 'Undo (⌘Z)' : 'Undo (Ctrl+Z)'}
           type="button"
-          aria-label="Undo"
+          title={tr(IS_APPLE ? 'actionUndoTitleApple' : 'actionUndoTitle')}
+          aria-label={tr('actionUndoLabel')}
         >
           <i
             className={`format icon undo border w-4 h-6 bg-no-repeat bg-center bg-[length:17px_17px] ${
@@ -469,9 +471,9 @@ export default function ToolbarPlugin({
           onClick={() => {
             activeEditor.dispatchCommand(REDO_COMMAND, undefined);
           }}
-          title={IS_APPLE ? 'Redo (⌘Y)' : 'Redo (Ctrl+Y)'}
           type="button"
-          aria-label="Redo"
+          title={tr(IS_APPLE ? 'actionRedoTitleApple' : 'actionRedoTitle')}
+          aria-label={tr('actionRedoLabel')}
         >
           <i
             className={`format icon redo border w-4 h-6 bg-no-repeat bg-center bg-[length:17px_17px] ${
@@ -515,7 +517,7 @@ export default function ToolbarPlugin({
                 </>
               }
             >
-              <Button aria-label="Select language" append={<Icon.Arrow />}>
+              <Button aria-label={tr('codeSelectLanguage')} append={<Icon.Arrow />}>
                 <span className="font-medium text-sm">{getLanguageFriendlyName(codeLanguage)}</span>
               </Button>
             </DropdownMenu.Root>
@@ -525,10 +527,10 @@ export default function ToolbarPlugin({
             <div className="flex gap-1">
               <IconButton
                 disabled={!isEditable}
-                title={IS_APPLE ? 'Bold (⌘B)' : 'Bold (Ctrl+B)'}
                 className={`${isBold ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'}`}
                 type="button"
-                aria-label={`Format text as bold. Shortcut: ${IS_APPLE ? '⌘B' : 'Ctrl+B'}`}
+                title={tr(IS_APPLE ? 'actionFormatAsStrongTitleApple' : 'actionFormatAsStrongTitle')}
+                aria-label={tr('actionFormatAsStrongLabel')}
                 data-testid="toggle-format-bold"
                 onClick={() => {
                   activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
@@ -542,9 +544,9 @@ export default function ToolbarPlugin({
                 onClick={() => {
                   activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
                 }}
-                title={IS_APPLE ? 'Italic (⌘I)' : 'Italic (Ctrl+I)'}
                 type="button"
-                aria-label={`Format text as italics. Shortcut: ${IS_APPLE ? '⌘I' : 'Ctrl+I'}`}
+                title={tr(IS_APPLE ? 'actionFormatAsEmphasizedTitleApple' : 'actionFormatAsEmphasizedTitle')}
+                aria-label={tr('actionFormatAsEmphasizedLabel')}
                 data-testid="toggle-format-emphasized"
               >
                 <i className={`format icon italic border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`} />
@@ -556,9 +558,9 @@ export default function ToolbarPlugin({
                 onClick={() => {
                   activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
                 }}
-                title={IS_APPLE ? 'Underline (⌘U)' : 'Underline (Ctrl+U)'}
                 type="button"
-                aria-label={`Format text to underlined. Shortcut: ${IS_APPLE ? '⌘U' : 'Ctrl+U'}`}
+                title={tr(IS_APPLE ? 'actionFormatAsUnderlinedTitleApple' : 'actionFormatAsUnderlinedTitle')}
+                aria-label={tr('actionFormatAsUnderlinedLabel')}
                 data-testid="toggle-format-underlined"
               >
                 <i
@@ -572,9 +574,9 @@ export default function ToolbarPlugin({
                 onClick={() => {
                   activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
                 }}
-                title="Insert code block"
                 type="button"
-                aria-label="Insert code block"
+                title={tr('actionInsertCodeBlock')}
+                aria-label={tr('actionInsertCodeBlock')}
               >
                 <i className={`format icon code border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`} />
               </IconButton>
@@ -583,9 +585,9 @@ export default function ToolbarPlugin({
                 className={`${isLink ? 'opacity-100 !bg-purple-50-900' : 'opacity-60'}`}
                 disabled={!isEditable}
                 onClick={insertLink}
-                aria-label="Insert link"
-                title="Insert link"
                 type="button"
+                aria-label={tr('actionInsertlink')}
+                title={tr('actionInsertlink')}
               >
                 <i className={`format icon link border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`} />
               </IconButton>
@@ -599,8 +601,8 @@ export default function ToolbarPlugin({
                       onClick={() => {
                         activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
                       }}
-                      title="Strikethrough"
-                      aria-label="Format text with a strikethrough"
+                      title={tr('actionFormatWithStrikethroughTitle')}
+                      aria-label={tr('actionFormatWithStrikethroughLabel')}
                     >
                       <i
                         className={`icon w-6 h-6 strikethrough border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${
@@ -608,15 +610,15 @@ export default function ToolbarPlugin({
                         }`}
                       />
                       <span className={`px-3 text-sm font-sans ${isStrikethrough ? 'font-medium' : 'font-normal'}`}>
-                        Strikethrough
+                        {tr('actionFormatAsStrongTitle')}
                       </span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
                       onClick={() => {
                         activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
                       }}
-                      title="Subscript"
-                      aria-label="Format text with a subscript"
+                      title={tr('actionFormatWithSubscriptTitle')}
+                      aria-label={tr('actionFormatWithSubscriptLabel')}
                     >
                       <i
                         className={`icon w-6 h-6 subscript border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${
@@ -624,15 +626,15 @@ export default function ToolbarPlugin({
                         }`}
                       />
                       <span className={`px-3 text-sm font-sans ${isSubscript ? 'font-medium' : 'font-normal'}`}>
-                        Subscript
+                        {tr('actionFormatWithSubscriptTitle')}
                       </span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
                       onClick={() => {
                         activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
                       }}
-                      title="Superscript"
-                      aria-label="Format text with a superscript"
+                      title={tr('actionFormatWithSuperscriptTitle')}
+                      aria-label={tr('actionFormatWithSuperscriptLabel')}
                     >
                       <i
                         className={`icon w-6 h-6 superscript border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${
@@ -640,14 +642,14 @@ export default function ToolbarPlugin({
                         }`}
                       />
                       <span className={`px-3 text-sm font-sans ${isSuperscript ? 'bg-purple-50-900' : 'font-normal'}`}>
-                        Superscript
+                        {tr('actionFormatWithSuperscriptTitle')}
                       </span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
                       onClick={clearFormatting}
                       className="item"
-                      title="Clear text formatting"
-                      aria-label="Clear all text formatting"
+                      title={tr('actionClearTextFormatting')}
+                      aria-label={tr('actionClearTextFormatting')}
                     >
                       <i className="icon w-6 h-6 clear border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" />
                       <span className="px-3 text-sm text-pink-600-300 font-sans font-normal">Clear Formatting</span>
@@ -657,7 +659,7 @@ export default function ToolbarPlugin({
               >
                 <Button
                   style={{ backgroundColor: 'transparent', padding: '0 8px' }}
-                  aria-label="Formatting options for additional text styles"
+                  aria-label={tr('actionTextFormattingOptions')}
                 >
                   <i className={`icon dropdown-more border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6`} />
                   <Icon.Arrow />
@@ -676,14 +678,14 @@ export default function ToolbarPlugin({
                     >
                       <div className="flex items-center font-sans font-normal">
                         <i className="icon w-5 h-5 horizontal-rule border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" />
-                        <span className="px-3 text-sm">Horizontal rule</span>
+                        <span className="px-3 text-sm">{tr('horizontalRule')}</span>
                       </div>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item>
                       <Dialog.Trigger asChild>
                         <div className="flex items-center font-sans font-normal">
                           <i className="icon w-5 h-5 table border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" />
-                          <span className="px-3 text-sm">Table</span>
+                          <span className="px-3 text-sm">{tr('table')}</span>
                         </div>
                       </Dialog.Trigger>
                     </DropdownMenu.Item>
@@ -695,10 +697,8 @@ export default function ToolbarPlugin({
                 </IconButton>
               </DropdownMenu.Root>
               <Dialog.Content>
-                <Dialog.Title>Insert table</Dialog.Title>
-                <Dialog.Description>
-                  Define your starting point of a table, you can add and remove columns and rows after creation.
-                </Dialog.Description>
+                <Dialog.Title>{tr('insertTableTitle')}</Dialog.Title>
+                <Dialog.Description>{tr('insertTableDescription')}</Dialog.Description>
                 <div className="items-center justify-between">
                   <InsertTableDialog activeEditor={activeEditor} />
                 </div>

package/src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx

@@ -5,10 +5,12 @@ import { INSERT_TABLE_COMMAND } from '@lexical/table';
 import { Button } from '../../../button';
 import { Dialog } from '../../../dialog';
 import { InputWithLabel } from '../../../input-with-label';
+import { useTr } from '../../i18n';
 
 export function InsertTableDialog({ activeEditor }: { activeEditor: LexicalEditor }) {
   const [rows, setRows] = useState('5');
   const [columns, setColumns] = useState('5');
+  const tr = useTr();
 
   const onClick = () => {
     if (parseInt(rows) < 1 || parseInt(columns) < 1) {
@@ -28,7 +30,7 @@ export function InsertTableDialog({ activeEditor }: { activeEditor: LexicalEdito
     <>
       <div className="grid grid-cols-[1fr_1px_1fr] border border-gray-100-800 border-solid shadow-sm rounded-md ">
         <InputWithLabel
-          label="Rows"
+          label={tr('insertTableRows')}
           value={rows}
           placeholder="0"
           type="text"
@@ -38,7 +40,7 @@ export function InsertTableDialog({ activeEditor }: { activeEditor: LexicalEdito
         <span className="h-full bg-gray-100-800" />
         <InputWithLabel
           type="text"
-          label="Columns"
+          label={tr('insertTableColumns')}
           placeholder="0"
           value={columns}
           inputMode="numeric"
@@ -46,8 +48,8 @@ export function InsertTableDialog({ activeEditor }: { activeEditor: LexicalEdito
         />
       </div>
       <div className="flex justify-end mt-3">
-        <Button as={Dialog.Close} size="sm" intent="action" aria-label="Confirm" onClick={onClick}>
-          Confirm
+        <Button as={Dialog.Close} size="sm" intent="action" aria-label={tr('insertTableCommit')} onClick={onClick}>
+          {tr('insertTableCommit')}
         </Button>
       </div>
     </>

package/src/rich-text-editor/rich-text-editor.css

@@ -997,6 +997,12 @@
     user-select: none;
   }
 
+  .ContentEditable__root {
+    tab-size: 1;
+    min-height: calc(100% - 16px);
+    @apply relative block border-0 px-6 py-2 !pt-0 text-sm outline-0;
+  }
+
   .TableNode__contentEditable {
     min-height: 20px;
     border: 0px;

package/src/rich-text-editor/rich-text-editor.stories.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { labelTranslationEn } from './i18n';
 import { RichTextEditor } from './rich-text-editor';
 import type { CrystallizeRichText, CrystallizeRichTextNode } from './types/crystallize-rich-text-types';
 
@@ -421,3 +422,40 @@ export const Quote: Story = {
     },
   },
 };
+
+export const MultipleInlineFormats: Story = {
+  args: {
+    initialData: [
+      {
+        type: 'paragraph',
+        kind: 'block',
+        children: [
+          {
+            kind: 'inline',
+            type: 'strong',
+            children: [
+              {
+                kind: 'inline',
+                textContent: 'placed',
+                type: 'emphasized',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+
+export const CustomTranslation: Story = {
+  args: {
+    labelTranslations: {
+      ...labelTranslationEn,
+      actionClear: '💥 Kaboom',
+    },
+  },
+};

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

@@ -14,8 +14,11 @@ import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 
 import './rich-text-editor.css';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 
 import { SharedHistoryContext, useSharedHistoryContext } from './context/SharedHistoryContext';
+import { I18nProvider, SupportedLanguages } from './i18n';
+import type { I18N } from './i18n/types';
 import { composeInitialState } from './model/crystallize-to-lexical';
 import { lexicalToCrystallizeRichText } from './model/lexical-to-crystallize';
 import { BaseNodes } from './nodes/BaseNodes';
@@ -33,7 +36,6 @@ import ToolbarPlugin from './plugins/ToolbarPlugin';
 import CrystallizeRTEditorTheme from './themes/CrystallizeRTEditorTheme';
 import type { CrystallizeRichText } from './types/crystallize-rich-text-types';
 import type { CrystallizeRichTextActionMenuItem } from './types/types';
-import ContentEditable from './ui/ContentEditable';
 
 /**
  * Currently disabling this as there is a conflict with someting within
@@ -56,11 +58,15 @@ type TRichTextBase = {
   slotPreContent?: ReactNode;
   maxLength?: number;
   editable?: boolean;
+  language?: SupportedLanguages;
+  labelTranslations?: I18N;
 };
 
 export function RichTextEditor({
   initialData,
   editable = true,
+  language = 'en',
+  labelTranslations,
   ...rest
 }: TRichTextBase & {
   initialData?: CrystallizeRichText;
@@ -82,13 +88,13 @@ export function RichTextEditor({
           : undefined,
       }}
     >
-      <SharedHistoryContext>
-        {/* <TableContext> */}
-        <div className="c-rich-text-editor">
-          <RichTextEditorWithoutContext {...rest} editable={editable} />
-        </div>
-        {/* </TableContext> */}
-      </SharedHistoryContext>
+      <I18nProvider language={language} labelTranslations={labelTranslations}>
+        <SharedHistoryContext>
+          <div className="c-rich-text-editor">
+            <RichTextEditorWithoutContext {...rest} editable={editable} />
+          </div>
+        </SharedHistoryContext>
+      </I18nProvider>
     </LexicalComposer>
   );
 }
@@ -171,7 +177,7 @@ function RichTextEditorWithoutContext({
           contentEditable={
             <div className="editor-scroller">
               <div className="editor" ref={onRef}>
-                <ContentEditable />
+                <ContentEditable className="ContentEditable__root" />
               </div>
             </div>
           }

package/src/rich-text-editor/tests/rich-text-editor-model-conversions.test.tsx

@@ -189,11 +189,33 @@ const dataTypes: { name: string; model: CrystallizeRichText }[] = [
       },
     ],
   },
+  {
+    name: 'Multiple inline formats',
+    model: [
+      {
+        type: 'paragraph',
+        kind: 'block',
+        children: [
+          {
+            kind: 'inline',
+            type: 'strong',
+            children: [
+              {
+                kind: 'inline',
+                textContent: 'placed',
+                type: 'emphasized',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
 ];
 
 describe('RichTextEditor model conversions', () => {
   dataTypes.forEach(dataType => {
-    it('correctly converts an ' + dataType.name, async () => {
+    it('correctly converts ' + dataType.name, async () => {
       const onChange = vi.fn();
 
       render(<RichTextEditor initialData={dataType.model} onChange={onChange} triggerOnChangeOnAutoFocus autoFocus />);

package/src/rich-text-editor/types/crystallize-rich-text-types/index.ts

@@ -34,10 +34,8 @@ type CrystallizeRichTextGenericNode = {
     | 'aside'
     | 'container'
     | 'details'
-    | 'emphasized'
     | 'figcaption'
     | 'figure'
-    | 'highlight'
     | 'image'
     | 'line-break'
     | 'unordered-list'
@@ -51,9 +49,9 @@ type CrystallizeRichTextGenericNode = {
     | 'title-of-a-work';
 };
 
-type CrystallizeRichTextInlineFormattedNodes = {
+export type CrystallizeRichTextInlineFormattedNodes = {
   kind: 'inline';
-  type: 'deleted' | 'strong' | 'subscripted' | 'superscripted' | 'underlined';
+  type: 'deleted' | 'strong' | 'subscripted' | 'superscripted' | 'underlined' | 'emphasized' | 'code' | 'highlight';
 };
 
 export type CrystallizeRichTextNode = CrystallizeRichTextNodeBase &