@clevertask/scribe 0.1.7 → 0.1.9

package/README.md

@@ -43,7 +43,7 @@ npm install @clevertask/scribe
 
 ```tsx
 import "@radix-ui/themes/styles.css";
-import "@clevertask/scribe/dist/main.css";
+import "@clevertask/scribe/styles.css";
 import { Theme } from "@radix-ui/themes";
 import { Scribe, ScribeRef } from "@clevertask/scribe";
 
@@ -67,7 +67,7 @@ function App() {
 
 ```tsx
 import "@radix-ui/themes/styles.css";
-import "@clevertask/scribe/dist/main.css";
+import "@clevertask/scribe/styles.css";
 import { Theme } from "@radix-ui/themes";
 import { Scribe, ScribeOnChangeContents } from "@clevertask/scribe";
 
@@ -93,7 +93,7 @@ function App() {
 
 ```tsx
 import "@radix-ui/themes/styles.css";
-import "@clevertask/scribe/dist/main.css";
+import "@clevertask/scribe/styles.css";
 import { Theme } from "@radix-ui/themes";
 import { Scribe } from "@clevertask/scribe";
 
@@ -148,7 +148,7 @@ The table of contents currently tracks default TipTap heading nodes only. Each i
 
 ## Math Expressions
 
-Scribe's default UI is styled with Radix Themes components. Load `@radix-ui/themes/styles.css` once in your app alongside `@clevertask/scribe/dist/main.css`, and render Scribe somewhere inside a Radix `<Theme>`.
+Scribe's default UI is styled with Radix Themes components. Load `@radix-ui/themes/styles.css` once in your app alongside `@clevertask/scribe/styles.css`, and render Scribe somewhere inside a Radix `<Theme>`.
 
 Scribe ships with `@tiptap/extension-mathematics`. The extension renders math when it receives math nodes in the HTML:
 
@@ -182,6 +182,7 @@ If your content arrives as HTML (for example from a server), use the helper belo
 | Prop                      | Type                                                               | Default                    | Description                                                                                                                                                                                                                                              |
 | ------------------------- | ------------------------------------------------------------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `content`                 | `string`                                                           | `undefined`                | The initial content of the editor. Controlled updates through this prop are deprecated; prefer `ScribeRef.setContent` for programmatic updates after mount.                                                                                              |
+| `ariaLabel`               | `string`                                                           | `Rich text editor`         | Sets the accessible name for the rich-text editing surface. Use a unique label when a page contains more than one editor.                                                                                                                                |
 | `onContentChange`         | `(content: ScribeOnChangeContents) => void;`                       | `undefined`                | A callback function triggered whenever the editor's content changes. It receives an object containing the current content in various formats (`jsonContent`, `htmlContent`, `markdownContent`). Internal table-of-contents metadata updates are ignored. |
 | `editable`                | `boolean`                                                          | `true`                     | Controls whether the editor is editable.                                                                                                                                                                                                                 |
 | `autoFocus`               | `boolean`                                                          | `false`                    | Controls whether the editor should automatically focus when mounted.                                                                                                                                                                                     |

package/dist/{BarMenu-DC-S5Ggq.js → BarMenu-BG_w4DVo.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./dist-DT3iiwSr.js";
+import { a as e } from "./dist-BgEySLwo.js";
 import { getPopupMountTarget as t } from "./components/Scribe/extension/getPopupMountTarget.js";
 import n from "./components/Menu/LinkEditor.js";
 import { hideLinkBubbleMenu as r } from "./components/Menu/linkBubbleMenuPlugin.js";
@@ -55,60 +55,73 @@ var j = ({ editor: k }) => {
 	}, [k]), U = T(() => {
 		let e = L.trim();
 		e && (k.chain().focus().setImage({ src: e }).run(), P(!1));
-	}, [k, L]), W = T((e, t) => {
-		e.preventDefault(), t();
-	}, []), G = T((e) => {
+	}, [k, L]), W = T((e) => {
 		e.preventDefault();
-	}, []), K = T(({ target: { value: e } }) => {
+	}, []), G = T(({ target: { value: e } }) => {
 		R(e);
-	}, []), q = [
+	}, []), K = [
 		[
 			{
 				name: "bold",
 				icon: a,
 				command: () => k.chain().focus().toggleBold().run(),
-				isActive: () => !!B?.isBold
+				isActive: () => !!B?.isBold,
+				isToggle: !0,
+				label: "Bold"
 			},
 			{
 				name: "italic",
 				icon: d,
 				command: () => k.chain().focus().toggleItalic().run(),
-				isActive: () => !!B?.isItalic
+				isActive: () => !!B?.isItalic,
+				isToggle: !0,
+				label: "Italic"
 			},
 			{
 				name: "strike",
 				icon: m,
 				command: () => k.chain().focus().toggleStrike().run(),
-				isActive: () => !!B?.isStrike
+				isActive: () => !!B?.isStrike,
+				isToggle: !0,
+				label: "Strikethrough"
 			}
 		],
 		[{
 			name: "inline-code",
 			icon: u,
 			command: () => k.chain().focus().toggleCode().run(),
-			isActive: () => !!B?.isCode
+			isActive: () => !!B?.isCode,
+			isToggle: !0,
+			label: "Inline code"
 		}, {
 			name: "highlight",
 			icon: s,
 			command: () => k.chain().focus().toggleHighlight().run(),
-			isActive: () => !!B?.isHighlight
+			isActive: () => !!B?.isHighlight,
+			isToggle: !0,
+			label: "Highlight"
 		}],
 		[{
 			name: "unordered-list",
 			icon: h,
 			command: () => k.chain().focus().toggleBulletList().run(),
-			isActive: () => !!B?.isBulletList
+			isActive: () => !!B?.isBulletList,
+			isToggle: !0,
+			label: "Bulleted list"
 		}, {
 			name: "ordered-list",
 			icon: p,
 			command: () => k.chain().focus().toggleOrderedList().run(),
-			isActive: () => !!B?.isOrderedList
+			isActive: () => !!B?.isOrderedList,
+			isToggle: !0,
+			label: "Numbered list"
 		}],
 		[
 			{
 				name: "link",
 				icon: f,
 				isActive: () => !!B?.isLink,
+				label: "Link",
 				popover: "link"
 			},
 			{
@@ -116,35 +129,43 @@ var j = ({ editor: k }) => {
 				icon: l,
 				isActive: () => !!B?.isImage,
 				disabled: !1,
+				label: "Insert image",
 				popover: "image"
 			},
 			{
 				name: "code-block",
 				icon: o,
 				command: () => k.chain().focus().toggleCodeBlock().run(),
-				isActive: () => !!B?.isCodeBlock
+				isActive: () => !!B?.isCodeBlock,
+				isToggle: !0,
+				label: "Code block"
 			},
 			{
 				name: "block-quote",
 				icon: i,
 				command: () => k.chain().focus().toggleBlockquote().run(),
-				isActive: () => !!B?.isBlockquote
+				isActive: () => !!B?.isBlockquote,
+				isToggle: !0,
+				label: "Block quote"
 			},
 			{
 				name: "horizontal-line",
 				icon: c,
 				command: () => k.chain().focus().setHorizontalRule().run(),
-				isActive: () => !1
+				isActive: () => !1,
+				label: "Horizontal rule"
 			}
 		]
 	];
 	return /* @__PURE__ */ D(g, {
 		className: "scribe-toolbar",
+		role: "toolbar",
+		"aria-label": "Text formatting",
 		children: /* @__PURE__ */ D(v, {
 			align: "center",
 			gap: "3",
 			wrap: "wrap",
-			children: q.map((e, t) => /* @__PURE__ */ O(w, { children: [/* @__PURE__ */ D(v, {
+			children: K.map((e, t) => /* @__PURE__ */ O(w, { children: [/* @__PURE__ */ D(v, {
 				align: "center",
 				gap: "2",
 				wrap: "wrap",
@@ -153,15 +174,17 @@ var j = ({ editor: k }) => {
 					onOpenChange: V,
 					children: [/* @__PURE__ */ D(b.Trigger, { children: /* @__PURE__ */ D(y, {
 						type: "button",
+						"aria-label": e.label,
 						radius: "medium",
 						color: "gray",
 						variant: e.isActive() ? "soft" : "ghost",
 						disabled: e.disabled || !k.isEditable,
-						title: e.name,
-						onMouseDown: G,
+						title: e.label,
+						onMouseDown: W,
 						className: A(e.disabled && "scribe-toolbar-button--disabled"),
 						children: /* @__PURE__ */ D(e.icon, { className: "scribe-toolbar-icon" })
 					}) }), /* @__PURE__ */ D(b.Content, {
+						"aria-label": "Link settings",
 						container: z,
 						size: "2",
 						side: "bottom",
@@ -184,15 +207,17 @@ var j = ({ editor: k }) => {
 					onOpenChange: H,
 					children: [/* @__PURE__ */ D(b.Trigger, { children: /* @__PURE__ */ D(y, {
 						type: "button",
+						"aria-label": e.label,
 						radius: "medium",
 						color: "gray",
 						variant: e.isActive() ? "soft" : "ghost",
 						disabled: e.disabled || !k.isEditable,
-						title: e.name,
-						onMouseDown: G,
+						title: e.label,
+						onMouseDown: W,
 						className: A(e.disabled && "scribe-toolbar-button--disabled"),
 						children: /* @__PURE__ */ D(e.icon, { className: "scribe-toolbar-icon" })
 					}) }), /* @__PURE__ */ D(b.Content, {
+						"aria-label": "Insert image",
 						container: z,
 						size: "2",
 						side: "bottom",
@@ -228,7 +253,7 @@ var j = ({ editor: k }) => {
 										autoFocus: !0,
 										placeholder: "https://example.com/image.png",
 										value: L,
-										onChange: K
+										onChange: G
 									})]
 								}) }),
 								/* @__PURE__ */ O(v, {
@@ -251,16 +276,19 @@ var j = ({ editor: k }) => {
 					})]
 				}, `${e.name}-${t}`) : /* @__PURE__ */ D(y, {
 					type: "button",
+					"aria-label": e.label,
+					"aria-pressed": e.isToggle ? e.isActive() : void 0,
 					radius: "medium",
 					color: "gray",
 					variant: e.isActive() ? "soft" : "ghost",
 					disabled: e.disabled || !k.isEditable,
-					title: e.name,
-					onMouseDown: (t) => W(t, e.command),
+					title: e.label,
+					onMouseDown: W,
+					onClick: e.command,
 					className: A(e.disabled && "scribe-toolbar-button--disabled"),
 					children: /* @__PURE__ */ D(e.icon, { className: "scribe-toolbar-icon" })
 				}, `${e.name}-${t}`))
-			}), t === q.length - 1 ? null : /* @__PURE__ */ D(x, {
+			}), t === K.length - 1 ? null : /* @__PURE__ */ D(x, {
 				orientation: "vertical",
 				decorative: !0,
 				style: { height: 20 }