feat: simple markdown component (#378)

* feat: simple markdown component

Signed-off-by: Philippe Martin <[email protected]>

* refactor: use svelte 5

Signed-off-by: Philippe Martin <[email protected]>

---------

Signed-off-by: Philippe Martin <[email protected]>

Author: feloy

packages/webview/package.json

@@ -49,6 +49,7 @@
     "@xterm/xterm": "^5.5.0",
     "humanize-duration": "^3.33.0",
     "jsdom": "^27.0.0",
+    "micromark": "^4.0.2",
     "monaco-editor": "^0.54.0",
     "prettier": "^3.6.1",
     "prettier-plugin-svelte": "^3.3.3",

packages/webview/src/markdown/Markdown.spec.ts

@@ -0,0 +1,44 @@
+/**********************************************************************
+ * Copyright (C) 2023-2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+
+import { render, screen } from '@testing-library/svelte';
+import { expect, test } from 'vitest';
+
+import Markdown from './Markdown.svelte';
+
+test('Expect to have bold', async () => {
+  const component = render(Markdown, { markdown: '**bold**' });
+  const markdownContent = screen.getByRole('region', { name: 'markdown-content' });
+  expect(markdownContent).toBeInTheDocument();
+  expect(markdownContent).toContainHTML('<strong>bold</strong>');
+
+  await component.rerender({ markdown: '**bold2**' });
+  expect(markdownContent).toContainHTML('<strong>bold2</strong>');
+});
+
+test('Expect to have italic', async () => {
+  const component = render(Markdown, { markdown: '_italic_' });
+  const markdownContent = screen.getByRole('region', { name: 'markdown-content' });
+  expect(markdownContent).toBeInTheDocument();
+  expect(markdownContent).toContainHTML('<em>italic</em>');
+
+  await component.rerender({ markdown: '_italic2_' });
+  expect(markdownContent).toContainHTML('<em>italic2</em>');
+});

packages/webview/src/markdown/Markdown.svelte

@@ -0,0 +1,86 @@
+<!-- The markdown rendered has it's own style that you'll have to customize / check against podman desktop
+UI guidelines -->
+<style lang="postcss">
+.markdown > :global(p) {
+  line-height: normal;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+}
+
+.markdown > :global(h1),
+:global(h2),
+:global(h3),
+:global(h4),
+:global(h5) {
+  font-size: revert;
+  line-height: normal;
+  font-weight: revert;
+  border-bottom: 1px solid #444;
+  margin-bottom: 20px;
+}
+
+.markdown > :global(ul) {
+  line-height: normal;
+  list-style: revert;
+  margin: revert;
+  padding: revert;
+}
+
+.markdown > :global(b),
+:global(strong) {
+  font-weight: 600;
+}
+.markdown > :global(blockquote) {
+  opacity: 0.8;
+  line-height: normal;
+}
+.markdown :global(a) {
+  color: var(--pd-link);
+  text-decoration: none;
+  border-radius: 4px;
+}
+.markdown :global(a):hover {
+  background-color: var(--pd-link-hover-bg);
+}
+</style>
+
+<script lang="ts">
+import { micromark } from 'micromark';
+import { onMount, type Snippet } from 'svelte';
+
+let text = $state('');
+let html = $state('');
+
+// Optional attribute to specify the markdown to use
+// the user can use: <Markdown>**bold</Markdown> or <Markdown markdown="**bold**" /> syntax
+interface Props {
+  markdown?: string;
+  children?: Snippet;
+}
+let { markdown = '', children }: Props = $props();
+
+// Render the markdown or the html+micromark markdown reactively
+$effect(() => {
+  markdown
+    ? // eslint-disable-next-line sonarjs/no-nested-assignment
+      (html = micromark(markdown))
+    : undefined;
+});
+
+onMount(() => {
+  if (markdown) {
+    text = markdown;
+  }
+  html = micromark(text);
+});
+</script>
+
+<!-- Placeholder to grab the content if people are using <Markdown>**bold</Markdown> -->
+<span contenteditable="false" bind:textContent={text} class="hidden">
+  {@render children?.()}
+</span>
+
+<section class="markdown" aria-label="markdown-content">
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html html}
+</section>