feat(ui) Support rich text for form descriptions (datahub-project#10425)

sleeperdeep · Jun 25, 2024 · 42e4501 · 42e4501
1 parent ddfaeb0
commit 42e4501
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/datahub-web-react/src/app/entity/shared/entityForm/Form.tsx b/datahub-web-react/src/app/entity/shared/entityForm/Form.tsx
@@ -15,6 +15,7 @@ import FormRequestedBy from './FormSelectionModal/FormRequestedBy';
 import useHasComponentRendered from '../../../shared/useHasComponentRendered';
 import Loading from '../../../shared/Loading';
 import { DeferredRenderComponent } from '../../../shared/DeferredRenderComponent';
+import { Editor } from '../tabs/Documentation/components/editor/Editor';
 
 const TabWrapper = styled.div`
     background-color: ${ANTD_GRAY_V2[1]};
@@ -70,7 +71,9 @@ function Form({ formUrn }: Props) {
                     </RequestedByWrapper>
                 )}
                 {description ? (
-                    <SubTitle>{description}</SubTitle>
+                    <SubTitle>
+                        <Editor content={description} readOnly editorStyle="padding: 0;" />
+                    </SubTitle>
                 ) : (
                     <SubTitle>
                         Please fill out the following information for this {entityRegistry.getEntityName(entityType)} so

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/editor/Editor.tsx b/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/editor/Editor.tsx
@@ -42,10 +42,11 @@ type EditorProps = {
     doNotFocus?: boolean;
     dataTestId?: string;
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    editorStyle?: string;
 };
 
 export const Editor = forwardRef((props: EditorProps, ref) => {
-    const { content, readOnly, onChange, className, dataTestId, onKeyDown } = props;
+    const { content, readOnly, onChange, className, dataTestId, onKeyDown, editorStyle } = props;
     const { manager, state, getContext } = useRemirror({
         extensions: () => [
             new BlockquoteExtension(),
@@ -100,7 +101,7 @@ export const Editor = forwardRef((props: EditorProps, ref) => {
     }, [readOnly, content]);
 
     return (
-        <EditorContainer className={className} onKeyDown={onKeyDown} data-testid={dataTestId}>
+        <EditorContainer className={className} onKeyDown={onKeyDown} data-testid={dataTestId} editorStyle={editorStyle}>
             <ThemeProvider theme={EditorTheme}>
                 <Remirror classNames={['ant-typography']} editable={!readOnly} manager={manager} initialContent={state}>
                     {!readOnly && (

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/editor/EditorTheme.tsx b/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/editor/EditorTheme.tsx
@@ -47,7 +47,7 @@ export const EditorTheme: RemirrorThemeType = {
     },
 };
 
-export const EditorContainer = styled.div`
+export const EditorContainer = styled.div<{ editorStyle?: string }>`
     ${extensionBlockquoteStyledCss}
     ${extensionCalloutStyledCss}
     ${extensionCodeBlockStyledCss}
@@ -81,6 +81,7 @@ export const EditorContainer = styled.div`
         line-height: 1.5;
         white-space: pre-wrap;
         margin: 0;
+        ${props => props.editorStyle}
 
         a {
             font-weight: 500;