@mp-lb/mdkit 0.0.1-main.2.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 (125) hide show
  1. package/README.md +132 -0
  2. package/dist/collaboration/useMdKitCollaboration.d.ts +10 -0
  3. package/dist/collaboration/useMdKitCollaboration.js +90 -0
  4. package/dist/core/documentEngine.d.ts +38 -0
  5. package/dist/core/documentEngine.js +95 -0
  6. package/dist/core/documentEngine.test.d.ts +1 -0
  7. package/dist/core/documentEngine.test.js +119 -0
  8. package/dist/core/index.d.ts +3 -0
  9. package/dist/core/index.js +1 -0
  10. package/dist/document/MdKitConflictPanel.d.ts +7 -0
  11. package/dist/document/MdKitConflictPanel.js +41 -0
  12. package/dist/document/MdKitDocumentToolbar.d.ts +13 -0
  13. package/dist/document/MdKitDocumentToolbar.js +48 -0
  14. package/dist/document/documentTypes.d.ts +57 -0
  15. package/dist/document/documentTypes.js +1 -0
  16. package/dist/document/useMdKitDocument.d.ts +33 -0
  17. package/dist/document/useMdKitDocument.js +396 -0
  18. package/dist/document/useMdKitDocument.test.d.ts +1 -0
  19. package/dist/document/useMdKitDocument.test.js +151 -0
  20. package/dist/fastify.d.ts +3 -0
  21. package/dist/fastify.js +1 -0
  22. package/dist/index.d.ts +23 -0
  23. package/dist/index.js +11 -0
  24. package/dist/markdown/MarkdownBubbleMenu.d.ts +6 -0
  25. package/dist/markdown/MarkdownBubbleMenu.js +29 -0
  26. package/dist/markdown/MdKitEditor.d.ts +25 -0
  27. package/dist/markdown/MdKitEditor.js +7 -0
  28. package/dist/markdown/MdKitEditor.test.d.ts +1 -0
  29. package/dist/markdown/MdKitEditor.test.js +126 -0
  30. package/dist/markdown/TiptapMarkdownSurface.d.ts +23 -0
  31. package/dist/markdown/TiptapMarkdownSurface.js +430 -0
  32. package/dist/markdown/editorDebug.d.ts +5 -0
  33. package/dist/markdown/editorDebug.js +1 -0
  34. package/dist/markdown/markdownFenceRanges.d.ts +6 -0
  35. package/dist/markdown/markdownFenceRanges.js +41 -0
  36. package/dist/markdown/normalizeMarkdownSerialization.d.ts +1 -0
  37. package/dist/markdown/normalizeMarkdownSerialization.js +34 -0
  38. package/dist/markdown/normalizeMarkdownSerialization.test.d.ts +1 -0
  39. package/dist/markdown/normalizeMarkdownSerialization.test.js +16 -0
  40. package/dist/markdown/prepareMarkdownForEditorHydration.d.ts +1 -0
  41. package/dist/markdown/prepareMarkdownForEditorHydration.js +12 -0
  42. package/dist/markdown/prepareMarkdownForEditorHydration.test.d.ts +1 -0
  43. package/dist/markdown/prepareMarkdownForEditorHydration.test.js +13 -0
  44. package/dist/markdown/preserveMarkdownWhitespace.d.ts +1 -0
  45. package/dist/markdown/preserveMarkdownWhitespace.js +86 -0
  46. package/dist/markdown/preserveMarkdownWhitespace.test.d.ts +1 -0
  47. package/dist/markdown/preserveMarkdownWhitespace.test.js +25 -0
  48. package/dist/test/setup.d.ts +1 -0
  49. package/dist/test/setup.js +13 -0
  50. package/dist/theme/MdKitThemeEditor.d.ts +8 -0
  51. package/dist/theme/MdKitThemeEditor.js +13 -0
  52. package/dist/theme/editorTheme.d.ts +20 -0
  53. package/dist/theme/editorTheme.js +47 -0
  54. package/dist/transport/fastify.d.ts +7 -0
  55. package/dist/transport/fastify.js +19 -0
  56. package/dist/transport/http.d.ts +43 -0
  57. package/dist/transport/http.js +80 -0
  58. package/dist/transport/index.d.ts +5 -0
  59. package/dist/transport/index.js +2 -0
  60. package/dist/transport/rest.d.ts +6 -0
  61. package/dist/transport/rest.js +34 -0
  62. package/dist/transport/store.d.ts +21 -0
  63. package/dist/transport/store.js +1 -0
  64. package/dist/transport/trpcClient.d.ts +81 -0
  65. package/dist/transport/trpcClient.js +21 -0
  66. package/dist/transport/trpcServer.d.ts +72 -0
  67. package/dist/transport/trpcServer.js +45 -0
  68. package/dist/trpc/client.d.ts +3 -0
  69. package/dist/trpc/client.js +1 -0
  70. package/dist/trpc/server.d.ts +3 -0
  71. package/dist/trpc/server.js +1 -0
  72. package/dist/trpc.d.ts +3 -0
  73. package/dist/trpc.js +1 -0
  74. package/dist/ui/joinClassNames.d.ts +1 -0
  75. package/dist/ui/joinClassNames.js +1 -0
  76. package/dist/versioning/VersionHistoryPanel.d.ts +9 -0
  77. package/dist/versioning/VersionHistoryPanel.js +29 -0
  78. package/dist/versioning/useMdKitDocumentVersions.d.ts +16 -0
  79. package/dist/versioning/useMdKitDocumentVersions.js +88 -0
  80. package/dist/versioning/useMdKitDocumentVersions.test.d.ts +1 -0
  81. package/dist/versioning/useMdKitDocumentVersions.test.js +41 -0
  82. package/docs/.vitepress/config.ts +34 -0
  83. package/docs/.vitepress/dist/404.html +22 -0
  84. package/docs/.vitepress/dist/api.html +120 -0
  85. package/docs/.vitepress/dist/architecture.html +25 -0
  86. package/docs/.vitepress/dist/assets/api.md.asncK3PQ.js +96 -0
  87. package/docs/.vitepress/dist/assets/api.md.asncK3PQ.lean.js +1 -0
  88. package/docs/.vitepress/dist/assets/app.BQvrHyG0.js +1 -0
  89. package/docs/.vitepress/dist/assets/architecture.md.BHQLarmZ.js +1 -0
  90. package/docs/.vitepress/dist/assets/architecture.md.BHQLarmZ.lean.js +1 -0
  91. package/docs/.vitepress/dist/assets/chunks/framework.RRduUuAx.js +19 -0
  92. package/docs/.vitepress/dist/assets/chunks/theme.CkCo6Nk1.js +1 -0
  93. package/docs/.vitepress/dist/assets/index.md.CITl-897.js +137 -0
  94. package/docs/.vitepress/dist/assets/index.md.CITl-897.lean.js +1 -0
  95. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  96. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  97. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  98. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  99. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  100. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  101. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  102. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  103. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  104. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  105. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  106. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  107. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  108. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  109. package/docs/.vitepress/dist/assets/shadcn.md.C3idOo2N.js +57 -0
  110. package/docs/.vitepress/dist/assets/shadcn.md.C3idOo2N.lean.js +1 -0
  111. package/docs/.vitepress/dist/assets/style.BtrGaL3i.css +1 -0
  112. package/docs/.vitepress/dist/assets/styling.md.B2C6kVFa.js +91 -0
  113. package/docs/.vitepress/dist/assets/styling.md.B2C6kVFa.lean.js +1 -0
  114. package/docs/.vitepress/dist/hashmap.json +1 -0
  115. package/docs/.vitepress/dist/index.html +161 -0
  116. package/docs/.vitepress/dist/shadcn.html +81 -0
  117. package/docs/.vitepress/dist/styling.html +115 -0
  118. package/docs/.vitepress/dist/vp-icons.css +1 -0
  119. package/docs/api.md +343 -0
  120. package/docs/architecture.md +67 -0
  121. package/docs/index.md +244 -0
  122. package/docs/shadcn.md +118 -0
  123. package/docs/styling.md +247 -0
  124. package/package.json +105 -0
  125. package/src/styles.css +676 -0
