payload 1.3.3 → 1.4.0

package/dist/admin/components/forms/field-types/RichText/elements/indent/index.js

@@ -1,11 +1,13 @@
 import React, { useCallback } from 'react';
 import { useSlate, ReactEditor } from 'slate-react';
-import { Editor, Element, Transforms } from 'slate';
+import { Editor, Element, Text, Transforms } from 'slate';
 import IndentLeft from '../../../../../icons/IndentLeft';
 import IndentRight from '../../../../../icons/IndentRight';
 import { baseClass } from '../Button';
 import isElementActive from '../isActive';
 import listTypes from '../listTypes';
+import { getCommonBlock } from '../getCommonBlock';
+import { unwrapList } from '../unwrapList';
 const indentType = 'indent';
 const IndentWithPadding = ({ attributes, children }) => (React.createElement("div", { style: { paddingLeft: 25 }, ...attributes }, children));
 const indent = {
@@ -14,36 +16,130 @@ const indent = {
         const handleIndent = useCallback((e, dir) => {
             e.preventDefault();
             if (dir === 'left') {
-                Transforms.unwrapNodes(editor, {
-                    match: (n) => Element.isElement(n) && [indentType, ...listTypes].includes(n.type),
-                    split: true,
-                    mode: 'lowest',
-                });
                 if (isElementActive(editor, 'li')) {
-                    const [, parentLocation] = Editor.parent(editor, editor.selection);
-                    const [, parentDepth] = parentLocation;
-                    if (parentDepth > 0 || parentDepth === 0) {
-                        Transforms.unwrapNodes(editor, {
-                            match: (n) => Element.isElement(n) && n.type === 'li',
-                            split: true,
-                            mode: 'lowest',
-                        });
+                    const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && listTypes.includes(n.type));
+                    const matchedParentList = Editor.above(editor, {
+                        at: listPath,
+                        match: (n) => !Editor.isEditor(n) && Editor.isBlock(editor, n),
+                    });
+                    if (matchedParentList) {
+                        const [parentListItem, parentListItemPath] = matchedParentList;
+                        if (parentListItem.children.length > 1) {
+                            // Remove nested list
+                            Transforms.unwrapNodes(editor, {
+                                at: parentListItemPath,
+                                match: (node, path) => {
+                                    const matches = !Editor.isEditor(node)
+                                        && Element.isElement(node)
+                                        && listTypes.includes(node.type)
+                                        && path.length === parentListItemPath.length + 1;
+                                    return matches;
+                                },
+                            });
+                            // Set li type on any children that don't have a type
+                            Transforms.setNodes(editor, { type: 'li' }, {
+                                at: parentListItemPath,
+                                match: (node, path) => {
+                                    const matches = !Editor.isEditor(node)
+                                        && Element.isElement(node)
+                                        && node.type !== 'li'
+                                        && path.length === parentListItemPath.length + 1;
+                                    return matches;
+                                },
+                            });
+                            // Parent list item path has changed at this point
+                            // so we need to re-fetch the parent node
+                            const [newParentNode] = Editor.node(editor, parentListItemPath);
+                            // If the parent node is an li,
+                            // lift all li nodes within
+                            if (Element.isElement(newParentNode) && newParentNode.type === 'li') {
+                                // Lift the nested lis
+                                Transforms.liftNodes(editor, {
+                                    at: parentListItemPath,
+                                    match: (node, path) => {
+                                        const matches = !Editor.isEditor(node)
+                                            && Element.isElement(node)
+                                            && path.length === parentListItemPath.length + 1
+                                            && node.type === 'li';
+                                        return matches;
+                                    },
+                                });
+                            }
+                        }
+                        else {
+                            Transforms.unwrapNodes(editor, {
+                                at: parentListItemPath,
+                                match: (node, path) => {
+                                    return Element.isElement(node)
+                                        && node.type === 'li'
+                                        && path.length === parentListItemPath.length;
+                                },
+                            });
+                            Transforms.unwrapNodes(editor, {
+                                match: (n) => Element.isElement(n) && listTypes.includes(n.type),
+                            });
+                        }
                     }
                     else {
-                        Transforms.unsetNodes(editor, ['type']);
+                        unwrapList(editor, listPath);
                     }
                 }
+                else {
+                    Transforms.unwrapNodes(editor, {
+                        match: (n) => Element.isElement(n) && n.type === indentType,
+                        split: true,
+                        mode: 'lowest',
+                    });
+                }
             }
             if (dir === 'right') {
                 const isCurrentlyOL = isElementActive(editor, 'ol');
                 const isCurrentlyUL = isElementActive(editor, 'ul');
                 if (isCurrentlyOL || isCurrentlyUL) {
-                    Transforms.wrapNodes(editor, {
-                        type: 'li',
-                        children: [],
-                    });
-                    Transforms.wrapNodes(editor, { type: isCurrentlyOL ? 'ol' : 'ul', children: [{ text: ' ' }] });
-                    Transforms.setNodes(editor, { type: 'li' });
+                    // Get the path of the first selected li -
+                    // Multiple lis could be selected
+                    // and the selection may start in the middle of the first li
+                    const [[, firstSelectedLIPath]] = Array.from(Editor.nodes(editor, {
+                        mode: 'lowest',
+                        match: (node) => Element.isElement(node) && node.type === 'li',
+                    }));
+                    // Is the first selected li the first in its list?
+                    const hasPrecedingLI = firstSelectedLIPath[firstSelectedLIPath.length - 1] > 0;
+                    // If the first selected li is NOT the first in its list,
+                    // we need to inject it into the prior li
+                    if (hasPrecedingLI) {
+                        const [, precedingLIPath] = Editor.previous(editor, {
+                            at: firstSelectedLIPath,
+                        });
+                        const [precedingLIChildren] = Editor.node(editor, [...precedingLIPath, 0]);
+                        const precedingLIChildrenIsText = Text.isText(precedingLIChildren);
+                        if (precedingLIChildrenIsText) {
+                            // Wrap the prior li text content so that it can be nested next to a list
+                            Transforms.wrapNodes(editor, { children: [] }, { at: [...precedingLIPath, 0] });
+                        }
+                        // Move the selected lis after the prior li contents
+                        Transforms.moveNodes(editor, {
+                            to: [...precedingLIPath, 1],
+                            match: (node) => Element.isElement(node) && node.type === 'li',
+                            mode: 'lowest',
+                        });
+                        // Wrap the selected lis in a new list
+                        Transforms.wrapNodes(editor, {
+                            type: isCurrentlyOL ? 'ol' : 'ul', children: [],
+                        }, {
+                            match: (node) => Element.isElement(node) && node.type === 'li',
+                            mode: 'lowest',
+                        });
+                    }
+                    else {
+                        // Otherwise, just wrap the node in a list / li
+                        Transforms.wrapNodes(editor, {
+                            type: isCurrentlyOL ? 'ol' : 'ul', children: [{ type: 'li', children: [] }],
+                        }, {
+                            match: (node) => Element.isElement(node) && node.type === 'li',
+                            mode: 'lowest',
+                        });
+                    }
                 }
                 else {
                     Transforms.wrapNodes(editor, { type: indentType, children: [] });

package/dist/admin/components/forms/field-types/RichText/elements/index.d.ts

@@ -43,16 +43,17 @@ declare const elements: {
         }) => JSX.Element;
     };
     link: {
-        Button: ({ fieldProps }: {
-            fieldProps: any;
-        }) => JSX.Element;
-        Element: ({ attributes, children, element, editorRef, fieldProps }: {
-            attributes: any;
-            children: any;
+        Button: import("react").FC<{
+            path: string;
+            fieldProps: import("../types").Props;
+        }>;
+        Element: import("react").FC<{
+            attributes: import("react").HTMLAttributes<HTMLDivElement>;
+            children: import("react").ReactNode;
             element: any;
-            editorRef: any;
-            fieldProps: any;
-        }) => JSX.Element;
+            fieldProps: import("../types").Props;
+            editorRef: import("react").RefObject<HTMLDivElement>;
+        }>;
         plugins: ((incomingEditor: import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor) => import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor)[];
     };
     ol: {
@@ -83,20 +84,24 @@ declare const elements: {
         Button: import("react").FC<{
             path: string;
         }>;
-        Element: (props: any) => JSX.Element;
+        Element: import("react").FC<{
+            attributes: import("react").HTMLAttributes<HTMLDivElement>;
+            children: import("react").ReactNode;
+            element: any;
+            fieldProps: import("../types").Props;
+        }>;
         plugins: ((incomingEditor: any) => any)[];
     };
     upload: {
         Button: import("react").FC<{
             path: string;
         }>;
-        Element: ({ attributes, children, element, path, fieldProps }: {
-            attributes: any;
-            children: any;
+        Element: import("react").FC<{
+            attributes: import("react").HTMLAttributes<HTMLDivElement>;
+            children: import("react").ReactNode;
             element: any;
-            path: any;
-            fieldProps: any;
-        }) => JSX.Element;
+            fieldProps: import("../types").Props;
+        }>;
         plugins: ((incomingEditor: any) => any)[];
     };
 };

package/dist/admin/components/forms/field-types/RichText/elements/isActive.d.ts

@@ -1,2 +1,3 @@
-declare const isElementActive: (editor: any, format: any) => boolean;
+import { Editor } from 'slate';
+declare const isElementActive: (editor: Editor, format: string) => boolean;
 export default isElementActive;

package/dist/admin/components/forms/field-types/RichText/elements/isLastSelectedElementEmpty.js

@@ -1,6 +1,9 @@
 import { Editor, Element } from 'slate';
+import { nodeIsTextNode } from '../types';
 export const isLastSelectedElementEmpty = (editor) => {
-    var _a;
+    var _a, _b;
+    if (!editor.selection)
+        return false;
     const currentlySelectedNodes = Array.from(Editor.nodes(editor, {
         at: Editor.unhangRange(editor, editor.selection),
         match: (n) => !Editor.isEditor(n) && Element.isElement(n) && (!n.type || n.type === 'p'),
@@ -8,5 +11,6 @@ export const isLastSelectedElementEmpty = (editor) => {
     const lastSelectedNode = currentlySelectedNodes === null || currentlySelectedNodes === void 0 ? void 0 : currentlySelectedNodes[(currentlySelectedNodes === null || currentlySelectedNodes === void 0 ? void 0 : currentlySelectedNodes.length) - 1];
     return lastSelectedNode && Element.isElement(lastSelectedNode[0])
         && (!lastSelectedNode[0].type || lastSelectedNode[0].type === 'p')
-        && ((_a = lastSelectedNode[0].children) === null || _a === void 0 ? void 0 : _a[0].text) === '';
+        && nodeIsTextNode((_a = lastSelectedNode[0].children) === null || _a === void 0 ? void 0 : _a[0])
+        && ((_b = lastSelectedNode[0].children) === null || _b === void 0 ? void 0 : _b[0].text) === '';
 };

package/dist/admin/components/forms/field-types/RichText/elements/isListActive.js

@@ -1,19 +1,21 @@
 import { Editor, Element } from 'slate';
+import { getCommonBlock } from './getCommonBlock';
 const isListActive = (editor, format) => {
-    var _a;
-    let parentLI;
-    try {
-        parentLI = Editor.parent(editor, editor.selection);
-    }
-    catch (e) {
-        // swallow error, Slate
-    }
-    if (((_a = parentLI === null || parentLI === void 0 ? void 0 : parentLI[1]) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-        const ancestor = Editor.above(editor, {
-            at: parentLI[1],
-        });
-        return Element.isElement(ancestor[0]) && ancestor[0].type === format;
-    }
-    return false;
+    if (!editor.selection)
+        return false;
+    const [topmostSelectedNode, topmostSelectedNodePath] = getCommonBlock(editor);
+    if (Editor.isEditor(topmostSelectedNode))
+        return false;
+    const [match] = Array.from(Editor.nodes(editor, {
+        at: topmostSelectedNodePath,
+        mode: 'lowest',
+        match: (node, path) => {
+            return !Editor.isEditor(node)
+                && Element.isElement(node)
+                && node.type === format
+                && path.length >= topmostSelectedNodePath.length - 2;
+        },
+    }));
+    return !!match;
 };
 export default isListActive;

package/dist/admin/components/forms/field-types/RichText/elements/isWithinListItem.d.ts

@@ -0,0 +1,2 @@
+import { Editor } from 'slate';
+export declare const isWithinListItem: (editor: Editor) => boolean;

package/dist/admin/components/forms/field-types/RichText/elements/isWithinListItem.js

@@ -0,0 +1,15 @@
+import { Editor, Element } from 'slate';
+export const isWithinListItem = (editor) => {
+    var _a;
+    let parentLI;
+    try {
+        parentLI = Editor.parent(editor, editor.selection);
+    }
+    catch (e) {
+        // swallow error, Slate
+    }
+    if (Element.isElement(parentLI === null || parentLI === void 0 ? void 0 : parentLI[0]) && ((_a = parentLI === null || parentLI === void 0 ? void 0 : parentLI[0]) === null || _a === void 0 ? void 0 : _a.type) === 'li') {
+        return true;
+    }
+    return false;
+};

package/dist/admin/components/forms/field-types/RichText/elements/link/Button/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Props as RichTextFieldProps } from '../../../types';
+export declare const LinkButton: React.FC<{
+    path: string;
+    fieldProps: RichTextFieldProps;
+}>;

package/dist/admin/components/forms/field-types/RichText/elements/link/Button/index.js

@@ -0,0 +1,98 @@
+import React, { Fragment, useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ReactEditor, useSlate } from 'slate-react';
+import { Transforms, Range } from 'slate';
+import { useModal } from '@faceless-ui/modal';
+import ElementButton from '../../Button';
+import LinkIcon from '../../../../../../icons/Link';
+import reduceFieldsToValues from '../../../../../Form/reduceFieldsToValues';
+import { useConfig } from '../../../../../../utilities/Config';
+import isElementActive from '../../isActive';
+import { unwrapLink } from '../utilities';
+import { useEditDepth } from '../../../../../../utilities/EditDepth';
+import { formatDrawerSlug } from '../../../../../../elements/Drawer';
+import { getBaseFields } from '../LinkDrawer/baseFields';
+import { LinkDrawer } from '../LinkDrawer';
+const insertLink = (editor, fields) => {
+    const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
+    const data = reduceFieldsToValues(fields, true);
+    const newLink = {
+        type: 'link',
+        linkType: data.linkType,
+        url: data.url,
+        doc: data.doc,
+        newTab: data.newTab,
+        fields: data.fields,
+        children: [],
+    };
+    if (isCollapsed || !editor.selection) {
+        // If selection anchor and focus are the same,
+        // Just inject a new node with children already set
+        Transforms.insertNodes(editor, {
+            ...newLink,
+            children: [{ text: String(data.text) }],
+        });
+    }
+    else if (editor.selection) {
+        // Otherwise we need to wrap the selected node in a link,
+        // Delete its old text,
+        // Move the selection one position forward into the link,
+        // And insert the text back into the new link
+        Transforms.wrapNodes(editor, newLink, { split: true });
+        Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'word' });
+        Transforms.move(editor, { distance: 1, unit: 'offset' });
+        Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path });
+    }
+    ReactEditor.focus(editor);
+};
+export const LinkButton = ({ fieldProps }) => {
+    var _a, _b;
+    const customFieldSchema = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.fields;
+    const { t } = useTranslation(['upload', 'general']);
+    const editor = useSlate();
+    const config = useConfig();
+    const [fieldSchema] = useState(() => {
+        const fields = [
+            ...getBaseFields(config),
+        ];
+        if (customFieldSchema) {
+            fields.push({
+                name: 'fields',
+                type: 'group',
+                admin: {
+                    style: {
+                        margin: 0,
+                        padding: 0,
+                        borderTop: 0,
+                        borderBottom: 0,
+                    },
+                },
+                fields: customFieldSchema,
+            });
+        }
+        return fields;
+    });
+    const { openModal, closeModal } = useModal();
+    const uuid = useId();
+    const editDepth = useEditDepth();
+    const drawerSlug = formatDrawerSlug({
+        slug: `rich-text-link-${uuid}`,
+        depth: editDepth,
+    });
+    return (React.createElement(Fragment, null,
+        React.createElement(ElementButton, { format: "link", tooltip: t('fields:addLink'), className: "link", onClick: () => {
+                if (isElementActive(editor, 'link')) {
+                    unwrapLink(editor);
+                }
+                else {
+                    openModal(drawerSlug);
+                }
+            } },
+            React.createElement(LinkIcon, null)),
+        React.createElement(LinkDrawer, { drawerSlug: drawerSlug, handleModalSubmit: (fields) => {
+                insertLink(editor, fields);
+                closeModal(drawerSlug);
+            }, fieldSchema: fieldSchema, handleClose: () => {
+                closeModal(drawerSlug);
+            } })));
+};

package/dist/admin/components/forms/field-types/RichText/elements/link/Element/index.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from 'react';
+import { Props as RichTextFieldProps } from '../../../types';
+import './index.scss';
+export declare const LinkElement: React.FC<{
+    attributes: HTMLAttributes<HTMLDivElement>;
+    children: React.ReactNode;
+    element: any;
+    fieldProps: RichTextFieldProps;
+    editorRef: React.RefObject<HTMLDivElement>;
+}>;

package/dist/admin/components/forms/field-types/RichText/elements/link/{Element.js → Element/index.js}

@@ -1,33 +1,52 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useId, useState } from 'react';
 import { ReactEditor, useSlate } from 'slate-react';
 import { Transforms, Node, Editor } from 'slate';
 import { useModal } from '@faceless-ui/modal';
 import { Trans, useTranslation } from 'react-i18next';
-import { unwrapLink } from './utilities';
-import Popup from '../../../../../elements/Popup';
-import { EditModal } from './Modal';
-import { modalSlug as baseModalSlug } from './shared';
-import buildStateFromSchema from '../../../../Form/buildStateFromSchema';
-import { useAuth } from '../../../../../utilities/Auth';
-import { useLocale } from '../../../../../utilities/Locale';
-import { useConfig } from '../../../../../utilities/Config';
-import { getBaseFields } from './Modal/baseFields';
-import reduceFieldsToValues from '../../../../Form/reduceFieldsToValues';
-import deepCopyObject from '../../../../../../../utilities/deepCopyObject';
-import Button from '../../../../../elements/Button';
-import { getTranslation } from '../../../../../../../utilities/getTranslation';
+import { unwrapLink } from '../utilities';
+import Popup from '../../../../../../elements/Popup';
+import { LinkDrawer } from '../LinkDrawer';
+import buildStateFromSchema from '../../../../../Form/buildStateFromSchema';
+import { useAuth } from '../../../../../../utilities/Auth';
+import { useLocale } from '../../../../../../utilities/Locale';
+import { useConfig } from '../../../../../../utilities/Config';
+import { getBaseFields } from '../LinkDrawer/baseFields';
+import reduceFieldsToValues from '../../../../../Form/reduceFieldsToValues';
+import deepCopyObject from '../../../../../../../../utilities/deepCopyObject';
+import Button from '../../../../../../elements/Button';
+import { getTranslation } from '../../../../../../../../utilities/getTranslation';
+import { useEditDepth } from '../../../../../../utilities/EditDepth';
+import { formatDrawerSlug } from '../../../../../../elements/Drawer';
 import './index.scss';
 const baseClass = 'rich-text-link';
-// TODO: Multiple modal windows stacked go boom (rip). Edit Upload in fields -> rich text
-export const LinkElement = ({ attributes, children, element, editorRef, fieldProps }) => {
+const insertChange = (editor, fields, customFieldSchema) => {
+    const data = reduceFieldsToValues(fields, true);
+    const [, parentPath] = Editor.above(editor);
+    const newNode = {
+        newTab: data.newTab,
+        url: data.url,
+        linkType: data.linkType,
+        doc: data.doc,
+    };
+    if (customFieldSchema) {
+        newNode.fields = data.fields;
+    }
+    Transforms.setNodes(editor, newNode, { at: parentPath });
+    Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'block' });
+    Transforms.move(editor, { distance: 1, unit: 'offset' });
+    Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path });
+    ReactEditor.focus(editor);
+};
+export const LinkElement = (props) => {
     var _a, _b;
+    const { attributes, children, element, editorRef, fieldProps, } = props;
     const customFieldSchema = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.fields;
     const editor = useSlate();
     const config = useConfig();
     const { user } = useAuth();
     const locale = useLocale();
     const { t, i18n } = useTranslation('fields');
-    const { openModal, toggleModal } = useModal();
+    const { openModal, toggleModal, closeModal } = useModal();
     const [renderModal, setRenderModal] = useState(false);
     const [renderPopup, setRenderPopup] = useState(false);
     const [initialState, setInitialState] = useState({});
@@ -52,7 +71,12 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
         }
         return fields;
     });
