@payloadcms/richtext-lexical 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/cell/index.d.ts

@@ -1,4 +1,4 @@
-import type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js';
+import type { EditorConfig as LexicalEditorConfig } from 'lexical';
 import React from 'react';
 export declare const RichTextCell: React.FC<{
     lexicalEditorConfig: LexicalEditorConfig;

package/dist/cell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AASnF,OAAO,KAA8B,MAAM,OAAO,CAAA;AAWlD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,mBAAmB,EAAE,mBAAmB,CAAA;CACzC,CA0JA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAOlE,OAAO,KAA8B,MAAM,OAAO,CAAA;AAWlD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,mBAAmB,EAAE,mBAAmB,CAAA;CACzC,CA0JA,CAAA"}

package/dist/cell/index.js

@@ -1,11 +1,9 @@
 'use client';
-import lexicalHeadlessImport from '@lexical/headless';
-const { createHeadlessEditor } = lexicalHeadlessImport;
-import lexicalImport from 'lexical';
-const { $getRoot } = lexicalImport;
+import { createHeadlessEditor } from '@lexical/headless';
 import { useTableCell } from '@payloadcms/ui/elements/Table';
 import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
 import { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction';
+import { $getRoot } from 'lexical';
 import React, { useEffect, useState } from 'react';
 import { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js';
 import { loadClientFeatures } from '../field/lexical/config/client/loader.js';

package/dist/cell/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/cell/index.tsx"],"sourcesContent":["'use client'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js'\n\nimport lexicalHeadlessImport from '@lexical/headless'\nconst { createHeadlessEditor } = lexicalHeadlessImport\nimport lexicalImport from 'lexical'\nconst { $getRoot } = lexicalImport\nimport { useTableCell } from '@payloadcms/ui/elements/Table'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'\nimport React, { useEffect, useState } from 'react'\n\nimport type { FeatureProviderClient } from '../field/features/types.js'\nimport type { SanitizedClientEditorConfig } from '../field/lexical/config/types.js'\nimport type { GeneratedFeatureProviderComponent } from '../types.js'\n\nimport { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js'\nimport { loadClientFeatures } from '../field/lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from '../field/lexical/config/client/sanitize.js'\nimport { getEnabledNodes } from '../field/lexical/nodes/index.js'\n\nexport const RichTextCell: React.FC<{\n  lexicalEditorConfig: LexicalEditorConfig\n}> = (props) => {\n  const { lexicalEditorConfig } = props\n\n  const [preview, setPreview] = React.useState('Loading...')\n  const { schemaPath } = useFieldProps()\n\n  const { cellData, richTextComponentMap } = useTableCell()\n\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)\n\n  const [featureProviders, setFeatureProviders] = useState<FeatureProviderClient<unknown>[]>([])\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<SanitizedClientEditorConfig>(null)\n\n  let featureProviderComponents: GeneratedFeatureProviderComponent[] = richTextComponentMap.get(\n    'features',\n  ) as GeneratedFeatureProviderComponent[] // TODO: Type better\n  // order by order\n  featureProviderComponents = featureProviderComponents.sort((a, b) => a.order - b.order)\n\n  const featureComponentsWithFeaturesLength =\n    Array.from(richTextComponentMap.keys()).filter(\n      (key) => key.startsWith(`feature.`) && !key.includes('.fields.'),\n    ).length + featureProviderComponents.length\n\n  useEffect(() => {\n    if (!hasLoadedFeatures) {\n      const featureProvidersLocal: FeatureProviderClient<unknown>[] = []\n      let featureProvidersAndComponentsLoaded = 0\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {\n          if (!key.includes('.components.')) {\n            featureProvidersLocal.push(plugin)\n          }\n          featureProvidersAndComponentsLoaded++\n        }\n      })\n\n      if (featureProvidersAndComponentsLoaded === featureComponentsWithFeaturesLength) {\n        setFeatureProviders(featureProvidersLocal)\n        setHasLoadedFeatures(true)\n\n        /**\n         * Loaded feature provided => create the final sanitized editor config\n         */\n\n        const resolvedClientFeatures = loadClientFeatures({\n          clientFunctions,\n          schemaPath,\n          unSanitizedEditorConfig: {\n            features: featureProvidersLocal,\n            lexical: lexicalEditorConfig,\n          },\n        })\n\n        setFinalSanitizedEditorConfig(\n          sanitizeClientEditorConfig(\n            lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,\n            resolvedClientFeatures,\n          ),\n        )\n      }\n    }\n  }, [\n    hasLoadedFeatures,\n    clientFunctions,\n    schemaPath,\n    featureProviderComponents.length,\n    featureProviders,\n    finalSanitizedEditorConfig,\n    lexicalEditorConfig,\n    featureComponentsWithFeaturesLength,\n  ])\n\n  useEffect(() => {\n    let dataToUse = cellData\n    if (dataToUse == null || !hasLoadedFeatures || !finalSanitizedEditorConfig) {\n      setPreview('')\n      return\n    }\n\n    // Transform data through load hooks\n    if (finalSanitizedEditorConfig?.features?.hooks?.load?.length) {\n      finalSanitizedEditorConfig.features.hooks.load.forEach((hook) => {\n        dataToUse = hook({ incomingEditorState: dataToUse })\n      })\n    }\n\n    if (!dataToUse || typeof dataToUse !== 'object') {\n      setPreview('')\n      return\n    }\n\n    // If data is from Slate and not Lexical\n    if (Array.isArray(dataToUse) && !('root' in dataToUse)) {\n      setPreview('')\n      return\n    }\n\n    // If data is from payload-plugin-lexical\n    if ('jsonContent' in dataToUse) {\n      setPreview('')\n      return\n    }\n\n    // initialize headless editor\n    const headlessEditor = createHeadlessEditor({\n      namespace: finalSanitizedEditorConfig.lexical.namespace,\n      nodes: getEnabledNodes({ editorConfig: finalSanitizedEditorConfig }),\n      theme: finalSanitizedEditorConfig.lexical.theme,\n    })\n    headlessEditor.setEditorState(headlessEditor.parseEditorState(dataToUse))\n\n    const textContent =\n      headlessEditor.getEditorState().read(() => {\n        return $getRoot().getTextContent()\n      }) || ''\n\n    // Limiting the number of characters shown is done in a CSS rule\n    setPreview(textContent)\n  }, [cellData, lexicalEditorConfig, hasLoadedFeatures, finalSanitizedEditorConfig])\n\n  if (!hasLoadedFeatures) {\n    return (\n      <React.Fragment>\n        {Array.isArray(featureProviderComponents) &&\n          featureProviderComponents.map((featureProvider) => {\n            // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}\n            const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>\n              key.startsWith(`feature.${featureProvider.key}.components.`),\n            )\n            const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {\n              return richTextComponentMap.get(key)\n            })\n\n            return (\n              <React.Fragment key={featureProvider.key}>\n                {featureComponents?.length\n                  ? featureComponents.map((FeatureComponent) => {\n                      return FeatureComponent\n                    })\n                  : null}\n                {featureProvider.ClientComponent}\n              </React.Fragment>\n            )\n          })}\n      </React.Fragment>\n    )\n  }\n\n  return <span>{preview}</span>\n}\n"],"names":["lexicalHeadlessImport","createHeadlessEditor","lexicalImport","$getRoot","useTableCell","useFieldProps","useClientFunctions","React","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","getEnabledNodes","RichTextCell","props","lexicalEditorConfig","preview","setPreview","schemaPath","cellData","richTextComponentMap","clientFunctions","hasLoadedFeatures","setHasLoadedFeatures","featureProviders","setFeatureProviders","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProviderComponents","get","sort","a","b","order","featureComponentsWithFeaturesLength","Array","from","keys","filter","key","startsWith","includes","length","featureProvidersLocal","featureProvidersAndComponentsLoaded","Object","entries","forEach","plugin","push","resolvedClientFeatures","unSanitizedEditorConfig","features","lexical","dataToUse","hooks","load","hook","incomingEditorState","isArray","headlessEditor","namespace","nodes","editorConfig","theme","setEditorState","parseEditorState","textContent","getEditorState","read","getTextContent","Fragment","map","featureProvider","featureComponentKeys","featureComponents","FeatureComponent","ClientComponent","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../src/cell/index.tsx"],"sourcesContent":["'use client'\nimport type { EditorConfig as LexicalEditorConfig } from 'lexical'\n\nimport { createHeadlessEditor } from '@lexical/headless'\nimport { useTableCell } from '@payloadcms/ui/elements/Table'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'\nimport { $getRoot } from 'lexical'\nimport React, { useEffect, useState } from 'react'\n\nimport type { FeatureProviderClient } from '../field/features/types.js'\nimport type { SanitizedClientEditorConfig } from '../field/lexical/config/types.js'\nimport type { GeneratedFeatureProviderComponent } from '../types.js'\n\nimport { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js'\nimport { loadClientFeatures } from '../field/lexical/config/client/loader.js'\nimport { sanitizeClientEditorConfig } from '../field/lexical/config/client/sanitize.js'\nimport { getEnabledNodes } from '../field/lexical/nodes/index.js'\n\nexport const RichTextCell: React.FC<{\n  lexicalEditorConfig: LexicalEditorConfig\n}> = (props) => {\n  const { lexicalEditorConfig } = props\n\n  const [preview, setPreview] = React.useState('Loading...')\n  const { schemaPath } = useFieldProps()\n\n  const { cellData, richTextComponentMap } = useTableCell()\n\n  const clientFunctions = useClientFunctions()\n  const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)\n\n  const [featureProviders, setFeatureProviders] = useState<FeatureProviderClient<unknown>[]>([])\n\n  const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =\n    useState<SanitizedClientEditorConfig>(null)\n\n  let featureProviderComponents: GeneratedFeatureProviderComponent[] = richTextComponentMap.get(\n    'features',\n  ) as GeneratedFeatureProviderComponent[] // TODO: Type better\n  // order by order\n  featureProviderComponents = featureProviderComponents.sort((a, b) => a.order - b.order)\n\n  const featureComponentsWithFeaturesLength =\n    Array.from(richTextComponentMap.keys()).filter(\n      (key) => key.startsWith(`feature.`) && !key.includes('.fields.'),\n    ).length + featureProviderComponents.length\n\n  useEffect(() => {\n    if (!hasLoadedFeatures) {\n      const featureProvidersLocal: FeatureProviderClient<unknown>[] = []\n      let featureProvidersAndComponentsLoaded = 0\n\n      Object.entries(clientFunctions).forEach(([key, plugin]) => {\n        if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {\n          if (!key.includes('.components.')) {\n            featureProvidersLocal.push(plugin)\n          }\n          featureProvidersAndComponentsLoaded++\n        }\n      })\n\n      if (featureProvidersAndComponentsLoaded === featureComponentsWithFeaturesLength) {\n        setFeatureProviders(featureProvidersLocal)\n        setHasLoadedFeatures(true)\n\n        /**\n         * Loaded feature provided => create the final sanitized editor config\n         */\n\n        const resolvedClientFeatures = loadClientFeatures({\n          clientFunctions,\n          schemaPath,\n          unSanitizedEditorConfig: {\n            features: featureProvidersLocal,\n            lexical: lexicalEditorConfig,\n          },\n        })\n\n        setFinalSanitizedEditorConfig(\n          sanitizeClientEditorConfig(\n            lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,\n            resolvedClientFeatures,\n          ),\n        )\n      }\n    }\n  }, [\n    hasLoadedFeatures,\n    clientFunctions,\n    schemaPath,\n    featureProviderComponents.length,\n    featureProviders,\n    finalSanitizedEditorConfig,\n    lexicalEditorConfig,\n    featureComponentsWithFeaturesLength,\n  ])\n\n  useEffect(() => {\n    let dataToUse = cellData\n    if (dataToUse == null || !hasLoadedFeatures || !finalSanitizedEditorConfig) {\n      setPreview('')\n      return\n    }\n\n    // Transform data through load hooks\n    if (finalSanitizedEditorConfig?.features?.hooks?.load?.length) {\n      finalSanitizedEditorConfig.features.hooks.load.forEach((hook) => {\n        dataToUse = hook({ incomingEditorState: dataToUse })\n      })\n    }\n\n    if (!dataToUse || typeof dataToUse !== 'object') {\n      setPreview('')\n      return\n    }\n\n    // If data is from Slate and not Lexical\n    if (Array.isArray(dataToUse) && !('root' in dataToUse)) {\n      setPreview('')\n      return\n    }\n\n    // If data is from payload-plugin-lexical\n    if ('jsonContent' in dataToUse) {\n      setPreview('')\n      return\n    }\n\n    // initialize headless editor\n    const headlessEditor = createHeadlessEditor({\n      namespace: finalSanitizedEditorConfig.lexical.namespace,\n      nodes: getEnabledNodes({ editorConfig: finalSanitizedEditorConfig }),\n      theme: finalSanitizedEditorConfig.lexical.theme,\n    })\n    headlessEditor.setEditorState(headlessEditor.parseEditorState(dataToUse))\n\n    const textContent =\n      headlessEditor.getEditorState().read(() => {\n        return $getRoot().getTextContent()\n      }) || ''\n\n    // Limiting the number of characters shown is done in a CSS rule\n    setPreview(textContent)\n  }, [cellData, lexicalEditorConfig, hasLoadedFeatures, finalSanitizedEditorConfig])\n\n  if (!hasLoadedFeatures) {\n    return (\n      <React.Fragment>\n        {Array.isArray(featureProviderComponents) &&\n          featureProviderComponents.map((featureProvider) => {\n            // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}\n            const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>\n              key.startsWith(`feature.${featureProvider.key}.components.`),\n            )\n            const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {\n              return richTextComponentMap.get(key)\n            })\n\n            return (\n              <React.Fragment key={featureProvider.key}>\n                {featureComponents?.length\n                  ? featureComponents.map((FeatureComponent) => {\n                      return FeatureComponent\n                    })\n                  : null}\n                {featureProvider.ClientComponent}\n              </React.Fragment>\n            )\n          })}\n      </React.Fragment>\n    )\n  }\n\n  return <span>{preview}</span>\n}\n"],"names":["createHeadlessEditor","useTableCell","useFieldProps","useClientFunctions","$getRoot","React","useEffect","useState","defaultEditorLexicalConfig","loadClientFeatures","sanitizeClientEditorConfig","getEnabledNodes","RichTextCell","props","lexicalEditorConfig","preview","setPreview","schemaPath","cellData","richTextComponentMap","clientFunctions","hasLoadedFeatures","setHasLoadedFeatures","featureProviders","setFeatureProviders","finalSanitizedEditorConfig","setFinalSanitizedEditorConfig","featureProviderComponents","get","sort","a","b","order","featureComponentsWithFeaturesLength","Array","from","keys","filter","key","startsWith","includes","length","featureProvidersLocal","featureProvidersAndComponentsLoaded","Object","entries","forEach","plugin","push","resolvedClientFeatures","unSanitizedEditorConfig","features","lexical","dataToUse","hooks","load","hook","incomingEditorState","isArray","headlessEditor","namespace","nodes","editorConfig","theme","setEditorState","parseEditorState","textContent","getEditorState","read","getTextContent","Fragment","map","featureProvider","featureComponentKeys","featureComponents","FeatureComponent","ClientComponent","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/exports/components.d.ts

@@ -1,6 +1,12 @@
 export { RichTextCell } from '../cell/index.js';
+export { createClientComponent } from '../field/features/createClientComponent.js';
+export { toolbarFormatGroupWithItems } from '../field/features/format/shared/toolbarFormatGroup.js';
+export { toolbarAddDropdownGroupWithItems } from '../field/features/shared/toolbar/addDropdownGroup.js';
+export { toolbarFeatureButtonsGroupWithItems } from '../field/features/shared/toolbar/featureButtonsGroup.js';
+export { toolbarTextDropdownGroupWithItems } from '../field/features/shared/toolbar/textDropdownGroup.js';
+export { ToolbarButton } from '../field/features/toolbars/shared/ToolbarButton/index.js';
+export { ToolbarDropdown } from '../field/features/toolbars/shared/ToolbarDropdown/index.js';
 export { RichTextField } from '../field/index.js';
+export { type EditorFocusContextType, EditorFocusProvider, useEditorFocus, } from '../field/lexical/EditorFocusProvider.js';
 export { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js';
-export { ToolbarButton } from '../field/lexical/plugins/FloatingSelectToolbar/ToolbarButton/index.js';
-export { ToolbarDropdown } from '../field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/index.js';
 //# sourceMappingURL=components.d.ts.map

package/dist/exports/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/exports/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAA;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,uEAAuE,CAAA;AACrG,OAAO,EAAE,eAAe,EAAE,MAAM,yEAAyE,CAAA"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/exports/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAA;AAElF,OAAO,EAAE,2BAA2B,EAAE,MAAM,uDAAuD,CAAA;AACnG,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAA;AACvG,OAAO,EAAE,mCAAmC,EAAE,MAAM,yDAAyD,CAAA;AAC7G,OAAO,EAAE,iCAAiC,EAAE,MAAM,uDAAuD,CAAA;AACzG,OAAO,EAAE,aAAa,EAAE,MAAM,0DAA0D,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAA;AAE5F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EACL,KAAK,sBAAsB,EAC3B,mBAAmB,EACnB,cAAc,GACf,MAAM,yCAAyC,CAAA;AAChD,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAA"}

package/dist/exports/components.js

@@ -1,7 +1,13 @@
 export { RichTextCell } from '../cell/index.js';
+export { createClientComponent } from '../field/features/createClientComponent.js';
+export { toolbarFormatGroupWithItems } from '../field/features/format/shared/toolbarFormatGroup.js';
+export { toolbarAddDropdownGroupWithItems } from '../field/features/shared/toolbar/addDropdownGroup.js';
+export { toolbarFeatureButtonsGroupWithItems } from '../field/features/shared/toolbar/featureButtonsGroup.js';
+export { toolbarTextDropdownGroupWithItems } from '../field/features/shared/toolbar/textDropdownGroup.js';
+export { ToolbarButton } from '../field/features/toolbars/shared/ToolbarButton/index.js';
+export { ToolbarDropdown } from '../field/features/toolbars/shared/ToolbarDropdown/index.js';
 export { RichTextField } from '../field/index.js';
+export { EditorFocusProvider, useEditorFocus } from '../field/lexical/EditorFocusProvider.js';
 export { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js';
-export { ToolbarButton } from '../field/lexical/plugins/FloatingSelectToolbar/ToolbarButton/index.js';
-export { ToolbarDropdown } from '../field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/index.js';
 
 //# sourceMappingURL=components.js.map

package/dist/exports/components.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/exports/components.ts"],"sourcesContent":["export { RichTextCell } from '../cell/index.js'\nexport { RichTextField } from '../field/index.js'\n\nexport { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js'\nexport { ToolbarButton } from '../field/lexical/plugins/FloatingSelectToolbar/ToolbarButton/index.js'\nexport { ToolbarDropdown } from '../field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/index.js'\n"],"names":["RichTextCell","RichTextField","defaultEditorLexicalConfig","ToolbarButton","ToolbarDropdown"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,aAAa,QAAQ,oBAAmB;AAEjD,SAASC,0BAA0B,QAAQ,4CAA2C;AACtF,SAASC,aAAa,QAAQ,wEAAuE;AACrG,SAASC,eAAe,QAAQ,0EAAyE"}
+{"version":3,"sources":["../../src/exports/components.ts"],"sourcesContent":["export { RichTextCell } from '../cell/index.js'\nexport { createClientComponent } from '../field/features/createClientComponent.js'\n\nexport { toolbarFormatGroupWithItems } from '../field/features/format/shared/toolbarFormatGroup.js'\nexport { toolbarAddDropdownGroupWithItems } from '../field/features/shared/toolbar/addDropdownGroup.js'\nexport { toolbarFeatureButtonsGroupWithItems } from '../field/features/shared/toolbar/featureButtonsGroup.js'\nexport { toolbarTextDropdownGroupWithItems } from '../field/features/shared/toolbar/textDropdownGroup.js'\nexport { ToolbarButton } from '../field/features/toolbars/shared/ToolbarButton/index.js'\nexport { ToolbarDropdown } from '../field/features/toolbars/shared/ToolbarDropdown/index.js'\n\nexport { RichTextField } from '../field/index.js'\nexport {\n  type EditorFocusContextType,\n  EditorFocusProvider,\n  useEditorFocus,\n} from '../field/lexical/EditorFocusProvider.js'\nexport { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js'\n"],"names":["RichTextCell","createClientComponent","toolbarFormatGroupWithItems","toolbarAddDropdownGroupWithItems","toolbarFeatureButtonsGroupWithItems","toolbarTextDropdownGroupWithItems","ToolbarButton","ToolbarDropdown","RichTextField","EditorFocusProvider","useEditorFocus","defaultEditorLexicalConfig"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,qBAAqB,QAAQ,6CAA4C;AAElF,SAASC,2BAA2B,QAAQ,wDAAuD;AACnG,SAASC,gCAAgC,QAAQ,uDAAsD;AACvG,SAASC,mCAAmC,QAAQ,0DAAyD;AAC7G,SAASC,iCAAiC,QAAQ,wDAAuD;AACzG,SAASC,aAAa,QAAQ,2DAA0D;AACxF,SAASC,eAAe,QAAQ,6DAA4D;AAE5F,SAASC,aAAa,QAAQ,oBAAmB;AACjD,SAEEC,mBAAmB,EACnBC,cAAc,QACT,0CAAyC;AAChD,SAASC,0BAA0B,QAAQ,4CAA2C"}

package/dist/field/Field.d.ts

@@ -1,11 +1,9 @@
 import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
-import type { FieldBase } from 'payload/types';
 import React from 'react';
 import type { SanitizedClientEditorConfig } from './lexical/config/types.js';
 import './index.scss';
 export declare const RichText: React.FC<FormFieldBase & {
     editorConfig: SanitizedClientEditorConfig;
-    label?: FieldBase['label'];
     name: string;
     richTextComponentMap: Map<string, React.ReactNode>;
     width?: string;

package/dist/field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAQ9C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAA;AAE5E,OAAO,cAAc,CAAA;AA2HrB,eAAO,MAAM,QAAQ;kBApHH,2BAA2B;YACjC,SAAS,CAAC,OAAO,CAAC;UACpB,MAAM;0BACU,IAAI,MAAM,EAAE,MAAM,SAAS,CAAC;YAC1C,MAAM;EAgH8B,CAAA"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AASjE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAA;AAE5E,OAAO,cAAc,CAAA;AA0HrB,eAAO,MAAM,QAAQ;kBAnHH,2BAA2B;UACnC,MAAM;0BACU,IAAI,MAAM,EAAE,MAAM,SAAS,CAAC;YAC1C,MAAM;EAgH8B,CAAA"}

package/dist/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { SerializedEditorState } from 'lexical'\nimport type { FieldBase } from 'payload/types'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { withCondition } from '@payloadcms/ui/forms/withCondition'\nimport React, { useCallback } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from './lexical/config/types.js'\n\nimport './index.scss'\nimport { LexicalProvider } from './lexical/LexicalProvider.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst _RichText: React.FC<\n  FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    label?: FieldBase['label']\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n    width?: string\n  }\n> = (props) => {\n  const {\n    name,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    editorConfig,\n    errorProps,\n    label,\n    labelProps,\n    path: pathFromProps,\n    readOnly,\n    required,\n    style,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n    width,\n  } = props\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, props, required })\n      }\n    },\n    // Important: do not add props to the dependencies array.\n    // This would cause an infinite loop and endless re-rendering.\n    // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709\n    [validate, required],\n  )\n  const { path: pathFromContext } = useFieldProps()\n\n  const fieldType = useField<SerializedEditorState>({\n    path: pathFromContext || pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  const { errorMessage, initialValue, path, schemaPath, setValue, showError, value } = fieldType\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    readOnly && `${baseClass}--read-only`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      className={classes}\n      key={path}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n        <FieldLabel\n          CustomLabel={CustomLabel}\n          label={label}\n          required={required}\n          {...(labelProps || {})}\n        />\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          <LexicalProvider\n            editorConfig={editorConfig}\n            fieldProps={props}\n            key={JSON.stringify({ initialValue, path })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)\n            onChange={(editorState) => {\n              let serializedEditorState = editorState.toJSON()\n\n              // Transform state through save hooks\n              if (editorConfig?.features?.hooks?.save?.length) {\n                editorConfig.features.hooks.save.forEach((hook) => {\n                  serializedEditorState = hook({ incomingEditorState: serializedEditorState })\n                })\n              }\n\n              setValue(serializedEditorState)\n            }}\n            path={path}\n            readOnly={readOnly}\n            value={value}\n          />\n        </ErrorBoundary>\n        {CustomDescription !== undefined ? (\n          CustomDescription\n        ) : (\n          <FieldDescription {...(descriptionProps || {})} />\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }): React.ReactElement {\n  // Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n  return (\n    <div className=\"errorBoundary\" role=\"alert\">\n      <p>Something went wrong:</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n    </div>\n  )\n}\n\nexport const RichText = withCondition(_RichText)\n"],"names":["FieldDescription","FieldError","FieldLabel","useFieldProps","useField","withCondition","React","useCallback","ErrorBoundary","LexicalProvider","baseClass","_RichText","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","editorConfig","errorProps","label","labelProps","path","pathFromProps","readOnly","required","style","validate","width","memoizedValidate","value","validationOptions","pathFromContext","fieldType","errorMessage","initialValue","schemaPath","setValue","showError","classes","filter","Boolean","join","div","key","fallbackRender","onReset","fieldProps","JSON","stringify","onChange","editorState","serializedEditorState","toJSON","features","hooks","save","length","forEach","hook","incomingEditorState","undefined","error","role","p","pre","color","message","RichText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { SerializedEditorState } from 'lexical'\n\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { withCondition } from '@payloadcms/ui/forms/withCondition'\nimport React, { useCallback } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from './lexical/config/types.js'\n\nimport './index.scss'\nimport { LexicalProvider } from './lexical/LexicalProvider.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst _RichText: React.FC<\n  FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n    width?: string\n  }\n> = (props) => {\n  const {\n    name,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    editorConfig,\n    errorProps,\n    label,\n    labelProps,\n    path: pathFromProps,\n    readOnly,\n    required,\n    style,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n    width,\n  } = props\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, props, required })\n      }\n    },\n    // Important: do not add props to the dependencies array.\n    // This would cause an infinite loop and endless re-rendering.\n    // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709\n    [validate, required],\n  )\n  const { path: pathFromContext } = useFieldProps()\n\n  const fieldType = useField<SerializedEditorState>({\n    path: pathFromContext || pathFromProps || name,\n    validate: memoizedValidate,\n  })\n\n  const { errorMessage, initialValue, path, schemaPath, setValue, showError, value } = fieldType\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    readOnly && `${baseClass}--read-only`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      className={classes}\n      key={path}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n        <FieldLabel\n          CustomLabel={CustomLabel}\n          label={label}\n          required={required}\n          {...(labelProps || {})}\n        />\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          <LexicalProvider\n            editorConfig={editorConfig}\n            fieldProps={props}\n            key={JSON.stringify({ initialValue, path })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)\n            onChange={(editorState) => {\n              let serializedEditorState = editorState.toJSON()\n\n              // Transform state through save hooks\n              if (editorConfig?.features?.hooks?.save?.length) {\n                editorConfig.features.hooks.save.forEach((hook) => {\n                  serializedEditorState = hook({ incomingEditorState: serializedEditorState })\n                })\n              }\n\n              setValue(serializedEditorState)\n            }}\n            path={path}\n            readOnly={readOnly}\n            value={value}\n          />\n        </ErrorBoundary>\n        {CustomDescription !== undefined ? (\n          CustomDescription\n        ) : (\n          <FieldDescription {...(descriptionProps || {})} />\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }): React.ReactElement {\n  // Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n  return (\n    <div className=\"errorBoundary\" role=\"alert\">\n      <p>Something went wrong:</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n    </div>\n  )\n}\n\nexport const RichText = withCondition(_RichText)\n"],"names":["FieldDescription","FieldError","FieldLabel","useFieldProps","useField","withCondition","React","useCallback","ErrorBoundary","LexicalProvider","baseClass","_RichText","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","editorConfig","errorProps","label","labelProps","path","pathFromProps","readOnly","required","style","validate","width","memoizedValidate","value","validationOptions","pathFromContext","fieldType","errorMessage","initialValue","schemaPath","setValue","showError","classes","filter","Boolean","join","div","key","fallbackRender","onReset","fieldProps","JSON","stringify","onChange","editorState","serializedEditorState","toJSON","features","hooks","save","length","forEach","hook","incomingEditorState","undefined","error","role","p","pre","color","message","RichText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/features/align/feature.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../../src/field/features/align/feature.client.tsx"],"names":[],"mappings":";AA2EA,eAAO,MAAM,2BAA2B,+BAA4C,CAAA"}
+{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../../src/field/features/align/feature.client.tsx"],"names":[],"mappings":";AA8JA,eAAO,MAAM,2BAA2B,+BAA4C,CAAA"}

package/dist/field/features/align/feature.client.js

@@ -1,68 +1,141 @@
 'use client';
-import lexicalImport from 'lexical';
-const { FORMAT_ELEMENT_COMMAND } = lexicalImport;
+import { $isElementNode, $isRangeSelection, FORMAT_ELEMENT_COMMAND } from 'lexical';
 import { AlignCenterIcon } from '../../lexical/ui/icons/AlignCenter/index.js';
 import { AlignJustifyIcon } from '../../lexical/ui/icons/AlignJustify/index.js';
 import { AlignLeftIcon } from '../../lexical/ui/icons/AlignLeft/index.js';
 import { AlignRightIcon } from '../../lexical/ui/icons/AlignRight/index.js';
 import { createClientComponent } from '../createClientComponent.js';
-import { AlignDropdownSectionWithEntries } from './floatingSelectToolbarAlignDropdownSection.js';
+import { toolbarAlignGroupWithItems } from './toolbarAlignGroup.js';
+const toolbarGroups = [
+    toolbarAlignGroupWithItems([
+        {
+            ChildComponent: AlignLeftIcon,
+            isActive: ({ selection })=>{
+                if (!$isRangeSelection(selection)) {
+                    return false;
+                }
+                for (const node of selection.getNodes()){
+                    if ($isElementNode(node)) {
+                        if (node.getFormatType() === 'left') {
+                            continue;
+                        }
+                    }
+                    const parent = node.getParent();
+                    if ($isElementNode(parent)) {
+                        if (parent.getFormatType() === 'left') {
+                            continue;
+                        }
+                    }
+                    return false;
+                }
+                return true;
+            },
+            key: 'alignLeft',
+            label: `Align Left`,
+            onSelect: ({ editor })=>{
+                editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
+            },
+            order: 1
+        },
+        {
+            ChildComponent: AlignCenterIcon,
+            isActive: ({ selection })=>{
+                if (!$isRangeSelection(selection)) {
+                    return false;
+                }
+                for (const node of selection.getNodes()){
+                    if ($isElementNode(node)) {
+                        if (node.getFormatType() === 'center') {
+                            continue;
+                        }
+                    }
+                    const parent = node.getParent();
+                    if ($isElementNode(parent)) {
+                        if (parent.getFormatType() === 'center') {
+                            continue;
+                        }
+                    }
+                    return false;
+                }
+                return true;
+            },
+            key: 'alignCenter',
+            label: `Align Center`,
+            onSelect: ({ editor })=>{
+                editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
+            },
+            order: 2
+        },
+        {
+            ChildComponent: AlignRightIcon,
+            isActive: ({ selection })=>{
+                if (!$isRangeSelection(selection)) {
+                    return false;
+                }
+                for (const node of selection.getNodes()){
+                    if ($isElementNode(node)) {
+                        if (node.getFormatType() === 'right') {
+                            continue;
+                        }
+                    }
+                    const parent = node.getParent();
+                    if ($isElementNode(parent)) {
+                        if (parent.getFormatType() === 'right') {
+                            continue;
+                        }
+                    }
+                    return false;
+                }
+                return true;
+            },
+            key: 'alignRight',
+            label: `Align Right`,
+            onSelect: ({ editor })=>{
+                editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
+            },
+            order: 3
+        },
+        {
+            ChildComponent: AlignJustifyIcon,
+            isActive: ({ selection })=>{
+                if (!$isRangeSelection(selection)) {
+                    return false;
+                }
+                for (const node of selection.getNodes()){
+                    if ($isElementNode(node)) {
+                        if (node.getFormatType() === 'justify') {
+                            continue;
+                        }
+                    }
+                    const parent = node.getParent();
+                    if ($isElementNode(parent)) {
+                        if (parent.getFormatType() === 'justify') {
+                            continue;
+                        }
+                    }
+                    return false;
+                }
+                return true;
+            },
+            key: 'alignJustify',
+            label: `Align Justify`,
+            onSelect: ({ editor })=>{
+                editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
+            },
+            order: 4
+        }
+    ])
+];
 const AlignFeatureClient = (props)=>{
     return {
         clientFeatureProps: props,
         feature: ()=>({
                 clientFeatureProps: props,
-                floatingSelectToolbar: {
-                    sections: [
-                        AlignDropdownSectionWithEntries([
-                            {
-                                ChildComponent: AlignLeftIcon,
-                                isActive: ()=>false,
-                                key: 'align-left',
-                                label: `Align Left`,
-                                onClick: ({ editor })=>{
-                                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
-                                },
-                                order: 1
-                            }
-                        ]),
-                        AlignDropdownSectionWithEntries([
-                            {
-                                ChildComponent: AlignCenterIcon,
-                                isActive: ()=>false,
-                                key: 'align-center',
-                                label: `Align Center`,
-                                onClick: ({ editor })=>{
-                                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
-                                },
-                                order: 2
-                            }
-                        ]),
-                        AlignDropdownSectionWithEntries([
-                            {
-                                ChildComponent: AlignRightIcon,
-                                isActive: ()=>false,
-                                key: 'align-right',
-                                label: `Align Right`,
-                                onClick: ({ editor })=>{
-                                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
-                                },
-                                order: 3
-                            }
-                        ]),
-                        AlignDropdownSectionWithEntries([
-                            {
-                                ChildComponent: AlignJustifyIcon,
-                                isActive: ()=>false,
-                                key: 'align-justify',
-                                label: `Align Justify`,
-                                onClick: ({ editor })=>{
-                                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
-                                },
-                                order: 4
-                            }
-                        ])
-                    ]
+                toolbarFixed: {
+                    groups: toolbarGroups
+                },
+                toolbarInline: {
+                    groups: toolbarGroups
                 }
             })
     };

package/dist/field/features/align/feature.client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/features/align/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport lexicalImport from 'lexical'\nconst { FORMAT_ELEMENT_COMMAND } = lexicalImport\n\nimport type { FeatureProviderProviderClient } from '../types.js'\n\nimport { AlignCenterIcon } from '../../lexical/ui/icons/AlignCenter/index.js'\nimport { AlignJustifyIcon } from '../../lexical/ui/icons/AlignJustify/index.js'\nimport { AlignLeftIcon } from '../../lexical/ui/icons/AlignLeft/index.js'\nimport { AlignRightIcon } from '../../lexical/ui/icons/AlignRight/index.js'\nimport { createClientComponent } from '../createClientComponent.js'\nimport { AlignDropdownSectionWithEntries } from './floatingSelectToolbarAlignDropdownSection.js'\n\nconst AlignFeatureClient: FeatureProviderProviderClient<undefined> = (props) => {\n  return {\n    clientFeatureProps: props,\n    feature: () => ({\n      clientFeatureProps: props,\n      floatingSelectToolbar: {\n        sections: [\n          AlignDropdownSectionWithEntries([\n            {\n              ChildComponent: AlignLeftIcon,\n              isActive: () => false,\n              key: 'align-left',\n              label: `Align Left`,\n              onClick: ({ editor }) => {\n                editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left')\n              },\n              order: 1,\n            },\n          ]),\n          AlignDropdownSectionWithEntries([\n            {\n              ChildComponent: AlignCenterIcon,\n              isActive: () => false,\n              key: 'align-center',\n              label: `Align Center`,\n              onClick: ({ editor }) => {\n                editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center')\n              },\n              order: 2,\n            },\n          ]),\n          AlignDropdownSectionWithEntries([\n            {\n              ChildComponent: AlignRightIcon,\n              isActive: () => false,\n              key: 'align-right',\n              label: `Align Right`,\n              onClick: ({ editor }) => {\n                editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')\n              },\n              order: 3,\n            },\n          ]),\n          AlignDropdownSectionWithEntries([\n            {\n              ChildComponent: AlignJustifyIcon,\n              isActive: () => false,\n              key: 'align-justify',\n              label: `Align Justify`,\n              onClick: ({ editor }) => {\n                editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')\n              },\n              order: 4,\n            },\n          ]),\n        ],\n      },\n    }),\n  }\n}\n\nexport const AlignFeatureClientComponent = createClientComponent(AlignFeatureClient)\n"],"names":["lexicalImport","FORMAT_ELEMENT_COMMAND","AlignCenterIcon","AlignJustifyIcon","AlignLeftIcon","AlignRightIcon","createClientComponent","AlignDropdownSectionWithEntries","AlignFeatureClient","props","clientFeatureProps","feature","floatingSelectToolbar","sections","ChildComponent","isActive","key","label","onClick","editor","dispatchCommand","order","AlignFeatureClientComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,OAAOA,mBAAmB,UAAS;AACnC,MAAM,EAAEC,sBAAsB,EAAE,GAAGD;AAInC,SAASE,eAAe,QAAQ,8CAA6C;AAC7E,SAASC,gBAAgB,QAAQ,+CAA8C;AAC/E,SAASC,aAAa,QAAQ,4CAA2C;AACzE,SAASC,cAAc,QAAQ,6CAA4C;AAC3E,SAASC,qBAAqB,QAAQ,8BAA6B;AACnE,SAASC,+BAA+B,QAAQ,iDAAgD;AAEhG,MAAMC,qBAA+D,CAACC;IACpE,OAAO;QACLC,oBAAoBD;QACpBE,SAAS,IAAO,CAAA;gBACdD,oBAAoBD;gBACpBG,uBAAuB;oBACrBC,UAAU;wBACRN,gCAAgC;4BAC9B;gCACEO,gBAAgBV;gCAChBW,UAAU,IAAM;gCAChBC,KAAK;gCACLC,OAAO,CAAC,UAAU,CAAC;gCACnBC,SAAS,CAAC,EAAEC,MAAM,EAAE;oCAClBA,OAAOC,eAAe,CAACnB,wBAAwB;gCACjD;gCACAoB,OAAO;4BACT;yBACD;wBACDd,gCAAgC;4BAC9B;gCACEO,gBAAgBZ;gCAChBa,UAAU,IAAM;gCAChBC,KAAK;gCACLC,OAAO,CAAC,YAAY,CAAC;gCACrBC,SAAS,CAAC,EAAEC,MAAM,EAAE;oCAClBA,OAAOC,eAAe,CAACnB,wBAAwB;gCACjD;gCACAoB,OAAO;4BACT;yBACD;wBACDd,gCAAgC;4BAC9B;gCACEO,gBAAgBT;gCAChBU,UAAU,IAAM;gCAChBC,KAAK;gCACLC,OAAO,CAAC,WAAW,CAAC;gCACpBC,SAAS,CAAC,EAAEC,MAAM,EAAE;oCAClBA,OAAOC,eAAe,CAACnB,wBAAwB;gCACjD;gCACAoB,OAAO;4BACT;yBACD;wBACDd,gCAAgC;4BAC9B;gCACEO,gBAAgBX;gCAChBY,UAAU,IAAM;gCAChBC,KAAK;gCACLC,OAAO,CAAC,aAAa,CAAC;gCACtBC,SAAS,CAAC,EAAEC,MAAM,EAAE;oCAClBA,OAAOC,eAAe,CAACnB,wBAAwB;gCACjD;gCACAoB,OAAO;4BACT;yBACD;qBACF;gBACH;YACF,CAAA;IACF;AACF;AAEA,OAAO,MAAMC,8BAA8BhB,sBAAsBE,oBAAmB"}
+{"version":3,"sources":["../../../../src/field/features/align/feature.client.tsx"],"sourcesContent":["'use client'\n\nimport { $isElementNode, $isRangeSelection, FORMAT_ELEMENT_COMMAND } from 'lexical'\n\nimport type { ToolbarGroup } from '../toolbars/types.js'\nimport type { FeatureProviderProviderClient } from '../types.js'\n\nimport { AlignCenterIcon } from '../../lexical/ui/icons/AlignCenter/index.js'\nimport { AlignJustifyIcon } from '../../lexical/ui/icons/AlignJustify/index.js'\nimport { AlignLeftIcon } from '../../lexical/ui/icons/AlignLeft/index.js'\nimport { AlignRightIcon } from '../../lexical/ui/icons/AlignRight/index.js'\nimport { createClientComponent } from '../createClientComponent.js'\nimport { toolbarAlignGroupWithItems } from './toolbarAlignGroup.js'\n\nconst toolbarGroups: ToolbarGroup[] = [\n  toolbarAlignGroupWithItems([\n    {\n      ChildComponent: AlignLeftIcon,\n      isActive: ({ selection }) => {\n        if (!$isRangeSelection(selection)) {\n          return false\n        }\n        for (const node of selection.getNodes()) {\n          if ($isElementNode(node)) {\n            if (node.getFormatType() === 'left') {\n              continue\n            }\n          }\n\n          const parent = node.getParent()\n          if ($isElementNode(parent)) {\n            if (parent.getFormatType() === 'left') {\n              continue\n            }\n          }\n\n          return false\n        }\n        return true\n      },\n      key: 'alignLeft',\n      label: `Align Left`,\n      onSelect: ({ editor }) => {\n        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left')\n      },\n      order: 1,\n    },\n    {\n      ChildComponent: AlignCenterIcon,\n      isActive: ({ selection }) => {\n        if (!$isRangeSelection(selection)) {\n          return false\n        }\n        for (const node of selection.getNodes()) {\n          if ($isElementNode(node)) {\n            if (node.getFormatType() === 'center') {\n              continue\n            }\n          }\n\n          const parent = node.getParent()\n          if ($isElementNode(parent)) {\n            if (parent.getFormatType() === 'center') {\n              continue\n            }\n          }\n\n          return false\n        }\n        return true\n      },\n      key: 'alignCenter',\n      label: `Align Center`,\n      onSelect: ({ editor }) => {\n        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center')\n      },\n      order: 2,\n    },\n    {\n      ChildComponent: AlignRightIcon,\n      isActive: ({ selection }) => {\n        if (!$isRangeSelection(selection)) {\n          return false\n        }\n        for (const node of selection.getNodes()) {\n          if ($isElementNode(node)) {\n            if (node.getFormatType() === 'right') {\n              continue\n            }\n          }\n\n          const parent = node.getParent()\n          if ($isElementNode(parent)) {\n            if (parent.getFormatType() === 'right') {\n              continue\n            }\n          }\n\n          return false\n        }\n        return true\n      },\n      key: 'alignRight',\n      label: `Align Right`,\n      onSelect: ({ editor }) => {\n        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')\n      },\n      order: 3,\n    },\n    {\n      ChildComponent: AlignJustifyIcon,\n      isActive: ({ selection }) => {\n        if (!$isRangeSelection(selection)) {\n          return false\n        }\n        for (const node of selection.getNodes()) {\n          if ($isElementNode(node)) {\n            if (node.getFormatType() === 'justify') {\n              continue\n            }\n          }\n\n          const parent = node.getParent()\n          if ($isElementNode(parent)) {\n            if (parent.getFormatType() === 'justify') {\n              continue\n            }\n          }\n\n          return false\n        }\n        return true\n      },\n      key: 'alignJustify',\n      label: `Align Justify`,\n      onSelect: ({ editor }) => {\n        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')\n      },\n      order: 4,\n    },\n  ]),\n]\n\nconst AlignFeatureClient: FeatureProviderProviderClient<undefined> = (props) => {\n  return {\n    clientFeatureProps: props,\n    feature: () => ({\n      clientFeatureProps: props,\n      toolbarFixed: {\n        groups: toolbarGroups,\n      },\n      toolbarInline: {\n        groups: toolbarGroups,\n      },\n    }),\n  }\n}\n\nexport const AlignFeatureClientComponent = createClientComponent(AlignFeatureClient)\n"],"names":["$isElementNode","$isRangeSelection","FORMAT_ELEMENT_COMMAND","AlignCenterIcon","AlignJustifyIcon","AlignLeftIcon","AlignRightIcon","createClientComponent","toolbarAlignGroupWithItems","toolbarGroups","ChildComponent","isActive","selection","node","getNodes","getFormatType","parent","getParent","key","label","onSelect","editor","dispatchCommand","order","AlignFeatureClient","props","clientFeatureProps","feature","toolbarFixed","groups","toolbarInline","AlignFeatureClientComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/features/align/toolbarAlignGroup.d.ts

@@ -0,0 +1,3 @@
+import type { ToolbarGroup, ToolbarGroupItem } from '../toolbars/types.js';
+export declare const toolbarAlignGroupWithItems: (items: ToolbarGroupItem[]) => ToolbarGroup;
+//# sourceMappingURL=toolbarAlignGroup.d.ts.map

package/dist/field/features/align/toolbarAlignGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarAlignGroup.d.ts","sourceRoot":"","sources":["../../../../src/field/features/align/toolbarAlignGroup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAI1E,eAAO,MAAM,0BAA0B,UAAW,gBAAgB,EAAE,KAAG,YAQtE,CAAA"}

package/dist/field/features/align/toolbarAlignGroup.js

@@ -0,0 +1,12 @@
+import { AlignLeftIcon } from '../../lexical/ui/icons/AlignLeft/index.js';
+export const toolbarAlignGroupWithItems = (items)=>{
+    return {
+        type: 'dropdown',
+        ChildComponent: AlignLeftIcon,
+        items,
+        key: 'align',
+        order: 30
+    };
+};
+
+//# sourceMappingURL=toolbarAlignGroup.js.map

package/dist/field/features/align/toolbarAlignGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/field/features/align/toolbarAlignGroup.ts"],"sourcesContent":["import type { ToolbarGroup, ToolbarGroupItem } from '../toolbars/types.js'\n\nimport { AlignLeftIcon } from '../../lexical/ui/icons/AlignLeft/index.js'\n\nexport const toolbarAlignGroupWithItems = (items: ToolbarGroupItem[]): ToolbarGroup => {\n  return {\n    type: 'dropdown',\n    ChildComponent: AlignLeftIcon,\n    items,\n    key: 'align',\n    order: 30,\n  }\n}\n"],"names":["AlignLeftIcon","toolbarAlignGroupWithItems","items","type","ChildComponent","key","order"],"rangeMappings":";;;;;;;;;","mappings":"AAEA,SAASA,aAAa,QAAQ,4CAA2C;AAEzE,OAAO,MAAMC,6BAA6B,CAACC;IACzC,OAAO;QACLC,MAAM;QACNC,gBAAgBJ;QAChBE;QACAG,KAAK;QACLC,OAAO;IACT;AACF,EAAC"}

package/dist/field/features/blockquote/feature.client.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" resolution-mode="require"/>
-export declare const BlockQuoteFeatureClientComponent: import("react").FC<undefined>;
+export declare const BlockquoteFeatureClientComponent: import("react").FC<undefined>;
 //# sourceMappingURL=feature.client.d.ts.map

package/dist/field/features/blockquote/feature.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../../src/field/features/blockquote/feature.client.tsx"],"names":[],"mappings":";AAqEA,eAAO,MAAM,gCAAgC,+BAAiD,CAAA"}
+{"version":3,"file":"feature.client.d.ts","sourceRoot":"","sources":["../../../../src/field/features/blockquote/feature.client.tsx"],"names":[],"mappings":";AAkFA,eAAO,MAAM,gCAAgC,+BAAiD,CAAA"}

package/dist/field/features/blockquote/feature.client.js

@@ -1,39 +1,43 @@
 'use client';
-import lexicalRichTextImport from '@lexical/rich-text';
-const { $createQuoteNode, QuoteNode } = lexicalRichTextImport;
-import lexicalSelectionImport from '@lexical/selection';
-const { $setBlocksType } = lexicalSelectionImport;
-import lexicalImport from 'lexical';
-const { $getSelection } = lexicalImport;
-import { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.js';
+import { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { $getSelection, $isRangeSelection } from 'lexical';
 import { BlockquoteIcon } from '../../lexical/ui/icons/Blockquote/index.js';
-import { TextDropdownSectionWithEntries } from '../common/floatingSelectToolbarTextDropdownSection/index.js';
 import { createClientComponent } from '../createClientComponent.js';
+import { toolbarTextDropdownGroupWithItems } from '../shared/toolbar/textDropdownGroup.js';
 import { MarkdownTransformer } from './markdownTransformer.js';
-const BlockQuoteFeatureClient = (props)=>{
+const toolbarGroups = [
+    toolbarTextDropdownGroupWithItems([
+        {
+            ChildComponent: BlockquoteIcon,
+            isActive: ({ selection })=>{
+                if (!$isRangeSelection(selection)) {
+                    return false;
+                }
+                for (const node of selection.getNodes()){
+                    if (!$isQuoteNode(node) && !$isQuoteNode(node.getParent())) {
+                        return false;
+                    }
+                }
+                return true;
+            },
+            key: 'blockquote',
+            label: `Blockquote`,
+            onSelect: ({ editor })=>{
+                editor.update(()=>{
+                    const selection = $getSelection();
+                    $setBlocksType(selection, ()=>$createQuoteNode());
+                });
+            },
+            order: 20
+        }
+    ])
+];
+const BlockquoteFeatureClient = (props)=>{
     return {
         clientFeatureProps: props,
         feature: ()=>({
                 clientFeatureProps: props,
-                floatingSelectToolbar: {
-                    sections: [
-                        TextDropdownSectionWithEntries([
-                            {
-                                ChildComponent: BlockquoteIcon,
-                                isActive: ()=>false,
-                                key: 'blockquote',
-                                label: `Blockquote`,
-                                onClick: ({ editor })=>{
-                                    editor.update(()=>{
-                                        const selection = $getSelection();
-                                        $setBlocksType(selection, ()=>$createQuoteNode());
-                                    });
-                                },
-                                order: 20
-                            }
-                        ])
-                    ]
-                },
                 markdownTransformers: [
                     MarkdownTransformer
                 ],
@@ -41,30 +45,39 @@ const BlockQuoteFeatureClient = (props)=>{
                     QuoteNode
                 ],
                 slashMenu: {
-                    options: [
+                    groups: [
                         {
-                            displayName: 'Basic',
-                            key: 'basic',
-                            options: [
-                                new SlashMenuOption(`blockquote`, {
+                            items: [
+                                {
                                     Icon: BlockquoteIcon,
-                                    displayName: `Blockquote`,
+                                    key: 'blockquote',
                                     keywords: [
                                         'quote',
                                         'blockquote'
                                     ],
-                                    onSelect: ()=>{
-                                        const selection = $getSelection();
-                                        $setBlocksType(selection, ()=>$createQuoteNode());
+                                    label: 'Blockquote',
+                                    onSelect: ({ editor })=>{
+                                        editor.update(()=>{
+                                            const selection = $getSelection();
+                                            $setBlocksType(selection, ()=>$createQuoteNode());
+                                        });
                                     }
-                                })
-                            ]
+                                }
+                            ],
+                            key: 'basic',
+                            label: 'Basic'
                         }
                     ]
+                },
+                toolbarFixed: {
+                    groups: toolbarGroups
+                },
+                toolbarInline: {
+                    groups: toolbarGroups
                 }
             })
     };
 };
-export const BlockQuoteFeatureClientComponent = createClientComponent(BlockQuoteFeatureClient);
+export const BlockquoteFeatureClientComponent = createClientComponent(BlockquoteFeatureClient);
 
 //# sourceMappingURL=feature.client.js.map