package/docs/.vitepress/dist/styling.html ADDED
@@ -0,0 +1,115 @@
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 ADDED
@@ -0,0 +1 @@
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")}
package/docs/api.md ADDED
@@ -0,0 +1,343 @@
1
+ # API Reference
2
+
3
+ This page lists the current public exports from
4
+ `@mp-lb/mdkit`. It is hand-written for now; a generated API
5
+ reference from JSDoc/TypeScript declarations is a good follow-up once the public
6
+ surface settles.
7
+
8
+ ## Editor
9
+
10
+ ### `MdKitEditor`
11
+
12
+ Primary editor component.
13
+
14
+ Local mode:
15
+
16
+ ```tsx
17
+ <MdKitEditor value={markdown} onChange={setMarkdown} />
18
+ ```
19
+
20
+ Collaborative mode:
21
+
22
+ ```tsx
23
+ <MdKitEditor collaboration={collaboration} />
24
+ ```
25
+
26
+ ### `MdKitEditorProps`
27
+
28
+ Props for `MdKitEditor`.
29
+
30
+ Local editing props:
31
+
32
+ - `value: string`
33
+ - `onChange?: (markdown: string) => void`
34
+ - `onFocusChange?: (focused: boolean) => void`
35
+ - `fillHeight?: boolean`
36
+ - `instanceKey?: string | number`
37
+ - `className?: string`
38
+ - `style?: CSSProperties`
39
+
40
+ Collaborative editing props:
41
+
42
+ - `collaboration: MdKitCollaborationSession`
43
+ - `onFocusChange?: (focused: boolean) => void`
44
+ - `fillHeight?: boolean`
45
+ - `className?: string`
46
+ - `style?: CSSProperties`
47
+
48
+ `fillHeight` makes the editor fill its parent height, own its scroll area, and
49
+ keep blank space below the last line clickable so it focuses the cursor at the
50
+ end. Leave it off when the host application owns sizing and scrolling.
51
+
52
+ The package stylesheet includes reset-resistant markdown rules for headings,
53
+ lists, code blocks, blockquotes, and links. Styling is controlled with CSS
54
+ variables on `.mdkit-markdown-editor`. See [Styling](./styling.md) for setup,
55
+ dark mode, fonts, sizing, and theme customization.
56
+
57
+ ## Document Persistence
58
+
59
+ ### `useMdKitDocument`
60
+
61
+ Hook for loading, editing, saving, autosaving, and resyncing a markdown document
62
+ through a storage adapter.
63
+
64
+ ### `MdKitDocumentController`
65
+
66
+ Return type for `useMdKitDocument`. It contains the current markdown value,
67
+ status flags, save actions, resync actions, conflict details, and state setters
68
+ used by editor UI.
69
+
70
+ ### `MdKitDocumentToolbar`
71
+
72
+ Unstyled workflow controls for a connected markdown document. Render this above
73
+ or near `MdKitEditor` when you want mdkit to handle common document actions
74
+ without adopting a design system.
75
+
76
+ ```tsx
77
+ <MdKitDocumentToolbar
78
+ document={document}
79
+ versions={versions}
80
+ collaboration={collaboration}
81
+ onOpenConflict={() => setConflictDialogOpen(true)}
82
+ onOpenVersionHistory={() => setVersionPanelOpen(true)}
83
+ />
84
+ ```
85
+
86
+ It renders save status, collaboration status, an optional version-history entry
87
+ point labelled with the current version, and a conflict entry point via
88
+ `onOpenConflict`.
89
+
90
+ Related type:
91
+
92
+ - `MdKitDocumentToolbarProps`
93
+
94
+ ### `MdKitConflictPanel`
95
+
96
+ Base panel for conflict resolution. It renders inline semantic HTML, previews the
97
+ remote and local content snapshots, and uses the document controller actions to
98
+ keep the remote document or keep the local editor content.
99
+
100
+ ```tsx
101
+ <MdKitConflictPanel document={document} />
102
+ ```
103
+
104
+ It returns `null` when `document.conflict` is false. Use it next to
105
+ `MdKitDocumentToolbar` when you want the base-panel workflow. If your app uses a
106
+ modal, drawer, or editor-replacement view, put this panel inside your own shell.
107
+
108
+ Related type:
109
+
110
+ - `MdKitConflictPanelProps`
111
+
112
+ ### `MdKitDocumentAdapter`
113
+
114
+ Storage adapter contract. Implement this to connect document persistence to your
115
+ backend.
116
+
117
+ ```ts
118
+ type MdKitDocumentAdapter = {
119
+ readDocument(documentId: string): Promise<MdKitDocumentSnapshot>;
120
+ writeDocument(
121
+ input: MdKitDocumentWriteInput,
122
+ ): Promise<MdKitDocumentWriteResult>;
123
+ resyncDocument?(documentId: string): Promise<MdKitDocumentSnapshot>;
124
+ listDocumentVersions?(
125
+ documentId: string,
126
+ ): Promise<MdKitDocumentVersionSummary[]>;
127
+ readDocumentVersion?(input: {
128
+ documentId: string;
129
+ versionId: string;
130
+ }): Promise<MdKitDocumentVersionDetail | null>;
131
+ };
132
+ ```
133
+
134
+ Required storage methods:
135
+
136
+ - `readDocument` returns the current markdown snapshot.
137
+ - `writeDocument` persists markdown with the caller's base version.
138
+ - `resyncDocument` is optional and can force a fresh read from the canonical
139
+ source.
140
+
141
+ Optional versioning methods:
142
+
143
+ - `listDocumentVersions` returns available versions for the document.
144
+ - `readDocumentVersion` returns a saved markdown snapshot for one version.
145
+
146
+ Related storage types:
147
+
148
+ - `MdKitDocumentSnapshot`
149
+ - `MdKitDocumentWriteInput`
150
+ - `MdKitDocumentWriteResult`
151
+
152
+ ```ts
153
+ type MdKitDocumentSnapshot = {
154
+ content: string;
155
+ version: MdKitDocumentVersionToken;
156
+ updatedAt?: string | null;
157
+ };
158
+
159
+ type MdKitDocumentWriteInput = {
160
+ documentId: string;
161
+ content: string;
162
+ baseVersion: MdKitDocumentVersionToken;
163
+ };
164
+
165
+ type MdKitDocumentWriteResult =
166
+ | {
167
+ version: MdKitDocumentVersionToken;
168
+ updatedAt?: string | null;
169
+ }
170
+ | {
171
+ conflict: true;
172
+ version?: MdKitDocumentVersionToken;
173
+ updatedAt?: string | null;
174
+ };
175
+ ```
176
+
177
+ ## Styling
178
+
179
+ ### `MdKitThemeEditor`
180
+
181
+ Reusable controls for editing an `MdKitEditorTheme`. This component is optional
182
+ and mainly intended for theme builders, documentation, and debug tools.
183
+
184
+ ```tsx
185
+ const [theme, setTheme] = useState(darkMdKitEditorTheme);
186
+ const style = createMdKitEditorThemeStyle(theme);
187
+
188
+ <MdKitThemeEditor theme={theme} onChange={setTheme} />
189
+ <MdKitEditor style={style} value={markdown} onChange={setMarkdown} />
190
+ ```
191
+
192
+ Related exports:
193
+
194
+ - `MdKitEditorTheme`
195
+ - `MdKitEditorThemeStyle`
196
+ - `createMdKitEditorThemeStyle`
197
+ - `defaultMdKitEditorTheme`
198
+ - `darkMdKitEditorTheme`
199
+
200
+ `MdKitThemeEditor` also relies on the optional package stylesheet for its own
201
+ layout. Without that stylesheet, it still renders normal form controls.
202
+
203
+ ## Version History
204
+
205
+ ### `useMdKitDocumentVersions`
206
+
207
+ Hook for listing versions, reading a version detail, and tracking version
208
+ history loading state.
209
+
210
+ ### `VersionHistoryPanel`
211
+
212
+ UI component for rendering version history from `useMdKitDocumentVersions`.
213
+
214
+ Related types:
215
+
216
+ - `MdKitDocumentVersionSummary`
217
+ - `MdKitDocumentVersionDetail`
218
+ - `MdKitDocumentVersionToken`
219
+ - `MdKitDocumentVersionsController`
220
+ - `UseMdKitDocumentVersionsOptions`
221
+ - `VersionHistoryPanelProps`
222
+
223
+ ```ts
224
+ type MdKitDocumentVersionToken = string | number | null;
225
+
226
+ type MdKitDocumentVersionSummary = {
227
+ id: string;
228
+ label?: string;
229
+ createdAt: string;
230
+ authorLabel?: string | null;
231
+ version?: MdKitDocumentVersionToken;
232
+ };
233
+
234
+ type MdKitDocumentVersionDetail = MdKitDocumentVersionSummary & {
235
+ content: string;
236
+ };
237
+ ```
238
+
239
+ ## Collaboration
240
+
241
+ ### `useMdKitCollaboration`
242
+
243
+ Hook for creating a Hocuspocus/Yjs collaboration session for `MdKitEditor`.
244
+
245
+ Related types:
246
+
247
+ - `MdKitCollaborationParticipant`
248
+ - `MdKitCollaborationSession`
249
+ - `MdKitCollaborationStatus`
250
+
251
+ ```ts
252
+ type MdKitCollaborationSession = {
253
+ collaborator: MdKitCollaborationParticipant;
254
+ document: Y.Doc;
255
+ provider: HocuspocusProvider | null;
256
+ roomName: string;
257
+ status: MdKitCollaborationStatus;
258
+ };
259
+ ```
260
+
261
+ ## Transport Helpers
262
+
263
+ ### `createMdKitRestAdapter`
264
+
265
+ Creates an `MdKitDocumentAdapter` that talks to the mdkit REST endpoint shape.
266
+
267
+ ```ts
268
+ const adapter = createMdKitRestAdapter({
269
+ baseUrl: "https://api.example.com/mdkit",
270
+ });
271
+ ```
272
+
273
+ Exported from `@mp-lb/mdkit`.
274
+
275
+ ### `registerMdKitFastify`
276
+
277
+ Registers the matching REST endpoints on a Fastify app.
278
+
279
+ ```ts
280
+ await registerMdKitFastify(app, {
281
+ prefix: "/mdkit",
282
+ store,
283
+ });
284
+ ```
285
+
286
+ Exported from `@mp-lb/mdkit/fastify`.
287
+
288
+ ### `createMdKitTrpcRouter`
289
+
290
+ Creates a tRPC router for document reads, writes, resync, version list/read, and
291
+ version restore.
292
+
293
+ ```ts
294
+ await app.register(fastifyTRPCPlugin, {
295
+ prefix: "/trpc",
296
+ trpcOptions: {
297
+ router: createMdKitTrpcRouter(store),
298
+ },
299
+ });
300
+ ```
301
+
302
+ Exported from `@mp-lb/mdkit/trpc/server`.
303
+
304
+ ### `createMdKitTrpcClient` and `createMdKitTrpcAdapter`
305
+
306
+ Creates a typed tRPC client and turns it into an `MdKitDocumentAdapter`.
307
+
308
+ ```ts
309
+ const client = createMdKitTrpcClient({ url: `${apiUrl}/trpc` });
310
+ const adapter = createMdKitTrpcAdapter({ client });
311
+ ```
312
+
313
+ Exported from `@mp-lb/mdkit/trpc/client`.
314
+
315
+ ### `MdKitTransportStore`
316
+
317
+ Backend store contract used by the Fastify and tRPC helpers.
318
+
319
+ ```ts
320
+ type MdKitTransportStore = {
321
+ readDocument(documentId: string): Promise<MdKitDocumentSnapshot>;
322
+ writeDocument(
323
+ input: MdKitDocumentWriteInput,
324
+ ): Promise<MdKitDocumentWriteResult>;
325
+ resyncDocument?(documentId: string): Promise<MdKitDocumentSnapshot>;
326
+ listDocumentVersions?(
327
+ documentId: string,
328
+ ): Promise<MdKitDocumentVersionSummary[]>;
329
+ readDocumentVersion?(input: {
330
+ documentId: string;
331
+ versionId: string;
332
+ }): Promise<MdKitDocumentVersionDetail | null>;
333
+ restoreDocumentVersion?(input: {
334
+ documentId: string;
335
+ versionId: string;
336
+ }): Promise<MdKitDocumentWriteResult>;
337
+ readCollaborationState?(documentName: string): Promise<Uint8Array | null>;
338
+ writeCollaborationState?(
339
+ documentName: string,
340
+ state: Uint8Array,
341
+ ): Promise<void>;
342
+ };
343
+ ```
package/docs/architecture.md ADDED
@@ -0,0 +1,67 @@
1
+ # Architecture
2
+
3
+ The editor package should keep UI concerns separate from persistence, versioning, and collaboration infrastructure.
4
+
5
+ ## Layers
6
+
7
+ ### Editor
8
+
9
+ `MdKitEditor` is the public editor component.
10
+
11
+ For local editing, it accepts:
12
+
13
+ - `value: string`
14
+ - `onChange?: (markdown: string) => void`
15
+ - `onFocusChange?: (focused: boolean) => void`
16
+ - `instanceKey?: string | number`
17
+
18
+ It should behave like a fancy textarea from the consumer's point of view. It must not know about storage, versions, auth, servers, Hocuspocus, MongoDB, or the host application.
19
+
20
+ For collaborative editing, the same component accepts:
21
+
22
+ - `collaboration: MdKitCollaborationSession`
23
+ - `onFocusChange?: (focused: boolean) => void`
24
+
25
+ Collaboration needs a different editor engine internally because it is backed by
26
+ Yjs state and remote cursors, but consumers should not need a separate editor
27
+ component.
28
+
29
+ ### Headless Hooks
30
+
31
+ Storage, versioning, and collaboration controls should come from hooks and
32
+ consumer-owned UI. A product can render those controls in a header, toolbar,
33
+ side panel, command menu, or nowhere at all.
34
+
35
+ Hooks should expose enough state for consumers to decide which UI features are
36
+ visible based on available adapters:
37
+
38
+ - storage adapter present: load/save UI and autosave can exist
39
+ - version adapter present: version history UI can exist
40
+ - collaboration adapter present: collaborative state and presence can exist
41
+
42
+ Missing adapters should remove functionality, not break the editor.
43
+
44
+ ### Reference Integrations
45
+
46
+ Reference integrations should provide plug-and-play adapters for supported backends. The editor UI should depend on adapter interfaces, not implementation details.
47
+
48
+ Examples:
49
+
50
+ - JSON document storage
51
+ - MongoDB-backed document storage
52
+ - JSON or MongoDB version history
53
+ - Hocuspocus/Yjs collaboration
54
+
55
+ ## Ownership Rule
56
+
57
+ The frontend editor owns rendering and local editing state. Adapters own durable state and transport. The editor should never import database clients, server framework code, or backend-specific SDKs.
58
+
59
+ ## Package Boundaries
60
+
61
+ Packages should expose:
62
+
63
+ - pure types for adapter contracts
64
+ - React hooks/components for UI behavior
65
+ - optional adapter factories in separate entrypoints when we add reference integrations
66
+
67
+ Reference adapters should be optional dependencies or split entrypoints so a basic consumer does not install server-only or backend-specific code.