Add support for creating links within code components

The back-end already allows this:

# @see https://json-schema.org/understanding-json-schema/reference/strings
experience_builder.json_schema.prop.string:
…
    format:
      requiredKey: false
      type: string
      label: 'Format'
      constraints:
        Choice:
          # @see https://json-schema.org/understanding-json-schema/reference/type#built-in-formats
          # @see Drupal\experience_builder\JsonSchemaInterpreter\JsonSchemaStringFormat::computeStorablePropShape()
          - date-time
          - date
          - email
          - idn-email
          - uri
          - uri-reference
          - iri
          - iri-reference

So it's just a matter of adding something like:

diff --git a/ui/src/features/code-editor/component-data/Props.tsx b/ui/src/features/code-editor/component-data/Props.tsx
index 6bc1e9a02..bd69a8e3e 100644
--- a/ui/src/features/code-editor/component-data/Props.tsx
+++ b/ui/src/features/code-editor/component-data/Props.tsx
@@ -55,6 +55,11 @@ const UI_PROP_TYPES: Record<string, UiPropType> = {
     displayName: 'Text area',
     _ref: 'json-schema-definitions://experience_builder.module/textarea',
   },
+  stringUrl: {
+    type: 'string',
+    displayName: 'URL',
+    format: 'URL',
+  },
   integer: { type: 'integer', displayName: 'Integer' },
   number: { type: 'number', displayName: 'Number' },
   boolean: { type: 'boolean', displayName: 'Boolean' },

… and wiring that up — like @hooroomoo did yesterday for textareas in ✨ Allow adding textarea in the code editor Active .

Note: this is purely about being able to create such props for code components.

It's not about the UX of entering links, for that we have ✨ [PP-1] Make link widget autocomplete work (for uri and uri-reference props) Postponed .

Consistent naming 🤓

Bálint started working on this AFAIK.

Awesome to see the old UI_PROP_TYPES object evolve into derivedPropTypes.ts 🔥

💯

But … 😅

I expected the relative path (see the example in the GIF in #9 and the Relative path link with example value hunk in the MR) to start with a slash.

IOW: I expected this to match

• how \Drupal\path_alias\Entity\PathAlias stores path aliases
• how the Content Creator enters a path aliases at e.g. /node/add/article in Drupal's Standard install profile
• XB's all-props SDC test_string_format_uri_reference prop's example of /example-uri

Is the omission of the leading slash here intentional? If so: what's the rationale?

If it's not intentional: can we change it in a follow-up? 🙏

It was barely a UX decision I made, and since the validation (based on the JSON Schema) passed on those values, I forgot to match this how Drupal usually expects these. Let's change in a follow-up.

Automatically closed - issue fixed for 2 weeks with no activity.