@contentful/field-editor-rich-text 3.14.3 → 3.15.1

package/dist/esm/plugins/CommandPalette/components/CommandList.js

@@ -7,47 +7,47 @@ import { useSdkContext } from '../../../SdkProvider';
 import { useCommandList } from '../hooks/useCommandList';
 import { useCommands } from '../useCommands';
 import styles from './CommandList.styles';
-const Group = ({ commandGroup , selectedItem  })=>React.createElement("section", {
+const Group = ({ commandGroup, selectedItem })=>/*#__PURE__*/ React.createElement("section", {
         key: commandGroup.group
-    }, React.createElement(SectionHeading, {
+    }, /*#__PURE__*/ React.createElement(SectionHeading, {
         as: "h3",
         marginBottom: "spacingS",
         marginTop: "spacingS",
         marginLeft: "spacingM",
         marginRight: "spacingM"
-    }, commandGroup.group), commandGroup.commands.map((command)=>React.createElement("button", {
+    }, commandGroup.group), commandGroup.commands.map((command)=>/*#__PURE__*/ React.createElement("button", {
             key: command.id,
             id: command.id,
             className: cx(styles.menuItem, {
                 [styles.menuItemSelected]: command.id === selectedItem
             }),
             onClick: command.callback
-        }, command.label)), React.createElement("hr", {
+        }, command.label)), /*#__PURE__*/ React.createElement("hr", {
         className: styles.menuDivider,
         "aria-orientation": "horizontal"
     }));
-const Asset = ({ command , selectedItem  })=>React.createElement("button", {
+const Asset = ({ command, selectedItem })=>/*#__PURE__*/ React.createElement("button", {
         key: command.id,
         id: command.id,
         className: cx(styles.menuItem, {
             [styles.menuItemSelected]: command.id === selectedItem
         }),
         onClick: command.callback
-    }, React.createElement(Flex, {
+    }, /*#__PURE__*/ React.createElement(Flex, {
         alignItems: "center",
         gap: "spacingS"
-    }, command.thumbnail ? React.createElement("img", {
+    }, command.thumbnail ? /*#__PURE__*/ React.createElement("img", {
         width: "30",
         height: "30",
         src: command.thumbnail,
         alt: "",
         className: styles.thumbnail
-    }) : React.createElement(AssetIcon, {
+    }) : /*#__PURE__*/ React.createElement(AssetIcon, {
         width: "30",
         height: "30",
         className: styles.thumbnail
-    }), React.createElement("span", null, command.label)));
-const Item = ({ command , selectedItem  })=>React.createElement("button", {
+    }), /*#__PURE__*/ React.createElement("span", null, command.label)));
+const Item = ({ command, selectedItem })=>/*#__PURE__*/ React.createElement("button", {
         key: command.id,
         id: command.id,
         className: cx(styles.menuItem, {
@@ -55,70 +55,70 @@ const Item = ({ command , selectedItem  })=>React.createElement("button", {
         }),
         onClick: command.callback
     }, command.label);
-const CommandListItems = ({ commandItems , selectedItem  })=>{
-    return React.createElement(React.Fragment, null, commandItems.map((command)=>{
-        return 'group' in command ? React.createElement(Group, {
+const CommandListItems = ({ commandItems, selectedItem })=>{
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, commandItems.map((command)=>{
+        return 'group' in command ? /*#__PURE__*/ React.createElement(Group, {
             key: command.group,
             commandGroup: command,
             selectedItem: selectedItem
-        }) : command.asset ? React.createElement(Asset, {
+        }) : command.asset ? /*#__PURE__*/ React.createElement(Asset, {
             key: command.id,
             command: command,
             selectedItem: selectedItem
-        }) : React.createElement(Item, {
+        }) : /*#__PURE__*/ React.createElement(Item, {
             key: command.id,
             command: command,
             selectedItem: selectedItem
         });
     }));
 };
-export const CommandList = ({ query , editor , textContainer  })=>{
+export const CommandList = ({ query, editor, textContainer })=>{
     const sdk = useSdkContext();
     const popoverContainer = React.useRef(null);
     const popper = usePopper(textContainer, popoverContainer?.current, {
         placement: 'bottom-start'
     });
     const commandItems = useCommands(sdk, query, editor);
-    const { selectedItem , isOpen  } = useCommandList(commandItems, popoverContainer);
+    const { selectedItem, isOpen } = useCommandList(commandItems, popoverContainer);
     if (!commandItems.length) {
         return null;
     }
-    return React.createElement("div", {
+    return /*#__PURE__*/ React.createElement("div", {
         className: styles.container,
         tabIndex: -1,
         contentEditable: false
-    }, React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement("div", {
         role: "alert"
-    }, React.createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", React.createElement("kbd", null, "enter"), " to select, ", React.createElement("kbd", null, "arrows"), " to navigate, ", React.createElement("kbd", null, "escape"), " to close.")), React.createElement(Portal, null, React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/ React.createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/ React.createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/ React.createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/ React.createElement(Portal, null, /*#__PURE__*/ React.createElement("div", {
         "aria-hidden": true,
         ref: popoverContainer,
         className: styles.menuPoper,
         style: popper.styles.popper,
         ...popper.attributes.popper
-    }, React.createElement(Popover, {
+    }, /*#__PURE__*/ React.createElement(Popover, {
         isOpen: isOpen,
         usePortal: false,
-        autoFocus: false
-    }, React.createElement(Popover.Trigger, null, React.createElement("span", null)), React.createElement(Popover.Content, {
+        /* eslint-disable-next-line jsx-a11y/no-autofocus -- we want to keep focus on text input*/ autoFocus: false
+    }, /*#__PURE__*/ React.createElement(Popover.Trigger, null, /*#__PURE__*/ React.createElement("span", null)), /*#__PURE__*/ React.createElement(Popover.Content, {
         className: styles.menuContent,
         testId: "rich-text-commands"
-    }, React.createElement("header", {
+    }, /*#__PURE__*/ React.createElement("header", {
         className: styles.menuHeader
-    }, React.createElement(SectionHeading, {
+    }, /*#__PURE__*/ React.createElement(SectionHeading, {
         marginBottom: "none"
-    }, "Richtext commands")), React.createElement("div", {
+    }, "Richtext commands")), /*#__PURE__*/ React.createElement("div", {
         className: styles.menuList,
         "data-test-id": "rich-text-commands-list"
-    }, React.createElement(CommandListItems, {
+    }, /*#__PURE__*/ React.createElement(CommandListItems, {
         commandItems: commandItems,
         selectedItem: selectedItem
-    })), React.createElement("footer", {
+    })), /*#__PURE__*/ React.createElement("footer", {
         className: styles.menuFooter
-    }, React.createElement(Stack, {
+    }, /*#__PURE__*/ React.createElement(Stack, {
         as: "ul",
         margin: "none",
         padding: "none",
         spacing: "spacingS",
         className: styles.footerList
-    }, React.createElement("li", null, React.createElement("kbd", null, "↑"), React.createElement("kbd", null, "↓"), " to navigate"), React.createElement("li", null, React.createElement("kbd", null, "↵"), " to confirm"), React.createElement("li", null, React.createElement("kbd", null, "esc"), " to close"))))))));
+    }, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("kbd", null, "↑"), /*#__PURE__*/ React.createElement("kbd", null, "↓"), " to navigate"), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("kbd", null, "↵"), " to confirm"), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("kbd", null, "esc"), " to close"))))))));
 };

package/dist/esm/plugins/CommandPalette/components/CommandPrompt.js

@@ -14,13 +14,13 @@ export const CommandPrompt = (props)=>{
     ]);
     const editor = props.editor;
     const [textElement, setTextElement] = React.useState();
-    return React.createElement("span", {
+    return /*#__PURE__*/ React.createElement("span", {
         className: styles.commandPrompt,
         ref: (e)=>{
             setTextElement(e);
         },
         ...props.attributes
-    }, props.children, React.createElement(CommandList, {
+    }, props.children, /*#__PURE__*/ React.createElement(CommandList, {
         query: query,
         editor: editor,
         textContainer: textElement

package/dist/esm/plugins/CommandPalette/createCommandPalettePlugin.js

@@ -1,7 +1,17 @@
 import { CommandPrompt } from './components/CommandPrompt';
 import { COMMAND_PROMPT } from './constants';
 import { createOnKeyDown } from './onKeyDown';
-export const createCommandPalettePlugin = ()=>{
+/**
+ * A command palette plugin (aka slash commands)
+ *
+ * How does it work?
+ * * When the user presses the slash key, the editor will show a command palette
+ * * When the user presses a key, the command palette will show the command suggestions
+ * * When the user presses enter, the command palette will execute the command
+ * * When the user presses escape, the command palette will hide
+ * * When the user presses a letter, number, or space, the command palette will show the command suggestions
+ * * When the user presses backspace, the command palette will remove the last character from the command string
+ */ export const createCommandPalettePlugin = ()=>{
     return {
         key: COMMAND_PROMPT,
         type: COMMAND_PROMPT,

package/dist/esm/plugins/CommandPalette/hooks/useCommandList.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import isHotkey from 'is-hotkey';
 export const useCommandList = (commandItems, container)=>{
     const [selectedItem, setSelectedItem] = React.useState(()=>{
+        // select the first item on initial render
         if (!commandItems.length) {
             return '';
         }
@@ -54,6 +55,7 @@ export const useCommandList = (commandItems, container)=>{
                     currBtn.click();
                 }
             }
+        //TODO: handle shift+enter, which must be detected using separate events
         }
         if (commandItems.length) {
             window.addEventListener('keydown', handleKeyDown);

package/dist/esm/plugins/CommandPalette/onKeyDown.js

@@ -5,6 +5,10 @@ import { COMMAND_PROMPT } from './constants';
 export const createOnKeyDown = ()=>{
     return (editor)=>{
         return (event)=>{
+            // Support for different keyboard layouts:
+            // `isHotKey` uses by default `event.which`, which will never generates a match for all layouts (QWERTY: `/`, QWERTZ: `shift+7`)
+            // with `byKey: true` `isHotKey` uses `event.key` which will return the interpreted key '/'
+            // It would still fail without the the optional `shift?` param, as it first checks the modKeys (`shiftKey` would be true on QWERTZ)
             if (isHotkey('shift?+/', {
                 byKey: true
             }, event)) {
@@ -21,6 +25,7 @@ export const createOnKeyDown = ()=>{
             const [, path] = getAboveNode(editor);
             const range = getRange(editor, path);
             if (isHotkey('backspace', event)) {
+                // if it is the last character in the command string
                 if (range.focus.offset - range.anchor.offset === 1) {
                     removeMark(editor, COMMAND_PROMPT, range);
                 }

package/dist/esm/plugins/CommandPalette/onKeyDown.spec.js

@@ -9,7 +9,7 @@ jest.mock('../../internal/transforms', ()=>{
     };
 });
 describe('onKeyDown', ()=>{
-    const { editor  } = createTestEditor({});
+    const { editor } = createTestEditor({});
     const addMark = jest.spyOn(internal, 'addMark');
     const onCommandPaletteAction = jest.spyOn(editor.tracking, 'onCommandPaletteAction');
     afterEach(()=>{
@@ -27,7 +27,7 @@ describe('onKeyDown', ()=>{
         which: 55,
         shiftKey: true
     }}
-  `('supports hotKeys for every keyboard layout #{layout}', ({ key  })=>{
+  `('supports hotKeys for every keyboard layout #{layout}', ({ key })=>{
         createOnKeyDown()(editor, {})({
             type: 'keydown',
             ...key

package/dist/esm/plugins/CommandPalette/useCommands.js

@@ -39,7 +39,7 @@ export function isCommandPromptPluginEnabled(sdk) {
 }
 function getCommandPermissions(sdk, editor) {
     const canInsertBlocks = !isNodeTypeSelected(editor, BLOCKS.TABLE);
-    const { inlineAllowed , entriesAllowed , assetsAllowed  } = isCommandPromptPluginEnabled(sdk);
+    const { inlineAllowed, entriesAllowed, assetsAllowed } = isCommandPromptPluginEnabled(sdk);
     return {
         inlineAllowed,
         entriesAllowed: entriesAllowed && canInsertBlocks,
@@ -68,7 +68,7 @@ const getAllowedContentTypesFromValidation = (validations)=>{
 };
 export const useCommands = (sdk, query, editor)=>{
     const contentTypes = sdk.space.getCachedContentTypes();
-    const { inlineAllowed , entriesAllowed , assetsAllowed  } = getCommandPermissions(sdk, editor);
+    const { inlineAllowed, entriesAllowed, assetsAllowed } = getCommandPermissions(sdk, editor);
     const allowedContentTypesFromValidation = getAllowedContentTypesFromValidation(sdk.field.validations);
     const filterContentTypesByValidation = (type)=>contentTypes.filter((contentType)=>allowedContentTypesFromValidation[type]?.[contentType.sys.id]);
     const filteredBlockContentTypes = filterContentTypesByValidation(BLOCKS.EMBEDDED_ENTRY);
@@ -217,7 +217,7 @@ export const useCommands = (sdk, query, editor)=>{
         }
         return contentTypeCommands;
     });
-    return query ? commands.reduce((list, nextItem)=>{
+    /* filter both commands and groups of commands with the user typed query */ return query ? commands.reduce((list, nextItem)=>{
         if ('group' in nextItem) {
             const subcommands = nextItem.commands.filter((command)=>{
                 return command.label.toLowerCase().includes(query.toLowerCase());

package/dist/esm/plugins/CommandPalette/utils/fetchEntries.js

@@ -7,11 +7,13 @@ export async function fetchEntries(sdk, contentType, query) {
     return entries.items.map((entry)=>{
         const description = entityHelpers.getEntityDescription({
             contentType,
+            // @ts-expect-error inconsistent in typing between app-sdk & field-editors-shared
             entity: entry,
             localeCode: sdk.field.locale,
             defaultLocaleCode: sdk.locales.default
         });
         const displayTitle = entityHelpers.getEntryTitle({
+            // @ts-expect-error inconsistent in typing between app-sdk & field-editors-shared
             entry,
             contentType,
             localeCode: sdk.field.locale,

package/dist/esm/plugins/CommandPalette/utils/trimLeadingSlash.js

@@ -1,4 +1,9 @@
-export function trimLeadingSlash(text) {
+/**
+ * Trim leading slash character if found. Bails otherwise.
+ *
+ * @example
+ * trimLeadingSlash("/my query") // --> "my query"
+ */ export function trimLeadingSlash(text) {
     if (!text.startsWith('/')) {
         return text;
     }

package/dist/esm/plugins/DragAndDrop/index.js

@@ -9,7 +9,11 @@ export function createDragAndDropPlugin() {
         INLINES.EMBEDDED_ENTRY,
         INLINES.EMBEDDED_RESOURCE
     ];
-    const ON_DROP_ALLOWED_TYPES = {
+    /**
+   * HTML node names where dropping should be allowed
+   * Usually for elements where `Transforms.removeNodes` is needed
+   * TODO: looking up for html nodes is not the best solution and it won't scale but it works fine for our current cases/elements
+   */ const ON_DROP_ALLOWED_TYPES = {
         TABLE: [
             INLINES.EMBEDDED_ENTRY,
             INLINES.EMBEDDED_RESOURCE
@@ -18,6 +22,7 @@ export function createDragAndDropPlugin() {
     return {
         key: 'DragAndDropPlugin',
         handlers: {
+            // If true, the next handlers will be skipped.
             onDrop: (editor)=>(event)=>{
                     const [draggingBlock] = Array.from(getNodeEntries(editor, {
                         match: (node)=>DRAGGABLE_TYPES.includes(node.type)
@@ -25,10 +30,13 @@ export function createDragAndDropPlugin() {
                     if (!draggingBlock) return false;
                     const [draggingNode] = draggingBlock;
                     if (!event.nativeEvent.target) return false;
+                    // TODO: looking up for html nodes is not the best solution and it won't scale, we need to find a way to know the dropping target slate element
                     const dropDisallowed = getParents(event.nativeEvent.target).some((node)=>{
                         return ON_DROP_ALLOWED_TYPES[node.nodeName] ? !ON_DROP_ALLOWED_TYPES[node.nodeName]?.includes(draggingNode.type) : false;
                     });
                     if (!dropDisallowed) {
+                        // Move the drop event to a new undo batch mitigating the bug where undo not only moves it back,
+                        // but also undoes a previous action: https://github.com/ianstormtaylor/slate/issues/4694
                         editor.history.undos.push([]);
                     }
                     return dropDisallowed;

package/dist/esm/plugins/EmbeddedEntityBlock/LinkedEntityBlock.js

@@ -9,13 +9,13 @@ import { FetchingWrappedAssetCard } from '../shared/FetchingWrappedAssetCard';
 import { FetchingWrappedEntryCard } from '../shared/FetchingWrappedEntryCard';
 import { LinkedBlockWrapper } from '../shared/LinkedBlockWrapper';
 export function LinkedEntityBlock(props) {
-    const { attributes , children , element  } = props;
-    const { onEntityFetchComplete  } = useLinkTracking();
+    const { attributes, children, element } = props;
+    const { onEntityFetchComplete } = useLinkTracking();
     const isSelected = useSelected();
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
     const isDisabled = useReadOnly();
-    const { id: entityId , linkType: entityType  } = element.data.target.sys;
+    const { id: entityId, linkType: entityType } = element.data.target.sys;
     const handleEditClick = React.useCallback(()=>{
         const openEntity = entityType === 'Asset' ? sdk.navigator.openAsset : sdk.navigator.openEntry;
         return openEntity(entityId, {
@@ -36,9 +36,9 @@ export function LinkedEntityBlock(props) {
         editor,
         element
     ]);
-    return React.createElement(LinkedBlockWrapper, {
+    return /*#__PURE__*/ React.createElement(LinkedBlockWrapper, {
         attributes: attributes,
-        card: React.createElement(React.Fragment, null, entityType === 'Entry' && React.createElement(FetchingWrappedEntryCard, {
+        card: /*#__PURE__*/ React.createElement(React.Fragment, null, entityType === 'Entry' && /*#__PURE__*/ React.createElement(FetchingWrappedEntryCard, {
             sdk: sdk,
             entryId: entityId,
             locale: sdk.field.locale,
@@ -47,7 +47,7 @@ export function LinkedEntityBlock(props) {
             onRemove: handleRemoveClick,
             onEdit: handleEditClick,
             onEntityFetchComplete: onEntityFetchComplete
-        }), entityType === 'Asset' && React.createElement(FetchingWrappedAssetCard, {
+        }), entityType === 'Asset' && /*#__PURE__*/ React.createElement(FetchingWrappedAssetCard, {
             sdk: sdk,
             assetId: entityId,
             locale: sdk.field.locale,

package/dist/esm/plugins/EmbeddedEntityInline/FetchingWrappedInlineEntryCard.js

@@ -6,7 +6,7 @@ import { ScheduledIconWithTooltip, useEntity, useEntityLoader } from '@contentfu
 import { entityHelpers } from '@contentful/field-editor-shared';
 import { INLINES } from '@contentful/rich-text-types';
 import { css } from 'emotion';
-const { getEntryTitle , getEntryStatus  } = entityHelpers;
+const { getEntryTitle, getEntryStatus } = entityHelpers;
 const styles = {
     scheduledIcon: css({
         verticalAlign: 'text-bottom',
@@ -14,11 +14,11 @@ const styles = {
     })
 };
 export function FetchingWrappedInlineEntryCard(props) {
-    const { data: entry , status: requestStatus  } = useEntity('Entry', props.entryId);
-    const { getEntityScheduledActions  } = useEntityLoader();
+    const { data: entry, status: requestStatus } = useEntity('Entry', props.entryId);
+    const { getEntityScheduledActions } = useEntityLoader();
     const loadEntityScheduledActions = ()=>getEntityScheduledActions('Entry', props.entryId);
     const allContentTypes = props.sdk.space.getCachedContentTypes();
-    const { onEntityFetchComplete  } = props;
+    const { onEntityFetchComplete } = props;
     const contentType = React.useMemo(()=>{
         if (!entry || !allContentTypes) return undefined;
         return allContentTypes.find((contentType)=>contentType.sys.id === entry.sys.contentType.sys.id);
@@ -49,25 +49,25 @@ export function FetchingWrappedInlineEntryCard(props) {
         props.sdk.locales.default
     ]);
     if (requestStatus === 'error') {
-        return React.createElement(InlineEntryCard, {
+        return /*#__PURE__*/ React.createElement(InlineEntryCard, {
             title: "Entry missing or inaccessible",
             testId: INLINES.EMBEDDED_ENTRY,
             isSelected: props.isSelected
         });
     }
     if (requestStatus === 'loading') {
-        return React.createElement(InlineEntryCard, {
+        return /*#__PURE__*/ React.createElement(InlineEntryCard, {
             isLoading: true
         });
     }
     const entryStatus = getEntryStatus(entry.sys);
     if (entryStatus === 'deleted') {
-        return React.createElement(InlineEntryCard, {
+        return /*#__PURE__*/ React.createElement(InlineEntryCard, {
             title: "Entry missing or inaccessible",
             testId: INLINES.EMBEDDED_ENTRY,
             isSelected: props.isSelected,
             actions: [
-                React.createElement(MenuItem, {
+                /*#__PURE__*/ React.createElement(MenuItem, {
                     key: "remove",
                     onClick: props.onRemove,
                     testId: "delete"
@@ -75,30 +75,30 @@ export function FetchingWrappedInlineEntryCard(props) {
             ]
         });
     }
-    return React.createElement(InlineEntryCard, {
+    return /*#__PURE__*/ React.createElement(InlineEntryCard, {
         testId: INLINES.EMBEDDED_ENTRY,
         isSelected: props.isSelected,
         title: `${contentTypeName}: ${title}`,
         status: entryStatus,
         actions: [
-            React.createElement(MenuItem, {
+            /*#__PURE__*/ React.createElement(MenuItem, {
                 key: "edit",
                 onClick: props.onEdit
             }, "Edit"),
-            React.createElement(MenuItem, {
+            /*#__PURE__*/ React.createElement(MenuItem, {
                 key: "remove",
                 onClick: props.onRemove,
                 disabled: props.isDisabled,
                 testId: "delete"
             }, "Remove")
         ]
-    }, React.createElement(ScheduledIconWithTooltip, {
+    }, /*#__PURE__*/ React.createElement(ScheduledIconWithTooltip, {
         getEntityScheduledActions: loadEntityScheduledActions,
         entityType: "Entry",
         entityId: entry.sys.id
-    }, React.createElement(ClockIcon, {
+    }, /*#__PURE__*/ React.createElement(ClockIcon, {
         className: styles.scheduledIcon,
         variant: "muted",
         testId: "scheduled-icon"
-    })), React.createElement(Text, null, title));
+    })), /*#__PURE__*/ React.createElement(Text, null, title));
 }

package/dist/esm/plugins/EmbeddedEntityInline/LinkedEntityInline.js

@@ -9,13 +9,13 @@ import { useLinkTracking } from '../links-tracking';
 import { LinkedInlineWrapper } from '../shared/LinkedInlineWrapper';
 import { FetchingWrappedInlineEntryCard } from './FetchingWrappedInlineEntryCard';
 export function LinkedEntityInline(props) {
-    const { attributes , children , element  } = props;
-    const { onEntityFetchComplete  } = useLinkTracking();
+    const { attributes, children, element } = props;
+    const { onEntityFetchComplete } = useLinkTracking();
     const isSelected = useSelected();
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
     const isDisabled = useReadOnly();
-    const { id: entryId  } = element.data.target.sys;
+    const { id: entryId } = element.data.target.sys;
     function handleEditClick() {
         return sdk.navigator.openEntry(entryId, {
             slideIn: {
@@ -32,9 +32,9 @@ export function LinkedEntityInline(props) {
             at: pathToElement
         });
     }
-    return React.createElement(LinkedInlineWrapper, {
+    return /*#__PURE__*/ React.createElement(LinkedInlineWrapper, {
         attributes: attributes,
-        card: React.createElement(FetchingWrappedInlineEntryCard, {
+        card: /*#__PURE__*/ React.createElement(FetchingWrappedInlineEntryCard, {
             sdk: sdk,
             entryId: entryId,
             isSelected: isSelected,

package/dist/esm/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js

@@ -7,8 +7,8 @@ import { useLinkTracking } from '../links-tracking';
 import { FetchingWrappedResourceCard } from '../shared/FetchingWrappedResourceCard';
 import { LinkedBlockWrapper } from '../shared/LinkedBlockWrapper';
 export function LinkedResourceBlock(props) {
-    const { attributes , children , element  } = props;
-    const { onEntityFetchComplete  } = useLinkTracking();
+    const { attributes, children, element } = props;
+    const { onEntityFetchComplete } = useLinkTracking();
     const isSelected = useSelected();
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
@@ -24,10 +24,10 @@ export function LinkedResourceBlock(props) {
         editor,
         element
     ]);
-    return React.createElement(LinkedBlockWrapper, {
+    return /*#__PURE__*/ React.createElement(LinkedBlockWrapper, {
         attributes: attributes,
         link: element.data.target,
-        card: React.createElement(FetchingWrappedResourceCard, {
+        card: /*#__PURE__*/ React.createElement(FetchingWrappedResourceCard, {
             sdk: sdk,
             link: link,
             isDisabled: isDisabled,

package/dist/esm/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.js

@@ -3,10 +3,11 @@ import { InlineEntryCard, MenuItem, Text } from '@contentful/f36-components';
 import { useResource } from '@contentful/field-editor-reference';
 import { entityHelpers } from '@contentful/field-editor-shared';
 import { INLINES } from '@contentful/rich-text-types';
-const { getEntryTitle , getEntryStatus  } = entityHelpers;
+import { truncateTitle } from '../../plugins/shared/utils';
+const { getEntryTitle, getEntryStatus } = entityHelpers;
 export function FetchingWrappedResourceInlineCard(props) {
-    const { link , onEntityFetchComplete  } = props;
-    const { data , status: requestStatus  } = useResource(link.linkType, link.urn);
+    const { link, onEntityFetchComplete } = props;
+    const { data, status: requestStatus } = useResource(link.linkType, link.urn);
     React.useEffect(()=>{
         if (requestStatus === 'success') {
             onEntityFetchComplete?.();
@@ -16,18 +17,18 @@ export function FetchingWrappedResourceInlineCard(props) {
         requestStatus
     ]);
     if (requestStatus === 'error') {
-        return React.createElement(InlineEntryCard, {
+        return /*#__PURE__*/ React.createElement(InlineEntryCard, {
             title: "Entry missing or inaccessible",
             testId: INLINES.EMBEDDED_RESOURCE,
             isSelected: props.isSelected
         });
     }
     if (requestStatus === 'loading' || data === undefined) {
-        return React.createElement(InlineEntryCard, {
+        return /*#__PURE__*/ React.createElement(InlineEntryCard, {
             isLoading: true
         });
     }
-    const { resource: entry , contentType , defaultLocaleCode , space  } = data;
+    const { resource: entry, contentType, defaultLocaleCode, space } = data;
     const title = getEntryTitle({
         entry,
         contentType,
@@ -35,19 +36,20 @@ export function FetchingWrappedResourceInlineCard(props) {
         localeCode: defaultLocaleCode,
         defaultTitle: 'Untitled'
     });
-    const status = getEntryStatus(entry?.sys);
-    return React.createElement(InlineEntryCard, {
+    const truncatedTitle = truncateTitle(title, 40);
+    const status = getEntryStatus(entry.sys);
+    return /*#__PURE__*/ React.createElement(InlineEntryCard, {
         testId: INLINES.EMBEDDED_RESOURCE,
         isSelected: props.isSelected,
-        title: `${data.contentType.name}: ${title} (Space: ${space.name})`,
+        title: `${contentType.name}: ${truncatedTitle} (Space: ${space.name} – Env.: ${entry.sys.environment.sys.id})`,
         status: status,
         actions: [
-            React.createElement(MenuItem, {
+            /*#__PURE__*/ React.createElement(MenuItem, {
                 key: "remove",
                 onClick: props.onRemove,
                 disabled: props.isDisabled,
                 testId: "delete"
             }, "Remove")
         ]
-    }, React.createElement(Text, null, title));
+    }, /*#__PURE__*/ React.createElement(Text, null, title));
 }

package/dist/esm/plugins/EmbeddedResourceInline/LinkedResourceInline.js

@@ -7,8 +7,8 @@ import { useLinkTracking } from '../links-tracking';
 import { LinkedInlineWrapper } from '../shared/LinkedInlineWrapper';
 import { FetchingWrappedResourceInlineCard } from './FetchingWrappedResourceInlineCard';
 export function LinkedResourceInline(props) {
-    const { attributes , children , element  } = props;
-    const { onEntityFetchComplete  } = useLinkTracking();
+    const { attributes, children, element } = props;
+    const { onEntityFetchComplete } = useLinkTracking();
     const isSelected = useSelected();
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
@@ -21,10 +21,10 @@ export function LinkedResourceInline(props) {
             at: pathToElement
         });
     }
-    return React.createElement(LinkedInlineWrapper, {
+    return /*#__PURE__*/ React.createElement(LinkedInlineWrapper, {
         attributes: attributes,
         link: element.data.target,
-        card: React.createElement(FetchingWrappedResourceInlineCard, {
+        card: /*#__PURE__*/ React.createElement(FetchingWrappedResourceInlineCard, {
             sdk: sdk,
             link: link,
             isDisabled: isDisabled,