@mdzip/editor-react 1.2.2 → 1.2.7
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/README.md +101 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# @mdzip/editor-react
|
|
2
|
+
|
|
3
|
+
React component wrapper for the MDZip workspace editor.
|
|
4
|
+
|
|
5
|
+
`@mdzip/editor-react` provides a `MdzipWorkspace` component that embeds the full MDZip workspace UI — document preview, editor, package navigator, and asset manager — as a native React component.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @mdzip/editor-react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Peer dependencies: `react` and `react-dom` >=18.
|
|
14
|
+
|
|
15
|
+
## Basic Usage
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { MdzipWorkspace } from '@mdzip/editor-react';
|
|
19
|
+
|
|
20
|
+
export function Viewer({ bytes }: { bytes: Uint8Array }) {
|
|
21
|
+
return (
|
|
22
|
+
<div style={{ height: 600 }}>
|
|
23
|
+
<MdzipWorkspace
|
|
24
|
+
bytes={bytes}
|
|
25
|
+
fileName="document.mdz"
|
|
26
|
+
mode="read-only"
|
|
27
|
+
controls="viewer"
|
|
28
|
+
onFailed={console.error}
|
|
29
|
+
/>
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
The parent element must have an explicit height. The component expands to fill it.
|
|
36
|
+
|
|
37
|
+
## Editor Mode
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
<MdzipWorkspace
|
|
41
|
+
bytes={bytes}
|
|
42
|
+
fileName="document.mdz"
|
|
43
|
+
mode="editable"
|
|
44
|
+
controls="standalone-editor"
|
|
45
|
+
onSaved={({ bytes }) => persist(bytes)}
|
|
46
|
+
onChanged={({ bytes }) => setDirty(true)}
|
|
47
|
+
/>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Props
|
|
51
|
+
|
|
52
|
+
| Prop | Type | Default | Description |
|
|
53
|
+
|------|------|---------|-------------|
|
|
54
|
+
| `bytes` | `Uint8Array \| null` | — | Raw archive bytes to open |
|
|
55
|
+
| `workspace` | `MdzWorkspace \| null` | — | Pre-built workspace object |
|
|
56
|
+
| `fileName` | `string` | `'document.mdz'` | Filename used for format detection and Save dialogs |
|
|
57
|
+
| `mode` | `MdzipWorkspaceMode` | `'read-only'` | `'read-only'` or `'editable'` |
|
|
58
|
+
| `sourceFormat` | `MdzipSourceFormat` | — | Override format detection: `'mdz'` or `'markdown'` |
|
|
59
|
+
| `controls` | `MdzipControlPreset \| MdzipControlPolicy` | `'viewer'` | `'preview'`, `'viewer'`, `'standalone-editor'`, `'hosted-editor'`, or a policy object |
|
|
60
|
+
| `initialLayout` | `MdzipWorkspaceLayout` | — | Starting layout: `'preview'`, `'editor'`, `'split'` |
|
|
61
|
+
| `initialColorScheme` | `MdzipColorScheme` | — | `'light'` or `'dark'` |
|
|
62
|
+
| `navigationMode` | `MdzipNavigationMode` | — | Package navigation mode |
|
|
63
|
+
| `navigationButtonActive` | `boolean` | — | Whether the navigation button is shown |
|
|
64
|
+
|
|
65
|
+
## Callbacks
|
|
66
|
+
|
|
67
|
+
| Prop | Signature | Description |
|
|
68
|
+
|------|-----------|-------------|
|
|
69
|
+
| `onChanged` | `(event: MdzipWorkspaceChange) => void` | Called when archive bytes change |
|
|
70
|
+
| `onSaved` | `(event: MdzipWorkspaceSave) => void` | Called on Save |
|
|
71
|
+
| `onSnapshotChanged` | `(snapshot: MdzipWorkspaceSnapshot) => void` | Called on any state change |
|
|
72
|
+
| `onSelectionChanged` | `(snapshot: MdzipWorkspaceSnapshot) => void` | Called when the editor selection changes |
|
|
73
|
+
| `onDirtyChanged` | `(snapshot: MdzipWorkspaceSnapshot) => void` | Called when the dirty flag changes |
|
|
74
|
+
| `onValidationChanged` | `(snapshot: MdzipWorkspaceSnapshot) => void` | Called when validation state changes |
|
|
75
|
+
| `onColorSchemeChanged` | `(colorScheme: MdzipColorScheme) => void` | Called when the color scheme changes |
|
|
76
|
+
| `onFailed` | `(error: unknown) => void` | Called on unrecoverable errors |
|
|
77
|
+
|
|
78
|
+
## Imperative API
|
|
79
|
+
|
|
80
|
+
Use a `ref` to access the imperative handle:
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { useRef } from 'react';
|
|
84
|
+
import { MdzipWorkspace, type MdzipWorkspaceHandle } from '@mdzip/editor-react';
|
|
85
|
+
|
|
86
|
+
const ref = useRef<MdzipWorkspaceHandle>(null);
|
|
87
|
+
|
|
88
|
+
// Flush pending edits and persist
|
|
89
|
+
const snapshot = await ref.current?.flush();
|
|
90
|
+
if (snapshot) {
|
|
91
|
+
await save(snapshot.bytes);
|
|
92
|
+
ref.current?.markPersisted();
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Execute editor commands
|
|
96
|
+
await ref.current?.executeCommand('bold');
|
|
97
|
+
|
|
98
|
+
return <MdzipWorkspace ref={ref} ... />;
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
See the [`@mdzip/editor`](https://www.npmjs.com/package/@mdzip/editor) package for the full API reference, theming guide, and framework-agnostic usage.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { MdzipControlPolicy, MdzipControlPreset, MdzipColorScheme, MdzipDocumentChangeEvent, MdzipEditorCommand, MdzipEditorSnapshot, MdzipNavigationMode, MdzipRemoveAssetOptions, MdzipSourceFormat, MdzipWorkspaceChange, MdzipWorkspaceLayout, MdzipWorkspaceMode, MdzipWorkspaceSave, MdzipWorkspaceSnapshot, MdzWorkspace, MdzWorkspaceAsset } from 'mdzip
|
|
1
|
+
import type { MdzipControlPolicy, MdzipControlPreset, MdzipColorScheme, MdzipDocumentChangeEvent, MdzipEditorCommand, MdzipEditorSnapshot, MdzipNavigationMode, MdzipRemoveAssetOptions, MdzipSourceFormat, MdzipWorkspaceChange, MdzipWorkspaceLayout, MdzipWorkspaceMode, MdzipWorkspaceSave, MdzipWorkspaceSnapshot, MdzWorkspace, MdzWorkspaceAsset } from '@mdzip/editor';
|
|
2
2
|
export interface MdzipWorkspaceProps {
|
|
3
3
|
bytes?: Uint8Array | null;
|
|
4
4
|
workspace?: MdzWorkspace | null;
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,wBAAwB,EACxB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,iBAAiB,EAClB,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
|
|
3
|
-
import { MdzipWorkspaceView } from 'mdzip
|
|
3
|
+
import { MdzipWorkspaceView } from '@mdzip/editor';
|
|
4
4
|
export const MdzipWorkspace = forwardRef(function MdzipWorkspace({ bytes, workspace, fileName = 'document.mdz', mode = 'read-only', sourceFormat, controls = 'viewer', initialLayout, initialColorScheme, navigationMode, navigationButtonActive, onChanged, onSaved, onWorkspaceChanged, onDocumentChanged, onAssetChanged, onManifestChanged, onSnapshotChanged, onSelectionChanged, onDirtyChanged, onValidationChanged, onColorSchemeChanged, onFailed, }, forwardedRef) {
|
|
5
5
|
const ref = useRef(null);
|
|
6
6
|
const viewRef = useRef(null);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mdzip/editor-react",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.7",
|
|
4
4
|
"description": "React wrapper for the MDZip workspace editor.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"build": "tsc -p tsconfig.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@mdzip/editor": "1.2.
|
|
22
|
+
"@mdzip/editor": "^1.2.6"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"react": ">=18.0.0",
|