[Markdown] Replace custom css styles and native html with OUI. (#4390) (#4607)

* replace custom styling

Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz>

* update CHANGELOG

Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz>

* Update CHANGELOG.md

Co-authored-by: Miki <amoo_miki@yahoo.com>
Signed-off-by: Josh Romero <rmerqg@amazon.com>

---------

Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz>
Signed-off-by: Josh Romero <rmerqg@amazon.com>
Co-authored-by: Josh Romero <rmerqg@amazon.com>
Co-authored-by: Miki <amoo_miki@yahoo.com>
(cherry picked from commit adb538e)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: opensearch-trigger-bot[bot]

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