Resolve component link in rich-text for embedded component

Question

What I want to achieve:

Step-1: when publishing, add embedded component in rich-text field to (JSON) output.

Step-2: href (tcm) should be replaced by field from embedded component.

note: embedded component is not/never on any page published.

Step-1.

What is already done and works.

From DXA 2.2 framework there is an option to add embedded component to rich-text field.

Example paragraaf.Text

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
see website <a title="Lorem Ipsum" href="tcm:98-421996">Lorem Ipsum</a>

The hyperlink (href) added is type schema/class ExterneLink.

After adding line with 'schemasToEmbedInRichText' in 'Render Page Content' located ..\Building Blocks\Framework\Developer\Templates\DXA.R2 it is embedded in paragraaf.Text (defined as rich-text).

<CompoundTemplate xmlns="http://www.tridion.com/ContentManager/5.3/CompoundTemplate"> 
  <TemplateInvocation>
    <Template xlink:href="tcm:105-416409-2048" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="Generate DXA R2 Page Model" />
    <TemplateParameters>
      <Parameters xmlns="http://www.sdl.com/web/schemas/dynamicpage">
        <schemasToEmbedInRichText>ExterneLink</schemasToEmbedInRichText>
        <expandLinkDepth xmlns="http://www.sdl.com/web/schemas/dynamicpage">3</expandLinkDepth>
        <modelBuilderTypeNames>DefaultModelBuilder;DefaultPageMetaModelBuilder;EclModelBuilder;ContextExpressionsModelBuilder</modelBuilderTypeNames>
      </Parameters>
    </TemplateParameters>
  </TemplateInvocation>
</CompoundTemplate>

Step-2.

Problem occurred while rendering this section

Unable to map field 'item' to property Artikel.Items of type 'System.Collections.Generic.List`1[[Uwv.eDv.Web.Modules.Core.Models.Paragraaf, Uwv.eDv.Web.Modules.Core, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]'. Unable to map field 'text' to property Paragraaf.Text of type 'Sdl.Web.Common.Models.RichText'. No semantic mapping found between Schema 418386 (http://www.sdl.com/web/schemas/core:ExterneLink) and model type 'Sdl.Web.Common.Models.EntityModel'

Our models:

public class Artikel : EntityModel
{
   [SemanticProperty("item")]
   public List<Paragraaf> Items { get; set; }
   ...
   public string Title { get; set; }
   public Afbeelding Afbeelding { get; set; }
}

public class Paragraaf : EntityModel
{
    // field below contains hyperlink(s) of type component (type ExterneLink)
    public RichText Text { get; set; }
    ...
}

public class ExterneLink : EntityModel, ISyndicationFeedItemProvider
{
    [SemanticProperty("externalLink")]
    public string Url { get; set; }
}

Below shows the JSON after step-1 (with content explorer preview/source). The embed component is present, mapping for this must be set.

How to get value "https://www.lipsum.com/" as href from Text field here. Content is here ExterneLink.Url property is here 'externalLink'.

"Content": {"externalLink": "https://www.lipsum.com/"

...
 "Regions": [
    {
      "Name": "Main",
      "Entities": [
        {
          "Id": "421995",
          "Namespace": "tcm",
          "ComponentTemplate": {
            "Id": "418420",
            "Namespace": "tcm",
            "Title": "Artikel",
            "RevisionDate": "2021-04-08T08:36:05.207",
            "OutputFormat": "HTML Fragment",
            "Metadata": {
              "view": "Artikel",
              "htmlClasses": "art_"
            }
          },
          "Folder": {
            "Id": "85214",
            "Title": "Artikel"
          },
          "Content": {
            "title": "Besluit op bezwaar over Wob-verzoek herbeoordelingen WB3000 dossiers",
            "afbeelding": {
              "$type": "EntityModelData",
              "Id": "418473",
              "Namespace": "tcm",
              "ComponentTemplate": {
                "Id": "416497",
                "Namespace": "tcm",
                "RevisionDate": "0001-01-01T00:00:00"
              },
              "Folder": {
                "Id": "85044",
                "Title": "Afbeelding"
              },
              "BinaryContent": {
                "Url": "/Preview/imagesdxa/visual-header-artikel_tcm102-418473.webp",
                "FileName": "visual-header-artikel.webp",
                "FileSize": 53454,
                "MimeType": "image/webp"
              },
              "Metadata": {
                "altText": "Automonteur"
              },
              "SchemaId": "418389"
            },
            "item": {
              "$type": "ContentModelData",
              "text": {
                "$type": "RichTextData",
                "Fragments": [
                  "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>\nsee website ",
                  {
                    "$type": "EntityModelData",
                    "Id": "421996",
                    "Namespace": "tcm",
                    "Folder": {
                      "Id": "84939",
                      "Title": "Links"
                    },
                    "Content": {
                      "externalLink": "https://www.lipsum.com/"
                    },
                    "Metadata": {
                      "html-title": "Lorem Ipsum",
                      "html-innerText": "Lorem Ipsum"
                    },
                    "SchemaId": "418386"
                  }
                ]
              }
            }
          },
...

Answer 1

step-2 Went on with that. Get good results.

class ExterneLink changes

• added ISyndicationFeedItemProvider as interface to implement

• added method ExtractSyndicationFeedItems

• added method public override string ToHtml()

    /// <summary>
    /// Extracts syndication feed items.
    /// </summary>
    /// <param name="localization">The context <see cref="Localization"/>.</param>
    /// <returns>A single syndication feed item containing information extracted from this <see cref="ExterneLink"/>.</returns>
    public IEnumerable<SyndicationItem> ExtractSyndicationFeedItems(Localization localization)
    {
        return new[] { CreateSyndicationItem(Url, DeepLink, null, null, localization) };
    }
  

the view did redering to html fragments

<bgl-rich-text>
    @Html.Raw(@paragraaf.Text)
</bgl-rich-text>

that @Html.Raw(@paragraaf.Text) results in

System.NotSupportedException: 'Direct rendering of View Model type 'Uwv.eDv.Web.Modules.Core.Models.ExterneLink' to HTML is not supported. Consider using View Model property of type RichText in combination with @Html.DxaRichText() in view code to avoid direct rendering to HTML. Alternatively, override method Uwv.eDv.Web.Modules.Core.Models.ExterneLink.ToHtml().'

because of that the ToHtml method was added (to be improved with title).

public override string ToHtml()
    {
        if (string.IsNullOrEmpty(Url))
            return string.Empty;

        return $@"<a href=""{this.Url}"">linktitle to site</a>";
    }

Example text with 2 ExterneLinks e.g.

 <p>Lorem Ipsum is simply dummy text of the printing and typesetting
 industry.</p>  goto lipsum.com website <a title="mylipsum.com"
 href="tcm:98-421996">Lorem Ipsum</a> <p>and a second ExterneLink to <a
 title="mylipsum2.com" href="tcm:98-418474">Lorem Ipsum</a></p>

This is correct solved with method ToHtml().

note: anchor open and close with title in original text is removed.