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

package/dist/esm/plugins/Text/createTextPlugin.js

@@ -5,6 +5,9 @@ export function createTextPlugin(restrictedMarks = []) {
     return {
         key: 'TextPlugin',
         handlers: {
+            // Triple selection in a non-Firefox browser undesirably selects
+            // the start of the next block. Editor.unhangRange helps removing
+            // the extra block at the end.
             onMouseUp: (editor)=>()=>{
                     if (!editor.selection) {
                         return;
@@ -13,9 +16,16 @@ export function createTextPlugin(restrictedMarks = []) {
                 }
         },
         withOverrides: (editor)=>{
-            const { insertText  } = editor;
+            // Reverts the change made upstream that caused the cursor
+            // to be trapped inside inline elements.
+            //
+            // Reverts https://github.com/ianstormtaylor/slate/pull/4578/
+            // Related https://github.com/ianstormtaylor/slate/issues/4704
+            const { insertText } = editor;
             editor.insertText = (text)=>{
-                const { selection  } = editor;
+                const { selection } = editor;
+                // If the cursor is at the end of an inline, move it outside
+                // before inserting
                 if (selection && isRangeCollapsed(selection)) {
                     const inlinePath = getAboveNode(editor, {
                         match: (n)=>isInline(editor, n),
@@ -31,7 +41,8 @@ export function createTextPlugin(restrictedMarks = []) {
                 }
                 return insertText(text);
             };
-            const { deleteForward , deleteBackward  } = editor;
+            // When pressing delete instead of backspace
+            const { deleteForward, deleteBackward } = editor;
             editor.deleteBackward = (unit)=>{
                 deleteEmptyParagraph(unit, editor, deleteBackward);
             };
@@ -67,8 +78,9 @@ function deleteEmptyParagraph(unit, editor, deleteFunction) {
     if (entry) {
         const [paragraphOrHeading, path] = entry;
         const isTextEmpty = isAncestorEmpty(editor, paragraphOrHeading);
+        // We ignore paragraphs/headings that are children of ul, ol, blockquote, tables, etc
         const isRootLevel = path.length === 1;
-        const hasSiblings = editor.children.length > 1;
+        const hasSiblings = editor.children.length > 1; // prevent editor from losing focus
         if (isTextEmpty && isRootLevel && hasSiblings) {
             removeNodes(editor, {
                 at: path
@@ -102,7 +114,11 @@ function deleteEmptyParagraph(unit, editor, deleteFunction) {
         deleteFunction(unit);
     }
 }
-function fixPasteAsPlainText(editor) {
+/**
+ * To be compatible with the old behavior we need to treat each 2 consecutive
+ * line breaks as a new paragraph when pasting as plain text (also known as
+ * paste and match style in macOS)
+ */ function fixPasteAsPlainText(editor) {
     editor.insertTextData = (data)=>{
         const text = data.getData('text/plain');
         if (!text) {
@@ -111,6 +127,7 @@ function fixPasteAsPlainText(editor) {
         const lines = text.split(/\n{2}/);
         let split = false;
         for (const line of lines){
+            // empty lines
             if (/^(\r\n?|\n)$/.test(line)) {
                 continue;
             }

package/dist/esm/plugins/Tracking/createTrackingPlugin.js

@@ -21,6 +21,7 @@ export function getPastingSource(data) {
     if (doc.querySelector('meta[content*="Microsoft Word"]')) {
         return 'Microsoft Word';
     }
+    // TODO: MS Word Online doesn't give us specific tags, we might need to have a closer look at its tracking result since we are using generic values to identify it
     if (doc.querySelector('[style*="Arial_MSFontService"]') && (doc.querySelector('.TextRun') || doc.querySelector('.OutlineElement'))) {
         return 'Microsoft Word Online';
     }
@@ -58,7 +59,7 @@ export const createTrackingPlugin = (onAction)=>{
     return {
         key: 'TrackingPlugin',
         withOverrides: (editor)=>{
-            const { insertData  } = editor;
+            const { insertData } = editor;
             editor.tracking = trackingActions;
             editor.insertData = (data)=>{
                 const isCopyAndPaste = data.types.length !== 0;

package/dist/esm/plugins/Tracking/utils.js

@@ -3,6 +3,7 @@ import { documentToPlainTextString } from '@contentful/rich-text-plain-text-rend
 import Schema from '../../constants/Schema';
 export function getCharacterCount(editor) {
     const document = contentfulSlateJSAdapter.toContentfulDocument({
+        // eslint-disable-next-line -- parameter type is not exported @typescript-eslint/no-explicit-any
         document: editor.children,
         schema: Schema
     });

package/dist/esm/plugins/Voids/createVoidsPlugin.js

@@ -4,6 +4,8 @@ export const createVoidsPlugin = ()=>({
         key: 'VoidsPlugin',
         exitBreak: [
             {
+                // Inserts a new paragraph *before* a void element if it's the very first
+                // node on the editor
                 hotkey: 'enter',
                 before: true,
                 query: {
@@ -11,7 +13,10 @@ export const createVoidsPlugin = ()=>({
                 }
             },
             {
+                // Inserts a new paragraph on enter when a void element is focused
                 hotkey: 'enter',
+                // exploit the internal use of Array.slice(0, level + 1) by the exitBreak plugin
+                // to stay in the parent element
                 level: -2,
                 query: {
                     filter: ([node, path])=>!(isRootLevel(path) && isFirstChildPath(path)) && !!node.isVoid

package/dist/esm/plugins/Voids/transformVoid.js

@@ -1,5 +1,7 @@
 import { insertNodes, removeNodes } from '../../internal/transforms';
-export const transformVoid = (editor, [node, path])=>{
+/**
+ * Re-creates a void node with valid children.
+ */ export const transformVoid = (editor, [node, path])=>{
     const validVoid = {
         ...node,
         children: [
@@ -8,6 +10,7 @@ export const transformVoid = (editor, [node, path])=>{
             }
         ]
     };
+    // A workaround because Slate doesn't allow adjusting void nodes children
     removeNodes(editor, {
         at: path
     });

package/dist/esm/plugins/index.js

@@ -24,11 +24,15 @@ import { createTrailingParagraphPlugin } from './TrailingParagraph';
 import { createVoidsPlugin } from './Voids';
 export const getPlugins = (sdk, onAction, restrictedMarks)=>[
         createDeserializeDocxPlugin(),
+        // Tracking - This should come first so all plugins below will have access to `editor.tracking`
         createTrackingPlugin(onAction),
+        // Global / Global shortcuts
         createDragAndDropPlugin(),
+        // Enable command palette plugin only, if at least action type is allowed
         ...Object.values(isCommandPromptPluginEnabled(sdk)).some(Boolean) ? [
             createCommandPalettePlugin()
         ] : [],
+        // Block Elements
         createParagraphPlugin(),
         createListPlugin(),
         createHrPlugin(),
@@ -38,20 +42,28 @@ export const getPlugins = (sdk, onAction, restrictedMarks)=>[
         createEmbeddedEntryBlockPlugin(sdk),
         createEmbeddedAssetBlockPlugin(sdk),
         createEmbeddedResourceBlockPlugin(sdk),
+        // Inline elements
         createHyperlinkPlugin(sdk),
         createEmbeddedEntityInlinePlugin(sdk),
         createEmbeddedResourceInlinePlugin(sdk),
+        // Marks
         createMarksPlugin(),
+        // Other
         createTrailingParagraphPlugin(),
         createTextPlugin(restrictedMarks),
         createVoidsPlugin(),
         createSelectOnBackspacePlugin(),
+        // Pasting content from other sources
         createPasteHTMLPlugin(),
+        // These plugins drive their configurations from the list of plugins
+        // above. They MUST come last.
         createSoftBreakPlugin(),
         createExitBreakPlugin(),
         createResetNodePlugin(),
         createNormalizerPlugin()
     ];
 export const disableCorePlugins = {
+    // Note: Enabled by default since v9.0.0 but it causes Cypress's
+    // .click() command to fail
     eventEditor: true
 };

package/dist/esm/plugins/shared/EmbeddedBlockToolbarIcon.js

@@ -12,7 +12,7 @@ export const styles = {
         marginRight: '10px'
     })
 };
-export function EmbeddedBlockToolbarIcon({ isDisabled , nodeType , onClose  }) {
+export function EmbeddedBlockToolbarIcon({ isDisabled, nodeType, onClose }) {
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
     const handleClick = async (event)=>{
@@ -29,19 +29,19 @@ export function EmbeddedBlockToolbarIcon({ isDisabled , nodeType , onClose  }) {
     };
     const type = getEntityTypeFromNodeType(nodeType);
     const baseClass = `rich-text__${nodeType}`;
-    return React.createElement(Menu.Item, {
+    return /*#__PURE__*/ React.createElement(Menu.Item, {
         disabled: isDisabled,
         className: `${baseClass}-list-item`,
         onClick: handleClick,
         testId: `toolbar-toggle-${nodeType}`
-    }, React.createElement(Flex, {
+    }, /*#__PURE__*/ React.createElement(Flex, {
         alignItems: "center",
         flexDirection: "row"
-    }, React.createElement(Icon, {
+    }, /*#__PURE__*/ React.createElement(Icon, {
         as: type === 'Asset' ? AssetIcon : EmbeddedEntryBlockIcon,
         className: `rich-text__embedded-entry-list-icon ${styles.icon}`,
         variant: "secondary"
-    }), React.createElement("span", null, type, nodeType == BLOCKS.EMBEDDED_RESOURCE && React.createElement(ResourceNewBadge, null))));
+    }), /*#__PURE__*/ React.createElement("span", null, type, nodeType == BLOCKS.EMBEDDED_RESOURCE && /*#__PURE__*/ React.createElement(ResourceNewBadge, null))));
 }
 function getEntityTypeFromNodeType(nodeType) {
     const words = nodeType.toLowerCase().split('-');

package/dist/esm/plugins/shared/EmbeddedBlockUtil.js

@@ -5,7 +5,7 @@ import { focus, getNodeEntryFromSelection, insertEmptyParagraph, moveToTheNextCh
 import { watchCurrentSlide } from '../../helpers/sdkNavigatorSlideIn';
 import { getText, getAboveNode, getLastNodeByLevel, insertNodes, setNodes, select, removeNodes } from '../../internal';
 export function getWithEmbeddedBlockEvents(nodeType, sdk) {
-    return (editor, { options: { hotkey  }  })=>(event)=>{
+    return (editor, { options: { hotkey } })=>(event)=>{
             const [, pathToSelectedElement] = getNodeEntryFromSelection(editor, nodeType);
             if (pathToSelectedElement) {
                 const isDelete = event.key === 'Delete';
@@ -31,14 +31,14 @@ export async function selectEntityAndInsert(nodeType, sdk, editor, logAction) {
     logAction('openCreateEmbedDialog', {
         nodeType
     });
-    const { field , dialogs  } = sdk;
+    const { field, dialogs } = sdk;
     const baseConfig = newEntitySelectorConfigFromRichTextField(field, nodeType);
     const selectEntity = baseConfig.entityType === 'Asset' ? dialogs.selectSingleAsset : dialogs.selectSingleEntry;
     const config = {
         ...baseConfig,
         withCreate: true
     };
-    const { selection  } = editor;
+    const { selection } = editor;
     const rteSlide = watchCurrentSlide(sdk.navigator);
     const entity = await selectEntity(config);
     if (!entity) {
@@ -46,6 +46,8 @@ export async function selectEntityAndInsert(nodeType, sdk, editor, logAction) {
             nodeType
         });
     } else {
+        // Selection prevents incorrect position of inserted ref when RTE doesn't have focus
+        // (i.e. when using hotkeys and slide-in)
         select(editor, selection);
         insertBlock(editor, nodeType, entity);
         ensureFollowingParagraph(editor, [
@@ -56,6 +58,8 @@ export async function selectEntityAndInsert(nodeType, sdk, editor, logAction) {
             nodeType
         });
     }
+    // If user chose to create a new entity, this might open slide-in to edit the
+    // entity. In this case, no point in focusing RTE which is now in the slide below.
     rteSlide.onActive(()=>{
         rteSlide.unwatch();
         focus(editor);
@@ -65,15 +69,17 @@ export async function selectResourceEntityAndInsert(sdk, editor, logAction) {
     logAction('openCreateEmbedDialog', {
         nodeType: BLOCKS.EMBEDDED_RESOURCE
     });
-    const { field , dialogs  } = sdk;
+    const { field, dialogs } = sdk;
     const config = newResourceEntitySelectorConfigFromRichTextField(field, BLOCKS.EMBEDDED_RESOURCE);
-    const { selection  } = editor;
+    const { selection } = editor;
     const entity = await dialogs.selectSingleResourceEntry(config);
     if (!entity) {
         logAction('cancelCreateEmbedDialog', {
             nodeType: BLOCKS.EMBEDDED_RESOURCE
         });
     } else {
+        // Selection prevents incorrect position of inserted ref when RTE doesn't have focus
+        // (i.e. when using hotkeys and slide-in)
         select(editor, selection);
         insertBlock(editor, BLOCKS.EMBEDDED_RESOURCE, entity);
         ensureFollowingParagraph(editor, [
@@ -84,6 +90,7 @@ export async function selectResourceEntityAndInsert(sdk, editor, logAction) {
         });
     }
 }
+// TODO: incorporate this logic inside the trailingParagraph plugin instead
 function ensureFollowingParagraph(editor, nodeTypes) {
     const entityBlock = getAboveNode(editor, {
         match: {
@@ -96,6 +103,8 @@ function ensureFollowingParagraph(editor, nodeTypes) {
     const level = entityBlock[1].length - 1;
     const lastNode = getLastNodeByLevel(editor, level);
     const isTextContainer = TEXT_CONTAINERS.includes(lastNode?.[0].type ?? '');
+    // If the new block isn't followed by a sibling text container (e.g. paragraph)
+    // we insert a new empty one. Level 0 is handled by the trailingParagraph plugin
     if (level !== 0 && !isTextContainer) {
         insertEmptyParagraph(editor);
     }
@@ -131,6 +140,7 @@ const createNode = (nodeType, entity)=>{
         isVoid: true
     };
 };
+// TODO: DRY up copied code from HR
 function insertBlock(editor, nodeType, entity) {
     if (!editor?.selection) return;
     const linkedEntityBlock = createNode(nodeType, entity);

package/dist/esm/plugins/shared/EmbeddedInlineToolbarIcon.js

@@ -22,7 +22,7 @@ const styles = {
         }
     })
 };
-export function EmbeddedInlineToolbarIcon({ onClose , nodeType , isDisabled  }) {
+export function EmbeddedInlineToolbarIcon({ onClose, nodeType, isDisabled }) {
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
     async function handleClick(event) {
@@ -36,16 +36,16 @@ export function EmbeddedInlineToolbarIcon({ onClose , nodeType , isDisabled  })
         }
         moveToTheNextChar(editor);
     }
-    return React.createElement(Menu.Item, {
+    return /*#__PURE__*/ React.createElement(Menu.Item, {
         disabled: isDisabled,
         className: "rich-text__entry-link-block-button",
         testId: `toolbar-toggle-${nodeType}`,
         onClick: handleClick
-    }, React.createElement(Flex, {
+    }, /*#__PURE__*/ React.createElement(Flex, {
         alignItems: "center",
         flexDirection: "row"
-    }, React.createElement(EmbeddedEntryInlineIcon, {
+    }, /*#__PURE__*/ React.createElement(EmbeddedEntryInlineIcon, {
         variant: "secondary",
         className: `rich-text__embedded-entry-list-icon ${styles.icon}`
-    }), React.createElement("span", null, "Inline entry", nodeType == INLINES.EMBEDDED_RESOURCE && React.createElement(ResourceNewBadge, null))));
+    }), /*#__PURE__*/ React.createElement("span", null, "Inline entry", nodeType == INLINES.EMBEDDED_RESOURCE && /*#__PURE__*/ React.createElement(ResourceNewBadge, null))));
 }

package/dist/esm/plugins/shared/EmbeddedInlineUtil.js

@@ -5,7 +5,7 @@ import { focus } from '../../helpers/editor';
 import { watchCurrentSlide } from '../../helpers/sdkNavigatorSlideIn';
 import { insertNodes, select } from '../../internal/transforms';
 export function getWithEmbeddedEntryInlineEvents(nodeType, sdk) {
-    return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey  }  }) {
+    return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey } }) {
         return function handleEvent(event) {
             if (!editor) return;
             if (hotkey && isHotkey(hotkey, event)) {
@@ -56,7 +56,7 @@ export async function selectEntityAndInsert(editor, sdk, logAction) {
         ...newEntitySelectorConfigFromRichTextField(sdk.field, nodeType),
         withCreate: true
     };
-    const { selection  } = editor;
+    const { selection } = editor;
     const rteSlide = watchCurrentSlide(sdk.navigator);
     const entry = await sdk.dialogs.selectSingleEntry(config);
     if (!entry) {
@@ -64,6 +64,8 @@ export async function selectEntityAndInsert(editor, sdk, logAction) {
             nodeType
         });
     } else {
+        // Selection prevents incorrect position of inserted ref when RTE doesn't have focus
+        // (i.e. when using hotkeys and slide-in)
         select(editor, selection);
         insertNodes(editor, createInlineEntryNode(nodeType, entry));
         logAction('insert', {
@@ -80,18 +82,20 @@ export async function selectResourceEntityAndInsert(editor, sdk, logAction) {
     logAction('openCreateEmbedDialog', {
         nodeType
     });
-    const { dialogs , field  } = sdk;
+    const { dialogs, field } = sdk;
     const config = {
         ...newResourceEntitySelectorConfigFromRichTextField(field, nodeType),
         withCreate: true
     };
-    const { selection  } = editor;
+    const { selection } = editor;
     const entry = await dialogs.selectSingleResourceEntry(config);
     if (!entry) {
         logAction('cancelCreateEmbedDialog', {
             nodeType
         });
     } else {
+        // Selection prevents incorrect position of inserted ref when RTE doesn't have focus
+        // (i.e. when using hotkeys and slide-in)
         select(editor, selection);
         insertNodes(editor, createInlineEntryNode(nodeType, entry));
         logAction('insert', {

package/dist/esm/plugins/shared/FetchingWrappedAssetCard.js

@@ -2,21 +2,21 @@ import * as React from 'react';
 import { AssetCard } from '@contentful/f36-components';
 import { useEntity, useEntityLoader, MissingEntityCard, WrappedAssetCard } from '@contentful/field-editor-reference';
 import areEqual from 'fast-deep-equal';
-const InternalAssetCard = React.memo((props)=>{
+const InternalAssetCard = /*#__PURE__*/ React.memo((props)=>{
     if (props.asset === undefined) {
-        return React.createElement(AssetCard, {
+        return /*#__PURE__*/ React.createElement(AssetCard, {
             size: "default",
             isLoading: true
         });
     }
     if (props.asset === 'failed') {
-        return React.createElement(MissingEntityCard, {
+        return /*#__PURE__*/ React.createElement(MissingEntityCard, {
             entityType: "Asset",
             isDisabled: props.isDisabled,
             onRemove: props.onRemove
         });
     }
-    return React.createElement(WrappedAssetCard, {
+    return /*#__PURE__*/ React.createElement(WrappedAssetCard, {
         getEntityScheduledActions: props.loadEntityScheduledActions,
         size: "small",
         isSelected: props.isSelected,
@@ -31,9 +31,9 @@ const InternalAssetCard = React.memo((props)=>{
 }, areEqual);
 InternalAssetCard.displayName = 'InternalAssetCard';
 export function FetchingWrappedAssetCard(props) {
-    const { onEntityFetchComplete  } = props;
-    const { data: asset , status  } = useEntity('Asset', props.assetId);
-    const { getEntityScheduledActions  } = useEntityLoader();
+    const { onEntityFetchComplete } = props;
+    const { data: asset, status } = useEntity('Asset', props.assetId);
+    const { getEntityScheduledActions } = useEntityLoader();
     const loadEntityScheduledActions = React.useCallback(()=>getEntityScheduledActions('Asset', props.assetId), [
         getEntityScheduledActions,
         props.assetId
@@ -46,7 +46,7 @@ export function FetchingWrappedAssetCard(props) {
         onEntityFetchComplete,
         status
     ]);
-    return React.createElement(InternalAssetCard, {
+    return /*#__PURE__*/ React.createElement(InternalAssetCard, {
         asset: asset,
         sdk: props.sdk,
         isDisabled: props.isDisabled,

package/dist/esm/plugins/shared/FetchingWrappedEntryCard.js

@@ -2,22 +2,22 @@ import * as React from 'react';
 import { EntryCard } from '@contentful/f36-components';
 import { useEntity, MissingEntityCard, WrappedEntryCard, useEntityLoader } from '@contentful/field-editor-reference';
 import areEqual from 'fast-deep-equal';
-const InternalEntryCard = React.memo((props)=>{
-    const { entry , sdk , loadEntityScheduledActions  } = props;
+const InternalEntryCard = /*#__PURE__*/ React.memo((props)=>{
+    const { entry, sdk, loadEntityScheduledActions } = props;
     if (entry === undefined) {
-        return React.createElement(EntryCard, {
+        return /*#__PURE__*/ React.createElement(EntryCard, {
             isLoading: true
         });
     }
     if (entry === 'failed') {
-        return React.createElement(MissingEntityCard, {
+        return /*#__PURE__*/ React.createElement(MissingEntityCard, {
             entityType: "Entry",
             isDisabled: props.isDisabled,
             onRemove: props.onRemove
         });
     }
     const contentType = sdk.space.getCachedContentTypes().find((contentType)=>contentType.sys.id === entry.sys.contentType.sys.id);
-    return React.createElement(WrappedEntryCard, {
+    return /*#__PURE__*/ React.createElement(WrappedEntryCard, {
         size: "default",
         getAsset: props.sdk.space.getAsset,
         getEntityScheduledActions: loadEntityScheduledActions,
@@ -34,9 +34,9 @@ const InternalEntryCard = React.memo((props)=>{
 }, areEqual);
 InternalEntryCard.displayName = 'ReferenceCard';
 export const FetchingWrappedEntryCard = (props)=>{
-    const { entryId , onEntityFetchComplete  } = props;
-    const { data: entry , status  } = useEntity('Entry', entryId);
-    const { getEntityScheduledActions  } = useEntityLoader();
+    const { entryId, onEntityFetchComplete } = props;
+    const { data: entry, status } = useEntity('Entry', entryId);
+    const { getEntityScheduledActions } = useEntityLoader();
     const loadEntityScheduledActions = React.useCallback(()=>getEntityScheduledActions('Entry', entryId), [
         getEntityScheduledActions,
         entryId
@@ -49,7 +49,7 @@ export const FetchingWrappedEntryCard = (props)=>{
         onEntityFetchComplete,
         status
     ]);
-    return React.createElement(InternalEntryCard, {
+    return /*#__PURE__*/ React.createElement(InternalEntryCard, {
         entry: entry,
         sdk: props.sdk,
         locale: props.locale,

package/dist/esm/plugins/shared/FetchingWrappedResourceCard.js

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { EntryCard } from '@contentful/f36-components';
 import { ResourceEntityErrorCard, WrappedEntryCard, useResource } from '@contentful/field-editor-reference';
 import areEqual from 'fast-deep-equal';
-const InternalEntryCard = React.memo((props)=>{
+const InternalEntryCard = /*#__PURE__*/ React.memo((props)=>{
     if (props.data === undefined || props.status === 'loading') {
-        return React.createElement(EntryCard, {
+        return /*#__PURE__*/ React.createElement(EntryCard, {
             isLoading: true
         });
     }
-    const { contentType , resource: entry , space  } = props.data;
-    return React.createElement(WrappedEntryCard, {
+    const { contentType, resource: entry, space } = props.data;
+    return /*#__PURE__*/ React.createElement(WrappedEntryCard, {
         size: "default",
         getAsset: ()=>Promise.resolve(),
         isSelected: props.isSelected,
@@ -27,8 +27,8 @@ const InternalEntryCard = React.memo((props)=>{
 }, areEqual);
 InternalEntryCard.displayName = 'ReferenceCard';
 export const FetchingWrappedResourceCard = (props)=>{
-    const { link , onEntityFetchComplete  } = props;
-    const { data , status , error  } = useResource(link.linkType, link.urn);
+    const { link, onEntityFetchComplete } = props;
+    const { data, status, error } = useResource(link.linkType, link.urn);
     React.useEffect(()=>{
         if (status === 'success') {
             onEntityFetchComplete?.();
@@ -38,7 +38,7 @@ export const FetchingWrappedResourceCard = (props)=>{
         status
     ]);
     if (status === 'error') {
-        return React.createElement(ResourceEntityErrorCard, {
+        return /*#__PURE__*/ React.createElement(ResourceEntityErrorCard, {
             error: error,
             linkType: link.linkType,
             isSelected: props.isSelected,
@@ -46,7 +46,8 @@ export const FetchingWrappedResourceCard = (props)=>{
             onRemove: props.onRemove
         });
     }
-    return React.createElement(InternalEntryCard, {
+    return /*#__PURE__*/ React.createElement(InternalEntryCard, {
+        // entry is the only currently supported  entity but TypeScript is not aware
         data: data,
         status: status,
         sdk: props.sdk,

package/dist/esm/plugins/shared/LinkedBlockWrapper.js

@@ -8,20 +8,24 @@ const styles = {
         display: 'block'
     }),
     container: css({
+        // The next 2 properties ensure Entity card won't be aligned above
+        // a list item marker (i.e. bullet)
         display: 'inline-block',
         verticalAlign: 'text-top',
         width: '100%'
     })
 };
-export function LinkedBlockWrapper({ attributes , card , children , link  }) {
-    return React.createElement("div", {
+export function LinkedBlockWrapper({ attributes, card, children, link }) {
+    return /*#__PURE__*/ React.createElement("div", {
         ...attributes,
         className: styles.root,
         "data-entity-type": link.sys.linkType,
         "data-entity-id": getLinkEntityId(link),
+        // COMPAT: This makes copy & paste work for Firefox
         contentEditable: IS_CHROME ? undefined : false,
         draggable: IS_CHROME ? true : undefined
-    }, React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement("div", {
+        // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
         contentEditable: IS_CHROME ? false : undefined,
         draggable: IS_CHROME ? true : undefined,
         className: styles.container

package/dist/esm/plugins/shared/LinkedInlineWrapper.js

@@ -16,15 +16,17 @@ const styles = {
         }
     })
 };
-export function LinkedInlineWrapper({ attributes , card , children , link  }) {
-    return React.createElement("span", {
+export function LinkedInlineWrapper({ attributes, card, children, link }) {
+    return /*#__PURE__*/ React.createElement("span", {
         ...attributes,
         className: styles.root,
         "data-entity-type": link.sys.linkType,
         "data-entity-id": getLinkEntityId(link),
+        // COMPAT: This makes copy & paste work for Firefox
         contentEditable: IS_CHROME ? undefined : false,
         draggable: IS_CHROME ? true : undefined
-    }, React.createElement("span", {
+    }, /*#__PURE__*/ React.createElement("span", {
+        // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
         contentEditable: IS_CHROME ? false : undefined,
         draggable: IS_CHROME ? true : undefined
     }, card), children);

package/dist/esm/plugins/shared/ResourceNewBadge.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Badge } from '@contentful/f36-components';
 export const ResourceNewBadge = ()=>{
-    return React.createElement(React.Fragment, null, ' ', "(different space)", ' ', React.createElement(Badge, {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, ' ', "(different space)", ' ', /*#__PURE__*/ React.createElement(Badge, {
         variant: "primary-filled",
         size: "small"
     }, "new"));

package/dist/esm/plugins/shared/ToolbarButton.js

@@ -14,12 +14,12 @@ const styles = {
     })
 };
 export function ToolbarButton(props) {
-    const { title , testId , isActive , children , className , isDisabled =false  } = props;
+    const { title, testId, isActive, children, className, isDisabled = false } = props;
     const handleClick = (event)=>{
         event.preventDefault();
         props.onClick();
     };
-    const button = React.createElement(Button, {
+    const button = /*#__PURE__*/ React.createElement(Button, {
         className: cx(styles.button, className),
         isDisabled: isDisabled,
         startIcon: children,
@@ -29,7 +29,7 @@ export function ToolbarButton(props) {
         size: "small"
     });
     if (title) {
-        return React.createElement(Tooltip, {
+        return /*#__PURE__*/ React.createElement(Tooltip, {
             className: styles.tooltip,
             placement: "bottom",
             content: title

package/dist/esm/plugins/shared/__tests__/FetchingWrappedAssetCard.test.js

@@ -38,17 +38,20 @@ beforeEach(()=>{
     };
 });
 test('some dropdown actions should be disabled', async ()=>{
-    const { getByTestId , queryByTestId  } = render(React.createElement(EntityProvider, {
+    const { getByTestId, queryByTestId } = render(/*#__PURE__*/ React.createElement(EntityProvider, {
         sdk: sdk
-    }, React.createElement(FetchingWrappedAssetCard, {
+    }, /*#__PURE__*/ React.createElement(FetchingWrappedAssetCard, {
         sdk: sdk,
         assetId: "asset-id",
         locale: "en-US",
+        // eslint-disable-next-line -- TODO: explain this disable
         onEdit: ()=>{},
+        // eslint-disable-next-line -- TODO: explain this disable
         onRemove: ()=>{},
         isDisabled: true,
         isSelected: true
     })));
+    // Assert Asset title
     await waitFor(()=>expect(getByTestId('cf-ui-asset').textContent).toBe('asset title'));
     fireEvent.click(getByTestId('cf-ui-card-actions'));
     await waitFor(()=>{