From 0bd71d7e726a9d72e824526a0f741424691e7f1e Mon Sep 17 00:00:00 2001 From: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Date: Mon, 6 Mar 2023 20:24:24 +0100 Subject: [PATCH 1/3] WIP: 90 EditPreviewMode Hack --- .../neos-ui-sagas/src/UI/ContentCanvas/index.js | 16 ++++++++++++---- .../src/UI/EditPreviewMode/index.js | 5 +++-- .../src/Containers/ContentCanvas/index.js | 7 ++++++- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js b/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js index 3d8e11b011..555cb8bc4c 100644 --- a/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js +++ b/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,9 @@ 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 = new URL(yield select($get('ui.contentCanvas.src')), document.location.href); + const currentEditPreviewMode = yield select(selectors.UI.EditPreviewMode.currentEditPreviewMode); + currentIframeUrl.searchParams.set('editPreviewMode', currentEditPreviewMode); [].slice.call(document.querySelectorAll(`iframe[name=neos-content-main]`)).forEach(iframe => { const iframeWindow = iframe.contentWindow || iframe; @@ -54,8 +56,14 @@ export function * watchReload() { // might be already handling this. // 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 (iframeWindow.location.href === currentIframeUrl.toString()) { + if (uri) { + const uriUrl = new URL(uri, document.location.href); + uriUrl.searchParams.set('editPreviewMode', currentEditPreviewMode); + iframeWindow.location.href = uriUrl.toString(); + } else { + iframeWindow.location.reload(); + } } }); }); diff --git a/packages/neos-ui-sagas/src/UI/EditPreviewMode/index.js b/packages/neos-ui-sagas/src/UI/EditPreviewMode/index.js index d124e79c78..8d08046783 100644 --- a/packages/neos-ui-sagas/src/UI/EditPreviewMode/index.js +++ b/packages/neos-ui-sagas/src/UI/EditPreviewMode/index.js @@ -11,10 +11,11 @@ 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')); + const currentIframeUrl = new URL(yield select($get('ui.contentCanvas.src')), document.location.href); yield backend.get().endpoints.setUserPreferences('contentEditing.editPreviewMode', editPreviewMode); - getGuestFrameWindow().location.href = currentIframeUrl; + currentIframeUrl.searchParams.set('editPreviewMode', editPreviewMode); + getGuestFrameWindow().location.href = currentIframeUrl.toString(); }); } diff --git a/packages/neos-ui/src/Containers/ContentCanvas/index.js b/packages/neos-ui/src/Containers/ContentCanvas/index.js index fb52e28f7c..a92c2aa42c 100644 --- a/packages/neos-ui/src/Containers/ContentCanvas/index.js +++ b/packages/neos-ui/src/Containers/ContentCanvas/index.js @@ -17,7 +17,12 @@ 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: state => { + const src = new URL($get('ui.contentCanvas.src', state), document.location.href); + const editPreviewMode = selectors.UI.EditPreviewMode.currentEditPreviewMode(state); + src.searchParams.set('editPreviewMode', editPreviewMode); + return src.toString(); + }, baseNodeType: $get('ui.pageTree.filterNodeType'), currentEditPreviewMode: selectors.UI.EditPreviewMode.currentEditPreviewMode }), { From 847909674dc8db0b05a468e4b46971485607c4a4 Mon Sep 17 00:00:00 2001 From: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Date: Fri, 10 Mar 2023 20:15:14 +0100 Subject: [PATCH 2/3] WIP --- .../src/UI/ContentCanvas/index.spec.js | 12 ++++++++++++ .../src/UI/ContentCanvas/selectors.ts | 12 ++++++++++++ packages/neos-ui-sagas/src/UI/ContentCanvas/index.js | 7 +++---- .../neos-ui-sagas/src/UI/EditPreviewMode/index.js | 7 ++----- .../neos-ui/src/Containers/ContentCanvas/index.js | 7 +------ 5 files changed, 30 insertions(+), 15 deletions(-) diff --git a/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.spec.js b/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.spec.js index 5c8c29464b..46220e6d97 100644 --- a/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.spec.js +++ b/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"); +}); diff --git a/packages/neos-ui-redux-store/src/UI/ContentCanvas/selectors.ts b/packages/neos-ui-redux-store/src/UI/ContentCanvas/selectors.ts index 73941ffaef..63fc022cff 100644 --- a/packages/neos-ui-redux-store/src/UI/ContentCanvas/selectors.ts +++ b/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 = {}; diff --git a/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js b/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js index 555cb8bc4c..4a3fdf7c5c 100644 --- a/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js +++ b/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js @@ -44,9 +44,8 @@ export function * watchStopLoading({globalRegistry, store}) { export function * watchReload() { yield takeLatest(actionTypes.UI.ContentCanvas.RELOAD, function * (action) { const {uri} = action.payload; - const currentIframeUrl = new URL(yield select($get('ui.contentCanvas.src')), document.location.href); - const currentEditPreviewMode = yield select(selectors.UI.EditPreviewMode.currentEditPreviewMode); - currentIframeUrl.searchParams.set('editPreviewMode', currentEditPreviewMode); + + const currentIframeUrl = yield select(selectors.UI.ContentCanvas.src); [].slice.call(document.querySelectorAll(`iframe[name=neos-content-main]`)).forEach(iframe => { const iframeWindow = iframe.contentWindow || iframe; @@ -56,7 +55,7 @@ export function * watchReload() { // might be already handling this. // If the new uri is provided in the action payload, use that // - if (iframeWindow.location.href === currentIframeUrl.toString()) { + if (iframeWindow.location.href === currentIframeUrl) { if (uri) { const uriUrl = new URL(uri, document.location.href); uriUrl.searchParams.set('editPreviewMode', currentEditPreviewMode); diff --git a/packages/neos-ui-sagas/src/UI/EditPreviewMode/index.js b/packages/neos-ui-sagas/src/UI/EditPreviewMode/index.js index 8d08046783..9e3bfb3dcc 100644 --- a/packages/neos-ui-sagas/src/UI/EditPreviewMode/index.js +++ b/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,11 +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 = new URL(yield select($get('ui.contentCanvas.src')), document.location.href); yield backend.get().endpoints.setUserPreferences('contentEditing.editPreviewMode', editPreviewMode); - currentIframeUrl.searchParams.set('editPreviewMode', editPreviewMode); - getGuestFrameWindow().location.href = currentIframeUrl.toString(); + getGuestFrameWindow().location.href = yield select(selectors.UI.ContentCanvas.src); }); } diff --git a/packages/neos-ui/src/Containers/ContentCanvas/index.js b/packages/neos-ui/src/Containers/ContentCanvas/index.js index a92c2aa42c..99858b9ccf 100644 --- a/packages/neos-ui/src/Containers/ContentCanvas/index.js +++ b/packages/neos-ui/src/Containers/ContentCanvas/index.js @@ -17,12 +17,7 @@ import style from './style.css'; isFringeRight: $get('ui.rightSideBar.isHidden'), isFullScreen: $get('ui.fullScreen.isFullScreen'), backgroundColor: $get('ui.contentCanvas.backgroundColor'), - src: state => { - const src = new URL($get('ui.contentCanvas.src', state), document.location.href); - const editPreviewMode = selectors.UI.EditPreviewMode.currentEditPreviewMode(state); - src.searchParams.set('editPreviewMode', editPreviewMode); - return src.toString(); - }, + src: selectors.UI.ContentCanvas.src, baseNodeType: $get('ui.pageTree.filterNodeType'), currentEditPreviewMode: selectors.UI.EditPreviewMode.currentEditPreviewMode }), { From 2a8b9545ce4bafc76c0696920447558325297aec Mon Sep 17 00:00:00 2001 From: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Date: Fri, 10 Mar 2023 22:09:14 +0100 Subject: [PATCH 3/3] WIp --- .../src/UI/ContentCanvas/index.spec.js | 6 +++--- .../src/UI/ContentCanvas/selectors.ts | 2 +- .../neos-ui-sagas/src/UI/ContentCanvas/index.js | 16 +++++++++++++--- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.spec.js b/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.spec.js index 46220e6d97..08eb7cd0b4 100644 --- a/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.spec.js +++ b/packages/neos-ui-redux-store/src/UI/ContentCanvas/index.spec.js @@ -81,10 +81,10 @@ test(`contentCanvas.src selector also calculates the editPreviewMode into the ur const state = { ui: { contentCanvas: { - src: "http://127.0.0.1:8081/neos/preview?node%5B__contextNodePath%5D=%2Fsites%2Fneosdemo%40user-admin%3Blanguage%3Den_US" + src: 'http://127.0.0.1:8081/neos/preview?node%5B__contextNodePath%5D=%2Fsites%2Fneosdemo%40user-admin%3Blanguage%3Den_US' }, - editPreviewMode: "rawContent" + 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"); + 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'); }); diff --git a/packages/neos-ui-redux-store/src/UI/ContentCanvas/selectors.ts b/packages/neos-ui-redux-store/src/UI/ContentCanvas/selectors.ts index 63fc022cff..8e95a0709e 100644 --- a/packages/neos-ui-redux-store/src/UI/ContentCanvas/selectors.ts +++ b/packages/neos-ui-redux-store/src/UI/ContentCanvas/selectors.ts @@ -12,7 +12,7 @@ export const isLinkEditorOpen = (state: GlobalState) => $get(['ui', 'contentCanv export const src = (state: GlobalState) => { const src = state?.ui?.contentCanvas?.src; - if (src === null || src === "") { + if (src === null || src === '') { return src; } const contentCanvasUri = new URL(src); diff --git a/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js b/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js index 4a3fdf7c5c..f780121005 100644 --- a/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js +++ b/packages/neos-ui-sagas/src/UI/ContentCanvas/index.js @@ -57,9 +57,19 @@ export function * watchReload() { // if (iframeWindow.location.href === currentIframeUrl) { if (uri) { - const uriUrl = new URL(uri, document.location.href); - uriUrl.searchParams.set('editPreviewMode', currentEditPreviewMode); - iframeWindow.location.href = uriUrl.toString(); + 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(); }