Rich Text Behavior

The first step is to place a simple rich text item. This is in the form of a link that is added there.

In this case, referring to the HTML, the following code is set

<h1>Heading 1</h1>
<p>This is a test of the <a href="~/link.aspx?_id=90BA748D013345A1B948CD71E5EA940C&amp;_z=z">Global Menu 1</a></p>

When setting up a link, the ID of the item is listed instead of the path. This allows the link to be maintained even if the target item is moved to a different path.

Switch to preview mode to see the URL set using the path.

Now let's prepare a resource in Japanese. Set up Japanese data for the same item.

The link is translated into Japanese, but the destination is the same item as before. Then how is the URL displayed?

When an item is specified in this way, the locale is not automatically assigned, so the link will be created to the English content.

Adjusting links

First, the code for the RichText component is very simple.

import React from 'react';
import { Field, RichText as JssRichText } from '@sitecore-jss/sitecore-jss-nextjs';

interface Fields {
  Text: Field<string>;
}

export type RichTextProps = {
  params: { [key: string]: string };
  fields: Fields;
};

export const Default = (props: RichTextProps): JSX.Element => {
  const text = props.fields ? (
    <JssRichText field={props.fields.Text} />
  ) : (
    <span className="is-empty-hint">Rich text</span>
  );
  const id = props.params.RenderingIdentifier;

  return (
    <div
      className={`component rich-text ${props.params.styles.trimEnd()}`}
      id={id ? id : undefined}
    >
      <div className="component-content">{text}</div>
    </div>
  );
};

Create a locale-based URL as in the previous Link List.

const getLocale = function (props: SitecoreContextValue): string {
  let locale;

  if (!props.language || props.language === process.env.DEFAULT_LANGUAGE) {
    locale = '';
  } else {
    locale = '/' + props.language;
  }

  return locale;
};

export const Default = (props: RichTextProps): JSX.Element => {
  const { sitecoreContext } = useSitecoreContext();

  const contentLocale = getLocale(sitecoreContext);

  console.log(contentLocale);

This time, in order to check whether the locale is correctly obtained by the component, we will output contentLocale once in console.log. You can see that the value is ja-JP when Japanese content is displayed, and no value otherwise.

When rich text data is available, the following code is used to display the results.

  const text = props.fields ? (
    <JssRichText field={props.fields.Text} />
  ) : (
    <span className="is-empty-hint">Rich text</span>
  );

What kind of data does props.fields.Text contain? In order to check this in Japanese, we again use console.log to check the data. As a result, the following Json data is returned.

{
  value: '<h1>見出し１</h1>\n' +
    '<p>これはテストです <a href="/Global-Menu-1?sc_site=Tailwindcss">グローバルメニュー 1</a></p>'
}

The above URLs can be supported by adding a locale. There are two points to keep in mind when doing this

• The data returned in edit mode will be a URL starting with ~/link.aspx?_.
• For external links, start with the form https://

For this reason, it is a good idea to handle locales when the first letter of the href begins with a /.

In this case, we will make the following changes

type RichTextValue = {
  value: string;
};

const addLocaleToUrls = (json: RichTextValue, locale: string): RichTextValue => {
  const urlRegex = /href="\/(?!\/)([^"]*)"/g;
  const updatedValue = json.value.replace(urlRegex, (_, url) => {
    return `href="${locale}/${url}"`;
  });

  return { value: updatedValue };
};

export const Default = (props: RichTextProps): JSX.Element => {
  const { sitecoreContext } = useSitecoreContext();

  const contentLocale = getLocale(sitecoreContext);
  const updatedJsonData = addLocaleToUrls(props.fields.Text, contentLocale);

  const text = props.fields ? (
    <JssRichText field={updatedJsonData} />
  ) : (
    <span className="is-empty-hint">Rich text</span>
  );

The URLs in the rich text code are added to the locale using a regular expression. As a result, we were able to add a locale to a Japanese rich text URL.

Summary

This time, we checked how to adjust URLs when there is more than just link information like RichText. Basically, the key point is how to output the Json data returned as a result, so it is easy to adjust if you can obtain the Json data once and confirm what to convert.

In addition to the rich text component, there are two other sxastarter components that use JssRichText: PageContent.tsx and Promo.tsx. Similar processing should be added to each component as necessary.

Tags

• XM Cloud
• Headless SXA