@blocknote/ariakit 0.25.1 → 0.26.0

package/src/comments/Card.tsx

@@ -1,4 +1,4 @@
-import { Group as AriakitGroup } from "@ariakit/react";
+import { Button as AriakitButton, Group as AriakitGroup } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -8,14 +8,31 @@ export const Card = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Card"]
 >((props, ref) => {
-  const { className, children, ...rest } = props;
+  const {
+    className,
+    children,
+    selected,
+    headerText,
+    onFocus,
+    onBlur,
+    tabIndex,
+    ...rest
+  } = props;
 
   assertEmpty(rest, false);
 
   return (
     <AriakitGroup
-      className={mergeCSSClasses(className, "bn-ak-hovercard")}
+      className={mergeCSSClasses(
+        className,
+        "bn-ak-hovercard",
+        selected && "selected"
+      )}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={tabIndex}
       ref={ref}>
+      {headerText && <div className={"bn-header-text"}>{headerText}</div>}
       {children}
     </AriakitGroup>
   );
@@ -37,3 +54,23 @@ export const CardSection = forwardRef<
     </AriakitGroup>
   );
 });
+
+export const ExpandSectionsPrompt = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["Comments"]["ExpandSectionsPrompt"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <AriakitButton
+      className={mergeCSSClasses(
+        className,
+        "bn-ak-button bn-ak-secondary bn-ak-expand-sections-prompt"
+      )}
+      ref={ref}>
+      {children}
+    </AriakitButton>
+  );
+});

package/src/comments/Comment.tsx

@@ -6,9 +6,12 @@ import { forwardRef, useState } from "react";
 
 const AuthorInfo = forwardRef<
   HTMLDivElement,
-  Pick<ComponentProps["Comments"]["Comment"], "authorInfo" | "timeString">
+  Pick<
+    ComponentProps["Comments"]["Comment"],
+    "authorInfo" | "timeString" | "edited"
+  >
 >((props, _ref) => {
-  const { authorInfo, timeString, ...rest } = props;
+  const { authorInfo, timeString, edited, ...rest } = props;
 
   assertEmpty(rest, false);
 
@@ -30,7 +33,9 @@ const AuthorInfo = forwardRef<
       />
       <div className={"bn-ak-username"}>
         {authorInfo.username}
-        <span>{timeString}</span>
+        <span>
+          {timeString} {edited && "(edited)"}
+        </span>
       </div>
     </AriakitGroup>
   );
@@ -47,6 +52,7 @@ export const Comment = forwardRef<
     timeString,
     actions,
     children,
+    edited,
     ...rest
   } = props;
 

package/src/comments/Editor.tsx

@@ -12,13 +12,14 @@ export const Editor = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Editor"]
 >((props, ref) => {
-  const { className, onFocus, onBlur, editor, editable, ...rest } = props;
+  const { className, onFocus, onBlur, autoFocus, editor, editable, ...rest } =
+    props;
 
   assertEmpty(rest, false);
 
   return (
     <BlockNoteView
-      autoFocus={true}
+      autoFocus={autoFocus}
       className={className}
       editor={props.editor}
       sideMenu={false}

package/src/components.ts

@@ -33,7 +33,7 @@ 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 { Card, CardSection, ExpandSectionsPrompt } from "./comments/Card.js";
 import { Comment } from "./comments/Comment.js";
 import { Editor } from "./comments/Editor.js";
 import { Badge, BadgeGroup } from "./badge/Badge.js";
@@ -60,6 +60,7 @@ export const components: Components = {
   LinkToolbar: {
     Root: Toolbar,
     Button: ToolbarButton,
+    Select: ToolbarSelect,
   },
   SideMenu: {
     Root: SideMenu,
@@ -81,6 +82,7 @@ export const components: Components = {
     Editor: Editor,
     Card: Card,
     CardSection: CardSection,
+    ExpandSectionsPrompt: ExpandSectionsPrompt,
   },
   Generic: {
     Badge: {
@@ -90,6 +92,7 @@ export const components: Components = {
     Toolbar: {
       Root: Toolbar,
       Button: ToolbarButton,
+      Select: ToolbarSelect,
     },
     Form: {
       Root: Form,

package/src/style.css

@@ -90,7 +90,7 @@
   --highlight: rgb(255 255 255/20%);
   --shadow: rgb(0 0 0/10%);
   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);
+  inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow);
   font-size: 0.7rem;
   border-radius: 4px;
   padding-inline: 4px;
@@ -221,14 +221,14 @@
 }
 
 .bn-ariakit .bn-thread-comments {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .bn-ak-avatar {
-    height: 24px;
-    width: 24px;
+  height: 24px;
+  width: 24px;
 }
 
 .bn-ak-username {
@@ -244,9 +244,9 @@
 }
 
 .bn-ak-author-info {
-    align-items: center;
-    display: flex;
-    gap: 16px
+  align-items: center;
+  display: flex;
+  gap: 16px
 }
 
 .bn-ariakit .bn-comment-editor .bn-editor {
@@ -271,9 +271,9 @@
 }
 
 .bn-ak-badge-group {
-    align-items: center;
-    display: flex;
-    gap: 4px;
+  align-items: center;
+  display: flex;
+  gap: 4px;
   flex-wrap: wrap;
   width: 100%;
 }
@@ -309,11 +309,33 @@
 }
 
 .bn-ak-skeleton {
-    background-color: rgb(255 255 255/25%);
+  background-color: rgb(255 255 255/25%);
 }
 
 .bn-ak-username.bn-ak-skeleton {
   border-radius: 8px;
   height: 16px;
   width: 100px;
+}
+
+.bn-ak-expand-sections-prompt {
+  padding: 0;
+  width: fit-content;
+}
+
+.bn-ak-expand-sections-prompt:hover {
+  background-color: transparent;
+}
+
+.bn-ariakit .bn-thread .bn-header-text,
+.bn-ariakit .bn-thread .bn-resolved-text {
+  font-size: 0.8rem;
+  font-style: italic;
+}
+
+.bn-ariakit .bn-thread.selected .bn-header-text,
+.bn-ariakit .bn-thread.selected .bn-resolved-text,
+.bn-ariakit .bn-thread.selected .bn-ak-author-info,
+.bn-ariakit .bn-thread.selected .bn-ak-expand-sections-prompt {
+  color: var(--bn-colors-selected-text);
 }

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

@@ -1,9 +1,18 @@
 /// <reference types="react" />
 export declare const Card: import("react").ForwardRefExoticComponent<{
     className?: string | undefined;
+    headerText?: string | undefined;
+    selected?: boolean | undefined;
+    onFocus?: ((event: import("react").FocusEvent<Element, Element>) => void) | undefined;
+    onBlur?: ((event: import("react").FocusEvent<Element, Element>) => void) | undefined;
+    tabIndex?: number | 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>>;
+export declare const ExpandSectionsPrompt: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare const Editor: import("react").ForwardRefExoticComponent<{
     className?: string | undefined;
+    autoFocus?: boolean | undefined;
     editable: boolean;
     editor: import("@blocknote/core").BlockNoteEditor<any, any, any>;
     onFocus?: (() => void) | undefined;