@blocknote/ariakit 0.24.2 → 0.25.1

package/src/ariakitStyles.css

@@ -1003,4 +1003,187 @@ responsible for the majority of the styling. */
 
 .bn-ak-link:where(.dark, .dark *) {
     color: hsl(204 100% 64%);
+}
+
+/* https://ariakit.org/components/hovercard */
+/*.bn-ak-button {*/
+/*    --border: rgb(0 0 0/13%);*/
+/*    --highlight: rgb(255 255 255/20%);*/
+/*    --shadow: rgb(0 0 0/10%);*/
+/*    display: flex;*/
+/*    height: 2.5rem;*/
+/*    user-select: none;*/
+/*    align-items: center;*/
+/*    justify-content: center;*/
+/*    gap: 0.25rem;*/
+/*    white-space: nowrap;*/
+/*    border-style: none;*/
+/*    background-color: white;*/
+/*    padding-left: 1rem;*/
+/*    padding-right: 1rem;*/
+/*    font-size: 1rem;*/
+/*    line-height: 1.5rem;*/
+/*    color: black;*/
+/*    text-decoration-line: none;*/
+/*    outline-width: 2px;*/
+/*    outline-offset: 2px;*/
+/*    outline-color: hsl(204 100% 40%);*/
+/*    box-shadow:*/
+/*            inset 0 0 0 1px var(--border),*/
+/*            inset 0 2px 0 var(--highlight),*/
+/*            inset 0 -1px 0 var(--shadow),*/
+/*            0 1px 1px var(--shadow);*/
+/*    position: absolute;*/
+/*    top: 1rem;*/
+/*    right: 1rem;*/
+/*    border-radius: 9999px;*/
+/*    font-weight: 600;*/
+/*}*/
+
+/*.bn-ak-button:where(.dark, .dark *) {*/
+/*    --border: rgb(255 255 255/10%);*/
+/*    --highlight: rgb(255 255 255/5%);*/
+/*    --shadow: rgb(0 0 0/25%);*/
+/*    background-color: rgb(255 255 255 / 0.05);*/
+/*    color: white;*/
+/*    box-shadow:*/
+/*            inset 0 0 0 1px var(--border),*/
+/*            inset 0 -1px 0 1px var(--shadow),*/
+/*            inset 0 1px 0 var(--highlight);*/
+/*}*/
+
+/*.bn-ak-button:not(:active):hover {*/
+/*    --border: rgb(0 0 0/33%);*/
+/*}*/
+
+/*.bn-ak-button:where(.dark, .dark *):not(:active):hover {*/
+/*    --border: rgb(255 255 255/25%);*/
+/*}*/
+
+.bn-ak-primary {
+    --border: rgba(0, 0, 0, 0.15);
+    --highlight: rgba(255, 255, 255, 0.25);
+    --shadow: rgba(0, 0, 0, 0.15);
+    background-color: hsl(204 100% 40%);
+    color: white;
+}
+
+.bn-ak-primary:hover {
+    --border: rgba(0, 0, 0, 0.35);
+    background-color: hsl(204 100% 35%);
+}
+
+.bn-ak-primary:where(.dark, .dark *) {
+    --border: rgba(255, 255, 255, 0.25);
+    --highlight: rgba(255, 255, 255, 0.1);
+    --shadow: rgba(0, 0, 0, 0.25);
+    background-color: hsl(204 100% 35%);
+}
+
+.bn-ak-primary:hover:where(.dark, .dark *) {
+    --border: rgba(255, 255, 255, 0.45);
+    background-color: hsl(204 100% 40%);
+}
+
+.bn-ak-button[aria-disabled="true"] {
+    opacity: 0.5;
+}
+
+.bn-ak-button[data-focus-visible] {
+    outline-style: solid;
+}
+
+.bn-ak-button:active,
+.bn-ak-button[data-active] {
+    padding-top: 0.125rem;
+    box-shadow:
+            inset 0 0 0 1px var(--border),
+            inset 0 2px 0 var(--border);
+}
+
+@media (min-width: 640px) {
+    .bn-ak-button {
+        gap: 0.5rem;
+    }
+}
+
+.bn-ak-button:active:where(.dark, .dark *),
+.bn-ak-button[data-active]:where(.dark, .dark *) {
+    box-shadow:
+            inset 0 0 0 1px var(--border),
+            inset 0 1px 1px 1px var(--shadow);
+}
+
+.bn-ak-flat {
+    box-shadow: none;
+}
+
+.bn-ak-flat:where(.dark, .dark *) {
+    box-shadow: none;
+}
+
+.bn-ak-flat:active:where(.dark, .dark *),
+.bn-ak-flat[data-active]:where(.dark, .dark *) {
+    box-shadow: none;
+}
+
+.bn-ak-anchor {
+    font-weight: 500;
+    color: hsl(204 100% 35%);
+    text-decoration-line: underline;
+    text-underline-offset: 0.25em;
+    text-decoration-skip-ink: none;
+}
+
+.bn-ak-anchor:hover {
+    text-decoration-thickness: 3px;
+}
+
+.bn-ak-anchor:where(.dark, .dark *) {
+    color: hsl(204 100% 64%);
+}
+
+.bn-ak-hovercard {
+    position: relative;
+    z-index: 50;
+    display: flex;
+    width: 300px;
+    flex-direction: column;
+    gap: 0.5rem;
+    border-radius: 0.5rem;
+    border-width: 1px;
+    border-style: solid;
+    border-color: hsl(204 20% 88%);
+    background-color: white;
+    padding: 1rem;
+    color: black;
+    box-shadow:
+            0 10px 15px -3px rgb(0 0 0 / 0.1),
+            0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.bn-ak-hovercard:focus-visible,
+.bn-ak-hovercard[data-focus-visible] {
+    outline: 2px solid hsl(204 100% 40%);
+    outline-offset: 2px;
+}
+
+.bn-ak-hovercard:where(.dark, .dark *) {
+    border-color: hsl(204 4% 24%);
+    background-color: hsl(204 4% 16%);
+    color: white;
+    box-shadow:
+            0 10px 15px -3px rgb(0 0 0 / 0.25),
+            0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.bn-ak-avatar {
+    width: 4rem;
+    border-radius: 9999px;
+}
+
+.bn-ak-username {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    font-weight: 600;
 }

package/src/badge/Badge.tsx

@@ -0,0 +1,77 @@
+import {
+  Button as AriakitButton,
+  Group as AriakitGroup,
+  Tooltip as AriakitTooltip,
+  TooltipAnchor as AriakitTooltipAnchor,
+  TooltipProvider as AriakitTooltipProvider,
+} from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const Badge = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["Generic"]["Badge"]["Root"]
+>((props, ref) => {
+  const {
+    className,
+    text,
+    icon,
+    isSelected,
+    mainTooltip,
+    secondaryTooltip,
+    onClick,
+    onMouseEnter,
+    ...rest
+  } = props;
+
+  assertEmpty(rest, false);
+
+  const badge = (
+    <AriakitButton
+      className={mergeCSSClasses(
+        className,
+        "bn-ak-badge bn-ak-button",
+        isSelected && "bn-ak-primary"
+      )}
+      aria-selected={isSelected === true}
+      onClick={(event) => onClick?.(event)}
+      onMouseEnter={onMouseEnter}
+      ref={ref}>
+      <span>{icon}</span>
+      <span>{text}</span>
+    </AriakitButton>
+  );
+
+  if (!mainTooltip) {
+    return badge;
+  }
+
+  return (
+    <AriakitTooltipProvider>
+      <AriakitTooltipAnchor render={badge} />
+      <AriakitTooltip className="bn-ak-tooltip" portal={false}>
+        <span>{mainTooltip}</span>
+        {secondaryTooltip && <span>{secondaryTooltip}</span>}
+      </AriakitTooltip>
+    </AriakitTooltipProvider>
+  );
+});
+
+export const BadgeGroup = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Badge"]["Group"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <AriakitGroup
+      className={mergeCSSClasses(className, "bn-ak-badge-group")}
+      ref={ref}>
+      {children}
+    </AriakitGroup>
+  );
+});

