documint 0.0.3 → 0.0.5

package/README.md

@@ -40,11 +40,13 @@ This editor takes markdown in and gives markdown back out.
 export function App() {
   const [content, setContent] = useState(initialMarkdown);
 
-  return <Documint content={content} onContentChange={setContent} />;
+  return <Documint content={content} onContentChanged={setContent} />;
 }
 ```
 
-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";
@@ -60,6 +62,37 @@ const customTheme = {
 export function App() {
   const [content, setContent] = useState("# Themed Documint");
 
-  return <Documint content={content} onContentChange={setContent} theme={customTheme} />;
+  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

@@ -11,6 +11,7 @@ type Comment$1 = {
 type Document$1 = {
 	blocks: Block[];
 	comments: CommentThread[];
+	frontMatter?: string;
 };
 export type Block = ParagraphBlock | HeadingBlock | ListBlock | ListItemBlock | BlockquoteBlock | TableBlock | DividerBlock | CodeBlock | DirectiveBlock | RawBlock;
 export type Inline = Text$1 | Link | Image$1 | Code | LineBreak | Raw;
@@ -199,8 +200,28 @@ export type DocumintProps = {
 	keybindings?: EditorKeybinding[];
 	presence?: DocumentPresence[];
 	users?: DocumentUser[];
-	onContentChange?: (content: string, document: Document$1) => void;
-	onStateChange?: (state: DocumintState) => void;
+	onContentChanged?: (content: string, document: Document$1) => void;
+	onStateChanged?: (state: DocumintState) => void;
+	onCommentChanged?: (event: CommentChangedEvent) => void;
+};
+export type CommentChangedEvent = {
+	kind: "added";
+	comment: Comment$1;
+	mentionedUserIds: string[];
+	thread: CommentThread;
+	threadIndex: number;
+} | {
+	kind: "edited";
+	comment: Comment$1;
+	previousBody: string;
+	mentionedUserIds: string[];
+	thread: CommentThread;
+	threadIndex: number;
+} | {
+	kind: "deleted";
+	comment: Comment$1;
+	thread: CommentThread;
+	threadIndex: number;
 };
 export type DocumintTheme = EditorTheme | {
 	dark: EditorTheme;
@@ -218,7 +239,7 @@ export type DocumintState = {
 	selectionFrom: number;
 	selectionTo: number;
 };
-export declare function Documint({ className, content, keybindings, onContentChange, onStateChange, presence, theme, users, }: DocumintProps): import("react/jsx-runtime").JSX.Element;
+export declare function Documint({ className, content, keybindings, onCommentChanged, onContentChanged, onStateChanged, presence, theme, users, }: DocumintProps): import("react/jsx-runtime").JSX.Element;
 export declare const lightTheme: EditorTheme;
 export declare const darkTheme: EditorTheme;
 export declare const mintTheme: EditorTheme;