documint 0.0.10 → 0.0.11

package/README.md

@@ -20,7 +20,7 @@ A canvas-based, batteries-included markdown editor for React.
 
 - **Comments and presence for review workflows** — Anchor comments to any range of text, with full threading (replies, resolution, deletion) and self-repairing quote-based matching after edits. External user and AI agent presence can be projected into the document as live cursors and viewport indicators without becoming document content.
 
-- **Fast and lightweight** — Canvas-based rendering optimized for hot-path performance even on large documents. A custom markdown parser, editor engine, and layout/rendering system all ship in a bundle <70 KB gzipped.
+- **Fast and lightweight** — Canvas-based rendering optimized for hot-path performance even on large documents. A custom markdown parser, editor engine, and layout/rendering system all ship in a bundle <80 KB gzipped.
 
 ## Getting Started
 
@@ -44,6 +44,35 @@ export function App() {
 }
 ```
 
+## Custom Actions
+
+Use the `actions` prop to add custom buttons to contextual leaf menus. The first supported target is `selection`, which appears in the annotation toolbar when text is selected. Each action provides a Lucide icon name and receives the selected text when clicked.
+
+```tsx
+import { useState } from "react";
+import { Documint } from "documint";
+
+export function App() {
+  const [content, setContent] = useState("Select this text");
+
+  return (
+    <Documint
+      content={content}
+      onContentChanged={setContent}
+      actions={{
+        selection: {
+          icon: "copy",
+          label: "Copy selected text",
+          onClick: (selectedText) => {
+            navigator.clipboard.writeText(selectedText);
+          },
+        },
+      }}
+    />
+  );
+}
+```
+
 ## 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.
@@ -95,4 +124,4 @@ export function App() {
 
   return <Documint content={content} onContentChanged={setContent} storage={storage} />;
 }
-```
+```

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { IconName } from 'lucide-react/dynamic';
+
 export type CommentThread = {
 	quote: string;
 	comments: Comment$1[];
@@ -202,6 +204,7 @@ export declare const defaultKeybindings: EditorKeybinding[];
 export type DocumintProps = {
 	content: string;
 	className?: string;
+	actions?: DocumintActions;
 	theme?: DocumintTheme;
 	keybindings?: EditorKeybinding[];
 	presence?: DocumentPresence[];
@@ -210,6 +213,14 @@ export type DocumintProps = {
 	onContentChanged?: (content: string, document: Document$1) => void;
 	onCommentChanged?: (change: CommentChange) => void;
 };
+export type DocumintAction<T> = {
+	icon: IconName;
+	label?: string;
+	onClick: (arg: T) => void;
+};
+export type DocumintActions = {
+	selection?: DocumintAction<string> | readonly DocumintAction<string>[];
+};
 export type CommentChange = {
 	kind: "added";
 	comment: Comment$1;
@@ -233,7 +244,7 @@ export type DocumintTheme = EditorTheme | {
 	dark: EditorTheme;
 	light: EditorTheme;
 };
-export declare function Documint({ className, content, keybindings, onCommentChanged, onContentChanged, presence, storage, theme, users, }: DocumintProps): import("react/jsx-runtime").JSX.Element;
+export declare function Documint({ content, ...props }: DocumintProps): import("react/jsx-runtime").JSX.Element;
 export declare const lightTheme: EditorTheme;
 export declare const darkTheme: EditorTheme;
 export declare const mintTheme: EditorTheme;