@payloadcms/richtext-lexical 3.20.0 → 3.21.0-canary.0a1cc6a

package/dist/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.js

@@ -182,7 +182,7 @@ export function LinkEditor({
       setLinkLabel(null);
     }
     return true;
-  }, [editor, setNotLink, config.routes.admin, config.routes.api, config.collections, config.serverURL, t, i18n, locale?.code, anchorElem]);
+  }, [editor, setNotLink, config.routes.admin, config.routes.api, config.serverURL, getEntityConfig, t, i18n, locale?.code, anchorElem]);
   useEffect(() => {
     return mergeRegister(editor.registerCommand(TOGGLE_LINK_WITH_MODAL_COMMAND, payload => {
       editor.dispatchCommand(TOGGLE_LINK_COMMAND, payload);

package/dist/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useLexicalComposerContext","$findMatchingParent","mergeRegister","getTranslation","CloseMenuIcon","EditIcon","ExternalLinkIcon","formatDrawerSlug","useConfig","useEditDepth","useLocale","useTranslation","requests","$getSelection","$isLineBreakNode","$isRangeSelection","COMMAND_PRIORITY_HIGH","COMMAND_PRIORITY_LOW","getDOMSelection","KEY_ESCAPE_COMMAND","SELECTION_CHANGE_COMMAND","React","useCallback","useEffect","useRef","useState","useEditorConfigContext","getSelectedNode","setFloatingElemPositionForLinkEditor","FieldsDrawer","useLexicalDrawer","$isAutoLinkNode","$createLinkNode","$isLinkNode","TOGGLE_LINK_COMMAND","TOGGLE_LINK_WITH_MODAL_COMMAND","preventDefault","event","LinkEditor","anchorElem","editor","linkNode","setLinkNode","editorRef","linkUrl","setLinkUrl","linkLabel","setLinkLabel","fieldProps","schemaPath","uuid","config","getEntityConfig","i18n","t","stateData","setStateData","editDepth","isLink","setIsLink","selectedNodes","setSelectedNodes","locale","isAutoLink","setIsAutoLink","drawerSlug","slug","depth","toggleDrawer","setNotLink","current","style","opacity","transform","undefined","$updateLinkEditor","selection","selectedNodeDomRect","focusNode","getElementByKey","getKey","getBoundingClientRect","focusLinkParent","badNode","getNodes","filter","node","find","is","fields","getFields","data","id","getID","text","getTextContent","linkType","url","routes","admin","doc","relationTo","value","relatedField","collectionSlug","label","String","collection","Error","loadingLabel","labels","singular","replace","get","serverURL","api","headers","language","params","code","then","res","ok","status","json","useAsTitle","title","catch","editorElem","nativeSelection","_window","activeElement","document","rootElement","getRootElement","contains","anchorNode","getRangeAt","y","className","collections","registerCommand","payload","dispatchCommand","scrollerElem","parentElement","update","getEditorState","read","window","addEventListener","removeEventListener","registerUpdateListener","editorState","_jsxs","Fragment","_jsx","ref","length","href","rel","target","__fields","newTab","_Fragment","isEditable","onClick","onMouseDown","tabIndex","type","drawerTitle","featureKey","handleDrawerSubmit","newLinkPayload","bareLinkFields","linkParent","getParent","schemaPathSuffix"],"sources":["../../../../../../../src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementNode, LexicalNode } from 'lexical'\nimport type { Data, FormState } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  CloseMenuIcon,\n  EditIcon,\n  ExternalLinkIcon,\n  formatDrawerSlug,\n  useConfig,\n  useEditDepth,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { requests } from '@payloadcms/ui/shared'\nimport {\n  $getSelection,\n  $isLineBreakNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_HIGH,\n  COMMAND_PRIORITY_LOW,\n  getDOMSelection,\n  KEY_ESCAPE_COMMAND,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { LinkNode } from '../../../../nodes/LinkNode.js'\nimport type { LinkFields } from '../../../../nodes/types.js'\nimport type { LinkPayload } from '../types.js'\n\nimport { useEditorConfigContext } from '../../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { getSelectedNode } from '../../../../../../lexical/utils/getSelectedNode.js'\nimport { setFloatingElemPositionForLinkEditor } from '../../../../../../lexical/utils/setFloatingElemPositionForLinkEditor.js'\nimport { FieldsDrawer } from '../../../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDrawer } from '../../../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { $isAutoLinkNode } from '../../../../nodes/AutoLinkNode.js'\nimport { $createLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../../nodes/LinkNode.js'\nimport { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js'\n\nfunction preventDefault(\n  event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>,\n): void {\n  event.preventDefault()\n}\n\nexport function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.ReactNode {\n  const [editor] = useLexicalComposerContext()\n  // TO-DO: There are several states that should not be state, because they\n  // are derived from linkNode (linkUrl, linkLabel, stateData, isLink, isAutoLink...)\n  const [linkNode, setLinkNode] = useState<LinkNode>()\n\n  const editorRef = useRef<HTMLDivElement | null>(null)\n  const [linkUrl, setLinkUrl] = useState<null | string>(null)\n  const [linkLabel, setLinkLabel] = useState<null | string>(null)\n\n  const {\n    fieldProps: { schemaPath },\n    uuid,\n  } = useEditorConfigContext()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const { i18n, t } = useTranslation<object, 'lexical:link:loadingWithEllipsis'>()\n\n  const [stateData, setStateData] = useState<\n    ({ id?: string; text: string } & LinkFields) | undefined\n  >()\n\n  const editDepth = useEditDepth()\n  const [isLink, setIsLink] = useState(false)\n  const [selectedNodes, setSelectedNodes] = useState<LexicalNode[]>([])\n  const locale = useLocale()\n\n  const [isAutoLink, setIsAutoLink] = useState(false)\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-rich-text-link-` + uuid,\n    depth: editDepth,\n  })\n\n  const { toggleDrawer } = useLexicalDrawer(drawerSlug)\n\n  const setNotLink = useCallback(() => {\n    setIsLink(false)\n    if (editorRef && editorRef.current) {\n      editorRef.current.style.opacity = '0'\n      editorRef.current.style.transform = 'translate(-10000px, -10000px)'\n    }\n    setIsAutoLink(false)\n    setLinkUrl(null)\n    setLinkLabel(null)\n    setSelectedNodes([])\n    setStateData(undefined)\n  }, [setIsLink, setLinkUrl, setLinkLabel, setSelectedNodes])\n\n  const $updateLinkEditor = useCallback(() => {\n    const selection = $getSelection()\n    let selectedNodeDomRect: DOMRect | undefined\n\n    if (!$isRangeSelection(selection) || !selection) {\n      void setNotLink()\n      return\n    }\n\n    // Handle the data displayed in the floating link editor & drawer when you click on a link node\n\n    const focusNode = getSelectedNode(selection)\n    selectedNodeDomRect = editor.getElementByKey(focusNode.getKey())?.getBoundingClientRect()\n    const focusLinkParent = $findMatchingParent(focusNode, $isLinkNode)\n\n    // Prevent link modal from showing if selection spans further than the link: https://github.com/facebook/lexical/issues/4064\n    const badNode = selection\n      .getNodes()\n      .filter((node) => !$isLineBreakNode(node))\n      .find((node) => {\n        const linkNode = $findMatchingParent(node, $isLinkNode)\n        return (\n          (focusLinkParent && !focusLinkParent.is(linkNode)) ||\n          (linkNode && !linkNode.is(focusLinkParent))\n        )\n      })\n\n    if (focusLinkParent == null || badNode) {\n      setNotLink()\n      return\n    }\n    setLinkNode(focusLinkParent)\n\n    const fields = focusLinkParent.getFields()\n\n    // Initial state:\n    const data: { text: string } & LinkFields = {\n      ...fields,\n      id: focusLinkParent.getID(),\n      text: focusLinkParent.getTextContent(),\n    }\n\n    if (fields?.linkType === 'custom') {\n      setLinkUrl(fields?.url ?? null)\n      setLinkLabel(null)\n    } else {\n      // internal link\n      setLinkUrl(\n        `${config.routes.admin === '/' ? '' : config.routes.admin}/collections/${fields?.doc?.relationTo}/${\n          fields?.doc?.value\n        }`,\n      )\n\n      const relatedField = fields?.doc?.relationTo\n        ? getEntityConfig({ collectionSlug: fields?.doc?.relationTo })\n        : undefined\n      if (!relatedField) {\n        // Usually happens if the user removed all default fields. In this case, we let them specify the label or do not display the label at all.\n        // label could be a virtual field the user added. This is useful if they want to use the link feature for things other than links.\n        setLinkLabel(fields?.label ? String(fields?.label) : null)\n        setLinkUrl(fields?.url ? String(fields?.url) : null)\n      } else {\n        const id = typeof fields.doc?.value === 'object' ? fields.doc.value.id : fields.doc?.value\n        const collection = fields.doc?.relationTo\n        if (!id || !collection) {\n          throw new Error(`Focus link parent is missing doc.value or doc.relationTo`)\n        }\n\n        const loadingLabel = t('fields:linkedTo', {\n          label: `${getTranslation(relatedField.labels.singular, i18n)} - ${t('lexical:link:loadingWithEllipsis', i18n)}`,\n        }).replace(/<[^>]*>?/g, '')\n        setLinkLabel(loadingLabel)\n\n        requests\n          .get(`${config.serverURL}${config.routes.api}/${collection}/${id}`, {\n            headers: {\n              'Accept-Language': i18n.language,\n            },\n            params: {\n              depth: 0,\n              locale: locale?.code,\n            },\n          })\n          .then(async (res) => {\n            if (!res.ok) {\n              throw new Error(`HTTP error! Status: ${res.status}`)\n            }\n            const data = await res.json()\n            const useAsTitle = relatedField?.admin?.useAsTitle || 'id'\n            const title = data[useAsTitle]\n            const label = t('fields:linkedTo', {\n              label: `${getTranslation(relatedField.labels.singular, i18n)} - ${title}`,\n            }).replace(/<[^>]*>?/g, '')\n            setLinkLabel(label)\n          })\n          .catch(() => {\n            const label = t('fields:linkedTo', {\n              label: `${getTranslation(relatedField.labels.singular, i18n)} - ${t('general:untitled', i18n)} - ID: ${id}`,\n            }).replace(/<[^>]*>?/g, '')\n            setLinkLabel(label)\n          })\n      }\n    }\n\n    setStateData(data)\n    setIsLink(true)\n    setSelectedNodes(selection ? selection?.getNodes() : [])\n\n    if ($isAutoLinkNode(focusLinkParent)) {\n      setIsAutoLink(true)\n    } else {\n      setIsAutoLink(false)\n    }\n\n    const editorElem = editorRef.current\n    const nativeSelection = getDOMSelection(editor._window)\n    const { activeElement } = document\n\n    if (editorElem === null) {\n      return\n    }\n\n    const rootElement = editor.getRootElement()\n\n    if (\n      nativeSelection !== null &&\n      rootElement !== null &&\n      rootElement.contains(nativeSelection.anchorNode)\n    ) {\n      if (!selectedNodeDomRect) {\n        // Get the DOM rect of the selected node using the native selection. This sometimes produces the wrong\n        // result, which is why we use lexical's selection preferably.\n        selectedNodeDomRect = nativeSelection.getRangeAt(0).getBoundingClientRect()\n      }\n\n      if (selectedNodeDomRect != null) {\n        selectedNodeDomRect.y += 40\n        setFloatingElemPositionForLinkEditor(selectedNodeDomRect, editorElem, anchorElem)\n      }\n    } else if (activeElement == null || activeElement.className !== 'link-input') {\n      if (rootElement !== null) {\n        setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem)\n      }\n      setLinkUrl(null)\n      setLinkLabel(null)\n    }\n\n    return true\n  }, [\n    editor,\n    setNotLink,\n    config.routes.admin,\n    config.routes.api,\n    config.collections,\n    config.serverURL,\n    t,\n    i18n,\n    locale?.code,\n    anchorElem,\n  ])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand(\n        TOGGLE_LINK_WITH_MODAL_COMMAND,\n        (payload: LinkPayload) => {\n          editor.dispatchCommand(TOGGLE_LINK_COMMAND, payload)\n\n          // Now, open the modal\n          $updateLinkEditor()\n          toggleDrawer()\n\n          return true\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor, $updateLinkEditor, toggleDrawer, drawerSlug])\n\n  useEffect(() => {\n    const scrollerElem = anchorElem.parentElement\n\n    const update = (): void => {\n      editor.getEditorState().read(() => {\n        void $updateLinkEditor()\n      })\n    }\n\n    window.addEventListener('resize', update)\n\n    if (scrollerElem != null) {\n      scrollerElem.addEventListener('scroll', update)\n    }\n\n    return () => {\n      window.removeEventListener('resize', update)\n\n      if (scrollerElem != null) {\n        scrollerElem.removeEventListener('scroll', update)\n      }\n    }\n  }, [anchorElem.parentElement, editor, $updateLinkEditor])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          void $updateLinkEditor()\n        })\n      }),\n\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          void $updateLinkEditor()\n          return true\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      editor.registerCommand(\n        KEY_ESCAPE_COMMAND,\n        () => {\n          if (isLink) {\n            setNotLink()\n\n            return true\n          }\n          return false\n        },\n        COMMAND_PRIORITY_HIGH,\n      ),\n    )\n  }, [editor, $updateLinkEditor, isLink, setNotLink])\n\n  useEffect(() => {\n    editor.getEditorState().read(() => {\n      void $updateLinkEditor()\n    })\n  }, [editor, $updateLinkEditor])\n\n  return (\n    <React.Fragment>\n      <div className=\"link-editor\" ref={editorRef}>\n        <div className=\"link-input\">\n          {linkUrl && linkUrl.length > 0 ? (\n            <a href={linkUrl} rel=\"noopener noreferrer\" target=\"_blank\">\n              {linkNode?.__fields.newTab ? <ExternalLinkIcon /> : null}\n              {linkLabel != null && linkLabel.length > 0 ? linkLabel : linkUrl}\n            </a>\n          ) : linkLabel != null && linkLabel.length > 0 ? (\n            <>\n              {linkNode?.__fields.newTab ? <ExternalLinkIcon /> : null}\n              <span className=\"link-input__label-pure\">{linkLabel}</span>\n            </>\n          ) : null}\n\n          {editor.isEditable() && (\n            <React.Fragment>\n              <button\n                aria-label=\"Edit link\"\n                className=\"link-edit\"\n                onClick={(event) => {\n                  event.preventDefault()\n                  toggleDrawer()\n                }}\n                onMouseDown={preventDefault}\n                tabIndex={0}\n                type=\"button\"\n              >\n                <EditIcon />\n              </button>\n              {!isAutoLink && (\n                <button\n                  aria-label=\"Remove link\"\n                  className=\"link-trash\"\n                  onClick={() => {\n                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n                  }}\n                  onMouseDown={preventDefault}\n                  tabIndex={0}\n                  type=\"button\"\n                >\n                  <CloseMenuIcon />\n                </button>\n              )}\n            </React.Fragment>\n          )}\n        </div>\n      </div>\n      <FieldsDrawer\n        className=\"lexical-link-edit-drawer\"\n        data={stateData}\n        drawerSlug={drawerSlug}\n        drawerTitle={t('fields:editLink')}\n        featureKey=\"link\"\n        handleDrawerSubmit={(fields: FormState, data: Data) => {\n          const newLinkPayload = data as { text: string } & LinkFields\n\n          const bareLinkFields: LinkFields = {\n            ...newLinkPayload,\n          }\n          delete bareLinkFields.text\n\n          // See: https://github.com/facebook/lexical/pull/5536. This updates autolink nodes to link nodes whenever a change was made (which is good!).\n          editor.update(() => {\n            const selection = $getSelection()\n            let linkParent: ElementNode | null = null\n            if ($isRangeSelection(selection)) {\n              linkParent = getSelectedNode(selection).getParent()\n            } else {\n              if (selectedNodes.length) {\n                linkParent = selectedNodes[0].getParent()\n              }\n            }\n\n            if (linkParent && $isAutoLinkNode(linkParent)) {\n              const linkNode = $createLinkNode({\n                fields: bareLinkFields,\n              })\n              linkParent.replace(linkNode, true)\n            }\n          })\n\n          // Needs to happen AFTER a potential auto link => link node conversion, as otherwise, the updated text to display may be lost due to\n          // it being applied to the auto link node instead of the link node.\n          editor.dispatchCommand(TOGGLE_LINK_COMMAND, {\n            fields: bareLinkFields,\n            selectedNodes,\n            text: newLinkPayload.text,\n          })\n        }}\n        schemaPath={schemaPath}\n        schemaPathSuffix=\"fields\"\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,yBAAyB,QAAQ;AAC1C,SAASC,mBAAmB,EAAEC,aAAa,QAAQ;AACnD,SAASC,cAAc,QAAQ;AAC/B,SACEC,aAAa,EACbC,QAAQ,EACRC,gBAAgB,EAChBC,gBAAgB,EAChBC,SAAS,EACTC,YAAY,EACZC,SAAS,EACTC,cAAc,QACT;AACP,SAASC,QAAQ,QAAQ;AACzB,SACEC,aAAa,EACbC,gBAAgB,EAChBC,iBAAiB,EACjBC,qBAAqB,EACrBC,oBAAoB,EACpBC,eAAe,EACfC,kBAAkB,EAClBC,wBAAwB,QACnB;AACP,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAMhE,SAASC,sBAAsB,QAAQ;AACvC,SAASC,eAAe,QAAQ;AAChC,SAASC,oCAAoC,QAAQ;AACrD,SAASC,YAAY,QAAQ;AAC7B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,eAAe,QAAQ;AAChC,SAASC,eAAe,EAAEC,WAAW,EAAEC,mBAAmB,QAAQ;AAClE,SAASC,8BAA8B,QAAQ;AAE/C,SAASC,eACPC,KAA4E;EAE5EA,KAAA,CAAMD,cAAc;AACtB;AAEA,OAAO,SAASE,WAAW;EAAEC;AAAU,CAA+B;EACpE,MAAM,CAACC,MAAA,CAAO,GAAGxC,yBAAA;EACjB;EACA;EACA,MAAM,CAACyC,QAAA,EAAUC,WAAA,CAAY,GAAGjB,QAAA;EAEhC,MAAMkB,SAAA,GAAYnB,MAAA,CAA8B;EAChD,MAAM,CAACoB,OAAA,EAASC,UAAA,CAAW,GAAGpB,QAAA,CAAwB;EACtD,MAAM,CAACqB,SAAA,EAAWC,YAAA,CAAa,GAAGtB,QAAA,CAAwB;EAE1D,MAAM;IACJuB,UAAA,EAAY;MAAEC;IAAU,CAAE;IAC1BC;EAAI,CACL,GAAGxB,sBAAA;EAEJ,MAAM;IAAEyB,MAAM;IAAEC;EAAe,CAAE,GAAG5C,SAAA;EAEpC,MAAM;IAAE6C,IAAI;IAAEC;EAAC,CAAE,GAAG3C,cAAA;EAEpB,MAAM,CAAC4C,SAAA,EAAWC,YAAA,CAAa,GAAG/B,QAAA;EAIlC,MAAMgC,SAAA,GAAYhD,YAAA;EAClB,MAAM,CAACiD,MAAA,EAAQC,SAAA,CAAU,GAAGlC,QAAA,CAAS;EACrC,MAAM,CAACmC,aAAA,EAAeC,gBAAA,CAAiB,GAAGpC,QAAA,CAAwB,EAAE;EACpE,MAAMqC,MAAA,GAASpD,SAAA;EAEf,MAAM,CAACqD,UAAA,EAAYC,aAAA,CAAc,GAAGvC,QAAA,CAAS;EAE7C,MAAMwC,UAAA,GAAa1D,gBAAA,CAAiB;IAClC2D,IAAA,EAAM,yBAAyB,GAAGhB,IAAA;IAClCiB,KAAA,EAAOV;EACT;EAEA,MAAM;IAAEW;EAAY,CAAE,GAAGtC,gBAAA,CAAiBmC,UAAA;EAE1C,MAAMI,UAAA,GAAa/C,WAAA,CAAY;IAC7BqC,SAAA,CAAU;IACV,IAAIhB,SAAA,IAAaA,SAAA,CAAU2B,OAAO,EAAE;MAClC3B,SAAA,CAAU2B,OAAO,CAACC,KAAK,CAACC,OAAO,GAAG;MAClC7B,SAAA,CAAU2B,OAAO,CAACC,KAAK,CAACE,SAAS,GAAG;IACtC;IACAT,aAAA,CAAc;IACdnB,UAAA,CAAW;IACXE,YAAA,CAAa;IACbc,gBAAA,CAAiB,EAAE;IACnBL,YAAA,CAAakB,SAAA;EACf,GAAG,CAACf,SAAA,EAAWd,UAAA,EAAYE,YAAA,EAAcc,gBAAA,CAAiB;EAE1D,MAAMc,iBAAA,GAAoBrD,WAAA,CAAY;IACpC,MAAMsD,SAAA,GAAY/D,aAAA;IAClB,IAAIgE,mBAAA;IAEJ,IAAI,CAAC9D,iBAAA,CAAkB6D,SAAA,KAAc,CAACA,SAAA,EAAW;MAC/C,KAAKP,UAAA;MACL;IACF;IAEA;IAEA,MAAMS,SAAA,GAAYnD,eAAA,CAAgBiD,SAAA;IAClCC,mBAAA,GAAsBrC,MAAA,CAAOuC,eAAe,CAACD,SAAA,CAAUE,MAAM,KAAKC,qBAAA;IAClE,MAAMC,eAAA,GAAkBjF,mBAAA,CAAoB6E,SAAA,EAAW7C,WAAA;IAEvD;IACA,MAAMkD,OAAA,GAAUP,SAAA,CACbQ,QAAQ,GACRC,MAAM,CAAEC,IAAA,IAAS,CAACxE,gBAAA,CAAiBwE,IAAA,GACnCC,IAAI,CAAED,MAAA;MACL,MAAM7C,UAAA,GAAWxC,mBAAA,CAAoBqF,MAAA,EAAMrD,WAAA;MAC3C,OACEiD,eAAC,IAAmB,CAACA,eAAA,CAAgBM,EAAE,CAAC/C,UAAA,KACvCA,UAAA,IAAY,CAACA,UAAA,CAAS+C,EAAE,CAACN,eAAA;IAE9B;IAEF,IAAIA,eAAA,IAAmB,QAAQC,OAAA,EAAS;MACtCd,UAAA;MACA;IACF;IACA3B,WAAA,CAAYwC,eAAA;IAEZ,MAAMO,MAAA,GAASP,eAAA,CAAgBQ,SAAS;IAExC;IACA,MAAMC,IAAA,GAAsC;MAC1C,GAAGF,MAAM;MACTG,EAAA,EAAIV,eAAA,CAAgBW,KAAK;MACzBC,IAAA,EAAMZ,eAAA,CAAgBa,cAAc;IACtC;IAEA,IAAIN,MAAA,EAAQO,QAAA,KAAa,UAAU;MACjCnD,UAAA,CAAW4C,MAAA,EAAQQ,GAAA,IAAO;MAC1BlD,YAAA,CAAa;IACf,OAAO;MACL;MACAF,UAAA,CACE,GAAGM,MAAA,CAAO+C,MAAM,CAACC,KAAK,KAAK,MAAM,KAAKhD,MAAA,CAAO+C,MAAM,CAACC,KAAK,gBAAgBV,MAAA,EAAQW,GAAA,EAAKC,UAAA,IACpFZ,MAAA,EAAQW,GAAA,EAAKE,KAAA,EACb;MAGJ,MAAMC,YAAA,GAAed,MAAA,EAAQW,GAAA,EAAKC,UAAA,GAC9BjD,eAAA,CAAgB;QAAEoD,cAAA,EAAgBf,MAAA,EAAQW,GAAA,EAAKC;MAAW,KAC1D3B,SAAA;MACJ,IAAI,CAAC6B,YAAA,EAAc;QACjB;QACA;QACAxD,YAAA,CAAa0C,MAAA,EAAQgB,KAAA,GAAQC,MAAA,CAAOjB,MAAA,EAAQgB,KAAA,IAAS;QACrD5D,UAAA,CAAW4C,MAAA,EAAQQ,GAAA,GAAMS,MAAA,CAAOjB,MAAA,EAAQQ,GAAA,IAAO;MACjD,OAAO;QACL,MAAML,EAAA,GAAK,OAAOH,MAAA,CAAOW,GAAG,EAAEE,KAAA,KAAU,WAAWb,MAAA,CAAOW,GAAG,CAACE,KAAK,CAACV,EAAE,GAAGH,MAAA,CAAOW,GAAG,EAAEE,KAAA;QACrF,MAAMK,UAAA,GAAalB,MAAA,CAAOW,GAAG,EAAEC,UAAA;QAC/B,IAAI,CAACT,EAAA,IAAM,CAACe,UAAA,EAAY;UACtB,MAAM,IAAIC,KAAA,CAAM,0DAA0D;QAC5E;QAEA,MAAMC,YAAA,GAAevD,CAAA,CAAE,mBAAmB;UACxCmD,KAAA,EAAO,GAAGtG,cAAA,CAAeoG,YAAA,CAAaO,MAAM,CAACC,QAAQ,EAAE1D,IAAA,OAAWC,CAAA,CAAE,oCAAoCD,IAAA;QAC1G,GAAG2D,OAAO,CAAC,aAAa;QACxBjE,YAAA,CAAa8D,YAAA;QAEbjG,QAAA,CACGqG,GAAG,CAAC,GAAG9D,MAAA,CAAO+D,SAAS,GAAG/D,MAAA,CAAO+C,MAAM,CAACiB,GAAG,IAAIR,UAAA,IAAcf,EAAA,EAAI,EAAE;UAClEwB,OAAA,EAAS;YACP,mBAAmB/D,IAAA,CAAKgE;UAC1B;UACAC,MAAA,EAAQ;YACNnD,KAAA,EAAO;YACPL,MAAA,EAAQA,MAAA,EAAQyD;UAClB;QACF,GACCC,IAAI,CAAC,MAAOC,GAAA;UACX,IAAI,CAACA,GAAA,CAAIC,EAAE,EAAE;YACX,MAAM,IAAId,KAAA,CAAM,uBAAuBa,GAAA,CAAIE,MAAM,EAAE;UACrD;UACA,MAAMhC,MAAA,GAAO,MAAM8B,GAAA,CAAIG,IAAI;UAC3B,MAAMC,UAAA,GAAatB,YAAA,EAAcJ,KAAA,EAAO0B,UAAA,IAAc;UACtD,MAAMC,KAAA,GAAQnC,MAAI,CAACkC,UAAA,CAAW;UAC9B,MAAMpB,KAAA,GAAQnD,CAAA,CAAE,mBAAmB;YACjCmD,KAAA,EAAO,GAAGtG,cAAA,CAAeoG,YAAA,CAAaO,MAAM,CAACC,QAAQ,EAAE1D,IAAA,OAAWyE,KAAA;UACpE,GAAGd,OAAO,CAAC,aAAa;UACxBjE,YAAA,CAAa0D,KAAA;QACf,GACCsB,KAAK,CAAC;UACL,MAAMtB,OAAA,GAAQnD,CAAA,CAAE,mBAAmB;YACjCmD,KAAA,EAAO,GAAGtG,cAAA,CAAeoG,YAAA,CAAaO,MAAM,CAACC,QAAQ,EAAE1D,IAAA,OAAWC,CAAA,CAAE,oBAAoBD,IAAA,WAAeuC,EAAA;UACzG,GAAGoB,OAAO,CAAC,aAAa;UACxBjE,YAAA,CAAa0D,OAAA;QACf;MACJ;IACF;IAEAjD,YAAA,CAAamC,IAAA;IACbhC,SAAA,CAAU;IACVE,gBAAA,CAAiBe,SAAA,GAAYA,SAAA,EAAWQ,QAAA,KAAa,EAAE;IAEvD,IAAIrD,eAAA,CAAgBmD,eAAA,GAAkB;MACpClB,aAAA,CAAc;IAChB,OAAO;MACLA,aAAA,CAAc;IAChB;IAEA,MAAMgE,UAAA,GAAarF,SAAA,CAAU2B,OAAO;IACpC,MAAM2D,eAAA,GAAkB/G,eAAA,CAAgBsB,MAAA,CAAO0F,OAAO;IACtD,MAAM;MAAEC;IAAa,CAAE,GAAGC,QAAA;IAE1B,IAAIJ,UAAA,KAAe,MAAM;MACvB;IACF;IAEA,MAAMK,WAAA,GAAc7F,MAAA,CAAO8F,cAAc;IAEzC,IACEL,eAAA,KAAoB,QACpBI,WAAA,KAAgB,QAChBA,WAAA,CAAYE,QAAQ,CAACN,eAAA,CAAgBO,UAAU,GAC/C;MACA,IAAI,CAAC3D,mBAAA,EAAqB;QACxB;QACA;QACAA,mBAAA,GAAsBoD,eAAA,CAAgBQ,UAAU,CAAC,GAAGxD,qBAAqB;MAC3E;MAEA,IAAIJ,mBAAA,IAAuB,MAAM;QAC/BA,mBAAA,CAAoB6D,CAAC,IAAI;QACzB9G,oCAAA,CAAqCiD,mBAAA,EAAqBmD,UAAA,EAAYzF,UAAA;MACxE;IACF,OAAO,IAAI4F,aAAA,IAAiB,QAAQA,aAAA,CAAcQ,SAAS,KAAK,cAAc;MAC5E,IAAIN,WAAA,KAAgB,MAAM;QACxBzG,oCAAA,CAAqC,MAAMoG,UAAA,EAAYzF,UAAA;MACzD;MACAM,UAAA,CAAW;MACXE,YAAA,CAAa;IACf;IAEA,OAAO;EACT,GAAG,CACDP,MAAA,EACA6B,UAAA,EACAlB,MAAA,CAAO+C,MAAM,CAACC,KAAK,EACnBhD,MAAA,CAAO+C,MAAM,CAACiB,GAAG,EACjBhE,MAAA,CAAOyF,WAAW,EAClBzF,MAAA,CAAO+D,SAAS,EAChB5D,CAAA,EACAD,IAAA,EACAS,MAAA,EAAQyD,IAAA,EACRhF,UAAA,CACD;EAEDhB,SAAA,CAAU;IACR,OAAOrB,aAAA,CACLsC,MAAA,CAAOqG,eAAe,CACpB1G,8BAAA,EACC2G,OAAA;MACCtG,MAAA,CAAOuG,eAAe,CAAC7G,mBAAA,EAAqB4G,OAAA;MAE5C;MACAnE,iBAAA;MACAP,YAAA;MAEA,OAAO;IACT,GACAnD,oBAAA;EAGN,GAAG,CAACuB,MAAA,EAAQmC,iBAAA,EAAmBP,YAAA,EAAcH,UAAA,CAAW;EAExD1C,SAAA,CAAU;IACR,MAAMyH,YAAA,GAAezG,UAAA,CAAW0G,aAAa;IAE7C,MAAMC,MAAA,GAASA,CAAA;MACb1G,MAAA,CAAO2G,cAAc,GAAGC,IAAI,CAAC;QAC3B,KAAKzE,iBAAA;MACP;IACF;IAEA0E,MAAA,CAAOC,gBAAgB,CAAC,UAAUJ,MAAA;IAElC,IAAIF,YAAA,IAAgB,MAAM;MACxBA,YAAA,CAAaM,gBAAgB,CAAC,UAAUJ,MAAA;IAC1C;IAEA,OAAO;MACLG,MAAA,CAAOE,mBAAmB,CAAC,UAAUL,MAAA;MAErC,IAAIF,YAAA,IAAgB,MAAM;QACxBA,YAAA,CAAaO,mBAAmB,CAAC,UAAUL,MAAA;MAC7C;IACF;EACF,GAAG,CAAC3G,UAAA,CAAW0G,aAAa,EAAEzG,MAAA,EAAQmC,iBAAA,CAAkB;EAExDpD,SAAA,CAAU;IACR,OAAOrB,aAAA,CACLsC,MAAA,CAAOgH,sBAAsB,CAAC,CAAC;MAAEC;IAAW,CAAE;MAC5CA,WAAA,CAAYL,IAAI,CAAC;QACf,KAAKzE,iBAAA;MACP;IACF,IAEAnC,MAAA,CAAOqG,eAAe,CACpBzH,wBAAA,EACA;MACE,KAAKuD,iBAAA;MACL,OAAO;IACT,GACA1D,oBAAA,GAEFuB,MAAA,CAAOqG,eAAe,CACpB1H,kBAAA,EACA;MACE,IAAIuC,MAAA,EAAQ;QACVW,UAAA;QAEA,OAAO;MACT;MACA,OAAO;IACT,GACArD,qBAAA;EAGN,GAAG,CAACwB,MAAA,EAAQmC,iBAAA,EAAmBjB,MAAA,EAAQW,UAAA,CAAW;EAElD9C,SAAA,CAAU;IACRiB,MAAA,CAAO2G,cAAc,GAAGC,IAAI,CAAC;MAC3B,KAAKzE,iBAAA;IACP;EACF,GAAG,CAACnC,MAAA,EAAQmC,iBAAA,CAAkB;EAE9B,oBACE+E,KAAA,CAACrI,KAAA,CAAMsI,QAAQ;4BACbC,IAAA,CAAC;MAAIjB,SAAA,EAAU;MAAckB,GAAA,EAAKlH,SAAA;gBAChC,aAAA+G,KAAA,CAAC;QAAIf,SAAA,EAAU;mBACZ/F,OAAA,IAAWA,OAAA,CAAQkH,MAAM,GAAG,iBAC3BJ,KAAA,CAAC;UAAEK,IAAA,EAAMnH,OAAA;UAASoH,GAAA,EAAI;UAAsBC,MAAA,EAAO;qBAChDxH,QAAA,EAAUyH,QAAA,CAASC,MAAA,gBAASP,IAAA,CAACtJ,gBAAA,QAAsB,MACnDwC,SAAA,IAAa,QAAQA,SAAA,CAAUgH,MAAM,GAAG,IAAIhH,SAAA,GAAYF,OAAA;aAEzDE,SAAA,IAAa,QAAQA,SAAA,CAAUgH,MAAM,GAAG,iBAC1CJ,KAAA,CAAAU,SAAA;qBACG3H,QAAA,EAAUyH,QAAA,CAASC,MAAA,gBAASP,IAAA,CAACtJ,gBAAA,QAAsB,M,aACpDsJ,IAAA,CAAC;YAAKjB,SAAA,EAAU;sBAA0B7F;;aAE1C,MAEHN,MAAA,CAAO6H,UAAU,mBAChBX,KAAA,CAACrI,KAAA,CAAMsI,QAAQ;kCACbC,IAAA,CAAC;YACC,cAAW;YACXjB,SAAA,EAAU;YACV2B,OAAA,EAAUjI,KAAA;cACRA,KAAA,CAAMD,cAAc;cACpBgC,YAAA;YACF;YACAmG,WAAA,EAAanI,cAAA;YACboI,QAAA,EAAU;YACVC,IAAA,EAAK;sBAEL,aAAAb,IAAA,CAACvJ,QAAA;cAEF,CAAC0D,UAAA,iBACA6F,IAAA,CAAC;YACC,cAAW;YACXjB,SAAA,EAAU;YACV2B,OAAA,EAASA,CAAA;cACP9H,MAAA,CAAOuG,eAAe,CAAC7G,mBAAA,EAAqB;YAC9C;YACAqI,WAAA,EAAanI,cAAA;YACboI,QAAA,EAAU;YACVC,IAAA,EAAK;sBAEL,aAAAb,IAAA,CAACxJ,aAAA;;;;qBAObwJ,IAAA,CAAC/H,YAAA;MACC8G,SAAA,EAAU;MACVhD,IAAA,EAAMpC,SAAA;MACNU,UAAA,EAAYA,UAAA;MACZyG,WAAA,EAAapH,CAAA,CAAE;MACfqH,UAAA,EAAW;MACXC,kBAAA,EAAoBA,CAACnF,QAAA,EAAmBE,MAAA;QACtC,MAAMkF,cAAA,GAAiBlF,MAAA;QAEvB,MAAMmF,cAAA,GAA6B;UACjC,GAAGD;QACL;QACA,OAAOC,cAAA,CAAehF,IAAI;QAE1B;QACAtD,MAAA,CAAO0G,MAAM,CAAC;UACZ,MAAMtE,WAAA,GAAY/D,aAAA;UAClB,IAAIkK,UAAA,GAAiC;UACrC,IAAIhK,iBAAA,CAAkB6D,WAAA,GAAY;YAChCmG,UAAA,GAAapJ,eAAA,CAAgBiD,WAAA,EAAWoG,SAAS;UACnD,OAAO;YACL,IAAIpH,aAAA,CAAckG,MAAM,EAAE;cACxBiB,UAAA,GAAanH,aAAa,CAAC,EAAE,CAACoH,SAAS;YACzC;UACF;UAEA,IAAID,UAAA,IAAchJ,eAAA,CAAgBgJ,UAAA,GAAa;YAC7C,MAAMtI,UAAA,GAAWT,eAAA,CAAgB;cAC/ByD,MAAA,EAAQqF;YACV;YACAC,UAAA,CAAW/D,OAAO,CAACvE,UAAA,EAAU;UAC/B;QACF;QAEA;QACA;QACAD,MAAA,CAAOuG,eAAe,CAAC7G,mBAAA,EAAqB;UAC1CuD,MAAA,EAAQqF,cAAA;UACRlH,aAAA;UACAkC,IAAA,EAAM+E,cAAA,CAAe/E;QACvB;MACF;MACA7C,UAAA,EAAYA,UAAA;MACZgI,gBAAA,EAAiB;;;AAIzB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useLexicalComposerContext","$findMatchingParent","mergeRegister","getTranslation","CloseMenuIcon","EditIcon","ExternalLinkIcon","formatDrawerSlug","useConfig","useEditDepth","useLocale","useTranslation","requests","$getSelection","$isLineBreakNode","$isRangeSelection","COMMAND_PRIORITY_HIGH","COMMAND_PRIORITY_LOW","getDOMSelection","KEY_ESCAPE_COMMAND","SELECTION_CHANGE_COMMAND","React","useCallback","useEffect","useRef","useState","useEditorConfigContext","getSelectedNode","setFloatingElemPositionForLinkEditor","FieldsDrawer","useLexicalDrawer","$isAutoLinkNode","$createLinkNode","$isLinkNode","TOGGLE_LINK_COMMAND","TOGGLE_LINK_WITH_MODAL_COMMAND","preventDefault","event","LinkEditor","anchorElem","editor","linkNode","setLinkNode","editorRef","linkUrl","setLinkUrl","linkLabel","setLinkLabel","fieldProps","schemaPath","uuid","config","getEntityConfig","i18n","t","stateData","setStateData","editDepth","isLink","setIsLink","selectedNodes","setSelectedNodes","locale","isAutoLink","setIsAutoLink","drawerSlug","slug","depth","toggleDrawer","setNotLink","current","style","opacity","transform","undefined","$updateLinkEditor","selection","selectedNodeDomRect","focusNode","getElementByKey","getKey","getBoundingClientRect","focusLinkParent","badNode","getNodes","filter","node","find","is","fields","getFields","data","id","getID","text","getTextContent","linkType","url","routes","admin","doc","relationTo","value","relatedField","collectionSlug","label","String","collection","Error","loadingLabel","labels","singular","replace","get","serverURL","api","headers","language","params","code","then","res","ok","status","json","useAsTitle","title","catch","editorElem","nativeSelection","_window","activeElement","document","rootElement","getRootElement","contains","anchorNode","getRangeAt","y","className","registerCommand","payload","dispatchCommand","scrollerElem","parentElement","update","getEditorState","read","window","addEventListener","removeEventListener","registerUpdateListener","editorState","_jsxs","Fragment","_jsx","ref","length","href","rel","target","__fields","newTab","_Fragment","isEditable","onClick","onMouseDown","tabIndex","type","drawerTitle","featureKey","handleDrawerSubmit","newLinkPayload","bareLinkFields","linkParent","getParent","schemaPathSuffix"],"sources":["../../../../../../../src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementNode, LexicalNode } from 'lexical'\nimport type { Data, FormState } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  CloseMenuIcon,\n  EditIcon,\n  ExternalLinkIcon,\n  formatDrawerSlug,\n  useConfig,\n  useEditDepth,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { requests } from '@payloadcms/ui/shared'\nimport {\n  $getSelection,\n  $isLineBreakNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_HIGH,\n  COMMAND_PRIORITY_LOW,\n  getDOMSelection,\n  KEY_ESCAPE_COMMAND,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { LinkNode } from '../../../../nodes/LinkNode.js'\nimport type { LinkFields } from '../../../../nodes/types.js'\nimport type { LinkPayload } from '../types.js'\n\nimport { useEditorConfigContext } from '../../../../../../lexical/config/client/EditorConfigProvider.js'\nimport { getSelectedNode } from '../../../../../../lexical/utils/getSelectedNode.js'\nimport { setFloatingElemPositionForLinkEditor } from '../../../../../../lexical/utils/setFloatingElemPositionForLinkEditor.js'\nimport { FieldsDrawer } from '../../../../../../utilities/fieldsDrawer/Drawer.js'\nimport { useLexicalDrawer } from '../../../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { $isAutoLinkNode } from '../../../../nodes/AutoLinkNode.js'\nimport { $createLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../../nodes/LinkNode.js'\nimport { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js'\n\nfunction preventDefault(\n  event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>,\n): void {\n  event.preventDefault()\n}\n\nexport function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.ReactNode {\n  const [editor] = useLexicalComposerContext()\n  // TO-DO: There are several states that should not be state, because they\n  // are derived from linkNode (linkUrl, linkLabel, stateData, isLink, isAutoLink...)\n  const [linkNode, setLinkNode] = useState<LinkNode>()\n\n  const editorRef = useRef<HTMLDivElement | null>(null)\n  const [linkUrl, setLinkUrl] = useState<null | string>(null)\n  const [linkLabel, setLinkLabel] = useState<null | string>(null)\n\n  const {\n    fieldProps: { schemaPath },\n    uuid,\n  } = useEditorConfigContext()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const { i18n, t } = useTranslation<object, 'lexical:link:loadingWithEllipsis'>()\n\n  const [stateData, setStateData] = useState<\n    ({ id?: string; text: string } & LinkFields) | undefined\n  >()\n\n  const editDepth = useEditDepth()\n  const [isLink, setIsLink] = useState(false)\n  const [selectedNodes, setSelectedNodes] = useState<LexicalNode[]>([])\n  const locale = useLocale()\n\n  const [isAutoLink, setIsAutoLink] = useState(false)\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-rich-text-link-` + uuid,\n    depth: editDepth,\n  })\n\n  const { toggleDrawer } = useLexicalDrawer(drawerSlug)\n\n  const setNotLink = useCallback(() => {\n    setIsLink(false)\n    if (editorRef && editorRef.current) {\n      editorRef.current.style.opacity = '0'\n      editorRef.current.style.transform = 'translate(-10000px, -10000px)'\n    }\n    setIsAutoLink(false)\n    setLinkUrl(null)\n    setLinkLabel(null)\n    setSelectedNodes([])\n    setStateData(undefined)\n  }, [setIsLink, setLinkUrl, setLinkLabel, setSelectedNodes])\n\n  const $updateLinkEditor = useCallback(() => {\n    const selection = $getSelection()\n    let selectedNodeDomRect: DOMRect | undefined\n\n    if (!$isRangeSelection(selection) || !selection) {\n      void setNotLink()\n      return\n    }\n\n    // Handle the data displayed in the floating link editor & drawer when you click on a link node\n\n    const focusNode = getSelectedNode(selection)\n    selectedNodeDomRect = editor.getElementByKey(focusNode.getKey())?.getBoundingClientRect()\n    const focusLinkParent = $findMatchingParent(focusNode, $isLinkNode)\n\n    // Prevent link modal from showing if selection spans further than the link: https://github.com/facebook/lexical/issues/4064\n    const badNode = selection\n      .getNodes()\n      .filter((node) => !$isLineBreakNode(node))\n      .find((node) => {\n        const linkNode = $findMatchingParent(node, $isLinkNode)\n        return (\n          (focusLinkParent && !focusLinkParent.is(linkNode)) ||\n          (linkNode && !linkNode.is(focusLinkParent))\n        )\n      })\n\n    if (focusLinkParent == null || badNode) {\n      setNotLink()\n      return\n    }\n    setLinkNode(focusLinkParent)\n\n    const fields = focusLinkParent.getFields()\n\n    // Initial state:\n    const data: { text: string } & LinkFields = {\n      ...fields,\n      id: focusLinkParent.getID(),\n      text: focusLinkParent.getTextContent(),\n    }\n\n    if (fields?.linkType === 'custom') {\n      setLinkUrl(fields?.url ?? null)\n      setLinkLabel(null)\n    } else {\n      // internal link\n      setLinkUrl(\n        `${config.routes.admin === '/' ? '' : config.routes.admin}/collections/${fields?.doc?.relationTo}/${\n          fields?.doc?.value\n        }`,\n      )\n\n      const relatedField = fields?.doc?.relationTo\n        ? getEntityConfig({ collectionSlug: fields?.doc?.relationTo })\n        : undefined\n      if (!relatedField) {\n        // Usually happens if the user removed all default fields. In this case, we let them specify the label or do not display the label at all.\n        // label could be a virtual field the user added. This is useful if they want to use the link feature for things other than links.\n        setLinkLabel(fields?.label ? String(fields?.label) : null)\n        setLinkUrl(fields?.url ? String(fields?.url) : null)\n      } else {\n        const id = typeof fields.doc?.value === 'object' ? fields.doc.value.id : fields.doc?.value\n        const collection = fields.doc?.relationTo\n        if (!id || !collection) {\n          throw new Error(`Focus link parent is missing doc.value or doc.relationTo`)\n        }\n\n        const loadingLabel = t('fields:linkedTo', {\n          label: `${getTranslation(relatedField.labels.singular, i18n)} - ${t('lexical:link:loadingWithEllipsis', i18n)}`,\n        }).replace(/<[^>]*>?/g, '')\n        setLinkLabel(loadingLabel)\n\n        requests\n          .get(`${config.serverURL}${config.routes.api}/${collection}/${id}`, {\n            headers: {\n              'Accept-Language': i18n.language,\n            },\n            params: {\n              depth: 0,\n              locale: locale?.code,\n            },\n          })\n          .then(async (res) => {\n            if (!res.ok) {\n              throw new Error(`HTTP error! Status: ${res.status}`)\n            }\n            const data = await res.json()\n            const useAsTitle = relatedField?.admin?.useAsTitle || 'id'\n            const title = data[useAsTitle]\n            const label = t('fields:linkedTo', {\n              label: `${getTranslation(relatedField.labels.singular, i18n)} - ${title}`,\n            }).replace(/<[^>]*>?/g, '')\n            setLinkLabel(label)\n          })\n          .catch(() => {\n            const label = t('fields:linkedTo', {\n              label: `${getTranslation(relatedField.labels.singular, i18n)} - ${t('general:untitled', i18n)} - ID: ${id}`,\n            }).replace(/<[^>]*>?/g, '')\n            setLinkLabel(label)\n          })\n      }\n    }\n\n    setStateData(data)\n    setIsLink(true)\n    setSelectedNodes(selection ? selection?.getNodes() : [])\n\n    if ($isAutoLinkNode(focusLinkParent)) {\n      setIsAutoLink(true)\n    } else {\n      setIsAutoLink(false)\n    }\n\n    const editorElem = editorRef.current\n    const nativeSelection = getDOMSelection(editor._window)\n    const { activeElement } = document\n\n    if (editorElem === null) {\n      return\n    }\n\n    const rootElement = editor.getRootElement()\n\n    if (\n      nativeSelection !== null &&\n      rootElement !== null &&\n      rootElement.contains(nativeSelection.anchorNode)\n    ) {\n      if (!selectedNodeDomRect) {\n        // Get the DOM rect of the selected node using the native selection. This sometimes produces the wrong\n        // result, which is why we use lexical's selection preferably.\n        selectedNodeDomRect = nativeSelection.getRangeAt(0).getBoundingClientRect()\n      }\n\n      if (selectedNodeDomRect != null) {\n        selectedNodeDomRect.y += 40\n        setFloatingElemPositionForLinkEditor(selectedNodeDomRect, editorElem, anchorElem)\n      }\n    } else if (activeElement == null || activeElement.className !== 'link-input') {\n      if (rootElement !== null) {\n        setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem)\n      }\n      setLinkUrl(null)\n      setLinkLabel(null)\n    }\n\n    return true\n  }, [\n    editor,\n    setNotLink,\n    config.routes.admin,\n    config.routes.api,\n    config.serverURL,\n    getEntityConfig,\n    t,\n    i18n,\n    locale?.code,\n    anchorElem,\n  ])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand(\n        TOGGLE_LINK_WITH_MODAL_COMMAND,\n        (payload: LinkPayload) => {\n          editor.dispatchCommand(TOGGLE_LINK_COMMAND, payload)\n\n          // Now, open the modal\n          $updateLinkEditor()\n          toggleDrawer()\n\n          return true\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor, $updateLinkEditor, toggleDrawer, drawerSlug])\n\n  useEffect(() => {\n    const scrollerElem = anchorElem.parentElement\n\n    const update = (): void => {\n      editor.getEditorState().read(() => {\n        void $updateLinkEditor()\n      })\n    }\n\n    window.addEventListener('resize', update)\n\n    if (scrollerElem != null) {\n      scrollerElem.addEventListener('scroll', update)\n    }\n\n    return () => {\n      window.removeEventListener('resize', update)\n\n      if (scrollerElem != null) {\n        scrollerElem.removeEventListener('scroll', update)\n      }\n    }\n  }, [anchorElem.parentElement, editor, $updateLinkEditor])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          void $updateLinkEditor()\n        })\n      }),\n\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          void $updateLinkEditor()\n          return true\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      editor.registerCommand(\n        KEY_ESCAPE_COMMAND,\n        () => {\n          if (isLink) {\n            setNotLink()\n\n            return true\n          }\n          return false\n        },\n        COMMAND_PRIORITY_HIGH,\n      ),\n    )\n  }, [editor, $updateLinkEditor, isLink, setNotLink])\n\n  useEffect(() => {\n    editor.getEditorState().read(() => {\n      void $updateLinkEditor()\n    })\n  }, [editor, $updateLinkEditor])\n\n  return (\n    <React.Fragment>\n      <div className=\"link-editor\" ref={editorRef}>\n        <div className=\"link-input\">\n          {linkUrl && linkUrl.length > 0 ? (\n            <a href={linkUrl} rel=\"noopener noreferrer\" target=\"_blank\">\n              {linkNode?.__fields.newTab ? <ExternalLinkIcon /> : null}\n              {linkLabel != null && linkLabel.length > 0 ? linkLabel : linkUrl}\n            </a>\n          ) : linkLabel != null && linkLabel.length > 0 ? (\n            <>\n              {linkNode?.__fields.newTab ? <ExternalLinkIcon /> : null}\n              <span className=\"link-input__label-pure\">{linkLabel}</span>\n            </>\n          ) : null}\n\n          {editor.isEditable() && (\n            <React.Fragment>\n              <button\n                aria-label=\"Edit link\"\n                className=\"link-edit\"\n                onClick={(event) => {\n                  event.preventDefault()\n                  toggleDrawer()\n                }}\n                onMouseDown={preventDefault}\n                tabIndex={0}\n                type=\"button\"\n              >\n                <EditIcon />\n              </button>\n              {!isAutoLink && (\n                <button\n                  aria-label=\"Remove link\"\n                  className=\"link-trash\"\n                  onClick={() => {\n                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n                  }}\n                  onMouseDown={preventDefault}\n                  tabIndex={0}\n                  type=\"button\"\n                >\n                  <CloseMenuIcon />\n                </button>\n              )}\n            </React.Fragment>\n          )}\n        </div>\n      </div>\n      <FieldsDrawer\n        className=\"lexical-link-edit-drawer\"\n        data={stateData}\n        drawerSlug={drawerSlug}\n        drawerTitle={t('fields:editLink')}\n        featureKey=\"link\"\n        handleDrawerSubmit={(fields: FormState, data: Data) => {\n          const newLinkPayload = data as { text: string } & LinkFields\n\n          const bareLinkFields: LinkFields = {\n            ...newLinkPayload,\n          }\n          delete bareLinkFields.text\n\n          // See: https://github.com/facebook/lexical/pull/5536. This updates autolink nodes to link nodes whenever a change was made (which is good!).\n          editor.update(() => {\n            const selection = $getSelection()\n            let linkParent: ElementNode | null = null\n            if ($isRangeSelection(selection)) {\n              linkParent = getSelectedNode(selection).getParent()\n            } else {\n              if (selectedNodes.length) {\n                linkParent = selectedNodes[0].getParent()\n              }\n            }\n\n            if (linkParent && $isAutoLinkNode(linkParent)) {\n              const linkNode = $createLinkNode({\n                fields: bareLinkFields,\n              })\n              linkParent.replace(linkNode, true)\n            }\n          })\n\n          // Needs to happen AFTER a potential auto link => link node conversion, as otherwise, the updated text to display may be lost due to\n          // it being applied to the auto link node instead of the link node.\n          editor.dispatchCommand(TOGGLE_LINK_COMMAND, {\n            fields: bareLinkFields,\n            selectedNodes,\n            text: newLinkPayload.text,\n          })\n        }}\n        schemaPath={schemaPath}\n        schemaPathSuffix=\"fields\"\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/toolbars/shared/ToolbarDropdown/index.js

@@ -100,197 +100,99 @@ const ToolbarItem = t0 => {
   }
   return t2;
 };
-export const ToolbarDropdown = t0 => {
-  const $ = _c(36);
-  const {
-    anchorElem,
-    classNames,
-    editor,
-    group,
-    Icon,
-    itemsContainerClassNames,
-    label,
-    maxActiveItems,
-    onActiveChange
-  } = t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = [];
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  const [activeItemKeys, setActiveItemKeys] = React.useState(t1);
-  let t2;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = [];
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const [enabledItemKeys, setEnabledItemKeys] = React.useState(t2);
+export const ToolbarDropdown = ({
+  anchorElem,
+  classNames,
+  editor,
+  group,
+  Icon,
+  itemsContainerClassNames,
+  label,
+  maxActiveItems,
+  onActiveChange
+}) => {
+  const [activeItemKeys, setActiveItemKeys] = React.useState([]);
+  const [enabledItemKeys, setEnabledItemKeys] = React.useState([]);
   const [enabledGroup, setEnabledGroup] = React.useState(true);
   const editorConfigContext = useEditorConfigContext();
   const {
     items,
     key: groupKey
   } = group;
-  let t3;
-  if ($[2] !== editor || $[3] !== editorConfigContext || $[4] !== group || $[5] !== items || $[6] !== maxActiveItems || $[7] !== onActiveChange) {
-    t3 = () => {
-      editor.getEditorState().read(() => {
-        const selection = $getSelection();
-        if (!selection) {
-          return;
-        }
-        const _activeItemKeys = [];
-        const _activeItems = [];
-        const _enabledItemKeys = [];
-        for (const item of items) {
-          if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {
-            const isActive = item.isActive({
-              editor,
-              editorConfigContext,
-              selection
-            });
-            if (isActive) {
-              _activeItemKeys.push(item.key);
-              _activeItems.push(item);
-            }
-          }
-          if (item.isEnabled) {
-            const isEnabled = item.isEnabled({
-              editor,
-              editorConfigContext,
-              selection
-            });
-            if (isEnabled) {
-              _enabledItemKeys.push(item.key);
-            }
-          } else {
-            _enabledItemKeys.push(item.key);
+  const updateStates = useCallback(() => {
+    editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!selection) {
+        return;
+      }
+      const _activeItemKeys = [];
+      const _activeItems = [];
+      const _enabledItemKeys = [];
+      for (const item of items) {
+        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {
+          const isActive = item.isActive({
+            editor,
+            editorConfigContext,
+            selection
+          });
+          if (isActive) {
+            _activeItemKeys.push(item.key);
+            _activeItems.push(item);
           }
         }
-        if (group.isEnabled) {
-          setEnabledGroup(group.isEnabled({
+        if (item.isEnabled) {
+          const isEnabled = item.isEnabled({
             editor,
             editorConfigContext,
             selection
-          }));
-        }
-        setActiveItemKeys(_activeItemKeys);
-        setEnabledItemKeys(_enabledItemKeys);
-        if (onActiveChange) {
-          onActiveChange({
-            activeItems: _activeItems
           });
+          if (isEnabled) {
+            _enabledItemKeys.push(item.key);
+          }
+        } else {
+          _enabledItemKeys.push(item.key);
         }
-      });
-    };
-    $[2] = editor;
-    $[3] = editorConfigContext;
-    $[4] = group;
-    $[5] = items;
-    $[6] = maxActiveItems;
-    $[7] = onActiveChange;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  const updateStates = t3;
-  let t4;
-  let t5;
-  if ($[9] !== updateStates) {
-    t4 = () => {
-      updateStates();
-    };
-    t5 = [updateStates];
-    $[9] = updateStates;
-    $[10] = t4;
-    $[11] = t5;
-  } else {
-    t4 = $[10];
-    t5 = $[11];
-  }
-  useEffect(t4, t5);
-  let t6;
-  let t7;
-  if ($[12] !== editor || $[13] !== updateStates) {
-    t6 = () => mergeRegister(editor.registerUpdateListener(() => {
+      }
+      if (group.isEnabled) {
+        setEnabledGroup(group.isEnabled({
+          editor,
+          editorConfigContext,
+          selection
+        }));
+      }
+      setActiveItemKeys(_activeItemKeys);
+      setEnabledItemKeys(_enabledItemKeys);
+      if (onActiveChange) {
+        onActiveChange({
+          activeItems: _activeItems
+        });
+      }
+    });
+  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange]);
+  useEffect(() => {
+    updateStates();
+  }, [updateStates]);
+  useEffect(() => {
+    return mergeRegister(editor.registerUpdateListener(() => {
       updateStates();
     }));
-    t7 = [editor, updateStates];
-    $[12] = editor;
-    $[13] = updateStates;
-    $[14] = t6;
-    $[15] = t7;
-  } else {
-    t6 = $[14];
-    t7 = $[15];
-  }
-  useEffect(t6, t7);
-  const t8 = `${groupKey} dropdown`;
-  const t9 = `${baseClass}-${groupKey}`;
-  let t10;
-  if ($[16] !== classNames) {
-    t10 = classNames || [];
-    $[16] = classNames;
-    $[17] = t10;
-  } else {
-    t10 = $[17];
-  }
-  let t11;
-  if ($[18] !== t10 || $[19] !== t9) {
-    t11 = [baseClass, t9, ...t10].filter(Boolean);
-    $[18] = t10;
-    $[19] = t9;
-    $[20] = t11;
-  } else {
-    t11 = $[20];
-  }
-  const t12 = t11.join(" ");
-  const t13 = !enabledGroup;
-  let t14;
-  if ($[21] !== itemsContainerClassNames) {
-    t14 = itemsContainerClassNames || [];
-    $[21] = itemsContainerClassNames;
-    $[22] = t14;
-  } else {
-    t14 = $[22];
-  }
-  let t15;
-  if ($[23] !== Icon || $[24] !== activeItemKeys || $[25] !== anchorElem || $[26] !== editor || $[27] !== enabledItemKeys || $[28] !== groupKey || $[29] !== items || $[30] !== label || $[31] !== t12 || $[32] !== t13 || $[33] !== t14 || $[34] !== t8) {
-    t15 = _jsx(DropDown, {
-      buttonAriaLabel: t8,
-      buttonClassName: t12,
-      disabled: t13,
-      Icon,
-      itemsContainerClassNames: [`${baseClass}-items`, ...t14],
-      label,
-      children: items.length ? items.map(item_0 => _jsx(ToolbarItem, {
+  }, [editor, updateStates]);
+  return /*#__PURE__*/_jsx(DropDown, {
+    buttonAriaLabel: `${groupKey} dropdown`,
+    buttonClassName: [baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])].filter(Boolean).join(' '),
+    disabled: !enabledGroup,
+    Icon: Icon,
+    itemsContainerClassNames: [`${baseClass}-items`, ...(itemsContainerClassNames || [])],
+    label: label,
+    children: items.length ? items.map(item_0 => {
+      return /*#__PURE__*/_jsx(ToolbarItem, {
         active: activeItemKeys.includes(item_0.key),
-        anchorElem,
-        editor,
+        anchorElem: anchorElem,
+        editor: editor,
         enabled: enabledItemKeys.includes(item_0.key),
         item: item_0
-      }, item_0.key)) : null
-    }, groupKey);
-    $[23] = Icon;
-    $[24] = activeItemKeys;
-    $[25] = anchorElem;
-    $[26] = editor;
-    $[27] = enabledItemKeys;
-    $[28] = groupKey;
-    $[29] = items;
-    $[30] = label;
-    $[31] = t12;
-    $[32] = t13;
-    $[33] = t14;
-    $[34] = t8;
-    $[35] = t15;
-  } else {
-    t15 = $[35];
-  }
-  return t15;
+      }, item_0.key);
+    }) : null
+  }, groupKey);
 };
 //# sourceMappingURL=index.js.map

package/dist/features/toolbars/shared/ToolbarDropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","DropDown","DropDownItem","ToolbarItem","t0","$","active","anchorElem","editor","enabled","item","i18n","fieldProps","t1","featureClientSchemaMap","schemaPath","Component","t2","_jsx","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","tooltip","children","className","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","Symbol","for","activeItemKeys","setActiveItemKeys","useState","enabledItemKeys","setEnabledItemKeys","enabledGroup","setEnabledGroup","editorConfigContext","items","groupKey","t3","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","updateStates","t4","t5","t6","t7","registerUpdateListener","t8","t9","t10","t11","filter","Boolean","t12","join","t13","t14","t15","buttonAriaLabel","buttonClassName","disabled","map","item_0","includes"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { DropDown, DropDownItem } from './DropDown.js'\nimport './index.scss'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [activeItemKeys, setActiveItemKeys] = React.useState<string[]>([])\n  const [enabledItemKeys, setEnabledItemKeys] = React.useState<string[]>([])\n  const [enabledGroup, setEnabledGroup] = React.useState<boolean>(true)\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n      if (group.isEnabled) {\n        setEnabledGroup(group.isEnabled({ editor, editorConfigContext, selection }))\n      }\n      setActiveItemKeys(_activeItemKeys)\n      setEnabledItemKeys(_enabledItemKeys)\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    updateStates()\n  }, [updateStates])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updateStates()\n      }),\n    )\n  }, [editor, updateStates])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!enabledGroup}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {items.length\n        ? items.map((item) => {\n            return (\n              <ToolbarItem\n                active={activeItemKeys.includes(item.key)}\n                anchorElem={anchorElem}\n                editor={editor}\n                enabled={enabledItemKeys.includes(item.key)}\n                item={item}\n                key={item.key}\n              />\n            )\n          })\n        : null}\n    </DropDown>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","baseClass","mergeRegister","useTranslation","$getSelection","useEditorConfigContext","DropDown","DropDownItem","ToolbarItem","t0","$","active","anchorElem","editor","enabled","item","i18n","fieldProps","t1","featureClientSchemaMap","schemaPath","Component","t2","_jsx","key","title","croppedTitle","label","length","substring","Icon","ChildComponent","undefined","tooltip","children","className","ToolbarDropdown","classNames","group","itemsContainerClassNames","maxActiveItems","onActiveChange","activeItemKeys","setActiveItemKeys","useState","enabledItemKeys","setEnabledItemKeys","enabledGroup","setEnabledGroup","editorConfigContext","items","groupKey","updateStates","getEditorState","read","selection","_activeItemKeys","_activeItems","_enabledItemKeys","isActive","push","isEnabled","activeItems","registerUpdateListener","buttonAriaLabel","buttonClassName","filter","Boolean","join","disabled","map","includes"],"sources":["../../../../../src/features/toolbars/shared/ToolbarDropdown/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nconst baseClass = 'toolbar-popup__dropdown'\n\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getSelection } from 'lexical'\n\nimport type { ToolbarDropdownGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { DropDown, DropDownItem } from './DropDown.js'\nimport './index.scss'\n\nconst ToolbarItem = ({\n  active,\n  anchorElem,\n  editor,\n  enabled,\n  item,\n}: {\n  active?: boolean\n  anchorElem: HTMLElement\n  editor: LexicalEditor\n  enabled?: boolean\n  item: ToolbarGroupItem\n}) => {\n  const { i18n } = useTranslation<{}, string>()\n  const {\n    fieldProps: { featureClientSchemaMap, schemaPath },\n  } = useEditorConfigContext()\n\n  if (item.Component) {\n    return (\n      item?.Component && (\n        <item.Component\n          active={active}\n          anchorElem={anchorElem}\n          editor={editor}\n          enabled={enabled}\n          item={item}\n          key={item.key}\n        />\n      )\n    )\n  }\n\n  let title = item.key\n  let croppedTitle = item.key\n  if (item.label) {\n    title =\n      typeof item.label === 'function'\n        ? item.label({ featureClientSchemaMap, i18n, schemaPath })\n        : item.label\n  }\n  // Crop title to max. 25 characters\n  if (title.length > 25) {\n    croppedTitle = title.substring(0, 25) + '...'\n  } else {\n    croppedTitle = title\n  }\n\n  return (\n    <DropDownItem\n      active={active}\n      editor={editor}\n      enabled={enabled}\n      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}\n      item={item}\n      key={item.key}\n      tooltip={title}\n    >\n      <span className=\"text\">{croppedTitle}</span>\n    </DropDownItem>\n  )\n}\n\nexport const ToolbarDropdown = ({\n  anchorElem,\n  classNames,\n  editor,\n  group,\n  Icon,\n  itemsContainerClassNames,\n  label,\n  maxActiveItems,\n  onActiveChange,\n}: {\n  anchorElem: HTMLElement\n  classNames?: string[]\n  editor: LexicalEditor\n  group: ToolbarDropdownGroup\n  Icon?: React.FC\n  itemsContainerClassNames?: string[]\n  label?: string\n  /**\n   * Maximum number of active items allowed. This is a performance optimization to prevent\n   * unnecessary item active checks when the maximum number of active items is reached.\n   */\n  maxActiveItems?: number\n  onActiveChange?: ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => void\n}) => {\n  const [activeItemKeys, setActiveItemKeys] = React.useState<string[]>([])\n  const [enabledItemKeys, setEnabledItemKeys] = React.useState<string[]>([])\n  const [enabledGroup, setEnabledGroup] = React.useState<boolean>(true)\n  const editorConfigContext = useEditorConfigContext()\n  const { items, key: groupKey } = group\n\n  const updateStates = useCallback(() => {\n    editor.getEditorState().read(() => {\n      const selection = $getSelection()\n      if (!selection) {\n        return\n      }\n\n      const _activeItemKeys: string[] = []\n      const _activeItems: ToolbarGroupItem[] = []\n      const _enabledItemKeys: string[] = []\n\n      for (const item of items) {\n        if (item.isActive && (!maxActiveItems || _activeItemKeys.length < maxActiveItems)) {\n          const isActive = item.isActive({ editor, editorConfigContext, selection })\n          if (isActive) {\n            _activeItemKeys.push(item.key)\n            _activeItems.push(item)\n          }\n        }\n        if (item.isEnabled) {\n          const isEnabled = item.isEnabled({ editor, editorConfigContext, selection })\n          if (isEnabled) {\n            _enabledItemKeys.push(item.key)\n          }\n        } else {\n          _enabledItemKeys.push(item.key)\n        }\n      }\n      if (group.isEnabled) {\n        setEnabledGroup(group.isEnabled({ editor, editorConfigContext, selection }))\n      }\n      setActiveItemKeys(_activeItemKeys)\n      setEnabledItemKeys(_enabledItemKeys)\n\n      if (onActiveChange) {\n        onActiveChange({ activeItems: _activeItems })\n      }\n    })\n  }, [editor, editorConfigContext, group, items, maxActiveItems, onActiveChange])\n\n  useEffect(() => {\n    updateStates()\n  }, [updateStates])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updateStates()\n      }),\n    )\n  }, [editor, updateStates])\n\n  return (\n    <DropDown\n      buttonAriaLabel={`${groupKey} dropdown`}\n      buttonClassName={[baseClass, `${baseClass}-${groupKey}`, ...(classNames || [])]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={!enabledGroup}\n      Icon={Icon}\n      itemsContainerClassNames={[`${baseClass}-items`, ...(itemsContainerClassNames || [])]}\n      key={groupKey}\n      label={label}\n    >\n      {items.length\n        ? items.map((item) => {\n            return (\n              <ToolbarItem\n                active={activeItemKeys.includes(item.key)}\n                anchorElem={anchorElem}\n                editor={editor}\n                enabled={enabledItemKeys.includes(item.key)}\n                item={item}\n                key={item.key}\n              />\n            )\n          })\n        : null}\n    </DropDown>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAGxE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAC7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAA;AAE5D,OAAO,mCAAmC,CAAA;AAC1C,OAAO,eAAe,CAAA;AACtB,OAAO,cAAc,CAAA;AAKrB,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAC/B;IACE,QAAQ,CAAC,YAAY,EAAE,2BAA2B,CAAA;CACnD,GAAG,yBAAyB,CA2H9B,CAAA;AAaD,eAAO,MAAM,QAAQ,EAAE,OAAO,iBAAqC,CAAA"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAGxE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAC7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAA;AAE5D,OAAO,mCAAmC,CAAA;AAC1C,OAAO,eAAe,CAAA;AACtB,OAAO,cAAc,CAAA;AAKrB,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAC/B;IACE,QAAQ,CAAC,YAAY,EAAE,2BAA2B,CAAA;CACnD,GAAG,yBAAyB,CA0I9B,CAAA;AAaD,eAAO,MAAM,QAAQ,EAAE,OAAO,iBAAqC,CAAA"}

package/dist/field/Field.js

@@ -64,6 +64,9 @@ const RichTextComponent = props => {
   });
   const disabled = readOnlyFromProps || formProcessing || formInitializing;
   const [isSmallWidthViewport, setIsSmallWidthViewport] = useState(false);
+  const [rerenderProviderKey, setRerenderProviderKey] = useState();
+  const prevInitialValueRef = React.useRef(initialValue);
+  const prevValueRef = React.useRef(value_0);
   useEffect(() => {
     const updateViewPortWidth = () => {
       const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches;
@@ -80,9 +83,19 @@ const RichTextComponent = props => {
   const classes = [baseClass, 'field-type', className, showError && 'error', disabled && `${baseClass}--read-only`, editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport ? `${baseClass}--show-gutter` : null].filter(Boolean).join(' ');
   const pathWithEditDepth = `${path}.${editDepth}`;
   const handleChange = useCallback(editorState => {
-    setValue(editorState.toJSON());
+    const newState = editorState.toJSON();
+    prevValueRef.current = newState;
+    setValue(newState);
   }, [setValue]);
   const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  useEffect(() => {
+    if (JSON.stringify(initialValue) !== JSON.stringify(prevInitialValueRef.current)) {
+      prevInitialValueRef.current = initialValue;
+      if (JSON.stringify(prevValueRef.current) !== JSON.stringify(value_0)) {
+        setRerenderProviderKey(new Date());
+      }
+    }
+  }, [initialValue, value_0]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes,
     style: styles,
@@ -111,8 +124,8 @@ const RichTextComponent = props => {
           readOnly: disabled,
           value: value_0
         }, JSON.stringify({
-          initialValue,
-          path
+          path,
+          rerenderProviderKey
         })), AfterInput]
       }), Description, /*#__PURE__*/_jsx(RenderCustomComponent, {
         CustomComponent: Description,

package/dist/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["FieldDescription","FieldError","FieldLabel","RenderCustomComponent","useEditDepth","useField","mergeFieldStyles","React","useCallback","useEffect","useMemo","useState","ErrorBoundary","LexicalProvider","baseClass","RichTextComponent","props","editorConfig","field","name","admin","className","description","readOnly","readOnlyFromAdmin","label","localized","required","path","pathFromProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","editDepth","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","formInitializing","formProcessing","initialValue","setValue","showError","disabled","isSmallWidthViewport","setIsSmallWidthViewport","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","classes","hideGutter","filter","Boolean","join","pathWithEditDepth","handleChange","editorState","toJSON","styles","_jsxs","style","_jsx","CustomComponent","Fallback","fallbackRender","onReset","composerKey","fieldProps","onChange","JSON","stringify","error","role","color","message","RichText"],"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\nimport type { Validate } from 'payload'\n\nimport {\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  RenderCustomComponent,\n  useEditDepth,\n  useField,\n} from '@payloadcms/ui'\nimport { mergeFieldStyles } from '@payloadcms/ui/shared'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport '../lexical/theme/EditorTheme.scss'\nimport './bundled.css'\nimport './index.scss'\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst RichTextComponent: React.FC<\n  {\n    readonly editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n  } & LexicalRichTextFieldProps\n> = (props) => {\n  const {\n    editorConfig,\n    field,\n    field: {\n      name,\n      admin: { className, description, readOnly: readOnlyFromAdmin } = {},\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly: readOnlyFromTopLevelProps,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n  } = props\n\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n  const path = pathFromProps ?? name\n\n  const editDepth = useEditDepth()\n\n  const memoizedValidate = useCallback<Validate>(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n        return validate(value, { ...validationOptions, required })\n      }\n      return true\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\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    formInitializing,\n    formProcessing,\n    initialValue,\n    setValue,\n    showError,\n    value,\n  } = useField<SerializedEditorState>({\n    path,\n    validate: memoizedValidate,\n  })\n\n  const disabled = readOnlyFromProps || formProcessing || formInitializing\n\n  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n\n  useEffect(() => {\n    const updateViewPortWidth = () => {\n      const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches\n\n      if (isNextSmallWidthViewport !== isSmallWidthViewport) {\n        setIsSmallWidthViewport(isNextSmallWidthViewport)\n      }\n    }\n    updateViewPortWidth()\n    window.addEventListener('resize', updateViewPortWidth)\n\n    return () => {\n      window.removeEventListener('resize', updateViewPortWidth)\n    }\n  }, [isSmallWidthViewport])\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    disabled && `${baseClass}--read-only`,\n    editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport\n      ? `${baseClass}--show-gutter`\n      : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const pathWithEditDepth = `${path}.${editDepth}`\n\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      setValue(editorState.toJSON())\n    },\n    [setValue],\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div className={classes} key={pathWithEditDepth} style={styles}>\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      {Label || <FieldLabel label={label} localized={localized} path={path} required={required} />}\n      <div className={`${baseClass}__wrap`}>\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          {BeforeInput}\n          <LexicalProvider\n            composerKey={pathWithEditDepth}\n            editorConfig={editorConfig}\n            fieldProps={props}\n            isSmallWidthViewport={isSmallWidthViewport}\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={handleChange}\n            readOnly={disabled}\n            value={value}\n          />\n          {AfterInput}\n        </ErrorBoundary>\n        {Description}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }: { error: Error }) {\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: typeof RichTextComponent = RichTextComponent\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Field.js","names":["FieldDescription","FieldError","FieldLabel","RenderCustomComponent","useEditDepth","useField","mergeFieldStyles","React","useCallback","useEffect","useMemo","useState","ErrorBoundary","LexicalProvider","baseClass","RichTextComponent","props","editorConfig","field","name","admin","className","description","readOnly","readOnlyFromAdmin","label","localized","required","path","pathFromProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","editDepth","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","formInitializing","formProcessing","initialValue","setValue","showError","disabled","isSmallWidthViewport","setIsSmallWidthViewport","rerenderProviderKey","setRerenderProviderKey","prevInitialValueRef","useRef","prevValueRef","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","classes","hideGutter","filter","Boolean","join","pathWithEditDepth","handleChange","editorState","newState","toJSON","current","styles","JSON","stringify","Date","_jsxs","style","_jsx","CustomComponent","Fallback","fallbackRender","onReset","composerKey","fieldProps","onChange","error","role","color","message","RichText"],"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\nimport type { Validate } from 'payload'\n\nimport {\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  RenderCustomComponent,\n  useEditDepth,\n  useField,\n} from '@payloadcms/ui'\nimport { mergeFieldStyles } from '@payloadcms/ui/shared'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport '../lexical/theme/EditorTheme.scss'\nimport './bundled.css'\nimport './index.scss'\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst RichTextComponent: React.FC<\n  {\n    readonly editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n  } & LexicalRichTextFieldProps\n> = (props) => {\n  const {\n    editorConfig,\n    field,\n    field: {\n      name,\n      admin: { className, description, readOnly: readOnlyFromAdmin } = {},\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly: readOnlyFromTopLevelProps,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n  } = props\n\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n  const path = pathFromProps ?? name\n\n  const editDepth = useEditDepth()\n\n  const memoizedValidate = useCallback<Validate>(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n        return validate(value, { ...validationOptions, required })\n      }\n      return true\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\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    formInitializing,\n    formProcessing,\n    initialValue,\n    setValue,\n    showError,\n    value,\n  } = useField<SerializedEditorState>({\n    path,\n    validate: memoizedValidate,\n  })\n\n  const disabled = readOnlyFromProps || formProcessing || formInitializing\n\n  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n  const [rerenderProviderKey, setRerenderProviderKey] = useState<Date>()\n\n  const prevInitialValueRef = React.useRef<SerializedEditorState | undefined>(initialValue)\n  const prevValueRef = React.useRef<SerializedEditorState | undefined>(value)\n\n  useEffect(() => {\n    const updateViewPortWidth = () => {\n      const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches\n\n      if (isNextSmallWidthViewport !== isSmallWidthViewport) {\n        setIsSmallWidthViewport(isNextSmallWidthViewport)\n      }\n    }\n    updateViewPortWidth()\n    window.addEventListener('resize', updateViewPortWidth)\n\n    return () => {\n      window.removeEventListener('resize', updateViewPortWidth)\n    }\n  }, [isSmallWidthViewport])\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    disabled && `${baseClass}--read-only`,\n    editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport\n      ? `${baseClass}--show-gutter`\n      : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const pathWithEditDepth = `${path}.${editDepth}`\n\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      const newState = editorState.toJSON()\n      prevValueRef.current = newState\n      setValue(newState)\n    },\n    [setValue],\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  useEffect(() => {\n    if (JSON.stringify(initialValue) !== JSON.stringify(prevInitialValueRef.current)) {\n      prevInitialValueRef.current = initialValue\n      if (JSON.stringify(prevValueRef.current) !== JSON.stringify(value)) {\n        setRerenderProviderKey(new Date())\n      }\n    }\n  }, [initialValue, value])\n\n  return (\n    <div className={classes} key={pathWithEditDepth} style={styles}>\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      {Label || <FieldLabel label={label} localized={localized} path={path} required={required} />}\n      <div className={`${baseClass}__wrap`}>\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          {BeforeInput}\n          <LexicalProvider\n            composerKey={pathWithEditDepth}\n            editorConfig={editorConfig}\n            fieldProps={props}\n            isSmallWidthViewport={isSmallWidthViewport}\n            key={JSON.stringify({ path, rerenderProviderKey })} // 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={handleChange}\n            readOnly={disabled}\n            value={value}\n          />\n          {AfterInput}\n        </ErrorBoundary>\n        {Description}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }: { error: Error }) {\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: typeof RichTextComponent = RichTextComponent\n"],"mappings":"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","ignoreList":[]}