Merge branch 'refs/heads/main' into releases

# Conflicts:
#	package-lock.json
#	packages/shadcn/package.json

Author: matthewlipski

package-lock.json

@@ -140,7 +140,8 @@ responsible for the majority of the styling. */
     padding-bottom: 7px;
 }
 
-.bn-ak-menu:not(:focus) .bn-ak-menu-item:not(:focus)[aria-expanded="true"] {
+.bn-ak-menu:not(:focus)
+.bn-ak-menu-item:not(:focus)[aria-expanded="true"] {
     background-color: hsl(204 4% 0% / 7.5%);
     color: currentColor;
 }

packages/ariakit/src/ariakitStyles.css

@@ -1,4 +1,9 @@
-import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  mergeCSSClasses,
+  StyleSchema,
+} from "@blocknote/core";
 import {
   BlockNoteViewRaw,
   Components,
@@ -95,9 +100,14 @@ export const BlockNoteView = <
 >(
   props: ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>
 ) => {
+  const { className, ...rest } = props;
+
   return (
     <ComponentsContext.Provider value={components}>
-      <BlockNoteViewRaw {...props} />
+      <BlockNoteViewRaw
+        className={mergeCSSClasses("bn-ariakit", className || "")}
+        {...rest}
+      />
     </ComponentsContext.Provider>
   );
 };

packages/ariakit/src/index.tsx

@@ -28,23 +28,22 @@
   gap: 0.5rem;
 }
 
