@payloadcms/richtext-slate 3.0.0-canary.518fabe → 3.0.0-canary.51be7be

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGxD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,GAAG,EAAE,CAAC,CAMnE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,GAAG,EAAE,CAAC,CAqCnE,CAAA"}

package/dist/cell/index.js

@@ -1,10 +1,31 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTableCell } from '@payloadcms/ui';
+import { useConfig, useTableCell } from '@payloadcms/ui';
+import { formatAdminURL } from '@payloadcms/ui/shared';
+import LinkImport from 'next/link.js';
 import React from 'react';
+const Link = LinkImport.default || LinkImport;
 export const RichTextCell = ()=>{
-    const { cellData } = useTableCell();
+    const { cellData, cellProps, columnIndex, customCellContext, rowData } = useTableCell();
     const flattenedText = cellData?.map((i)=>i?.children?.map((c)=>c.text)).join(' ');
+    const { config: { routes: { admin: adminRoute } } } = useConfig();
+    const { link } = cellProps || {};
+    let WrapElement = 'span';
+    const wrapElementProps = {};
+    const isLink = link !== undefined ? link : columnIndex === 0;
+    if (isLink) {
+        WrapElement = Link;
+        wrapElementProps.href = customCellContext?.collectionSlug ? formatAdminURL({
+            adminRoute,
+            path: `/collections/${customCellContext?.collectionSlug}/${rowData.id}`
+        }) : '';
+    }
+    if (isLink) {
+        return /*#__PURE__*/ _jsx(WrapElement, {
+            ...wrapElementProps,
+            children: flattenedText
+        });
+    }
     // Limiting the number of characters shown is done in a CSS rule
     return /*#__PURE__*/ _jsx("span", {
         children: flattenedText

package/dist/cell/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/cell/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload'\n\nimport { useTableCell } from '@payloadcms/ui'\nimport React from 'react'\n\nexport const RichTextCell: React.FC<DefaultCellComponentProps<any[]>> = () => {\n  const { cellData } = useTableCell()\n  const flattenedText = cellData?.map((i) => i?.children?.map((c) => c.text)).join(' ')\n\n  // Limiting the number of characters shown is done in a CSS rule\n  return <span>{flattenedText}</span>\n}\n"],"names":["useTableCell","React","RichTextCell","cellData","flattenedText","map","i","children","c","text","join","span"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,iBAAgB;AAC7C,OAAOC,WAAW,QAAO;AAEzB,OAAO,MAAMC,eAA2D;IACtE,MAAM,EAAEC,QAAQ,EAAE,GAAGH;IACrB,MAAMI,gBAAgBD,UAAUE,IAAI,CAACC,IAAMA,GAAGC,UAAUF,IAAI,CAACG,IAAMA,EAAEC,IAAI,GAAGC,KAAK;IAEjF,gEAAgE;IAChE,qBAAO,KAACC;kBAAMP;;AAChB,EAAC"}
+{"version":3,"sources":["../../src/cell/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps } from 'payload'\n\nimport { useConfig, useTableCell } from '@payloadcms/ui'\nimport { formatAdminURL } from '@payloadcms/ui/shared'\nimport LinkImport from 'next/link.js'\nimport React from 'react'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nexport const RichTextCell: React.FC<DefaultCellComponentProps<any[]>> = () => {\n  const { cellData, cellProps, columnIndex, customCellContext, rowData } = useTableCell()\n  const flattenedText = cellData?.map((i) => i?.children?.map((c) => c.text)).join(' ')\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { link } = cellProps || {}\n  let WrapElement: React.ComponentType<any> | string = 'span'\n\n  const wrapElementProps: {\n    className?: string\n    href?: string\n    onClick?: () => void\n    type?: 'button'\n  } = {}\n\n  const isLink = link !== undefined ? link : columnIndex === 0\n\n  if (isLink) {\n    WrapElement = Link\n    wrapElementProps.href = customCellContext?.collectionSlug\n      ? formatAdminURL({\n          adminRoute,\n          path: `/collections/${customCellContext?.collectionSlug}/${rowData.id}`,\n        })\n      : ''\n  }\n\n  if (isLink) {\n    return <WrapElement {...wrapElementProps}>{flattenedText}</WrapElement>\n  }\n  // Limiting the number of characters shown is done in a CSS rule\n  return <span>{flattenedText}</span>\n}\n"],"names":["useConfig","useTableCell","formatAdminURL","LinkImport","React","Link","default","RichTextCell","cellData","cellProps","columnIndex","customCellContext","rowData","flattenedText","map","i","children","c","text","join","config","routes","admin","adminRoute","link","WrapElement","wrapElementProps","isLink","undefined","href","collectionSlug","path","id","span"],"mappings":"AAAA;;AAGA,SAASA,SAAS,EAAEC,YAAY,QAAQ,iBAAgB;AACxD,SAASC,cAAc,QAAQ,wBAAuB;AACtD,OAAOC,gBAAgB,eAAc;AACrC,OAAOC,WAAW,QAAO;AAEzB,MAAMC,OAAQF,WAAWG,OAAO,IAAIH;AAEpC,OAAO,MAAMI,eAA2D;IACtE,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGX;IACzE,MAAMY,gBAAgBL,UAAUM,IAAI,CAACC,IAAMA,GAAGC,UAAUF,IAAI,CAACG,IAAMA,EAAEC,IAAI,GAAGC,KAAK;IAEjF,MAAM,EACJC,QAAQ,EACNC,QAAQ,EAAEC,OAAOC,UAAU,EAAE,EAC9B,EACF,GAAGvB;IAEJ,MAAM,EAAEwB,IAAI,EAAE,GAAGf,aAAa,CAAC;IAC/B,IAAIgB,cAAiD;IAErD,MAAMC,mBAKF,CAAC;IAEL,MAAMC,SAASH,SAASI,YAAYJ,OAAOd,gBAAgB;IAE3D,IAAIiB,QAAQ;QACVF,cAAcpB;QACdqB,iBAAiBG,IAAI,GAAGlB,mBAAmBmB,iBACvC5B,eAAe;YACbqB;YACAQ,MAAM,CAAC,aAAa,EAAEpB,mBAAmBmB,eAAe,CAAC,EAAElB,QAAQoB,EAAE,CAAC,CAAC;QACzE,KACA;IACN;IAEA,IAAIL,QAAQ;QACV,qBAAO,KAACF;YAAa,GAAGC,gBAAgB;sBAAGb;;IAC7C;IACA,gEAAgE;IAChE,qBAAO,KAACoB;kBAAMpB;;AAChB,EAAC"}

package/dist/field/buttons.scss

@@ -1,15 +1,16 @@
 @import '../scss/styles.scss';
+@layer payload-default {
+  .rich-text__button {
+    position: relative;
+    cursor: pointer;
 
-.rich-text__button {
-  position: relative;
-  cursor: pointer;
+    svg {
+      width: base(0.75);
+      height: base(0.75);
+    }
 
-  svg {
-    width: base(0.75);
-    height: base(0.75);
-  }
-
-  &--disabled {
-    opacity: 0.4;
+    &--disabled {
+      opacity: 0.4;
+    }
   }
 }

package/dist/field/elements/blockquote/index.scss

@@ -1,9 +1,11 @@
 @import '../../../scss/styles.scss';
 
-.rich-text-blockquote {
-  &[data-slate-node='element'] {
-    margin: base(0.625) 0;
-    padding-left: base(0.625);
-    border-left: 1px solid var(--theme-elevation-200);
+@layer payload-default {
+  .rich-text-blockquote {
+    &[data-slate-node='element'] {
+      margin: base(0.625) 0;
+      padding-left: base(0.625);
+      border-left: 1px solid var(--theme-elevation-200);
+    }
   }
 }

package/dist/field/elements/link/Button/index.js

@@ -86,7 +86,7 @@ export const LinkButton = ()=>{
                             const data = {
                                 text: editor.selection ? Editor.string(editor, editor.selection) : ''
                             };
-                            const state = await getFormState({
+                            const { state } = await getFormState({
                                 apiRoute: config.routes.api,
                                 body: {
                                     data,

package/dist/field/elements/link/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/link/Button/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormState } from 'payload'\n\nimport { useConfig, useDrawerSlug, useFieldProps, useModal, useTranslation } from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { Fragment, useState } from 'react'\nimport { Editor, Range, Transforms } from 'slate'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport { LinkIcon } from '../../../icons/Link/index.js'\nimport { useElementButton } from '../../../providers/ElementButtonProvider.js'\nimport { ElementButton } from '../../Button.js'\nimport { isElementActive } from '../../isActive.js'\nimport { LinkDrawer } from '../LinkDrawer/index.js'\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport { unwrapLink } from '../utilities.js'\n\n/**\n * This function is called when a new link is created - not when an existing link is edited.\n */\nconst insertLink = (editor, fields) => {\n  const isCollapsed = editor.selection && Range.isCollapsed(editor.selection)\n  const data = reduceFieldsToValues(fields, true)\n\n  const newLink = {\n    type: 'link',\n    children: [],\n    doc: data.doc,\n    fields: data.fields, // Any custom user-added fields are part of data.fields\n    linkType: data.linkType,\n    newTab: data.newTab,\n    url: data.url,\n  }\n\n  if (isCollapsed || !editor.selection) {\n    // If selection anchor and focus are the same,\n    // Just inject a new node with children already set\n    Transforms.insertNodes(editor, {\n      ...newLink,\n      children: [{ text: String(data.text) }],\n    })\n  } else if (editor.selection) {\n    // Otherwise we need to wrap the selected node in a link,\n    // Delete its old text,\n    // Move the selection one position forward into the link,\n    // And insert the text back into the new link\n    Transforms.wrapNodes(editor, newLink, { split: true })\n    Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'word' })\n    Transforms.move(editor, { distance: 1, unit: 'offset' })\n    Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path })\n  }\n\n  ReactEditor.focus(editor)\n}\n\nexport const LinkButton: React.FC = () => {\n  const { fieldProps } = useElementButton()\n  const [initialState, setInitialState] = useState<FormState>({})\n\n  const { t } = useTranslation()\n  const editor = useSlate()\n  const { config } = useConfig()\n\n  const { closeModal, openModal } = useModal()\n  const drawerSlug = useDrawerSlug('rich-text-link')\n  const { schemaPath } = useFieldProps()\n\n  const {\n    field: { richTextComponentMap },\n  } = fieldProps\n\n  const fields = richTextComponentMap.get(linkFieldsSchemaPath)\n\n  return (\n    <Fragment>\n      <ElementButton\n        className=\"link\"\n        format=\"link\"\n        onClick={async () => {\n          if (isElementActive(editor, 'link')) {\n            unwrapLink(editor)\n          } else {\n            openModal(drawerSlug)\n            const isCollapsed = editor.selection && Range.isCollapsed(editor.selection)\n\n            if (!isCollapsed) {\n              const data = {\n                text: editor.selection ? Editor.string(editor, editor.selection) : '',\n              }\n\n              const state = await getFormState({\n                apiRoute: config.routes.api,\n                body: {\n                  data,\n                  operation: 'update',\n                  schemaPath: `${schemaPath}.${linkFieldsSchemaPath}`,\n                },\n                serverURL: config.serverURL,\n              })\n\n              setInitialState(state)\n            }\n          }\n        }}\n        tooltip={t('fields:addLink')}\n      >\n        <LinkIcon />\n      </ElementButton>\n      <LinkDrawer\n        drawerSlug={drawerSlug}\n        fields={Array.isArray(fields) ? fields : []}\n        handleClose={() => {\n          closeModal(drawerSlug)\n        }}\n        handleModalSubmit={(fields) => {\n          insertLink(editor, fields)\n          closeModal(drawerSlug)\n        }}\n        initialState={initialState}\n      />\n    </Fragment>\n  )\n}\n"],"names":["useConfig","useDrawerSlug","useFieldProps","useModal","useTranslation","getFormState","reduceFieldsToValues","React","Fragment","useState","Editor","Range","Transforms","ReactEditor","useSlate","LinkIcon","useElementButton","ElementButton","isElementActive","LinkDrawer","linkFieldsSchemaPath","unwrapLink","insertLink","editor","fields","isCollapsed","selection","data","newLink","type","children","doc","linkType","newTab","url","insertNodes","text","String","wrapNodes","split","delete","at","focus","path","unit","move","distance","insertText","LinkButton","fieldProps","initialState","setInitialState","t","config","closeModal","openModal","drawerSlug","schemaPath","field","richTextComponentMap","get","className","format","onClick","string","state","apiRoute","routes","api","body","operation","serverURL","tooltip","Array","isArray","handleClose","handleModalSubmit"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/elements/link/Button/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormState } from 'payload'\n\nimport { useConfig, useDrawerSlug, useFieldProps, useModal, useTranslation } from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { Fragment, useState } from 'react'\nimport { Editor, Range, Transforms } from 'slate'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport { LinkIcon } from '../../../icons/Link/index.js'\nimport { useElementButton } from '../../../providers/ElementButtonProvider.js'\nimport { ElementButton } from '../../Button.js'\nimport { isElementActive } from '../../isActive.js'\nimport { LinkDrawer } from '../LinkDrawer/index.js'\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport { unwrapLink } from '../utilities.js'\n\n/**\n * This function is called when a new link is created - not when an existing link is edited.\n */\nconst insertLink = (editor, fields) => {\n  const isCollapsed = editor.selection && Range.isCollapsed(editor.selection)\n  const data = reduceFieldsToValues(fields, true)\n\n  const newLink = {\n    type: 'link',\n    children: [],\n    doc: data.doc,\n    fields: data.fields, // Any custom user-added fields are part of data.fields\n    linkType: data.linkType,\n    newTab: data.newTab,\n    url: data.url,\n  }\n\n  if (isCollapsed || !editor.selection) {\n    // If selection anchor and focus are the same,\n    // Just inject a new node with children already set\n    Transforms.insertNodes(editor, {\n      ...newLink,\n      children: [{ text: String(data.text) }],\n    })\n  } else if (editor.selection) {\n    // Otherwise we need to wrap the selected node in a link,\n    // Delete its old text,\n    // Move the selection one position forward into the link,\n    // And insert the text back into the new link\n    Transforms.wrapNodes(editor, newLink, { split: true })\n    Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'word' })\n    Transforms.move(editor, { distance: 1, unit: 'offset' })\n    Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path })\n  }\n\n  ReactEditor.focus(editor)\n}\n\nexport const LinkButton: React.FC = () => {\n  const { fieldProps } = useElementButton()\n  const [initialState, setInitialState] = useState<FormState>({})\n\n  const { t } = useTranslation()\n  const editor = useSlate()\n  const { config } = useConfig()\n\n  const { closeModal, openModal } = useModal()\n  const drawerSlug = useDrawerSlug('rich-text-link')\n  const { schemaPath } = useFieldProps()\n\n  const {\n    field: { richTextComponentMap },\n  } = fieldProps\n\n  const fields = richTextComponentMap.get(linkFieldsSchemaPath)\n\n  return (\n    <Fragment>\n      <ElementButton\n        className=\"link\"\n        format=\"link\"\n        onClick={async () => {\n          if (isElementActive(editor, 'link')) {\n            unwrapLink(editor)\n          } else {\n            openModal(drawerSlug)\n            const isCollapsed = editor.selection && Range.isCollapsed(editor.selection)\n\n            if (!isCollapsed) {\n              const data = {\n                text: editor.selection ? Editor.string(editor, editor.selection) : '',\n              }\n\n              const { state } = await getFormState({\n                apiRoute: config.routes.api,\n                body: {\n                  data,\n                  operation: 'update',\n                  schemaPath: `${schemaPath}.${linkFieldsSchemaPath}`,\n                },\n                serverURL: config.serverURL,\n              })\n\n              setInitialState(state)\n            }\n          }\n        }}\n        tooltip={t('fields:addLink')}\n      >\n        <LinkIcon />\n      </ElementButton>\n      <LinkDrawer\n        drawerSlug={drawerSlug}\n        fields={Array.isArray(fields) ? fields : []}\n        handleClose={() => {\n          closeModal(drawerSlug)\n        }}\n        handleModalSubmit={(fields) => {\n          insertLink(editor, fields)\n          closeModal(drawerSlug)\n        }}\n        initialState={initialState}\n      />\n    </Fragment>\n  )\n}\n"],"names":["useConfig","useDrawerSlug","useFieldProps","useModal","useTranslation","getFormState","reduceFieldsToValues","React","Fragment","useState","Editor","Range","Transforms","ReactEditor","useSlate","LinkIcon","useElementButton","ElementButton","isElementActive","LinkDrawer","linkFieldsSchemaPath","unwrapLink","insertLink","editor","fields","isCollapsed","selection","data","newLink","type","children","doc","linkType","newTab","url","insertNodes","text","String","wrapNodes","split","delete","at","focus","path","unit","move","distance","insertText","LinkButton","fieldProps","initialState","setInitialState","t","config","closeModal","openModal","drawerSlug","schemaPath","field","richTextComponentMap","get","className","format","onClick","string","state","apiRoute","routes","api","body","operation","serverURL","tooltip","Array","isArray","handleClose","handleModalSubmit"],"mappings":"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"}

package/dist/field/elements/link/Element/index.js

@@ -75,7 +75,7 @@ export const LinkElement = ()=>{
                 text: Node.string(element),
                 url: element.url
             };
-            const state = await getFormState({
+            const { state } = await getFormState({
                 apiRoute: config.routes.api,
                 body: {
                     data,

package/dist/field/elements/link/Element/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/link/Element/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  Popup,\n  Translation,\n  useAuth,\n  useConfig,\n  useDocumentInfo,\n  useDrawerSlug,\n  useLocale,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { deepCopyObject, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Editor, Node, Transforms } from 'slate'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport type { LinkElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { LinkDrawer } from '../LinkDrawer/index.js'\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport { unwrapLink } from '../utilities.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link'\n\n/**\n * This function is called when an existing link is edited.\n * When a link is first created, another function is called: {@link ../Button/index.tsx#insertLink}\n */\nconst insertChange = (editor, fields) => {\n  const data = reduceFieldsToValues(fields, true)\n\n  const [, parentPath] = Editor.above(editor)\n\n  const newNode: Record<string, unknown> = {\n    doc: data.doc,\n    linkType: data.linkType,\n    newTab: data.newTab,\n    url: data.url,\n  }\n\n  if (data.fields) {\n    newNode.fields = data.fields\n  }\n\n  Transforms.setNodes(editor, newNode, { at: parentPath })\n\n  Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'block' })\n  Transforms.move(editor, { distance: 1, unit: 'offset' })\n  Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path })\n\n  ReactEditor.focus(editor)\n}\n\nexport const LinkElement = () => {\n  const { attributes, children, editorRef, element, fieldProps, schemaPath } =\n    useElement<LinkElementType>()\n\n  const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n\n  const {\n    field: { richTextComponentMap },\n  } = fieldProps\n  const fields = richTextComponentMap.get(linkFieldsSchemaPath)\n\n  const editor = useSlate()\n  const { config } = useConfig()\n  const { user } = useAuth()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n  const { closeModal, openModal, toggleModal } = useModal()\n  const [renderModal, setRenderModal] = useState(false)\n  const [renderPopup, setRenderPopup] = useState(false)\n  const [initialState, setInitialState] = useState<FormState>({})\n  const { id, collectionSlug } = useDocumentInfo()\n\n  const drawerSlug = useDrawerSlug('rich-text-link')\n\n  const handleTogglePopup = useCallback((render) => {\n    if (!render) {\n      setRenderPopup(render)\n    }\n  }, [])\n\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const data = {\n        doc: element.doc,\n        fields: deepCopyObject(element.fields),\n        linkType: element.linkType,\n        newTab: element.newTab,\n        text: Node.string(element),\n        url: element.url,\n      }\n\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          data,\n          operation: 'update',\n          schemaPath: fieldMapPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      setInitialState(state)\n    }\n\n    if (renderModal) {\n      void awaitInitialState()\n    }\n  }, [renderModal, element, user, locale, t, collectionSlug, config, id, fieldMapPath])\n\n  return (\n    <span className={baseClass} {...attributes}>\n      <span contentEditable={false} style={{ userSelect: 'none' }}>\n        {renderModal && (\n          <LinkDrawer\n            drawerSlug={drawerSlug}\n            fields={Array.isArray(fields) ? fields : []}\n            handleClose={() => {\n              toggleModal(drawerSlug)\n              setRenderModal(false)\n            }}\n            handleModalSubmit={(fields) => {\n              insertChange(editor, fields)\n              closeModal(drawerSlug)\n              setRenderModal(false)\n            }}\n            initialState={initialState}\n          />\n        )}\n        <Popup\n          boundingRef={editorRef}\n          buttonType=\"none\"\n          forceOpen={renderPopup}\n          horizontalAlign=\"left\"\n          onToggleOpen={handleTogglePopup}\n          render={() => (\n            <div className={`${baseClass}__popup`}>\n              {element.linkType === 'internal' && element.doc?.relationTo && element.doc?.value && (\n                <Translation\n                  elements={{\n                    '0': ({ children }) => (\n                      <a\n                        className={`${baseClass}__link-label`}\n                        href={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}\n                        rel=\"noreferrer\"\n                        target=\"_blank\"\n                        title={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}\n                      >\n                        {children}\n                      </a>\n                    ),\n                  }}\n                  i18nKey=\"fields:linkedTo\"\n                  t={t}\n                  variables={{\n                    label: getTranslation(\n                      config.collections.find(({ slug }) => slug === element.doc.relationTo)?.labels\n                        ?.singular,\n                      i18n,\n                    ),\n                  }}\n                />\n              )}\n              {(element.linkType === 'custom' || !element.linkType) && (\n                <a\n                  className={`${baseClass}__link-label`}\n                  href={element.url}\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  title={element.url}\n                >\n                  {element.url}\n                </a>\n              )}\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__link-edit`}\n                icon=\"edit\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  setRenderPopup(false)\n                  openModal(drawerSlug)\n                  setRenderModal(true)\n                }}\n                round\n                tooltip={t('general:edit')}\n              />\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__link-close`}\n                icon=\"x\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  unwrapLink(editor)\n                }}\n                round\n                tooltip={t('general:remove')}\n              />\n            </div>\n          )}\n          size=\"fit-content\"\n          verticalAlign=\"bottom\"\n        />\n      </span>\n      <span\n        className={[`${baseClass}__popup-toggler`].filter(Boolean).join(' ')}\n        onClick={() => setRenderPopup(true)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            setRenderPopup(true)\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {children}\n      </span>\n    </span>\n  )\n}\n"],"names":["getTranslation","Button","Popup","Translation","useAuth","useConfig","useDocumentInfo","useDrawerSlug","useLocale","useModal","useTranslation","getFormState","deepCopyObject","reduceFieldsToValues","React","useCallback","useEffect","useState","Editor","Node","Transforms","ReactEditor","useSlate","useElement","LinkDrawer","linkFieldsSchemaPath","unwrapLink","baseClass","insertChange","editor","fields","data","parentPath","above","newNode","doc","linkType","newTab","url","setNodes","at","delete","selection","focus","path","unit","move","distance","insertText","String","text","LinkElement","attributes","children","editorRef","element","fieldProps","schemaPath","fieldMapPath","field","richTextComponentMap","get","config","user","code","locale","i18n","t","closeModal","openModal","toggleModal","renderModal","setRenderModal","renderPopup","setRenderPopup","initialState","setInitialState","id","collectionSlug","drawerSlug","handleTogglePopup","render","awaitInitialState","string","state","apiRoute","routes","api","body","operation","serverURL","span","className","contentEditable","style","userSelect","Array","isArray","handleClose","handleModalSubmit","boundingRef","buttonType","forceOpen","horizontalAlign","onToggleOpen","div","relationTo","value","elements","a","href","admin","rel","target","title","i18nKey","variables","label","collections","find","slug","labels","singular","buttonStyle","icon","onClick","e","preventDefault","round","tooltip","size","verticalAlign","filter","Boolean","join","onKeyDown","key","role","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/elements/link/Element/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  Popup,\n  Translation,\n  useAuth,\n  useConfig,\n  useDocumentInfo,\n  useDrawerSlug,\n  useLocale,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport { deepCopyObject, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { Editor, Node, Transforms } from 'slate'\nimport { ReactEditor, useSlate } from 'slate-react'\n\nimport type { LinkElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { LinkDrawer } from '../LinkDrawer/index.js'\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport { unwrapLink } from '../utilities.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link'\n\n/**\n * This function is called when an existing link is edited.\n * When a link is first created, another function is called: {@link ../Button/index.tsx#insertLink}\n */\nconst insertChange = (editor, fields) => {\n  const data = reduceFieldsToValues(fields, true)\n\n  const [, parentPath] = Editor.above(editor)\n\n  const newNode: Record<string, unknown> = {\n    doc: data.doc,\n    linkType: data.linkType,\n    newTab: data.newTab,\n    url: data.url,\n  }\n\n  if (data.fields) {\n    newNode.fields = data.fields\n  }\n\n  Transforms.setNodes(editor, newNode, { at: parentPath })\n\n  Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'block' })\n  Transforms.move(editor, { distance: 1, unit: 'offset' })\n  Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path })\n\n  ReactEditor.focus(editor)\n}\n\nexport const LinkElement = () => {\n  const { attributes, children, editorRef, element, fieldProps, schemaPath } =\n    useElement<LinkElementType>()\n\n  const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n\n  const {\n    field: { richTextComponentMap },\n  } = fieldProps\n  const fields = richTextComponentMap.get(linkFieldsSchemaPath)\n\n  const editor = useSlate()\n  const { config } = useConfig()\n  const { user } = useAuth()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n  const { closeModal, openModal, toggleModal } = useModal()\n  const [renderModal, setRenderModal] = useState(false)\n  const [renderPopup, setRenderPopup] = useState(false)\n  const [initialState, setInitialState] = useState<FormState>({})\n  const { id, collectionSlug } = useDocumentInfo()\n\n  const drawerSlug = useDrawerSlug('rich-text-link')\n\n  const handleTogglePopup = useCallback((render) => {\n    if (!render) {\n      setRenderPopup(render)\n    }\n  }, [])\n\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const data = {\n        doc: element.doc,\n        fields: deepCopyObject(element.fields),\n        linkType: element.linkType,\n        newTab: element.newTab,\n        text: Node.string(element),\n        url: element.url,\n      }\n\n      const { state } = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          data,\n          operation: 'update',\n          schemaPath: fieldMapPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      setInitialState(state)\n    }\n\n    if (renderModal) {\n      void awaitInitialState()\n    }\n  }, [renderModal, element, user, locale, t, collectionSlug, config, id, fieldMapPath])\n\n  return (\n    <span className={baseClass} {...attributes}>\n      <span contentEditable={false} style={{ userSelect: 'none' }}>\n        {renderModal && (\n          <LinkDrawer\n            drawerSlug={drawerSlug}\n            fields={Array.isArray(fields) ? fields : []}\n            handleClose={() => {\n              toggleModal(drawerSlug)\n              setRenderModal(false)\n            }}\n            handleModalSubmit={(fields) => {\n              insertChange(editor, fields)\n              closeModal(drawerSlug)\n              setRenderModal(false)\n            }}\n            initialState={initialState}\n          />\n        )}\n        <Popup\n          boundingRef={editorRef}\n          buttonType=\"none\"\n          forceOpen={renderPopup}\n          horizontalAlign=\"left\"\n          onToggleOpen={handleTogglePopup}\n          render={() => (\n            <div className={`${baseClass}__popup`}>\n              {element.linkType === 'internal' && element.doc?.relationTo && element.doc?.value && (\n                <Translation\n                  elements={{\n                    '0': ({ children }) => (\n                      <a\n                        className={`${baseClass}__link-label`}\n                        href={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}\n                        rel=\"noreferrer\"\n                        target=\"_blank\"\n                        title={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}\n                      >\n                        {children}\n                      </a>\n                    ),\n                  }}\n                  i18nKey=\"fields:linkedTo\"\n                  t={t}\n                  variables={{\n                    label: getTranslation(\n                      config.collections.find(({ slug }) => slug === element.doc.relationTo)?.labels\n                        ?.singular,\n                      i18n,\n                    ),\n                  }}\n                />\n              )}\n              {(element.linkType === 'custom' || !element.linkType) && (\n                <a\n                  className={`${baseClass}__link-label`}\n                  href={element.url}\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  title={element.url}\n                >\n                  {element.url}\n                </a>\n              )}\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__link-edit`}\n                icon=\"edit\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  setRenderPopup(false)\n                  openModal(drawerSlug)\n                  setRenderModal(true)\n                }}\n                round\n                tooltip={t('general:edit')}\n              />\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__link-close`}\n                icon=\"x\"\n                onClick={(e) => {\n                  e.preventDefault()\n                  unwrapLink(editor)\n                }}\n                round\n                tooltip={t('general:remove')}\n              />\n            </div>\n          )}\n          size=\"fit-content\"\n          verticalAlign=\"bottom\"\n        />\n      </span>\n      <span\n        className={[`${baseClass}__popup-toggler`].filter(Boolean).join(' ')}\n        onClick={() => setRenderPopup(true)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            setRenderPopup(true)\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {children}\n      </span>\n    </span>\n  )\n}\n"],"names":["getTranslation","Button","Popup","Translation","useAuth","useConfig","useDocumentInfo","useDrawerSlug","useLocale","useModal","useTranslation","getFormState","deepCopyObject","reduceFieldsToValues","React","useCallback","useEffect","useState","Editor","Node","Transforms","ReactEditor","useSlate","useElement","LinkDrawer","linkFieldsSchemaPath","unwrapLink","baseClass","insertChange","editor","fields","data","parentPath","above","newNode","doc","linkType","newTab","url","setNodes","at","delete","selection","focus","path","unit","move","distance","insertText","String","text","LinkElement","attributes","children","editorRef","element","fieldProps","schemaPath","fieldMapPath","field","richTextComponentMap","get","config","user","code","locale","i18n","t","closeModal","openModal","toggleModal","renderModal","setRenderModal","renderPopup","setRenderPopup","initialState","setInitialState","id","collectionSlug","drawerSlug","handleTogglePopup","render","awaitInitialState","string","state","apiRoute","routes","api","body","operation","serverURL","span","className","contentEditable","style","userSelect","Array","isArray","handleClose","handleModalSubmit","boundingRef","buttonType","forceOpen","horizontalAlign","onToggleOpen","div","relationTo","value","elements","a","href","admin","rel","target","title","i18nKey","variables","label","collections","find","slug","labels","singular","buttonStyle","icon","onClick","e","preventDefault","round","tooltip","size","verticalAlign","filter","Boolean","join","onKeyDown","key","role","tabIndex"],"mappings":"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"}

package/dist/field/elements/link/Element/index.scss

@@ -1,88 +1,90 @@
 @import '../../../../scss/styles.scss';
 
-.rich-text-link {
-  position: relative;
+@layer payload-default {
+  .rich-text-link {
+    position: relative;
 
-  .popup {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    .popup {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
 
-    .popup__hide-scrollbar,
-    .popup__scroll-container {
-      overflow: visible;
+      .popup__hide-scrollbar,
+      .popup__scroll-container {
+        overflow: visible;
+      }
+
+      .popup__scroll-content {
+        white-space: pre;
+      }
     }
 
-    .popup__scroll-content {
-      white-space: pre;
+    .icon--x line {
+      stroke-width: 2px;
     }
-  }
 
-  .icon--x line {
-    stroke-width: 2px;
-  }
+    &__popup {
+      @extend %body;
+      font-family: var(--font-body);
+      display: flex;
 
-  &__popup {
-    @extend %body;
-    font-family: var(--font-body);
-    display: flex;
-
-    button {
-      @extend %btn-reset;
-      font-weight: 600;
-      cursor: pointer;
-      margin: 0;
+      button {
+        @extend %btn-reset;
+        font-weight: 600;
+        cursor: pointer;
+        margin: 0;
+      }
     }
-  }
 
-  &__link-label {
-    max-width: base(8);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border-radius: 2px;
+    &__link-label {
+      max-width: base(8);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      border-radius: 2px;
 
-    &:hover {
-      background-color: var(--popup-button-highlight);
+      &:hover {
+        background-color: var(--popup-button-highlight);
+      }
     }
   }
-}
 
-.rich-text-link__popup {
-  display: flex;
-  gap: calc(var(--base) * 0.25);
-  button {
-    &:hover {
-      .btn__icon {
-        background-color: var(--popup-button-highlight);
-        .fill {
-          fill: var(--theme-text);
-        }
-        .stroke {
-          stroke: var(--theme-text);
+  .rich-text-link__popup {
+    display: flex;
+    gap: calc(var(--base) * 0.25);
+    button {
+      &:hover {
+        .btn__icon {
+          background-color: var(--popup-button-highlight);
+          .fill {
+            fill: var(--theme-text);
+          }
+          .stroke {
+            stroke: var(--theme-text);
+          }
         }
       }
     }
   }
-}
 
-.rich-text-link__popup-toggler {
-  position: relative;
-  border: 0;
-  background-color: transparent;
-  padding: 0;
-  color: var(--theme-success-600);
-  text-decoration: none;
-  border-bottom: 1px dotted;
-  cursor: text;
+  .rich-text-link__popup-toggler {
+    position: relative;
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    color: var(--theme-success-600);
+    text-decoration: none;
+    border-bottom: 1px dotted;
+    cursor: text;
 
-  &:focus,
-  &:focus-within {
-    outline: none;
-  }
+    &:focus,
+    &:focus-within {
+      outline: none;
+    }
 
-  &--open {
-    z-index: var(--z-popup);
+    &--open {
+      z-index: var(--z-popup);
+    }
   }
 }

package/dist/field/elements/link/LinkDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2CtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6CtC,CAAA"}

package/dist/field/elements/link/LinkDrawer/index.js

@@ -13,7 +13,7 @@ export const LinkDrawer = ({ drawerSlug, fields, handleModalSubmit, initialState
     const { id } = useDocumentInfo();
     const { config } = useConfig();
     const onChange = useCallback(async ({ formState: prevFormState })=>{
-        return await getFormState({
+        const { state } = await getFormState({
             apiRoute: config.routes.api,
             body: {
                 id,
@@ -23,6 +23,7 @@ export const LinkDrawer = ({ drawerSlug, fields, handleModalSubmit, initialState
             },
             serverURL: config.serverURL
         });
+        return state;
     }, [
         config.routes.api,
         config.serverURL,

package/dist/field/elements/link/LinkDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\n\nimport {\n  Drawer,\n  Form,\n  FormSubmit,\n  RenderFields,\n  useConfig,\n  useDocumentInfo,\n  useEditDepth,\n  useFieldProps,\n  useHotkey,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React, { useCallback, useRef } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link-edit-modal'\n\nexport const LinkDrawer: React.FC<Props> = ({\n  drawerSlug,\n  fields,\n  handleModalSubmit,\n  initialState,\n}) => {\n  const { t } = useTranslation()\n  const { schemaPath } = useFieldProps()\n  const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n  const { id } = useDocumentInfo()\n  const { config } = useConfig()\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      return await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: fieldMapPath,\n        },\n        serverURL: config.serverURL,\n      })\n    },\n\n    [config.routes.api, config.serverURL, fieldMapPath, id],\n  )\n\n  return (\n    <Drawer className={baseClass} slug={drawerSlug} title={t('fields:editLink')}>\n      <Form\n        beforeSubmit={[onChange]}\n        disableValidationOnSubmit\n        initialState={initialState}\n        onChange={[onChange]}\n        onSubmit={handleModalSubmit}\n      >\n        <RenderFields fields={fields} forceRender path=\"\" readOnly={false} schemaPath=\"\" />\n        <LinkSubmit />\n      </Form>\n    </Drawer>\n  )\n}\n\nconst LinkSubmit: React.FC = () => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLButtonElement>(null)\n  const editDepth = useEditDepth()\n\n  useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (ref?.current) {\n      ref.current.click()\n    }\n  })\n\n  return <FormSubmit ref={ref}>{t('general:submit')}</FormSubmit>\n}\n"],"names":["Drawer","Form","FormSubmit","RenderFields","useConfig","useDocumentInfo","useEditDepth","useFieldProps","useHotkey","useTranslation","getFormState","React","useCallback","useRef","linkFieldsSchemaPath","baseClass","LinkDrawer","drawerSlug","fields","handleModalSubmit","initialState","t","schemaPath","fieldMapPath","id","config","onChange","formState","prevFormState","apiRoute","routes","api","body","operation","serverURL","className","slug","title","beforeSubmit","disableValidationOnSubmit","onSubmit","forceRender","path","readOnly","LinkSubmit","ref","editDepth","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click"],"mappings":"AAAA;;AAIA,SACEA,MAAM,EACNC,IAAI,EACJC,UAAU,EACVC,YAAY,EACZC,SAAS,EACTC,eAAe,EACfC,YAAY,EACZC,aAAa,EACbC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,YAAY,QAAQ,wBAAuB;AACpD,OAAOC,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAO;AAIlD,SAASC,oBAAoB,QAAQ,eAAc;AACnD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAA8B,CAAC,EAC1CC,UAAU,EACVC,MAAM,EACNC,iBAAiB,EACjBC,YAAY,EACb;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGZ;IACd,MAAM,EAAEa,UAAU,EAAE,GAAGf;IACvB,MAAMgB,eAAe,CAAC,EAAED,WAAW,CAAC,EAAER,qBAAqB,CAAC;IAC5D,MAAM,EAAEU,EAAE,EAAE,GAAGnB;IACf,MAAM,EAAEoB,MAAM,EAAE,GAAGrB;IAEnB,MAAMsB,WAAqCd,YACzC,OAAO,EAAEe,WAAWC,aAAa,EAAE;QACjC,OAAO,MAAMlB,aAAa;YACxBmB,UAAUJ,OAAOK,MAAM,CAACC,GAAG;YAC3BC,MAAM;gBACJR;gBACAG,WAAWC;gBACXK,WAAW;gBACXX,YAAYC;YACd;YACAW,WAAWT,OAAOS,SAAS;QAC7B;IACF,GAEA;QAACT,OAAOK,MAAM,CAACC,GAAG;QAAEN,OAAOS,SAAS;QAAEX;QAAcC;KAAG;IAGzD,qBACE,KAACxB;QAAOmC,WAAWpB;QAAWqB,MAAMnB;QAAYoB,OAAOhB,EAAE;kBACvD,cAAA,MAACpB;YACCqC,cAAc;gBAACZ;aAAS;YACxBa,yBAAyB;YACzBnB,cAAcA;YACdM,UAAU;gBAACA;aAAS;YACpBc,UAAUrB;;8BAEV,KAAChB;oBAAae,QAAQA;oBAAQuB,WAAW;oBAACC,MAAK;oBAAGC,UAAU;oBAAOrB,YAAW;;8BAC9E,KAACsB;;;;AAIT,EAAC;AAED,MAAMA,aAAuB;IAC3B,MAAM,EAAEvB,CAAC,EAAE,GAAGZ;IACd,MAAMoC,MAAMhC,OAA0B;IACtC,MAAMiC,YAAYxC;IAElBE,UAAU;QAAEuC,YAAY;QAAMD;QAAWE,UAAU;YAAC;SAAI;IAAC,GAAG,CAACC;QAC3DA,EAAEC,cAAc;QAChBD,EAAEE,eAAe;QACjB,IAAIN,KAAKO,SAAS;YAChBP,IAAIO,OAAO,CAACC,KAAK;QACnB;IACF;IAEA,qBAAO,KAACnD;QAAW2C,KAAKA;kBAAMxB,EAAE;;AAClC"}
+{"version":3,"sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\n\nimport {\n  Drawer,\n  Form,\n  FormSubmit,\n  RenderFields,\n  useConfig,\n  useDocumentInfo,\n  useEditDepth,\n  useFieldProps,\n  useHotkey,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React, { useCallback, useRef } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link-edit-modal'\n\nexport const LinkDrawer: React.FC<Props> = ({\n  drawerSlug,\n  fields,\n  handleModalSubmit,\n  initialState,\n}) => {\n  const { t } = useTranslation()\n  const { schemaPath } = useFieldProps()\n  const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n  const { id } = useDocumentInfo()\n  const { config } = useConfig()\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const { state } = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: fieldMapPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      return state\n    },\n\n    [config.routes.api, config.serverURL, fieldMapPath, id],\n  )\n\n  return (\n    <Drawer className={baseClass} slug={drawerSlug} title={t('fields:editLink')}>\n      <Form\n        beforeSubmit={[onChange]}\n        disableValidationOnSubmit\n        initialState={initialState}\n        onChange={[onChange]}\n        onSubmit={handleModalSubmit}\n      >\n        <RenderFields fields={fields} forceRender path=\"\" readOnly={false} schemaPath=\"\" />\n        <LinkSubmit />\n      </Form>\n    </Drawer>\n  )\n}\n\nconst LinkSubmit: React.FC = () => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLButtonElement>(null)\n  const editDepth = useEditDepth()\n\n  useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (ref?.current) {\n      ref.current.click()\n    }\n  })\n\n  return <FormSubmit ref={ref}>{t('general:submit')}</FormSubmit>\n}\n"],"names":["Drawer","Form","FormSubmit","RenderFields","useConfig","useDocumentInfo","useEditDepth","useFieldProps","useHotkey","useTranslation","getFormState","React","useCallback","useRef","linkFieldsSchemaPath","baseClass","LinkDrawer","drawerSlug","fields","handleModalSubmit","initialState","t","schemaPath","fieldMapPath","id","config","onChange","formState","prevFormState","state","apiRoute","routes","api","body","operation","serverURL","className","slug","title","beforeSubmit","disableValidationOnSubmit","onSubmit","forceRender","path","readOnly","LinkSubmit","ref","editDepth","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click"],"mappings":"AAAA;;AAIA,SACEA,MAAM,EACNC,IAAI,EACJC,UAAU,EACVC,YAAY,EACZC,SAAS,EACTC,eAAe,EACfC,YAAY,EACZC,aAAa,EACbC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,YAAY,QAAQ,wBAAuB;AACpD,OAAOC,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAO;AAIlD,SAASC,oBAAoB,QAAQ,eAAc;AACnD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAA8B,CAAC,EAC1CC,UAAU,EACVC,MAAM,EACNC,iBAAiB,EACjBC,YAAY,EACb;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGZ;IACd,MAAM,EAAEa,UAAU,EAAE,GAAGf;IACvB,MAAMgB,eAAe,CAAC,EAAED,WAAW,CAAC,EAAER,qBAAqB,CAAC;IAC5D,MAAM,EAAEU,EAAE,EAAE,GAAGnB;IACf,MAAM,EAAEoB,MAAM,EAAE,GAAGrB;IAEnB,MAAMsB,WAAqCd,YACzC,OAAO,EAAEe,WAAWC,aAAa,EAAE;QACjC,MAAM,EAAEC,KAAK,EAAE,GAAG,MAAMnB,aAAa;YACnCoB,UAAUL,OAAOM,MAAM,CAACC,GAAG;YAC3BC,MAAM;gBACJT;gBACAG,WAAWC;gBACXM,WAAW;gBACXZ,YAAYC;YACd;YACAY,WAAWV,OAAOU,SAAS;QAC7B;QAEA,OAAON;IACT,GAEA;QAACJ,OAAOM,MAAM,CAACC,GAAG;QAAEP,OAAOU,SAAS;QAAEZ;QAAcC;KAAG;IAGzD,qBACE,KAACxB;QAAOoC,WAAWrB;QAAWsB,MAAMpB;QAAYqB,OAAOjB,EAAE;kBACvD,cAAA,MAACpB;YACCsC,cAAc;gBAACb;aAAS;YACxBc,yBAAyB;YACzBpB,cAAcA;YACdM,UAAU;gBAACA;aAAS;YACpBe,UAAUtB;;8BAEV,KAAChB;oBAAae,QAAQA;oBAAQwB,WAAW;oBAACC,MAAK;oBAAGC,UAAU;oBAAOtB,YAAW;;8BAC9E,KAACuB;;;;AAIT,EAAC;AAED,MAAMA,aAAuB;IAC3B,MAAM,EAAExB,CAAC,EAAE,GAAGZ;IACd,MAAMqC,MAAMjC,OAA0B;IACtC,MAAMkC,YAAYzC;IAElBE,UAAU;QAAEwC,YAAY;QAAMD;QAAWE,UAAU;YAAC;SAAI;IAAC,GAAG,CAACC;QAC3DA,EAAEC,cAAc;QAChBD,EAAEE,eAAe;QACjB,IAAIN,KAAKO,SAAS;YAChBP,IAAIO,OAAO,CAACC,KAAK;QACnB;IACF;IAEA,qBAAO,KAACpD;QAAW4C,KAAKA;kBAAMzB,EAAE;;AAClC"}

package/dist/field/elements/link/LinkDrawer/index.scss

@@ -1,49 +1,51 @@
 @import '../../../../scss/styles.scss';
 
-.rich-text-link-edit-modal {
-  &__template {
-    position: relative;
-    z-index: 1;
-    padding-top: base(1);
-    padding-bottom: base(2);
-  }
+@layer payload-default {
+  .rich-text-link-edit-modal {
+    &__template {
+      position: relative;
+      z-index: 1;
+      padding-top: base(1);
+      padding-bottom: base(2);
+    }
 
-  &__header {
-    width: 100%;
-    margin-bottom: $baseline;
-    display: flex;
-    justify-content: space-between;
-    margin-top: base(2.5);
-    margin-bottom: base(1);
+    &__header {
+      width: 100%;
+      margin-bottom: $baseline;
+      display: flex;
+      justify-content: space-between;
+      margin-top: base(2.5);
+      margin-bottom: base(1);
 
-    @include mid-break {
-      margin-top: base(1.5);
+      @include mid-break {
+        margin-top: base(1.5);
+      }
     }
-  }
 
-  &__header-text {
-    margin: 0;
-  }
+    &__header-text {
+      margin: 0;
+    }
 
-  &__header-close {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    overflow: hidden;
-    width: base(1);
-    height: base(1);
+    &__header-close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      overflow: hidden;
+      width: base(1);
+      height: base(1);
 
-    svg {
-      width: base(2);
-      height: base(2);
-      position: relative;
-      inset-inline-start: base(-0.5);
-      top: base(-0.5);
+      svg {
+        width: base(2);
+        height: base(2);
+        position: relative;
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);
 
-      .stroke {
-        stroke-width: 2px;
-        vector-effect: non-scaling-stroke;
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
       }
     }
   }

package/dist/field/elements/ol/index.scss

@@ -1,7 +1,9 @@
 @import '../../../scss/styles.scss';
 
-.rich-text-ol {
-  &[data-slate-node='element'] {
-    margin: base(0.625) 0;
+@layer payload-default {
+  .rich-text-ol {
+    &[data-slate-node='element'] {
+      margin: base(0.625) 0;
+    }
   }
 }

package/dist/field/elements/relationship/Button/index.scss

@@ -1,7 +1,9 @@
 @import '../../../../scss/styles.scss';
 
-.relationship-rich-text-button {
-  display: flex;
-  align-items: center;
-  height: 100%;
+@layer payload-default {
+  .relationship-rich-text-button {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
 }