@threadlabs/looma 0.32.0 → 0.32.1

package/editor/chunks/extensions.js

@@ -11986,7 +11986,7 @@ var CALLOUT_COMMANDS = [
 * @ownership Returned command objects belong to the caller and are recreated
 * per call so one editor cannot mutate another editor's command inventory.
 */
-function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLinkEditor) {
+function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLinkEditor, onOpenFilePicker) {
 	return [
 		{
 			title: "Text",
@@ -12209,6 +12209,21 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 				onOpenLinkEditor();
 			}
 		}] : [],
+		...onOpenFilePicker ? [{
+			title: "File attachment",
+			description: "Attach a file",
+			icon: "paperclip",
+			keywords: [
+				"file",
+				"attachment",
+				"upload",
+				"pdf"
+			],
+			command: ({ editor, range }) => {
+				editor.chain().focus().deleteRange(range).run();
+				onOpenFilePicker();
+			}
+		}] : [],
 		...onOpenImagePicker ? [{
 			title: "Image",
 			description: "Upload an image",
@@ -12228,6 +12243,7 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 		...command,
 		id: command.title.toLowerCase().replaceAll(" ", "-"),
 		group: CALLOUT_COMMANDS.some((callout) => callout.title === command.title) ? "Callouts" : [
+			"File attachment",
 			"Chip",
 			"Inline code",
 			"Link",

package/editor/extensions/slash-command.d.ts

@@ -79,7 +79,7 @@ declare module "@tiptap/core" {
  * @ownership Returned command objects belong to the caller and are recreated
  * per call so one editor cannot mutate another editor's command inventory.
  */
-export declare function getDefaultSlashCommands(onOpenImagePicker?: () => void, onOpenChipEditor?: (editor: Editor, position: number) => void, onOpenLinkEditor?: () => void): LoomaSlashCommand[];
+export declare function getDefaultSlashCommands(onOpenImagePicker?: () => void, onOpenChipEditor?: (editor: Editor, position: number) => void, onOpenLinkEditor?: () => void, onOpenFilePicker?: () => void): LoomaSlashCommand[];
 /**
  * Ranks exact names/aliases before partial matches, then matching categories.
  * Other ties retain inventory order.

package/editor/file-uploads.d.ts

@@ -0,0 +1,31 @@
+import type { Editor } from '@tiptap/core';
+/** A retained file, represented as a readable ordinary link in the document. */
+export interface LoomaFileDescriptor {
+    href: string;
+    name: string;
+    size: number;
+    contentType: string;
+}
+/** The application retains the bytes and returns their authorized download URL. */
+export type LoomaFileUpload = (file: File, init: {
+    signal: AbortSignal;
+    progress: (loaded: number, total: number) => void;
+}) => PromiseLike<LoomaFileDescriptor | null> | LoomaFileDescriptor | null;
+/** File insertion status, independent of the document and its undo history. */
+export interface LoomaFileUploadsState {
+    uploading: boolean;
+    progress: {
+        loaded: number;
+        total: number;
+    } | null;
+}
+/** Captures the caret before asynchronous transport; later transactions map that caret. */
+export declare function createFileUploads(options: {
+    editor: Editor;
+    upload: () => LoomaFileUpload | undefined;
+    onError: (error: unknown, file: File) => void;
+    onState?: (state: LoomaFileUploadsState) => void;
+}): {
+    cancel(): void;
+    insert(file: File): Promise<void>;
+};

package/editor/icons.d.ts

@@ -38,6 +38,7 @@ export declare const LOOMA_ICONS: {
     highlighter: IconNode;
     history: IconNode;
     image: IconNode;
+    paperclip: IconNode;
     info: IconNode;
     italic: IconNode;
     'layout-dashboard': IconNode;

package/editor/index.js

@@ -2,7 +2,7 @@ import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { $ as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, A as filterLoomaMentionItems, B as LOOMA_FOOTNOTE_LABEL, C as loomaMarkdownToHtml, D as createLoomaMentionExtension, E as LoomaMentionSuggestionPluginKey, F as LoomaTableOfContents, G as LoomaFigcaption, H as LoomaFootnoteReference, I as getTableOfContentsEntries, J as revealLoomaExpandAt, K as LoomaFigure, L as normalizeTableOfContentsConfig, M as LoomaImage, N as normalizeImageDimension, O as DEFAULT_MENTION_RESULT_LIMIT, P as normalizeImagePlacement, Q as LoomaCallout, R as LoomaTab, S as loomaMarkdownFromDoc, T as siteRelativeHref, U as LoomaFootnotes, V as LoomaFootnote, W as findLoomaFootnote, X as LoomaChip, Y as LOOMA_CHIP_COLORS, Z as normalizeLoomaChipColor, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, et as LOOMA_ACTIVE_BLOCK_CLASS, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeMentionResultLimit, k as MAX_MENTION_RESULT_LIMIT, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, nt as LoomaActiveBlock, o as handleTableAction, p as getLoomaTableExtensions, q as LoomaExpand, r as filterLoomaSlashCommands, rt as LoomaActiveBlockPluginKey, s as handleTableOverlayAction, t as LoomaSlashCommand, tt as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as createSiteRelativeLinks, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as LoomaTabs } from "./chunks/extensions.js";
 import { a as setReferenceDisplay, i as referenceDisplay, n as LoomaReferencePresentation, o as LOOMA_CALLOUT_TONES, r as getReferenceDisplay, t as LoomaReference } from "./chunks/reference-display.js";
-import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bell, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Lightbulb, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, MessageSquareWarning, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Superscript, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bell, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Lightbulb, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, MessageSquareWarning, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Paperclip, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Superscript, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
@@ -43,6 +43,7 @@ var LOOMA_ICONS = {
 	highlighter: Highlighter,
 	history: History,
 	image: Image,
+	paperclip: Paperclip,
 	info: Info,
 	italic: Italic,
 	"layout-dashboard": LayoutDashboard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/LoomaEditor.d.ts

@@ -1,3 +1,4 @@
+import { type LoomaFileDescriptor } from "../../editor/file-uploads.js";
 import "../../components/ui-editor-surface/ui-editor-surface.css";
 import "./looma-editor.css";
 import { type AnyExtension, type Editor, type JSONContent } from "@tiptap/core";
@@ -77,6 +78,10 @@ export type LoomaMentionQuery = LoomaResponder<LoomaMentionQueryDetail, LoomaMen
  * @failure A rejection leaves the document unchanged and emits `uploadError`.
  */
 export type LoomaImageUploader = LoomaResponder<LoomaImageUploadDetail, LoomaImageDescriptor>;
+/** Uploads a file and returns its retained link; rejection leaves authored content unchanged. */
+export type LoomaFileUploader = LoomaResponder<{
+    file: File;
+}, LoomaFileDescriptor>;
 /**
  * Turnkey Vue editor that composes Looma's framework-neutral Tiptap extensions
  * with declarative menus, image delivery, and table interaction chrome.
@@ -174,7 +179,12 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
-    /** Answers `image-upload`: uploads a pasted, dropped, or chosen image and returns the image to insert. */
+    /** Answers `file-upload` with a retained ordinary file link. */
+    fileUpload: {
+        type: PropType<LoomaFileUploader | undefined>;
+        default: undefined;
+    };
+    /** Answers `image-upload` with the image to insert. */
     imageUpload: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
@@ -324,7 +334,12 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
-    /** Answers `image-upload`: uploads a pasted, dropped, or chosen image and returns the image to insert. */
+    /** Answers `file-upload` with a retained ordinary file link. */
+    fileUpload: {
+        type: PropType<LoomaFileUploader | undefined>;
+        default: undefined;
+    };
+    /** Answers `image-upload` with the image to insert. */
     imageUpload: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
@@ -402,6 +417,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     linkSearch: LoomaLinkSearch | undefined;
     linkResolve: LoomaLinkResolve | undefined;
     imageUpload: LoomaImageUploader | undefined;
+    fileUpload: LoomaFileUploader | undefined;
     modelValue: JSONContent;
     contentDensity: "comfortable" | "compact";
     mentionItems: LoomaMentionItem[];

package/vue/editor/index.d.ts

@@ -1,4 +1,5 @@
 export * from "@threadlabs/looma/editor";
 export * from "./primitives.js";
-export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorExtensions, type LoomaEditorSlashCommands, type LoomaSlashCommandsDetail, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkSearchDetail, type LoomaLinkResolve, type LoomaLinkResolveDetail, type LoomaMentionQuery, type LoomaMentionQueryDetail, type LoomaImageUploader, type LoomaImageUploadDetail, type LoomaRequestInit, type LoomaResponder, } from "./LoomaEditor.js";
+export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorExtensions, type LoomaEditorSlashCommands, type LoomaSlashCommandsDetail, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkSearchDetail, type LoomaLinkResolve, type LoomaLinkResolveDetail, type LoomaMentionQuery, type LoomaMentionQueryDetail, type LoomaFileUploader, type LoomaImageUploader, type LoomaImageUploadDetail, type LoomaRequestInit, type LoomaResponder, } from "./LoomaEditor.js";
 export type { LoomaImageActivationDetail, LoomaImageActivationTrigger, LoomaImageAttributeResolver, LoomaImageSourceResolver, LoomaImageDescriptor, LoomaImageRenditionErrorDetail, LoomaImageRenditionAttributes, } from "../../editor/image-delivery.js";
+export type { LoomaFileDescriptor } from "../../editor/file-uploads.js";

package/vue/editor/index.js

@@ -47,6 +47,73 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 	EditorFootnoteEditor: "ui-editor-footnote-editor"
 };
 //#endregion
+//#region src/editor/file-uploads.ts
+/** Captures the caret before asynchronous transport; later transactions map that caret. */
+function createFileUploads(options) {
+	let active;
+	const state = (uploading, progress = null) => options.onState?.({
+		uploading,
+		progress
+	});
+	return {
+		cancel() {
+			active?.abort();
+			state(false);
+		},
+		async insert(file) {
+			const upload = options.upload();
+			if (!upload || options.editor.isDestroyed) return;
+			active?.abort();
+			const controller = new AbortController();
+			active = controller;
+			const { editor } = options;
+			let position = editor.state.selection.from;
+			const map = ({ transaction }) => {
+				position = transaction.mapping.map(position);
+			};
+			editor.on("transaction", map);
+			state(true);
+			try {
+				const answer = await upload(file, {
+					signal: controller.signal,
+					progress: (loaded, total) => {
+						if (!controller.signal.aborted) state(true, {
+							loaded,
+							total
+						});
+					}
+				});
+				if (!answer || controller.signal.aborted || editor.isDestroyed || !editor.isEditable) return;
+				if (!/^(?:https?:\/\/|\/(?!\/))/.test(answer.href) || !Number.isSafeInteger(answer.size) || answer.size < 0) throw new Error("Invalid file descriptor");
+				const size = answer.size < 1e3 ? `${answer.size} B` : answer.size < 1e6 ? `${Math.ceil(answer.size / 1e3)} KB` : `${Number((answer.size / 1e6).toFixed(1))} MB`;
+				editor.chain().focus().insertContentAt(position, [{
+					type: "text",
+					text: answer.name || file.name,
+					marks: [{
+						type: "link",
+						attrs: {
+							href: answer.href,
+							target: "_blank",
+							rel: "noopener noreferrer"
+						}
+					}]
+				}, {
+					type: "text",
+					text: ` (${answer.contentType || "application/octet-stream"}, ${size}) `
+				}]).run();
+			} catch (error) {
+				if (!controller.signal.aborted) options.onError(error, file);
+			} finally {
+				editor.off("transaction", map);
+				if (active === controller) {
+					active = void 0;
+					state(false);
+				}
+			}
+		}
+	};
+}
+//#endregion
 //#region src/components/shared/overlay.js
 function stateFor$1(document) {
 	const key = Symbol.for("@threadlabs/looma/overlay-stack/v1");
@@ -14546,7 +14613,8 @@ var EDITOR_REQUESTS = {
 	"mention-query": "mentionQuery",
 	"link-search": "linkSearch",
 	"link-resolve": "linkResolve",
-	"image-upload": "imageUpload"
+	"image-upload": "imageUpload",
+	"file-upload": "fileUpload"
 };
 var EDITOR_REQUEST_NAMES = Object.keys(EDITOR_REQUESTS);
 var EMPTY_DOCUMENT = {
@@ -14680,7 +14748,12 @@ var LoomaEditor = defineComponent({
 			type: String,
 			default: "Item"
 		},
-		/** Answers `image-upload`: uploads a pasted, dropped, or chosen image and returns the image to insert. */
+		/** Answers `file-upload` with a retained ordinary file link. */
+		fileUpload: {
+			type: Function,
+			default: void 0
+		},
+		/** Answers `image-upload` with the image to insert. */
 		imageUpload: {
 			type: Function,
 			default: void 0
@@ -14750,6 +14823,12 @@ var LoomaEditor = defineComponent({
 		const formatAnchorId = `looma-editor-format-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const formatOpen = ref(false);
 		const fileInput = ref(null);
+		const attachmentInput = ref(null);
+		const fileUploadState = shallowRef({
+			uploading: false,
+			progress: null
+		});
+		let attachmentUploads;
 		const tablePickerAnchorId = `looma-editor-table-picker-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const blockActionAnchorId = `ui-block-tools-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const linkAnchorId = `looma-editor-link-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
@@ -14918,9 +14997,11 @@ var LoomaEditor = defineComponent({
 		let slashDefaults;
 		const defaultSlashCommands = () => {
 			const uploads = answers("image-upload");
-			if (slashDefaults?.uploads !== uploads) slashDefaults = {
+			const files = answers("file-upload");
+			if (slashDefaults?.uploads !== uploads || slashDefaults?.files !== files) slashDefaults = {
 				uploads,
-				commands: getDefaultSlashCommands(uploads ? () => fileInput.value?.click() : void 0, openChipEditor, () => openLinkEditor())
+				files,
+				commands: getDefaultSlashCommands(uploads ? () => fileInput.value?.click() : void 0, openChipEditor, () => openLinkEditor(), files ? () => attachmentInput.value?.click() : void 0)
 			};
 			return slashDefaults.commands;
 		};
@@ -14946,7 +15027,7 @@ var LoomaEditor = defineComponent({
 			const current = new Set(EDITOR_REQUEST_NAMES.filter(answers));
 			const arrived = (name) => current.has(name) && !responders.has(name);
 			const extensionsArrived = arrived("extensions");
-			const slashChanged = arrived("slash-commands") || current.has("image-upload") !== responders.has("image-upload");
+			const slashChanged = arrived("slash-commands") || current.has("image-upload") !== responders.has("image-upload") || current.has("file-upload") !== responders.has("file-upload");
 			responders = current;
 			if (extensionsArrived) askExtensions();
 			if (slashChanged) askSlashCommands();
@@ -15122,6 +15203,14 @@ var LoomaEditor = defineComponent({
 				uploadState.value = imageUploads.state;
 			});
 			uploads = imageUploads;
+			attachmentUploads = createFileUploads({
+				editor: session.editor,
+				upload: () => (file, init) => ask("file-upload", { file }, init),
+				onError: (error, file) => emit("uploadError", error, file),
+				onState: (value) => {
+					fileUploadState.value = value;
+				}
+			});
 			const instance = session.editor;
 			formatting = createFormattingSelection({
 				editor: instance,
@@ -15142,6 +15231,7 @@ var LoomaEditor = defineComponent({
 			footnoteEditing?.close();
 			formatting?.destroy();
 			uploads?.cancel();
+			attachmentUploads?.cancel();
 			previous.destroy();
 			build(content);
 		};
@@ -15167,6 +15257,7 @@ var LoomaEditor = defineComponent({
 		onBeforeUnmount(() => {
 			const element = session?.editor.options.element;
 			element?.parentNode?.replaceChild(element.cloneNode(true), element);
+			attachmentUploads?.cancel();
 			connection.abort();
 			stopAnnouncements?.();
 			linkEditing?.destroy();
@@ -15712,6 +15803,12 @@ var LoomaEditor = defineComponent({
 			if (dragLeaveTimer) clearTimeout(dragLeaveTimer);
 			if (tablePointerFrame !== null) cancelAnimationFrame(tablePointerFrame);
 		});
+		const onAttachmentChange = async (event) => {
+			const input = event.target;
+			const file = input.files?.[0];
+			input.value = "";
+			if (file) await attachmentUploads?.insert(file);
+		};
 		const onFileChange = async (event) => {
 			const input = event.target;
 			const files = Array.from(input.files ?? []);
@@ -15954,6 +16051,7 @@ var LoomaEditor = defineComponent({
 					variant: tablePickerOpen.value ? "solid" : "ghost",
 					"aria-expanded": tablePickerOpen.value ? "true" : "false"
 				}, () => loomaIcon("table")),
+				commandButton("Attach file", "paperclip", false, fileUploadState.value.uploading || !answers("file-upload"), () => attachmentInput.value?.click()),
 				commandButton(uploadState.value.uploading ? "Uploading image" : "Insert image", "image", false, uploadState.value.uploading || !answers("image-upload"), () => fileInput.value?.click()),
 				h("span", {
 					class: "divider",
@@ -16143,6 +16241,22 @@ var LoomaEditor = defineComponent({
 					"aria-hidden": "true",
 					onChange: onFileChange
 				}),
+				h("input", {
+					ref: attachmentInput,
+					class: "looma-editor__file-input",
+					type: "file",
+					tabindex: -1,
+					"aria-hidden": "true",
+					onChange: onAttachmentChange
+				}),
+				fileUploadState.value.uploading ? h(StatusMessage, { kind: "loading" }, {
+					default: () => "Attaching file…",
+					action: () => h(Button, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => attachmentUploads?.cancel()
+					}, () => "Cancel")
+				}) : null,
 				uploadState.value.uploading ? h(StatusMessage, { kind: "loading" }, {
 					default: () => uploadProgressText(uploadState.value.progress),
 					action: () => h(Button, {