@mp-lb/mdkit 0.0.1-main.3.1 → 0.1.0-main.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/document/MdKitConflictPanel.js +4 -4
  2. package/dist/document/MdKitDocumentToolbar.js +3 -3
  3. package/dist/markdown/MarkdownBubbleMenu.d.ts +1 -1
  4. package/dist/markdown/MarkdownBubbleMenu.js +58 -8
  5. package/dist/markdown/MdKitEditor.js +1 -1
  6. package/dist/markdown/TiptapMarkdownSurface.js +5 -5
  7. package/dist/theme/MdKitThemeEditor.js +1 -1
  8. package/dist/theme/editorTheme.d.ts +1 -1
  9. package/dist/theme/editorTheme.js +15 -15
  10. package/dist/versioning/VersionHistoryPanel.js +2 -2
  11. package/docs/api.md +1 -1
  12. package/docs/shadcn.md +1 -1
  13. package/docs/styling.md +190 -71
  14. package/package.json +6 -2
  15. package/src/styles.css +271 -258
  16. package/dist/core/documentEngine.test.d.ts +0 -1
  17. package/dist/core/documentEngine.test.js +0 -119
  18. package/dist/document/useMdKitDocument.test.d.ts +0 -1
  19. package/dist/document/useMdKitDocument.test.js +0 -151
  20. package/dist/markdown/MdKitEditor.test.d.ts +0 -1
  21. package/dist/markdown/MdKitEditor.test.js +0 -126
  22. package/dist/markdown/normalizeMarkdownSerialization.test.d.ts +0 -1
  23. package/dist/markdown/normalizeMarkdownSerialization.test.js +0 -16
  24. package/dist/markdown/prepareMarkdownForEditorHydration.test.d.ts +0 -1
  25. package/dist/markdown/prepareMarkdownForEditorHydration.test.js +0 -13
  26. package/dist/markdown/preserveMarkdownWhitespace.test.d.ts +0 -1
  27. package/dist/markdown/preserveMarkdownWhitespace.test.js +0 -25
  28. package/dist/test/setup.d.ts +0 -1
  29. package/dist/test/setup.js +0 -13
  30. package/dist/versioning/useMdKitDocumentVersions.test.d.ts +0 -1
  31. package/dist/versioning/useMdKitDocumentVersions.test.js +0 -41
  32. package/docs/.vitepress/dist/404.html +0 -22
  33. package/docs/.vitepress/dist/api.html +0 -120
  34. package/docs/.vitepress/dist/architecture.html +0 -25
  35. package/docs/.vitepress/dist/assets/api.md.asncK3PQ.js +0 -96
  36. package/docs/.vitepress/dist/assets/api.md.asncK3PQ.lean.js +0 -1
  37. package/docs/.vitepress/dist/assets/app.BQvrHyG0.js +0 -1
  38. package/docs/.vitepress/dist/assets/architecture.md.BHQLarmZ.js +0 -1
  39. package/docs/.vitepress/dist/assets/architecture.md.BHQLarmZ.lean.js +0 -1
  40. package/docs/.vitepress/dist/assets/chunks/framework.RRduUuAx.js +0 -19
  41. package/docs/.vitepress/dist/assets/chunks/theme.CkCo6Nk1.js +0 -1
  42. package/docs/.vitepress/dist/assets/index.md.CITl-897.js +0 -137
  43. package/docs/.vitepress/dist/assets/index.md.CITl-897.lean.js +0 -1
  44. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  45. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  46. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  47. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  48. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  49. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  50. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  51. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  52. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  53. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  54. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  55. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  56. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  57. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  58. package/docs/.vitepress/dist/assets/shadcn.md.C3idOo2N.js +0 -57
  59. package/docs/.vitepress/dist/assets/shadcn.md.C3idOo2N.lean.js +0 -1
  60. package/docs/.vitepress/dist/assets/style.BtrGaL3i.css +0 -1
  61. package/docs/.vitepress/dist/assets/styling.md.B2C6kVFa.js +0 -91
  62. package/docs/.vitepress/dist/assets/styling.md.B2C6kVFa.lean.js +0 -1
  63. package/docs/.vitepress/dist/hashmap.json +0 -1
  64. package/docs/.vitepress/dist/index.html +0 -161
  65. package/docs/.vitepress/dist/shadcn.html +0 -81
  66. package/docs/.vitepress/dist/styling.html +0 -115
  67. package/docs/.vitepress/dist/vp-icons.css +0 -1
