FEATURE Inspector link value object property

Classes/Link.php

@@ -0,0 +1,162 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Sitegeist\Archaeopteryx;
+
+use GuzzleHttp\Psr7\Uri;
+use Neos\Flow\Annotations as Flow;
+use Psr\Http\Message\UriInterface;
+
+/**
+ * Link value object modeled partially after the html spec for <a> tags.
+ *
+ * This Link can be used also as node property:
+ *
+ * ```yaml
+ * My.Content:
+ *   properties:
+ *     link:
+ *       type: 'Sitegeist\Archaeopteryx\Link'
+ *       ui:
+ *         inspector:
+ *           editorOptions:
+ *             anchor: true
+ *             title: true
+ *             targetBlank: true
+ *             relNofollow: true
+ * ```
+ *
+ * Note that currently the link editor can only handle and write to
+ * the property {@see Link::$target} "_blank" | null
+ * and to {@see Link::$rel} ["noopener"] | null
+ *
+ * The Link values can be accessed in Fusion the following:
+ *
+ * ```fusion
+ * href = ${q(node).property("link").href}
+ * title = ${q(node).property("link").title}
+ * # ...
+ * ```
+ *
+ * In case you need to cast the uri in {@see Link::$href} explicitly to a string
+ * you can use: `String.toString(link.href)`
+ *
+ * @Flow\Proxy(false)
+ */
+final class Link implements \JsonSerializable
+{
+    /**
+     * A selection of frequently used target attribute values
+     */
+    public const TARGET_SELF = '_self';
+    public const TARGET_BLANK = '_blank';
+
+    /**
+     * A selection of frequently used rel attribute values
+     */
+    public const REL_NOOPENER = 'noopener';
+    public const REL_NOFOLLOW = 'nofollow';
+
+    /**
+     * @param array<int, string> $rel
+     */
+    private function __construct(
+        public readonly UriInterface $href,
+        public readonly ?string $title,
+        public readonly ?string $target,
+        public readonly array $rel
+    ) {
+    }
+
+    /**
+     * @param array<int, string> $rel
+     */
+    public static function create(
+        UriInterface $href,
+        ?string $title,
+        ?string $target,
+        array $rel
+    ): self {
+        $relMap = [];
+        foreach ($rel ?? [] as $value) {
+            $relMap[trim(strtolower($value))] = true;
+        }
+        $trimmedTarget = $target !== null ? trim($target) : '';
+        return new self(
+            $href,
+            $title,
+            $trimmedTarget !== '' ? strtolower($trimmedTarget) : null,
+            array_keys($relMap)
+        );
+    }
+
+    /**
+     * @param array<string, string> $array
+     */
+    public static function fromArray(array $array): self
+    {
+        return self::create(
+            new Uri($array['href']),
+            $array['title'] ?? null,
+            $array['target'] ?? null,
+            $array['rel'] ?? [],
+        );
+    }
+
+    public static function fromString(string $string): self
+    {
+        return self::create(
+            new Uri($string),
+            null,
+            null,
+            [],
+        );
+    }
+
+    public function withTitle(?string $title): self
+    {
+        return self::create(
+            $this->href,
+            $title,
+            $this->target,
+            $this->rel
+        );
+    }
+
+    public function withTarget(?string $target): self
+    {
+        return self::create(
+            $this->href,
+            $this->title,
+            $target,
+            $this->rel
+        );
+    }
+
+    /**
+     * @param array<int, string> $rel
+     */
+    public function withRel(array $rel): self
+    {
+        return self::create(
+            $this->href,
+            $this->title,
+            $this->target,
+            $rel
+        );
+    }
+
+    /**
+     * @return array<string, string>
+     */
+    public function jsonSerialize(): array
+    {
+        return [
+            'href' => $this->href->__toString(),
+            'title' => $this->title,
+            'target' => $this->target,
+            'rel' => $this->rel,
+        ];
+    }
+}

Classes/LinkToArrayForNeosUiConverter.php

