🚚 [open-formulieren/open-forms#4546] Move RichText component to 'base…

… building blocks'

While it initially was only relevant for the content component, we will
make use of this same component in the display component for the
soft required validation errors.

The component translations wrapper around it remains component-type
specific since we can leverage the type-safety when checking validation
error keys, at the cost of a little bit of code duplication.

src/components/builder/index.ts

@@ -18,6 +18,7 @@ export {default as ReadOnly} from './readonly';
 export {default as ShowCharCount} from './show-char-count';
 export {default as PresentationConfig} from './presentation-config';
 export {default as ComponentSelect} from './component-select';
+export {default as RichText} from './rich-text';
 export {default as SimpleConditional} from './simple-conditional';
 export {default as Suffix} from './suffix';
 export {default as TemplatingHint} from './templating-hint';

src/components/builder/rich-text.stories.ts

@@ -0,0 +1,31 @@
+import {Meta, StoryObj} from '@storybook/react';
+
+import {withFormik} from '@/sb-decorators';
+
+import RichText from './rich-text';
+
+export default {
+  title: 'Formio/Builder/RichText',
+  component: RichText,
+  decorators: [withFormik],
+  args: {
+    name: 'richText',
+    required: false,
+    supportsBackendTemplating: false,
+  },
+  parameters: {
+    controls: {hideNoControlsWarning: true},
+    modal: {noModal: true},
+    formik: {initialValues: {richText: ''}},
+  },
+} satisfies Meta<typeof RichText>;
+
+type Story = StoryObj<typeof RichText>;
+
+export const Default: Story = {};
+
+export const WithBackendTemplatingSupport: Story = {
+  args: {
+    supportsBackendTemplating: true,
+  },
+};

src/registry/content/rich-text.tsx → src/components/builder/rich-text.tsx

@@ -8,7 +8,8 @@
  */
 import {CKEditor} from '@ckeditor/ckeditor5-react';
 import ClassicEditor from '@open-formulieren/ckeditor5-build-classic';
-import {useField} from 'formik';
+import {AnyComponentSchema} from '@open-formulieren/types';
+import {useField, useFormikContext} from 'formik';
 import {useContext} from 'react';
 
 import {TemplatingHint} from '@/components/builder';
@@ -26,6 +27,7 @@ export type ColorOption = Required<
 export interface RichTextProps {
   name: string;
   required?: boolean;
+  supportsBackendTemplating?: boolean;
 }
 
 /**
@@ -35,11 +37,14 @@ export interface RichTextProps {
  * classic editor build, with some extra plugins enabled to match the features used/exposed
  * by Formio.js.
  */
-const RichText: React.FC<RichTextProps> = ({name, required}) => {
+const RichText: React.FC<RichTextProps> = ({name, required, supportsBackendTemplating = false}) => {
   const {richTextColors} = useContext(BuilderContext);
+  const {
+    values: {type},
+  } = useFormikContext<AnyComponentSchema>();
   const [props, , helpers] = useField<string>(name);
   return (
-    <Component type="content" field={name} required={required} className="offb-rich-text">
+    <Component type={type} field={name} required={required} className="offb-rich-text">
       <CKEditor
         editor={ClassicEditor}
         config={{
@@ -69,7 +74,7 @@ const RichText: React.FC<RichTextProps> = ({name, required}) => {
           helpers.setTouched(true);
         }}
       />
-      <Description text={<TemplatingHint />} />
+      {supportsBackendTemplating && <Description text={<TemplatingHint />} />}
     </Component>
   );
 };

src/context.ts

@@ -3,8 +3,8 @@ import React from 'react';
 
 import {PrefillAttributeOption, PrefillPluginOption} from '@/components/builder/prefill/types';
 import {RegistrationAttributeOption} from '@/components/builder/registration/registration-attribute';
+import type {ColorOption} from '@/components/builder/rich-text';
 import {ValidatorOption} from '@/components/builder/validate/validator-select';
-import type {ColorOption} from '@/registry/content/rich-text';
 import {AuthPluginOption} from '@/registry/cosignV1/edit';
 import {AnyComponentSchema} from '@/types';
 

src/registry/content/edit.tsx

@@ -10,14 +10,14 @@ import {
   Hidden,
   Key,
   PresentationConfig,
+  RichText,
   SimpleConditional,
 } from '@/components/builder';
 import {Select, Tab, TabList, TabPanel, Tabs} from '@/components/formio';
 import {BuilderContext} from '@/context';
 import {useErrorChecker} from '@/utils/errors';
 
 import {EditFormDefinition} from '../types';
-import RichText from './rich-text';
 
 /**
  * Form to configure a Formio 'content' type component.
@@ -191,7 +191,11 @@ const RichTextTranslations: React.FC = () => {
 
       {supportedLanguageCodes.map((code, index) => (
         <TabPanel key={code}>
-          <RichText name={`openForms.translations.${code}.html`} required={index === 0} />
+          <RichText
+            name={`openForms.translations.${code}.html`}
+            required={index === 0}
+            supportsBackendTemplating
+          />
         </TabPanel>
       ))}
     </Tabs>