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

CHANGELOG.md

@@ -64,6 +64,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Vis Colors] [Maps] Replace hardcoded color to OUI color in `maps_legacy` plugin ([#4294](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4294))
 - [Vis Colors] [TSVB] Update default color in `vis_type_timeseries` to use `ouiPaletteColorBlind()[0]`([#4363](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4363))
 - [Vis Colors] [Timeline] Replace `vis_type_timeline` colors with `ouiPaletteColorBlind()` ([#4366](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4366))
+- [Markdown] Replace custom css styles and native html with OUI ([#4390](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4390))
 
 ### 🔩 Tests
 

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>
   );
 };