WIP: HACK: 90 edit preview mode support

packages/neos-ui-redux-store/src/UI/ContentCanvas/index.spec.js

@@ -76,3 +76,15 @@ test(`The "stopLoading" action should set the proper loading flag.`, () => {
     const nextState = reducer(state, actions.stopLoading());
     expect(nextState.isLoading).toBe(false);
 });
+
+test(`contentCanvas.src selector also calculates the editPreviewMode into the uri as query param.`, () => {
+    const state = {
+        ui: {
+            contentCanvas: {
+                src: 'http://127.0.0.1:8081/neos/preview?node%5B__contextNodePath%5D=%2Fsites%2Fneosdemo%40user-admin%3Blanguage%3Den_US'
+            },
+            editPreviewMode: 'rawContent'
+        }
+    };
+    expect(selectors.src(state)).toBe('http://127.0.0.1:8081/neos/preview?node%5B__contextNodePath%5D=%2Fsites%2Fneosdemo%40user-admin%3Blanguage%3Den_US&editPreviewMode=rawContent');
+});

packages/neos-ui-redux-store/src/UI/ContentCanvas/selectors.ts

@@ -1,5 +1,6 @@
 import {$get} from 'plow-js';
 import {GlobalState} from '../../System';
+import {selectors as editPreviewModeSelectors} from '../EditPreviewMode';
 
 export const shouldScrollIntoView = (state: GlobalState) => $get(['ui', 'contentCanvas', 'shouldScrollIntoView'], state);
 
@@ -9,4 +10,15 @@ export const formattingUnderCursor = (state: GlobalState) => $get(['ui', 'conten
 
 export const isLinkEditorOpen = (state: GlobalState) => $get(['ui', 'contentCanvas', 'isLinkEditorOpen'], state);
 
+export const src = (state: GlobalState) => {
+    const src = state?.ui?.contentCanvas?.src;
+    if (src === null || src === '') {
+        return src;
+    }
+    const contentCanvasUri = new URL(src);
+    const editPreviewMode = editPreviewModeSelectors.currentEditPreviewMode(state);
+    contentCanvasUri.searchParams.set('editPreviewMode', editPreviewMode);
+    return contentCanvasUri.toString();
+};
+
 export const selectors = {};

packages/neos-ui-sagas/src/UI/ContentCanvas/index.js

@@ -3,7 +3,7 @@ import {takeLatest, put, select, take, race} from 'redux-saga/effects';
 import {$get} from 'plow-js';
 import {getGuestFrameDocument} from '@neos-project/neos-ui-guest-frame/src/dom';
 
-import {actionTypes, actions} from '@neos-project/neos-ui-redux-store';
+import {actionTypes, actions, selectors} from '@neos-project/neos-ui-redux-store';
 
 /**
  * Load newly created page into canvas
@@ -44,7 +44,8 @@ export function * watchStopLoading({globalRegistry, store}) {
 export function * watchReload() {
     yield takeLatest(actionTypes.UI.ContentCanvas.RELOAD, function * (action) {
         const {uri} = action.payload;
-        const currentIframeUrl = yield select($get('ui.contentCanvas.src'));
+
+        const currentIframeUrl = yield select(selectors.UI.ContentCanvas.src);
 
         [].slice.call(document.querySelectorAll(`iframe[name=neos-content-main]`)).forEach(iframe => {
             const iframeWindow = iframe.contentWindow || iframe;
@@ -55,7 +56,23 @@ export function * watchReload() {
             // If the new uri is provided in the action payload, use that
             //
             if (iframeWindow.location.href === currentIframeUrl) {
-                iframeWindow.location.href = uri || iframeWindow.location.href;
+                if (uri) {
+                    const state = yield select();
+                    // @todo fix me, idk why we dont just write the src in the reducer on UI.ContentCanvas.RELOAD
+                    const reloadSrc = selectors.UI.ContentCanvas.src({
+                        ...state,
+                        ui: {
+                            ...state.ui,
+                            contentCanvas: {
+                                ...state.contentCanvas,
+                                src: uri
+                            }
+                        }
+                    });
+                    iframeWindow.location.href = reloadSrc;
+                } else {
+                    iframeWindow.location.reload();
+                }
             }
         });
     });

packages/neos-ui-sagas/src/UI/EditPreviewMode/index.js

@@ -1,7 +1,6 @@
 import {takeLatest, select} from 'redux-saga/effects';
-import {$get} from 'plow-js';
 
-import {actionTypes} from '@neos-project/neos-ui-redux-store';
+import {actionTypes, selectors} from '@neos-project/neos-ui-redux-store';
 import backend from '@neos-project/neos-ui-backend-connector';
 import {getGuestFrameWindow} from '@neos-project/neos-ui-guest-frame/src/dom';
 
@@ -11,10 +10,9 @@ import {getGuestFrameWindow} from '@neos-project/neos-ui-guest-frame/src/dom';
 export function * watchEditPreviewModesChanged() {
     yield takeLatest(actionTypes.UI.EditPreviewMode.SET, function * editPreviewModeSet(action) {
         const {editPreviewMode} = action.payload;
-        const currentIframeUrl = yield select($get('ui.contentCanvas.src'));
 
         yield backend.get().endpoints.setUserPreferences('contentEditing.editPreviewMode', editPreviewMode);
 
-        getGuestFrameWindow().location.href = currentIframeUrl;
+        getGuestFrameWindow().location.href = yield select(selectors.UI.ContentCanvas.src);
     });
 }

packages/neos-ui/src/Containers/ContentCanvas/index.js

@@ -17,7 +17,7 @@ import style from './style.css';
     isFringeRight: $get('ui.rightSideBar.isHidden'),
     isFullScreen: $get('ui.fullScreen.isFullScreen'),
     backgroundColor: $get('ui.contentCanvas.backgroundColor'),
-    src: $get('ui.contentCanvas.src'),
+    src: selectors.UI.ContentCanvas.src,
     baseNodeType: $get('ui.pageTree.filterNodeType'),
     currentEditPreviewMode: selectors.UI.EditPreviewMode.currentEditPreviewMode
 }), {