package/docs/.vitepress/dist/styling.html DELETED
@@ -1,115 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-US" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Styling | Markdown Editor Kit</title>
7
- <meta name="description" content="Docs for the mdkit markdown editor package">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/assets/style.BtrGaL3i.css" as="style">
10
- <link rel="preload stylesheet" href="/vp-icons.css" as="style">
11
-
12
- <script type="module" src="/assets/app.BQvrHyG0.js"></script>
13
- <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14
- <link rel="modulepreload" href="/assets/chunks/theme.CkCo6Nk1.js">
15
- <link rel="modulepreload" href="/assets/chunks/framework.RRduUuAx.js">
16
- <link rel="modulepreload" href="/assets/styling.md.B2C6kVFa.lean.js">
17
- <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
18
- <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
- </head>
20
- <body>
21
- <div id="app"><div class="Layout" data-v-2b1fb0c9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-db89ae83></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-db89ae83>Skip to content</a><!--]--><!----><header class="VPNav" data-v-2b1fb0c9 data-v-acb86623><div class="VPNavBar" data-v-acb86623 data-v-77efa7eb><div class="wrapper" data-v-77efa7eb><div class="container" data-v-77efa7eb><div class="title" data-v-77efa7eb><div class="VPNavBarTitle has-sidebar" data-v-77efa7eb data-v-8a08158e><a class="title" href="/" data-v-8a08158e><!--[--><!--]--><!----><span data-v-8a08158e>Markdown Editor Kit</span><!--[--><!--]--></a></div></div><div class="content" data-v-77efa7eb><div class="content-body" data-v-77efa7eb><!--[--><!--]--><div class="VPNavBarSearch search" data-v-77efa7eb><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-77efa7eb data-v-5412324d><span id="main-nav-aria-label" class="visually-hidden" data-v-5412324d> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-5412324d data-v-8ef452a0><!--[--><span data-v-8ef452a0>Quick Start</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/styling" tabindex="0" data-v-5412324d data-v-8ef452a0><!--[--><span data-v-8ef452a0>Styling</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/shadcn" tabindex="0" data-v-5412324d data-v-8ef452a0><!--[--><span data-v-8ef452a0>Shadcn</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/api" tabindex="0" data-v-5412324d data-v-8ef452a0><!--[--><span data-v-8ef452a0>API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/architecture" tabindex="0" data-v-5412324d data-v-8ef452a0><!--[--><span data-v-8ef452a0>Architecture</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-77efa7eb data-v-a01193e5><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-a01193e5 data-v-4329f1c4 data-v-b8a6dba1><span class="check" data-v-b8a6dba1><span class="icon" data-v-b8a6dba1><!--[--><span class="vpi-sun sun" data-v-4329f1c4></span><span class="vpi-moon moon" data-v-4329f1c4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-77efa7eb data-v-75a0fea7 data-v-01120ffe><!--[--><a class="VPSocialLink no-icon" href="https://github.com/mp-lb/mdkit" aria-label="github" target="_blank" rel="noopener" data-v-01120ffe data-v-5a6aee0b><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-77efa7eb data-v-c5dd4def data-v-a3183fa5><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-a3183fa5><span class="vpi-more-horizontal icon" data-v-a3183fa5></span></button><div class="menu" data-v-a3183fa5><div class="VPMenu" data-v-a3183fa5 data-v-dbe48bad><!----><!--[--><!--[--><!----><div class="group" data-v-c5dd4def><div class="item appearance" data-v-c5dd4def><p class="label" data-v-c5dd4def>Appearance</p><div class="appearance-action" data-v-c5dd4def><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-c5dd4def data-v-4329f1c4 data-v-b8a6dba1><span class="check" data-v-b8a6dba1><span class="icon" data-v-b8a6dba1><!--[--><span class="vpi-sun sun" data-v-4329f1c4></span><span class="vpi-moon moon" data-v-4329f1c4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-c5dd4def><div class="item social-links" data-v-c5dd4def><div class="VPSocialLinks social-links-list" data-v-c5dd4def data-v-01120ffe><!--[--><a class="VPSocialLink no-icon" href="https://github.com/mp-lb/mdkit" aria-label="github" target="_blank" rel="noopener" data-v-01120ffe data-v-5a6aee0b><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-77efa7eb data-v-da8b7b90><span class="container" data-v-da8b7b90><span class="top" data-v-da8b7b90></span><span class="middle" data-v-da8b7b90></span><span class="bottom" data-v-da8b7b90></span></span></button></div></div></div></div><div class="divider" data-v-77efa7eb><div class="divider-line" data-v-77efa7eb></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-2b1fb0c9 data-v-f4bea7e4><div class="container" data-v-f4bea7e4><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f4bea7e4><span class="vpi-align-left menu-icon" data-v-f4bea7e4></span><span class="menu-text" data-v-f4bea7e4>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-f4bea7e4 data-v-15ddd090><button data-v-15ddd090>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-2b1fb0c9 data-v-e9f01ae8><div class="curtain" data-v-e9f01ae8></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-e9f01ae8><span class="visually-hidden" id="sidebar-aria-label" data-v-e9f01ae8> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-228ebfa9><section class="VPSidebarItem level-0 has-active" data-v-228ebfa9 data-v-be8e87ce><div class="item" role="button" tabindex="0" data-v-be8e87ce><div class="indicator" data-v-be8e87ce></div><h2 class="text" data-v-be8e87ce>Guide</h2><!----></div><div class="items" data-v-be8e87ce><!--[--><div class="VPSidebarItem level-1 is-link" data-v-be8e87ce data-v-be8e87ce><div class="item" data-v-be8e87ce><div class="indicator" data-v-be8e87ce></div><a class="VPLink link link" href="/" data-v-be8e87ce><!--[--><p class="text" data-v-be8e87ce>Quick Start</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-be8e87ce data-v-be8e87ce><div class="item" data-v-be8e87ce><div class="indicator" data-v-be8e87ce></div><a class="VPLink link link" href="/styling" data-v-be8e87ce><!--[--><p class="text" data-v-be8e87ce>Styling</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-be8e87ce data-v-be8e87ce><div class="item" data-v-be8e87ce><div class="indicator" data-v-be8e87ce></div><a class="VPLink link link" href="/shadcn" data-v-be8e87ce><!--[--><p class="text" data-v-be8e87ce>Shadcn Plugin</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-be8e87ce data-v-be8e87ce><div class="item" data-v-be8e87ce><div class="indicator" data-v-be8e87ce></div><a class="VPLink link link" href="/api" data-v-be8e87ce><!--[--><p class="text" data-v-be8e87ce>API Reference</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-be8e87ce data-v-be8e87ce><div class="item" data-v-be8e87ce><div class="indicator" data-v-be8e87ce></div><a class="VPLink link link" href="/architecture" data-v-be8e87ce><!--[--><p class="text" data-v-be8e87ce>Architecture</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-2b1fb0c9 data-v-6a1b1c35><div class="VPDoc has-sidebar has-aside" data-v-6a1b1c35 data-v-311cca79><!--[--><!--]--><div class="container" data-v-311cca79><div class="aside" data-v-311cca79><div class="aside-curtain" data-v-311cca79></div><div class="aside-container" data-v-311cca79><div class="aside-content" data-v-311cca79><div class="VPDocAside" data-v-311cca79 data-v-2fa565e8><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-2fa565e8 data-v-8080a522><div class="content" data-v-8080a522><div class="outline-marker" data-v-8080a522></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-8080a522>On this page</div><ul class="VPDocOutlineItem root" data-v-8080a522 data-v-44b0cffc><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-2fa565e8></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-311cca79><div class="content-container" data-v-311cca79><!--[--><!--]--><main class="main" data-v-311cca79><div style="position:relative;" class="vp-doc _styling" data-v-311cca79><div><h1 id="styling" tabindex="-1">Styling <a class="header-anchor" href="#styling" aria-label="Permalink to &quot;Styling&quot;">​</a></h1><p><code>MdKitEditor</code> can render without package CSS, but most applications should import the stylesheet once. It gives the editor a reset-resistant markdown baseline and exposes CSS variables for theme changes.</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@mp-lb/mdkit/styles.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>Without this stylesheet, the editor still works, but headings, lists, blockquotes, code blocks, spacing, and focus areas are left to your app&#39;s CSS.</p><h2 id="css-resets" tabindex="-1">CSS Resets <a class="header-anchor" href="#css-resets" aria-label="Permalink to &quot;CSS Resets&quot;">​</a></h2><p>Many app frameworks include CSS resets. Tailwind Preflight, for example, removes default margins and list styling. The package stylesheet restores markdown editor defaults under <code>.mdkit-markdown-editor</code>, including:</p><ul><li>heading sizes and spacing</li><li>paragraph spacing</li><li>unordered and ordered list markers</li><li>compact list item spacing</li><li>inline code and code block styling</li><li>blockquote styling</li><li>link color</li><li>full-width editor layout</li></ul><p>Import the stylesheet after global reset styles when possible:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;./app.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
22
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@mp-lb/mdkit/styles.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>If your bundler or framework controls CSS order differently, make sure the mdkit stylesheet is not overridden by a later broad reset such as <code>ul { list-style: none; }</code>.</p><h2 id="default-styling" tabindex="-1">Default Styling <a class="header-anchor" href="#default-styling" aria-label="Permalink to &quot;Default Styling&quot;">​</a></h2><p>The simplest setup is:</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MdKitEditor } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@mp-lb/mdkit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
23
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@mp-lb/mdkit/styles.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
24
- <span class="line"></span>
25
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">markdown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">setMarkdown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
26
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{markdown} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{setMarkdown} /&gt;;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>The editor fills the available width by default. Use <code>fillHeight</code> only when you want the editor to fill its parent&#39;s height, own its scroll area, and make the empty area below the last line clickable.</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fillHeight</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{markdown} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{setMarkdown} /&gt;</span></span></code></pre></div><h2 id="custom-styling" tabindex="-1">Custom Styling <a class="header-anchor" href="#custom-styling" aria-label="Permalink to &quot;Custom Styling&quot;">​</a></h2><p>The package stylesheet is intentionally controlled through CSS variables. You can override them with a class:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.my-markdown-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
28
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ffffff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
29
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#172033</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
30
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-muted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#eef1f4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
31
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-muted-foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#5b6472</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
32
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#d8dee8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
33
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-link</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#4f46e5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
34
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-font-family</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: Inter, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">system-ui</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">sans-serif</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
35
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">16</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
36
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
37
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-surface-padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
38
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-block-gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.75</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
39
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-list-item-gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.125</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
40
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-code-background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#eef1f4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
41
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-code-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.35</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
42
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-code-block-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.75</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
43
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span></span>
44
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;my-markdown-editor&quot;</span></span>
45
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{markdown}</span></span>
46
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{setMarkdown}</span></span>
47
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><p>You can also pass variables through <code>style</code> when the values are generated at runtime:</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span></span>
48
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
49
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;--hsk-font-family&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ui-serif, Georgia, serif&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
50
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;--hsk-font-size&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;18px&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
51
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;--hsk-line-height&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1.8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
52
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
53
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{markdown}</span></span>
54
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{setMarkdown}</span></span>
55
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><p>See <a href="./api#mdkiteditorprops"><code>MdKitEditorProps</code></a> for the full component props.</p><h2 id="component-styling" tabindex="-1">Component Styling <a class="header-anchor" href="#component-styling" aria-label="Permalink to &quot;Component Styling&quot;">​</a></h2><p>Editor styling and workflow component styling are separate.</p><p><code>MdKitEditor</code> is styled through CSS variables on <code>.mdkit-markdown-editor</code>. Workflow panels such as <code>MdKitDocumentToolbar</code>, <code>MdKitConflictPanel</code>, and <code>VersionHistoryPanel</code> are intentionally design-system agnostic. They render raw semantic markup with stable <code>mdkit-*</code> class names. Without this stylesheet they are plain HTML; with this stylesheet they get generic fallback styling: square corners, one-pixel borders, clear spacing, and basic buttons.</p><p>Style them in your app when you want them to match your product:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.mdkit-document-toolbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
56
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
57
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
58
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
59
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-bottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
60
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
61
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
62
- <span class="line"></span>
63
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.mdkit-document-toolbar-status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
64
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.mdkit-document-toolbar-actions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
65
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.mdkit-document-toolbar-conflict</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
66
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
67
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
68
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
69
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
70
- <span class="line"></span>
71
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.mdkit-document-toolbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data-conflict</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] {</span></span>
72
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#991b1b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
73
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>The toolbar class hooks are:</p><ul><li><code>.mdkit-document-toolbar</code></li><li><code>.mdkit-document-toolbar-status</code></li><li><code>.mdkit-document-toolbar-actions</code></li><li><code>.mdkit-document-toolbar-error</code></li><li><code>.mdkit-document-toolbar-conflict</code></li></ul><p>It also exposes <code>data-conflict</code>, <code>data-dirty</code>, and <code>data-save-status</code> attributes for state-based styling.</p><p>Version history and conflict panels use the same fallback panel CSS and expose:</p><ul><li><code>.mdkit-version-history-panel</code></li><li><code>.mdkit-version-history-header</code></li><li><code>.mdkit-version-history-list</code></li><li><code>.mdkit-version-history-item</code></li><li><code>.mdkit-version-history-preview</code></li><li><code>.mdkit-conflict-panel</code></li><li><code>.mdkit-conflict-panel-content</code></li><li><code>.mdkit-conflict-panel-action-row</code></li><li><code>.mdkit-panel-primary-action</code></li><li><code>.mdkit-panel-secondary-action</code></li></ul><h2 id="theme-helpers" tabindex="-1">Theme Helpers <a class="header-anchor" href="#theme-helpers" aria-label="Permalink to &quot;Theme Helpers&quot;">​</a></h2><p>For app code, CSS variables are usually the simplest integration. The package also exports theme helpers when you want to store or generate a theme object:</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
74
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitEditor,</span></span>
75
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createMdKitEditorThemeStyle,</span></span>
76
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMdKitEditorTheme,</span></span>
77
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;@mp-lb/mdkit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
78
- <span class="line"></span>
79
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitEditorThemeStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
80
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">darkMdKitEditorTheme,</span></span>
81
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fontFamily: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Inter, system-ui, sans-serif&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
82
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> lineHeight: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1.75&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
83
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
84
- <span class="line"></span>
85
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{style} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{markdown} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{setMarkdown} /&gt;;</span></span></code></pre></div><p>Related exports are listed in the <a href="./api#styling">API reference</a>.</p><h2 id="dark-mode" tabindex="-1">Dark Mode <a class="header-anchor" href="#dark-mode" aria-label="Permalink to &quot;Dark Mode&quot;">​</a></h2><p>For class-based dark mode, scope variable overrides to your dark selector:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.my-markdown-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
86
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ffffff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
87
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#172033</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
88
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-muted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#eef1f4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
89
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-muted-foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#5b6472</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
90
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#d8dee8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
91
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-link</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#4f46e5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
92
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-code-background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#eef1f4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
93
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
94
- <span class="line"></span>
95
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.dark</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .my-markdown-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
96
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#0b1220</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
97
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#e5edf7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
98
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-muted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#172033</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
99
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-muted-foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#94a3b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
100
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#314158</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
101
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-link</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#38bdf8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
102
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --hsk-code-background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#111827</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
103
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Then apply the class normally:</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span></span>
104
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;my-markdown-editor&quot;</span></span>
105
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{markdown}</span></span>
106
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{setMarkdown}</span></span>
107
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><p>You can also switch theme objects in React:</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitEditorThemeStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
108
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> isDark </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMdKitEditorTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> defaultMdKitEditorTheme,</span></span>
109
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
110
- <span class="line"></span>
111
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{style} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{markdown} </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{setMarkdown} /&gt;;</span></span></code></pre></div><h2 id="what-not-to-customize-first" tabindex="-1">What Not To Customize First <a class="header-anchor" href="#what-not-to-customize-first" aria-label="Permalink to &quot;What Not To Customize First&quot;">​</a></h2><p>Prefer changing CSS variables before overriding internal selectors like <code>.hsk-tiptap p</code> or <code>.hsk-editor-surface</code>. Direct selector overrides are still an escape hatch, but they couple your app to mdkit&#39;s internal DOM.</p><p>Use <code>MdKitThemeEditor</code> for theme builders, documentation, and debug tooling. It is not required for normal editor integration.</p></div></div></main><footer class="VPDocFooter" data-v-311cca79 data-v-e2638793><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e2638793><span class="visually-hidden" id="doc-footer-aria-label" data-v-e2638793>Pager</span><div class="pager" data-v-e2638793><a class="VPLink link pager-link prev" href="/" data-v-e2638793><!--[--><span class="desc" data-v-e2638793>Previous page</span><span class="title" data-v-e2638793>Quick Start</span><!--]--></a></div><div class="pager" data-v-e2638793><a class="VPLink link pager-link next" href="/shadcn" data-v-e2638793><!--[--><span class="desc" data-v-e2638793>Next page</span><span class="title" data-v-e2638793>Shadcn Plugin</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
112
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"api.md\":\"asncK3PQ\",\"architecture.md\":\"BHQLarmZ\",\"index.md\":\"CITl-897\",\"shadcn.md\":\"C3idOo2N\",\"styling.md\":\"B2C6kVFa\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Markdown Editor Kit\",\"description\":\"Docs for the mdkit markdown editor package\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Quick Start\",\"link\":\"/\"},{\"text\":\"Styling\",\"link\":\"/styling\"},{\"text\":\"Shadcn\",\"link\":\"/shadcn\"},{\"text\":\"API\",\"link\":\"/api\"},{\"text\":\"Architecture\",\"link\":\"/architecture\"}],\"sidebar\":[{\"text\":\"Guide\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/\"},{\"text\":\"Styling\",\"link\":\"/styling\"},{\"text\":\"Shadcn Plugin\",\"link\":\"/shadcn\"},{\"text\":\"API Reference\",\"link\":\"/api\"},{\"text\":\"Architecture\",\"link\":\"/architecture\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/mp-lb/mdkit\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
113
-
114
- </body>
115
- </html>
package/docs/.vitepress/dist/vp-icons.css DELETED
@@ -1 +0,0 @@
1
- .vpi-social-github{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}