package/src/comments/Card.tsx

@@ -0,0 +1,39 @@
+import { Group as AriakitGroup } from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const Card = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["Card"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <AriakitGroup
+      className={mergeCSSClasses(className, "bn-ak-hovercard")}
+      ref={ref}>
+      {children}
+    </AriakitGroup>
+  );
+});
+
+export const CardSection = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["CardSection"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <AriakitGroup
+      className={mergeCSSClasses(className, "bn-ak-card-section")}
+      ref={ref}>
+      {children}
+    </AriakitGroup>
+  );
+});

package/src/comments/Comment.tsx

@@ -0,0 +1,87 @@
+import { Group as AriakitGroup } from "@ariakit/react";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps, useFocusWithin } from "@blocknote/react";
+import { forwardRef, useState } from "react";
+
+const AuthorInfo = forwardRef<
+  HTMLDivElement,
+  Pick<ComponentProps["Comments"]["Comment"], "authorInfo" | "timeString">
+>((props, _ref) => {
+  const { authorInfo, timeString, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  if (authorInfo === "loading") {
+    return (
+      <AriakitGroup className={"bn-ak-author-info"}>
+        <div className={"bn-ak-avatar bn-ak-skeleton"} />
+        <div className={"bn-ak-username bn-ak-skeleton"} />
+      </AriakitGroup>
+    );
+  }
+
+  return (
+    <AriakitGroup className={"bn-ak-author-info"}>
+      <img
+        src={authorInfo.avatarUrl}
+        alt={authorInfo.username}
+        className={"bn-ak-avatar"}
+      />
+      <div className={"bn-ak-username"}>
+        {authorInfo.username}
+        <span>{timeString}</span>
+      </div>
+    </AriakitGroup>
+  );
+});
+
+export const Comment = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["Comment"]
+>((props, ref) => {
+  const {
+    className,
+    showActions,
+    authorInfo,
+    timeString,
+    actions,
+    children,
+    ...rest
+  } = props;
+
+  assertEmpty(rest, false);
+
+  const [hovered, setHovered] = useState(false);
+  const { focused, ref: focusRef } = useFocusWithin();
+
+  const doShowActions =
+    actions &&
+    (showActions === true ||
+      showActions === undefined ||
+      (showActions === "hover" && hovered) ||
+      focused);
+
+  return (
+    <AriakitGroup
+      ref={ref}
+      className={className}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}>
+      {doShowActions ? (
+        <AriakitGroup
+          ref={focusRef}
+          style={{
+            position: "absolute",
+            right: 0,
+            top: 0,
+            zIndex: 10,
+          }}>
+          {actions}
+        </AriakitGroup>
+      ) : null}
+      <AuthorInfo {...props} />
+      {children}
+    </AriakitGroup>
+  );
+});

