fix: ui.markdown was styling code incorrectly (deephaven#1106)

- Use the markdown-editor-container styling so it appears the same as a
markdown control
- Removing the unnecessary padding which we don't want as part of
deephaven.ui
- Add e2e tests

plugins/ui/src/js/src/elements/Markdown.tsx

@@ -11,7 +11,16 @@ type MarkdownProps = Omit<ViewProps, 'children'> & {
 };
 
 const renderMarkdown: CodeComponent = props => {
-  const { children, className } = props;
+  const { children, className, inline } = props;
+  if (inline === true) {
+    return (
+      <code>
+        {React.Children.map(children, child =>
+          typeof child === 'string' ? child.trim() : child
+        )}
+      </code>
+    );
+  }
   const language =
     className !== undefined && className?.startsWith('language-')
       ? className.substring(9)
@@ -32,7 +41,7 @@ const renderMarkdown: CodeComponent = props => {
 export function Markdown({ children, ...props }: MarkdownProps): JSX.Element {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <View {...props}>
+    <View {...props} UNSAFE_className="ui-markdown markdown-editor-container">
       <ReactMarkdown
         components={{ code: renderMarkdown }}
         remarkPlugins={[remarkMath]}

plugins/ui/src/js/src/styles.scss

@@ -98,3 +98,7 @@
     width: fit-content;
   }
 }
+
+.ui-markdown {
+  padding: 0;
+}

tests/app.d/tests.app

@@ -10,4 +10,5 @@ file_3=ui_render_all.py
 file_4=ui_flex.py
 file_5=ui_table.py
 file_6=ui_panel_loading.py
-file_7=ui_dialog.py
+file_7=ui_dialog.py
+file_8=ui_markdown_code.py

tests/app.d/ui_markdown_code.py

@@ -0,0 +1,13 @@
+from deephaven import ui
+
+
+markdown_code = ui.markdown(
+    """
+This code block `print("Hello world")` should be in-line.
+
+Here's a multi-line code block:
+```
+print("Hello there")
+```
+"""
+)

tests/ui.spec.ts

@@ -80,6 +80,12 @@ test('UI all components render 3', async ({ page }) => {
   await expect(page.locator(SELECTORS.REACT_PANEL_VISIBLE)).toHaveScreenshot();
 });
 
+test('UI markdown renders code correctly', async ({ page }) => {
+  await gotoPage(page, '');
+  await openPanel(page, 'markdown_code', SELECTORS.REACT_PANEL_VISIBLE);
+  await expect(page.locator(SELECTORS.REACT_PANEL_VISIBLE)).toHaveScreenshot();
+});
+
 // Tests flex components render as expected
 test.describe('UI flex components', () => {
   [