Docs-Viewer/src/widgets/slate-rich-text.umc

--- html ---

--- style ---
self {
  display: block; /* umc-layout-ok, prose leaf */
  box-sizing: border-box;
  width: 100%; /* umc-layout-ok */
  color: inherit;
  font: inherit;
  font-size: 1rem;
  line-height: 1.7;
  min-width: 0;
}

self[kind="h1"] {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1.5rem; /* umc-layout-ok, OG .markdown-content h1 */
  cursor: pointer;
}

self[kind="h2"] {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0; /* umc-layout-ok — slate-collapse supplies section rhythm */
  cursor: pointer;
  flex: 1 1 auto; /* umc-layout-ok */
  min-width: 0; /* umc-layout-ok */
}

self[kind="h3"] {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0; /* umc-layout-ok */
  cursor: pointer;
  flex: 1 1 auto; /* umc-layout-ok */
  min-width: 0; /* umc-layout-ok */
}

self[kind="h4"],
self[kind="h5"],
self[kind="h6"] {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.25em 0 0.4em; /* umc-layout-ok */
  cursor: pointer;
}

self[kind="paragraph"] {
  font-size: 1rem;
  line-height: 1.7;
  margin: 1rem 0; /* umc-layout-ok, OG p */
}

self[kind="list"],
self[kind="table"],
self[kind="html"],
self[kind="code"] {
  margin: 1rem 0; /* umc-layout-ok */
}

self[kind="code"] {
  margin: 0;
}

self a {
  color: var(--accent, #2196f3);
  text-decoration: none;
}

self a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

self code {
  font-family: var(--slate-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.9em;
  padding: 0.2em 0.4em; /* umc-layout-ok */
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

self pre {
  display: block; /* umc-layout-ok */
  margin: 0;
  font-family: var(--slate-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto; /* umc-layout-ok */
  background: transparent;
  border: none;
  padding: 0; /* umc-layout-ok — chrome lives on .md-code-block */
}

self pre code,
self pre code.hljs,
self code.hljs {
  display: block; /* umc-layout-ok */
  padding: 0; /* umc-layout-ok */
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: inherit;
  white-space: inherit;
}

self img,
self video {
  max-width: 100%; /* umc-layout-ok */
  height: auto; /* umc-layout-ok */
  border-radius: 8px;
  display: block; /* umc-layout-ok */
  margin: 1rem 0; /* umc-layout-ok */
}

self ul,
self ol {
  margin: 1rem 0; /* umc-layout-ok */
  padding-left: 1.35em; /* umc-layout-ok */
}

self li {
  margin: 0.35em 0; /* umc-layout-ok */
}

self table {
  width: 100%; /* umc-layout-ok */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  margin: 1em 0; /* umc-layout-ok */
}

self th,
self td {
  border: none;
  border-bottom: 1px solid var(--line, #404040);
  padding: 0.75rem; /* umc-layout-ok */
  text-align: left;
}

self th {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.15);
}

self td {
  background: rgba(255, 255, 255, 0.03);
}

--- script ---
import { decorateHtml } from "../markdown/decorate.js";

/**
 * Inline / HTML island leaf for markdown.
 *
 *   <slate-rich-text kind="paragraph" html="Hello <strong>world</strong>"></slate-rich-text>
 *
 * Attrs: html, kind (h1…h6 | paragraph | list | table | code | html)
 */
export default defineUmc({
  tag: "slate-rich-text",
  attrs: {
    html: "",
    kind: "paragraph",
  },

  SynchronizeProperties(el) {
    const next = decorateHtml(el.getAttribute("html") || "");
    if (el.__richHtml === next) return;
    el.__richHtml = next;
    el.innerHTML = next;
  },
});

--- preview ---
<verticalbox gap="8" padding="16" width="420">
  <slate-rich-text kind="h2" html="Heading with <code>code</code>"></slate-rich-text>
  <slate-rich-text
    kind="paragraph"
    html='Body with <strong>bold</strong>, <em>italic</em>, and a <a href="?welcome" data-internal="true">wiki link</a>.'
  ></slate-rich-text>
</verticalbox>