feat: AI block UI

packages/ariakit/src/index.tsx

@@ -46,6 +46,10 @@ import { ToolbarSelect } from "./toolbar/ToolbarSelect";
 import "./style.css";
 
 export const components: Components = {
+ AIToolbar: {
+ Root: Toolbar,
+ Button: ToolbarButton,
+ },
  FormattingToolbar: {
  Root: Toolbar,
  Button: ToolbarButton,

packages/ariakit/src/toolbar/ToolbarButton.tsx

@@ -34,45 +34,49 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
  // assertEmpty in this case is only used at typescript level, not runtime level
  assertEmpty(rest, false);
 
- return (
- <AriakitTooltipProvider>
- <AriakitTooltipAnchor
- className="link"
- render={
- <AriakitToolbarItem
- aria-label={label}
- className={mergeCSSClasses(
- "bn-ak-button bn-ak-secondary",
- 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 ? "true" : undefined}
- data-test={
- props.mainTooltip.slice(0, 1).toLowerCase() +
- props.mainTooltip.replace(/\s+/g, "").slice(1)
- }
- // size={"xs"}
- disabled={isDisabled || false}
- ref={ref}
- {...rest}>
- {icon}
- {children}
- </AriakitToolbarItem>
+ const Button = (
+ <AriakitToolbarItem
+ aria-label={label}
+ className={mergeCSSClasses(
+ "bn-ak-button bn-ak-secondary",
+ className || ""
+ )}
+ // Needed as Safari doesn't focus button elements on mouse down
+ // unlike other browsers.
+ onMouseDown={(e) => {
+ if (isSafari()) {
+ (e.currentTarget as HTMLButtonElement).focus();
  }
- />
- <AriakitTooltip className="bn-ak-tooltip">
- <span>{mainTooltip}</span>
- {secondaryTooltip && <span>{secondaryTooltip}</span>}
- </AriakitTooltip>
- </AriakitTooltipProvider>
+ }}
+ onClick={onClick}
+ aria-pressed={isSelected}
+ data-selected={isSelected ? "true" : undefined}
+ data-test={
+ mainTooltip &&
+ mainTooltip.slice(0, 1).toLowerCase() +
+ mainTooltip.replace(/\s+/g, "").slice(1)
+ }
+ // size={"xs"}
+ disabled={isDisabled || false}
+ ref={ref}
+ {...rest}>
+ {icon}
+ {children}
+ </AriakitToolbarItem>
  );
+
+ if (mainTooltip) {
+ return (
+ <AriakitTooltipProvider>
+ <AriakitTooltipAnchor className="link" render={Button} />
+ <AriakitTooltip className="bn-ak-tooltip">
+ <span>{mainTooltip}</span>
+ {secondaryTooltip && <span>{secondaryTooltip}</span>}
+ </AriakitTooltip>
+ </AriakitTooltipProvider>
+ );
+ }
+
+ return Button;
  }
 );

packages/core/src/blocks/AIBlockContent/AIBlockContent.ts

@@ -0,0 +1,122 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import {
+ BlockConfig,
+ BlockFromConfig,
+ createBlockSpec,
+ PropSchema,
+} from "../../schema";
+import { defaultProps } from "../defaultProps";
+
+export const mockAIModelCall = async (_prompt: string) => {
+ return new Promise<string>((resolve) => {
+ setTimeout(() => {
+ resolve(
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ );
+ }, 1000);
+ });
+};
+
+export const aiPropSchema = {
+ ...defaultProps,
+ prompt: {
+ default: "" as const,
+ },
+} satisfies PropSchema;
+
+export const aiBlockConfig = {
+ type: "ai" as const,
+ propSchema: aiPropSchema,
+ content: "inline",
+} satisfies BlockConfig;
+
+export const aiRender = (
+ block: BlockFromConfig<typeof aiBlockConfig, any, any>,
+ editor: BlockNoteEditor<any, any, any>
+) => {
+ if (!block.props.prompt) {
+ const generateResponseCallback = async () => {
+ generateButton.textContent = "Generating...";
+
+ editor.updateBlock(block, {
+ type: "ai",
+ props: { prompt: span.innerText },
+ content: await mockAIModelCall(block.props.prompt),
+ });
+ };
+
+ const promptBox = document.createElement("div");
+ promptBox.className = "bn-ai-prompt-box";
+
+ const icon = document.createElement("span");
+ icon.contentEditable = "false";
+ promptBox.appendChild(icon);
+ icon.outerHTML =
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.0007 1.20825 18.3195 3.68108 20.7923 4.99992 18.3195 6.31876 17.0007 8.79159 15.6818 6.31876 13.209 4.99992 15.6818 3.68108 17.0007 1.20825ZM8.00065 4.33325 10.6673 9.33325 15.6673 11.9999 10.6673 14.6666 8.00065 19.6666 5.33398 14.6666.333984 11.9999 5.33398 9.33325 8.00065 4.33325ZM19.6673 16.3333 18.0007 13.2083 16.334 16.3333 13.209 17.9999 16.334 19.6666 18.0007 22.7916 19.6673 19.6666 22.7923 17.9999 19.6673 16.3333Z"></path></svg>';
+
+ const span = document.createElement("span");
+ editor.domElement.addEventListener(
+ "keydown",
+ (event) => {
+ const currentBlock = editor.getTextCursorPosition().block;
+
+ if (
+ event.key === "Enter" &&
+ !editor.getSelection() &&
+ currentBlock.id === block.id &&
+ currentBlock.props.prompt === ""
+ ) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ generateResponseCallback();
+ }
+ },
+ true
+ );
+ promptBox.appendChild(span);
+
+ const generateButton = document.createElement("button");
+ generateButton.contentEditable = "false";
+ generateButton.textContent = "Generate";
+ generateButton.addEventListener("click", generateResponseCallback);
+ promptBox.appendChild(generateButton);
+
+ return {
+ dom: promptBox,
+ contentDOM: span,
+ };
+ }
+
+ const paragraph = document.createElement("p");
+
+ return {
+ dom: paragraph,
+ contentDOM: paragraph,
+ };
+};
+
+export const aiToExternalHTML = (
+ block: BlockFromConfig<typeof aiBlockConfig, any, any>
+) => {
+ if (!block.props.prompt) {
+ const div = document.createElement("p");
+
+ return {
+ dom: div,
+ contentDOM: div,
+ };
+ }
+
+ const paragraph = document.createElement("p");
+
+ return {
+ dom: paragraph,
+ contentDOM: paragraph,
+ };
+};
+
+export const AIBlock = createBlockSpec(aiBlockConfig, {
+ render: aiRender,
+ toExternalHTML: aiToExternalHTML,
+});

packages/core/src/blocks/defaultBlocks.ts

@@ -30,6 +30,7 @@ import { FileBlock } from "./FileBlockContent/FileBlockContent";
 import { ImageBlock } from "./ImageBlockContent/ImageBlockContent";
 import { VideoBlock } from "./VideoBlockContent/VideoBlockContent";
 import { AudioBlock } from "./AudioBlockContent/AudioBlockContent";
+import { AIBlock } from "./AIBlockContent/AIBlockContent";
 
 export const defaultBlockSpecs = {
  paragraph: Paragraph,
@@ -42,6 +43,7 @@ export const defaultBlockSpecs = {
  image: ImageBlock,
  video: VideoBlock,
  audio: AudioBlock,
+ ai: AIBlock,
 } satisfies BlockSpecs;
 
 export const defaultBlockSchema = getBlockSchemaFromSpecs(defaultBlockSpecs);

packages/core/src/editor/Block.css

@@ -372,6 +372,49 @@ NESTED BLOCKS
  font-style: italic;
 }
 
+/* AI */
+[data-content-type="ai"] .bn-ai-prompt-box {
+ align-items: center;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+ outline: solid 3px rgba(154, 56, 173, 0.2);
+ padding: 12px;
+ width: 100%;
+}
+
+[data-content-type="ai"] .bn-ai-prompt-box svg {
+ color: rgba(154, 56, 173, 0.2);
+ width: 24px;
+ height: 24px;
+}
+
+[data-content-type="ai"] .bn-ai-prompt-box span {
+ flex: 1;
+}
+
+[data-content-type="ai"] .bn-ai-prompt-box button {
+ background-color: transparent;
+ border: solid 1px rgba(120, 120, 120, 0.3);
+ border-radius: 4px;
+ color: rgba(154, 56, 173, 0.5);
+ cursor: pointer;
+ user-select: none;
+}
+
+[data-content-type="ai"][data-prompt] p {
+ border-radius: 4px;
+}
+
+[data-content-type="ai"][data-prompt] p:hover {
+ outline: solid 3px rgba(154, 56, 173, 0.1);
+}
+
+[data-content-type="ai"][data-prompt][data-is-focused] p {
+ outline: solid 3px rgba(154, 56, 173, 0.2);
+}
+
 /* TODO: should this be here? */
 
 /* TEXT COLORS */

packages/core/src/editor/BlockNoteEditor.ts

@@ -26,6 +26,7 @@ import {
  DefaultStyleSchema,
  PartialBlock,
 } from "../blocks/defaultBlocks";
+import { AIToolbarProsemirrorPlugin } from "../extensions/AIToolbar/AIToolbarPlugin";
 import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin";
@@ -243,6 +244,7 @@ export class BlockNoteEditor<
  ISchema,
  SSchema
  >;
+ public readonly aiToolbar?: AIToolbarProsemirrorPlugin;
 
  /**
  * The `uploadFile` method is what the editor uses when files need to be uploaded (for example when selecting an image to upload).
@@ -328,6 +330,9 @@ export class BlockNoteEditor<
  if (checkDefaultBlockTypeInSchema("table", this)) {
  this.tableHandles = new TableHandlesProsemirrorPlugin(this as any);
  }
+ if (checkDefaultBlockTypeInSchema("ai", this)) {
+ this.aiToolbar = new AIToolbarProsemirrorPlugin();
+ }
 
  const extensions = getBlockNoteExtensions({
  editor: this,
@@ -351,6 +356,7 @@ export class BlockNoteEditor<
  this.suggestionMenus.plugin,
  ...(this.filePanel ? [this.filePanel.plugin] : []),
  ...(this.tableHandles ? [this.tableHandles.plugin] : []),
+ ...(this.aiToolbar ? [this.aiToolbar.plugin] : []),
  PlaceholderPlugin(this, newOptions.placeholders),
  ];
  },