-    const modalSlug = `${baseModalSlug}-${fieldProps.path}`;
+    const uuid = useId();
+    const editDepth = useEditDepth();
+    const drawerSlug = formatDrawerSlug({
+        slug: `rich-text-link-${uuid}`,
+        depth: editDepth,
+    });
     const handleTogglePopup = useCallback((render) => {
         if (!render) {
             setRenderPopup(render);
@@ -75,28 +99,12 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
     }, [renderModal, element, fieldSchema, user, locale, t]);
     return (React.createElement("span", { className: baseClass, ...attributes },
         React.createElement("span", { style: { userSelect: 'none' }, contentEditable: false },
-            renderModal && (React.createElement(EditModal, { modalSlug: modalSlug, fieldSchema: fieldSchema, close: () => {
-                    toggleModal(modalSlug);
+            renderModal && (React.createElement(LinkDrawer, { drawerSlug: drawerSlug, fieldSchema: fieldSchema, handleClose: () => {
+                    toggleModal(drawerSlug);
                     setRenderModal(false);
                 }, handleModalSubmit: (fields) => {
-                    toggleModal(modalSlug);
-                    setRenderModal(false);
-                    const data = reduceFieldsToValues(fields, true);
-                    const [, parentPath] = Editor.above(editor);
-                    const newNode = {
-                        newTab: data.newTab,
-                        url: data.url,
-                        linkType: data.linkType,
-                        doc: data.doc,
-                    };
-                    if (customFieldSchema) {
-                        newNode.fields = data.fields;
-                    }
-                    Transforms.setNodes(editor, newNode, { at: parentPath });
-                    Transforms.delete(editor, { at: editor.selection.focus.path, unit: 'block' });
-                    Transforms.move(editor, { distance: 1, unit: 'offset' });
-                    Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path });
-                    ReactEditor.focus(editor);
+                    insertChange(editor, fields, customFieldSchema);
+                    closeModal(drawerSlug);
                 }, initialState: initialState })),
             React.createElement(Popup, { buttonType: "none", size: "small", forceOpen: renderPopup, onToggleOpen: handleTogglePopup, horizontalAlign: "left", verticalAlign: "bottom", boundingRef: editorRef, render: () => {
                     var _a, _b, _c, _d;
@@ -107,7 +115,7 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
                         React.createElement(Button, { className: `${baseClass}__link-edit`, icon: "edit", round: true, buttonStyle: "icon-label", onClick: (e) => {
                                 e.preventDefault();
                                 setRenderPopup(false);
-                                openModal(modalSlug);
+                                openModal(drawerSlug);
                                 setRenderModal(true);
                             }, tooltip: t('general:edit') }),
                         React.createElement(Button, { className: `${baseClass}__link-close`, icon: "x", round: true, buttonStyle: "icon-label", onClick: (e) => {
@@ -116,7 +124,7 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
                             }, tooltip: t('general:remove') })));
                 } })),
         React.createElement("span", { tabIndex: 0, role: "button", className: [
-                `${baseClass}__button`,
+                `${baseClass}__popup-toggler`,
             ].filter(Boolean).join(' '), onKeyDown: (e) => { if (e.key === 'Enter')
                 setRenderPopup(true); }, onClick: () => setRenderPopup(true) }, children)));
 };

package/dist/admin/components/forms/field-types/RichText/elements/link/{index.scss → Element/index.scss}

@@ -1,4 +1,4 @@
-@import '../../../../../../scss/styles.scss';
+@import '../../../../../../../scss/styles.scss';
 
 .rich-text-link {
   position: relative;
@@ -11,7 +11,6 @@
     bottom: 0;
     left: 0;
 
-
     .popup__scroll,
     .popup__wrap {
       overflow: visible;
@@ -52,18 +51,19 @@
   }
 }
 
-.rich-text-link__button {
-  @extend %btn-reset;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
+.rich-text-link__popup-toggler {
   position: relative;
+  border: 0;
+  background-color: transparent;
+  padding: 0;
   text-decoration: underline;
   cursor: text;
 
+  &:focus,
+  &:focus-within {
+    outline: none;
+  }
+
   &--open {
     z-index: var(--z-popup);
   }

package/dist/admin/components/forms/field-types/RichText/elements/link/{Modal → LinkDrawer}/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { Props } from './types';
 import './index.scss';
-export declare const EditModal: React.FC<Props>;
+export declare const LinkDrawer: React.FC<Props>;