diff --git a/src/atoms/hooks/useAmplifyKit.ts b/src/atoms/hooks/useAmplifyKit.ts index 5d60148c8..6eda832c9 100644 --- a/src/atoms/hooks/useAmplifyKit.ts +++ b/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] ); diff --git a/src/molecules/RichTextDisplay/RichTextDisplay.stories.tsx b/src/molecules/RichTextDisplay/RichTextDisplay.stories.tsx index bcb821563..c5e187044 100644 --- a/src/molecules/RichTextDisplay/RichTextDisplay.stories.tsx +++ b/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 = (args) => { return ; }; + +export const CompoundComponents: StoryFn = (args) => { + return ( + + {(editor) => { + console.log('editor', editor); + return ( + + + + ); + }} + + ); +}; diff --git a/src/molecules/RichTextDisplay/RichTextDisplay.tsx b/src/molecules/RichTextDisplay/RichTextDisplay.tsx index 52db58b5b..8245d3a13 100644 --- a/src/molecules/RichTextDisplay/RichTextDisplay.tsx +++ b/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(/()/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 ( = ({ 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); diff --git a/src/molecules/RichTextEditor/index.ts b/src/molecules/RichTextEditor/index.ts index fffcd582a..e02fc56ab 100644 --- a/src/molecules/RichTextEditor/index.ts +++ b/src/molecules/RichTextEditor/index.ts @@ -2,6 +2,7 @@ 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'; @@ -9,6 +10,7 @@ export const RichText = { Styling: EditorStyling, Provider: EditorProvider, Content: EditorContent, + Display: RichTextDisplay, Bar: AmplifyBar, Kit: AmplifyKit, };