documint 0.0.4 → 0.0.6

package/README.md

@@ -44,7 +44,9 @@ export function App() {
 }
 ```
 
-You can also start from one of the built-in themes and tweak just the values you care about.
+## Custom Themes
+
+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.
 
 ```tsx
 import { useState } from "react";
@@ -63,3 +65,34 @@ export function App() {
   return <Documint content={content} onContentChanged={setContent} theme={customTheme} />;
 }
 ```
+
+## Custom Storage
+
+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.
+
+```tsx
+import { useState } from "react";
+import { Documint, DocumintStorage } from "documint";
+
+function createInMemoryStorage(): DocumintStorage {
+  const files = new Map<string, Blob>();
+
+  return {
+    async readFile(path) {
+      return files.get(path) ?? null;
+    },
+    async writeFile(file) {
+      files.set(file.name, file);
+      return file.name;
+    },
+  };
+}
+
+const storage = createInMemoryStorage();
+
+export function App() {
+  const [content, setContent] = useState("# Documint with Custom Storage");
+
+  return <Documint content={content} onContentChanged={setContent} storage={storage} />;
+}
+```

package/dist/index.d.ts

@@ -106,7 +106,11 @@ export type Anchor = {
 	prefix?: string;
 	suffix?: string;
 };
-type EditorCommand = "dedent" | "deleteBackward" | "indent" | "insertLineBreak" | "moveListItemDown" | "moveListItemUp" | "moveToDocumentEnd" | "moveToDocumentStart" | "moveToLineEnd" | "moveToLineStart" | "redo" | "selectAll" | "toggleBold" | "toggleInlineCode" | "toggleItalic" | "toggleStrikethrough" | "toggleUnderline" | "undo";
+export type DocumintStorage = {
+	readFile(path: string): Promise<Blob | null>;
+	writeFile(file: File): Promise<string>;
+};
+type EditorCommand = "dedent" | "deleteBackward" | "indent" | "insertLineBreak" | "moveListItemDown" | "moveListItemUp" | "moveToDocumentEnd" | "moveToDocumentStart" | "moveToLineEnd" | "moveToLineStart" | "redo" | "selectAll" | "toggleBold" | "toggleCode" | "toggleItalic" | "toggleStrikethrough" | "toggleUnderline" | "undo";
 export type EditorTheme = {
 	activeBlockBackground: string;
 	activeBlockFlash: string;
@@ -199,12 +203,13 @@ export type DocumintProps = {
 	theme?: DocumintTheme;
 	keybindings?: EditorKeybinding[];
 	presence?: DocumentPresence[];
+	storage?: DocumintStorage;
 	users?: DocumentUser[];
 	onContentChanged?: (content: string, document: Document$1) => void;
 	onStateChanged?: (state: DocumintState) => void;
-	onCommentChanged?: (event: CommentChangedEvent) => void;
+	onCommentChanged?: (change: CommentChange) => void;
 };
-export type CommentChangedEvent = {
+export type CommentChange = {
 	kind: "added";
 	comment: Comment$1;
 	mentionedUserIds: string[];
@@ -239,7 +244,7 @@ export type DocumintState = {
 	selectionFrom: number;
 	selectionTo: number;
 };
-export declare function Documint({ className, content, keybindings, onCommentChanged, onContentChanged, onStateChanged, presence, theme, users, }: DocumintProps): import("react/jsx-runtime").JSX.Element;
+export declare function Documint({ className, content, keybindings, onCommentChanged, onContentChanged, onStateChanged, presence, storage, theme, users, }: DocumintProps): import("react/jsx-runtime").JSX.Element;
 export declare const lightTheme: EditorTheme;
 export declare const darkTheme: EditorTheme;
 export declare const mintTheme: EditorTheme;