Skip to content

Commit

Permalink
Merge pull request #27 from punktDeForks/FEATURE/Create_Custom_Link
Browse files Browse the repository at this point in the history
Add new link type CustomLink to be used as escape hatch if the other link types are insufficient for a desired use case.
  • Loading branch information
andrehoffmann30 authored Nov 22, 2023
2 parents c9c1e0f + 7eef1bd commit 7408c56
Show file tree
Hide file tree
Showing 10 changed files with 194 additions and 6 deletions.
Binary file added Docs/CustomLink.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion Neos.Ui/core/src/application/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ const DialogWithValue: React.FC<{
const modelFromState = form.getState().values.linkTypeProps?.[linkType.id.split('.').join('_')]
let Preview = linkType.Preview;
let model = modelFromState;
if (!modelFromState || (linkType.id === 'Sitegeist.Archaeopteryx:Web' && !modelFromState?.urlWithoutProtocol) || (linkType.id === 'Sitegeist.Archaeopteryx:PhoneNumber' && !modelFromState?.phoneNumber)) {
if (!modelFromState || (linkType.id === 'Sitegeist.Archaeopteryx:Web' && !modelFromState?.urlWithoutProtocol) || (linkType.id === 'Sitegeist.Archaeopteryx:PhoneNumber' && !modelFromState?.phoneNumber) || (linkType.id === 'Sitegeist.Archaeopteryx:CustomLink' && !modelFromState?.CustomLink)) {
Preview = exitingPreview;
model = existingModel;
}
Expand Down
82 changes: 82 additions & 0 deletions Neos.Ui/core/src/application/LinkTypes/CustomLink/CustomLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import * as React from 'react';

import {useI18n} from "@sitegeist/archaeopteryx-neos-bridge";

import {TextInput} from '@neos-project/react-ui-components';

import {ILink, makeLinkType} from "../../../domain";
import {Process, Field} from '../../../framework';
import {IconCard, IconLabel} from "../../../presentation";
import {Nullable} from 'ts-toolbelt/out/Union/Nullable';

type CustomLinkModel = {
customLink: string,
}

export const CustomLink = makeLinkType<CustomLinkModel>('Sitegeist.Archaeopteryx:CustomLink', ({createError}) => ({
isSuitableFor: (link: ILink) => !link.href.startsWith('asset://') && !link.href.startsWith('mailto:')
&& !link.href.startsWith('node://') && !link.href.startsWith('tel:')
&& !link.href.startsWith('http://') && !link.href.startsWith('https://'),

useResolvedModel: (link: ILink) => {
return Process.success({
customLink: link.href,
});
},

convertModelToLink: (model: CustomLinkModel) => {
return {href: `${model.customLink}`};
},

TabHeader: () => {
const i18n = useI18n();

return (
<IconLabel icon="">
{i18n('Sitegeist.Archaeopteryx:LinkTypes.CustomLink:title')}
</IconLabel>
);
},

Preview: ({model}: { model: CustomLinkModel }) => {
return (
<IconCard
icon=""
title={`<a href="${model.customLink}">...</a>`}
/>
)
},

Editor: ({model}: { model: Nullable<CustomLinkModel> }) => {
const i18n = useI18n();

return (
<div>
<label>
{i18n('Sitegeist.Archaeopteryx:LinkTypes.CustomLink:customLink.label')}
</label>
<div style={{display: 'grid', gridTemplateColumns: '400px 1fr', minWidth: '600px'}}>
<Field<string>
name="customLink"
initialValue={model?.customLink}
validate={
(value) => {
if (!value) {
return i18n('Sitegeist.Archaeopteryx:LinkTypes.CustomLink:validation.required');
}
}
}
>{({input}) => (
<TextInput
id={input.name}
type="text"
placeHolder={i18n('Sitegeist.Archaeopteryx:LinkTypes.CustomLink:customLink.placeholder')}
{...input}
/>
)}</Field>
</div>
</div>
);
}
}));

1 change: 1 addition & 0 deletions Neos.Ui/core/src/application/LinkTypes/CustomLink/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { CustomLink } from './CustomLink';
2 changes: 2 additions & 0 deletions Neos.Ui/core/src/application/LinkTypes/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {Node} from './Node';
import {Asset} from './Asset';
import {MailTo} from './MailTo';
import { PhoneNumber } from './PhoneNumber';
import { CustomLink } from './CustomLink';

export function registerLinkTypes(globalRegistry: IGlobalRegistry): void {
const linkTypeRegistry = new SynchronousRegistry(`
Expand All @@ -17,6 +18,7 @@ export function registerLinkTypes(globalRegistry: IGlobalRegistry): void {
linkTypeRegistry.set(Web.id, Web);
linkTypeRegistry.set(MailTo.id, MailTo);
linkTypeRegistry.set(PhoneNumber.id, PhoneNumber);
linkTypeRegistry.set(CustomLink.id, CustomLink);

globalRegistry.set('@sitegeist/archaeopteryx/link-types', linkTypeRegistry);
}
46 changes: 42 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,11 @@ The `Asset` Link Type handles links to files from the Media Module. The editor w
<img src="./Docs/Mail To.png">
</p>

The `Mail To` Link Type handles e-mail links, so links that start with `mailto:`. Links with the `mailto:` protocol allow not only to specify a recipient, but also to configure a subject, a message body, carbon copy (CC) recipients and blind carbon copy (BCC) recipients for the outgoing e-mail.
The `MailTo` Link Type handles e-mail links, so links that start with `mailto:`. Links with the `mailto:` protocol allow not only to specify a recipient, but also to configure a subject, a message body, carbon copy (CC) recipients and blind carbon copy (BCC) recipients for the outgoing e-mail.

The editor for the `Mail To` Link Type will offer all of those fields. Each field can be deactivated via configuration.
The editor for the `MailTo` Link Type will offer all of those fields. Each field can be deactivated via configuration.

The `Mail To` Link Type can be configured as follows:
The `MailTo` Link Type can be configured as follows:

**RTE Configuration:**

Expand Down Expand Up @@ -224,7 +224,7 @@ The `Mail To` Link Type can be configured as follows:
<img src="./Docs/Phone Number.png" width="700">
</p>

The `Phone Number` link type handles phone links, which start with `tel:` and allow to start a call. In the editor one selects the country calling code and add the rest of the phone number via an input field. To make it easier to check the added phone number, it is auto formatted in the preview according to the selected country. Via the the node type configuration you can define a `defaultCountry` and an array of `favoredCountries`. The `defaultCountry` is used to prefill the country calling code for new links. The values from the `favoredCountries` array are used to define a list of preferred countries, which will be placed at the top of the selectable country calling codes in the editor. The used values are ISO 3166-1 alpha-2 ([wikipedia](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)) country codes. Both configuration settings are placed in the `linking` respectively `linkTypes` section of the `editorOptions`:
The `PhoneNumber` link type handles phone links, which start with `tel:` and allow to start a call. In the editor one selects the country calling code and add the rest of the phone number via an input field. To make it easier to check the added phone number, it is auto formatted in the preview according to the selected country. Via the the node type configuration you can define a `defaultCountry` and an array of `favoredCountries`. The `defaultCountry` is used to prefill the country calling code for new links. The values from the `favoredCountries` array are used to define a list of preferred countries, which will be placed at the top of the selectable country calling codes in the editor. The used values are ISO 3166-1 alpha-2 ([wikipedia](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)) country codes. Both configuration settings are placed in the `linking` respectively `linkTypes` section of the `editorOptions`:

```yaml
'Vendor.Site:MyAwesomeNodeTypeWithSomeRichText':
Expand Down Expand Up @@ -270,6 +270,44 @@ The `Phone Number` link type handles phone links, which start with `tel:` and al
- FR
```

### Custom Link

<p align="center">
<img src="./Docs/CustomLink.png" width="700">
</p>

The `CustomLink` link type allows the editor to add a link in any format. With this you give the editor an escape hatch if the other link types are insufficient for the desired use case. As any other link type the `CustomLink` can be deactivated via the configuration. If you want to deactivate the `CustomLink` link type you can use the a preset:

Define the preset:

```yaml
Neos:
Neos:
nodeTypes:
presets:
properties:
myVendor:
noCustomLinkEditor:
ui:
inspector:
editor: 'Sitegeist.Archaeopteryx/Inspector/Editors/LinkEditor'
editorOptions:
linkTypes:
'Sitegeist.Archaeopteryx:CustomLink':
enabled: false
```

Use the preset in your link property, mixin or node type

```yaml
'MyVendor.Base:Mixin.Link':
abstract: true
properties:
link:
options:
preset: 'myVendor.noCustomLinkEditor'
```

## Link Options

<p align="center">
Expand Down
23 changes: 23 additions & 0 deletions Resources/Private/Translations/de/LinkTypes/CustomLink.xlf
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
<file original="" product-name="Sitegeist.Archaeopteryx" source-language="en" datatype="plaintext" target-language="de">
<body>
<trans-unit id="title" xml:space="preserve" approved="yes">
<source>Custom Link</source>
<target>Beliebiger Link</target>
</trans-unit>
<trans-unit id="customLink.label" xml:space="preserve" approved="yes">
<source>Custom Link:</source>
<target>Beliebiger Link:</target>
</trans-unit>
<trans-unit id="customLink.placeholder" xml:space="preserve" approved="yes">
<source>Enter your text here</source>
<target>Hier ihren Text eingeben</target>
</trans-unit>
<trans-unit id="validation.required" xml:space="preserve" approved="yes">
<source>This field is required</source>
<target>Dieses Feld ist erforderlich</target>
</trans-unit>
</body>
</file>
</xliff>
19 changes: 19 additions & 0 deletions Resources/Private/Translations/en/LinkTypes/CustomLink.xlf
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
<file original="" product-name="Sitegeist.Archaeopteryx" source-language="en" datatype="plaintext">
<body>
<trans-unit id="title" xml:space="preserve" approved="yes">
<source>Custom Link</source>
</trans-unit>
<trans-unit id="customLink.label" xml:space="preserve" approved="yes">
<source>Custom Link:</source>
</trans-unit>
<trans-unit id="customLink.placeholder" xml:space="preserve" approved="yes">
<source>Enter your text here</source>
</trans-unit>
<trans-unit id="validation.required" xml:space="preserve" approved="yes">
<source>This field is required</source>
</trans-unit>
</body>
</file>
</xliff>
23 changes: 23 additions & 0 deletions Resources/Private/Translations/fr/LinkTypes/CustomLink.xlf
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
<file original="" product-name="Sitegeist.Archaeopteryx" source-language="en" datatype="plaintext" target-language="fr">
<body>
<trans-unit id="title" xml:space="preserve" approved="yes">
<source>Custom Link</source>
<target>Lien personnalisé</target>
</trans-unit>
<trans-unit id="customLink.label" xml:space="preserve" approved="yes">
<source>Custom Link:</source>
<target>Lien personnalisé:</target>
</trans-unit>
<trans-unit id="customLink.placeholder" xml:space="preserve" approved="yes">
<source>Enter your text here</source>
<target>Entrez votre texte ici</target>
</trans-unit>
<trans-unit id="validation.required" xml:space="preserve" approved="yes">
<source>This field is required</source>
<target>Ce champ est nécessaire</target>
</trans-unit>
</body>
</file>
</xliff>
2 changes: 1 addition & 1 deletion Resources/Public/JavaScript/Plugin.js

Large diffs are not rendered by default.

0 comments on commit 7408c56

Please sign in to comment.