@crystallize/design-system 1.10.0 → 1.11.0

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';
 
@@ -449,3 +450,12 @@ export const MultipleInlineFormats: Story = {
     },
   },
 };
+
+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/ui/LinkPreview.tsx

@@ -12,6 +12,7 @@ import { $getSelection, $isTextNode } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 
 import { Button } from '../../button';
+import { useTr } from '../i18n';
 
 type MetaTagBaseShared = {
   description?: string;
@@ -77,6 +78,7 @@ function LinkPreviewContent({
   const [textContent, setTextContent] = useState('');
   const { preview } = useSuspenseRequest(url);
   const [editor] = useLexicalComposerContext();
+  const tr = useTr();
 
   const hasPreview = preview !== null && preview.google?.title;
 
@@ -128,7 +130,7 @@ function LinkPreviewContent({
       {preview.google.description && <div className="LinkPreview__description">{preview.google.description}</div>}
       {textContent && textContent !== preview.google.title ? (
         <Button className="mb-4 ml-5" onClick={useTitleForText}>
-          Replace link text with its title
+          {tr('linkPreviewReplaceTextWithTitle')}
         </Button>
       ) : null}
     </div>

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

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-.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;
-}

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

@@ -1,15 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import './ContentEditable.css';
-import * as React from 'react';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-
-export default function LexicalContentEditable({ className }: { className?: string }): JSX.Element {
-  return <ContentEditable className={className || 'ContentEditable__root'} />;
-}