codevise · tf · May 22, 2026 · May 21, 2026
diff --git a/entry_types/scrolled/package/spec/contentElements/counter/Counter-spec.js b/entry_types/scrolled/package/spec/contentElements/counter/Counter-spec.js
@@ -27,9 +27,7 @@ describe('Counter', () => {
         contentElementId={5}
         contentElementWidth={contentElementWidths.md}
         sectionProps={{}}
-      />, {
-        editorState: {isEditable: false}
-      }
+      />
     );
   }
 
@@ -199,9 +197,7 @@ describe('Counter', () => {
           contentElementId={5}
           contentElementWidth={width || contentElementWidths.md}
           sectionProps={sectionProps || {}}
-        />, {
-          editorState: {isEditable: false}
-        }
+        />
       );
     }
 

diff --git a/...ypes/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLink-spec.js b/...ypes/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLink-spec.js
@@ -497,7 +497,7 @@ describe('ExternalLink', () => {
 
         const {container} = renderInContentElement(
           <ExternalLink id={1} configuration={configuration} />,
-          {editorState: {isEditable: true}}
+          {inlineEditing: true}
         );
 
         expect(container.querySelector(`.${styles.titleLink}`)).toBeNull();
@@ -510,7 +510,7 @@ describe('ExternalLink', () => {
 
         const {container} = renderInContentElement(
           <ExternalLink id={1} configuration={configuration} />,
-          {editorState: {isEditable: true}}
+          {inlineEditing: true}
         );
 
         expect(container.querySelector(`.${styles.moreLink}`)).toBeNull();

diff --git a/...e/spec/contentElements/externalLinkList/frontend/ExternalLinkList/editorSelection-spec.js b/...e/spec/contentElements/externalLinkList/frontend/ExternalLinkList/editorSelection-spec.js
@@ -33,7 +33,7 @@ describe('ExternalLinkList', () => {
     renderInContentElement(
       <ExternalLinkList configuration={configuration} sectionProps={{}} />,
       {
-        editorState: {isEditable: true, isSelected: true, setTransientState}
+        inlineEditing: {isSelected: true, transientState: setTransientState}
       }
     );
     await user.click(screen.getByText('Some link').closest('li'));
@@ -60,7 +60,7 @@ describe('ExternalLinkList', () => {
     const {container} = renderInContentElement(
       <ExternalLinkList configuration={configuration} sectionProps={{}} />,
       {
-        editorState: {isEditable: true, isSelected: true}
+        inlineEditing: {isSelected: true}
       }
     );
     await user.click(screen.getByText('Some link').closest('li'));
@@ -88,7 +88,7 @@ describe('ExternalLinkList', () => {
     const {container} = renderInContentElement(
       <ExternalLinkList configuration={configuration} sectionProps={{}} />,
       {
-        editorState: {isEditable: true}
+        inlineEditing: true
       }
     );
     await user.click(screen.getByText('Some link').closest('li'));
@@ -117,7 +117,7 @@ describe('ExternalLinkList', () => {
     const {container} = renderInContentElement(
       <ExternalLinkList configuration={configuration} sectionProps={{}} />,
       {
-        editorState: {isEditable: true, isSelected: true, setTransientState}
+        inlineEditing: {isSelected: true, transientState: setTransientState}
       }
     );
     const link = screen.getByText('Some link').closest('li');
@@ -139,7 +139,7 @@ describe('ExternalLinkList', () => {
     const {container, triggerEditorCommand} = renderInContentElement(
       <ExternalLinkList configuration={configuration} sectionProps={{}} />,
       {
-        editorState: {isSelected: true, isEditable: true}
+        inlineEditing: {isSelected: true}
       }
     );
     triggerEditorCommand({type: 'HIGHLIGHT_ITEM', index: 0});
@@ -157,7 +157,7 @@ describe('ExternalLinkList', () => {
     const {container, triggerEditorCommand} = renderInContentElement(
       <ExternalLinkList configuration={configuration} sectionProps={{}} />,
       {
-        editorState: {isSelected: true, isEditable: true}
+        inlineEditing: {isSelected: true}
       }
     );
 
@@ -177,7 +177,7 @@ describe('ExternalLinkList', () => {
     const {container, triggerEditorCommand} = renderInContentElement(
       <ExternalLinkList configuration={configuration} sectionProps={{}} />,
       {
-        editorState: {isSelected: true, isEditable: true}
+        inlineEditing: {isSelected: true}
       }
     );
     triggerEditorCommand({type: 'SET_SELECTED_ITEM', index: 0});

diff --git a/...ckage/spec/contentElements/externalLinkList/frontend/ExternalLinkList/placeholder-spec.js b/...ckage/spec/contentElements/externalLinkList/frontend/ExternalLinkList/placeholder-spec.js
@@ -12,7 +12,7 @@ describe('ExternalLinkList placeholder', () => {
     const {container} = renderInContentElement(
       <ExternalLinkList configuration={{links: [{id: 1}]}}
                         sectionProps={{}} />,
-      {editorState: {isEditable: true}}
+      {inlineEditing: true}
     );
 
     expect(container.querySelector(`.${styles.placeholder}`)).not.toBeNull();
@@ -21,8 +21,7 @@ describe('ExternalLinkList placeholder', () => {
   it('does not render placeholder in published entry', () => {
     const {container} = renderInContentElement(
       <ExternalLinkList configuration={{links: [{id: 1}]}}
-                        sectionProps={{}} />,
-      {editorState: {isEditable: false}}
+                        sectionProps={{}} />
     );
 
     expect(container.querySelector(`.${styles.placeholder}`)).toBeNull();

diff --git a/entry_types/scrolled/package/spec/contentElements/heading/Heading-spec.js b/entry_types/scrolled/package/spec/contentElements/heading/Heading-spec.js
@@ -20,9 +20,7 @@ describe('Heading', () => {
         contentElementId={5}
         contentElementWidth={width || contentElementWidths.md}
         sectionProps={{sectionIndex: 1, ...sectionProps}}
-      />, {
-        editorState: {isEditable: false}
-      }
+      />
     );
   }
 

diff --git a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/areaOutlines-spec.js b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/areaOutlines-spec.js
@@ -42,7 +42,7 @@ describe('Hotspots', () => {
       <Hotspots configuration={configuration} />,
       {
         seed,
-        editorState: {isSelected: true, isEditable: true}
+        inlineEditing: {isSelected: true}
       }
     );
 

diff --git a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorCommands-spec.js b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorCommands-spec.js
@@ -28,7 +28,7 @@ describe('Hotspots', () => {
       <Hotspots configuration={configuration} contentElementId={1} />,
       {
         seed,
-        editorState: {isSelected: true, isEditable: true}
+        inlineEditing: {isSelected: true}
       }
     );
     triggerEditorCommand({type: 'HIGHLIGHT_AREA', index: 0});
@@ -52,7 +52,7 @@ describe('Hotspots', () => {
       <Hotspots configuration={configuration} contentElementId={1} />,
       {
         seed,
-        editorState: {isSelected: true, isEditable: true}
+        inlineEditing: {isSelected: true}
       }
     );
     triggerEditorCommand({type: 'HIGHLIGHT_AREA', index: 0});
@@ -80,7 +80,7 @@ describe('Hotspots', () => {
       <Hotspots configuration={configuration} contentElementId={1} />,
       {
         seed,
-        editorState: {isSelected: true, isEditable: true}
+        inlineEditing: {isSelected: true}
       }
     );
     simulateScrollPosition('near viewport');

diff --git a/...ypes/scrolled/package/spec/contentElements/hotspots/Hotspots/editorTransientState-spec.js b/...ypes/scrolled/package/spec/contentElements/hotspots/Hotspots/editorTransientState-spec.js
@@ -31,7 +31,7 @@ describe('Hotspots', () => {
       <Hotspots configuration={configuration} />,
       {
         seed,
-        editorState: {isEditable: true, isSelected: true, setTransientState}
+        inlineEditing: {isSelected: true, transientState: setTransientState}
       }
     );
     await user.click(clickableArea(container));

diff --git a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/indicators-spec.js b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/indicators-spec.js
@@ -109,7 +109,7 @@ describe('Hotspots', () => {
     const {container} = renderInContentElement(
       <Hotspots configuration={configuration} />, {
         seed,
-        editorState: {isSelected: true, isEditable: true}
+        inlineEditing: {isSelected: true}
       }
     );
 

diff --git a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/panZoomScroller-spec.js b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/panZoomScroller-spec.js
@@ -421,7 +421,7 @@ describe('Hotspots', () => {
       <Hotspots configuration={configuration} contentElementId={1} />,
       {
         seed,
-        editorState: {isSelected: true, isEditable: true}
+        inlineEditing: {isSelected: true}
       }
     );
     simulateScrollPosition('near viewport');

diff --git a/entry_types/scrolled/package/spec/frontend/ContentElementFigure-spec.js b/entry_types/scrolled/package/spec/frontend/ContentElementFigure-spec.js
@@ -52,7 +52,7 @@ describe('ContentElementFigure', () => {
       <ContentElementFigure configuration={configuration} />,
       {
         seed: {},
-        editorState: {isEditable: true, setTransientState}
+        inlineEditing: {transientState: setTransientState}
       }
     );
 
@@ -73,7 +73,7 @@ describe('ContentElementFigure', () => {
       <ContentElementFigure configuration={configuration} />,
       {
         seed: {},
-        editorState: {isEditable: true, setTransientState}
+        inlineEditing: {transientState: setTransientState}
       }
     );
     unmount();
@@ -95,7 +95,7 @@ describe('ContentElementFigure', () => {
       <ContentElementFigure configuration={configuration} />,
       {
         seed: {},
-        editorState: {isEditable: false, setTransientState}
+        inlineEditing: {isEditable: false, transientState: setTransientState}
       }
     );
 

diff --git a/entry_types/scrolled/package/spec/frontend/inlineEditing/EditableLink-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/EditableLink-spec.js
@@ -73,7 +73,7 @@ describe('EditableLink', () => {
     renderInContentElement(
       <EditableLink>Some text</EditableLink>,
       {
-        editorState: {isSelected: true}
+        inlineEditing: {isSelected: true}
       }
     );
 
@@ -84,7 +84,7 @@ describe('EditableLink', () => {
     renderInContentElement(
       <EditableLink actionButtonVisible={false}>Some text</EditableLink>,
       {
-        editorState: {isSelected: true}
+        inlineEditing: {isSelected: true}
       }
     );
 

diff --git a/entry_types/scrolled/package/spec/widgets/textInlineFileRights/TextInlineFileRights-spec.js b/entry_types/scrolled/package/spec/widgets/textInlineFileRights/TextInlineFileRights-spec.js
@@ -27,7 +27,7 @@ describe('TextInlineFileRights', () => {
       <TextInlineFileRights configuration={{}} />,
       {
         seed: {},
-        editorState: {isEditable: true, setTransientState}
+        inlineEditing: {transientState: setTransientState}
       }
     );
 
@@ -41,7 +41,7 @@ describe('TextInlineFileRights', () => {
       <TextInlineFileRights configuration={{}} />,
       {
         seed: {},
-        editorState: {isEditable: true, setTransientState}
+        inlineEditing: {transientState: setTransientState}
       }
     );
     unmount();
@@ -56,7 +56,7 @@ describe('TextInlineFileRights', () => {
       <TextInlineFileRights configuration={{}} context="insideElement" />,
       {
         seed: {},
-        editorState: {isEditable: true, setTransientState}
+        inlineEditing: {transientState: setTransientState}
       }
     );
     unmount();

diff --git a/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js b/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {DndProvider} from 'react-dnd';
 import {HTML5Backend} from 'react-dnd-html5-backend';
 import BackboneEvents from 'backbone-events-standalone';
@@ -25,21 +25,32 @@ import {renderInEntryWithScrollPositionLifecycle} from './scrollPositionLifecycl
  *
  * @param {Function} callback - React component or function returning a React component.
  * @param {Object} [options] - Supports all options supported by {@link `renderInEntry`}.
- * @param {Object} [options.editorState] - Fake result of `useContentElementEditorState`.
+ * @param {boolean|Object} [options.inlineEditing] -
+ *   Opt the content element into an inline-editing context (matching
+ *   what's available when inline editing is loaded in production).
+ *   Pass `true` for editable defaults, or an object to override:
+ *   `{isEditable, isSelected, transientState}`. `transientState` is
+ *   installed as the `setTransientState` function on the editor state
+ *   context — pass a jest spy to assert on it. Omitting the option
+ *   gives the frontend-mode defaults (`isEditable: false, isSelected:
+ *   false, setTransientState: noop`) without wrapping any
+ *   inline-editing-only providers (DndProvider, editor command
+ *   emitter).
  * @param {Object} [options.phonePlatform] - Fake result of `usePhonePlatform`.
  * @param {Object} [options.consentState] - Pass 'undecided' to render third party consent opt in.
  *
  * @example
  *
  * const {getByRole, simulateScrollPosition, triggerEditorCommand, simulateStorylineMode} =
  *   renderInContentElement(<MyContentElement />, {
- *     seed: {...}
+ *     seed: {...},
+ *     inlineEditing: {isSelected: true}
  *   });
  * simulateScrollPosition('near viewport');
  * triggerEditorCommand({type: 'HIGHLIGHT'});
  * simulateStorylineMode('background');
  */
-export function renderInContentElement(ui, {editorState,
+export function renderInContentElement(ui, {inlineEditing,
                                             phonePlatform = false,
                                             wrapper: OriginalWrapper,
                                             consentState = 'accepted',
@@ -48,28 +59,35 @@ export function renderInContentElement(ui, {editorState,
   const emitter = Object.assign({}, BackboneEvents);
   const storylineEmitter = Object.assign({}, BackboneEvents);
 
+  const inlineEditingConfig = resolveInlineEditing(inlineEditing);
+
   function Wrapper({children}) {
-    const defaultEditorState = useContext(ContentElementEditorStateContext);
     const [storylineMode, setStorylineMode] = useState('active');
 
     useEffect(() => {
       storylineEmitter.on('storylineMode', setStorylineMode);
       return () => storylineEmitter.off('storylineMode', setStorylineMode);
     }, []);
 
-    return (
-      <MainStorylineActivity activeExcursion={storylineMode !== 'active' ? {id: 1} : null}>
+    let tree = OriginalWrapper ? <OriginalWrapper children={children} /> : children;
+
+    if (inlineEditingConfig) {
+      tree = (
         <DndProvider backend={HTML5Backend}>
-          <ContentElementAttributesProvider id={42}>
-            <ContentElementEditorCommandEmitterContext.Provider
-              value={emitter}>
-              <ContentElementEditorStateContext.Provider
-                value={{...defaultEditorState, ...editorState}}>
-                {OriginalWrapper ? <OriginalWrapper children={children} /> : children}
-              </ContentElementEditorStateContext.Provider>
-            </ContentElementEditorCommandEmitterContext.Provider>
-          </ContentElementAttributesProvider>
+          <ContentElementEditorCommandEmitterContext.Provider value={emitter}>
+            <ContentElementEditorStateContext.Provider value={inlineEditingConfig}>
+              {tree}
+            </ContentElementEditorStateContext.Provider>
+          </ContentElementEditorCommandEmitterContext.Provider>
         </DndProvider>
+      );
+    }
+
+    return (
+      <MainStorylineActivity activeExcursion={storylineMode !== 'active' ? {id: 1} : null}>
+        <ContentElementAttributesProvider id={42}>
+          {tree}
+        </ContentElementAttributesProvider>
       </MainStorylineActivity>
     );
   }
@@ -102,6 +120,20 @@ export function renderInContentElement(ui, {editorState,
   };
 }
 
+function resolveInlineEditing(option) {
+  if (!option) return null;
+
+  const overrides = option === true ? {} : option;
+
+  return {
+    isEditable: overrides.isEditable ?? true,
+    isSelected: overrides.isSelected ?? false,
+    setTransientState: overrides.transientState ?? (() => {}),
+    select: () => {},
+    selectNewThread: () => {}
+  };
+}
+
 function createConsent(consentState) {
   const consent = Consent.create();
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,7 +42,7 @@ describe('Hotspots', () => { @@
           <Hotspots configuration={configuration} />,
           {
             seed,
-            editorState: {isSelected: true, isEditable: true}
+            inlineEditing: {isSelected: true}
           }
         );
@@ Expand Down @@