@mp-lb/mdkit 0.1.0 → 0.2.0-main.12.1

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { useMdKitDocument } from "./document/useMdKitDocument";
 export { MdKitConflictPanel } from "./document/MdKitConflictPanel";
 export { MdKitDocumentToolbar } from "./document/MdKitDocumentToolbar";
 export { MdKitEditor } from "./markdown/MdKitEditor";
+export { MdKitView } from "./markdown/MdKitView";
 export { MdKitThemeEditor } from "./theme/MdKitThemeEditor";
 export { createMdKitRestAdapter } from "./transport/rest";
 export { createMdKitEditorThemeStyle, darkMdKitEditorTheme, defaultMdKitEditorTheme, } from "./theme/editorTheme";
@@ -16,6 +17,7 @@ export type { MdKitConflictPanelProps } from "./document/MdKitConflictPanel";
 export type { MdKitDocumentToolbarProps } from "./document/MdKitDocumentToolbar";
 export type { MdKitEditorProps } from "./markdown/MdKitEditor";
 export type { MdKitEditorDebugEvent } from "./markdown/editorDebug";
+export type { MdKitViewProps } from "./markdown/MdKitView";
 export type { MdKitThemeEditorProps } from "./theme/MdKitThemeEditor";
 export type { CreateMdKitRestAdapterOptions } from "./transport/rest";
 export type { MdKitEditorTheme, MdKitEditorThemeStyle, } from "./theme/editorTheme";

package/dist/index.js

@@ -4,6 +4,7 @@ export { useMdKitDocument } from "./document/useMdKitDocument";
 export { MdKitConflictPanel } from "./document/MdKitConflictPanel";
 export { MdKitDocumentToolbar } from "./document/MdKitDocumentToolbar";
 export { MdKitEditor } from "./markdown/MdKitEditor";
+export { MdKitView } from "./markdown/MdKitView";
 export { MdKitThemeEditor } from "./theme/MdKitThemeEditor";
 export { createMdKitRestAdapter } from "./transport/rest";
 export { createMdKitEditorThemeStyle, darkMdKitEditorTheme, defaultMdKitEditorTheme, } from "./theme/editorTheme";

package/dist/markdown/MdKitView.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from "react";
+export type MdKitViewProps = {
+    className?: string;
+    fillHeight?: boolean;
+    placeholder?: string;
+    style?: CSSProperties;
+    value: string;
+};
+export declare const MdKitView: ({ className, fillHeight, placeholder, style, value, }: MdKitViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/markdown/MdKitView.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { joinClassNames } from "../ui/joinClassNames";
+export const MdKitView = ({ className, fillHeight = false, placeholder, style, value, }) => {
+    const renderedValue = value.trim().length > 0 ? value : (placeholder ?? "");
+    return (_jsx("div", { className: joinClassNames("mp-lb-mdkit-markdown-editor", "mp-lb-mdkit-markdown-view", fillHeight && "mp-lb-mdkit-markdown-editor-fill-height", className), "data-read-only": "true", style: style, children: _jsx("div", { className: "mp-lb-mdkit-editor-shell", children: _jsx("div", { className: "mp-lb-mdkit-editor-surface", children: renderedValue.length > 0 ? (_jsx("div", { className: "mp-lb-mdkit-tiptap mp-lb-mdkit-view-content", children: _jsx(ReactMarkdown, { components: {
+                            a: ({ children, ...linkProps }) => (_jsx("a", { ...linkProps, rel: "noopener noreferrer", target: "_blank", children: children })),
+                        }, remarkPlugins: [remarkGfm], children: renderedValue }) })) : (_jsx("div", { className: "mp-lb-mdkit-editor-empty" })) }) }) }));
+};

package/docs/api.md

@@ -54,6 +54,26 @@ lists, code blocks, blockquotes, and links. Styling is controlled with CSS
 variables on `.mp-lb-mdkit-markdown-editor`. See [Styling](./styling.md) for setup,
 dark mode, fonts, sizing, and theme customization.
 
+### `MdKitView`
+
+Read-only markdown view that uses the same shell, sizing, and markdown styling
+as `MdKitEditor`, but renders with `react-markdown` instead of Tiptap.
+
+```tsx
+<MdKitView value={markdown} />
+<MdKitView fillHeight value={markdown} />
+```
+
+Props:
+
+- `value: string`
+- `placeholder?: string`
+- `fillHeight?: boolean`
+- `className?: string`
+- `style?: CSSProperties`
+
+`fillHeight` uses the same full-pane sizing contract as `MdKitEditor`.
+
 ## Document Persistence
 
 ### `useMdKitDocument`

package/docs/architecture.md

@@ -26,6 +26,12 @@ Collaboration needs a different editor engine internally because it is backed by
 Yjs state and remote cursors, but consumers should not need a separate editor
 component.
 
+`MdKitView` is the read-only companion surface. It accepts a markdown `value`
+and uses the same package styling and full-height layout contract as
+`MdKitEditor`, but it renders markdown without Tiptap or ProseMirror. Use it
+when consumers need previews, version snapshots, or readonly document views that
+visually match the editor without paying the editor runtime cost.
+
 ### Headless Hooks
 
 Storage, versioning, and collaboration controls should come from hooks and

package/docs/index.md

@@ -38,6 +38,24 @@ export function MarkdownEditorExample() {
 
 Use this when you want a local editor, a form field, or a debug surface.
 
+## Read-only View
+
+`MdKitView` renders markdown with the same package stylesheet, CSS variables,
+and `fillHeight` sizing contract as `MdKitEditor`, but it does not mount Tiptap
+or ProseMirror.
+
+```tsx
+import { MdKitView } from "@mp-lb/mdkit";
+import "@mp-lb/mdkit/styles.css";
+
+export function MarkdownPreview({ markdown }: { markdown: string }) {
+  return <MdKitView fillHeight value={markdown} />;
+}
+```
+
+Use this for document previews, restored-version views, or any readonly markdown
+surface that should visually match the editor.
+
 ## Connected Editor
 
 The connected workflow combines:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mp-lb/mdkit",
-  "version": "0.1.0",
+  "version": "0.2.0-main.12.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -78,6 +78,8 @@
     "@tiptap/react": "^3.14.0",
     "@tiptap/starter-kit": "^3.14.0",
     "lucide-react": "^0.554.0",
+    "react-markdown": "10.1.0",
+    "remark-gfm": "4.0.1",
     "yjs": "^13.6.24",
     "zod": "^4.1.12"
   },

package/src/styles.css

@@ -70,6 +70,10 @@
   cursor: default;
 }
 
