Merge pull request #806 from equinor/Turns-display-rich-text-into-a-c…

…ompound-component

Turns display rich text into a compound component

src/atoms/hooks/useAmplifyKit.ts

@@ -25,9 +25,26 @@ export const useAmplifyKit = ({
     () =>
       RichText.Kit.configure({
         placeholder: placeholder ? { placeholder } : undefined,
+        link: features?.includes(RichTextEditorFeatures.LINKS) ? {} : false,
+        table: features?.includes(RichTextEditorFeatures.TABLE) ? {} : false,
+        textAlign: features?.includes(RichTextEditorFeatures.ALIGNMENT)
+          ? {}
+          : false,
+        bulletList: features?.includes(RichTextEditorFeatures.LISTS)
+          ? {}
+          : false,
+        orderedList: features?.includes(RichTextEditorFeatures.LISTS)
+          ? {}
+          : false,
+        codeBlockLowlight: features?.includes(RichTextEditorFeatures.CODE)
+          ? {}
+          : false,
         image: features?.includes(RichTextEditorFeatures.IMAGES)
           ? { onImageUpload }
           : false,
+        heading: features?.includes(RichTextEditorFeatures.HEADERS)
+          ? {}
+          : false,
       }),
     [onImageUpload, placeholder, features]
   );

src/molecules/RichTextDisplay/RichTextDisplay.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 
+import { RichText } from 'src/molecules';
 import {
   RichTextDisplay,
   RichTextDisplayProps,
@@ -21,3 +22,21 @@ export default meta;
 export const Primary: StoryFn<RichTextDisplayProps> = (args) => {
   return <RichTextDisplay {...args} />;
 };
+
+export const CompoundComponents: StoryFn<RichTextDisplayProps> = (args) => {
+  return (
+    <RichText.Display {...args}>
+      {(editor) => {
+        console.log('editor', editor);
+        return (
+          <RichText.Styling
+            $lightBackground={args.lightBackground}
+            $padding={args.padding}
+          >
+            <RichText.Content editor={editor} readOnly />
+          </RichText.Styling>
+        );
+      }}
+    </RichText.Display>
+  );
+};

src/molecules/RichTextDisplay/RichTextDisplay.tsx

@@ -1,6 +1,6 @@
 import { FC, HTMLAttributes, useEffect, useRef } from 'react';
 
-import { useEditor } from '@tiptap/react';
+import { Editor, Extensions, useEditor } from '@tiptap/react';
 
 import { RichText } from 'src/molecules';
 
@@ -9,6 +9,8 @@ export interface RichTextDisplayProps {
   imgReadToken?: string;
   lightBackground?: boolean;
   padding?: 'sm' | 'md' | 'lg' | 'none';
+  extensions?: Extensions;
+  children?: (editor: Editor) => JSX.Element;
 }
 
 export const RichTextDisplay: FC<
@@ -18,10 +20,12 @@ export const RichTextDisplay: FC<
   imgReadToken,
   lightBackground = true,
   padding = 'md',
+  extensions = [RichText.Kit],
+  children,
   ...rest
 }) => {
   const editor = useEditor({
-    extensions: [RichText.Kit],
+    extensions: extensions,
     content: imgReadToken
       ? value?.replaceAll(/(<img src=")(.+)("\/>)/g, `$1$2?${imgReadToken}$3`)
       : value,
@@ -37,6 +41,10 @@ export const RichTextDisplay: FC<
     }
   }, [editor, value]);
 
+  /* c8 ignore next */
+  if (!editor) return null;
+  /* c8 ignore next */
+  if (children) return children(editor);
   return (
     <RichText.Styling
       $lightBackground={lightBackground}

src/molecules/RichTextEditor/EditorProvider.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 
 import { Editor, Extensions, useEditor } from '@tiptap/react';
 
@@ -40,6 +40,18 @@ export const EditorProvider: FC<EditorProviderProps> = ({
     onUpdate: ({ editor }) => onUpdate?.(editor.getHTML()),
   });
 
+  /* c8 ignore start */
+  useEffect(() => {
+    // This makes Tiptap react to its prop changing from the outside
+    // Usefull if for instance the content is fetched from an API.
+    // This way the editor will update when the content changes
+    if (!editor) return;
+    if (content === editor.getHTML()) return;
+    editor.commands.setContent(content || '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [content]);
+  /* c8 ignore stop */
+
   /* c8 ignore next */
   if (!editor) return null;
   return children(editor);

src/molecules/RichTextEditor/index.ts

@@ -2,13 +2,15 @@ import { AmplifyKit } from './custom-extensions/AmplifyKit';
 import { AmplifyBar } from './MenuBar/MenuBar';
 import { EditorProvider } from './EditorProvider';
 import { EditorContent, EditorStyling } from './RichTextEditor.styles';
+import { RichTextDisplay } from 'src/molecules/RichTextDisplay/RichTextDisplay';
 
 export { RichTextEditor } from './RichTextEditor';
 
 export const RichText = {
   Styling: EditorStyling,
   Provider: EditorProvider,
   Content: EditorContent,
+  Display: RichTextDisplay,
   Bar: AmplifyBar,
   Kit: AmplifyKit,
 };