@payloadcms/richtext-lexical 3.71.0-canary.3 → 3.71.0-internal-debug.dea9d74

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","useLexicalEditable","useScrollInfo","useThrottledEffect","useTranslation","React","useMemo","useEditorConfigContext","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","_jsx","key","ChildComponent","ToolbarGroupComponent","t0","$","editorConfig","group","index","i18n","fieldProps","t1","featureClientSchemaMap","schemaPath","dropdownLabel","setDropdownLabel","useState","undefined","DropdownIcon","setDropdownIcon","t2","items","type","length","t3","useEffect","t4","t5","activeItems","label","substring","t","count","onActiveChange","t6","features","toolbarFixed","groups","_jsxs","className","children","Icon","itemsContainerClassNames","maxActiveItems","map","item_0","FixedToolbar","clientProps","parentWithFixedToolbar","currentToolbarRef","useRef","isEditable","y","parentToolbarElem","disableIfParentHasFixedToolbar","parentEditorElem","editorContainerRef","current","sibling","previousElementSibling","classList","contains","currentToolbarElem","currentRect","getBoundingClientRect","parentRect","overlapping","bottom","top","remove","add","onFocus","event","stopPropagation","ref","Fragment","i","getParentEditorWithFixedToolbar","editorConfigContext","parentEditor","resolvedFeatureMap","has","FixedToolbarPlugin","currentEditor","currentEditorConfig","applyToFocusedEditor","focusedEditor","Symbol","for","bb0","document","body"],"sources":["../../../../../../src/features/toolbars/fixed/client/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { useScrollInfo, useThrottledEffect, useTranslation } from '@payloadcms/ui'\nimport * as React from 'react'\nimport { useMemo } from 'react'\n\nimport type { EditorConfigContextType } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport type { SanitizedClientEditorConfig } from '../../../../../lexical/config/types.js'\nimport type { PluginComponent } from '../../../../typesClient.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../../types.js'\nimport type { FixedToolbarFeatureProps } from '../../server/index.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { ToolbarButton } from '../../../shared/ToolbarButton/index.js'\nimport './index.scss'\nimport { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\n\nfunction ButtonGroupItem({\n  anchorElem,\n  editor,\n  item,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}): React.ReactNode {\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n      )\n    )\n  }\n\n  if (!item.ChildComponent) {\n    return null\n  }\n\n  return (\n    <ToolbarButton editor={editor} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  editorConfig,\n  group,\n  index,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  group: ToolbarGroup\n  index: number\n}): React.ReactNode {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const [dropdownLabel, setDropdownLabel] = React.useState<string | undefined>(undefined)\n  const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | undefined>(undefined)\n\n  React.useEffect(() => {\n    if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n      setDropdownIcon(() => group.ChildComponent!)\n    } else {\n      setDropdownIcon(undefined)\n    }\n  }, [group])\n\n  const onActiveChange = React.useCallback(\n    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n      if (!activeItems.length) {\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent!)\n          setDropdownLabel(undefined)\n        } else {\n          setDropdownIcon(undefined)\n          setDropdownLabel(undefined)\n        }\n        return\n      }\n      const item = activeItems[0]!\n\n      let label = item.key\n      if (item.label) {\n        label =\n          typeof item.label === 'function'\n            ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n            : item.label\n      }\n      // Crop title to max. 25 characters\n      if (label.length > 25) {\n        label = label.substring(0, 25) + '...'\n      }\n      if (activeItems.length === 1) {\n        setDropdownLabel(label)\n        setDropdownIcon(() => item.ChildComponent)\n      } else {\n        setDropdownLabel(\n          i18n.t('lexical:general:toolbarItemsActive', { count: activeItems.length }),\n        )\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent!)\n        } else {\n          setDropdownIcon(undefined)\n        }\n      }\n    },\n    [group, i18n, featureClientSchemaMap, schemaPath],\n  )\n\n  return (\n    <div\n      className={`fixed-toolbar__group fixed-toolbar__group-${group.key}`}\n      data-toolbar-group-key={group.key}\n      key={group.key}\n    >\n      {group.type === 'dropdown' && group.items.length ? (\n        DropdownIcon ? (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            Icon={DropdownIcon}\n            itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n            label={dropdownLabel}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n            label={dropdownLabel}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        )\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            return (\n              <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n            )\n          })\n        : null}\n      {index < editorConfig.features.toolbarFixed?.groups.length - 1 && <div className=\"divider\" />}\n    </div>\n  )\n}\n\nfunction FixedToolbar({\n  anchorElem,\n  clientProps,\n  editor,\n  editorConfig,\n  parentWithFixedToolbar,\n}: {\n  anchorElem: HTMLElement\n  clientProps?: FixedToolbarFeatureProps\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  parentWithFixedToolbar: EditorConfigContextType | false\n}): React.ReactNode {\n  const currentToolbarRef = React.useRef<HTMLDivElement>(null)\n  const isEditable = useLexicalEditable()\n\n  const { y } = useScrollInfo()\n\n  // Memoize the parent toolbar element\n  const parentToolbarElem = useMemo(() => {\n    if (!parentWithFixedToolbar || clientProps?.disableIfParentHasFixedToolbar) {\n      return null\n    }\n\n    const parentEditorElem = parentWithFixedToolbar.editorContainerRef.current\n    let sibling = parentEditorElem.previousElementSibling\n    while (sibling) {\n      if (sibling.classList.contains('fixed-toolbar')) {\n        return sibling\n      }\n      sibling = sibling.previousElementSibling\n    }\n    return null\n  }, [clientProps?.disableIfParentHasFixedToolbar, parentWithFixedToolbar])\n\n  useThrottledEffect(\n    () => {\n      if (!parentToolbarElem) {\n        // this also checks for clientProps?.disableIfParentHasFixedToolbar indirectly, see the parentToolbarElem useMemo\n        return\n      }\n      const currentToolbarElem = currentToolbarRef.current\n      if (!currentToolbarElem) {\n        return\n      }\n\n      const currentRect = currentToolbarElem.getBoundingClientRect()\n      const parentRect = parentToolbarElem.getBoundingClientRect()\n\n      // we only need to check for vertical overlap\n      const overlapping = !(\n        currentRect.bottom < parentRect.top || currentRect.top > parentRect.bottom\n      )\n\n      if (overlapping) {\n        currentToolbarElem.classList.remove('fixed-toolbar')\n        currentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--overlapping')\n        parentToolbarElem.classList.remove('fixed-toolbar')\n        parentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--hide')\n      } else {\n        if (!currentToolbarElem.classList.contains('fixed-toolbar--overlapping')) {\n          return\n        }\n        currentToolbarElem.classList.remove('fixed-toolbar--overlapping')\n        currentToolbarElem.classList.add('fixed-toolbar')\n        parentToolbarElem.classList.remove('fixed-toolbar--hide')\n        parentToolbarElem.classList.add('fixed-toolbar')\n      }\n    },\n    50,\n    [currentToolbarRef, parentToolbarElem, y],\n  )\n\n  return (\n    <div\n      className=\"fixed-toolbar\"\n      onFocus={(event) => {\n        // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,\n        // the parent editor will be focused, and the child editor will lose focus.\n        event.stopPropagation()\n      }}\n      ref={currentToolbarRef}\n    >\n      {isEditable && (\n        <React.Fragment>\n          {editorConfig?.features &&\n            editorConfig.features?.toolbarFixed?.groups.map((group, i) => {\n              return (\n                <ToolbarGroupComponent\n                  anchorElem={anchorElem}\n                  editor={editor}\n                  editorConfig={editorConfig}\n                  group={group}\n                  index={i}\n                  key={group.key}\n                />\n              )\n            })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\nconst getParentEditorWithFixedToolbar = (\n  editorConfigContext: EditorConfigContextType,\n): EditorConfigContextType | false => {\n  if (editorConfigContext.parentEditor?.editorConfig) {\n    if (editorConfigContext.parentEditor?.editorConfig.resolvedFeatureMap.has('toolbarFixed')) {\n      return editorConfigContext.parentEditor\n    } else {\n      if (editorConfigContext.parentEditor) {\n        return getParentEditorWithFixedToolbar(editorConfigContext.parentEditor)\n      }\n    }\n  }\n  return false\n}\n\nexport const FixedToolbarPlugin: PluginComponent<FixedToolbarFeatureProps> = ({ clientProps }) => {\n  const [currentEditor] = useLexicalComposerContext()\n  const editorConfigContext = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  if (!isEditable) {\n    return null\n  }\n\n  const { editorConfig: currentEditorConfig } = editorConfigContext\n\n  const editor = clientProps.applyToFocusedEditor\n    ? editorConfigContext.focusedEditor?.editor || currentEditor\n    : currentEditor\n\n  const editorConfig = clientProps.applyToFocusedEditor\n    ? editorConfigContext.focusedEditor?.editorConfig || currentEditorConfig\n    : currentEditorConfig\n\n  const parentWithFixedToolbar = getParentEditorWithFixedToolbar(editorConfigContext)\n\n  if (clientProps?.disableIfParentHasFixedToolbar) {\n    if (parentWithFixedToolbar) {\n      return null\n    }\n  }\n\n  if (!editorConfig?.features?.toolbarFixed?.groups?.length) {\n    return null\n  }\n\n  return (\n    <FixedToolbar\n      anchorElem={document.body}\n      editor={editor}\n      editorConfig={editorConfig}\n      parentWithFixedToolbar={parentWithFixedToolbar}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/toolbars/fixed/client/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { useScrollInfo, useThrottledEffect, useTranslation } from '@payloadcms/ui'\nimport * as React from 'react'\nimport { useMemo } from 'react'\n\nimport type { EditorConfigContextType } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport type { SanitizedClientEditorConfig } from '../../../../../lexical/config/types.js'\nimport type { PluginComponent } from '../../../../typesClient.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../../types.js'\nimport type { FixedToolbarFeatureProps } from '../../server/index.js'\n\nimport { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { ToolbarButton } from '../../../shared/ToolbarButton/index.js'\nimport './index.scss'\nimport { ToolbarDropdown } from '../../../shared/ToolbarDropdown/index.js'\n\nfunction ButtonGroupItem({\n  anchorElem,\n  editor,\n  item,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  item: ToolbarGroupItem\n}): React.ReactNode {\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n      )\n    )\n  }\n\n  if (!item.ChildComponent) {\n    return null\n  }\n\n  return (\n    <ToolbarButton editor={editor} item={item} key={item.key}>\n      <item.ChildComponent />\n    </ToolbarButton>\n  )\n}\n\nfunction ToolbarGroupComponent({\n  anchorElem,\n  editor,\n  editorConfig,\n  group,\n  index,\n}: {\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  group: ToolbarGroup\n  index: number\n}): React.ReactNode {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  const [dropdownLabel, setDropdownLabel] = React.useState<string | undefined>(undefined)\n  const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | undefined>(undefined)\n\n  React.useEffect(() => {\n    if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n      setDropdownIcon(() => group.ChildComponent!)\n    } else {\n      setDropdownIcon(undefined)\n    }\n  }, [group])\n\n  const onActiveChange = React.useCallback(\n    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n      if (!activeItems.length) {\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent!)\n          setDropdownLabel(undefined)\n        } else {\n          setDropdownIcon(undefined)\n          setDropdownLabel(undefined)\n        }\n        return\n      }\n      const item = activeItems[0]!\n\n      let label = item.key\n      if (item.label) {\n        label =\n          typeof item.label === 'function'\n            ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n            : item.label\n      }\n      // Crop title to max. 25 characters\n      if (label.length > 25) {\n        label = label.substring(0, 25) + '...'\n      }\n      if (activeItems.length === 1) {\n        setDropdownLabel(label)\n        setDropdownIcon(() => item.ChildComponent)\n      } else {\n        setDropdownLabel(\n          i18n.t('lexical:general:toolbarItemsActive', { count: activeItems.length }),\n        )\n        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n          setDropdownIcon(() => group.ChildComponent!)\n        } else {\n          setDropdownIcon(undefined)\n        }\n      }\n    },\n    [group, i18n, featureClientSchemaMap, schemaPath],\n  )\n\n  return (\n    <div\n      className={`fixed-toolbar__group fixed-toolbar__group-${group.key}`}\n      data-toolbar-group-key={group.key}\n      key={group.key}\n    >\n      {group.type === 'dropdown' && group.items.length ? (\n        DropdownIcon ? (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            Icon={DropdownIcon}\n            itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n            label={dropdownLabel}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        ) : (\n          <ToolbarDropdown\n            anchorElem={anchorElem}\n            editor={editor}\n            group={group}\n            itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n            label={dropdownLabel}\n            maxActiveItems={group.maxActiveItems ?? 1}\n            onActiveChange={onActiveChange}\n          />\n        )\n      ) : null}\n      {group.type === 'buttons' && group.items.length\n        ? group.items.map((item) => {\n            return (\n              <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n            )\n          })\n        : null}\n      {index < editorConfig.features.toolbarFixed?.groups.length - 1 && <div className=\"divider\" />}\n    </div>\n  )\n}\n\nfunction FixedToolbar({\n  anchorElem,\n  clientProps,\n  editor,\n  editorConfig,\n  parentWithFixedToolbar,\n}: {\n  anchorElem: HTMLElement\n  clientProps?: FixedToolbarFeatureProps\n  editor: LexicalEditor\n  editorConfig: SanitizedClientEditorConfig\n  parentWithFixedToolbar: EditorConfigContextType | false\n}): React.ReactNode {\n  const currentToolbarRef = React.useRef<HTMLDivElement>(null)\n  const isEditable = useLexicalEditable()\n\n  const { y } = useScrollInfo()\n\n  // Memoize the parent toolbar element\n  const parentToolbarElem = useMemo(() => {\n    if (!parentWithFixedToolbar || clientProps?.disableIfParentHasFixedToolbar) {\n      return null\n    }\n\n    const parentEditorElem = parentWithFixedToolbar.editorContainerRef.current\n    let sibling = parentEditorElem.previousElementSibling\n    while (sibling) {\n      if (sibling.classList.contains('fixed-toolbar')) {\n        return sibling\n      }\n      sibling = sibling.previousElementSibling\n    }\n    return null\n  }, [clientProps?.disableIfParentHasFixedToolbar, parentWithFixedToolbar])\n\n  useThrottledEffect(\n    () => {\n      if (!parentToolbarElem) {\n        // this also checks for clientProps?.disableIfParentHasFixedToolbar indirectly, see the parentToolbarElem useMemo\n        return\n      }\n      const currentToolbarElem = currentToolbarRef.current\n      if (!currentToolbarElem) {\n        return\n      }\n\n      const currentRect = currentToolbarElem.getBoundingClientRect()\n      const parentRect = parentToolbarElem.getBoundingClientRect()\n\n      // we only need to check for vertical overlap\n      const overlapping = !(\n        currentRect.bottom < parentRect.top || currentRect.top > parentRect.bottom\n      )\n\n      if (overlapping) {\n        currentToolbarElem.classList.remove('fixed-toolbar')\n        currentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--overlapping')\n        parentToolbarElem.classList.remove('fixed-toolbar')\n        parentToolbarElem.classList.add('fixed-toolbar', 'fixed-toolbar--hide')\n      } else {\n        if (!currentToolbarElem.classList.contains('fixed-toolbar--overlapping')) {\n          return\n        }\n        currentToolbarElem.classList.remove('fixed-toolbar--overlapping')\n        currentToolbarElem.classList.add('fixed-toolbar')\n        parentToolbarElem.classList.remove('fixed-toolbar--hide')\n        parentToolbarElem.classList.add('fixed-toolbar')\n      }\n    },\n    50,\n    [currentToolbarRef, parentToolbarElem, y],\n  )\n\n  return (\n    <div\n      className=\"fixed-toolbar\"\n      onFocus={(event) => {\n        // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,\n        // the parent editor will be focused, and the child editor will lose focus.\n        event.stopPropagation()\n      }}\n      ref={currentToolbarRef}\n    >\n      {isEditable && (\n        <React.Fragment>\n          {editorConfig?.features &&\n            editorConfig.features?.toolbarFixed?.groups.map((group, i) => {\n              return (\n                <ToolbarGroupComponent\n                  anchorElem={anchorElem}\n                  editor={editor}\n                  editorConfig={editorConfig}\n                  group={group}\n                  index={i}\n                  key={group.key}\n                />\n              )\n            })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n\nconst getParentEditorWithFixedToolbar = (\n  editorConfigContext: EditorConfigContextType,\n): EditorConfigContextType | false => {\n  if (editorConfigContext.parentEditor?.editorConfig) {\n    if (editorConfigContext.parentEditor?.editorConfig.resolvedFeatureMap.has('toolbarFixed')) {\n      return editorConfigContext.parentEditor\n    } else {\n      if (editorConfigContext.parentEditor) {\n        return getParentEditorWithFixedToolbar(editorConfigContext.parentEditor)\n      }\n    }\n  }\n  return false\n}\n\nexport const FixedToolbarPlugin: PluginComponent<FixedToolbarFeatureProps> = ({ clientProps }) => {\n  const [currentEditor] = useLexicalComposerContext()\n  const editorConfigContext = useEditorConfigContext()\n  const isEditable = useLexicalEditable()\n  if (!isEditable) {\n    return null\n  }\n\n  const { editorConfig: currentEditorConfig } = editorConfigContext\n\n  const editor = clientProps.applyToFocusedEditor\n    ? editorConfigContext.focusedEditor?.editor || currentEditor\n    : currentEditor\n\n  const editorConfig = clientProps.applyToFocusedEditor\n    ? editorConfigContext.focusedEditor?.editorConfig || currentEditorConfig\n    : currentEditorConfig\n\n  const parentWithFixedToolbar = getParentEditorWithFixedToolbar(editorConfigContext)\n\n  if (clientProps?.disableIfParentHasFixedToolbar) {\n    if (parentWithFixedToolbar) {\n      return null\n    }\n  }\n\n  if (!editorConfig?.features?.toolbarFixed?.groups?.length) {\n    return null\n  }\n\n  return (\n    <FixedToolbar\n      anchorElem={document.body}\n      editor={editor}\n      editorConfig={editorConfig}\n      parentWithFixedToolbar={parentWithFixedToolbar}\n    />\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","useScrollInfo","useThrottledEffect","useTranslation","React","useMemo","useEditorConfigContext","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","key","ChildComponent","ToolbarGroupComponent","editorConfig","group","index","i18n","fieldProps","featureClientSchemaMap","schemaPath","dropdownLabel","setDropdownLabel","useState","undefined","DropdownIcon","setDropdownIcon","useEffect","type","items","length","onActiveChange","useCallback","activeItems","label","substring","t","count","div","className","data-toolbar-group-key","Icon","itemsContainerClassNames","maxActiveItems","map","features","toolbarFixed","groups","FixedToolbar","clientProps","parentWithFixedToolbar","currentToolbarRef","useRef","isEditable","y","parentToolbarElem","disableIfParentHasFixedToolbar","parentEditorElem","editorContainerRef","current","sibling","previousElementSibling","classList","contains","currentToolbarElem","currentRect","getBoundingClientRect","parentRect","overlapping","bottom","top","remove","add","onFocus","event","stopPropagation","ref","Fragment","i","getParentEditorWithFixedToolbar","editorConfigContext","parentEditor","resolvedFeatureMap","has","FixedToolbarPlugin","currentEditor","currentEditorConfig","applyToFocusedEditor","focusedEditor","document","body"],"mappings":"AAAA;;AAGA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,kBAAkB,QAAQ,oCAAmC;AACtE,SAASC,aAAa,EAAEC,kBAAkB,EAAEC,cAAc,QAAQ,iBAAgB;AAClF,YAAYC,WAAW,QAAO;AAC9B,SAASC,OAAO,QAAQ,QAAO;AAQ/B,SAASC,sBAAsB,QAAQ,+DAA8D;AACrG,SAASC,aAAa,QAAQ,yCAAwC;AACtE,OAAO,eAAc;AACrB,SAASC,eAAe,QAAQ,2CAA0C;AAE1E,SAASC,gBAAgB,EACvBC,UAAU,EACVC,MAAM,EACNC,IAAI,EAKL;IACC,IAAIA,KAAKC,SAAS,EAAE;QAClB,OACED,MAAMC,2BACJ,QAACD,KAAKC,SAAS;YAACH,YAAYA;YAAYC,QAAQA;YAAQC,MAAMA;WAAWA,KAAKE,GAAG;;;;;IAGvF;IAEA,IAAI,CAACF,KAAKG,cAAc,EAAE;QACxB,OAAO;IACT;IAEA,qBACE,QAACR;QAAcI,QAAQA;QAAQC,MAAMA;kBACnC,cAAA,QAACA,KAAKG,cAAc;;;;;OAD0BH,KAAKE,GAAG;;;;;AAI5D;AAEA,SAASE,sBAAsB,EAC7BN,UAAU,EACVC,MAAM,EACNM,YAAY,EACZC,KAAK,EACLC,KAAK,EAON;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGjB;IACjB,MAAM,EACJkB,YAAY,EAAEC,sBAAsB,EAAEC,UAAU,EAAE,EACnD,GAAGjB;IAEJ,MAAM,CAACkB,eAAeC,iBAAiB,GAAGrB,MAAMsB,QAAQ,CAAqBC;IAC7E,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,MAAMsB,QAAQ,CAAuBC;IAE7EvB,MAAM0B,SAAS,CAAC;QACd,IAAIZ,OAAOa,SAAS,cAAcb,MAAMc,KAAK,CAACC,MAAM,IAAIf,MAAMH,cAAc,EAAE;YAC5Ec,gBAAgB,IAAMX,MAAMH,cAAc;QAC5C,OAAO;YACLc,gBAAgBF;QAClB;IACF,GAAG;QAACT;KAAM;IAEV,MAAMgB,iBAAiB9B,MAAM+B,WAAW,CACtC,CAAC,EAAEC,WAAW,EAAuC;QACnD,IAAI,CAACA,YAAYH,MAAM,EAAE;YACvB,IAAIf,OAAOa,SAAS,cAAcb,MAAMc,KAAK,CAACC,MAAM,IAAIf,MAAMH,cAAc,EAAE;gBAC5Ec,gBAAgB,IAAMX,MAAMH,cAAc;gBAC1CU,iBAAiBE;YACnB,OAAO;gBACLE,gBAAgBF;gBAChBF,iBAAiBE;YACnB;YACA;QACF;QACA,MAAMf,OAAOwB,WAAW,CAAC,EAAE;QAE3B,IAAIC,QAAQzB,KAAKE,GAAG;QACpB,IAAIF,KAAKyB,KAAK,EAAE;YACdA,QACE,OAAOzB,KAAKyB,KAAK,KAAK,aAClBzB,KAAKyB,KAAK,CAAC;gBAAEf;gBAAwBF;gBAAMG;YAAW,KACtDX,KAAKyB,KAAK;QAClB;QACA,mCAAmC;QACnC,IAAIA,MAAMJ,MAAM,GAAG,IAAI;YACrBI,QAAQA,MAAMC,SAAS,CAAC,GAAG,MAAM;QACnC;QACA,IAAIF,YAAYH,MAAM,KAAK,GAAG;YAC5BR,iBAAiBY;YACjBR,gBAAgB,IAAMjB,KAAKG,cAAc;QAC3C,OAAO;YACLU,iBACEL,KAAKmB,CAAC,CAAC,sCAAsC;gBAAEC,OAAOJ,YAAYH,MAAM;YAAC;YAE3E,IAAIf,OAAOa,SAAS,cAAcb,MAAMc,KAAK,CAACC,MAAM,IAAIf,MAAMH,cAAc,EAAE;gBAC5Ec,gBAAgB,IAAMX,MAAMH,cAAc;YAC5C,OAAO;gBACLc,gBAAgBF;YAClB;QACF;IACF,GACA;QAACT;QAAOE;QAAME;QAAwBC;KAAW;IAGnD,qBACE,QAACkB;QACCC,WAAW,CAAC,0CAA0C,EAAExB,MAAMJ,GAAG,EAAE;QACnE6B,0BAAwBzB,MAAMJ,GAAG;;YAGhCI,MAAMa,IAAI,KAAK,cAAcb,MAAMc,KAAK,CAACC,MAAM,GAC9CL,6BACE,QAACpB;gBACCE,YAAYA;gBACZC,QAAQA;gBACRO,OAAOA;gBACP0B,MAAMhB;gBACNiB,0BAA0B;oBAAC;iBAAgC;gBAC3DR,OAAOb;gBACPsB,gBAAgB5B,MAAM4B,cAAc,IAAI;gBACxCZ,gBAAgBA;;;;;qCAGlB,QAAC1B;gBACCE,YAAYA;gBACZC,QAAQA;gBACRO,OAAOA;gBACP2B,0BAA0B;oBAAC;iBAAgC;gBAC3DR,OAAOb;gBACPsB,gBAAgB5B,MAAM4B,cAAc,IAAI;gBACxCZ,gBAAgBA;;;;;uBAGlB;YACHhB,MAAMa,IAAI,KAAK,aAAab,MAAMc,KAAK,CAACC,MAAM,GAC3Cf,MAAMc,KAAK,CAACe,GAAG,CAAC,CAACnC;gBACf,qBACE,QAACH;oBAAgBC,YAAYA;oBAAYC,QAAQA;oBAAQC,MAAMA;mBAAWA,KAAKE,GAAG;;;;;YAEtF,KACA;YACHK,QAAQF,aAAa+B,QAAQ,CAACC,YAAY,EAAEC,OAAOjB,SAAS,mBAAK,QAACQ;gBAAIC,WAAU;;;;;;;OAjC5ExB,MAAMJ,GAAG;;;;;AAoCpB;AAEA,SAASqC,aAAa,EACpBzC,UAAU,EACV0C,WAAW,EACXzC,MAAM,EACNM,YAAY,EACZoC,sBAAsB,EAOvB;IACC,MAAMC,oBAAoBlD,MAAMmD,MAAM,CAAiB;IACvD,MAAMC,aAAaxD;IAEnB,MAAM,EAAEyD,CAAC,EAAE,GAAGxD;IAEd,qCAAqC;IACrC,MAAMyD,oBAAoBrD,QAAQ;QAChC,IAAI,CAACgD,0BAA0BD,aAAaO,gCAAgC;YAC1E,OAAO;QACT;QAEA,MAAMC,mBAAmBP,uBAAuBQ,kBAAkB,CAACC,OAAO;QAC1E,IAAIC,UAAUH,iBAAiBI,sBAAsB;QACrD,MAAOD,QAAS;YACd,IAAIA,QAAQE,SAAS,CAACC,QAAQ,CAAC,kBAAkB;gBAC/C,OAAOH;YACT;YACAA,UAAUA,QAAQC,sBAAsB;QAC1C;QACA,OAAO;IACT,GAAG;QAACZ,aAAaO;QAAgCN;KAAuB;IAExEnD,mBACE;QACE,IAAI,CAACwD,mBAAmB;YACtB,iHAAiH;YACjH;QACF;QACA,MAAMS,qBAAqBb,kBAAkBQ,OAAO;QACpD,IAAI,CAACK,oBAAoB;YACvB;QACF;QAEA,MAAMC,cAAcD,mBAAmBE,qBAAqB;QAC5D,MAAMC,aAAaZ,kBAAkBW,qBAAqB;QAE1D,6CAA6C;QAC7C,MAAME,cAAc,CAClBH,CAAAA,YAAYI,MAAM,GAAGF,WAAWG,GAAG,IAAIL,YAAYK,GAAG,GAAGH,WAAWE,MAAM,AAAD;QAG3E,IAAID,aAAa;YACfJ,mBAAmBF,SAAS,CAACS,MAAM,CAAC;YACpCP,mBAAmBF,SAAS,CAACU,GAAG,CAAC,iBAAiB;YAClDjB,kBAAkBO,SAAS,CAACS,MAAM,CAAC;YACnChB,kBAAkBO,SAAS,CAACU,GAAG,CAAC,iBAAiB;QACnD,OAAO;YACL,IAAI,CAACR,mBAAmBF,SAAS,CAACC,QAAQ,CAAC,+BAA+B;gBACxE;YACF;YACAC,mBAAmBF,SAAS,CAACS,MAAM,CAAC;YACpCP,mBAAmBF,SAAS,CAACU,GAAG,CAAC;YACjCjB,kBAAkBO,SAAS,CAACS,MAAM,CAAC;YACnChB,kBAAkBO,SAAS,CAACU,GAAG,CAAC;QAClC;IACF,GACA,IACA;QAACrB;QAAmBI;QAAmBD;KAAE;IAG3C,qBACE,QAAChB;QACCC,WAAU;QACVkC,SAAS,CAACC;YACR,4GAA4G;YAC5G,2EAA2E;YAC3EA,MAAMC,eAAe;QACvB;QACAC,KAAKzB;kBAEJE,4BACC,QAACpD,MAAM4E,QAAQ;sBACZ/D,cAAc+B,YACb/B,aAAa+B,QAAQ,EAAEC,cAAcC,OAAOH,IAAI,CAAC7B,OAAO+D;gBACtD,qBACE,QAACjE;oBACCN,YAAYA;oBACZC,QAAQA;oBACRM,cAAcA;oBACdC,OAAOA;oBACPC,OAAO8D;mBACF/D,MAAMJ,GAAG;;;;;YAGpB;;;;;;;;;;;AAKZ;AAEA,MAAMoE,kCAAkC,CACtCC;IAEA,IAAIA,oBAAoBC,YAAY,EAAEnE,cAAc;QAClD,IAAIkE,oBAAoBC,YAAY,EAAEnE,aAAaoE,mBAAmBC,IAAI,iBAAiB;YACzF,OAAOH,oBAAoBC,YAAY;QACzC,OAAO;YACL,IAAID,oBAAoBC,YAAY,EAAE;gBACpC,OAAOF,gCAAgCC,oBAAoBC,YAAY;YACzE;QACF;IACF;IACA,OAAO;AACT;AAEA,OAAO,MAAMG,qBAAgE,CAAC,EAAEnC,WAAW,EAAE;IAC3F,MAAM,CAACoC,cAAc,GAAGzF;IACxB,MAAMoF,sBAAsB7E;IAC5B,MAAMkD,aAAaxD;IACnB,IAAI,CAACwD,YAAY;QACf,OAAO;IACT;IAEA,MAAM,EAAEvC,cAAcwE,mBAAmB,EAAE,GAAGN;IAE9C,MAAMxE,SAASyC,YAAYsC,oBAAoB,GAC3CP,oBAAoBQ,aAAa,EAAEhF,UAAU6E,gBAC7CA;IAEJ,MAAMvE,eAAemC,YAAYsC,oBAAoB,GACjDP,oBAAoBQ,aAAa,EAAE1E,gBAAgBwE,sBACnDA;IAEJ,MAAMpC,yBAAyB6B,gCAAgCC;IAE/D,IAAI/B,aAAaO,gCAAgC;QAC/C,IAAIN,wBAAwB;YAC1B,OAAO;QACT;IACF;IAEA,IAAI,CAACpC,cAAc+B,UAAUC,cAAcC,QAAQjB,QAAQ;QACzD,OAAO;IACT;IAEA,qBACE,QAACkB;QACCzC,YAAYkF,SAASC,IAAI;QACzBlF,QAAQA;QACRM,cAAcA;QACdoC,wBAAwBA;;;;;;AAG9B,EAAC"}

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

