@payloadcms/richtext-slate 3.0.0-beta.12 → 3.0.0-beta.121

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

@@ -1,11 +1,7 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { Button } from '@payloadcms/ui/elements/Button';
-import { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer';
-import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer';
-import usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI';
-import { useConfig } from '@payloadcms/ui/providers/Config';
-import { useTranslation } from '@payloadcms/ui/providers/Translation';
+import { Button, useConfig, useDocumentDrawer, useListDrawer, usePayloadAPI, useTranslation } from '@payloadcms/ui';
 import React, { useCallback, useReducer, useState } from 'react';
 import { Transforms } from 'slate';
 import { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react';
@@ -16,9 +12,9 @@ const baseClass = 'rich-text-relationship';
 const initialParams = {
     depth: 0
 };
-const RelationshipElement = ()=>{
+const RelationshipElementComponent = ()=>{
     const { attributes, children, element, element: { relationTo, value }, fieldProps } = useElement();
-    const { collections, routes: { api }, serverURL } = useConfig();
+    const { config: { collections, routes: { api }, serverURL } } = useConfig();
     const [enabledCollectionSlugs] = useState(()=>collections.filter(({ admin: { enableRichTextRelationship } })=>enableRichTextRelationship).map(({ slug })=>slug));
     const [relatedCollection, setRelatedCollection] = useState(()=>collections.find((coll)=>coll.slug === relationTo));
     const selected = useSelected();
@@ -107,57 +103,81 @@ const RelationshipElement = ()=>{
         setParams,
         collections
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: [
             baseClass,
             selected && focused && `${baseClass}--selected`
         ].filter(Boolean).join(' '),
         contentEditable: false,
-        ...attributes
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrap`
-    }, /*#__PURE__*/ React.createElement("p", {
-        className: `${baseClass}__label`
-    }, t('fields:labelRelationship', {
-        label: getTranslation(relatedCollection.labels.singular, i18n)
-    })), /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
-        className: `${baseClass}__doc-drawer-toggler`
-    }, /*#__PURE__*/ React.createElement("p", {
-        className: `${baseClass}__title`
-    }, data[relatedCollection?.admin?.useAsTitle || 'id']))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions`
-    }, /*#__PURE__*/ React.createElement(ListDrawerToggler, {
-        className: `${baseClass}__list-drawer-toggler`,
-        disabled: fieldProps?.readOnly
-    }, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        disabled: fieldProps?.readOnly,
-        el: "div",
-        icon: "swap",
-        onClick: ()=>{
-        // do nothing
-        },
-        round: true,
-        tooltip: t('fields:swapRelationship')
-    })), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__removeButton`,
-        disabled: fieldProps?.readOnly,
-        icon: "x",
-        onClick: (e)=>{
-            e.preventDefault();
-            removeRelationship();
-        },
-        round: true,
-        tooltip: t('fields:removeRelationship')
-    })), value?.id && /*#__PURE__*/ React.createElement(DocumentDrawer, {
-        onSave: updateRelationship
-    }), /*#__PURE__*/ React.createElement(ListDrawer, {
-        onSelect: swapRelationship
-    }), children);
+        ...attributes,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__wrap`,
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: `${baseClass}__label`,
+                        children: t('fields:labelRelationship', {
+                            label: getTranslation(relatedCollection.labels.singular, i18n)
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                        className: `${baseClass}__doc-drawer-toggler`,
+                        children: /*#__PURE__*/ _jsx("p", {
+                            className: `${baseClass}__title`,
+                            children: data[relatedCollection?.admin?.useAsTitle || 'id']
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__actions`,
+                children: [
+                    /*#__PURE__*/ _jsx(ListDrawerToggler, {
+                        className: `${baseClass}__list-drawer-toggler`,
+                        disabled: fieldProps?.field?.admin?.readOnly,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "icon-label",
+                            disabled: fieldProps?.field?.admin?.readOnly,
+                            el: "div",
+                            icon: "swap",
+                            onClick: ()=>{
+                            // do nothing
+                            },
+                            round: true,
+                            tooltip: t('fields:swapRelationship')
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "icon-label",
+                        className: `${baseClass}__removeButton`,
+                        disabled: fieldProps?.field?.admin?.readOnly,
+                        icon: "x",
+                        onClick: (e)=>{
+                            e.preventDefault();
+                            removeRelationship();
+                        },
+                        round: true,
+                        tooltip: t('fields:removeRelationship')
+                    })
+                ]
+            }),
+            value?.id && /*#__PURE__*/ _jsx(DocumentDrawer, {
+                onSave: updateRelationship
+            }),
+            /*#__PURE__*/ _jsx(ListDrawer, {
+                onSelect: swapRelationship
+            }),
+            children
+        ]
+    });
 };
-export const Element = (props)=>{
-    return /*#__PURE__*/ React.createElement(EnabledRelationshipsCondition, props, /*#__PURE__*/ React.createElement(RelationshipElement, props));
+export const RelationshipElement = (props)=>{
+    return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
+        ...props,
+        children: /*#__PURE__*/ _jsx(RelationshipElementComponent, {
+            ...props
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/relationship/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Button } from '@payloadcms/ui/elements/Button'\nimport { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer'\nimport { useListDrawer } from '@payloadcms/ui/elements/ListDrawer'\nimport usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { RelationshipElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = FormFieldBase & {\n  name: string\n  richTextComponentMap: Map<string, React.ReactNode>\n}\n\nconst RelationshipElement: React.FC<Props> = () => {\n  const {\n    attributes,\n    children,\n    element,\n    element: { relationTo, value },\n    fieldProps,\n  } = useElement<RelationshipElementType>()\n\n  const {\n    collections,\n    routes: { api },\n    serverURL,\n  } = useConfig()\n  const [enabledCollectionSlugs] = useState(() =>\n    collections\n      .filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship)\n      .map(({ slug }) => slug),\n  )\n  const [relatedCollection, setRelatedCollection] = useState(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const selected = useSelected()\n  const focused = useFocused()\n  const { i18n, t } = useTranslation()\n  const editor = useSlateStatic()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: relatedCollection.slug,\n  })\n\n  const removeRelationship = useCallback(() => {\n    const elementPath = ReactEditor.findPath(editor, element)\n\n    Transforms.removeNodes(editor, { at: elementPath })\n  }, [editor, element])\n\n  const updateRelationship = React.useCallback(\n    ({ doc }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: relatedCollection.slug,\n          value: { id: doc.id },\n        },\n        { at: elementPath },\n      )\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      closeDrawer()\n      dispatchCacheBust()\n    },\n    [editor, element, relatedCollection, cacheBust, setParams, closeDrawer],\n  )\n\n  const swapRelationship = React.useCallback(\n    ({ collectionSlug, docID }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: collectionSlug,\n          value: { id: docID },\n        },\n        { at: elementPath },\n      )\n\n      setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      closeListDrawer()\n      dispatchCacheBust()\n    },\n    [closeListDrawer, editor, element, cacheBust, setParams, collections],\n  )\n\n  return (\n    <div\n      className={[baseClass, selected && focused && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      contentEditable={false}\n      {...attributes}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <p className={`${baseClass}__label`}>\n          {t('fields:labelRelationship', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n        </p>\n        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n          <p className={`${baseClass}__title`}>\n            {data[relatedCollection?.admin?.useAsTitle || 'id']}\n          </p>\n        </DocumentDrawerToggler>\n      </div>\n      <div className={`${baseClass}__actions`}>\n        <ListDrawerToggler\n          className={`${baseClass}__list-drawer-toggler`}\n          disabled={fieldProps?.readOnly}\n        >\n          <Button\n            buttonStyle=\"icon-label\"\n            disabled={fieldProps?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              // do nothing\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n        </ListDrawerToggler>\n        <Button\n          buttonStyle=\"icon-label\"\n          className={`${baseClass}__removeButton`}\n          disabled={fieldProps?.readOnly}\n          icon=\"x\"\n          onClick={(e) => {\n            e.preventDefault()\n            removeRelationship()\n          }}\n          round\n          tooltip={t('fields:removeRelationship')}\n        />\n      </div>\n      {value?.id && <DocumentDrawer onSave={updateRelationship} />}\n      <ListDrawer onSelect={swapRelationship} />\n      {children}\n    </div>\n  )\n}\n\nexport const Element = (props: Props): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipElement {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["getTranslation","Button","useDocumentDrawer","useListDrawer","usePayloadAPI","useConfig","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","baseClass","initialParams","depth","RelationshipElement","attributes","children","element","relationTo","value","fieldProps","collections","routes","api","serverURL","enabledCollectionSlugs","filter","admin","enableRichTextRelationship","map","slug","relatedCollection","setRelatedCollection","find","coll","selected","focused","i18n","t","editor","cacheBust","dispatchCacheBust","state","data","setParams","id","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","ListDrawer","ListDrawerToggler","closeListDrawer","collectionSlugs","selectedCollection","removeRelationship","elementPath","findPath","removeNodes","at","updateRelationship","doc","setNodes","type","text","swapRelationship","docID","div","className","Boolean","join","contentEditable","p","label","labels","singular","useAsTitle","disabled","readOnly","buttonStyle","el","icon","onClick","round","tooltip","e","preventDefault","onSave","onSelect","Element","props"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/elements/relationship/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase, MappedComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  useConfig,\n  useDocumentDrawer,\n  useListDrawer,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { RelationshipElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  name: string\n  richTextComponentMap: Map<string, MappedComponent>\n} & FormFieldBase\n\nconst RelationshipElementComponent: React.FC<Props> = () => {\n  const {\n    attributes,\n    children,\n    element,\n    element: { relationTo, value },\n    fieldProps,\n  } = useElement<RelationshipElementType>()\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const [enabledCollectionSlugs] = useState(() =>\n    collections\n      .filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship)\n      .map(({ slug }) => slug),\n  )\n  const [relatedCollection, setRelatedCollection] = useState(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const selected = useSelected()\n  const focused = useFocused()\n  const { i18n, t } = useTranslation()\n  const editor = useSlateStatic()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: relatedCollection.slug,\n  })\n\n  const removeRelationship = useCallback(() => {\n    const elementPath = ReactEditor.findPath(editor, element)\n\n    Transforms.removeNodes(editor, { at: elementPath })\n  }, [editor, element])\n\n  const updateRelationship = React.useCallback(\n    ({ doc }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: relatedCollection.slug,\n          value: { id: doc.id },\n        },\n        { at: elementPath },\n      )\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      closeDrawer()\n      dispatchCacheBust()\n    },\n    [editor, element, relatedCollection, cacheBust, setParams, closeDrawer],\n  )\n\n  const swapRelationship = React.useCallback(\n    ({ collectionSlug, docID }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: collectionSlug,\n          value: { id: docID },\n        },\n        { at: elementPath },\n      )\n\n      setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      closeListDrawer()\n      dispatchCacheBust()\n    },\n    [closeListDrawer, editor, element, cacheBust, setParams, collections],\n  )\n\n  return (\n    <div\n      className={[baseClass, selected && focused && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      contentEditable={false}\n      {...attributes}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <p className={`${baseClass}__label`}>\n          {t('fields:labelRelationship', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n        </p>\n        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n          <p className={`${baseClass}__title`}>\n            {data[relatedCollection?.admin?.useAsTitle || 'id']}\n          </p>\n        </DocumentDrawerToggler>\n      </div>\n      <div className={`${baseClass}__actions`}>\n        <ListDrawerToggler\n          className={`${baseClass}__list-drawer-toggler`}\n          disabled={fieldProps?.field?.admin?.readOnly}\n        >\n          <Button\n            buttonStyle=\"icon-label\"\n            disabled={fieldProps?.field?.admin?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              // do nothing\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n        </ListDrawerToggler>\n        <Button\n          buttonStyle=\"icon-label\"\n          className={`${baseClass}__removeButton`}\n          disabled={fieldProps?.field?.admin?.readOnly}\n          icon=\"x\"\n          onClick={(e) => {\n            e.preventDefault()\n            removeRelationship()\n          }}\n          round\n          tooltip={t('fields:removeRelationship')}\n        />\n      </div>\n      {value?.id && <DocumentDrawer onSave={updateRelationship} />}\n      <ListDrawer onSelect={swapRelationship} />\n      {children}\n    </div>\n  )\n}\n\nexport const RelationshipElement = (props: Props): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipElementComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["getTranslation","Button","useConfig","useDocumentDrawer","useListDrawer","usePayloadAPI","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","baseClass","initialParams","depth","RelationshipElementComponent","attributes","children","element","relationTo","value","fieldProps","config","collections","routes","api","serverURL","enabledCollectionSlugs","filter","admin","enableRichTextRelationship","map","slug","relatedCollection","setRelatedCollection","find","coll","selected","focused","i18n","t","editor","cacheBust","dispatchCacheBust","state","data","setParams","id","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","ListDrawer","ListDrawerToggler","closeListDrawer","collectionSlugs","selectedCollection","removeRelationship","elementPath","findPath","removeNodes","at","updateRelationship","doc","setNodes","type","text","swapRelationship","docID","div","className","Boolean","join","contentEditable","p","label","labels","singular","useAsTitle","disabled","field","readOnly","buttonStyle","el","icon","onClick","round","tooltip","e","preventDefault","onSave","onSelect","RelationshipElement","props"],"mappings":"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"}

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

@@ -1,93 +1,95 @@
 @import '../../../../scss/styles.scss';
 
-.rich-text-relationship {
-  @extend %body;
-  @include shadow-sm;
-  padding: base(0.75);
-  display: flex;
-  align-items: center;
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-elevation-100);
-  max-width: base(15);
-  font-family: var(--font-body);
-
-  &:hover {
-    border: 1px solid var(--theme-elevation-150);
-  }
-
-  &[data-slate-node='element'] {
-    margin: base(0.625) 0;
-  }
-
-  &__label {
-    margin-bottom: base(0.25);
-  }
-
-  &__title {
-    margin: 0;
-  }
+@layer payload-default {
+  .rich-text-relationship {
+    @extend %body;
+    @include shadow-sm;
+    padding: base(0.75);
+    display: flex;
+    align-items: center;
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-elevation-100);
+    max-width: base(15);
+    font-family: var(--font-body);
 
-  &__label,
-  &__title {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    line-height: 1 !important;
-  }
+    &:hover {
+      border: 1px solid var(--theme-elevation-150);
+    }
 
-  &__title {
-    font-weight: bold;
-  }
+    &[data-slate-node='element'] {
+      margin: base(0.625) 0;
+    }
 
-  &__wrap {
-    flex-grow: 1;
-    overflow: hidden;
-  }
+    &__label {
+      margin-bottom: base(0.25);
+    }
 
-  &--selected {
-    box-shadow: $focus-box-shadow;
-    outline: none;
-  }
+    &__title {
+      margin: 0;
+    }
 
-  .rich-text-relationship__doc-drawer-toggler {
-    text-decoration: underline;
-    pointer-events: all;
-    line-height: inherit;
-  }
+    &__label,
+    &__title {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 1 !important;
+    }
 
-  &__actions {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin-left: base(0.5);
+    &__title {
+      font-weight: bold;
+    }
 
-    & > *:not(:last-child) {
-      margin-right: base(0.25);
+    &__wrap {
+      flex-grow: 1;
+      overflow: hidden;
     }
-  }
 
-  &__removeButton {
-    margin: 0;
+    &--selected {
+      box-shadow: $focus-box-shadow;
+      outline: none;
+    }
 
-    line {
-      stroke-width: $style-stroke-width-m;
+    .rich-text-relationship__doc-drawer-toggler {
+      text-decoration: underline;
+      pointer-events: all;
+      line-height: inherit;
     }
 
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
+    &__actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: base(0.5);
+
+      & > *:not(:last-child) {
+        margin-right: base(0.25);
+      }
     }
-  }
 
-  &__doc-drawer-toggler,
-  &__list-drawer-toggler {
-    & > * {
+    &__removeButton {
       margin: 0;
+
+      line {
+        stroke-width: $style-stroke-width-m;
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
     }
 
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
+    &__doc-drawer-toggler,
+    &__list-drawer-toggler {
+      & > * {
+        margin: 0;
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
     }
   }
 }

package/dist/field/elements/relationship/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/relationship/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAO9D,eAAO,MAAM,YAAY,EAAE,qBAK1B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/relationship/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAI9D,eAAO,MAAM,YAAY,EAAE,qBAK1B,CAAA"}

package/dist/field/elements/relationship/index.js

@@ -1,13 +1,10 @@
-import { Button } from './Button/index.js';
-import { Element } from './Element/index.js';
-import { WithRelationship } from './plugin.js';
 import { relationshipName } from './shared.js';
 export const relationship = {
     name: relationshipName,
-    Button,
-    Element,
+    Button: '@payloadcms/richtext-slate/client#RelationshipButton',
+    Element: '@payloadcms/richtext-slate/client#RelationshipElement',
     plugins: [
-        WithRelationship
+        '@payloadcms/richtext-slate/client#WithRelationship'
     ]
 };
 

package/dist/field/elements/relationship/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/elements/relationship/index.ts"],"sourcesContent":["import type { RichTextCustomElement } from '../../../types.js'\n\nimport { Button } from './Button/index.js'\nimport { Element } from './Element/index.js'\nimport { WithRelationship } from './plugin.js'\nimport { relationshipName } from './shared.js'\n\nexport const relationship: RichTextCustomElement = {\n  name: relationshipName,\n  Button,\n  Element,\n  plugins: [WithRelationship],\n}\n"],"names":["Button","Element","WithRelationship","relationshipName","relationship","name","plugins"],"rangeMappings":";;;;;;;;;;;","mappings":"AAEA,SAASA,MAAM,QAAQ,oBAAmB;AAC1C,SAASC,OAAO,QAAQ,qBAAoB;AAC5C,SAASC,gBAAgB,QAAQ,cAAa;AAC9C,SAASC,gBAAgB,QAAQ,cAAa;AAE9C,OAAO,MAAMC,eAAsC;IACjDC,MAAMF;IACNH;IACAC;IACAK,SAAS;QAACJ;KAAiB;AAC7B,EAAC"}
+{"version":3,"sources":["../../../../src/field/elements/relationship/index.ts"],"sourcesContent":["import type { RichTextCustomElement } from '../../../types.js'\n\nimport { relationshipName } from './shared.js'\n\nexport const relationship: RichTextCustomElement = {\n  name: relationshipName,\n  Button: '@payloadcms/richtext-slate/client#RelationshipButton',\n  Element: '@payloadcms/richtext-slate/client#RelationshipElement',\n  plugins: ['@payloadcms/richtext-slate/client#WithRelationship'],\n}\n"],"names":["relationshipName","relationship","name","Button","Element","plugins"],"mappings":"AAEA,SAASA,gBAAgB,QAAQ,cAAa;AAE9C,OAAO,MAAMC,eAAsC;IACjDC,MAAMF;IACNG,QAAQ;IACRC,SAAS;IACTC,SAAS;QAAC;KAAqD;AACjE,EAAC"}

package/dist/field/elements/relationship/plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/elements/relationship/plugin.tsx"],"sourcesContent":["'use client'\n\nimport type React from 'react'\n\nimport { useSlatePlugin } from '../../../utilities/useSlatePlugin.js'\nimport { relationshipName } from './shared.js'\n\nexport const WithRelationship: React.FC = () => {\n  useSlatePlugin('withRelationship', (incomingEditor) => {\n    const editor = incomingEditor\n    const { isVoid } = editor\n\n    editor.isVoid = (element) => (element.type === relationshipName ? true : isVoid(element))\n\n    return editor\n  })\n  return null\n}\n"],"names":["useSlatePlugin","relationshipName","WithRelationship","incomingEditor","editor","isVoid","element","type"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,cAAc,QAAQ,uCAAsC;AACrE,SAASC,gBAAgB,QAAQ,cAAa;AAE9C,OAAO,MAAMC,mBAA6B;IACxCF,eAAe,oBAAoB,CAACG;QAClC,MAAMC,SAASD;QACf,MAAM,EAAEE,MAAM,EAAE,GAAGD;QAEnBA,OAAOC,MAAM,GAAG,CAACC,UAAaA,QAAQC,IAAI,KAAKN,mBAAmB,OAAOI,OAAOC;QAEhF,OAAOF;IACT;IACA,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../../../src/field/elements/relationship/plugin.tsx"],"sourcesContent":["'use client'\n\nimport type React from 'react'\n\nimport { useSlatePlugin } from '../../../utilities/useSlatePlugin.js'\nimport { relationshipName } from './shared.js'\n\nexport const WithRelationship: React.FC = () => {\n  useSlatePlugin('withRelationship', (incomingEditor) => {\n    const editor = incomingEditor\n    const { isVoid } = editor\n\n    editor.isVoid = (element) => (element.type === relationshipName ? true : isVoid(element))\n\n    return editor\n  })\n  return null\n}\n"],"names":["useSlatePlugin","relationshipName","WithRelationship","incomingEditor","editor","isVoid","element","type"],"mappings":"AAAA;AAIA,SAASA,cAAc,QAAQ,uCAAsC;AACrE,SAASC,gBAAgB,QAAQ,cAAa;AAE9C,OAAO,MAAMC,mBAA6B;IACxCF,eAAe,oBAAoB,CAACG;QAClC,MAAMC,SAASD;QACf,MAAM,EAAEE,MAAM,EAAE,GAAGD;QAEnBA,OAAOC,MAAM,GAAG,CAACC,UAAaA,QAAQC,IAAI,KAAKN,mBAAmB,OAAOI,OAAOC;QAEhF,OAAOF;IACT;IACA,OAAO;AACT,EAAC"}

package/dist/field/elements/relationship/shared.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/elements/relationship/shared.ts"],"sourcesContent":["export const relationshipName = 'relationship'\n"],"names":["relationshipName"],"rangeMappings":"","mappings":"AAAA,OAAO,MAAMA,mBAAmB,eAAc"}
+{"version":3,"sources":["../../../../src/field/elements/relationship/shared.ts"],"sourcesContent":["export const relationshipName = 'relationship'\n"],"names":["relationshipName"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,eAAc"}

package/dist/field/elements/relationship/types.d.ts

@@ -1,8 +1,8 @@
 import type { Element } from 'slate';
-export type RelationshipElementType = Element & {
+export type RelationshipElementType = {
     relationTo: string;
     value: {
         id: number | string;
     } | null;
-};
+} & Element;
 //# sourceMappingURL=types.d.ts.map

package/dist/field/elements/relationship/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/relationship/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEpC,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG;IAC9C,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KACpB,GAAG,IAAI,CAAA;CACT,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/relationship/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEpC,MAAM,MAAM,uBAAuB,GAAG;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KACpB,GAAG,IAAI,CAAA;CACT,GAAG,OAAO,CAAA"}

package/dist/field/elements/relationship/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/elements/relationship/types.ts"],"sourcesContent":["import type { Element } from 'slate'\n\nexport type RelationshipElementType = Element & {\n  relationTo: string\n  value: {\n    id: number | string\n  } | null\n}\n"],"names":[],"rangeMappings":"","mappings":"AAEA,WAKC"}
+{"version":3,"sources":["../../../../src/field/elements/relationship/types.ts"],"sourcesContent":["import type { Element } from 'slate'\n\nexport type RelationshipElementType = {\n  relationTo: string\n  value: {\n    id: number | string\n  } | null\n} & Element\n"],"names":[],"mappings":"AAEA,WAKW"}

package/dist/field/elements/textAlign/Button.d.ts

@@ -0,0 +1,2 @@
+export declare const TextAlignElementButton: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/field/elements/textAlign/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/textAlign/Button.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB,+CAYlC,CAAA"}

package/dist/field/elements/textAlign/Button.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AlignCenterIcon } from '../../icons/AlignCenter/index.js';
+import { AlignLeftIcon } from '../../icons/AlignLeft/index.js';
+import { AlignRightIcon } from '../../icons/AlignRight/index.js';
+import { ElementButton } from '../Button.js';
+export const TextAlignElementButton = ()=>/*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(ElementButton, {
+                format: "left",
+                type: "textAlign",
+                children: /*#__PURE__*/ _jsx(AlignLeftIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(ElementButton, {
+                format: "center",
+                type: "textAlign",
+                children: /*#__PURE__*/ _jsx(AlignCenterIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(ElementButton, {
+                format: "right",
+                type: "textAlign",
+                children: /*#__PURE__*/ _jsx(AlignRightIcon, {})
+            })
+        ]
+    });
+
+//# sourceMappingURL=Button.js.map

package/dist/field/elements/textAlign/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/field/elements/textAlign/Button.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { AlignCenterIcon } from '../../icons/AlignCenter/index.js'\nimport { AlignLeftIcon } from '../../icons/AlignLeft/index.js'\nimport { AlignRightIcon } from '../../icons/AlignRight/index.js'\nimport { ElementButton } from '../Button.js'\n\nexport const TextAlignElementButton = () => (\n  <React.Fragment>\n    <ElementButton format=\"left\" type=\"textAlign\">\n      <AlignLeftIcon />\n    </ElementButton>\n    <ElementButton format=\"center\" type=\"textAlign\">\n      <AlignCenterIcon />\n    </ElementButton>\n    <ElementButton format=\"right\" type=\"textAlign\">\n      <AlignRightIcon />\n    </ElementButton>\n  </React.Fragment>\n)\n"],"names":["React","AlignCenterIcon","AlignLeftIcon","AlignRightIcon","ElementButton","TextAlignElementButton","Fragment","format","type"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SAASC,aAAa,QAAQ,eAAc;AAE5C,OAAO,MAAMC,yBAAyB,kBACpC,MAACL,MAAMM,QAAQ;;0BACb,KAACF;gBAAcG,QAAO;gBAAOC,MAAK;0BAChC,cAAA,KAACN;;0BAEH,KAACE;gBAAcG,QAAO;gBAASC,MAAK;0BAClC,cAAA,KAACP;;0BAEH,KAACG;gBAAcG,QAAO;gBAAQC,MAAK;0BACjC,cAAA,KAACL;;;OAGN"}

package/dist/field/elements/textAlign/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/textAlign/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAO9D,eAAO,MAAM,SAAS,EAAE,qBAkBvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/field/elements/textAlign/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAE9D,eAAO,MAAM,SAAS,EAAE,qBAIvB,CAAA"}

package/dist/field/elements/textAlign/index.js

@@ -1,23 +1,7 @@
-import React from 'react';
-import { AlignCenterIcon } from '../../icons/AlignCenter/index.js';
-import { AlignLeftIcon } from '../../icons/AlignLeft/index.js';
-import { AlignRightIcon } from '../../icons/AlignRight/index.js';
-import { ElementButton } from '../Button.js';
 export const textAlign = {
     name: 'alignment',
-    Button: ()=>{
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ElementButton, {
-            format: "left",
-            type: "textAlign"
-        }, /*#__PURE__*/ React.createElement(AlignLeftIcon, null)), /*#__PURE__*/ React.createElement(ElementButton, {
-            format: "center",
-            type: "textAlign"
-        }, /*#__PURE__*/ React.createElement(AlignCenterIcon, null)), /*#__PURE__*/ React.createElement(ElementButton, {
-            format: "right",
-            type: "textAlign"
-        }, /*#__PURE__*/ React.createElement(AlignRightIcon, null)));
-    },
-    Element: ()=>null
+    Button: '@payloadcms/richtext-slate/client#TextAlignElementButton',
+    Element: false
 };
 
 //# sourceMappingURL=index.js.map

package/dist/field/elements/textAlign/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/elements/textAlign/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { RichTextCustomElement } from '../../../types.js'\n\nimport { AlignCenterIcon } from '../../icons/AlignCenter/index.js'\nimport { AlignLeftIcon } from '../../icons/AlignLeft/index.js'\nimport { AlignRightIcon } from '../../icons/AlignRight/index.js'\nimport { ElementButton } from '../Button.js'\n\nexport const textAlign: RichTextCustomElement = {\n  name: 'alignment',\n  Button: () => {\n    return (\n      <React.Fragment>\n        <ElementButton format=\"left\" type=\"textAlign\">\n          <AlignLeftIcon />\n        </ElementButton>\n        <ElementButton format=\"center\" type=\"textAlign\">\n          <AlignCenterIcon />\n        </ElementButton>\n        <ElementButton format=\"right\" type=\"textAlign\">\n          <AlignRightIcon />\n        </ElementButton>\n      </React.Fragment>\n    )\n  },\n  Element: () => null,\n}\n"],"names":["React","AlignCenterIcon","AlignLeftIcon","AlignRightIcon","ElementButton","textAlign","name","Button","Fragment","format","type","Element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAIzB,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SAASC,aAAa,QAAQ,eAAc;AAE5C,OAAO,MAAMC,YAAmC;IAC9CC,MAAM;IACNC,QAAQ;QACN,qBACE,oBAACP,MAAMQ,QAAQ,sBACb,oBAACJ;YAAcK,QAAO;YAAOC,MAAK;yBAChC,oBAACR,qCAEH,oBAACE;YAAcK,QAAO;YAASC,MAAK;yBAClC,oBAACT,uCAEH,oBAACG;YAAcK,QAAO;YAAQC,MAAK;yBACjC,oBAACP;IAIT;IACAQ,SAAS,IAAM;AACjB,EAAC"}
+{"version":3,"sources":["../../../../src/field/elements/textAlign/index.tsx"],"sourcesContent":["import type { RichTextCustomElement } from '../../../types.js'\n\nexport const textAlign: RichTextCustomElement = {\n  name: 'alignment',\n  Button: '@payloadcms/richtext-slate/client#TextAlignElementButton',\n  Element: false,\n}\n"],"names":["textAlign","name","Button","Element"],"mappings":"AAEA,OAAO,MAAMA,YAAmC;IAC9CC,MAAM;IACNC,QAAQ;IACRC,SAAS;AACX,EAAC"}

package/dist/field/elements/toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/field/elements/toggle.tsx"],"sourcesContent":["'use client'\nimport { Editor, Transforms } from 'slate'\nimport { ReactEditor } from 'slate-react'\n\nimport { isElementActive } from './isActive.js'\nimport { isWithinListItem } from './isWithinListItem.js'\n\nexport const toggleElement = (editor: Editor, format: string, blockType = 'type'): void => {\n  const isActive = isElementActive(editor, format, blockType)\n\n  const formatByBlockType = {\n    [blockType]: format,\n  }\n\n  const isWithinLI = isWithinListItem(editor)\n\n  if (isActive) {\n    formatByBlockType[blockType] = undefined\n  }\n\n  if (!isActive && isWithinLI && blockType !== 'textAlign') {\n    const block = { type: 'li', children: [] }\n    Transforms.wrapNodes(editor, block, {\n      at: Editor.unhangRange(editor, editor.selection),\n    })\n  }\n\n  Transforms.setNodes(\n    editor,\n    { [blockType]: formatByBlockType[blockType] },\n    {\n      at: Editor.unhangRange(editor, editor.selection),\n    },\n  )\n\n  ReactEditor.focus(editor)\n}\n"],"names":["Editor","Transforms","ReactEditor","isElementActive","isWithinListItem","toggleElement","editor","format","blockType","isActive","formatByBlockType","isWithinLI","undefined","block","type","children","wrapNodes","at","unhangRange","selection","setNodes","focus"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,MAAM,EAAEC,UAAU,QAAQ,QAAO;AAC1C,SAASC,WAAW,QAAQ,cAAa;AAEzC,SAASC,eAAe,QAAQ,gBAAe;AAC/C,SAASC,gBAAgB,QAAQ,wBAAuB;AAExD,OAAO,MAAMC,gBAAgB,CAACC,QAAgBC,QAAgBC,YAAY,MAAM;IAC9E,MAAMC,WAAWN,gBAAgBG,QAAQC,QAAQC;IAEjD,MAAME,oBAAoB;QACxB,CAACF,UAAU,EAAED;IACf;IAEA,MAAMI,aAAaP,iBAAiBE;IAEpC,IAAIG,UAAU;QACZC,iBAAiB,CAACF,UAAU,GAAGI;IACjC;IAEA,IAAI,CAACH,YAAYE,cAAcH,cAAc,aAAa;QACxD,MAAMK,QAAQ;YAAEC,MAAM;YAAMC,UAAU,EAAE;QAAC;QACzCd,WAAWe,SAAS,CAACV,QAAQO,OAAO;YAClCI,IAAIjB,OAAOkB,WAAW,CAACZ,QAAQA,OAAOa,SAAS;QACjD;IACF;IAEAlB,WAAWmB,QAAQ,CACjBd,QACA;QAAE,CAACE,UAAU,EAAEE,iBAAiB,CAACF,UAAU;IAAC,GAC5C;QACES,IAAIjB,OAAOkB,WAAW,CAACZ,QAAQA,OAAOa,SAAS;IACjD;IAGFjB,YAAYmB,KAAK,CAACf;AACpB,EAAC"}
+{"version":3,"sources":["../../../src/field/elements/toggle.tsx"],"sourcesContent":["'use client'\nimport { Editor, Transforms } from 'slate'\nimport { ReactEditor } from 'slate-react'\n\nimport { isElementActive } from './isActive.js'\nimport { isWithinListItem } from './isWithinListItem.js'\n\nexport const toggleElement = (editor: Editor, format: string, blockType = 'type'): void => {\n  const isActive = isElementActive(editor, format, blockType)\n\n  const formatByBlockType = {\n    [blockType]: format,\n  }\n\n  const isWithinLI = isWithinListItem(editor)\n\n  if (isActive) {\n    formatByBlockType[blockType] = undefined\n  }\n\n  if (!isActive && isWithinLI && blockType !== 'textAlign') {\n    const block = { type: 'li', children: [] }\n    Transforms.wrapNodes(editor, block, {\n      at: Editor.unhangRange(editor, editor.selection),\n    })\n  }\n\n  Transforms.setNodes(\n    editor,\n    { [blockType]: formatByBlockType[blockType] },\n    {\n      at: Editor.unhangRange(editor, editor.selection),\n    },\n  )\n\n  ReactEditor.focus(editor)\n}\n"],"names":["Editor","Transforms","ReactEditor","isElementActive","isWithinListItem","toggleElement","editor","format","blockType","isActive","formatByBlockType","isWithinLI","undefined","block","type","children","wrapNodes","at","unhangRange","selection","setNodes","focus"],"mappings":"AAAA;AACA,SAASA,MAAM,EAAEC,UAAU,QAAQ,QAAO;AAC1C,SAASC,WAAW,QAAQ,cAAa;AAEzC,SAASC,eAAe,QAAQ,gBAAe;AAC/C,SAASC,gBAAgB,QAAQ,wBAAuB;AAExD,OAAO,MAAMC,gBAAgB,CAACC,QAAgBC,QAAgBC,YAAY,MAAM;IAC9E,MAAMC,WAAWN,gBAAgBG,QAAQC,QAAQC;IAEjD,MAAME,oBAAoB;QACxB,CAACF,UAAU,EAAED;IACf;IAEA,MAAMI,aAAaP,iBAAiBE;IAEpC,IAAIG,UAAU;QACZC,iBAAiB,CAACF,UAAU,GAAGI;IACjC;IAEA,IAAI,CAACH,YAAYE,cAAcH,cAAc,aAAa;QACxD,MAAMK,QAAQ;YAAEC,MAAM;YAAMC,UAAU,EAAE;QAAC;QACzCd,WAAWe,SAAS,CAACV,QAAQO,OAAO;YAClCI,IAAIjB,OAAOkB,WAAW,CAACZ,QAAQA,OAAOa,SAAS;QACjD;IACF;IAEAlB,WAAWmB,QAAQ,CACjBd,QACA;QAAE,CAACE,UAAU,EAAEE,iBAAiB,CAACF,UAAU;IAAC,GAC5C;QACES,IAAIjB,OAAOkB,WAAW,CAACZ,QAAQA,OAAOa,SAAS;IACjD;IAGFjB,YAAYmB,KAAK,CAACf;AACpB,EAAC"}

package/dist/field/elements/toggleList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggleList.d.ts","sourceRoot":"","sources":["../../../src/field/elements/toggleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAmC,MAAM,OAAO,CAAA;AAQ/D,eAAO,MAAM,UAAU,WAAY,MAAM,UAAU,MAAM,KAAG,IAyF3D,CAAA"}
+{"version":3,"file":"toggleList.d.ts","sourceRoot":"","sources":["../../../src/field/elements/toggleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAmC,MAAM,OAAO,CAAA;AAQ/D,eAAO,MAAM,UAAU,WAAY,MAAM,UAAU,MAAM,KAAG,IA6F3D,CAAA"}

package/dist/field/elements/toggleList.js

@@ -6,8 +6,12 @@ import { listTypes } from './listTypes.js';
 import { unwrapList } from './unwrapList.js';
 export const toggleList = (editor, format)=>{
     let currentListFormat;
-    if (isListActive(editor, 'ol')) currentListFormat = 'ol';
-    if (isListActive(editor, 'ul')) currentListFormat = 'ul';
+    if (isListActive(editor, 'ol')) {
+        currentListFormat = 'ol';
+    }
+    if (isListActive(editor, 'ul')) {
+        currentListFormat = 'ul';
+    }
     // If the format is currently active,
     // remove the list
     if (currentListFormat === format) {

package/dist/field/elements/toggleList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/field/elements/toggleList.tsx"],"sourcesContent":["import { Editor, Element, Node, Text, Transforms } from 'slate'\nimport { ReactEditor } from 'slate-react'\n\nimport { getCommonBlock } from './getCommonBlock.js'\nimport { isListActive } from './isListActive.js'\nimport { listTypes } from './listTypes.js'\nimport { unwrapList } from './unwrapList.js'\n\nexport const toggleList = (editor: Editor, format: string): void => {\n  let currentListFormat: string\n\n  if (isListActive(editor, 'ol')) currentListFormat = 'ol'\n  if (isListActive(editor, 'ul')) currentListFormat = 'ul'\n\n  // If the format is currently active,\n  // remove the list\n  if (currentListFormat === format) {\n    const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n\n    // If on an empty bullet, leave the above list alone\n    // and unwrap only the active bullet\n    if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {\n      Transforms.unwrapNodes(editor, {\n        match: (n) => Element.isElement(n) && listTypes.includes(n.type),\n        mode: 'lowest',\n        split: true,\n      })\n\n      Transforms.setNodes(editor, { type: undefined })\n    } else {\n      // Otherwise, we need to unset li on all lis in the parent list\n      // and unwrap the parent list itself\n      const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && n.type === format)\n      unwrapList(editor, listPath)\n    }\n\n    // Otherwise, if a list is active and we are changing it,\n    // change it\n  } else if (currentListFormat && currentListFormat !== format) {\n    Transforms.setNodes(\n      editor,\n      {\n        type: format,\n      },\n      {\n        match: (node) => Element.isElement(node) && listTypes.includes(node.type),\n        mode: 'lowest',\n      },\n    )\n    // Otherwise we can assume that we should just activate the list\n  } else {\n    Transforms.wrapNodes(editor, { type: format, children: [] })\n\n    const [, parentNodePath] = getCommonBlock(\n      editor,\n      (node) => Element.isElement(node) && node.type === format,\n    )\n\n    // Only set li on nodes that don't have type\n    Transforms.setNodes(\n      editor,\n      { type: 'li' },\n      {\n        match: (node, path) => {\n          const match =\n            Element.isElement(node) &&\n            typeof node.type === 'undefined' &&\n            path.length === parentNodePath.length + 1\n\n          return match\n        },\n        voids: true,\n      },\n    )\n\n    // Wrap nodes that do have a type with an li\n    // so as to not lose their existing formatting\n    const nodesToWrap = Array.from(\n      Editor.nodes(editor, {\n        match: (node, path) => {\n          const match =\n            Element.isElement(node) &&\n            typeof node.type !== 'undefined' &&\n            node.type !== 'li' &&\n            path.length === parentNodePath.length + 1\n\n          return match\n        },\n      }),\n    )\n\n    nodesToWrap.forEach(([, path]) => {\n      Transforms.wrapNodes(editor, { type: 'li', children: [] }, { at: path })\n    })\n  }\n\n  ReactEditor.focus(editor)\n}\n"],"names":["Editor","Element","Node","Text","Transforms","ReactEditor","getCommonBlock","isListActive","listTypes","unwrapList","toggleList","editor","format","currentListFormat","selectedLeaf","descendant","selection","anchor","path","isText","String","text","length","unwrapNodes","match","n","isElement","includes","type","mode","split","setNodes","undefined","listPath","node","wrapNodes","children","parentNodePath","voids","nodesToWrap","Array","from","nodes","forEach","at","focus"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,QAAO;AAC/D,SAASC,WAAW,QAAQ,cAAa;AAEzC,SAASC,cAAc,QAAQ,sBAAqB;AACpD,SAASC,YAAY,QAAQ,oBAAmB;AAChD,SAASC,SAAS,QAAQ,iBAAgB;AAC1C,SAASC,UAAU,QAAQ,kBAAiB;AAE5C,OAAO,MAAMC,aAAa,CAACC,QAAgBC;IACzC,IAAIC;IAEJ,IAAIN,aAAaI,QAAQ,OAAOE,oBAAoB;IACpD,IAAIN,aAAaI,QAAQ,OAAOE,oBAAoB;IAEpD,qCAAqC;IACrC,kBAAkB;IAClB,IAAIA,sBAAsBD,QAAQ;QAChC,MAAME,eAAeZ,KAAKa,UAAU,CAACJ,QAAQA,OAAOK,SAAS,CAACC,MAAM,CAACC,IAAI;QAEzE,oDAAoD;QACpD,oCAAoC;QACpC,IAAIf,KAAKgB,MAAM,CAACL,iBAAiBM,OAAON,aAAaO,IAAI,EAAEC,MAAM,KAAK,GAAG;YACvElB,WAAWmB,WAAW,CAACZ,QAAQ;gBAC7Ba,OAAO,CAACC,IAAMxB,QAAQyB,SAAS,CAACD,MAAMjB,UAAUmB,QAAQ,CAACF,EAAEG,IAAI;gBAC/DC,MAAM;gBACNC,OAAO;YACT;YAEA1B,WAAW2B,QAAQ,CAACpB,QAAQ;gBAAEiB,MAAMI;YAAU;QAChD,OAAO;YACL,+DAA+D;YAC/D,oCAAoC;YACpC,MAAM,GAAGC,SAAS,GAAG3B,eAAeK,QAAQ,CAACc,IAAMxB,QAAQyB,SAAS,CAACD,MAAMA,EAAEG,IAAI,KAAKhB;YACtFH,WAAWE,QAAQsB;QACrB;IAEA,yDAAyD;IACzD,YAAY;IACd,OAAO,IAAIpB,qBAAqBA,sBAAsBD,QAAQ;QAC5DR,WAAW2B,QAAQ,CACjBpB,QACA;YACEiB,MAAMhB;QACR,GACA;YACEY,OAAO,CAACU,OAASjC,QAAQyB,SAAS,CAACQ,SAAS1B,UAAUmB,QAAQ,CAACO,KAAKN,IAAI;YACxEC,MAAM;QACR;IAEF,gEAAgE;IAClE,OAAO;QACLzB,WAAW+B,SAAS,CAACxB,QAAQ;YAAEiB,MAAMhB;YAAQwB,UAAU,EAAE;QAAC;QAE1D,MAAM,GAAGC,eAAe,GAAG/B,eACzBK,QACA,CAACuB,OAASjC,QAAQyB,SAAS,CAACQ,SAASA,KAAKN,IAAI,KAAKhB;QAGrD,4CAA4C;QAC5CR,WAAW2B,QAAQ,CACjBpB,QACA;YAAEiB,MAAM;QAAK,GACb;YACEJ,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;YACAc,OAAO;QACT;QAGF,4CAA4C;QAC5C,8CAA8C;QAC9C,MAAMC,cAAcC,MAAMC,IAAI,CAC5BzC,OAAO0C,KAAK,CAAC/B,QAAQ;YACnBa,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBM,KAAKN,IAAI,KAAK,QACdV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;QACF;QAGFe,YAAYI,OAAO,CAAC,CAAC,GAAGzB,KAAK;YAC3Bd,WAAW+B,SAAS,CAACxB,QAAQ;gBAAEiB,MAAM;gBAAMQ,UAAU,EAAE;YAAC,GAAG;gBAAEQ,IAAI1B;YAAK;QACxE;IACF;IAEAb,YAAYwC,KAAK,CAAClC;AACpB,EAAC"}
+{"version":3,"sources":["../../../src/field/elements/toggleList.tsx"],"sourcesContent":["import { Editor, Element, Node, Text, Transforms } from 'slate'\nimport { ReactEditor } from 'slate-react'\n\nimport { getCommonBlock } from './getCommonBlock.js'\nimport { isListActive } from './isListActive.js'\nimport { listTypes } from './listTypes.js'\nimport { unwrapList } from './unwrapList.js'\n\nexport const toggleList = (editor: Editor, format: string): void => {\n  let currentListFormat: string\n\n  if (isListActive(editor, 'ol')) {\n    currentListFormat = 'ol'\n  }\n  if (isListActive(editor, 'ul')) {\n    currentListFormat = 'ul'\n  }\n\n  // If the format is currently active,\n  // remove the list\n  if (currentListFormat === format) {\n    const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n\n    // If on an empty bullet, leave the above list alone\n    // and unwrap only the active bullet\n    if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {\n      Transforms.unwrapNodes(editor, {\n        match: (n) => Element.isElement(n) && listTypes.includes(n.type),\n        mode: 'lowest',\n        split: true,\n      })\n\n      Transforms.setNodes(editor, { type: undefined })\n    } else {\n      // Otherwise, we need to unset li on all lis in the parent list\n      // and unwrap the parent list itself\n      const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && n.type === format)\n      unwrapList(editor, listPath)\n    }\n\n    // Otherwise, if a list is active and we are changing it,\n    // change it\n  } else if (currentListFormat && currentListFormat !== format) {\n    Transforms.setNodes(\n      editor,\n      {\n        type: format,\n      },\n      {\n        match: (node) => Element.isElement(node) && listTypes.includes(node.type),\n        mode: 'lowest',\n      },\n    )\n    // Otherwise we can assume that we should just activate the list\n  } else {\n    Transforms.wrapNodes(editor, { type: format, children: [] })\n\n    const [, parentNodePath] = getCommonBlock(\n      editor,\n      (node) => Element.isElement(node) && node.type === format,\n    )\n\n    // Only set li on nodes that don't have type\n    Transforms.setNodes(\n      editor,\n      { type: 'li' },\n      {\n        match: (node, path) => {\n          const match =\n            Element.isElement(node) &&\n            typeof node.type === 'undefined' &&\n            path.length === parentNodePath.length + 1\n\n          return match\n        },\n        voids: true,\n      },\n    )\n\n    // Wrap nodes that do have a type with an li\n    // so as to not lose their existing formatting\n    const nodesToWrap = Array.from(\n      Editor.nodes(editor, {\n        match: (node, path) => {\n          const match =\n            Element.isElement(node) &&\n            typeof node.type !== 'undefined' &&\n            node.type !== 'li' &&\n            path.length === parentNodePath.length + 1\n\n          return match\n        },\n      }),\n    )\n\n    nodesToWrap.forEach(([, path]) => {\n      Transforms.wrapNodes(editor, { type: 'li', children: [] }, { at: path })\n    })\n  }\n\n  ReactEditor.focus(editor)\n}\n"],"names":["Editor","Element","Node","Text","Transforms","ReactEditor","getCommonBlock","isListActive","listTypes","unwrapList","toggleList","editor","format","currentListFormat","selectedLeaf","descendant","selection","anchor","path","isText","String","text","length","unwrapNodes","match","n","isElement","includes","type","mode","split","setNodes","undefined","listPath","node","wrapNodes","children","parentNodePath","voids","nodesToWrap","Array","from","nodes","forEach","at","focus"],"mappings":"AAAA,SAASA,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,QAAO;AAC/D,SAASC,WAAW,QAAQ,cAAa;AAEzC,SAASC,cAAc,QAAQ,sBAAqB;AACpD,SAASC,YAAY,QAAQ,oBAAmB;AAChD,SAASC,SAAS,QAAQ,iBAAgB;AAC1C,SAASC,UAAU,QAAQ,kBAAiB;AAE5C,OAAO,MAAMC,aAAa,CAACC,QAAgBC;IACzC,IAAIC;IAEJ,IAAIN,aAAaI,QAAQ,OAAO;QAC9BE,oBAAoB;IACtB;IACA,IAAIN,aAAaI,QAAQ,OAAO;QAC9BE,oBAAoB;IACtB;IAEA,qCAAqC;IACrC,kBAAkB;IAClB,IAAIA,sBAAsBD,QAAQ;QAChC,MAAME,eAAeZ,KAAKa,UAAU,CAACJ,QAAQA,OAAOK,SAAS,CAACC,MAAM,CAACC,IAAI;QAEzE,oDAAoD;QACpD,oCAAoC;QACpC,IAAIf,KAAKgB,MAAM,CAACL,iBAAiBM,OAAON,aAAaO,IAAI,EAAEC,MAAM,KAAK,GAAG;YACvElB,WAAWmB,WAAW,CAACZ,QAAQ;gBAC7Ba,OAAO,CAACC,IAAMxB,QAAQyB,SAAS,CAACD,MAAMjB,UAAUmB,QAAQ,CAACF,EAAEG,IAAI;gBAC/DC,MAAM;gBACNC,OAAO;YACT;YAEA1B,WAAW2B,QAAQ,CAACpB,QAAQ;gBAAEiB,MAAMI;YAAU;QAChD,OAAO;YACL,+DAA+D;YAC/D,oCAAoC;YACpC,MAAM,GAAGC,SAAS,GAAG3B,eAAeK,QAAQ,CAACc,IAAMxB,QAAQyB,SAAS,CAACD,MAAMA,EAAEG,IAAI,KAAKhB;YACtFH,WAAWE,QAAQsB;QACrB;IAEA,yDAAyD;IACzD,YAAY;IACd,OAAO,IAAIpB,qBAAqBA,sBAAsBD,QAAQ;QAC5DR,WAAW2B,QAAQ,CACjBpB,QACA;YACEiB,MAAMhB;QACR,GACA;YACEY,OAAO,CAACU,OAASjC,QAAQyB,SAAS,CAACQ,SAAS1B,UAAUmB,QAAQ,CAACO,KAAKN,IAAI;YACxEC,MAAM;QACR;IAEF,gEAAgE;IAClE,OAAO;QACLzB,WAAW+B,SAAS,CAACxB,QAAQ;YAAEiB,MAAMhB;YAAQwB,UAAU,EAAE;QAAC;QAE1D,MAAM,GAAGC,eAAe,GAAG/B,eACzBK,QACA,CAACuB,OAASjC,QAAQyB,SAAS,CAACQ,SAASA,KAAKN,IAAI,KAAKhB;QAGrD,4CAA4C;QAC5CR,WAAW2B,QAAQ,CACjBpB,QACA;YAAEiB,MAAM;QAAK,GACb;YACEJ,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;YACAc,OAAO;QACT;QAGF,4CAA4C;QAC5C,8CAA8C;QAC9C,MAAMC,cAAcC,MAAMC,IAAI,CAC5BzC,OAAO0C,KAAK,CAAC/B,QAAQ;YACnBa,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBM,KAAKN,IAAI,KAAK,QACdV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;QACF;QAGFe,YAAYI,OAAO,CAAC,CAAC,GAAGzB,KAAK;YAC3Bd,WAAW+B,SAAS,CAACxB,QAAQ;gBAAEiB,MAAM;gBAAMQ,UAAU,EAAE;YAAC,GAAG;gBAAEQ,IAAI1B;YAAK;QACxE;IACF;IAEAb,YAAYwC,KAAK,CAAClC;AACpB,EAAC"}

package/dist/field/elements/types.d.ts

@@ -2,6 +2,7 @@ import type { ElementType } from 'react';
 export type ButtonProps = {
     children?: React.ReactNode;
     className?: string;
+    disabled?: boolean;
     el?: ElementType;
     format: string;
     onClick?: (e: React.MouseEvent) => void;

package/dist/field/elements/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/field/elements/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAExC,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/field/elements/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAExC,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA"}