documint 0.0.10 → 0.0.12

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 { LucideIcon } from 'lucide-react';
+
 export type CommentThread = {
 	quote: string;
 	comments: Comment$1[];
@@ -14,7 +16,7 @@ type Document$1 = {
 	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;
+export type Inline = Text$1 | Link | Image$1 | Mention | Code | LineBreak | Raw;
 type DocumentNode<K extends string, P = {}> = {
 	id: string;
 	type: K;
@@ -87,6 +89,10 @@ type Image$1 = DocumentNode<"image", {
 	url: string;
 	width: number | null;
 }>;
+type Mention = DocumentNode<"mention", {
+	name: string;
+	userId: string;
+}>;
 type LineBreak = DocumentNode<"lineBreak">;
 type Code = DocumentNode<"code", {
 	code: string;
@@ -202,6 +208,7 @@ export declare const defaultKeybindings: EditorKeybinding[];
 export type DocumintProps = {
 	content: string;
 	className?: string;
+	actions?: DocumintActions;
 	theme?: DocumintTheme;
 	keybindings?: EditorKeybinding[];
 	presence?: DocumentPresence[];
@@ -209,6 +216,15 @@ export type DocumintProps = {
 	users?: DocumentUser[];
 	onContentChanged?: (content: string, document: Document$1) => void;
 	onCommentChanged?: (change: CommentChange) => void;
+	onUserMentioned?: (event: UserMentionEvent) => void;
+};
+export type DocumintAction<T> = {
+	icon: LucideIcon;
+	label: string;
+	onClick: (arg: T) => void;
+};
+export type DocumintActions = {
+	selection?: DocumintAction<string> | readonly DocumintAction<string>[];
 };
 export type CommentChange = {
 	kind: "added";
@@ -229,11 +245,16 @@ export type CommentChange = {
 	thread: CommentThread;
 	threadIndex: number;
 };
+export type UserMentionEvent = {
+	lineMarkdown: string;
+	lineNumber: number;
+	userId: string;
+};
 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;