Turn inline editing decorators into general extensions API

entry_types/scrolled/package/spec/frontend/extensions-spec.js

@@ -0,0 +1,188 @@
+import React from 'react';
+
+import '@testing-library/jest-dom/extend-expect'
+import {render, act} from '@testing-library/react'
+import {
+  extensible,
+  provideExtensions,
+  clearExtensions,
+  ExtensionsProvider
+} from 'frontend/extensions';
+import {StaticPreview} from 'frontend/useScrollPositionLifecycle';
+
+describe('extensions', () => {
+  afterEach(() => {
+    act(() => clearExtensions());
+  });
+
+  describe('extensible with decorator', () => {
+    it('wraps component with decorator receiving same props', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent({text}) {
+        return <span>{text} Component</span>;
+      });
+
+      provideExtensions({
+        decorators: {
+          TestComponent({text, children}) {
+            return <div>{text} Decorator{children}</div>;
+          }
+        }
+      });
+
+      const {container} = render(<TestComponent text="Hello" />);
+
+      expect(container).toHaveTextContent('Hello Decorator');
+      expect(container).toHaveTextContent('Hello Component');
+    });
+
+    it('renders original component when no extensions provided', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent() {
+        return <span>Component</span>;
+      });
+
+      const {container} = render(<TestComponent />);
+
+      expect(container).toHaveTextContent('Component');
+    });
+
+    it('renders original component in static preview', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent() {
+        return <span>Component</span>;
+      });
+
+      provideExtensions({
+        decorators: {
+          TestComponent({children}) {
+            return <div>Decorator{children}</div>;
+          }
+        }
+      });
+
+      const {container} = render(
+        <StaticPreview>
+          <TestComponent />
+        </StaticPreview>
+      );
+
+      expect(container).toHaveTextContent('Component');
+      expect(container).not.toHaveTextContent('Decorator');
+    });
+  });
+
+  describe('extensible with alternative', () => {
+    it('renders alternative instead of original', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent() {
+        return <span>Original</span>;
+      });
+
+      provideExtensions({
+        alternatives: {
+          TestComponent() {
+            return <span>Alternative</span>;
+          }
+        }
+      });
+
+      const {container} = render(<TestComponent />);
+
+      expect(container).toHaveTextContent('Alternative');
+      expect(container).not.toHaveTextContent('Original');
+    });
+
+    it('renders original component in static preview', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent() {
+        return <span>Original</span>;
+      });
+
+      provideExtensions({
+        alternatives: {
+          TestComponent() {
+            return <span>Alternative</span>;
+          }
+        }
+      });
+
+      const {container} = render(
+        <StaticPreview>
+          <TestComponent />
+        </StaticPreview>
+      );
+
+      expect(container).toHaveTextContent('Original');
+      expect(container).not.toHaveTextContent('Alternative');
+    });
+  });
+
+  describe('provideExtensions', () => {
+    it('re-renders decorator after mount', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent() {
+        return <span>Component</span>;
+      });
+
+      const {container} = render(<ExtensionsProvider><TestComponent /></ExtensionsProvider>);
+      expect(container).not.toHaveTextContent('Decorator');
+
+      act(() => {
+        provideExtensions({
+          decorators: {
+            TestComponent({children}) {
+              return <div>Decorator{children}</div>;
+            }
+          }
+        });
+      });
+
+      expect(container).toHaveTextContent('DecoratorComponent');
+    });
+
+    it('re-renders alternative after mount', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent() {
+        return <span>Original</span>;
+      });
+
+      const {container} = render(<ExtensionsProvider><TestComponent /></ExtensionsProvider>);
+      expect(container).toHaveTextContent('Original');
+
+      act(() => {
+        provideExtensions({
+          alternatives: {
+            TestComponent() {
+              return <span>Alternative</span>;
+            }
+          }
+        });
+      });
+
+      expect(container).toHaveTextContent('Alternative');
+      expect(container).not.toHaveTextContent('Original');
+    });
+
+
+    it('replaces previous extensions', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent() {
+        return <span>Original</span>;
+      });
+
+      provideExtensions({
+        alternatives: {
+          TestComponent() {
+            return <span>First</span>;
+          }
+        }
+      });
+
+      provideExtensions({
+        alternatives: {
+          TestComponent() {
+            return <span>Second</span>;
+          }
+        }
+      });
+
+      const {container} = render(<TestComponent />);
+
+      expect(container).toHaveTextContent('Second');
+      expect(container).not.toHaveTextContent('First');
+    });
+  });
+});

