[Emotion] Convert EuiMarkdownEditor

src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1`] = `
 <div
-  class="euiMarkdownEditor testClass1 testClass2 emotion-euiTestCss"
+  class="euiMarkdownEditor testClass1 testClass2 emotion-euiMarkdownEditor-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
@@ -228,7 +228,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
 
 exports[`EuiMarkdownEditor is rendered 1`] = `
 <div
-  class="euiMarkdownEditor testClass1 testClass2 emotion-euiTestCss"
+  class="euiMarkdownEditor testClass1 testClass2 emotion-euiMarkdownEditor-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
@@ -474,7 +474,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
 
 exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] = `
 <div
-  class="euiMarkdownEditor testClass1 testClass2 emotion-euiTestCss"
+  class="euiMarkdownEditor testClass1 testClass2 emotion-euiMarkdownEditor-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
@@ -719,7 +719,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
 
 exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
 <div
-  class="euiMarkdownEditor euiMarkdownEditor--fullHeight testClass1 testClass2 emotion-euiTestCss"
+  class="euiMarkdownEditor testClass1 testClass2 emotion-euiMarkdownEditor-fullHeight-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
@@ -964,7 +964,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
 
 exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
 <div
-  class="euiMarkdownEditor testClass1 testClass2 emotion-euiTestCss"
+  class="euiMarkdownEditor testClass1 testClass2 emotion-euiMarkdownEditor-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
@@ -1209,7 +1209,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
 
 exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] = `
 <div
-  class="euiMarkdownEditor testClass1 testClass2 emotion-euiTestCss"
+  class="euiMarkdownEditor testClass1 testClass2 emotion-euiMarkdownEditor-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
@@ -1454,7 +1454,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
 
 exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
 <div
-  class="euiMarkdownEditor testClass1 testClass2 emotion-euiTestCss"
+  class="euiMarkdownEditor testClass1 testClass2 emotion-euiMarkdownEditor-euiTestCss"
   data-test-subj="test subject string"
 >
   <div

src/components/markdown_editor/_index.scss

@@ -1,5 +1,3 @@
 @import 'variables';
-@import 'markdown_editor';
 @import 'markdown_editor_drop_zone';
-@import 'markdown_editor_preview';
 @import 'markdown_editor_text_area';

src/components/markdown_editor/markdown_editor.styles.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../services';
+import {
+  logicalCSS,
+  logicalBorderRadiusCSS,
+  euiScrollBarStyles,
+} from '../../global_styling';
+
+export const euiMarkdownEditorVariables = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    minHeight: '150px',
+    borderRadius: euiTheme.border.radius.medium,
+  };
+};
+
+export const euiMarkdownEditorStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  const { minHeight, borderRadius } =
+    euiMarkdownEditorVariables(euiThemeContext);
+
+  return {
+    euiMarkdownEditor: css`
+      display: flex;
+      flex-direction: column;
+
+      .euiMarkdownEditorToolbar {
+        ${logicalBorderRadiusCSS(`${borderRadius} ${borderRadius} 0 0`, true)}
+      }
+
+      .euiMarkdownEditorPreview,
+      .euiMarkdownEditorFooter {
+        ${logicalBorderRadiusCSS(`0 0 ${borderRadius} ${borderRadius}`, true)}
+      }
+    `,
+    fullHeight: css`
+      ${logicalCSS('height', '100%')}
+
+      .euiMarkdownEditorTextArea {
+        resize: none;
+      }
+
+      .euiMarkdownEditorDropZone {
+        ${logicalCSS('height', '100%')}
+      }
+    `,
+    euiMarkdownEditorPreview: css`
+      ${logicalCSS('min-height', minHeight)}
+      ${logicalCSS('overflow-y', 'auto')}
+      ${euiScrollBarStyles(euiThemeContext)}
+      padding: ${euiTheme.size.m};
+      border: ${euiTheme.border.thin};
+      background-color: ${euiTheme.colors.emptyShade};
+    `,
+  };
+};

src/components/markdown_editor/markdown_editor.tsx

@@ -22,7 +22,11 @@ import unified, { PluggableList, Processor } from 'unified';
 import { VFileMessage } from 'vfile-message';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
 import { CommonProps, OneOf } from '../common';
+import { EuiModal } from '../modal';
+import { EuiResizeObserver } from '../observer/resize_observer';
+
 import MarkdownActions, { insertText } from './markdown_actions';
 import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import {
@@ -31,8 +35,6 @@ import {
 } from './markdown_editor_text_area';
 import { EuiMarkdownFormat, EuiMarkdownFormatProps } from './markdown_format';
 import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone';
-import { useGeneratedHtmlId } from '../../services';
-
 import { MARKDOWN_MODE, MODE_EDITING, MODE_VIEWING } from './markdown_modes';
 import {
   EuiMarkdownAstNode,
@@ -41,16 +43,13 @@ import {
   EuiMarkdownParseError,
   EuiMarkdownStringTagConfig,
 } from './markdown_types';
-
-import { EuiModal } from '../modal';
 import { ContextShape, EuiMarkdownContext } from './markdown_context';
 import {
   defaultParsingPlugins,
   defaultProcessingPlugins,
   defaultUiPlugins,
 } from './plugins/markdown_default_plugins';
-
-import { EuiResizeObserver } from '../observer/resize_observer';
+import { euiMarkdownEditorStyles } from './markdown_editor.styles';
 
 type CommonMarkdownEditorProps = Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -350,12 +349,15 @@ export const EuiMarkdownEditor = forwardRef<
     const [editorFooterHeight, setEditorFooterHeight] = useState(0);
     const [editorToolbarHeight, setEditorToolbarHeight] = useState(0);
 
+    const styles = useEuiMemoizedStyles(euiMarkdownEditorStyles);
+    const cssStyles = [
+      styles.euiMarkdownEditor,
+      height === 'full' && styles.fullHeight,
+    ];
+
     const classes = classNames(
       'euiMarkdownEditor',
-      { 'euiMarkdownEditor--fullHeight': height === 'full' },
-      {
-        'euiMarkdownEditor--isPreviewing': isPreviewing,
-      },
+      { 'euiMarkdownEditor-isPreviewing': isPreviewing },
       className
     );
 
@@ -421,7 +423,7 @@ export const EuiMarkdownEditor = forwardRef<
 
     return (
       <EuiMarkdownContext.Provider value={contextValue}>
-        <div className={classes} {...rest}>
+        <div className={classes} css={cssStyles} {...rest}>
           <EuiMarkdownEditorToolbar
             ref={editorToolbarRef}
             selectedNode={selectedNode}
@@ -437,6 +439,7 @@ export const EuiMarkdownEditor = forwardRef<
             <div
               ref={previewRef}
               className={classesPreview}
+              css={styles.euiMarkdownEditorPreview}
               style={{ height: previewHeight }}
             >
               <EuiMarkdownFormat
@@ -453,6 +456,7 @@ export const EuiMarkdownEditor = forwardRef<
             className="euiMarkdownEditor__toggleContainer"
             style={{
               height: editorToggleContainerHeight,
+              display: isPreviewing ? 'none' : undefined,
             }}
           >
             <EuiMarkdownEditorDropZone

src/themes/amsterdam/overrides/_markdown_editor.scss

@@ -1,7 +1,3 @@
-.euiMarkdownEditorToolbar {
-  border-radius: $euiFormControlBorderRadius $euiFormControlBorderRadius 0 0;
-}
-
 .euiMarkdownEditorTextArea {
   &:focus {
     outline: none;
@@ -11,8 +7,3 @@
     outline-style: none;
   }
 }
-
-.euiMarkdownEditorPreview,
-.euiMarkdownEditorFooter {
-  border-radius: 0 0 $euiFormControlBorderRadius $euiFormControlBorderRadius;
-}