@mp-lb/mdkit 0.0.1-main.4.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.
- package/dist/document/MdKitConflictPanel.js +4 -4
- package/dist/document/MdKitDocumentToolbar.js +3 -3
- package/dist/markdown/MarkdownBubbleMenu.d.ts +1 -1
- package/dist/markdown/MarkdownBubbleMenu.js +58 -8
- package/dist/markdown/MdKitEditor.js +1 -1
- package/dist/markdown/TiptapMarkdownSurface.js +5 -5
- package/dist/theme/MdKitThemeEditor.js +1 -1
- package/dist/theme/editorTheme.d.ts +1 -1
- package/dist/theme/editorTheme.js +15 -15
- package/dist/versioning/VersionHistoryPanel.js +2 -2
- package/docs/api.md +1 -1
- package/docs/shadcn.md +1 -1
- package/docs/styling.md +190 -71
- package/package.json +6 -2
- package/src/styles.css +271 -258
- package/dist/core/documentEngine.test.d.ts +0 -1
- package/dist/core/documentEngine.test.js +0 -119
- package/dist/document/useMdKitDocument.test.d.ts +0 -1
- package/dist/document/useMdKitDocument.test.js +0 -151
- package/dist/markdown/MdKitEditor.test.d.ts +0 -1
- package/dist/markdown/MdKitEditor.test.js +0 -126
- package/dist/markdown/normalizeMarkdownSerialization.test.d.ts +0 -1
- package/dist/markdown/normalizeMarkdownSerialization.test.js +0 -16
- package/dist/markdown/prepareMarkdownForEditorHydration.test.d.ts +0 -1
- package/dist/markdown/prepareMarkdownForEditorHydration.test.js +0 -13
- package/dist/markdown/preserveMarkdownWhitespace.test.d.ts +0 -1
- package/dist/markdown/preserveMarkdownWhitespace.test.js +0 -25
- package/dist/test/setup.d.ts +0 -1
- package/dist/test/setup.js +0 -13
- package/dist/versioning/useMdKitDocumentVersions.test.d.ts +0 -1
- package/dist/versioning/useMdKitDocumentVersions.test.js +0 -41
- package/docs/.vitepress/dist/404.html +0 -22
- package/docs/.vitepress/dist/api.html +0 -120
- package/docs/.vitepress/dist/architecture.html +0 -25
- package/docs/.vitepress/dist/assets/api.md.asncK3PQ.js +0 -96
- package/docs/.vitepress/dist/assets/api.md.asncK3PQ.lean.js +0 -1
- package/docs/.vitepress/dist/assets/app.BQvrHyG0.js +0 -1
- package/docs/.vitepress/dist/assets/architecture.md.BHQLarmZ.js +0 -1
- package/docs/.vitepress/dist/assets/architecture.md.BHQLarmZ.lean.js +0 -1
- package/docs/.vitepress/dist/assets/chunks/framework.RRduUuAx.js +0 -19
- package/docs/.vitepress/dist/assets/chunks/theme.CkCo6Nk1.js +0 -1
- package/docs/.vitepress/dist/assets/index.md.CITl-897.js +0 -137
- package/docs/.vitepress/dist/assets/index.md.CITl-897.lean.js +0 -1
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
- package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
- package/docs/.vitepress/dist/assets/shadcn.md.C3idOo2N.js +0 -57
- package/docs/.vitepress/dist/assets/shadcn.md.C3idOo2N.lean.js +0 -1
- package/docs/.vitepress/dist/assets/style.BtrGaL3i.css +0 -1
- package/docs/.vitepress/dist/assets/styling.md.B2C6kVFa.js +0 -91
- package/docs/.vitepress/dist/assets/styling.md.B2C6kVFa.lean.js +0 -1
- package/docs/.vitepress/dist/hashmap.json +0 -1
- package/docs/.vitepress/dist/index.html +0 -161
- package/docs/.vitepress/dist/shadcn.html +0 -81
- package/docs/.vitepress/dist/styling.html +0 -115
- package/docs/.vitepress/dist/vp-icons.css +0 -1
|
@@ -1,161 +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>Quick Start | 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/index.md.CITl-897.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 active" href="/" tabindex="0" data-v-5412324d data-v-8ef452a0><!--[--><span data-v-8ef452a0>Quick Start</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" 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 _" data-v-311cca79><div><h1 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to "Quick Start""></a></h1><p>Markdown Editor Kit is a React package for teams that need more than a bare markdown editor widget. It starts with a controlled markdown editor that behaves like a textarea, then adds autosave, version history, conflict handling, and collaboration through adapters.</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @mp-lb/mdkit</span></span></code></pre></div><p>Import the stylesheet once if you want reset-resistant markdown defaults and generic fallback styling for the base panels:</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;"> "@mp-lb/mdkit/styles.css"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>See <a href="./styling">Styling</a> for reset handling, dark mode, fonts, sizing, and custom panel styles.</p><h2 id="basic-editor" tabindex="-1">Basic Editor <a class="header-anchor" href="#basic-editor" aria-label="Permalink to "Basic Editor""></a></h2><p><code>MdKitEditor</code> is the textarea-like entry point. It has no persistence, no version history, and no collaboration. You own the <code>value</code> and <code>onChange</code> state.</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;"> { useState } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "react"</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:#24292E;--shiki-dark:#E1E4E8;"> { MdKitEditor } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit"</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;"> "@mp-lb/mdkit/styles.css"</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;"> MarkdownEditorExample</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
26
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">markdown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setMarkdown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"# Hello markdown"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
27
|
-
<span class="line"></span>
|
|
28
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</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} />;</span></span>
|
|
29
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Use this when you want a local editor, a form field, or a debug surface.</p><h2 id="connected-editor" tabindex="-1">Connected Editor <a class="header-anchor" href="#connected-editor" aria-label="Permalink to "Connected Editor""></a></h2><p>The connected workflow combines:</p><ul><li><code>useMdKitDocument</code> for loading, autosave, dirty state, and conflict detection</li><li><code>useMdKitDocumentVersions</code> for version browsing and restore</li><li><code>useMdKitCollaboration</code> for Hocuspocus/Yjs collaboration</li><li><code>MdKitDocumentToolbar</code>, <code>VersionHistoryPanel</code>, and <code>MdKitConflictPanel</code> for a complete base-panel UI</li></ul><p>The TypeScript-first path is tRPC. REST is also supported for high-compatibility backends and non-TypeScript stacks.</p><h3 id="frontend-with-trpc" tabindex="-1">Frontend With tRPC <a class="header-anchor" href="#frontend-with-trpc" aria-label="Permalink to "Frontend With tRPC""></a></h3><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;"> { useMemo, useState } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "react"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
30
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitConflictPanel,</span></span>
|
|
32
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitDocumentToolbar,</span></span>
|
|
33
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitEditor,</span></span>
|
|
34
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> VersionHistoryPanel,</span></span>
|
|
35
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitCollaboration,</span></span>
|
|
36
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitDocument,</span></span>
|
|
37
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitDocumentVersions,</span></span>
|
|
38
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitDocumentVersionDetail,</span></span>
|
|
39
|
-
<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;"> "@mp-lb/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
40
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
41
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createMdKitTrpcAdapter,</span></span>
|
|
42
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createMdKitTrpcClient,</span></span>
|
|
43
|
-
<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;"> "@mp-lb/mdkit/trpc/client"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
44
|
-
<span class="line"></span>
|
|
45
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> documentId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "docs/example.md"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
46
|
-
<span class="line"></span>
|
|
47
|
-
<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;"> ConnectedMarkdownEditor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
48
|
-
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> apiUrl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
49
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
50
|
-
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> apiUrl</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
51
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}) {</span></span>
|
|
52
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">versionHistoryOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setVersionHistoryOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
53
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">conflictOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setConflictOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
54
|
-
<span class="line"></span>
|
|
55
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> trpc</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMemo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
56
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitTrpcClient</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">apiUrl</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}/trpc`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
|
|
57
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [apiUrl],</span></span>
|
|
58
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
59
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> adapter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMemo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitTrpcAdapter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ client: trpc }), [trpc]);</span></span>
|
|
60
|
-
<span class="line"></span>
|
|
61
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitDocument</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ adapter, documentId });</span></span>
|
|
62
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> versions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitDocumentVersions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ adapter, documentId });</span></span>
|
|
63
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitCollaboration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
64
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> collaborator: { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"user-1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Ada"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
65
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> documentId,</span></span>
|
|
66
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> endpoint: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">apiUrl</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">replace</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">^</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">http</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ws"</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}/collaboration`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
67
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
68
|
-
<span class="line"></span>
|
|
69
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> restoreVersion</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">version</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MdKitDocumentVersionDetail</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
70
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> trpc.restoreDocumentVersion.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mutate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
71
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> documentId,</span></span>
|
|
72
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> versionId: version.id,</span></span>
|
|
73
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
74
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
75
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> versions.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">refresh</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
76
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
|
77
|
-
<span class="line"></span>
|
|
78
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
79
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <></span></span>
|
|
80
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitDocumentToolbar</span></span>
|
|
81
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{collaboration}</span></span>
|
|
82
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document}</span></span>
|
|
83
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> versions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{versions}</span></span>
|
|
84
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onOpenConflict</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setConflictOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)}</span></span>
|
|
85
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onOpenVersionHistory</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setVersionHistoryOpen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)}</span></span>
|
|
86
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
87
|
-
<span class="line"></span>
|
|
88
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span></span>
|
|
89
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{collaboration}</span></span>
|
|
90
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fillHeight</span></span>
|
|
91
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readOnly</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.conflict}</span></span>
|
|
92
|
-
<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;">{document.value}</span></span>
|
|
93
|
-
<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;">{document.setContent}</span></span>
|
|
94
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onFocusChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.setFocused}</span></span>
|
|
95
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
96
|
-
<span class="line"></span>
|
|
97
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {versionHistoryOpen </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
98
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dialog"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-label</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Version history"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
99
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VersionHistoryPanel</span></span>
|
|
100
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> controller</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{versions}</span></span>
|
|
101
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onRestoreVersion</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{restoreVersion}</span></span>
|
|
102
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
103
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
104
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
105
|
-
<span class="line"></span>
|
|
106
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {document.conflict </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&&</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> conflictOpen </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
107
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> role</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dialog"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-label</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Resolve conflict"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
108
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitConflictPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document} /></span></span>
|
|
109
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
110
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
111
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </></span></span>
|
|
112
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
113
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>The modal shells above are intentionally plain. Put <code>VersionHistoryPanel</code> and <code>MdKitConflictPanel</code> inside your own dialog, drawer, side panel, or editor replacement view. If your app uses shadcn/ui, see <a href="./shadcn">Shadcn Plugin</a> for the source-installed workflow component.</p><h3 id="backend-with-fastify-and-trpc" tabindex="-1">Backend With Fastify And tRPC <a class="header-anchor" href="#backend-with-fastify-and-trpc" aria-label="Permalink to "Backend With Fastify And tRPC""></a></h3><p>The backend only needs a store object. Replace <code>createYourDocumentStore()</code> with Postgres, MongoDB, Redis, files, or any other durable storage.</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:#24292E;--shiki-dark:#E1E4E8;"> cors </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@fastify/cors"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
114
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> websocket </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@fastify/websocket"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
115
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Database } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@hocuspocus/extension-database"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
116
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Server } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@hocuspocus/server"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
117
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { fastifyTRPCPlugin } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@trpc/server/adapters/fastify"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
118
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Fastify </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "fastify"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
119
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createMdKitTrpcRouter } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit/trpc/server"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
120
|
-
<span class="line"></span>
|
|
121
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Fastify</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
122
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> store</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createYourDocumentStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
123
|
-
<span class="line"></span>
|
|
124
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Server.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">configure</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
125
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> extensions: [</span></span>
|
|
126
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Database</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
127
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: ({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">documentName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readCollaborationState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(documentName),</span></span>
|
|
128
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> store</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: ({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">documentName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span></span>
|
|
129
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">writeCollaborationState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(documentName, state),</span></span>
|
|
130
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
|
|
131
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
|
132
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
|
133
|
-
<span class="line"></span>
|
|
134
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">register</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(cors, { origin: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
135
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">register</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(websocket);</span></span>
|
|
136
|
-
<span class="line"></span>
|
|
137
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">register</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(fastifyTRPCPlugin, {</span></span>
|
|
138
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> prefix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/trpc"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
139
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> trpcOptions: {</span></span>
|
|
140
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createMdKitTrpcRouter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(store),</span></span>
|
|
141
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
142
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
|
143
|
-
<span class="line"></span>
|
|
144
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/collaboration"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { websocket: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">socket</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">request</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
145
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> collaboration.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">handleConnection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(socket, request.raw, {});</span></span>
|
|
146
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
|
147
|
-
<span class="line"></span>
|
|
148
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">listen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ port: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(process.env.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">PORT</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ??</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 4312</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) });</span></span></code></pre></div><p>The store object implements <code>MdKitTransportStore</code>: current document reads and writes, version list/read/restore, and optional collaboration state storage. See <a href="./api#transport-helpers">API Reference</a>.</p><h3 id="rest-compatibility" tabindex="-1">REST Compatibility <a class="header-anchor" href="#rest-compatibility" aria-label="Permalink to "REST Compatibility""></a></h3><p>If you want REST instead of tRPC, use the REST frontend adapter:</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;"> { createMdKitRestAdapter } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
149
|
-
<span class="line"></span>
|
|
150
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> adapter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitRestAdapter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
151
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> baseUrl: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://api.example.com/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
152
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>On Fastify, register the matching REST endpoints:</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:#24292E;--shiki-dark:#E1E4E8;"> { registerMdKitFastify } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@mp-lb/mdkit/fastify"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
153
|
-
<span class="line"></span>
|
|
154
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> registerMdKitFastify</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app, {</span></span>
|
|
155
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> prefix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
156
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> store,</span></span>
|
|
157
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>The mdkit testbench uses this split deliberately: <code>Connected (panels)</code> uses the REST adapter, while <code>Connected (shadcn)</code> uses the tRPC adapter.</p><h2 id="questions" tabindex="-1">Questions <a class="header-anchor" href="#questions" aria-label="Permalink to "Questions""></a></h2><h3 id="do-the-backends-need-to-know-about-each-other" tabindex="-1">Do the backends need to know about each other? <a class="header-anchor" href="#do-the-backends-need-to-know-about-each-other" aria-label="Permalink to "Do the backends need to know about each other?""></a></h3><p>Storage, version history, and collaboration can stay separate. Storage stores the current markdown snapshot. Version history stores markdown snapshots. Hocuspocus stores live Yjs collaboration state. They only need glue if your product wants collaborative edits to automatically become saved markdown versions.</p><h3 id="does-mdkit-require-trpc-or-these-exact-rest-endpoints" tabindex="-1">Does mdkit require tRPC or these exact REST endpoints? <a class="header-anchor" href="#does-mdkit-require-trpc-or-these-exact-rest-endpoints" aria-label="Permalink to "Does mdkit require tRPC or these exact REST endpoints?""></a></h3><p>No. The frontend hooks only need an <code>MdKitDocumentAdapter</code>. You can use REST, tRPC, GraphQL, server actions, IndexedDB, Rails, Go, or anything else as long as your adapter returns the documented shapes.</p><h3 id="do-i-have-to-use-the-base-panels" tabindex="-1">Do I have to use the base panels? <a class="header-anchor" href="#do-i-have-to-use-the-base-panels" aria-label="Permalink to "Do I have to use the base panels?""></a></h3><p>No. The base panels are the fastest way to get a complete workflow working in any React app. If you want a fully custom UI, use <code>useMdKitDocument</code>, <code>useMdKitDocumentVersions</code>, and <code>useMdKitCollaboration</code> directly and render your own controls.</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><!----></div><div class="pager" data-v-e2638793><a class="VPLink link pager-link next" href="/styling" data-v-e2638793><!--[--><span class="desc" data-v-e2638793>Next page</span><span class="title" data-v-e2638793>Styling</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
|
158
|
-
<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>
|
|
159
|
-
|
|
160
|
-
</body>
|
|
161
|
-
</html>
|
|
@@ -1,81 +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>Shadcn Plugin | 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/shadcn.md.C3idOo2N.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" href="/styling" tabindex="0" data-v-5412324d data-v-8ef452a0><!--[--><span data-v-8ef452a0>Styling</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" 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 _shadcn" data-v-311cca79><div><h1 id="shadcn-plugin" tabindex="-1">Shadcn Plugin <a class="header-anchor" href="#shadcn-plugin" aria-label="Permalink to "Shadcn Plugin""></a></h1><p>The core npm package is design-system agnostic. It exports the editor, hooks, base panels, types, and generic CSS. It does not export shadcn components at runtime.</p><p>The shadcn path should be a registry/plugin item. Installing it copies editable source into your app, and that source imports your app's own shadcn primitives:</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;"> { Button } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/ui/button"</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:#24292E;--shiki-dark:#E1E4E8;"> { Badge } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/ui/badge"</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:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
24
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Dialog,</span></span>
|
|
25
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DialogContent,</span></span>
|
|
26
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DialogHeader,</span></span>
|
|
27
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DialogTitle,</span></span>
|
|
28
|
-
<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;"> "@/components/ui/dialog"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
29
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Tabs, TabsContent, TabsList, TabsTrigger } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/ui/tabs"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
30
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Textarea } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/ui/textarea"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>That means the workflow component can own polished app UI: toolbar, version history dialog, conflict dialog, tabs, buttons, and layout. The underlying state still comes from the mdkit hooks. The recommended transport for this path is the tRPC adapter from <code>@mp-lb/mdkit/trpc/client</code>.</p><h2 id="intended-shape" tabindex="-1">Intended Shape <a class="header-anchor" href="#intended-shape" aria-label="Permalink to "Intended Shape""></a></h2><p>The installed component should be one app-local workflow component that you render next to <code>MdKitEditor</code>.</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>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MdKitEditor,</span></span>
|
|
32
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitCollaboration,</span></span>
|
|
33
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitDocument,</span></span>
|
|
34
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useMdKitDocumentVersions,</span></span>
|
|
35
|
-
<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;"> "@mp-lb/mdkit"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
36
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
37
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createMdKitTrpcAdapter,</span></span>
|
|
38
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createMdKitTrpcClient,</span></span>
|
|
39
|
-
<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;"> "@mp-lb/mdkit/trpc/client"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
40
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MdKitConnectedWorkflow } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "@/components/mdkit/mdkit-connected-workflow"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
41
|
-
<span class="line"></span>
|
|
42
|
-
<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;"> EditorScreen</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
43
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> client</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitTrpcClient</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/trpc"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
44
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> adapter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createMdKitTrpcAdapter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ client });</span></span>
|
|
45
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitDocument</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ adapter, documentId });</span></span>
|
|
46
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> versions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitDocumentVersions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ adapter, documentId });</span></span>
|
|
47
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMdKitCollaboration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
48
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> collaborator,</span></span>
|
|
49
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> documentId,</span></span>
|
|
50
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> endpoint: hocuspocusEndpoint,</span></span>
|
|
51
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
52
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> restoreVersion</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">version</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
53
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> client.restoreDocumentVersion.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mutate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
54
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> documentId,</span></span>
|
|
55
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> versionId: version.id,</span></span>
|
|
56
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
57
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
58
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> versions.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">refresh</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
|
59
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
|
60
|
-
<span class="line"></span>
|
|
61
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
62
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitConnectedWorkflow</span></span>
|
|
63
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{collaboration}</span></span>
|
|
64
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> document</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document}</span></span>
|
|
65
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> versions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{versions}</span></span>
|
|
66
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onRestoreVersion</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{restoreVersion}</span></span>
|
|
67
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
68
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitEditor</span></span>
|
|
69
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> collaboration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{collaboration}</span></span>
|
|
70
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readOnly</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.conflict}</span></span>
|
|
71
|
-
<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;">{document.value}</span></span>
|
|
72
|
-
<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;">{document.setContent}</span></span>
|
|
73
|
-
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onFocusChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{document.setFocused}</span></span>
|
|
74
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
75
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">MdKitConnectedWorkflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
76
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
|
77
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>The shadcn component is deliberately source-installed instead of imported from the npm package. That is how shadcn is designed to work: the code lives in your app, uses your aliases, and can be edited like any other local component.</p><h2 id="why-not-a-runtime-export" tabindex="-1">Why Not A Runtime Export? <a class="header-anchor" href="#why-not-a-runtime-export" aria-label="Permalink to "Why Not A Runtime Export?""></a></h2><p>mdkit should not:</p><ul><li>bundle copies of shadcn primitives</li><li>depend on shadcn as a package</li><li>ask you to pass a map of local <code>Button</code>, <code>Dialog</code>, or <code>Tabs</code> components into mdkit</li><li>ship Tailwind-only wrappers from the npm package and hope your build scans external package source</li></ul><p>The npm package stays focused on the durable logic. The registry item owns the app-local shadcn composition.</p><h2 id="fallback-path" tabindex="-1">Fallback Path <a class="header-anchor" href="#fallback-path" aria-label="Permalink to "Fallback Path""></a></h2><p>If you do not use shadcn, use the base panels from the npm package:</p><ul><li><code>MdKitDocumentToolbar</code></li><li><code>VersionHistoryPanel</code></li><li><code>MdKitConflictPanel</code></li></ul><p>They render plain semantic HTML with stable <code>mdkit-*</code> classes. Import <code>@mp-lb/mdkit/styles.css</code> for generic fallback styling, or replace the CSS entirely. See <a href="./styling#component-styling">Styling</a>.</p><h2 id="status" tabindex="-1">Status <a class="header-anchor" href="#status" aria-label="Permalink to "Status""></a></h2><p>The mdkit testbench currently contains the reference shadcn workflow component. It is the target shape for the future registry/plugin item. Until that registry item exists, treat the base panels as the supported published path.</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="/styling" data-v-e2638793><!--[--><span class="desc" data-v-e2638793>Previous page</span><span class="title" data-v-e2638793>Styling</span><!--]--></a></div><div class="pager" data-v-e2638793><a class="VPLink link pager-link next" href="/api" data-v-e2638793><!--[--><span class="desc" data-v-e2638793>Next page</span><span class="title" data-v-e2638793>API Reference</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
|
78
|
-
<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>
|
|
79
|
-
|
|
80
|
-
</body>
|
|
81
|
-
</html>
|