entry_types/scrolled/package/src/frontend/ActionButton.js

@@ -1,5 +1,5 @@
-import {withInlineEditingAlternative} from './inlineEditing';
+import {extensible} from './extensions';
 
-export const ActionButton = withInlineEditingAlternative('ActionButton', function ActionButton() {
+export const ActionButton = extensible('ActionButton', function ActionButton() {
   return null;
 });

entry_types/scrolled/package/src/frontend/ActionButtons.js

@@ -1,5 +1,5 @@
-import {withInlineEditingAlternative} from './inlineEditing';
+import {extensible} from './extensions';
 
-export const ActionButtons = withInlineEditingAlternative('ActionButtons', function ActionButtons() {
+export const ActionButtons = extensible('ActionButtons', function ActionButtons() {
   return null;
 });

entry_types/scrolled/package/src/frontend/Backdrop/BackgroundContentElement.js

@@ -3,10 +3,10 @@ import React, {useMemo} from 'react';
 import {ContentElement} from '../ContentElement';
 import {useSectionLifecycle} from '../useSectionLifecycle';
 
-import {withInlineEditingDecorator} from '../inlineEditing';
+import {extensible} from '../extensions';
 
-export const BackgroundContentElement = withInlineEditingDecorator(
-  'BackgroundContentElementDecorator',
+export const BackgroundContentElement = extensible(
+  'BackgroundContentElement',
   function BackgroundContentElement({
     contentElement, isIntersecting, onMotifAreaUpdate, containerDimension
   }) {

entry_types/scrolled/package/src/frontend/Backdrop/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import {withInlineEditingDecorator} from '../inlineEditing';
+import {extensible} from '../extensions';
 import useDimension from '../useDimension';
 import {useSectionLifecycle} from '../useSectionLifecycle';
 
@@ -10,7 +10,7 @@ import {BackgroundAsset} from './BackgroundAsset';
 import styles from '../Backdrop.module.css';
 import sharedTransitionStyles from '../transitions/shared.module.css';
 
-export const Backdrop = withInlineEditingDecorator('BackdropDecorator', function Backdrop(props) {
+export const Backdrop = extensible('Backdrop', function Backdrop(props) {
   const [containerDimension, setContainerRef] = useDimension();
   const {shouldLoad} = useSectionLifecycle();
 

entry_types/scrolled/package/src/frontend/Content.js

@@ -5,7 +5,7 @@ import {VhFix} from './VhFix';
 import {useActiveExcursion} from './useActiveExcursion';
 import {useCurrentSectionIndexState} from './useCurrentChapter';
 import {useEntryStructure} from '../entryState';
-import {withInlineEditingDecorator} from './inlineEditing';
+import {extensible} from './extensions';
 import {usePostMessageListener} from './usePostMessageListener';
 import {useSectionChangeEvents} from './useSectionChangeEvents';
 import {sectionChangeMessagePoster} from './sectionChangeMessagePoster';
@@ -22,7 +22,7 @@ import {
 
 import styles from './Content.module.css';
 
-export const Content = withInlineEditingDecorator('ContentDecorator', function Content(props) {
+export const Content = extensible('Content', function Content(props) {
   const entryStructure = useEntryStructure();
   const scrollToTarget = useScrollToTarget();