From aea8e7c7d54c1dd6ebb89d3b18dd53bc45080b4c Mon Sep 17 00:00:00 2001 From: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Date: Mon, 8 Jul 2024 14:46:13 +0200 Subject: [PATCH] WIP: Fix further occurrences of server resources --- .../src/EditorEnvelope/index.js | 30 ++++++++++++++++--- .../Image/Components/PreviewScreen/index.js | 5 +++- .../SecondaryEditors/ImageCropper/index.js | 5 +++- .../src/Icon/resourceIcon.tsx | 3 +- 4 files changed, 35 insertions(+), 8 deletions(-) diff --git a/packages/neos-ui-editors/src/EditorEnvelope/index.js b/packages/neos-ui-editors/src/EditorEnvelope/index.js index 96574a0b9f..69076c15f2 100644 --- a/packages/neos-ui-editors/src/EditorEnvelope/index.js +++ b/packages/neos-ui-editors/src/EditorEnvelope/index.js @@ -9,12 +9,15 @@ import I18n from '@neos-project/neos-ui-i18n'; import {neos} from '@neos-project/neos-ui-decorators'; import style from './style.module.css'; +import {ResourceIconContext} from '@neos-project/react-ui-components/src/Icon/resourceIcon'; @neos(globalRegistry => ({ editorRegistry: globalRegistry.get('inspector').get('editors'), i18nRegistry: globalRegistry.get('i18n') })) export default class EditorEnvelope extends PureComponent { + static contextType = ResourceIconContext; + state = { showHelpMessage: false }; @@ -118,11 +121,30 @@ export default class EditorEnvelope extends PureComponent { }; getThumbnailSrc(thumbnail) { - if (thumbnail.substr(0, 11) === 'resource://') { - thumbnail = '/_Resources/Static/Packages/' + thumbnail.substr(11); + const regex = /^resource:\/\/([^\\/]+)\/(.*)/; + + const matches = thumbnail?.match(regex); + + if (!matches) { + return thumbnail; + } + + if (!this.context) { + console.error('ResourceIconContext missing! Cannot resolve uri: ', thumbnail); + return null; } - return thumbnail; + const [_, packageName, rawPath] = matches; + + let publicPath = rawPath; + if (!rawPath.startsWith('Public/')) { + // legacy syntax not including the "Public" segment see https://github.com/neos/neos-ui/issues/2092#issuecomment-1606055787 + publicPath = `Public/${rawPath}`; + } + + const resourcePath = `resource://${packageName}/${publicPath}`; + + return this.context.createFromResourcePath(resourcePath); } renderHelpMessage() { @@ -134,7 +156,7 @@ export default class EditorEnvelope extends PureComponent { return ( {helpMessage ? : ''} - {helpThumbnail ? {label} : ''} + {helpThumbnailSrc ? {label} : ''} ); } diff --git a/packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/index.js b/packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/index.js index ee77293da9..73dd530d3d 100644 --- a/packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/index.js +++ b/packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/index.js @@ -6,8 +6,11 @@ import {AssetUpload} from '../../../../Library/index'; import {Thumbnail} from '../../Utils/index'; import {Icon} from '@neos-project/react-ui-components'; import style from './style.module.css'; +import {ResourceIconContext} from '@neos-project/react-ui-components/src/Icon/resourceIcon'; export default class PreviewScreen extends PureComponent { + static contextType = ResourceIconContext; + static propTypes = { className: PropTypes.string, propertyName: PropTypes.string, @@ -52,7 +55,7 @@ export default class PreviewScreen extends PureComponent { {propertyName} diff --git a/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/index.js b/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/index.js index 39f783a68b..af117fd9da 100644 --- a/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/index.js +++ b/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/index.js @@ -11,6 +11,7 @@ import CropConfiguration, {CustomAspectRatioOption, LockedAspectRatioStrategy} f import style from './style.module.css'; import './react_crop.vanilla-css'; +import {ResourceIconContext} from '@neos-project/react-ui-components/src/Icon/resourceIcon'; /** * Calculates the greatest common divisor for given numbers a, b @@ -74,6 +75,8 @@ class AspectRatioItem extends PureComponent { i18nRegistry: globalRegistry.get('i18n') })) export default class ImageCropper extends PureComponent { + static contextType = ResourceIconContext; + state = { cropConfiguration: CropConfiguration.fromNeosConfiguration( this.props.sourceImage, @@ -176,7 +179,7 @@ export default class ImageCropper extends PureComponent { const aspectRatioLocked = cropConfiguration.aspectRatioStrategy instanceof LockedAspectRatioStrategy; const allowCustomRatios = cropConfiguration.aspectRatioOptions.some(option => option instanceof CustomAspectRatioOption); const {sourceImage, i18nRegistry} = this.props; - const src = sourceImage.previewUri || '/_Resources/Static/Packages/Neos.Neos/Images/dummy-image.svg'; + const src = sourceImage.previewUri || this.context.createFromResourcePath('resource://Neos.Neos/Public/Images/dummy-image.svg'); const toolbarRef = el => { this.toolbarNode = el; diff --git a/packages/react-ui-components/src/Icon/resourceIcon.tsx b/packages/react-ui-components/src/Icon/resourceIcon.tsx index a201925cb7..4a3ef9e9e9 100644 --- a/packages/react-ui-components/src/Icon/resourceIcon.tsx +++ b/packages/react-ui-components/src/Icon/resourceIcon.tsx @@ -25,8 +25,6 @@ class ResourceIcon extends PureComponent { public render(): JSX.Element | null { const {padded, theme, label, icon, className, color, size} = this.props; - - if (!this.context) { console.error('ResourceIconContext missing! Cannot resolve uri: ', icon); return null; @@ -43,6 +41,7 @@ class ResourceIcon extends PureComponent { let publicPath = rawPath; if (!rawPath.startsWith('Public/')) { + // legacy syntax not including the "Public" segment see https://github.com/neos/neos-ui/issues/2092#issuecomment-1606055787 publicPath = `Public/${rawPath}`; }