-.bn-tab-panel {
+.bn-ariakit .bn-tab-panel {
   align-items: center;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.bn-file-input {
+.bn-ariakit .bn-file-input {
   max-width: 100%;
 }
 
 .bn-ak-button {
   outline-style: none;
 }
 
-.bn-ak-menu-item[aria-selected="true"],
-.bn-ak-menu-item:hover {
+.bn-ak-menu-item[aria-selected="true"], .bn-ak-menu-item:hover {
   background-color: hsl(204 100% 40%);
   color: hsl(204 20% 100%);
 }
@@ -53,12 +52,11 @@
   display: flex;
 }
 
-.bn-dropdown {
+.bn-ariakit .bn-dropdown {
   overflow: visible;
 }
 
-.bn-suggestion-menu,
-.bn-color-picker-dropdown {
+.bn-ariakit .bn-suggestion-menu, .bn-ariakit .bn-color-picker-dropdown {
   overflow: scroll;
 }
 
@@ -85,7 +83,7 @@
   padding-inline: 4px;
 }
 
-.bn-side-menu {
+.bn-ariakit .bn-side-menu {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -97,35 +95,34 @@
   width: fit-content;
 }
 
-.bn-panel-popover {
+.bn-ariakit .bn-panel-popover {
   background-color: transparent;
   border: none;
   box-shadow: none;
 }
 
-.bn-table-handle {
+.bn-ariakit .bn-table-handle {
   height: fit-content;
   padding: 0;
   width: fit-content;
 }
 
-.bn-side-menu,
-.bn-table-handle {
+.bn-ariakit .bn-side-menu,
+.bn-ariakit .bn-table-handle {
   color: gray;
 }
 
 .bn-ak-button:where(.dark, .dark *) {
   color: hsl(204 20% 100%);
 }
 
-.bn-ak-tab,
-.bn-file-input {
+.bn-ak-tab, .bn-ariakit .bn-file-input {
   background-color: transparent;
   color: black;
 }
 
 .bn-ak-tab:where(.dark, .dark *),
-.bn-file-input:where(.dark, .dark *) {
+.bn-ariakit .bn-file-input:where(.dark, .dark *) {
   color: white;
 }
 

packages/ariakit/src/style.css

@@ -4,5 +4,5 @@
 1.  Numbered List Item 1
 2.  Numbered List Item 2
 
-*   \[ ] Check List Item 1
-*   \[x] Check List Item 2
+*   [ ] Check List Item 1
+*   [x] Check List Item 2

packages/core/src/api/exporters/markdown/__snapshots__/lists/basic/markdown.md

@@ -6,5 +6,5 @@
 
     2.  Numbered List Item 2
 
-        *   \[ ] Check List Item 1
-        *   \[x] Check List Item 2
+        *   [ ] Check List Item 1
+        *   [x] Check List Item 2

packages/core/src/api/exporters/markdown/__snapshots__/lists/nested/markdown.md

@@ -18,7 +18,7 @@ export function cleanHTMLToMarkdown(cleanHTMLString: string) {
     .use(addSpacesToCheckboxes)
     .use(rehypeRemark)
     .use(remarkGfm)
-    .use(remarkStringify)
+    .use(remarkStringify, { handlers: { text: (node) => node.value } })
     .processSync(cleanHTMLString);
 
   return markdownString.value as string;

packages/core/src/api/exporters/markdown/markdownExporter.ts

@@ -0,0 +1,6 @@
+export const acceptedMIMETypes = [
+  "blocknote/html",
+  "Files",
+  "text/html",
+  "text/plain",
+] as const;

packages/core/src/api/parsers/acceptedMIMETypes.ts

@@ -0,0 +1,51 @@
+import { Extension } from "@tiptap/core";
+import { Plugin } from "prosemirror-state";
+
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { handleFileInsertion } from "./handleFileInsertion";
+import { acceptedMIMETypes } from "./acceptedMIMETypes";
+
+export const createDropFileExtension = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>
+) =>
+  Extension.create<{ editor: BlockNoteEditor<BSchema, I, S> }, undefined>({
+    name: "dropFile",
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          props: {
+            handleDOMEvents: {
+              drop(_view, event) {
+                if (!editor.isEditable) {
+                  return;
+                }
+
+                let format: (typeof acceptedMIMETypes)[number] | null = null;
+                for (const mimeType of acceptedMIMETypes) {
+                  if (event.dataTransfer!.types.includes(mimeType)) {
+                    format = mimeType;
+                    break;
+                  }
+                }
+                if (format === null) {
+                  return true;
+                }
+
+                if (format === "Files") {
+                  handleFileInsertion(event, editor);
+                  return true;
+                }
+
+                return false;
+              },
+            },
+          },
+        }),
+      ];
+    },
+  });

packages/core/src/api/parsers/fileDropExtension.ts

@@ -0,0 +1,99 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { PartialBlock } from "../../blocks/defaultBlocks";
+import { insertOrUpdateBlock } from "../../extensions/SuggestionMenu/getDefaultSlashMenuItems";
+import {
+  BlockSchema,
+  FileBlockConfig,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema";
+import { acceptedMIMETypes } from "./acceptedMIMETypes";
+
+function checkMIMETypesMatch(mimeType1: string, mimeType2: string) {
+  const types1 = mimeType1.split("/");
+  const types2 = mimeType2.split("/");
+
+  if (types1.length !== 2) {
+    throw new Error(`The string ${mimeType1} is not a valid MIME type.`);
+  }
+  if (types2.length !== 2) {
+    throw new Error(`The string ${mimeType2} is not a valid MIME type.`);
+  }
+
+  if (types1[1] === "*" || types2[1] === "*") {
+    return types1[0] === types2[0];
+  }
+  if (types1[0] === "*" || types2[0] === "*") {
+    return types1[1] === types2[1];
+  }
+
+  return types1[0] === types2[0] && types1[1] === types2[1];
+}
+
+export async function handleFileInsertion<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(event: DragEvent | ClipboardEvent, editor: BlockNoteEditor<BSchema, I, S>) {
+  if (!editor.uploadFile) {
+    return;
+  }
+
+  const dataTransfer =
+    "dataTransfer" in event ? event.dataTransfer : event.clipboardData;
+  if (dataTransfer === null) {
+    return;
+  }
+
+  let format: (typeof acceptedMIMETypes)[number] | null = null;
+  for (const mimeType of acceptedMIMETypes) {
+    if (dataTransfer.types.includes(mimeType)) {
+      format = mimeType;
+      break;
+    }
+  }
+  if (format !== "Files") {
+    return;
+  }
+
+  const items = dataTransfer.items;
+  if (!items) {
+    return;
+  }
+
+  event.preventDefault();
+
+  const fileBlockConfigs = Object.values(editor.schema.blockSchema).filter(
+    (blockConfig) => blockConfig.isFileBlock
+  ) as FileBlockConfig[];
+
+  for (let i = 0; i < items.length; i++) {
+    // Gets file block corresponding to MIME type.
+    let fileBlockType = "file";
+    for (const fileBlockConfig of fileBlockConfigs) {
+      for (const mimeType of fileBlockConfig.fileBlockAcceptMimeTypes || []) {
+        if (checkMIMETypesMatch(items[i].type, mimeType)) {
+          fileBlockType = fileBlockConfig.type;
+          break;
+        }
+      }
+    }
+
+    const file = items[i].getAsFile();
+    if (file) {
+      const updateData = await editor.uploadFile(file);
+
+      if (typeof updateData === "string") {
+        const fileBlock = {
+          type: fileBlockType,
+          props: {
+            name: file.name,
+            url: updateData,
+          },
+        } as PartialBlock<BSchema, I, S>;
+
+        insertOrUpdateBlock(editor, fileBlock);
+      }
+    }
+  }
+}