@blocknote/mantine 0.24.2 → 0.25.1

package/src/style.css

@@ -127,6 +127,14 @@
   padding: 0;
 }
 
+.bn-mantine .mantine-Tooltip-tooltip p:last-child {
+  white-space: pre-wrap;
+}
+
+.bn-mantine .mantine-Tooltip-tooltip p:first-child {
+  white-space: unset;
+}
+
 /* UI element styling */
 
 /* Select styling */
@@ -495,14 +503,15 @@
 
 /* Table Handle styling */
 .bn-mantine .bn-table-handle,
-.bn-mantine .bn-extend-button {
+.bn-mantine .bn-extend-button,
+.bn-mantine .bn-table-cell-handle {
   align-items: center;
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-small);
   box-shadow: var(--bn-shadow-light);
   color: var(--bn-colors-side-menu);
-  cursor: pointer;
+  cursor: grab;
   display: flex;
   height: fit-content;
   justify-content: center;
@@ -510,14 +519,23 @@
   padding: 0;
 }
 
+.bn-mantine .bn-table-cell-handle {
+  padding: 0 4px;
+}
+
 .bn-mantine .bn-table-handle svg {
   margin-inline: -4px;
 }
 
+.bn-mantine .bn-table-handle-not-draggable {
+  cursor: pointer;
+}
+
 .bn-mantine .bn-table-handle:hover,
 .bn-mantine .bn-table-handle-dragging,
 .bn-mantine .bn-extend-button:hover,
-.bn-mantine .bn-extend-button-editing {
+.bn-mantine .bn-extend-button-editing,
+.bn-mantine .bn-table-cell-handle:hover {
   background-color: var(--bn-colors-hovered-background);
 }
 
@@ -536,7 +554,8 @@
 }
 
 /* Drag Handle & Table Handle Menu styling */
-.bn-mantine .bn-drag-handle-menu {
+.bn-mantine .bn-drag-handle-menu,
+.bn-mantine .bn-table-handle-menu {
   overflow: visible;
 }
 
@@ -564,3 +583,135 @@
   display: flex;
   justify-content: space-between;
 }
