@mp-lb/mdkit 0.2.0 → 0.2.1-main.15.1

package/dist/markdown/MarkdownBubbleMenu.d.ts

@@ -1,6 +1,9 @@
 import { type Editor } from "@tiptap/react";
+import { type BubbleMenuProps } from "@tiptap/react/menus";
 type MarkdownBubbleMenuProps = {
     editor: Editor;
 };
+type BubbleMenuShouldShowProps = Parameters<NonNullable<BubbleMenuProps["shouldShow"]>>[0];
+export declare const shouldShowMarkdownBubbleMenu: ({ editor, element, from, state, to, view, }: BubbleMenuShouldShowProps) => boolean;
 export declare const MarkdownBubbleMenu: ({ editor }: MarkdownBubbleMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/markdown/MarkdownBubbleMenu.js

@@ -34,6 +34,14 @@ const useToolbarActiveState = (editor) => useEditorState({
     }),
     equalityFn: toolbarActiveStateIsEqual,
 });
+export const shouldShowMarkdownBubbleMenu = ({ editor, element, from, state, to, view, }) => {
+    const editorHasFocus = view.hasFocus() || element.contains(document.activeElement);
+    const selectedText = state.doc.textBetween(from, to);
+    return (editor.isEditable &&
+        editorHasFocus &&
+        !state.selection.empty &&
+        selectedText.length > 0);
+};
 const setLink = (editor) => {
     const previousUrl = editor.getAttributes("link").href;
     const nextUrl = window.prompt("URL", previousUrl);
@@ -72,8 +80,5 @@ export const MarkdownBubbleMenu = ({ editor }) => {
     const activeState = useToolbarActiveState(editor);
     return (_jsxs(BubbleMenu, { className: "mp-lb-mdkit-toolbar", editor: editor, options: {
             placement: "top",
-        }, shouldShow: ({ editor: currentEditor, state }) => {
-            const { empty } = state.selection;
-            return currentEditor.isEditable && !empty;
-        }, 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("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/docs/styling.md

@@ -119,7 +119,8 @@ you need structural changes, component-specific spacing, or state styling.
 ### Editor
 
 `MdKitEditor` renders the markdown editing surface and the selection bubble
-toolbar.
+toolbar. The toolbar appears for non-empty text selections while the editor or
+toolbar has focus.
 
 - `.mp-lb-mdkit-markdown-editor`: root element rendered by `MdKitEditor`
 - `.mp-lb-mdkit-markdown-editor-fill-height`: added to the root when

package/package.json

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

package/src/styles.css

@@ -142,6 +142,26 @@
   flex: 1 1 auto;
 }
 
+.mp-lb-mdkit-markdown-view.mp-lb-mdkit-markdown-editor-fill-height
+  .mp-lb-mdkit-editor-shell {
+  height: auto;
+  min-height: 100%;
+  overflow: visible;
+}
+
+.mp-lb-mdkit-markdown-view.mp-lb-mdkit-markdown-editor-fill-height
+  .mp-lb-mdkit-editor-surface {
+  overflow: visible;
+}
+
+.mp-lb-mdkit-markdown-view.mp-lb-mdkit-markdown-editor-fill-height
+  .mp-lb-mdkit-view-content {
+  display: block;
+  height: auto;
+  min-height: 100%;
+  flex: 0 0 auto;
+}
+
 .mp-lb-mdkit-tiptap > * + * {
   margin-top: var(--mp-lb-mdkit-block-gap);
 }