@threadlabs/looma 0.22.2 → 0.22.4

package/vue/editor/index.js

@@ -403,6 +403,23 @@ var autoCodeLanguageNames = [
 ];
 //#endregion
 //#region src/vue/editor/LoomaEditor.ts
+/**
+* Shows a key binding in ProseMirror notation ("Mod-Shift-8") the way the reader's platform writes
+* it: modifier symbols in Apple's order on Apple devices (⇧⌘8), and Ctrl+Shift+8 elsewhere.
+*/
+function formatEditorShortcut(keys, apple) {
+	const parts = keys.split("-");
+	const key = (parts.pop() ?? "").toUpperCase();
+	const has = (name) => parts.includes(name);
+	if (apple) return `${has("Ctrl") ? "⌃" : ""}${has("Alt") ? "⌥" : ""}${has("Shift") ? "⇧" : ""}${has("Mod") ? "⌘" : ""}${key}`;
+	return [
+		has("Mod") || has("Ctrl") ? "Ctrl" : "",
+		has("Alt") ? "Alt" : "",
+		has("Shift") ? "Shift" : "",
+		key
+	].filter(Boolean).join("+");
+}
+var isApplePlatform = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
 var EMPTY_DOCUMENT = {
 	type: "doc",
 	content: []
@@ -606,16 +623,18 @@ var LoomaEditor = defineComponent({
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const tooltipFor = ref("");
 		const tooltipLabel = ref("");
+		const tooltipShortcut = ref("");
 		const tooltipOpen = ref(false);
 		let tooltipTimer = 0;
 		const clearTooltipTimer = () => {
 			if (tooltipTimer) window.clearTimeout(tooltipTimer);
 			tooltipTimer = 0;
 		};
-		const showTool = (id, label, immediate) => {
+		const showTool = (id, label, immediate, shortcut = "") => {
 			clearTooltipTimer();
 			tooltipFor.value = id;
 			tooltipLabel.value = label;
+			tooltipShortcut.value = shortcut ? formatEditorShortcut(shortcut, isApplePlatform()) : "";
 			if (immediate || tooltipOpen.value) {
 				tooltipOpen.value = true;
 				return;
@@ -1507,7 +1526,7 @@ var LoomaEditor = defineComponent({
 		const onTableOverlayMouseDown = (event) => {
 			if (event.target instanceof Element ? event.target.closest("button[data-action]") : null) event.preventDefault();
 		};
-		const commandButton = (label, icon, active, disabled, run) => {
+		const commandButton = (label, icon, active, disabled, run, shortcut = "") => {
 			const syncNativeDisabled = (vnode) => {
 				if (!(vnode.el instanceof Element)) return;
 				const button = vnode.el instanceof HTMLButtonElement ? vnode.el : vnode.el.querySelector("button");
@@ -1519,9 +1538,9 @@ var LoomaEditor = defineComponent({
 				class: "looma-editor__toolbar-button",
 				label,
 				size: "sm",
-				onPointerenter: () => showTool(id, label, false),
+				onPointerenter: () => showTool(id, label, false, shortcut),
 				onPointerleave: hideTool,
-				onFocusin: () => showTool(id, label, true),
+				onFocusin: () => showTool(id, label, true, shortcut),
 				onFocusout: hideTool,
 				variant: "ghost",
 				disabled,
@@ -1534,12 +1553,12 @@ var LoomaEditor = defineComponent({
 		};
 		const renderToolbar = (instance, floating = true, textOnly = false) => {
 			const textButtons = [
-				commandButton("Bold", "bold", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run()),
-				commandButton("Italic", "italic", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run()),
-				commandButton("Underline", "underline", instance.isActive("underline"), !instance.can().toggleUnderline(), () => instance.chain().focus().toggleUnderline().run()),
-				commandButton("Strike", "strikethrough", instance.isActive("strike"), !instance.can().toggleStrike(), () => instance.chain().focus().toggleStrike().run()),
-				...authorHighlight ? [commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run())] : [],
-				commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run())
+				commandButton("Bold", "bold", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run(), "Mod-b"),
+				commandButton("Italic", "italic", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run(), "Mod-i"),
+				commandButton("Underline", "underline", instance.isActive("underline"), !instance.can().toggleUnderline(), () => instance.chain().focus().toggleUnderline().run(), "Mod-u"),
+				commandButton("Strike", "strikethrough", instance.isActive("strike"), !instance.can().toggleStrike(), () => instance.chain().focus().toggleStrike().run(), "Mod-Shift-s"),
+				...authorHighlight ? [commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run(), "Mod-Shift-h")] : [],
+				commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run(), "Mod-e")
 			];
 			const buttons = textOnly ? textButtons : [
 				...textButtons,
@@ -1568,13 +1587,13 @@ var LoomaEditor = defineComponent({
 					class: "divider",
 					"aria-hidden": "true"
 				}),
-				commandButton("Heading 1", "heading-1", instance.isActive("heading", { level: 1 }), false, () => instance.chain().focus().toggleHeading({ level: 1 }).run()),
-				commandButton("Heading 2", "heading-2", instance.isActive("heading", { level: 2 }), false, () => instance.chain().focus().toggleHeading({ level: 2 }).run()),
-				commandButton("Heading 3", "heading-3", instance.isActive("heading", { level: 3 }), false, () => instance.chain().focus().toggleHeading({ level: 3 }).run()),
-				commandButton("Bullet list", "list", instance.isActive("bulletList"), false, () => instance.chain().focus().toggleBulletList().run()),
-				commandButton("Numbered list", "list-ordered", instance.isActive("orderedList"), false, () => instance.chain().focus().toggleOrderedList().run()),
-				commandButton("Blockquote", "quote", instance.isActive("blockquote"), !instance.can().toggleBlockquote(), () => instance.chain().focus().toggleBlockquote().run()),
-				commandButton("Code block", "braces", instance.isActive("codeBlock"), !instance.can().toggleCodeBlock(), () => instance.chain().focus().toggleCodeBlock().run()),
+				commandButton("Heading 1", "heading-1", instance.isActive("heading", { level: 1 }), false, () => instance.chain().focus().toggleHeading({ level: 1 }).run(), "Mod-Alt-1"),
+				commandButton("Heading 2", "heading-2", instance.isActive("heading", { level: 2 }), false, () => instance.chain().focus().toggleHeading({ level: 2 }).run(), "Mod-Alt-2"),
+				commandButton("Heading 3", "heading-3", instance.isActive("heading", { level: 3 }), false, () => instance.chain().focus().toggleHeading({ level: 3 }).run(), "Mod-Alt-3"),
+				commandButton("Bullet list", "list", instance.isActive("bulletList"), false, () => instance.chain().focus().toggleBulletList().run(), "Mod-Shift-8"),
+				commandButton("Numbered list", "list-ordered", instance.isActive("orderedList"), false, () => instance.chain().focus().toggleOrderedList().run(), "Mod-Shift-7"),
+				commandButton("Blockquote", "quote", instance.isActive("blockquote"), !instance.can().toggleBlockquote(), () => instance.chain().focus().toggleBlockquote().run(), "Mod-Shift-b"),
+				commandButton("Code block", "braces", instance.isActive("codeBlock"), !instance.can().toggleCodeBlock(), () => instance.chain().focus().toggleCodeBlock().run(), "Mod-Alt-c"),
 				h(IconButton, {
 					id: blockActionAnchorId,
 					class: "looma-editor__toolbar-button",
@@ -1607,8 +1626,8 @@ var LoomaEditor = defineComponent({
 					class: "divider",
 					"aria-hidden": "true"
 				}),
-				commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run()),
-				commandButton("Redo", "redo", false, !instance.can().redo(), () => instance.chain().focus().redo().run())
+				commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run(), "Mod-z"),
+				commandButton("Redo", "redo", false, !instance.can().redo(), () => instance.chain().focus().redo().run(), isApplePlatform() ? "Mod-Shift-z" : "Mod-y")
 			];
 			return h(EditorToolbar, { floating }, () => [...buttons, h(Tooltip, {
 				class: "looma-editor__toolbar-tip",
@@ -1616,7 +1635,10 @@ var LoomaEditor = defineComponent({
 				open: tooltipOpen.value,
 				placement: floating ? "top" : "bottom",
 				trigger: "focus"
-			}, () => tooltipLabel.value)]);
+			}, {
+				default: () => tooltipLabel.value,
+				shortcut: () => tooltipShortcut.value ? h("kbd", tooltipShortcut.value) : null
+			})]);
 		};
 		const focus = (position = "start") => {
 			editor.value?.commands.focus(position);