@crystallize/design-system 1.9.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.9.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/model/crystallize-to-lexical.ts

@@ -3,6 +3,7 @@ import {
   $createParagraphNode,
   $createTextNode,
   $getRoot,
+  $isTextNode,
   LexicalNode,
   TextFormatType,
 } from 'lexical';
@@ -161,7 +162,34 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
 
       if (lexicalNode) {
         if (Array.isArray(children)) {
-          children.forEach(n => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode as LexicalNode }));
+          /**
+           * Support multiple nested inline text formats. A text can have both
+           * a strong _and_ underlined (and more) formats applied.
+           */
+          if ($isTextNode(lexicalNode)) {
+            const handleInlineTextChild = (child: CrystallizeRichTextNode) => {
+              if ($isTextNode(lexicalNode)) {
+                const textFormat = getLexicalTextFormat(child);
+
+                if (textFormat && !lexicalNode.hasFormat(textFormat)) {
+                  lexicalNode.toggleFormat(textFormat);
+                }
+
+                // Text content will be stored at the deepest nested child
+                if (child.textContent) {
+                  lexicalNode.setTextContent(child.textContent);
+                }
+              }
+
+              if ('children' in child) {
+                child.children?.forEach(handleInlineTextChild);
+              }
+            };
+
+            children.forEach(handleInlineTextChild);
+          } else {
+            children.forEach(n => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode as LexicalNode }));
+          }
         }
 
         lexicalParent.append(lexicalNode);

package/src/rich-text-editor/model/lexical-to-crystallize.ts

@@ -8,6 +8,7 @@ import {
   type ElementNode,
   type EditorState,
   LexicalEditor,
+  TextFormatType,
 } from 'lexical';
 import { $isCodeNode } from '@lexical/code';
 import { $isLinkNode } from '@lexical/link';
@@ -16,7 +17,11 @@ import { $isHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode'
 import { $isHeadingNode, $isQuoteNode, HeadingTagType } from '@lexical/rich-text';
 import { $isTableCellNode, $isTableNode, $isTableRowNode } from '@lexical/table';
 
-import type { CrystallizeRichTextNode, CrystallizeRichText } from '../types/crystallize-rich-text-types';
+import type {
+  CrystallizeRichTextNode,
+  CrystallizeRichText,
+  CrystallizeRichTextInlineFormattedNodes,
+} from '../types/crystallize-rich-text-types';
 import type { CrystallizeRichTextHeadingTypes } from '../types/crystallize-rich-text-types/headings';
 
 const headingMapper: Record<HeadingTagType, CrystallizeRichTextHeadingTypes> = {
@@ -182,10 +187,8 @@ export function lexicalToCrystallizeRichText({
                   kind: 'block',
                   type: 'horizontal-line',
                 });
-              } else {
-                if ($isTextNode(childNode)) {
-                  parentChildrenToUse.push(getTextChild(childNode));
-                }
+              } else if ($isTextNode(childNode)) {
+                parentChildrenToUse.push(getTextChild(childNode));
               }
             });
           }
@@ -197,36 +200,58 @@ export function lexicalToCrystallizeRichText({
   return crystallizeRichText;
 }
 
+const lexicalFormatToCrystallizeType: Record<TextFormatType, CrystallizeRichTextInlineFormattedNodes['type']> = {
+  bold: 'strong',
+  italic: 'emphasized',
+  underline: 'underlined',
+  strikethrough: 'deleted',
+  subscript: 'subscripted',
+  superscript: 'superscripted',
+  highlight: 'emphasized',
+  code: 'code',
+};
+
+/**
+ * Creates a rich text node with the ability to have
+ * nested inline text nodes.
+ */
 function getTextChild(n: TextNode): CrystallizeRichTextNode {
-  const textContent = n.getTextContent();
+  let currentChild: CrystallizeRichTextNode = {
+    kind: 'inline',
+  };
+  let textChild: CrystallizeRichTextNode | null = null;
+
+  function checkFormat(format: TextFormatType) {
+    const type = lexicalFormatToCrystallizeType[format];
+    if (n.hasFormat(format) && type) {
+      if (!textChild) {
+        currentChild = textChild = {
+          kind: 'inline',
+          type,
+        } as CrystallizeRichTextNode;
+      } else {
+        currentChild.children = [
+          {
+            kind: 'inline',
+            type,
+          },
+        ];
 
-  // Deal with code seperately, since it can be both "inline" and "block"
-  if (n.hasFormat('code')) {
-    return {
-      type: 'code',
+        currentChild = currentChild.children[0];
+      }
+    }
+  }
+
+  (Object.keys(lexicalFormatToCrystallizeType) as TextFormatType[]).forEach(checkFormat);
+
+  // Safe guard for unknown lexical types
+  if (!textChild) {
+    currentChild = textChild = {
       kind: 'inline',
-      textContent,
     };
   }
 
-  const textChild = {
-    kind: 'inline',
-    textContent,
-  } as CrystallizeRichTextNode;
-
-  if (n.hasFormat('bold')) {
-    textChild.type = 'strong';
-  } else if (n.hasFormat('italic')) {
-    textChild.type = 'emphasized';
-  } else if (n.hasFormat('underline')) {
-    textChild.type = 'underlined';
-  } else if (n.hasFormat('strikethrough')) {
-    textChild.type = 'deleted';
-  } else if (n.hasFormat('subscript')) {
-    textChild.type = 'subscripted';
-  } else if (n.hasFormat('superscript')) {
-    textChild.type = 'superscripted';
-  }
+  currentChild.textContent = n.getTextContent();
 
   return textChild;
 }

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>