[Markdown] Replace custom css styles and native html with OUI.

CHANGELOG.md

@@ -81,6 +81,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Migrate from legacy elasticsearch client to opensearch-js client in `osd-opensearch-archiver` package([#4142](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4142))
 - Replace the use of `bluebird` in `saved_objects` plugin ([#4026](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4026))
 - Relocate tutorials imagery into `src/plugins/home/public/assets/tutorials/logos` ([#4382](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4382))
+- [Markdown] Replace custom CSS styles and HTML markup with OUI components ([#4390](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4390))
 - [VisBuilder] Use OUI icon ([#4446](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4446))
 - [Vis Colors] [VisLib] Update legend colors to use OUI color palette ([#4365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4365))
 - [Vis Colors] [Region Maps] Replace hardcode color to OUI color in `region_map` plugin ([#4299](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4299))

src/plugins/vis_type_markdown/public/markdown_options.tsx

@@ -52,7 +52,7 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
 
   return (
     <EuiPanel paddingSize="s">
-      <EuiFlexGroup direction="column" gutterSize="m" className="mkdEditor">
+      <EuiFlexGroup direction="column" gutterSize="m" className="eui-fullHeight">
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="baseline">
             <EuiFlexItem grow={false}>
@@ -83,7 +83,7 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
         <EuiFlexItem>
           <EuiTextArea
             id="markdownVisInput"
-            className="visEditor--markdown__textarea"
+            className="eui-fullHeight"
             value={stateParams.markdown}
             onChange={({ target: { value } }) => onMarkdownUpdate(value)}
             fullWidth={true}

src/plugins/vis_type_markdown/public/markdown_vis.scss

@@ -5,18 +5,8 @@
 //   mkdChart__legend--small
 //   mkdChart__legend-isLoading
 
-.mkdVis {
-  padding: $euiSizeS;
-  width: 100%;
-}
-
 .visEditor--markdown {
-  .visEditorSidebar__config > *,
-  .visEditor--markdown__textarea {
+  .visEditorSidebar__config > * {
     flex-grow: 1;
   }
-
-  .mkdEditor {
-    height: 100%;
-  }
 }

src/plugins/vis_type_markdown/public/markdown_vis_controller.tsx

@@ -29,6 +29,7 @@
  */
 
 import React, { useEffect } from 'react';
+import { EuiPanel } from '@elastic/eui';
 import { Markdown } from '../../opensearch_dashboards_react/public';
 import { MarkdownVisParams } from './types';
 
@@ -47,13 +48,18 @@ const MarkdownVisComponent = ({
   useEffect(renderComplete); // renderComplete will be called after each render to signal, that we are done with rendering.
 
   return (
-    <div className="mkdVis" style={{ fontSize: `${fontSize}pt` }}>
+    <EuiPanel
+      style={{ fontSize: `${fontSize}pt` }}
+      hasBorder={false}
+      hasShadow={false}
+      paddingSize="s"
+    >
       <Markdown
         data-test-subj="markdownBody"
         markdown={markdown}
         openLinksInNewTab={openLinksInNewTab}
       />
-    </div>
+    </EuiPanel>
   );
 };