@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Sitegeist\Archaeopteryx;
+
+use Neos\Flow\Property\PropertyMappingConfigurationInterface;
+use Neos\Flow\Property\TypeConverter\AbstractTypeConverter;
+use Neos\Flow\Property\TypeConverter\ArrayFromObjectConverter;
+
+/**
+ * Until {@see https://github.com/neos/neos-development-collection/pull/4638} is fixed in {@see \Neos\Neos\Service\Mapping\NodePropertyConverterService::convertValue} we must prevent that the
+ * {@see Link} is converted via the {@see ArrayFromObjectConverter} as this fails when converting the {@see \GuzzleHttp\Psr7\Uri} in {@see Link::$href}.
+ */
+class LinkToArrayForNeosUiConverter extends AbstractTypeConverter
+{
+    protected $sourceTypes = [Link::class];
+
+    protected $targetType = 'array';
+
+    protected $priority = 100;
+
+    public function convertFrom($source, $targetType, array $convertedChildProperties = [], PropertyMappingConfigurationInterface $configuration = null)
+    {
+        if (!$source instanceof Link) {
+            throw new \InvalidArgumentException('Expected argument $source to be of type Link, got: ' . get_debug_type($source), 1697972165);
+        }
+        return $source->jsonSerialize();
+    }
+}

Configuration/Settings.Neos.Ui.yaml

@@ -1,5 +1,13 @@
 Neos:
   Neos:
+    userInterface:
+      inspector:
+        dataTypes:
+          Sitegeist\Archaeopteryx\Link:
+            # the option `typeConverter` must not be specified here.
+            # from array|string to Link the Neos\Flow\Property\TypeConverter\DenormalizingObjectConverter is used
+            # for Link to array the Sitegeist\Archaeopteryx\LinkToArrayForNeosUiConverter is used
+            editor: Sitegeist.Archaeopteryx/Inspector/Editors/LinkEditor
     Ui:
       resources:
         javascript:

Neos.Ui/inspector-editor/src/EditorProps.ts

@@ -0,0 +1,86 @@
+/**
+ * Component wiring {@link https://github.com/neos/neos-ui/pull/3096}
+ *
+ * {@link https://docs.neos.io/cms/manual/extending-the-user-interface/react-extensibility-api#component-wiring}
+ */
+export type EditorProps<Options = {}, Value = any> = {
+    /**
+     * an identifier which can be used for HTML ID generation
+     * @example
+     *  "__neos__editor__property---{propertyName}"
+     */
+    id?: string;
+    /** name of the node property to edit */
+    identifier: string;
+    /**
+     * label of the node property
+     * to be possibly translated via i18n.translate(label)
+     *
+     * recommended, when {@link RegisteredEditor.hasOwnLabel} = true is used
+     *
+     *  @example
+     * ```jsx
+     *  <Label htmlFor={this.props.id}>
+     *      <I18n id={this.props.label} />
+     *      {this.props.renderHelpIcon()}
+     *  </Label>
+     * ```
+     */
+    label: string;
+    /** additional editor options of the `editorOptions` */
+    options: Options;
+    /**
+     * currently edited property value of the node
+     * is reactive - eg updates on discard and commit
+     */
+    value?: Value;
+    /**
+     * @param secondaryInspectorName identifier, used to implement toggling of the inspector when calling this method twice.
+     * @param secondaryInspectorComponentFactory factory for the secondary inspector content or undefined|null to close the secondary inspector
+     * @example
+     *  props.renderSecondaryInspector('IMAGE_CROPPING', () => <MySecondaryInspectorContent />)
+     */
+    renderSecondaryInspector(
+        secondaryInspectorName: string,
+        secondaryInspectorComponentFactory: () => JSX.Element | undefined | null
+    ): void;
+    /**
+     * register value change of the node property, which can be applied or discarded
+     *
+     * @param value the new value.
+     * @param hooks an object whose keys are saveHooks to be triggered, the values are hook-specific options: Example: `{'Neos.UI:Hook.BeforeSave.CreateImageVariant': nextImage}`
+     */
+    commit(value: Value, hooks?: Record<string, unknown>): void;
+
+    // unofficial api
+    /** name of the editor `Foo.Bar/EditorName` */
+    editor: string;
+    /**
+     * renders toggleable button
+     *
+     * see for an examle:
+     * {@link EditorProps.label}
+     */
+    renderHelpIcon(): JSX.Element | "";
+    hooks?: Record<string, unknown>;
+    editorRegistry: unknown;
+    i18nRegistry: unknown;
+    /** applies any pending changes (as if you clicked the apply button) */
+    onEnterKey(): void;
+    helpMessage?: string;
+    helpThumbnail?: string;
+    /** the value has pending changes (was changed via commit) */
+    highlight?: boolean;
+    /**
+     * styles an orange or red box-shadow
+     * around the element the class is applied
+     * to indicate pending changes or failure on validation errors
+     *
+     * @example
+     * ```css
+     *  box-shadow: 0 0 0 2px /^(red|orange)$/;
+     *  border-radius: 2px;
+     * ```
+     */
+    className: string;
+};