Tailwind Logo

Adjusting the sxastarter sample for use on multilingual sites - Part 3 RichText

XM CloudHeadless SXA

Published: 2024-09-20

In this article, we will check the behavior of the rich text editor used on multilingual sites. First, we will check the behavior of links using the rich text editor.

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.

richtextlink01.png

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

HTML
<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.

richtextlink02.png

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

richtextlink03.png

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

richtextlink04.png

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.

TypeScript
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.

TypeScript
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.

richtextlink05.png

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

TypeScript
  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.

JSON
{
  value: '<h1>見出し1</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

TypeScript
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.

richtextlink06.png

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