Skip to content

Commit

Permalink
overwrite default LinkEditor
Browse files Browse the repository at this point in the history
enable linking options for the inspector LinkEditor
  • Loading branch information
PRGfx committed Oct 2, 2023
1 parent e39a76b commit 09f49e9
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 8 deletions.
11 changes: 11 additions & 0 deletions Configuration/Settings.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@ Neos:
groups:
default:
label: Query Arguments
# This package provides a custom LinkEditor which allows editing linking options. You can disable this by
# setting the replace option to false
linkEditor:
replace: true
# Some linking options don't operate on the link string and don't make sense for the LinkEditor. They should
# never be enabled
ignoredOptions:
- title
- targetBlank
- relNoFollow
- download
fusion:
autoInclude:
Prgfx.Neos.LinkEditor: true
Expand Down
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,17 @@ Prgfx:
UriBuilder: true
ConvertUris: true
```

## Note
This package overwrites the default LinkEditor to allow passing additional linking options to enable the parameter editor in the inspector editor.
You can disable this behavior in the settings:
```yaml
Neos:
Neos:
Ui:
frontendConfiguration:
Prgfx.Neos.LinkEditor:
linkEditor:
replace: false
```
See the package settings for more information
44 changes: 44 additions & 0 deletions Resources/Private/LinkEditor/src/components/LinkEditor.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react';
import { GlobalNeos } from '../util/useNeos';
import { fromEntries } from '../util/objects';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { LinkInput } from '@neos-project/neos-ui-editors';

type LinkEditorProps = {
value?: string;
commit: (newValue: string) => void;
options?: {
[key: string]: unknown,
linking?: Record<string, unknown>,
};
neos: GlobalNeos;
}

/**
* Custom wrapper around the LinkEditor to support linking options in the inspector
* @param props
* @constructor
*/
export const LinkEditor: React.FunctionComponent<LinkEditorProps> = props => {
const { linking, ...options } = props.options;

const editorConfiguration = props.neos.globalRegistry
.get('frontendConfiguration')
.get<{linkEditor?: { ignoredOptions: string[] }}>('Prgfx.Neos.LinkEditor');
const ignoredOptions = editorConfiguration.linkEditor?.ignoredOptions ?? [];

const linkingOptions = {
...linking,
...fromEntries(ignoredOptions.map(option => [ option, false ])),
};

return (
<LinkInput
linkValue={props.value}
onLinkChange={props.commit}
options={options}
linkingOptions={linkingOptions}
/>
);
};
17 changes: 14 additions & 3 deletions Resources/Private/LinkEditor/src/manifest.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import manifest from '@neos-project/neos-ui-extensibility';
import { LinkAttributeEditor } from './components/LinkAttributeEditor';
import { LinkEditor } from './components/LinkEditor';
import { Registry } from './util/useNeos';

manifest('Prgfx.Neos.LinkEditor:LinkEditor', {}, (globalRegistry) => {
manifest('Prgfx.Neos.LinkEditor:LinkEditor', {}, (globalRegistry: Registry, { frontendConfiguration }) => {
const containerRegistry = globalRegistry.get('containers');

containerRegistry.set(
Expand All @@ -10,10 +12,19 @@ manifest('Prgfx.Neos.LinkEditor:LinkEditor', {}, (globalRegistry) => {
'end'
);

const editorSettings: {linkEditor?: { replace: boolean }} = frontendConfiguration['Prgfx.Neos.LinkEditor'];
if (editorSettings.linkEditor.replace) {
const editorRegistry = globalRegistry.get('inspector').get('editors');
editorRegistry.set('Neos.Neos/Inspector/Editors/LinkEditor', {
component: LinkEditor,
});
}

type DataLoader = { resolveValue: (options: unknown, identifier: string) => unknown };
// we generate links with query arguments, but we want to ignore these arguments when looking up the node, so it
// will still be displayed in the link editor
const linkLookupDataLoader = globalRegistry.get('dataLoaders').get('LinkLookup');
const originalResolve: (options: unknown, identifier: string) => unknown = linkLookupDataLoader.resolveValue;
const linkLookupDataLoader = globalRegistry.get('dataLoaders').get<DataLoader>('LinkLookup');
const originalResolve = linkLookupDataLoader.resolveValue;
const newResolve: typeof originalResolve = (options, oldLookup) => {
const newLookup = typeof oldLookup === 'string' && /^node:\/\//.test(oldLookup)
? oldLookup.split('?')[0]
Expand Down
2 changes: 1 addition & 1 deletion Resources/Private/LinkEditor/src/util/objects.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const fromEntries = (items: [string, string][]): Record<string, string> =>
export const fromEntries = <T>(items: [string, T][]): Record<string, T> =>
items.reduce((carry, [ key, value ]) => {
carry[key] = value;
return carry;
Expand Down
7 changes: 4 additions & 3 deletions Resources/Private/LinkEditor/src/util/useNeos.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@ import { useContext } from 'react';
// @ts-ignore
import { NeosContext } from '@neos-project/neos-ui-decorators';

type Registry = {
export type Registry = {
get<T = Registry>(key: string): T;
set<T = unknown>(key: string, value: T, position?: string): void;
}

type NeosResponse = {
export type GlobalNeos = {
globalRegistry: Registry;
}

export const useNeos = (): NeosResponse => {
export const useNeos = (): GlobalNeos => {
return useContext(NeosContext);
};
2 changes: 1 addition & 1 deletion Resources/Public/Plugin/LinkEditor/Plugin.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 09f49e9

Please sign in to comment.