@clevertask/scribe 0.1.4 → 0.1.5

package/README.md

@@ -2,6 +2,9 @@
 
 A versatile, block-based rich text editor for diverse applications, built with Tiptap and inspired by Notion's intuitive interface. `@clevertask/scribe` allows you to seamlessly view, create, and edit rich text content, with added support for Markdown parsing.
 
+> [!WARNING]
+> Scribe is experimental and has not reached version 1.0. Its APIs, default extensions, editor behavior, and built-in UI can change between releases, including minor releases. Pin an exact package version and test each upgrade before deployment. Forks and contributions are welcome.
+
 ## Features
 
 - **Block-based Editing:** Enjoy a familiar and intuitive Notion-style editing experience.

package/dist/BarMenu-V1uRL3bt.js

@@ -0,0 +1,272 @@
+import { i as e } from "./dist-RuuEA1GJ.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";
+import { BlockQuoteIcon as i, BoldIcon as a, CodeBlockIcon as o, HighlightIcon as s, HorizontalLineIcon as c, ImageIcon as l, InlineCodeIcon as u, ItalicIcon as d, LinkIcon as f, OrderedListIcon as p, StrikeIcon as m, UnorderedListIcon as h } from "./icons/ToolbarIcons.js";
+import { Box as g, Button as _, Flex as v, IconButton as y, Popover as b, Separator as x, Text as S, TextField as C } from "@radix-ui/themes";
+import { Fragment as w, useCallback as T, useState as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+//#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function k(e) {
+	var t, n, r = "";
+	if (typeof e == "string" || typeof e == "number") r += e;
+	else if (typeof e == "object") if (Array.isArray(e)) {
+		var i = e.length;
+		for (t = 0; t < i; t++) e[t] && (n = k(e[t])) && (r && (r += " "), r += n);
+	} else for (n in e) e[n] && (r && (r += " "), r += n);
+	return r;
+}
+function A() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = k(e)) && (r && (r += " "), r += t);
+	return r;
+}
+//#endregion
+//#region lib/components/Menu/BarMenu.tsx
+var j = ({ editor: k }) => {
+	let [j, M] = E(!1), [N, P] = E(!1), [F, I] = E(""), [L, R] = E(""), z = t(k), B = e({
+		editor: k,
+		selector: ({ editor: e }) => e ? {
+			isBold: e.isActive("bold"),
+			isItalic: e.isActive("italic"),
+			isStrike: e.isActive("strike"),
+			isCode: e.isActive("code"),
+			isHighlight: e.isActive("highlight"),
+			isBulletList: e.isActive("bulletList"),
+			isOrderedList: e.isActive("orderedList"),
+			isLink: e.isActive("link"),
+			isImage: e.isActive("image"),
+			isCodeBlock: e.isActive("codeBlock"),
+			isBlockquote: e.isActive("blockquote")
+		} : null
+	}), V = T((e) => {
+		if (e) {
+			r(k);
+			let e = k.getAttributes("link").href ?? "";
+			I(e), P(!1);
+		}
+		M(e);
+	}, [k]), H = T((e) => {
+		if (e) {
+			r(k);
+			let e = k.getAttributes("image").src ?? "";
+			R(e), M(!1);
+		}
+		P(e);
+	}, [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) => {
+		e.preventDefault();
+	}, []), K = T(({ target: { value: e } }) => {
+		R(e);
+	}, []), q = [
+		[
+			{
+				name: "bold",
+				icon: a,
+				command: () => k.chain().focus().toggleBold().run(),
+				isActive: () => !!B?.isBold
+			},
+			{
+				name: "italic",
+				icon: d,
+				command: () => k.chain().focus().toggleItalic().run(),
+				isActive: () => !!B?.isItalic
+			},
+			{
+				name: "strike",
+				icon: m,
+				command: () => k.chain().focus().toggleStrike().run(),
+				isActive: () => !!B?.isStrike
+			}
+		],
+		[{
+			name: "inline-code",
+			icon: u,
+			command: () => k.chain().focus().toggleCode().run(),
+			isActive: () => !!B?.isCode
+		}, {
+			name: "highlight",
+			icon: s,
+			command: () => k.chain().focus().toggleHighlight().run(),
+			isActive: () => !!B?.isHighlight
+		}],
+		[{
+			name: "unordered-list",
+			icon: h,
+			command: () => k.chain().focus().toggleBulletList().run(),
+			isActive: () => !!B?.isBulletList
+		}, {
+			name: "ordered-list",
+			icon: p,
+			command: () => k.chain().focus().toggleOrderedList().run(),
+			isActive: () => !!B?.isOrderedList
+		}],
+		[
+			{
+				name: "link",
+				icon: f,
+				isActive: () => !!B?.isLink,
+				popover: "link"
+			},
+			{
+				name: "image",
+				icon: l,
+				isActive: () => !!B?.isImage,
+				disabled: !1,
+				popover: "image"
+			},
+			{
+				name: "code-block",
+				icon: o,
+				command: () => k.chain().focus().toggleCodeBlock().run(),
+				isActive: () => !!B?.isCodeBlock
+			},
+			{
+				name: "block-quote",
+				icon: i,
+				command: () => k.chain().focus().toggleBlockquote().run(),
+				isActive: () => !!B?.isBlockquote
+			},
+			{
+				name: "horizontal-line",
+				icon: c,
+				command: () => k.chain().focus().setHorizontalRule().run(),
+				isActive: () => !1
+			}
+		]
+	];
+	return /* @__PURE__ */ D(g, {
+		className: "scribe-toolbar",
+		children: /* @__PURE__ */ D(v, {
+			align: "center",
+			gap: "3",
+			wrap: "wrap",
+			children: q.map((e, t) => /* @__PURE__ */ O(w, { children: [/* @__PURE__ */ D(v, {
+				align: "center",
+				gap: "2",
+				wrap: "wrap",
+				children: e.map((e, t) => e.popover === "link" ? /* @__PURE__ */ O(b.Root, {
+					open: j,
+					onOpenChange: V,
+					children: [/* @__PURE__ */ D(b.Trigger, { children: /* @__PURE__ */ D(y, {
+						type: "button",
+						radius: "medium",
+						color: "gray",
+						variant: e.isActive() ? "soft" : "ghost",
+						disabled: e.disabled || !k.isEditable,
+						title: e.name,
+						onMouseDown: G,
+						className: A(e.disabled && "scribe-toolbar-button--disabled"),
+						children: /* @__PURE__ */ D(e.icon, { className: "scribe-toolbar-icon" })
+					}) }), /* @__PURE__ */ D(b.Content, {
+						container: z,
+						size: "2",
+						side: "bottom",
+						align: "start",
+						style: {
+							maxWidth: "calc(100vw - 32px)",
+							width: 320
+						},
+						children: /* @__PURE__ */ D(n, {
+							editor: k,
+							existingHref: k.getAttributes("link").href ?? "",
+							onClose: () => M(!1),
+							onValueChange: I,
+							selectTextblockEndAfterSave: !0,
+							value: F
+						})
+					})]
+				}, `${e.name}-${t}`) : e.popover === "image" ? /* @__PURE__ */ O(b.Root, {
+					open: N,
+					onOpenChange: H,
+					children: [/* @__PURE__ */ D(b.Trigger, { children: /* @__PURE__ */ D(y, {
+						type: "button",
+						radius: "medium",
+						color: "gray",
+						variant: e.isActive() ? "soft" : "ghost",
+						disabled: e.disabled || !k.isEditable,
+						title: e.name,
+						onMouseDown: G,
+						className: A(e.disabled && "scribe-toolbar-button--disabled"),
+						children: /* @__PURE__ */ D(e.icon, { className: "scribe-toolbar-icon" })
+					}) }), /* @__PURE__ */ D(b.Content, {
+						container: z,
+						size: "2",
+						side: "bottom",
+						align: "start",
+						style: {
+							maxWidth: "calc(100vw - 32px)",
+							width: 320
+						},
+						children: /* @__PURE__ */ O(v, {
+							direction: "column",
+							gap: "4",
+							children: [
+								/* @__PURE__ */ O(g, { children: [/* @__PURE__ */ D(S, {
+									as: "p",
+									size: "3",
+									weight: "medium",
+									children: "Image"
+								}), /* @__PURE__ */ D(S, {
+									as: "p",
+									size: "2",
+									color: "gray",
+									children: "Insert an image from a URL."
+								})] }),
+								/* @__PURE__ */ D("label", { children: /* @__PURE__ */ O(v, {
+									direction: "column",
+									gap: "2",
+									children: [/* @__PURE__ */ D(S, {
+										as: "span",
+										size: "2",
+										weight: "medium",
+										children: "Image URL"
+									}), /* @__PURE__ */ D(C.Root, {
+										autoFocus: !0,
+										placeholder: "https://example.com/image.png",
+										value: L,
+										onChange: K
+									})]
+								}) }),
+								/* @__PURE__ */ O(v, {
+									justify: "end",
+									gap: "2",
+									children: [/* @__PURE__ */ D(b.Close, { children: /* @__PURE__ */ D(_, {
+										type: "button",
+										variant: "soft",
+										color: "gray",
+										children: "Cancel"
+									}) }), /* @__PURE__ */ D(_, {
+										type: "button",
+										disabled: L.trim().length === 0,
+										onClick: U,
+										children: "Save"
+									})]
+								})
+							]
+						})
+					})]
+				}, `${e.name}-${t}`) : /* @__PURE__ */ D(y, {
+					type: "button",
+					radius: "medium",
+					color: "gray",
+					variant: e.isActive() ? "soft" : "ghost",
+					disabled: e.disabled || !k.isEditable,
+					title: e.name,
+					onMouseDown: (t) => W(t, 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, {
+				orientation: "vertical",
+				decorative: !0,
+				style: { height: 20 }
+			})] }, `format-group-${t}`))
+		})
+	});
+};
+//#endregion
+export { A as n, j as t };