+.mp-lb-mdkit-markdown-view .mp-lb-mdkit-view-content {
+  overflow-wrap: anywhere;
+}
+
 .mp-lb-mdkit-markdown-editor-fill-height {
   display: flex;
   height: 100%;
@@ -138,6 +142,26 @@
   flex: 1 1 auto;
 }
 
+.mp-lb-mdkit-markdown-view.mp-lb-mdkit-markdown-editor-fill-height
+  .mp-lb-mdkit-editor-shell {
+  height: auto;
+  min-height: 100%;
+  overflow: visible;
+}
+
+.mp-lb-mdkit-markdown-view.mp-lb-mdkit-markdown-editor-fill-height
+  .mp-lb-mdkit-editor-surface {
+  overflow: visible;
+}
+
+.mp-lb-mdkit-markdown-view.mp-lb-mdkit-markdown-editor-fill-height
+  .mp-lb-mdkit-view-content {
+  display: block;
+  height: auto;
+  min-height: 100%;
+  flex: 0 0 auto;
+}
+
 .mp-lb-mdkit-tiptap > * + * {
   margin-top: var(--mp-lb-mdkit-block-gap);
 }
@@ -224,6 +248,37 @@
   color: var(--mp-lb-mdkit-muted-foreground);
 }
 
+.mp-lb-mdkit-tiptap hr {
+  height: 1px;
+  border: 0;
+  background: var(--mp-lb-mdkit-border);
+  margin: var(--mp-lb-mdkit-block-gap) 0;
+}
+
+.mp-lb-mdkit-tiptap img {
+  max-width: 100%;
+  height: auto;
+}
+
+.mp-lb-mdkit-tiptap table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 0 var(--mp-lb-mdkit-block-gap);
+}
+
+.mp-lb-mdkit-tiptap th,
+.mp-lb-mdkit-tiptap td {
+  border: 1px solid var(--mp-lb-mdkit-border);
+  padding: 0.35rem 0.5rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.mp-lb-mdkit-tiptap th {
+  background: var(--mp-lb-mdkit-muted);
+  font-weight: 650;
+}
+
 .mp-lb-mdkit-tiptap p.is-editor-empty:first-child::before {
   color: var(--mp-lb-mdkit-muted-foreground);
   content: attr(data-placeholder);