@@ -0,0 +1,113 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  html[data-theme='dark'] {
+    .fixed-toolbar {
+      &__dropdown-items {
+        background: var(--theme-elevation-0);
+        transition: background 0.2s cubic-bezier(0, 0.2, 0.2, 1);
+
+        .toolbar-popup__dropdown-item {
+          color: var(--theme-elevation-900);
+
+          &:hover:not([disabled]),
+          &.active {
+            background: var(--theme-elevation-100);
+          }
+
+          .icon {
+            color: var(--theme-elevation-600);
+          }
+        }
+      }
+
+      .toolbar-popup {
+        &__dropdown {
+          transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+
+          &:hover:not([disabled]) {
+            background: var(--theme-elevation-100);
+          }
+
+          &-caret:after {
+            filter: invert(1);
+          }
+
+          &-label {
+            color: var(--theme-elevation-750);
+          }
+        }
+      }
+    }
+  }
+
+  .fixed-toolbar.fixed-toolbar--hide {
+    visibility: hidden; // Still needs to take up space so content does not jump, thus we cannot use display: none
+    // make sure you cant interact with it
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .fixed-toolbar {
+    @include blur-bg(var(--theme-elevation-0));
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: calc(var(--base) / 4);
+    vertical-align: middle;
+    position: sticky;
+    z-index: 2;
+    top: var(--doc-controls-height);
+    border: $style-stroke-width-s solid var(--theme-elevation-150);
+    // Make it so border itself is round too and not cut off at the corners
+    border-collapse: unset;
+    transform: translateY(1px); // aligns with top bar pixel line when stuck
+    min-height: 40px; // Reduces shift when saving document if toolbar items did not load yet
+
+    &__group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 2px;
+      z-index: 1;
+
+      .icon {
+        min-width: 20px;
+        height: 20px;
+        color: var(--theme-elevation-600);
+      }
+
+      .divider {
+        width: 1px;
+        height: 15px;
+        background-color: var(--theme-elevation-100);
+        margin: 0 6.25px 0 4.25px; // substract 2px from the gap
+      }
+    }
+
+    + .editor-container {
+      > .editor-scroller > .editor {
+        > .ContentEditable__root {
+          padding-top: calc(var(--base) * 1.25);
+        }
+      }
+
+      > .editor-scroller > .editor > div > .LexicalEditorTheme__placeholder {
+        top: calc(var(--base) * 1.25);
+      }
+    }
+  }
+
+  .rich-text-lexical--show-gutter {
+    .fixed-toolbar {
+      + .editor-container {
+        > .editor-scroller > .editor {
+          > .ContentEditable__root::before {
+            top: calc(var(--base) * 1.25) !important;
+            height: calc(100% - calc(var(--base) * 1.25) - 8px) !important;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,11 +1,13 @@
 'use client';
-
 import { createClientFeature } from '../../../../utilities/createClientFeature.js';
 import { FixedToolbarPlugin } from './Toolbar/index.js';
 export const FixedToolbarFeatureClient = createClientFeature({
-  plugins: [{
-    Component: FixedToolbarPlugin,
-    position: 'aboveContainer'
-  }]
+    plugins: [
+        {
+            Component: FixedToolbarPlugin,
+            position: 'aboveContainer'
+        }
+    ]
 });
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["createClientFeature","FixedToolbarPlugin","FixedToolbarFeatureClient","plugins","Component","position"],"sources":["../../../../../src/features/toolbars/fixed/client/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FixedToolbarFeatureProps } from '../server/index.js'\n\nimport { createClientFeature } from '../../../../utilities/createClientFeature.js'\nimport { FixedToolbarPlugin } from './Toolbar/index.js'\n\nexport const FixedToolbarFeatureClient = createClientFeature<FixedToolbarFeatureProps>({\n  plugins: [\n    {\n      Component: FixedToolbarPlugin,\n      position: 'aboveContainer',\n    },\n  ],\n})\n"],"mappings":"AAAA;;AAIA,SAASA,mBAAmB,QAAQ;AACpC,SAASC,kBAAkB,QAAQ;AAEnC,OAAO,MAAMC,yBAAA,GAA4BF,mBAAA,CAA8C;EACrFG,OAAA,EAAS,CACP;IACEC,SAAA,EAAWH,kBAAA;IACXI,QAAA,EAAU;EACZ;AAEJ","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/toolbars/fixed/client/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FixedToolbarFeatureProps } from '../server/index.js'\n\nimport { createClientFeature } from '../../../../utilities/createClientFeature.js'\nimport { FixedToolbarPlugin } from './Toolbar/index.js'\n\nexport const FixedToolbarFeatureClient = createClientFeature<FixedToolbarFeatureProps>({\n  plugins: [\n    {\n      Component: FixedToolbarPlugin,\n      position: 'aboveContainer',\n    },\n  ],\n})\n"],"names":["createClientFeature","FixedToolbarPlugin","FixedToolbarFeatureClient","plugins","Component","position"],"mappings":"AAAA;AAIA,SAASA,mBAAmB,QAAQ,+CAA8C;AAClF,SAASC,kBAAkB,QAAQ,qBAAoB;AAEvD,OAAO,MAAMC,4BAA4BF,oBAA8C;IACrFG,SAAS;QACP;YACEC,WAAWH;YACXI,UAAU;QACZ;KACD;AACH,GAAE"}

package/dist/features/toolbars/fixed/server/index.js

@@ -1,19 +1,35 @@
 import { createServerFeature } from '../../../../utilities/createServerFeature.js';
-export const FixedToolbarFeature = createServerFeature({
-  feature: ({
-    props
-  }) => {
-    const sanitizedProps = {
-      applyToFocusedEditor: props?.applyToFocusedEditor === undefined ? false : props.applyToFocusedEditor,
-      customGroups: props?.customGroups,
-      disableIfParentHasFixedToolbar: props?.disableIfParentHasFixedToolbar === undefined ? false : props.disableIfParentHasFixedToolbar
-    };
-    return {
-      ClientFeature: '@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient',
-      clientFeatureProps: sanitizedProps,
-      sanitizedServerFeatureProps: sanitizedProps
-    };
-  },
-  key: 'toolbarFixed'
+/**
+   * @default false
+   *
+   * If this is enabled, the toolbar will apply to the focused editor, not the editor with the FixedToolbarFeature.
+   *
+   * This means that if the editor has a child-editor, and the child-editor is focused, the toolbar will apply to the child-editor, not the parent editor with this feature added.
+   */ /**
+   * Custom configurations for toolbar groups
+   * Key is the group key (e.g. 'format', 'indent', 'align')
+   * Value is a partial ToolbarGroup object that will be merged with the default configuration
+   *
+   * @note Props passed via customGroups must be serializable. Avoid using functions or dynamic components.
+   * ChildComponent, if provided, must be a serializable server component.
+   */ /**
+   * @default false
+   *
+   * If there is a parent editor with a fixed toolbar, this will disable the toolbar for this editor.
+   */ export const FixedToolbarFeature = createServerFeature({
+    feature: ({ props })=>{
+        const sanitizedProps = {
+            applyToFocusedEditor: props?.applyToFocusedEditor === undefined ? false : props.applyToFocusedEditor,
+            customGroups: props?.customGroups,
+            disableIfParentHasFixedToolbar: props?.disableIfParentHasFixedToolbar === undefined ? false : props.disableIfParentHasFixedToolbar
+        };
+        return {
+            ClientFeature: '@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient',
+            clientFeatureProps: sanitizedProps,
+            sanitizedServerFeatureProps: sanitizedProps
+        };
+    },
+    key: 'toolbarFixed'
 });
+
 //# sourceMappingURL=index.js.map

package/dist/features/toolbars/fixed/server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["createServerFeature","FixedToolbarFeature","feature","props","sanitizedProps","applyToFocusedEditor","undefined","customGroups","disableIfParentHasFixedToolbar","ClientFeature","clientFeatureProps","sanitizedServerFeatureProps","key"],"sources":["../../../../../src/features/toolbars/fixed/server/index.ts"],"sourcesContent":["import type { CustomGroups } from '../../types.js'\n\nimport { createServerFeature } from '../../../../utilities/createServerFeature.js'\n\nexport type FixedToolbarFeatureProps = {\n  /**\n   * @default false\n   *\n   * If this is enabled, the toolbar will apply to the focused editor, not the editor with the FixedToolbarFeature.\n   *\n   * This means that if the editor has a child-editor, and the child-editor is focused, the toolbar will apply to the child-editor, not the parent editor with this feature added.\n   */\n  applyToFocusedEditor?: boolean\n  /**\n   * Custom configurations for toolbar groups\n   * Key is the group key (e.g. 'format', 'indent', 'align')\n   * Value is a partial ToolbarGroup object that will be merged with the default configuration\n   *\n   * @note Props passed via customGroups must be serializable. Avoid using functions or dynamic components.\n   * ChildComponent, if provided, must be a serializable server component.\n   */\n  customGroups?: CustomGroups\n  /**\n   * @default false\n   *\n   * If there is a parent editor with a fixed toolbar, this will disable the toolbar for this editor.\n   */\n  disableIfParentHasFixedToolbar?: boolean\n}\n\nexport const FixedToolbarFeature = createServerFeature<\n  FixedToolbarFeatureProps,\n  FixedToolbarFeatureProps,\n  FixedToolbarFeatureProps\n>({\n  feature: ({ props }) => {\n    const sanitizedProps: FixedToolbarFeatureProps = {\n      applyToFocusedEditor:\n        props?.applyToFocusedEditor === undefined ? false : props.applyToFocusedEditor,\n      customGroups: props?.customGroups,\n      disableIfParentHasFixedToolbar:\n        props?.disableIfParentHasFixedToolbar === undefined\n          ? false\n          : props.disableIfParentHasFixedToolbar,\n    }\n\n    return {\n      ClientFeature: '@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient',\n      clientFeatureProps: sanitizedProps,\n      sanitizedServerFeatureProps: sanitizedProps,\n    }\n  },\n  key: 'toolbarFixed',\n})\n"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ;AA4BpC,OAAO,MAAMC,mBAAA,GAAsBD,mBAAA,CAIjC;EACAE,OAAA,EAASA,CAAC;IAAEC;EAAK,CAAE;IACjB,MAAMC,cAAA,GAA2C;MAC/CC,oBAAA,EACEF,KAAA,EAAOE,oBAAA,KAAyBC,SAAA,GAAY,QAAQH,KAAA,CAAME,oBAAoB;MAChFE,YAAA,EAAcJ,KAAA,EAAOI,YAAA;MACrBC,8BAAA,EACEL,KAAA,EAAOK,8BAAA,KAAmCF,SAAA,GACtC,QACAH,KAAA,CAAMK;IACd;IAEA,OAAO;MACLC,aAAA,EAAe;MACfC,kBAAA,EAAoBN,cAAA;MACpBO,2BAAA,EAA6BP;IAC/B;EACF;EACAQ,GAAA,EAAK;AACP","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/toolbars/fixed/server/index.ts"],"sourcesContent":["import type { CustomGroups } from '../../types.js'\n\nimport { createServerFeature } from '../../../../utilities/createServerFeature.js'\n\nexport type FixedToolbarFeatureProps = {\n  /**\n   * @default false\n   *\n   * If this is enabled, the toolbar will apply to the focused editor, not the editor with the FixedToolbarFeature.\n   *\n   * This means that if the editor has a child-editor, and the child-editor is focused, the toolbar will apply to the child-editor, not the parent editor with this feature added.\n   */\n  applyToFocusedEditor?: boolean\n  /**\n   * Custom configurations for toolbar groups\n   * Key is the group key (e.g. 'format', 'indent', 'align')\n   * Value is a partial ToolbarGroup object that will be merged with the default configuration\n   *\n   * @note Props passed via customGroups must be serializable. Avoid using functions or dynamic components.\n   * ChildComponent, if provided, must be a serializable server component.\n   */\n  customGroups?: CustomGroups\n  /**\n   * @default false\n   *\n   * If there is a parent editor with a fixed toolbar, this will disable the toolbar for this editor.\n   */\n  disableIfParentHasFixedToolbar?: boolean\n}\n\nexport const FixedToolbarFeature = createServerFeature<\n  FixedToolbarFeatureProps,\n  FixedToolbarFeatureProps,\n  FixedToolbarFeatureProps\n>({\n  feature: ({ props }) => {\n    const sanitizedProps: FixedToolbarFeatureProps = {\n      applyToFocusedEditor:\n        props?.applyToFocusedEditor === undefined ? false : props.applyToFocusedEditor,\n      customGroups: props?.customGroups,\n      disableIfParentHasFixedToolbar:\n        props?.disableIfParentHasFixedToolbar === undefined\n          ? false\n          : props.disableIfParentHasFixedToolbar,\n    }\n\n    return {\n      ClientFeature: '@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient',\n      clientFeatureProps: sanitizedProps,\n      sanitizedServerFeatureProps: sanitizedProps,\n    }\n  },\n  key: 'toolbarFixed',\n})\n"],"names":["createServerFeature","FixedToolbarFeature","feature","props","sanitizedProps","applyToFocusedEditor","undefined","customGroups","disableIfParentHasFixedToolbar","ClientFeature","clientFeatureProps","sanitizedServerFeatureProps","key"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,+CAA8C;AAGhF;;;;;;GAMC,GAED;;;;;;;GAOC,GAED;;;;GAIC,GAIH,OAAO,MAAMC,sBAAsBD,oBAIjC;IACAE,SAAS,CAAC,EAAEC,KAAK,EAAE;QACjB,MAAMC,iBAA2C;YAC/CC,sBACEF,OAAOE,yBAAyBC,YAAY,QAAQH,MAAME,oBAAoB;YAChFE,cAAcJ,OAAOI;YACrBC,gCACEL,OAAOK,mCAAmCF,YACtC,QACAH,MAAMK,8BAA8B;QAC5C;QAEA,OAAO;YACLC,eAAe;YACfC,oBAAoBN;YACpBO,6BAA6BP;QAC/B;IACF;IACAQ,KAAK;AACP,GAAE"}