@mp-lb/mdkit 0.3.0 → 0.3.2

package/dist/markdown/MarkdownBubbleMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEditorState } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
-import { Bold, Code2, Heading1, Heading2, Italic, Link2, List, ListOrdered, Quote, Strikethrough, } from "lucide-react";
+import { Bold, Code2, Heading1, Heading2, Heading3, Italic, Link2, List, ListOrdered, Quote, Strikethrough, } from "lucide-react";
 import { joinClassNames } from "../ui/joinClassNames.js";
 const toolbarActiveStateIsEqual = (left, right) => {
     if (!right) {
@@ -13,6 +13,7 @@ const toolbarActiveStateIsEqual = (left, right) => {
         left.codeBlock === right.codeBlock &&
         left.heading1 === right.heading1 &&
         left.heading2 === right.heading2 &&
+        left.heading3 === right.heading3 &&
         left.italic === right.italic &&
         left.link === right.link &&
         left.orderedList === right.orderedList &&
@@ -27,6 +28,7 @@ const useToolbarActiveState = (editor) => useEditorState({
         codeBlock: currentEditor.isActive("codeBlock"),
         heading1: currentEditor.isActive("heading", { level: 1 }),
         heading2: currentEditor.isActive("heading", { level: 2 }),
+        heading3: currentEditor.isActive("heading", { level: 3 }),
         italic: currentEditor.isActive("italic"),
         link: currentEditor.isActive("link"),
         orderedList: currentEditor.isActive("orderedList"),
@@ -80,5 +82,5 @@ export const MarkdownBubbleMenu = ({ editor }) => {
     const activeState = useToolbarActiveState(editor);
     return (_jsxs(BubbleMenu, { className: "mp-lb-mdkit-toolbar", editor: editor, options: {
             placement: "top",
-        }, shouldShow: shouldShowMarkdownBubbleMenu, children: [_jsx(ToolbarButton, { ariaLabel: "Bold", isActive: activeState.bold, onAction: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, {}) }), _jsx(ToolbarButton, { ariaLabel: "Italic", isActive: activeState.italic, onAction: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, {}) }), _jsx(ToolbarButton, { ariaLabel: "Strikethrough", isActive: activeState.strike, onAction: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, {}) }), _jsx(ToolbarButton, { ariaLabel: "Code block", isActive: activeState.codeBlock, onAction: () => editor.chain().focus().toggleCodeBlock().run(), children: _jsx(Code2, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Heading 1", isActive: activeState.heading1, onAction: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: _jsx(Heading1, {}) }), _jsx(ToolbarButton, { ariaLabel: "Heading 2", isActive: activeState.heading2, onAction: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: _jsx(Heading2, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Bullet list", isActive: activeState.bulletList, onAction: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, {}) }), _jsx(ToolbarButton, { ariaLabel: "Ordered list", isActive: activeState.orderedList, onAction: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, {}) }), _jsx(ToolbarButton, { ariaLabel: "Blockquote", isActive: activeState.blockquote, onAction: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Link", isActive: activeState.link, onAction: () => setLink(editor), children: _jsx(Link2, {}) })] }));
+        }, shouldShow: shouldShowMarkdownBubbleMenu, children: [_jsx(ToolbarButton, { ariaLabel: "Bold", isActive: activeState.bold, onAction: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, {}) }), _jsx(ToolbarButton, { ariaLabel: "Italic", isActive: activeState.italic, onAction: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, {}) }), _jsx(ToolbarButton, { ariaLabel: "Strikethrough", isActive: activeState.strike, onAction: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, {}) }), _jsx(ToolbarButton, { ariaLabel: "Code block", isActive: activeState.codeBlock, onAction: () => editor.chain().focus().toggleCodeBlock().run(), children: _jsx(Code2, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Heading 1", isActive: activeState.heading1, onAction: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: _jsx(Heading1, {}) }), _jsx(ToolbarButton, { ariaLabel: "Heading 2", isActive: activeState.heading2, onAction: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: _jsx(Heading2, {}) }), _jsx(ToolbarButton, { ariaLabel: "Heading 3", isActive: activeState.heading3, onAction: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), children: _jsx(Heading3, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Bullet list", isActive: activeState.bulletList, onAction: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, {}) }), _jsx(ToolbarButton, { ariaLabel: "Ordered list", isActive: activeState.orderedList, onAction: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, {}) }), _jsx(ToolbarButton, { ariaLabel: "Blockquote", isActive: activeState.blockquote, onAction: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Link", isActive: activeState.link, onAction: () => setLink(editor), children: _jsx(Link2, {}) })] }));
 };

package/dist/markdown/TiptapMarkdownSurface.js

@@ -18,6 +18,7 @@ const describeElement = (element) => {
 };
 const describeEventTarget = (target) => target instanceof Element ? describeElement(target) : String(target);
 const isInteractiveElement = (target) => !!target.closest("a,button,input,select,textarea,[contenteditable='false']");
+const isNativeFocusTarget = (target) => !!target.closest("a[href],button,input,select,textarea,[contenteditable='true'],[tabindex]:not([tabindex='-1'])");
 const createEditorDebugSnapshot = (editor, phase) => {
     const activeElement = typeof document === "undefined" || !document.activeElement
         ? null
@@ -344,6 +345,9 @@ export const TiptapMarkdownSurface = (props) => {
             if (editor.isDestroyed) {
                 return;
             }
+            if (!editor.isFocused && !editor.view.hasFocus()) {
+                return;
+            }
             const target = event.target;
             if (!(target instanceof Element)) {
                 return;
@@ -352,6 +356,9 @@ export const TiptapMarkdownSurface = (props) => {
                 target.closest(".mp-lb-mdkit-toolbar")) {
                 return;
             }
+            if (isNativeFocusTarget(target)) {
+                return;
+            }
             editor.commands.blur();
         };
         document.addEventListener("pointerdown", blurEditorOnExternalPointerDown, {

package/dist/markdown/createMdKitTiptapExtensions.js

@@ -6,7 +6,7 @@ import { MarkdownSearchExtension } from "./MarkdownSearchExtension.js";
 export const defaultMdKitMarkdownPlaceholder = "Start writing...";
 export const createMdKitTiptapExtensions = ({ placeholder = defaultMdKitMarkdownPlaceholder, undoRedo = true, } = {}) => [
     StarterKit.configure({
-        heading: { levels: [1, 2] },
+        heading: { levels: [1, 2, 3, 4, 5, 6] },
         link: {
             HTMLAttributes: {
                 rel: "noopener noreferrer",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mp-lb/mdkit",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",