+
+/* Comment styling */
+.bn-mantine .bn-thread {
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  color: var(--bn-colors-menu-text);
+  overflow: visible;
+}
+
+.bn-mantine .bn-thread-comments {
+  border-bottom: var(--bn-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.bn-mantine .bn-thread-comment {
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.bn-mantine .bn-thread-comment > .mantine-Group-root {
+  gap: 12px;
+}
+
+.bn-mantine .bn-thread-comment p {
+  color: var(--bn-colors-menu-text);
+}
+
+.bn-mantine .bn-comment-actions-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Comment action toolbar styling */
+.bn-mantine .bn-action-toolbar {
+  align-self: flex-end;
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  gap: 0;
+  padding: 2px;
+}
+
+.bn-action-toolbar .mantine-Button-root,
+.bn-action-toolbar .mantine-ActionIcon-root {
+  background-color: var(--bn-colors-menu-background);
+  border: none;
+  border-radius: var(--bn-border-radius-small);
+  color: var(--bn-colors-menu-text);
+}
+
+.bn-action-toolbar .mantine-Button-root:hover,
+.bn-action-toolbar .mantine-ActionIcon-root:hover {
+  background-color: var(--bn-colors-hovered-background);
+  border: none;
+  color: var(--bn-colors-hovered-text);
+}
+
+.bn-action-toolbar .mantine-Button-root[data-selected],
+.bn-action-toolbar .mantine-ActionIcon-root[data-selected] {
+  background-color: var(--bn-colors-selected-background);
+  border: none;
+  color: var(--bn-colors-selected-text);
+}
+
+.bn-action-toolbar .mantine-Button-root[data-disabled],
+.bn-action-toolbar .mantine-ActionIcon-root[data-disabled] {
+  background-color: var(--bn-colors-disabled-background);
+  border: none;
+  color: var(--bn-colors-disabled-text);
+}
+
+.bn-mantine .bn-action-toolbar .mantine-Menu-itemLabel {
+  font-size: 12px;
+}
+
+/* Badge styling */
+.bn-mantine .bn-badge-group {
+  display: flex;
+  gap: 4px;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.bn-mantine .bn-badge {
+  flex-grow: 0;
+}
+
+.bn-mantine .bn-badge .mantine-Chip-label {
+  padding: 0 8px;
+}
+
+.bn-mantine .bn-badge .mantine-Chip-label:not([data-checked="true"]) {
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  color: var(--bn-colors-menu-text);
+}
+
+.bn-mantine .bn-badge .mantine-Chip-label:hover {
+  border: 1px solid var(--mantine-primary-color-filled-hover);
+  color: var(--mantine-primary-color-filled-hover);
+}
+
+.bn-mantine
+  .bn-badge
+  .mantine-Chip-label
+  > span:not(.mantine-Chip-iconWrapper) {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.bn-mantine
+  .bn-badge
+  .mantine-Chip-label
+  > span:not(.mantine-Chip-iconWrapper)
+  > span {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+/* We need to get rid of the checked icon - you can set the icon prop to an
+empty element (<></>), but even so Mantine leaves extra space for the icon, so
+we just don't display it in CSS instead. */
+.bn-mantine .bn-badge .mantine-Chip-iconWrapper {
+  display: none;
+}

package/src/toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { Group as MantineGroup } from "@mantine/core";
+import { Flex } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -10,7 +10,14 @@ type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
 
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
   (props, ref) => {
-    const { className, children, onMouseEnter, onMouseLeave, ...rest } = props;
+    const {
+      className,
+      children,
+      onMouseEnter,
+      onMouseLeave,
+      variant,
+      ...rest
+    } = props;
 
     assertEmpty(rest);
 
@@ -22,15 +29,16 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
     const combinedRef = mergeRefs(ref, focusRef, trapRef);
 
     return (
-      <MantineGroup
+      <Flex
         className={className}
         ref={combinedRef}
         role="toolbar"
         // TODO: aria-label
         onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}>
+        onMouseLeave={onMouseLeave}
+        gap={variant === "action-toolbar" ? 2 : undefined}>
         {children}
-      </MantineGroup>
+      </Flex>
     );
   }
 );

package/src/toolbar/ToolbarButton.tsx

@@ -8,16 +8,20 @@ import {
 
 import { assertEmpty, isSafari } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 
 export const TooltipContent = (props: {
   mainTooltip: string;
   secondaryTooltip?: string;
 }) => (
   <MantineStack gap={0} className={"bn-tooltip"}>
-    <MantineText size={"sm"}>{props.mainTooltip}</MantineText>
+    <MantineText size={"sm"} lineClamp={5}>
+      {props.mainTooltip}
+    </MantineText>
     {props.secondaryTooltip && (
-      <MantineText size={"xs"}>{props.secondaryTooltip}</MantineText>
+      <MantineText size={"xs"} lineClamp={5}>
+        {props.secondaryTooltip}
+      </MantineText>
     )}
   </MantineStack>
 );
@@ -40,6 +44,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       isDisabled,
       onClick,
       label,
+      variant,
       ...rest
     } = props;
 
@@ -47,8 +52,84 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
     // assertEmpty in this case is only used at typescript level, not runtime level
     assertEmpty(rest, false);
 
+    const [hideTooltip, setHideTooltip] = useState(false);
+
+    const button = children ? (
+      <MantineButton
+        aria-label={label}
+        className={className}
+        // Needed as Safari doesn't focus button elements on mouse down
+        // unlike other browsers.
+        onMouseDown={(e) => {
+          if (isSafari()) {
+            (e.currentTarget as HTMLButtonElement).focus();
+          }
+        }}
+        onClick={(event) => {
+          setHideTooltip(true);
+          onClick?.(event);
+        }}
+        // Mantine Menu.Target elements block mouseleave events for some reason,
+        // but pointerleave events work fine.
+        onPointerLeave={() => setHideTooltip(false)}
+        aria-pressed={isSelected}
+        data-selected={isSelected || undefined}
+        data-test={
+          mainTooltip
+            ? mainTooltip.slice(0, 1).toLowerCase() +
+              mainTooltip.replace(/\s+/g, "").slice(1)
+            : undefined
+        }
+        size={variant === "compact" ? "compact-xs" : "xs"}
+        disabled={isDisabled || false}
+        ref={ref}
+        {...rest}>
+        {children}
+      </MantineButton>
+    ) : (
+      <MantineActionIcon
+        className={className}
+        aria-label={label}
+        // Needed as Safari doesn't focus button elements on mouse down
+        // unlike other browsers.
+        onMouseDown={(e) => {
+          if (isSafari()) {
+            (e.currentTarget as HTMLButtonElement).focus();
+          }
+        }}
+        onClick={(event) => {
+          // We manually hide the tooltip onclick, because the click event
+          // might open a popover which would then show both the tooltip and the popover
+          // this is similar to default behavior of shadcn / radix
+          setHideTooltip(true);
+          onClick?.(event);
+        }}
+        // Mantine Menu.Target elements block mouseleave events for some reason,
+        // but pointerleave events work fine.
+        onPointerLeave={() => setHideTooltip(false)}
+        aria-pressed={isSelected}
+        data-selected={isSelected || undefined}
+        data-test={
+          mainTooltip
+            ? mainTooltip.slice(0, 1).toLowerCase() +
+              mainTooltip.replace(/\s+/g, "").slice(1)
+            : undefined
+        }
+        size={variant === "compact" ? 20 : 30}
+        disabled={isDisabled || false}
+        ref={ref}
+        {...rest}>
+        {icon}
+      </MantineActionIcon>
+    );
+
+    if (!mainTooltip) {
+      return button;
+    }
+
     return (
       <MantineTooltip
+        disabled={hideTooltip}
         withinPortal={false}
         label={
           <TooltipContent
@@ -56,56 +137,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
             secondaryTooltip={secondaryTooltip}
           />
         }>
-        {/*Creates an ActionIcon instead of a Button if only an icon is provided as content.*/}
-        {children ? (
-          <MantineButton
-            aria-label={label}
-            className={className}
-            // Needed as Safari doesn't focus button elements on mouse down
-            // unlike other browsers.
-            onMouseDown={(e) => {
-              if (isSafari()) {
-                (e.currentTarget as HTMLButtonElement).focus();
-              }
-            }}
-            onClick={onClick}
-            aria-pressed={isSelected}
-            data-selected={isSelected || undefined}
-            data-test={
-              mainTooltip.slice(0, 1).toLowerCase() +
-              mainTooltip.replace(/\s+/g, "").slice(1)
-            }
-            size={"xs"}
-            disabled={isDisabled || false}
-            ref={ref}
-            {...rest}>
-            {children}
-          </MantineButton>
-        ) : (
-          <MantineActionIcon
-            className={className}
-            aria-label={label}
-            // Needed as Safari doesn't focus button elements on mouse down
-            // unlike other browsers.
-            onMouseDown={(e) => {
-              if (isSafari()) {
-                (e.currentTarget as HTMLButtonElement).focus();
-              }
-            }}
-            onClick={onClick}
-            aria-pressed={isSelected}
-            data-selected={isSelected || undefined}
-            data-test={
-              mainTooltip.slice(0, 1).toLowerCase() +
-              mainTooltip.replace(/\s+/g, "").slice(1)
-            }
-            size={30}
-            disabled={isDisabled || false}
-            ref={ref}
-            {...rest}>
-            {icon}
-          </MantineActionIcon>
-        )}
+        {button}
       </MantineTooltip>
     );
   }

package/types/src/badge/Badge.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent } from "react";
+export declare const Badge: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    text: string;
+    icon?: import("react").ReactNode;
+    isSelected?: boolean | undefined;
+    mainTooltip?: string | undefined;
+    secondaryTooltip?: string | undefined;
+    onClick?: ((event: MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
+    onMouseEnter?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export declare const BadgeGroup: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/comments/Card.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Card: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardSection: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/comments/Comment.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Comment: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+    authorInfo: "loading" | import("@blocknote/core/types/src/comments").User;
+    timeString: string;
+    actions?: import("react").ReactNode;
+    showActions?: boolean | "hover" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/comments/Editor.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Editor: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    editable: boolean;
+    editor: import("@blocknote/core").BlockNoteEditor<any, any, any>;
+    onFocus?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/menu/Button.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const Button: import("react").ForwardRefExoticComponent<({
+    className?: string | undefined;
+    onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    icon?: import("react").ReactNode;
+    onDragStart?: ((e: import("react").DragEvent<Element>) => void) | undefined;
+    onDragEnd?: ((e: import("react").DragEvent<Element>) => void) | undefined;
+    draggable?: boolean | undefined;
+} & ({
+    children: import("react").ReactNode;
+    label?: string | undefined;
+} | {
+    children?: undefined;
+    label: string;
+})) & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/toolbar/Toolbar.d.ts

@@ -4,4 +4,5 @@ export declare const Toolbar: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     onMouseEnter?: (() => void) | undefined;
     onMouseLeave?: (() => void) | undefined;
+    variant?: "default" | "action-toolbar" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/toolbar/ToolbarButton.d.ts

@@ -8,12 +8,13 @@ export declare const TooltipContent: (props: {
  */
 export declare const ToolbarButton: import("react").ForwardRefExoticComponent<({
     className?: string | undefined;
-    mainTooltip: string;
+    mainTooltip?: string | undefined;
     secondaryTooltip?: string | undefined;
     icon?: import("react").ReactNode;
     onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
     isSelected?: boolean | undefined;
     isDisabled?: boolean | undefined;
+    variant?: "default" | "compact" | undefined;
 } & ({
     children: import("react").ReactNode;
     label?: string | undefined;

package/dist/blocknote-mantine.umd.cjs

@@ -1,2 +0,0 @@
-(function(b,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("@blocknote/core"),require("@blocknote/react"),require("@mantine/core"),require("react"),require("@mantine/hooks")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","@blocknote/core","@blocknote/react","@mantine/core","react","@mantine/hooks"],s):(b=typeof globalThis<"u"?globalThis:b||self,s(b["blocknote-mantine"]={},b.jsxRuntime,b.core,b.react,b.core$1,b.React,b.hooks))})(this,function(b,s,m,w,l,f,S){"use strict";const y=(e=>e&&typeof e=="object"&&"default"in e?e:{default:e})(f),N=(e,r,t=!1)=>{const n=[];function o(a,d="--bn"){for(const i in a){const c=i.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),u=`${d}-${c}`;typeof a[i]!="object"?(typeof a[i]=="number"&&(a[i]=`${a[i]}px`),t?r.style.removeProperty(u):r.style.setProperty(u,a[i].toString())):o(a[i],u)}}return o(e),n},x=(e,r)=>N(e,r),z={colors:{editor:{text:void 0,background:void 0},menu:{text:void 0,background:void 0},tooltip:{text:void 0,background:void 0},hovered:{text:void 0,background:void 0},selected:{text:void 0,background:void 0},disabled:{text:void 0,background:void 0},shadow:void 0,border:void 0,sideMenu:void 0,highlights:{gray:{text:void 0,background:void 0},brown:{text:void 0,background:void 0},red:{text:void 0,background:void 0},orange:{text:void 0,background:void 0},yellow:{text:void 0,background:void 0},green:{text:void 0,background:void 0},blue:{text:void 0,background:void 0},purple:{text:void 0,background:void 0},pink:{text:void 0,background:void 0}}},borderRadius:void 0,fontFamily:void 0},P=e=>N(z,e,!0),G=f.forwardRef((e,r)=>{const{className:t,name:n,label:o,icon:a,value:d,autoFocus:i,placeholder:c,onKeyDown:u,onChange:g,onSubmit:h,...v}=e;return m.assertEmpty(v),s.jsx(l.TextInput,{size:"xs",className:t,ref:r,name:n,label:o,leftSection:a,value:d,autoFocus:i,"data-autofocus":i?"true":void 0,placeholder:c,onKeyDown:u,onChange:g,onSubmit:h})});var F={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},O=y.default.createContext&&y.default.createContext(F),_=["attr","size","title"];function V(e,r){if(e==null)return{};var t=A(e,r),n,o;if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],!(r.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}function A(e,r){if(e==null)return{};var t={};for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){if(r.indexOf(n)>=0)continue;t[n]=e[n]}return t}function T(){return T=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},T.apply(this,arguments)}function D(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),t.push.apply(t,n)}return t}function k(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};r%2?D(Object(t),!0).forEach(function(n){q(e,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):D(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})}return e}function q(e,r,t){return r=H(r),r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function H(e){var r=K(e,"string");return typeof r=="symbol"?r:r+""}function K(e,r){if(typeof e!="object"||!e)return e;var t=e[Symbol.toPrimitive];if(t!==void 0){var n=t.call(e,r||"default");if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(r==="string"?String:Number)(e)}function I(e){return e&&e.map((r,t)=>y.default.createElement(r.tag,k({key:t},r.attr),I(r.child)))}function j(e){return r=>y.default.createElement(U,T({attr:k({},e.attr)},r),I(e.child))}function U(e){var r=t=>{var{attr:n,size:o,title:a}=e,d=V(e,_),i=o||t.size||"1em",c;return t.className&&(c=t.className),e.className&&(c=(c?c+" ":"")+e.className),y.default.createElement("svg",T({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},t.attr,n,d,{className:c,style:k(k({color:e.color||t.color},t.style),e.style),height:i,width:i,xmlns:"http://www.w3.org/2000/svg"}),a&&y.default.createElement("title",null,a),e.children)};return O!==void 0?y.default.createElement(O.Consumer,null,t=>r(t)):r(F)}function W(e){return j({tag:"svg",attr:{viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},child:[{tag:"path",attr:{fillRule:"evenodd",d:"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",clipRule:"evenodd"},child:[]}]})(e)}function Z(e){return j({tag:"svg",attr:{viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true"},child:[{tag:"path",attr:{fillRule:"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",clipRule:"evenodd"},child:[]}]})(e)}const L=f.createContext(void 0),J=f.forwardRef((e,r)=>{const{children:t,onOpenChange:n,position:o,sub:a,...d}=e;m.assertEmpty(d);const[i,c]=f.useState(!1),u=f.useRef(null),g=f.useRef(),h=f.useCallback(()=>{g.current&&clearTimeout(g.current),g.current=setTimeout(()=>{c(!1)},250)},[]),v=f.useCallback(()=>{g.current&&clearTimeout(g.current),c(!0)},[]);return s.jsx(L.Provider,{value:{onMenuMouseOver:v,onMenuMouseLeave:h},children:s.jsx(l.Menu.Item,{className:"bn-menu-item bn-mt-sub-menu-item",ref:S.mergeRefs(r,u),onMouseOver:v,onMouseLeave:h,children:s.jsx(l.Menu,{portalProps:{target:u.current?u.current.parentElement:void 0},middlewares:{flip:!0,shift:!0,inline:!1,size:!0},trigger:"hover",opened:i,onClose:()=>n==null?void 0:n(!1),onOpen:()=>n==null?void 0:n(!0),position:o,children:t})})})}),Q=e=>{const{children:r,onOpenChange:t,position:n,sub:o,...a}=e;return m.assertEmpty(a),o?s.jsx(J,{...e}):s.jsx(l.Menu,{withinPortal:!1,middlewares:{flip:!0,shift:!0,inline:!1,size:!0},onClose:()=>t==null?void 0:t(!1),onOpen:()=>t==null?void 0:t(!0),position:n,children:r})},X=f.forwardRef((e,r)=>{const{className:t,children:n,icon:o,checked:a,subTrigger:d,onClick:i,...c}=e;return m.assertEmpty(c,!1),d?s.jsxs("div",{onClick:u=>{u.preventDefault(),u.stopPropagation()},ref:r,...c,children:[n,s.jsx(Z,{size:15})]}):s.jsx(l.Menu.Item,{className:t,ref:r,leftSection:o,rightSection:a?s.jsx(l.CheckIcon,{size:10}):a===!1?s.jsx("div",{className:"bn-tick-space"}):null,onClick:i,...c,children:n})}),Y=e=>{const{children:r,sub:t,...n}=e;return m.assertEmpty(n),s.jsx(l.Menu.Target,{children:r})},R=f.forwardRef((e,r)=>{const{className:t,children:n,sub:o,...a}=e;m.assertEmpty(a);const d=f.useContext(L);return s.jsx(l.Menu.Dropdown,{className:t,ref:r,onMouseOver:d==null?void 0:d.onMenuMouseOver,onMouseLeave:d==null?void 0:d.onMenuMouseLeave,children:n})}),$=f.forwardRef((e,r)=>{const{className:t,...n}=e;return m.assertEmpty(n),s.jsx(l.Menu.Divider,{className:t,ref:r})}),ee=f.forwardRef((e,r)=>{const{className:t,children:n,...o}=e;return m.assertEmpty(o),s.jsx(l.Menu.Label,{className:t,ref:r,children:n})}),te=f.forwardRef((e,r)=>{const{className:t,tabs:n,defaultOpenTab:o,openTab:a,setOpenTab:d,loading:i,...c}=e;return m.assertEmpty(c),s.jsx(l.Group,{className:t,ref:r,children:s.jsxs(l.Tabs,{value:a,defaultValue:o,onChange:d,children:[i&&s.jsx(l.LoadingOverlay,{visible:i}),s.jsx(l.Tabs.List,{children:n.map(u=>s.jsx(l.Tabs.Tab,{"data-test":`${u.name.toLowerCase()}-tab`,value:u.name,children:u.name},u.name))}),n.map(u=>s.jsx(l.Tabs.Panel,{value:u.name,children:u.tabPanel},u.name))]})})}),re=f.forwardRef((e,r)=>{const{className:t,children:n,onClick:o,label:a,...d}=e;return m.assertEmpty(d),s.jsx(l.Button,{size:"xs","aria-label":a,className:t,ref:r,onClick:o,...d,children:n})}),ne=f.forwardRef((e,r)=>{const{className:t,accept:n,value:o,placeholder:a,onChange:d,...i}=e;return m.assertEmpty(i),s.jsx(l.FileInput,{size:"xs",className:t,ref:r,accept:n,value:o,placeholder:a,onChange:d,...i})}),oe=f.forwardRef((e,r)=>{const{className:t,children:n,...o}=e;return m.assertEmpty(o),s.jsx("div",{className:t,ref:r,children:n})}),se=f.forwardRef((e,r)=>{const{className:t,value:n,placeholder:o,onKeyDown:a,onChange:d,...i}=e;return m.assertEmpty(i),s.jsx(l.TextInput,{size:"xs","data-test":"embed-input",className:t,ref:r,value:n,placeholder:o,onKeyDown:a,onChange:d})}),ae=e=>{const{children:r,opened:t,position:n,...o}=e;return m.assertEmpty(o),s.jsx(l.Popover,{withinPortal:!1,opened:t,position:n,children:r})},le=e=>{const{children:r,...t}=e;return m.assertEmpty(t),s.jsx(l.PopoverTarget,{children:r})},ie=f.forwardRef((e,r)=>{const{className:t,children:n,variant:o,...a}=e;return m.assertEmpty(a),s.jsx(l.PopoverDropdown,{className:t,ref:r,children:n})}),de=f.forwardRef((e,r)=>{const{className:t,children:n,...o}=e;return m.assertEmpty(o,!1),s.jsx(l.Group,{align:"center",gap:0,className:t,ref:r,...o,children:n})}),ue=f.forwardRef((e,r)=>{const{className:t,children:n,icon:o,onClick:a,onDragEnd:d,onDragStart:i,draggable:c,label:u,...g}=e;return m.assertEmpty(g,!1),o?s.jsx(l.ActionIcon,{size:24,className:t,ref:r,onClick:a,onDragEnd:d,onDragStart:i,draggable:c,"aria-label":u,...g,children:o}):s.jsx(l.Button,{className:t,ref:r,onClick:a,onDragEnd:d,onDragStart:i,draggable:c,"aria-label":u,...g,children:n})}),ce=f.forwardRef((e,r)=>{const{className:t,children:n,id:o,columns:a,...d}=e;return m.assertEmpty(d),s.jsx("div",{className:t,style:{gridTemplateColumns:`repeat(${a}, 1fr)`},ref:r,id:o,role:"grid",children:n})}),fe=f.forwardRef((e,r)=>{const{className:t,children:n,columns:o,...a}=e;return m.assertEmpty(a),s.jsx(l.Group,{className:t,style:{gridColumn:`1 / ${o+1}`},ref:r,children:s.jsx(l.Group,{className:"bn-mt-suggestion-menu-item-title",children:n})})}),me=f.forwardRef((e,r)=>{const{className:t,isSelected:n,onClick:o,item:a,id:d,...i}=e;m.assertEmpty(i);const c=f.useRef(null);return f.useEffect(()=>{if(!c.current||!n)return;const u=w.elementOverflow(c.current,document.querySelector(".bn-grid-suggestion-menu"));u==="top"?c.current.scrollIntoView(!0):u==="bottom"&&c.current.scrollIntoView(!1)},[n]),s.jsx("div",{className:t,ref:S.mergeRefs(r,c),id:d,role:"option",onClick:o,"aria-selected":n||void 0,children:a.icon})}),pe=f.forwardRef((e,r)=>{const{className:t,children:n,columns:o,...a}=e;return m.assertEmpty(a),s.jsx(l.Loader,{className:t,style:{gridColumn:`1 / ${o+1}`},type:"dots",ref:r})}),be=f.forwardRef((e,r)=>{const{className:t,children:n,id:o,...a}=e;return m.assertEmpty(a),s.jsx(l.Stack,{gap:0,className:t,ref:r,id:o,role:"listbox",children:n})}),ge=f.forwardRef((e,r)=>{const{className:t,children:n,...o}=e;return m.assertEmpty(o),s.jsx(l.Group,{className:t,ref:r,children:s.jsx(l.Group,{className:"bn-mt-suggestion-menu-item-title",children:n})})}),he=f.forwardRef((e,r)=>{const{className:t,isSelected:n,onClick:o,item:a,id:d,...i}=e;m.assertEmpty(i);const c=f.useRef(null);return f.useEffect(()=>{if(!c.current||!n)return;const u=w.elementOverflow(c.current,document.querySelector(".bn-suggestion-menu"));u==="top"?c.current.scrollIntoView(!0):u==="bottom"&&c.current.scrollIntoView(!1)},[n]),s.jsxs(l.Group,{gap:0,className:t,ref:S.mergeRefs(r,c),id:d,role:"option",onClick:o,"aria-selected":n||void 0,children:[a.icon&&s.jsx(l.Group,{className:"bn-mt-suggestion-menu-item-section","data-position":"left",children:a.icon}),s.jsxs(l.Stack,{gap:0,className:"bn-mt-suggestion-menu-item-body",children:[s.jsx(l.Text,{className:"bn-mt-suggestion-menu-item-title",children:a.title}),s.jsx(l.Text,{className:"bn-mt-suggestion-menu-item-subtitle",children:a.subtext})]}),a.badge&&s.jsx(l.Group,{"data-position":"right",className:"bn-mt-suggestion-menu-item-section",children:s.jsx(l.Badge,{size:"xs",children:a.badge})})]})}),ve=f.forwardRef((e,r)=>{const{className:t,children:n,...o}=e;return m.assertEmpty(o),s.jsx(l.Group,{className:t,ref:r,children:n})}),ye=f.forwardRef((e,r)=>{const{className:t,children:n,...o}=e;return m.assertEmpty(o),s.jsx(l.Loader,{className:t,type:"dots",ref:r})}),we=f.forwardRef((e,r)=>{const{children:t,className:n,onMouseDown:o,onClick:a,...d}=e;return m.assertEmpty(d,!1),s.jsx(l.Button,{className:n,ref:r,onMouseDown:o,onClick:a,...d,children:t})}),Se=f.forwardRef((e,r)=>{const{className:t,children:n,draggable:o,onDragStart:a,onDragEnd:d,style:i,label:c,...u}=e;return m.assertEmpty(u,!1),s.jsx(l.Button,{className:t,ref:r,"aria-label":c,draggable:o,onDragStart:a,onDragEnd:d,style:i,...u,children:n})}),C=f.forwardRef((e,r)=>{const{className:t,children:n,onMouseEnter:o,onMouseLeave:a,...d}=e;m.assertEmpty(d);const{ref:i,focused:c}=S.useFocusWithin(),u=S.useFocusTrap(c),g=S.mergeRefs(r,i,u);return s.jsx(l.Group,{className:t,ref:g,role:"toolbar",onMouseEnter:o,onMouseLeave:a,children:n})}),Te=e=>s.jsxs(l.Stack,{gap:0,className:"bn-tooltip",children:[s.jsx(l.Text,{size:"sm",children:e.mainTooltip}),e.secondaryTooltip&&s.jsx(l.Text,{size:"xs",children:e.secondaryTooltip})]}),M=f.forwardRef((e,r)=>{const{className:t,children:n,mainTooltip:o,secondaryTooltip:a,icon:d,isSelected:i,isDisabled:c,onClick:u,label:g,...h}=e;return m.assertEmpty(h,!1),s.jsx(l.Tooltip,{withinPortal:!1,label:s.jsx(Te,{mainTooltip:o,secondaryTooltip:a}),children:n?s.jsx(l.Button,{"aria-label":g,className:t,onMouseDown:v=>{m.isSafari()&&v.currentTarget.focus()},onClick:u,"aria-pressed":i,"data-selected":i||void 0,"data-test":o.slice(0,1).toLowerCase()+o.replace(/\s+/g,"").slice(1),size:"xs",disabled:c||!1,ref:r,...h,children:n}):s.jsx(l.ActionIcon,{className:t,"aria-label":g,onMouseDown:v=>{m.isSafari()&&v.currentTarget.focus()},onClick:u,"aria-pressed":i,"data-selected":i||void 0,"data-test":o.slice(0,1).toLowerCase()+o.replace(/\s+/g,"").slice(1),size:30,disabled:c||!1,ref:r,...h,children:d})})}),ke=f.forwardRef((e,r)=>{const{className:t,items:n,isDisabled:o,...a}=e;m.assertEmpty(a);const d=n.filter(i=>i.isSelected)[0];return d?s.jsxs(l.Menu,{withinPortal:!1,transitionProps:{exitDuration:0},disabled:o,middlewares:{flip:!0,shift:!0,inline:!1,size:!0},children:[s.jsx(l.Menu.Target,{children:s.jsx(l.Button,{onMouseDown:i=>{m.isSafari()&&i.currentTarget.focus()},leftSection:d.icon,rightSection:s.jsx(W,{}),size:"xs",variant:"subtle",disabled:o,children:d.text})}),s.jsx(l.Menu.Dropdown,{className:t,ref:r,children:n.map(i=>s.jsx(l.Menu.Item,{onClick:i.onClick,leftSection:i.icon,rightSection:i.isSelected?s.jsx(l.CheckIcon,{size:10,className:"bn-tick-icon"}):s.jsx("div",{className:"bn-tick-space"}),disabled:i.isDisabled,children:i.text},i.text))})]}):null}),B={FormattingToolbar:{Root:C,Button:M,Select:ke},FilePanel:{Root:te,Button:re,FileInput:ne,TabPanel:oe,TextInput:se},GridSuggestionMenu:{Root:ce,Item:me,EmptyItem:fe,Loader:pe},LinkToolbar:{Root:C,Button:M},SideMenu:{Root:de,Button:ue},SuggestionMenu:{Root:be,Item:he,EmptyItem:ge,Label:ve,Loader:ye},TableHandle:{Root:Se,ExtendButton:we},Generic:{Toolbar:{Root:C,Button:M},Form:{Root:e=>s.jsx("div",{children:e.children}),TextInput:G},Menu:{Root:Q,Trigger:Y,Dropdown:R,Divider:$,Label:ee,Item:X},Popover:{Root:ae,Trigger:le,Content:ie}}},xe={activeClassName:""},Ce=e=>{const{className:r,theme:t,...n}=e,o=w.useBlockNoteContext(),a=w.usePrefersColorScheme(),d=(o==null?void 0:o.colorSchemePreference)||a,i=f.useCallback(u=>{if(u&&(P(u),typeof t=="object")){if("light"in t&&"dark"in t){x(t[d==="dark"?"dark":"light"],u);return}x(t,u);return}},[d,t]),c=typeof t=="string"?t:d!=="no-preference"?d:"light";return s.jsx(w.ComponentsContext.Provider,{value:B,children:s.jsx(l.MantineProvider,{theme:xe,cssVariablesSelector:".bn-mantine",getRootElement:()=>{},children:s.jsx(w.BlockNoteViewRaw,{"data-mantine-color-scheme":c,className:m.mergeCSSClasses("bn-mantine",r||""),theme:typeof t=="object"?void 0:t,...n,ref:i})})})},p=["#FFFFFF","#EFEFEF","#CFCFCF","#AFAFAF","#7F7F7F","#3F3F3F","#1F1F1F","#161616","#0F0F0F","#000000"],E={colors:{editor:{text:p[5],background:p[0]},menu:{text:p[5],background:p[0]},tooltip:{text:p[5],background:p[1]},hovered:{text:p[5],background:p[1]},selected:{text:p[0],background:p[5]},disabled:{text:p[3],background:p[1]},shadow:p[2],border:p[1],sideMenu:p[2],highlights:m.COLORS_DEFAULT},borderRadius:6,fontFamily:'"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'},Me={colors:{editor:{text:p[2],background:p[6]},menu:{text:p[2],background:p[6]},tooltip:{text:p[2],background:p[7]},hovered:{text:p[2],background:p[7]},selected:{text:p[2],background:p[8]},disabled:{text:p[5],background:p[7]},shadow:p[8],border:p[7],sideMenu:p[4],highlights:m.COLORS_DARK_MODE_DEFAULT},borderRadius:E.borderRadius,fontFamily:E.fontFamily};b.BlockNoteView=Ce,b.applyBlockNoteCSSVariablesFromTheme=x,b.components=B,b.darkDefaultTheme=Me,b.defaultColorScheme=p,b.lightDefaultTheme=E,b.removeBlockNoteCSSVariables=P,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
-//# sourceMappingURL=blocknote-mantine.umd.cjs.map