feat(richtext-lexical): allow customizing maxActiveItems for toolbar …

…groups (#9417) Previously, they were hardcoded to 1. This is useful for lexical toolbar groups where multiple items can be active at the same time.
payloadcms · Nov 21, 2024 · 38de760 · 38de760
1 parent 18b139b
commit 38de760
Show file tree

Hide file tree

Showing 17 changed files with 115 additions and 6 deletions.
diff --git a/packages/richtext-lexical/src/features/align/server/i18n.ts b/packages/richtext-lexical/src/features/align/server/i18n.ts
@@ -25,6 +25,12 @@ export const i18n: Partial<GenericLanguages> = {
     alignLeftLabel: 'Zarovnat vlevo',
     alignRightLabel: 'Zarovnat vpravo',
   },
+  da: {
+    alignCenterLabel: 'Centrer teksten',
+    alignJustifyLabel: 'Justér til begge sider',
+    alignLeftLabel: 'Justér til venstre',
+    alignRightLabel: 'Juster til højre',
+  },
   de: {
     alignCenterLabel: 'Zentrieren',
     alignJustifyLabel: 'Blocksatz',

diff --git a/packages/richtext-lexical/src/features/blockquote/server/i18n.ts b/packages/richtext-lexical/src/features/blockquote/server/i18n.ts
@@ -13,6 +13,9 @@ export const i18n: Partial<GenericLanguages> = {
   cs: {
     label: 'Citace',
   },
+  da: {
+    label: 'Blokering',
+  },
   de: {
     label: 'Blockzitat',
   },

diff --git a/packages/richtext-lexical/src/features/blocks/server/i18n.ts b/packages/richtext-lexical/src/features/blocks/server/i18n.ts
@@ -37,6 +37,15 @@ export const i18n: Partial<GenericLanguages> = {
     },
     label: 'Bloky',
   },
+  da: {
+    inlineBlocks: {
+      create: 'Opret {{label}}',
+      edit: 'Rediger {{label}}',
+      label: 'Indlejrede blokke',
+      remove: 'Fjern {{label}}',
+    },
+    label: 'Blokke',
+  },
   de: {
     inlineBlocks: {
       create: 'Erstelle {{label}}',

diff --git a/packages/richtext-lexical/src/features/heading/server/i18n.ts b/packages/richtext-lexical/src/features/heading/server/i18n.ts
@@ -13,6 +13,9 @@ export const i18n: Partial<GenericLanguages> = {
   cs: {
     label: 'Nadpis {{headingLevel}}',
   },
+  da: {
+    label: 'Overskrift {{overskriftNiveau}}',
+  },
   de: {
     label: 'Überschrift {{headingLevel}}',
   },

diff --git a/packages/richtext-lexical/src/features/horizontalRule/server/i18n.ts b/packages/richtext-lexical/src/features/horizontalRule/server/i18n.ts
@@ -13,6 +13,9 @@ export const i18n: Partial<GenericLanguages> = {
   cs: {
     label: 'Vodorovný pravítko',
   },
+  da: {
+    label: 'Horisontal Regel',
+  },
   de: {
     label: 'Trennlinie',
   },

diff --git a/packages/richtext-lexical/src/features/indent/server/i18n.ts b/packages/richtext-lexical/src/features/indent/server/i18n.ts
@@ -17,6 +17,10 @@ export const i18n: Partial<GenericLanguages> = {
     decreaseLabel: 'Zmenšit odsazení',
     increaseLabel: 'Zvětšit odsazení',
   },
+  da: {
+    decreaseLabel: 'Reducer Indrykning',
+    increaseLabel: 'Forøg indrykning',
+  },
   de: {
     decreaseLabel: 'Einzug verkleinern',
     increaseLabel: 'Einzug erhöhen',

diff --git a/packages/richtext-lexical/src/features/link/server/i18n.ts b/packages/richtext-lexical/src/features/link/server/i18n.ts
@@ -17,6 +17,10 @@ export const i18n: Partial<GenericLanguages> = {
     label: 'Odkaz',
     loadingWithEllipsis: 'Načítání...',
   },
+  da: {
+    label: 'Link',
+    loadingWithEllipsis: 'Indlæser...',
+  },
   de: {
     label: 'Verknüpfung',
     loadingWithEllipsis: 'Laden...',

diff --git a/packages/richtext-lexical/src/features/lists/checklist/server/i18n.ts b/packages/richtext-lexical/src/features/lists/checklist/server/i18n.ts
@@ -13,6 +13,9 @@ export const i18n: Partial<GenericLanguages> = {
   cs: {
     label: 'Seznam kontrol',
   },
+  da: {
+    label: 'Tjekliste',
+  },
   de: {
     label: 'Checkliste',
   },

diff --git a/packages/richtext-lexical/src/features/lists/orderedList/server/i18n.ts b/packages/richtext-lexical/src/features/lists/orderedList/server/i18n.ts
@@ -13,6 +13,9 @@ export const i18n: Partial<GenericLanguages> = {
   cs: {
     label: 'Seřazený seznam',
   },
+  da: {
+    label: 'Ordnet Liste',
+  },
   de: {
     label: 'Geordnete Liste',
   },

diff --git a/packages/richtext-lexical/src/features/lists/unorderedList/server/i18n.ts b/packages/richtext-lexical/src/features/lists/unorderedList/server/i18n.ts
@@ -13,6 +13,9 @@ export const i18n: Partial<GenericLanguages> = {
   cs: {
     label: 'Neuspořádaný seznam',
   },
+  da: {
+    label: 'Usorteret Liste',
+  },
   de: {
     label: 'Ungeordnete Liste',
   },

diff --git a/packages/richtext-lexical/src/features/paragraph/server/i18n.ts b/packages/richtext-lexical/src/features/paragraph/server/i18n.ts
@@ -17,6 +17,10 @@ export const i18n: Partial<GenericLanguages> = {
     label: 'Odstavec',
     label2: 'Normální text',
   },
+  da: {
+    label: 'Afsnit',
+    label2: 'Normal tekst',
+  },
   de: {
     label: 'Paragraph',
     label2: 'Normaler Text',

diff --git a/packages/richtext-lexical/src/features/relationship/server/i18n.ts b/packages/richtext-lexical/src/features/relationship/server/i18n.ts
@@ -13,6 +13,9 @@ export const i18n: Partial<GenericLanguages> = {
   cs: {
     label: 'Vztah',
   },
+  da: {
+    label: 'Forhold',
+  },
   de: {
     label: 'Beziehung',
   },

diff --git a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.tsx b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.tsx
@@ -98,8 +98,19 @@ function ToolbarGroupComponent({
       if (label.length > 25) {
         label = label.substring(0, 25) + '...'
       }
-      setDropdownLabel(label)
-      setDropdownIcon(() => item.ChildComponent)
+      if (activeItems.length === 1) {
+        setDropdownLabel(label)
+        setDropdownIcon(() => item.ChildComponent)
+      } else {
+        setDropdownLabel(
+          i18n.t('lexical:general:toolbarItemsActive', { count: activeItems.length }),
+        )
+        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
+          setDropdownIcon(() => group.ChildComponent!)
+        } else {
+          setDropdownIcon(undefined)
+        }
+      }
     },
     [group, i18n, featureClientSchemaMap, schemaPath],
   )
@@ -115,7 +126,7 @@ function ToolbarGroupComponent({
             Icon={DropdownIcon}
             itemsContainerClassNames={['fixed-toolbar__dropdown-items']}
             label={dropdownLabel}
-            maxActiveItems={1}
+            maxActiveItems={group.maxActiveItems ?? 1}
             onActiveChange={onActiveChange}
           />
         ) : (
@@ -125,7 +136,7 @@ function ToolbarGroupComponent({
             group={group}
             itemsContainerClassNames={['fixed-toolbar__dropdown-items']}
             label={dropdownLabel}
-            maxActiveItems={1}
+            maxActiveItems={group.maxActiveItems ?? 1}
             onActiveChange={onActiveChange}
           />
         )

diff --git a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.tsx b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.tsx
@@ -102,15 +102,15 @@ function ToolbarGroupComponent({
             editor={editor}
             group={group}
             Icon={DropdownIcon}
-            maxActiveItems={1}
+            maxActiveItems={group.maxActiveItems ?? 1}
             onActiveChange={onActiveChange}
           />
         ) : (
           <ToolbarDropdown
             anchorElem={anchorElem}
             editor={editor}
             group={group}
-            maxActiveItems={1}
+            maxActiveItems={group.maxActiveItems ?? 1}
             onActiveChange={onActiveChange}
           />
         )

diff --git a/packages/richtext-lexical/src/features/toolbars/types.ts b/packages/richtext-lexical/src/features/toolbars/types.ts
@@ -32,6 +32,15 @@ export type ToolbarDropdownGroup = {
    * Each toolbar group needs to have a unique key. Groups with the same keys will have their items merged together.
    */
   key: string
+  /**
+   * The maximum number of active items that can be selected at once.
+   * Increasing this will hurt performance, as more nodes need to be checked for their active state.
+   *
+   * E.g. if this is 1, we can stop checking nodes once we find an active node.
+   *
+   * @default 1
+   */
+  maxActiveItems?: number
   /**
    * Determines where the toolbar group will be.
    */

diff --git a/packages/richtext-lexical/src/features/upload/server/i18n.ts b/packages/richtext-lexical/src/features/upload/server/i18n.ts
@@ -13,6 +13,9 @@ export const i18n: Partial<GenericLanguages> = {
   cs: {
     label: 'Nahrát',
   },
+  da: {
+    label: 'Upload',
+  },
   de: {
     label: 'Datei',
   },