package/src/comments/Editor.tsx

@@ -0,0 +1,47 @@
+import { assertEmpty } from "@blocknote/core";
+import {
+  ComponentProps,
+  FormattingToolbar,
+  FormattingToolbarController,
+  getFormattingToolbarItems,
+} from "@blocknote/react";
+import { forwardRef } from "react";
+import { BlockNoteView } from "../BlockNoteView.js";
+
+export const Editor = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["Editor"]
+>((props, ref) => {
+  const { className, onFocus, onBlur, editor, editable, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <BlockNoteView
+      autoFocus={true}
+      className={className}
+      editor={props.editor}
+      sideMenu={false}
+      slashMenu={false}
+      tableHandles={false}
+      filePanel={false}
+      formattingToolbar={false}
+      editable={editable}
+      ref={ref}
+      onFocus={onFocus}
+      onBlur={onBlur}>
+      <FormattingToolbarController
+        formattingToolbar={CustomFormattingToolbar}
+      />
+    </BlockNoteView>
+  );
+});
+
+const CustomFormattingToolbar = () => {
+  const items = getFormattingToolbarItems([]).filter(
+    (el) => el.key !== "nestBlockButton" && el.key !== "unnestBlockButton"
+  );
+  return (
+    <FormattingToolbar blockTypeSelectItems={[]}>{items}</FormattingToolbar>
+  );
+};

package/src/components.ts

@@ -10,6 +10,7 @@ import {
   MenuLabel,
   MenuTrigger,
 } from "./menu/Menu.js";
+import { MenuButton } from "./menu/Button.js";
 import { Panel } from "./panel/Panel.js";
 import { PanelButton } from "./panel/PanelButton.js";
 import { PanelFileInput } from "./panel/PanelFileInput.js";
@@ -32,6 +33,10 @@ import { TableHandle } from "./tableHandle/TableHandle.js";
 import { Toolbar } from "./toolbar/Toolbar.js";
 import { ToolbarButton } from "./toolbar/ToolbarButton.js";
 import { ToolbarSelect } from "./toolbar/ToolbarSelect.js";
