@payloadcms/richtext-lexical 4.0.0-internal.c2b57ce → 4.0.0-internal.c6494b5

package/dist/features/{experimental_table → table}/server/index.js

@@ -2,7 +2,8 @@ import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
 import { sanitizeFields } from 'payload';
 import { createServerFeature } from '../../../utilities/createServerFeature.js';
 import { createNode } from '../../typeUtilities.js';
-import { TableMarkdownTransformer } from '../markdownTransformer.js';
+import { PAYLOAD_TABLE } from '../markdownTransformer.js';
+import { tableCellNodeJSONSchema, tableNodeJSONSchema, tableRowNodeJSONSchema } from './schema.js';
 const fields = [{
   name: 'rows',
   type: 'number',
@@ -14,14 +15,14 @@ const fields = [{
   defaultValue: 5,
   required: true
 }];
-export const EXPERIMENTAL_TableFeature = createServerFeature({
-  feature: async ({
+export const TableFeature = createServerFeature({
+  feature: ({
     config,
     isRoot,
     parentIsLocalized
   }) => {
     const validRelationships = config.collections.map(c => c.slug) || [];
-    const sanitizedFields = await sanitizeFields({
+    const sanitizedFields = sanitizeFields({
       config: config,
       fields,
       parentIsLocalized,
@@ -37,16 +38,19 @@ export const EXPERIMENTAL_TableFeature = createServerFeature({
         });
         return schemaMap;
       },
-      markdownTransformers: [TableMarkdownTransformer],
+      markdownTransformers: [PAYLOAD_TABLE],
       nodes: [createNode({
+        jsonSchema: tableNodeJSONSchema,
         node: TableNode
       }), createNode({
+        jsonSchema: tableCellNodeJSONSchema,
         node: TableCellNode
       }), createNode({
+        jsonSchema: tableRowNodeJSONSchema,
         node: TableRowNode
       })]
     };
   },
-  key: 'experimental_table'
+  key: 'table'
 });
 //# sourceMappingURL=index.js.map

package/dist/features/table/server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["TableCellNode","TableNode","TableRowNode","sanitizeFields","createServerFeature","createNode","PAYLOAD_TABLE","tableCellNodeJSONSchema","tableNodeJSONSchema","tableRowNodeJSONSchema","fields","name","type","defaultValue","required","TableFeature","feature","config","isRoot","parentIsLocalized","validRelationships","collections","map","c","slug","sanitizedFields","requireFieldLevelRichTextEditor","ClientFeature","generateSchemaMap","schemaMap","Map","set","markdownTransformers","nodes","jsonSchema","node","key"],"sources":["../../../../src/features/table/server/index.ts"],"sourcesContent":["import type { Config, Field, FieldSchemaMap } from 'payload'\n\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\nimport { sanitizeFields } from 'payload'\n\nimport { createServerFeature } from '../../../utilities/createServerFeature.js'\nimport { createNode } from '../../typeUtilities.js'\nimport { PAYLOAD_TABLE } from '../markdownTransformer.js'\nimport { tableCellNodeJSONSchema, tableNodeJSONSchema, tableRowNodeJSONSchema } from './schema.js'\n\nexport type {\n  SerializedTableCellNode,\n  SerializedTableNode,\n  SerializedTableRowNode,\n} from './schema.js'\n\nconst fields: Field[] = [\n  {\n    name: 'rows',\n    type: 'number',\n    defaultValue: 5,\n    required: true,\n  },\n  {\n    name: 'columns',\n    type: 'number',\n    defaultValue: 5,\n    required: true,\n  },\n]\n\nexport const TableFeature = createServerFeature({\n  feature: ({ config, isRoot, parentIsLocalized }) => {\n    const validRelationships = config.collections.map((c) => c.slug) || []\n\n    const sanitizedFields = sanitizeFields({\n      config: config as unknown as Config,\n      fields,\n      parentIsLocalized,\n      requireFieldLevelRichTextEditor: isRoot,\n      validRelationships,\n    })\n    return {\n      ClientFeature: '@payloadcms/richtext-lexical/client#TableFeatureClient',\n      generateSchemaMap: () => {\n        const schemaMap: FieldSchemaMap = new Map()\n\n        schemaMap.set('fields', {\n          fields: sanitizedFields,\n        })\n\n        return schemaMap\n      },\n      markdownTransformers: [PAYLOAD_TABLE],\n      nodes: [\n        createNode({\n          jsonSchema: tableNodeJSONSchema,\n          node: TableNode,\n        }),\n        createNode({\n          jsonSchema: tableCellNodeJSONSchema,\n          node: TableCellNode,\n        }),\n        createNode({\n          jsonSchema: tableRowNodeJSONSchema,\n          node: TableRowNode,\n        }),\n      ],\n    }\n  },\n  key: 'table',\n})\n"],"mappings":"AAEA,SAASA,aAAa,EAAEC,SAAS,EAAEC,YAAY,QAAQ;AACvD,SAASC,cAAc,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,UAAU,QAAQ;AAC3B,SAASC,aAAa,QAAQ;AAC9B,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,sBAAsB,QAAQ;AAQrF,MAAMC,MAAA,GAAkB,CACtB;EACEC,IAAA,EAAM;EACNC,IAAA,EAAM;EACNC,YAAA,EAAc;EACdC,QAAA,EAAU;AACZ,GACA;EACEH,IAAA,EAAM;EACNC,IAAA,EAAM;EACNC,YAAA,EAAc;EACdC,QAAA,EAAU;AACZ,EACD;AAED,OAAO,MAAMC,YAAA,GAAeX,mBAAA,CAAoB;EAC9CY,OAAA,EAASA,CAAC;IAAEC,MAAM;IAAEC,MAAM;IAAEC;EAAiB,CAAE;IAC7C,MAAMC,kBAAA,GAAqBH,MAAA,CAAOI,WAAW,CAACC,GAAG,CAAEC,CAAA,IAAMA,CAAA,CAAEC,IAAI,KAAK,EAAE;IAEtE,MAAMC,eAAA,GAAkBtB,cAAA,CAAe;MACrCc,MAAA,EAAQA,MAAA;MACRP,MAAA;MACAS,iBAAA;MACAO,+BAAA,EAAiCR,MAAA;MACjCE;IACF;IACA,OAAO;MACLO,aAAA,EAAe;MACfC,iBAAA,EAAmBA,CAAA;QACjB,MAAMC,SAAA,GAA4B,IAAIC,GAAA;QAEtCD,SAAA,CAAUE,GAAG,CAAC,UAAU;UACtBrB,MAAA,EAAQe;QACV;QAEA,OAAOI,SAAA;MACT;MACAG,oBAAA,EAAsB,CAAC1B,aAAA,CAAc;MACrC2B,KAAA,EAAO,CACL5B,UAAA,CAAW;QACT6B,UAAA,EAAY1B,mBAAA;QACZ2B,IAAA,EAAMlC;MACR,IACAI,UAAA,CAAW;QACT6B,UAAA,EAAY3B,uBAAA;QACZ4B,IAAA,EAAMnC;MACR,IACAK,UAAA,CAAW;QACT6B,UAAA,EAAYzB,sBAAA;QACZ0B,IAAA,EAAMjC;MACR;IAEJ;EACF;EACAkC,GAAA,EAAK;AACP","ignoreList":[]}

package/dist/features/table/server/schema.d.ts

@@ -0,0 +1,27 @@
+import type { SerializedLexicalNode } from 'lexical';
+import type { SerializedLexicalElementBase } from '../../../types/nodeTypes.js';
+import type { JSONSchemaFn } from '../../typesServer.js';
+export interface SerializedTableCellNode<TChildren extends SerializedLexicalNode = SerializedLexicalNode> extends SerializedLexicalElementBase<TChildren> {
+    backgroundColor?: null | string;
+    colSpan?: number;
+    headerState: number;
+    rowSpan?: number;
+    type: 'tablecell';
+    verticalAlign?: string;
+    width?: number;
+}
+export interface SerializedTableNode<TChildren extends SerializedLexicalNode = SerializedLexicalNode> extends SerializedLexicalElementBase<TChildren> {
+    colWidths?: number[];
+    frozenColumnCount?: number;
+    frozenRowCount?: number;
+    rowStriping?: boolean;
+    type: 'table';
+}
+export interface SerializedTableRowNode<TChildren extends SerializedLexicalNode = SerializedLexicalNode> extends SerializedLexicalElementBase<TChildren> {
+    height?: number;
+    type: 'tablerow';
+}
+export declare const tableNodeJSONSchema: JSONSchemaFn;
+export declare const tableCellNodeJSONSchema: JSONSchemaFn;
+export declare const tableRowNodeJSONSchema: JSONSchemaFn;
+//# sourceMappingURL=schema.d.ts.map

package/dist/features/table/server/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/features/table/server/schema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEpD,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,6BAA6B,CAAA;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAExD,MAAM,WAAW,uBAAuB,CACtC,SAAS,SAAS,qBAAqB,GAAG,qBAAqB,CAC/D,SAAQ,4BAA4B,CAAC,SAAS,CAAC;IAC/C,eAAe,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,WAAW,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,mBAAmB,CAClC,SAAS,SAAS,qBAAqB,GAAG,qBAAqB,CAC/D,SAAQ,4BAA4B,CAAC,SAAS,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;CACd;AAED,MAAM,WAAW,sBAAsB,CACrC,SAAS,SAAS,qBAAqB,GAAG,qBAAqB,CAC/D,SAAQ,4BAA4B,CAAC,SAAS,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,UAAU,CAAA;CACjB;AA2BD,eAAO,MAAM,mBAAmB,EAAE,YAgBjC,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,YAuBrC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,YAWpC,CAAA"}

package/dist/features/table/server/schema.js

@@ -0,0 +1,107 @@
+/**
+ * MUST stay byte-for-byte in sync with the runtime `SerializedTableNode`,
+ * `SerializedTableRowNode`, and `SerializedTableCellNode` declared above.
+ */const TABLE_NODES_TS = `export interface SerializedTableNode<TChildren> extends SerializedLexicalElementBase<TChildren> {
+  type: 'table';
+  colWidths?: number[];
+  frozenColumnCount?: number;
+  frozenRowCount?: number;
+  rowStriping?: boolean;
+}
+export interface SerializedTableRowNode<TChildren> extends SerializedLexicalElementBase<TChildren> {
+  type: 'tablerow';
+  height?: number;
+}
+export interface SerializedTableCellNode<TChildren> extends SerializedLexicalElementBase<TChildren> {
+  type: 'tablecell';
+  backgroundColor?: string | null;
+  colSpan?: number;
+  headerState: number;
+  rowSpan?: number;
+  verticalAlign?: string;
+  width?: number;
+}`;
+export const tableNodeJSONSchema = ({
+  elementNodeSchema,
+  nodeUnionName,
+  typeStringDefinitions
+}) => {
+  typeStringDefinitions.add(TABLE_NODES_TS);
+  return elementNodeSchema({
+    nodeType: 'table',
+    properties: {
+      colWidths: {
+        type: 'array',
+        items: {
+          type: 'number'
+        }
+      },
+      frozenColumnCount: {
+        type: 'integer'
+      },
+      frozenRowCount: {
+        type: 'integer'
+      },
+      rowStriping: {
+        type: 'boolean'
+      }
+    },
+    tsType: `SerializedTableNode<${nodeUnionName}>`
+  });
+};
+export const tableCellNodeJSONSchema = ({
+  elementNodeSchema,
+  nodeUnionName,
+  typeStringDefinitions
+}) => {
+  typeStringDefinitions.add(TABLE_NODES_TS);
+  return elementNodeSchema({
+    nodeType: 'tablecell',
+    properties: {
+      backgroundColor: {
+        oneOf: [{
+          type: 'string'
+        }, {
+          type: 'null'
+        }]
+      },
+      colSpan: {
+        type: 'integer',
+        description: 'How many columns this cell spans (default 1).'
+      },
+      headerState: {
+        type: 'integer',
+        description: 'Header bitmask: 0 = normal cell, 1 = row header, 2 = column header, 3 = both.'
+      },
+      rowSpan: {
+        type: 'integer',
+        description: 'How many rows this cell spans (default 1).'
+      },
+      verticalAlign: {
+        type: 'string'
+      },
+      width: {
+        type: 'integer'
+      }
+    },
+    required: ['headerState'],
+    tsType: `SerializedTableCellNode<${nodeUnionName}>`
+  });
+};
+export const tableRowNodeJSONSchema = ({
+  elementNodeSchema,
+  nodeUnionName,
+  typeStringDefinitions
+}) => {
+  typeStringDefinitions.add(TABLE_NODES_TS);
+  return elementNodeSchema({
+    nodeType: 'tablerow',
+    properties: {
+      height: {
+        type: 'integer'
+      }
+    },
+    tsType: `SerializedTableRowNode<${nodeUnionName}>`
+  });
+};
+//# sourceMappingURL=schema.js.map

package/dist/features/table/server/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","names":["TABLE_NODES_TS","tableNodeJSONSchema","elementNodeSchema","nodeUnionName","typeStringDefinitions","add","nodeType","properties","colWidths","type","items","frozenColumnCount","frozenRowCount","rowStriping","tsType","tableCellNodeJSONSchema","backgroundColor","oneOf","colSpan","description","headerState","rowSpan","verticalAlign","width","required","tableRowNodeJSONSchema","height"],"sources":["../../../../src/features/table/server/schema.ts"],"sourcesContent":["import type { SerializedLexicalNode } from 'lexical'\n\nimport type { SerializedLexicalElementBase } from '../../../types/nodeTypes.js'\nimport type { JSONSchemaFn } from '../../typesServer.js'\n\nexport interface SerializedTableCellNode<\n  TChildren extends SerializedLexicalNode = SerializedLexicalNode,\n> extends SerializedLexicalElementBase<TChildren> {\n  backgroundColor?: null | string\n  colSpan?: number\n  headerState: number\n  rowSpan?: number\n  type: 'tablecell'\n  verticalAlign?: string\n  width?: number\n}\n\nexport interface SerializedTableNode<\n  TChildren extends SerializedLexicalNode = SerializedLexicalNode,\n> extends SerializedLexicalElementBase<TChildren> {\n  colWidths?: number[]\n  frozenColumnCount?: number\n  frozenRowCount?: number\n  rowStriping?: boolean\n  type: 'table'\n}\n\nexport interface SerializedTableRowNode<\n  TChildren extends SerializedLexicalNode = SerializedLexicalNode,\n> extends SerializedLexicalElementBase<TChildren> {\n  height?: number\n  type: 'tablerow'\n}\n\n/**\n * MUST stay byte-for-byte in sync with the runtime `SerializedTableNode`,\n * `SerializedTableRowNode`, and `SerializedTableCellNode` declared above.\n */\nconst TABLE_NODES_TS = `export interface SerializedTableNode<TChildren> extends SerializedLexicalElementBase<TChildren> {\n  type: 'table';\n  colWidths?: number[];\n  frozenColumnCount?: number;\n  frozenRowCount?: number;\n  rowStriping?: boolean;\n}\nexport interface SerializedTableRowNode<TChildren> extends SerializedLexicalElementBase<TChildren> {\n  type: 'tablerow';\n  height?: number;\n}\nexport interface SerializedTableCellNode<TChildren> extends SerializedLexicalElementBase<TChildren> {\n  type: 'tablecell';\n  backgroundColor?: string | null;\n  colSpan?: number;\n  headerState: number;\n  rowSpan?: number;\n  verticalAlign?: string;\n  width?: number;\n}`\n\nexport const tableNodeJSONSchema: JSONSchemaFn = ({\n  elementNodeSchema,\n  nodeUnionName,\n  typeStringDefinitions,\n}) => {\n  typeStringDefinitions.add(TABLE_NODES_TS)\n  return elementNodeSchema({\n    nodeType: 'table',\n    properties: {\n      colWidths: { type: 'array', items: { type: 'number' } },\n      frozenColumnCount: { type: 'integer' },\n      frozenRowCount: { type: 'integer' },\n      rowStriping: { type: 'boolean' },\n    },\n    tsType: `SerializedTableNode<${nodeUnionName}>`,\n  })\n}\n\nexport const tableCellNodeJSONSchema: JSONSchemaFn = ({\n  elementNodeSchema,\n  nodeUnionName,\n  typeStringDefinitions,\n}) => {\n  typeStringDefinitions.add(TABLE_NODES_TS)\n  return elementNodeSchema({\n    nodeType: 'tablecell',\n    properties: {\n      backgroundColor: { oneOf: [{ type: 'string' }, { type: 'null' }] },\n      colSpan: { type: 'integer', description: 'How many columns this cell spans (default 1).' },\n      headerState: {\n        type: 'integer',\n        description:\n          'Header bitmask: 0 = normal cell, 1 = row header, 2 = column header, 3 = both.',\n      },\n      rowSpan: { type: 'integer', description: 'How many rows this cell spans (default 1).' },\n      verticalAlign: { type: 'string' },\n      width: { type: 'integer' },\n    },\n    required: ['headerState'],\n    tsType: `SerializedTableCellNode<${nodeUnionName}>`,\n  })\n}\n\nexport const tableRowNodeJSONSchema: JSONSchemaFn = ({\n  elementNodeSchema,\n  nodeUnionName,\n  typeStringDefinitions,\n}) => {\n  typeStringDefinitions.add(TABLE_NODES_TS)\n  return elementNodeSchema({\n    nodeType: 'tablerow',\n    properties: { height: { type: 'integer' } },\n    tsType: `SerializedTableRowNode<${nodeUnionName}>`,\n  })\n}\n"],"mappings":"AAkCA;;;GAIA,MAAMA,cAAA,GAAiB;;;;;;;;;;;;;;;;;;;EAmBrB;AAEF,OAAO,MAAMC,mBAAA,GAAoCA,CAAC;EAChDC,iBAAiB;EACjBC,aAAa;EACbC;AAAqB,CACtB;EACCA,qBAAA,CAAsBC,GAAG,CAACL,cAAA;EAC1B,OAAOE,iBAAA,CAAkB;IACvBI,QAAA,EAAU;IACVC,UAAA,EAAY;MACVC,SAAA,EAAW;QAAEC,IAAA,EAAM;QAASC,KAAA,EAAO;UAAED,IAAA,EAAM;QAAS;MAAE;MACtDE,iBAAA,EAAmB;QAAEF,IAAA,EAAM;MAAU;MACrCG,cAAA,EAAgB;QAAEH,IAAA,EAAM;MAAU;MAClCI,WAAA,EAAa;QAAEJ,IAAA,EAAM;MAAU;IACjC;IACAK,MAAA,EAAQ,uBAAuBX,aAAA;EACjC;AACF;AAEA,OAAO,MAAMY,uBAAA,GAAwCA,CAAC;EACpDb,iBAAiB;EACjBC,aAAa;EACbC;AAAqB,CACtB;EACCA,qBAAA,CAAsBC,GAAG,CAACL,cAAA;EAC1B,OAAOE,iBAAA,CAAkB;IACvBI,QAAA,EAAU;IACVC,UAAA,EAAY;MACVS,eAAA,EAAiB;QAAEC,KAAA,EAAO,CAAC;UAAER,IAAA,EAAM;QAAS,GAAG;UAAEA,IAAA,EAAM;QAAO;MAAG;MACjES,OAAA,EAAS;QAAET,IAAA,EAAM;QAAWU,WAAA,EAAa;MAAgD;MACzFC,WAAA,EAAa;QACXX,IAAA,EAAM;QACNU,WAAA,EACE;MACJ;MACAE,OAAA,EAAS;QAAEZ,IAAA,EAAM;QAAWU,WAAA,EAAa;MAA6C;MACtFG,aAAA,EAAe;QAAEb,IAAA,EAAM;MAAS;MAChCc,KAAA,EAAO;QAAEd,IAAA,EAAM;MAAU;IAC3B;IACAe,QAAA,EAAU,CAAC,cAAc;IACzBV,MAAA,EAAQ,2BAA2BX,aAAA;EACrC;AACF;AAEA,OAAO,MAAMsB,sBAAA,GAAuCA,CAAC;EACnDvB,iBAAiB;EACjBC,aAAa;EACbC;AAAqB,CACtB;EACCA,qBAAA,CAAsBC,GAAG,CAACL,cAAA;EAC1B,OAAOE,iBAAA,CAAkB;IACvBI,QAAA,EAAU;IACVC,UAAA,EAAY;MAAEmB,MAAA,EAAQ;QAAEjB,IAAA,EAAM;MAAU;IAAE;IAC1CK,MAAA,EAAQ,0BAA0BX,aAAA;EACpC;AACF","ignoreList":[]}

package/dist/features/textState/feature.client.js

@@ -43,7 +43,7 @@ const toolbarGroups = (props, stateMap) => {
     type: 'dropdown',
     ChildComponent: () => /*#__PURE__*/_jsx(TextStateIcon, {
       css: {
-        color: 'var(--theme-elevation-600)'
+        color: 'var(--color-icon-secondary)'
       }
     }),
     items: [...clearStyle, ...items],

package/dist/features/textState/feature.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature.client.js","names":["TextStateIcon","createClientFeature","registerTextStates","setTextState","StatePlugin","toolbarGroups","props","stateMap","items","stateKey","state","key","stateValue","meta","push","ChildComponent","_jsx","css","label","onSelect","editor","clearStyle","i18n","t","undefined","order","type","color","TextStateFeatureClient","plugins","Component","position","toolbarFixed","groups","toolbarInline"],"sources":["../../../src/features/textState/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport type { ToolbarDropdownGroup, ToolbarGroup } from '../toolbars/types.js'\nimport type { TextStateFeatureProps } from './feature.server.js'\n\nimport { TextStateIcon } from '../../lexical/ui/icons/TextState/index.js'\nimport { createClientFeature } from '../../utilities/createClientFeature.js'\nimport { registerTextStates, setTextState, type StateMap, StatePlugin } from './textState.js'\n\nconst toolbarGroups = (props: TextStateFeatureProps, stateMap: StateMap): ToolbarGroup[] => {\n  const items: ToolbarDropdownGroup['items'] = []\n\n  for (const stateKey in props.state) {\n    const key = props.state[stateKey]!\n    for (const stateValue in key) {\n      const meta = key[stateValue]!\n      items.push({\n        ChildComponent: () => <TextStateIcon css={meta.css} />,\n        key: stateValue,\n        label: meta.label,\n        onSelect: ({ editor }) => {\n          setTextState(editor, stateMap, stateKey, stateValue)\n        },\n      })\n    }\n  }\n\n  const clearStyle: ToolbarDropdownGroup['items'] = [\n    {\n      ChildComponent: () => <TextStateIcon />,\n      key: `clear-style`,\n      label: ({ i18n }) => i18n.t('lexical:textState:defaultStyle'),\n      onSelect: ({ editor }) => {\n        for (const stateKey in props.state) {\n          setTextState(editor, stateMap, stateKey, undefined)\n        }\n      },\n      order: 1,\n    },\n  ]\n\n  return [\n    {\n      type: 'dropdown',\n      ChildComponent: () => <TextStateIcon css={{ color: 'var(--theme-elevation-600)' }} />,\n      items: [...clearStyle, ...items],\n      key: 'textState',\n      order: 30,\n    },\n  ]\n}\n\nexport const TextStateFeatureClient = createClientFeature<TextStateFeatureProps>(({ props }) => {\n  const stateMap = registerTextStates(props.state)\n  return {\n    plugins: [\n      {\n        Component: () => StatePlugin({ stateMap }),\n        position: 'normal',\n      },\n    ],\n    toolbarFixed: {\n      groups: toolbarGroups(props, stateMap),\n    },\n    toolbarInline: {\n      groups: toolbarGroups(props, stateMap),\n    },\n  }\n})\n"],"mappings":"AAAA;;;AAKA,SAASA,aAAa,QAAQ;AAC9B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,kBAAkB,EAAEC,YAAY,EAAiBC,WAAW,QAAQ;AAE7E,MAAMC,aAAA,GAAgBA,CAACC,KAAA,EAA8BC,QAAA;EACnD,MAAMC,KAAA,GAAuC,EAAE;EAE/C,KAAK,MAAMC,QAAA,IAAYH,KAAA,CAAMI,KAAK,EAAE;IAClC,MAAMC,GAAA,GAAML,KAAA,CAAMI,KAAK,CAACD,QAAA,CAAS;IACjC,KAAK,MAAMG,UAAA,IAAcD,GAAA,EAAK;MAC5B,MAAME,IAAA,GAAOF,GAAG,CAACC,UAAA,CAAW;MAC5BJ,KAAA,CAAMM,IAAI,CAAC;QACTC,cAAA,EAAgBA,CAAA,kBAAMC,IAAA,CAAChB,aAAA;UAAciB,GAAA,EAAKJ,IAAA,CAAKI;;QAC/CN,GAAA,EAAKC,UAAA;QACLM,KAAA,EAAOL,IAAA,CAAKK,KAAK;QACjBC,QAAA,EAAUA,CAAC;UAAEC;QAAM,CAAE;UACnBjB,YAAA,CAAaiB,MAAA,EAAQb,QAAA,EAAUE,QAAA,EAAUG,UAAA;QAC3C;MACF;IACF;EACF;EAEA,MAAMS,UAAA,GAA4C,CAChD;IACEN,cAAA,EAAgBA,CAAA,kBAAMC,IAAA,CAAChB,aAAA;IACvBW,GAAA,EAAK,aAAa;IAClBO,KAAA,EAAOA,CAAC;MAAEI;IAAI,CAAE,KAAKA,IAAA,CAAKC,CAAC,CAAC;IAC5BJ,QAAA,EAAUA,CAAC;MAAEC;IAAM,CAAE;MACnB,KAAK,MAAMX,QAAA,IAAYH,KAAA,CAAMI,KAAK,EAAE;QAClCP,YAAA,CAAaiB,MAAA,EAAQb,QAAA,EAAUE,QAAA,EAAUe,SAAA;MAC3C;IACF;IACAC,KAAA,EAAO;EACT,EACD;EAED,OAAO,CACL;IACEC,IAAA,EAAM;IACNX,cAAA,EAAgBA,CAAA,kBAAMC,IAAA,CAAChB,aAAA;MAAciB,GAAA,EAAK;QAAEU,KAAA,EAAO;MAA6B;;IAChFnB,KAAA,EAAO,C,GAAIa,UAAA,E,GAAeb,KAAA,CAAM;IAChCG,GAAA,EAAK;IACLc,KAAA,EAAO;EACT,EACD;AACH;AAEA,OAAO,MAAMG,sBAAA,GAAyB3B,mBAAA,CAA2C,CAAC;EAAEK;AAAK,CAAE;EACzF,MAAMC,QAAA,GAAWL,kBAAA,CAAmBI,KAAA,CAAMI,KAAK;EAC/C,OAAO;IACLmB,OAAA,EAAS,CACP;MACEC,SAAA,EAAWA,CAAA,KAAM1B,WAAA,CAAY;QAAEG;MAAS;MACxCwB,QAAA,EAAU;IACZ,EACD;IACDC,YAAA,EAAc;MACZC,MAAA,EAAQ5B,aAAA,CAAcC,KAAA,EAAOC,QAAA;IAC/B;IACA2B,aAAA,EAAe;MACbD,MAAA,EAAQ5B,aAAA,CAAcC,KAAA,EAAOC,QAAA;IAC/B;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"feature.client.js","names":["TextStateIcon","createClientFeature","registerTextStates","setTextState","StatePlugin","toolbarGroups","props","stateMap","items","stateKey","state","key","stateValue","meta","push","ChildComponent","_jsx","css","label","onSelect","editor","clearStyle","i18n","t","undefined","order","type","color","TextStateFeatureClient","plugins","Component","position","toolbarFixed","groups","toolbarInline"],"sources":["../../../src/features/textState/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport type { ToolbarDropdownGroup, ToolbarGroup } from '../toolbars/types.js'\nimport type { TextStateFeatureProps } from './feature.server.js'\n\nimport { TextStateIcon } from '../../lexical/ui/icons/TextState/index.js'\nimport { createClientFeature } from '../../utilities/createClientFeature.js'\nimport { registerTextStates, setTextState, type StateMap, StatePlugin } from './textState.js'\n\nconst toolbarGroups = (props: TextStateFeatureProps, stateMap: StateMap): ToolbarGroup[] => {\n  const items: ToolbarDropdownGroup['items'] = []\n\n  for (const stateKey in props.state) {\n    const key = props.state[stateKey]!\n    for (const stateValue in key) {\n      const meta = key[stateValue]!\n      items.push({\n        ChildComponent: () => <TextStateIcon css={meta.css} />,\n        key: stateValue,\n        label: meta.label,\n        onSelect: ({ editor }) => {\n          setTextState(editor, stateMap, stateKey, stateValue)\n        },\n      })\n    }\n  }\n\n  const clearStyle: ToolbarDropdownGroup['items'] = [\n    {\n      ChildComponent: () => <TextStateIcon />,\n      key: `clear-style`,\n      label: ({ i18n }) => i18n.t('lexical:textState:defaultStyle'),\n      onSelect: ({ editor }) => {\n        for (const stateKey in props.state) {\n          setTextState(editor, stateMap, stateKey, undefined)\n        }\n      },\n      order: 1,\n    },\n  ]\n\n  return [\n    {\n      type: 'dropdown',\n      ChildComponent: () => <TextStateIcon css={{ color: 'var(--color-icon-secondary)' }} />,\n      items: [...clearStyle, ...items],\n      key: 'textState',\n      order: 30,\n    },\n  ]\n}\n\nexport const TextStateFeatureClient = createClientFeature<TextStateFeatureProps>(({ props }) => {\n  const stateMap = registerTextStates(props.state)\n  return {\n    plugins: [\n      {\n        Component: () => StatePlugin({ stateMap }),\n        position: 'normal',\n      },\n    ],\n    toolbarFixed: {\n      groups: toolbarGroups(props, stateMap),\n    },\n    toolbarInline: {\n      groups: toolbarGroups(props, stateMap),\n    },\n  }\n})\n"],"mappings":"AAAA;;;AAKA,SAASA,aAAa,QAAQ;AAC9B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,kBAAkB,EAAEC,YAAY,EAAiBC,WAAW,QAAQ;AAE7E,MAAMC,aAAA,GAAgBA,CAACC,KAAA,EAA8BC,QAAA;EACnD,MAAMC,KAAA,GAAuC,EAAE;EAE/C,KAAK,MAAMC,QAAA,IAAYH,KAAA,CAAMI,KAAK,EAAE;IAClC,MAAMC,GAAA,GAAML,KAAA,CAAMI,KAAK,CAACD,QAAA,CAAS;IACjC,KAAK,MAAMG,UAAA,IAAcD,GAAA,EAAK;MAC5B,MAAME,IAAA,GAAOF,GAAG,CAACC,UAAA,CAAW;MAC5BJ,KAAA,CAAMM,IAAI,CAAC;QACTC,cAAA,EAAgBA,CAAA,kBAAMC,IAAA,CAAChB,aAAA;UAAciB,GAAA,EAAKJ,IAAA,CAAKI;;QAC/CN,GAAA,EAAKC,UAAA;QACLM,KAAA,EAAOL,IAAA,CAAKK,KAAK;QACjBC,QAAA,EAAUA,CAAC;UAAEC;QAAM,CAAE;UACnBjB,YAAA,CAAaiB,MAAA,EAAQb,QAAA,EAAUE,QAAA,EAAUG,UAAA;QAC3C;MACF;IACF;EACF;EAEA,MAAMS,UAAA,GAA4C,CAChD;IACEN,cAAA,EAAgBA,CAAA,kBAAMC,IAAA,CAAChB,aAAA;IACvBW,GAAA,EAAK,aAAa;IAClBO,KAAA,EAAOA,CAAC;MAAEI;IAAI,CAAE,KAAKA,IAAA,CAAKC,CAAC,CAAC;IAC5BJ,QAAA,EAAUA,CAAC;MAAEC;IAAM,CAAE;MACnB,KAAK,MAAMX,QAAA,IAAYH,KAAA,CAAMI,KAAK,EAAE;QAClCP,YAAA,CAAaiB,MAAA,EAAQb,QAAA,EAAUE,QAAA,EAAUe,SAAA;MAC3C;IACF;IACAC,KAAA,EAAO;EACT,EACD;EAED,OAAO,CACL;IACEC,IAAA,EAAM;IACNX,cAAA,EAAgBA,CAAA,kBAAMC,IAAA,CAAChB,aAAA;MAAciB,GAAA,EAAK;QAAEU,KAAA,EAAO;MAA8B;;IACjFnB,KAAA,EAAO,C,GAAIa,UAAA,E,GAAeb,KAAA,CAAM;IAChCG,GAAA,EAAK;IACLc,KAAA,EAAO;EACT,EACD;AACH;AAEA,OAAO,MAAMG,sBAAA,GAAyB3B,mBAAA,CAA2C,CAAC;EAAEK;AAAK,CAAE;EACzF,MAAMC,QAAA,GAAWL,kBAAA,CAAmBI,KAAA,CAAMI,KAAK;EAC/C,OAAO;IACLmB,OAAA,EAAS,CACP;MACEC,SAAA,EAAWA,CAAA,KAAM1B,WAAA,CAAY;QAAEG;MAAS;MACxCwB,QAAA,EAAU;IACZ,EACD;IACDC,YAAA,EAAc;MACZC,MAAA,EAAQ5B,aAAA,CAAcC,KAAA,EAAOC,QAAA;IAC/B;IACA2B,aAAA,EAAe;MACbD,MAAA,EAAQ5B,aAAA,CAAcC,KAAA,EAAOC,QAAA;IAC/B;EACF;AACF","ignoreList":[]}

package/dist/features/toolbars/fixed/client/Toolbar/horizontalWheelScroll.d.ts

@@ -0,0 +1,8 @@
+export declare function getHorizontalScrollDelta({ clientWidth, deltaMode, deltaY, isRightToLeft, }: {
+    clientWidth: number;
+    deltaMode: number;
+    deltaY: number;
+    isRightToLeft: boolean;
+}): number;
+export declare function useRedirectVerticalWheelToHorizontalScroll(): void;
+//# sourceMappingURL=horizontalWheelScroll.d.ts.map

package/dist/features/toolbars/fixed/client/Toolbar/horizontalWheelScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontalWheelScroll.d.ts","sourceRoot":"","sources":["../../../../../../src/features/toolbars/fixed/client/Toolbar/horizontalWheelScroll.ts"],"names":[],"mappings":"AASA,wBAAgB,wBAAwB,CAAC,EACvC,WAAW,EACX,SAAS,EACT,MAAM,EACN,aAAa,GACd,EAAE;IACD,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,OAAO,CAAA;CACvB,GAAG,MAAM,CAOT;AA0CD,wBAAgB,0CAA0C,IAAI,IAAI,CAgBjE"}

package/dist/features/toolbars/fixed/client/Toolbar/horizontalWheelScroll.js

@@ -0,0 +1,80 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { useEffect } from 'react';
+const scrollContainerSelector = '.fixed-toolbar__scroll';
+// A single notch on a classic (non-trackpad) wheel mouse reports deltaMode 1 with a
+// deltaY of only 1-3, so it must be scaled up to a pixel value that actually moves the scroll.
+const PIXELS_PER_LINE = 40;
+export function getHorizontalScrollDelta({
+  clientWidth,
+  deltaMode,
+  deltaY,
+  isRightToLeft
+}) {
+  const deltaInPixels = deltaMode === 1 ? deltaY * PIXELS_PER_LINE : deltaMode === 2 ? deltaY * clientWidth : deltaY;
+  // scrollLeft moves toward the inline-start edge for a given positive delta in RTL,
+  // the opposite of LTR, so the delta must be negated to keep the scroll direction consistent.
+  return isRightToLeft ? -deltaInPixels : deltaInPixels;
+}
+function redirectVerticalWheelToHorizontalScroll(event) {
+  const isPrimarilyVerticalWheelInput = Math.abs(event.deltaY) > Math.abs(event.deltaX);
+  if (!isPrimarilyVerticalWheelInput) {
+    return;
+  }
+  const target = event.target;
+  if (!(target instanceof Element)) {
+    return;
+  }
+  const scrollContainer = target.closest(scrollContainerSelector);
+  if (!scrollContainer) {
+    return;
+  }
+  const canScrollHorizontally = scrollContainer.scrollWidth > scrollContainer.clientWidth;
+  if (!canScrollHorizontally) {
+    return;
+  }
+  event.preventDefault();
+  scrollContainer.scrollLeft += getHorizontalScrollDelta({
+    clientWidth: scrollContainer.clientWidth,
+    deltaMode: event.deltaMode,
+    deltaY: event.deltaY,
+    isRightToLeft: getComputedStyle(scrollContainer).direction === 'rtl'
+  });
+}
+// A single page can render many fixed toolbars at once (e.g. rich text nested several
+// layers deep inside blocks), so this listener is delegated to `document` and shared
+// across every toolbar instance instead of being attached per instance. A wheel listener
+// that can call preventDefault() must be non-passive, and non-passive listeners make the
+// browser treat their element as a "non-fast-scrollable region" that every scroll gesture
+// on the page has to be checked against, even ones nowhere near it. Attaching one instance
+// per toolbar would multiply that bookkeeping by however many toolbars happen to be on the
+// page; a single delegated listener keeps that cost constant no matter how many there are.
+let toolbarsListeningForWheelEvents = 0;
+export function useRedirectVerticalWheelToHorizontalScroll() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(_temp2, t0);
+}
+function _temp2() {
+  if (toolbarsListeningForWheelEvents === 0) {
+    document.addEventListener("wheel", redirectVerticalWheelToHorizontalScroll, {
+      passive: false
+    });
+  }
+  toolbarsListeningForWheelEvents = toolbarsListeningForWheelEvents + 1;
+  return _temp;
+}
+function _temp() {
+  toolbarsListeningForWheelEvents = toolbarsListeningForWheelEvents - 1;
+  if (toolbarsListeningForWheelEvents === 0) {
+    document.removeEventListener("wheel", redirectVerticalWheelToHorizontalScroll);
+  }
+}
+//# sourceMappingURL=horizontalWheelScroll.js.map

package/dist/features/toolbars/fixed/client/Toolbar/horizontalWheelScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontalWheelScroll.js","names":["c","_c","useEffect","scrollContainerSelector","PIXELS_PER_LINE","getHorizontalScrollDelta","clientWidth","deltaMode","deltaY","isRightToLeft","deltaInPixels","redirectVerticalWheelToHorizontalScroll","event","isPrimarilyVerticalWheelInput","Math","abs","deltaX","target","Element","scrollContainer","closest","canScrollHorizontally","scrollWidth","preventDefault","scrollLeft","getComputedStyle","direction","toolbarsListeningForWheelEvents","useRedirectVerticalWheelToHorizontalScroll","$","t0","Symbol","for","_temp2","document","addEventListener","passive","_temp","removeEventListener"],"sources":["../../../../../../src/features/toolbars/fixed/client/Toolbar/horizontalWheelScroll.ts"],"sourcesContent":["'use client'\nimport { useEffect } from 'react'\n\nconst scrollContainerSelector = '.fixed-toolbar__scroll'\n\n// A single notch on a classic (non-trackpad) wheel mouse reports deltaMode 1 with a\n// deltaY of only 1-3, so it must be scaled up to a pixel value that actually moves the scroll.\nconst PIXELS_PER_LINE = 40\n\nexport function getHorizontalScrollDelta({\n  clientWidth,\n  deltaMode,\n  deltaY,\n  isRightToLeft,\n}: {\n  clientWidth: number\n  deltaMode: number\n  deltaY: number\n  isRightToLeft: boolean\n}): number {\n  const deltaInPixels =\n    deltaMode === 1 ? deltaY * PIXELS_PER_LINE : deltaMode === 2 ? deltaY * clientWidth : deltaY\n\n  // scrollLeft moves toward the inline-start edge for a given positive delta in RTL,\n  // the opposite of LTR, so the delta must be negated to keep the scroll direction consistent.\n  return isRightToLeft ? -deltaInPixels : deltaInPixels\n}\n\nfunction redirectVerticalWheelToHorizontalScroll(event: WheelEvent): void {\n  const isPrimarilyVerticalWheelInput = Math.abs(event.deltaY) > Math.abs(event.deltaX)\n  if (!isPrimarilyVerticalWheelInput) {\n    return\n  }\n\n  const target = event.target\n  if (!(target instanceof Element)) {\n    return\n  }\n\n  const scrollContainer = target.closest<HTMLElement>(scrollContainerSelector)\n  if (!scrollContainer) {\n    return\n  }\n\n  const canScrollHorizontally = scrollContainer.scrollWidth > scrollContainer.clientWidth\n  if (!canScrollHorizontally) {\n    return\n  }\n\n  event.preventDefault()\n  scrollContainer.scrollLeft += getHorizontalScrollDelta({\n    clientWidth: scrollContainer.clientWidth,\n    deltaMode: event.deltaMode,\n    deltaY: event.deltaY,\n    isRightToLeft: getComputedStyle(scrollContainer).direction === 'rtl',\n  })\n}\n\n// A single page can render many fixed toolbars at once (e.g. rich text nested several\n// layers deep inside blocks), so this listener is delegated to `document` and shared\n// across every toolbar instance instead of being attached per instance. A wheel listener\n// that can call preventDefault() must be non-passive, and non-passive listeners make the\n// browser treat their element as a \"non-fast-scrollable region\" that every scroll gesture\n// on the page has to be checked against, even ones nowhere near it. Attaching one instance\n// per toolbar would multiply that bookkeeping by however many toolbars happen to be on the\n// page; a single delegated listener keeps that cost constant no matter how many there are.\nlet toolbarsListeningForWheelEvents = 0\n\nexport function useRedirectVerticalWheelToHorizontalScroll(): void {\n  useEffect(() => {\n    if (toolbarsListeningForWheelEvents === 0) {\n      document.addEventListener('wheel', redirectVerticalWheelToHorizontalScroll, {\n        passive: false,\n      })\n    }\n    toolbarsListeningForWheelEvents += 1\n\n    return () => {\n      toolbarsListeningForWheelEvents -= 1\n      if (toolbarsListeningForWheelEvents === 0) {\n        document.removeEventListener('wheel', redirectVerticalWheelToHorizontalScroll)\n      }\n    }\n  }, [])\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AACA,SAASC,SAAS,QAAQ;AAE1B,MAAMC,uBAAA,GAA0B;AAEhC;AACA;AACA,MAAMC,eAAA,GAAkB;AAExB,OAAO,SAASC,yBAAyB;EACvCC,WAAW;EACXC,SAAS;EACTC,MAAM;EACNC;AAAa,CAMd;EACC,MAAMC,aAAA,GACJH,SAAA,KAAc,IAAIC,MAAA,GAASJ,eAAA,GAAkBG,SAAA,KAAc,IAAIC,MAAA,GAASF,WAAA,GAAcE,MAAA;EAExF;EACA;EACA,OAAOC,aAAA,GAAgB,CAACC,aAAA,GAAgBA,aAAA;AAC1C;AAEA,SAASC,wCAAwCC,KAAiB;EAChE,MAAMC,6BAAA,GAAgCC,IAAA,CAAKC,GAAG,CAACH,KAAA,CAAMJ,MAAM,IAAIM,IAAA,CAAKC,GAAG,CAACH,KAAA,CAAMI,MAAM;EACpF,IAAI,CAACH,6BAAA,EAA+B;IAClC;EACF;EAEA,MAAMI,MAAA,GAASL,KAAA,CAAMK,MAAM;EAC3B,IAAI,EAAEA,MAAA,YAAkBC,OAAM,GAAI;IAChC;EACF;EAEA,MAAMC,eAAA,GAAkBF,MAAA,CAAOG,OAAO,CAAcjB,uBAAA;EACpD,IAAI,CAACgB,eAAA,EAAiB;IACpB;EACF;EAEA,MAAME,qBAAA,GAAwBF,eAAA,CAAgBG,WAAW,GAAGH,eAAA,CAAgBb,WAAW;EACvF,IAAI,CAACe,qBAAA,EAAuB;IAC1B;EACF;EAEAT,KAAA,CAAMW,cAAc;EACpBJ,eAAA,CAAgBK,UAAU,IAAInB,wBAAA,CAAyB;IACrDC,WAAA,EAAaa,eAAA,CAAgBb,WAAW;IACxCC,SAAA,EAAWK,KAAA,CAAML,SAAS;IAC1BC,MAAA,EAAQI,KAAA,CAAMJ,MAAM;IACpBC,aAAA,EAAegB,gBAAA,CAAiBN,eAAA,EAAiBO,SAAS,KAAK;EACjE;AACF;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,+BAAA,GAAkC;AAEtC,OAAO,SAAAC,2CAAA;EAAA,MAAAC,CAAA,GAAA5B,EAAA;EAAA,IAAA6B,EAAA;EAAA,IAAAD,CAAA,QAAAE,MAAA,CAAAC,GAAA;IAeFF,EAAA;IAAED,CAAA,MAAAC,EAAA;EAAA;IAAAA,EAAA,GAAAD,CAAA;EAAA;EAdL3B,SAAA,CAAA+B,MAAA,EAcGH,EAAE;AAAA;AAfA,SAAAG,OAAA;EAAA,IAECN,+BAAA,MAAoC;IACtCO,QAAA,CAAAC,gBAAA,CAA0B,SAAAxB,uCAAA;MAAAyB,OAAA;IAAA,CAE1B;EAAA;EAAAT,+BAAA,GAEFA,+BAAA,IAAmC;EAAA,OAAAU,KAAA;AAAA;AAPhC,SAAAA,MAAA;EAAAV,+BAAA,GAUDA,+BAAA,IAAmC;EAAA,IAC/BA,+BAAA,MAAoC;IACtCO,QAAA,CAAAI,mBAAA,CAA6B,SAAA3B,uCAAS;EAAA;AAAA","ignoreList":[]}

package/dist/features/toolbars/fixed/client/Toolbar/index.css

@@ -1,3 +1,37 @@
+@property --fixed-toolbar-fade-start {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --fixed-toolbar-fade-end {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+/*
+ * Drives the fade widths off the toolbar's own scroll position: fully opaque at rest,
+ * fading in on whichever edge still has scrolled-off content once it overflows.
+ * Unsupported browsers (no animation-timeline) simply keep the initial 0px fade, i.e. no fade at all.
+ */
+@keyframes fixed-toolbar-scroll-fade {
+  0% {
+    --fixed-toolbar-fade-start: 0px;
+  }
+  10%,
+  100% {
+    --fixed-toolbar-fade-start: var(--spacer-5);
+  }
+  0%,
+  90% {
+    --fixed-toolbar-fade-end: var(--spacer-5);
+  }
+  100% {
+    --fixed-toolbar-fade-end: 0px;
+  }
+}
+
 @layer payload-default {
   .fixed-toolbar.fixed-toolbar--hide {
     visibility: hidden;
@@ -7,10 +41,8 @@
 
   .fixed-toolbar {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
     padding: 0 var(--spacer-2);
-    gap: var(--spacer-2);
     vertical-align: middle;
     position: sticky;
     z-index: 2;
@@ -27,9 +59,9 @@
       content: ' ';
       position: absolute;
       top: 0;
-      right: 0;
+      inset-inline-end: 0;
       bottom: 0;
-      left: 0;
+      inset-inline-start: 0;
       border-radius: inherit;
     }
 
@@ -46,24 +78,64 @@
       border-radius: 0 0 var(--radius-medium) var(--radius-medium) !important;
 
       > .editor-scroller > .editor {
+        --content-editable-padding-block-start: var(--spacer-2);
+
         > .ContentEditable__root {
           padding-top: var(--spacer-2);
         }
       }
+    }
+  }
 
-      > .editor-scroller > .editor > div > .LexicalEditorTheme__placeholder {
-        top: var(--spacer-4);
-      }
+  .fixed-toolbar__scroll {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--spacer-2);
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    position: relative;
+    z-index: 1;
+    animation: fixed-toolbar-scroll-fade linear;
+    animation-timeline: scroll(self inline);
+    mask: linear-gradient(
+      to right,
+      transparent,
+      black var(--fixed-toolbar-fade-start),
+      black calc(100% - var(--fixed-toolbar-fade-end)),
+      transparent
+    );
+
+    &::-webkit-scrollbar {
+      display: none;
     }
   }
 
+  [dir='rtl'] .fixed-toolbar__scroll {
+    mask: linear-gradient(
+      to left,
+      transparent,
+      black var(--fixed-toolbar-fade-start),
+      black calc(100% - var(--fixed-toolbar-fade-end)),
+      transparent
+    );
+  }
+
   .fixed-toolbar__group {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     gap: var(--spacer-2);
     align-self: stretch;
     z-index: 1;
+    flex-shrink: 0;
+
+    > * {
+      flex-shrink: 0;
+    }
 
     .divider {
       width: var(--stroke-width-small);

package/dist/features/toolbars/fixed/client/Toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/toolbars/fixed/client/Toolbar/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAGjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AAMrE,OAAO,aAAa,CAAA;AA2PpB,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,wBAAwB,CAuCxE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/toolbars/fixed/client/Toolbar/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAGjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AAQrE,OAAO,aAAa,CAAA;AAuQpB,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,wBAAwB,CAuCxE,CAAA"}

package/dist/features/toolbars/fixed/client/Toolbar/index.js

@@ -4,13 +4,16 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+import { getTranslation } from '@payloadcms/translations';
 import { useScrollInfo, useThrottledEffect, useTranslation } from '@payloadcms/ui';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js';
 import { ToolbarButton } from '../../../shared/ToolbarButton/index.js';
 import { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js';
+import { useToolbarKeyboardNavigation } from '../../../shared/useToolbarKeyboardNavigation.js';
 import { useToolbarStates } from '../../../shared/useToolbarStates.js';
+import { useRedirectVerticalWheelToHorizontalScroll } from './horizontalWheelScroll.js';
 import './index.css';
 function ButtonGroupItem({
   active,
@@ -125,10 +128,21 @@ function FixedToolbar({
   parentWithFixedToolbar
 }) {
   const currentToolbarRef = React.useRef(null);
+  const keyboardNavigationOptions = useMemo(() => ({
+    toolbarRef: currentToolbarRef
+  }), []);
+  const {
+    fieldProps
+  } = useEditorConfigContext();
+  const {
+    i18n
+  } = useTranslation();
+  useToolbarKeyboardNavigation(keyboardNavigationOptions);
   const isEditable = useLexicalEditable();
   const {
     y
   } = useScrollInfo();
+  useRedirectVerticalWheelToHorizontalScroll();
   const toolbarStates = useToolbarStates(editor, editorConfig?.features?.toolbarFixed?.groups);
   // Memoize the parent toolbar element
   const parentToolbarElem = useMemo(() => {
@@ -174,6 +188,7 @@ function FixedToolbar({
     }
   }, 50, [currentToolbarRef, parentToolbarElem, y]);
   return /*#__PURE__*/_jsx("div", {
+    "aria-label": getTranslation(fieldProps.field.label || fieldProps.path, i18n) || fieldProps.path,
     className: "fixed-toolbar",
     onFocus: event => {
       // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,
@@ -181,7 +196,10 @@ function FixedToolbar({
       event.stopPropagation();
     },
     ref: currentToolbarRef,
-    children: isEditable && /*#__PURE__*/_jsx(React.Fragment, {
+    role: "toolbar",
+    children: isEditable && /*#__PURE__*/_jsx("div", {
+      className: "fixed-toolbar__scroll",
+      tabIndex: -1,
       children: editorConfig?.features && editorConfig.features?.toolbarFixed?.groups.map((group, i) => {
         return /*#__PURE__*/_jsx(ToolbarGroupComponent, {
           anchorElem: anchorElem,