documint 0.0.4 → 0.0.5
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 +34 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -44,7 +44,9 @@ export function App() {
|
|
|
44
44
|
}
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
## Custom Themes
|
|
48
|
+
|
|
49
|
+
By default, Documint will detect the end-user's system theme and apply either the built-in light or dark theme. You can also specify a theme explicitly by passing `"light"` or `"dark"` to the `theme` prop, or provide a custom theme object with your own colors and styles.
|
|
48
50
|
|
|
49
51
|
```tsx
|
|
50
52
|
import { useState } from "react";
|
|
@@ -63,3 +65,34 @@ export function App() {
|
|
|
63
65
|
return <Documint content={content} onContentChanged={setContent} theme={customTheme} />;
|
|
64
66
|
}
|
|
65
67
|
```
|
|
68
|
+
|
|
69
|
+
## Custom Storage
|
|
70
|
+
|
|
71
|
+
If the document includes http-based images, then the editor will automatically load and render them. However, if you want to support pasting images from the clipboard or uploading images from the user's device, you'll need to provide a `storage` prop that implements the `DocumintStorage` interface.
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { useState } from "react";
|
|
75
|
+
import { Documint, DocumintStorage } from "documint";
|
|
76
|
+
|
|
77
|
+
function createInMemoryStorage(): DocumintStorage {
|
|
78
|
+
const files = new Map<string, Blob>();
|
|
79
|
+
|
|
80
|
+
return {
|
|
81
|
+
async readFile(path) {
|
|
82
|
+
return files.get(path) ?? null;
|
|
83
|
+
},
|
|
84
|
+
async writeFile(file) {
|
|
85
|
+
files.set(file.name, file);
|
|
86
|
+
return file.name;
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
const storage = createInMemoryStorage();
|
|
92
|
+
|
|
93
|
+
export function App() {
|
|
94
|
+
const [content, setContent] = useState("# Documint with Custom Storage");
|
|
95
|
+
|
|
96
|
+
return <Documint content={content} onContentChanged={setContent} storage={storage} />;
|
|
97
|
+
}
|
|
98
|
+
```
|