+import { Card, CardSection } from "./comments/Card.js";
+import { Comment } from "./comments/Comment.js";
+import { Editor } from "./comments/Editor.js";
+import { Badge, BadgeGroup } from "./badge/Badge.js";
 
 export const components: Components = {
   FormattingToolbar: {
@@ -71,7 +76,17 @@ export const components: Components = {
     Root: TableHandle,
     ExtendButton: ExtendButton,
   },
+  Comments: {
+    Comment: Comment,
+    Editor: Editor,
+    Card: Card,
+    CardSection: CardSection,
+  },
   Generic: {
+    Badge: {
+      Root: Badge,
+      Group: BadgeGroup,
+    },
     Toolbar: {
       Root: Toolbar,
       Button: ToolbarButton,
@@ -87,6 +102,7 @@ export const components: Components = {
       Divider: MenuDivider,
       Label: MenuLabel,
       Item: MenuItem,
+      Button: MenuButton,
     },
     Popover: {
       Root: Popover,

package/src/menu/Button.tsx

@@ -0,0 +1,44 @@
+import { Button as AriakitButton } from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const MenuButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["Generic"]["Menu"]["Button"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    icon,
+    onClick,
+    label,
+    onDragEnd,
+    onDragStart,
+    draggable,
+    ...rest
+  } = props;
+
+  // false, because rest props can be added by ariakit when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  return (
+    <AriakitButton
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+      draggable={draggable}
+      aria-label={label}
+      className={mergeCSSClasses(
+        "bn-ak-button bn-ak-secondary",
+        className || ""
+      )}
+      ref={ref}
+      onClick={onClick}
+      {...rest}>
+      {icon}
+      {children}
+    </AriakitButton>
+  );
+});

package/src/popover/Popover.tsx

@@ -29,7 +29,11 @@ export const PopoverContent = forwardRef<
 
   return (
     <AriakitPopover
-      className={mergeCSSClasses("bn-ak-popover", className || "")}
+      className={mergeCSSClasses(
+        "bn-ak-popover",
+        className || "",
+        variant === "panel-popover" ? "bn-ak-panel-popover" : ""
+      )}
       ref={ref}>
       {children}
     </AriakitPopover>

package/src/style.css

@@ -11,10 +11,12 @@
   gap: 0.5rem;
 }
 
-.bn-toolbar.bn-ak-toolbar {
-  overflow-x: auto;
+.bn-ak-toolbar {
+  height: fit-content;
+  overflow: scroll;
   max-width: 100vw;
 }
+
 .bn-toolbar .bn-ak-button {
   width: unset;
 }
@@ -45,6 +47,7 @@
 
 .bn-ak-button {
   outline-style: none;
+  cursor: pointer;
 }
 
 .bn-ak-menu-item[aria-selected="true"],
@@ -157,7 +160,8 @@
   box-shadow: none;
 }
 
-.bn-ariakit .bn-table-handle {
+.bn-ariakit .bn-table-handle,
+.bn-ariakit .bn-table-cell-handle {
   height: fit-content;
   padding: 0;
   width: fit-content;
@@ -165,7 +169,8 @@
 
 .bn-ariakit .bn-side-menu,
 .bn-ariakit .bn-table-handle,
-.bn-ariakit .bn-extend-button {
+.bn-ariakit .bn-extend-button,
+.bn-ariakit .bn-table-cell-handle {
   color: gray;
 }
 
@@ -212,4 +217,103 @@
   align-items: center;
   display: flex;
   flex-direction: column;
+  white-space: pre-wrap;
+}
+
+.bn-ariakit .bn-thread-comments {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 }
+
+.bn-ak-avatar {
+    height: 24px;
+    width: 24px;
+}
+
+.bn-ak-username {
+  align-items: center;
+  display: flex;
+  font-size: 14px;
+  gap: 8px;
+  line-height: 1rem;
+}
+
+.bn-ak-username > span {
+  font-size: 10px;
+}
+
+.bn-ak-author-info {
+    align-items: center;
+    display: flex;
+    gap: 16px
+}
+
+.bn-ariakit .bn-comment-editor .bn-editor {
+  background-color: transparent;
+}
+
+.bn-ak-badge {
+  align-items: center;
+  border-radius: 12px;
+  display: flex;
+  gap: 4px;
+  height: fit-content;
+  padding: 2px 10px;
+  position: relative;
+  width: fit-content;
+}
+
+.bn-ak-badge span {
+  align-items: center;
+  display: flex;
+  height: fit-content;
+}
+
+.bn-ak-badge-group {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.bn-ariakit .bn-thread-comment {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bn-ariakit .bn-action-toolbar .bn-ak-button {
+  height: 1.5rem;
+  padding: 8px;
+  width: fit-content;
+}
+
+.bn-ak-hovercard {
+  z-index: 0;
+}
+
+.bn-ak-panel-popover {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+}
+
+.bn-ariakit .bn-comment-actions-wrapper {
+  align-items: start;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bn-ak-skeleton {
+    background-color: rgb(255 255 255/25%);
+}
+
+.bn-ak-username.bn-ak-skeleton {
+  border-radius: 8px;
+  height: 16px;
+  width: 100px;
+}

package/src/toolbar/Toolbar.tsx

@@ -9,7 +9,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);