@blocknote/core 0.29.1 → 0.30.1

package/src/blocks/TableBlockContent/TableExtension.ts

@@ -56,12 +56,12 @@ export const TableExtension = Extension.create({
       // Enables navigating cells using the tab key.
       Tab: () => {
         return this.editor.commands.command(({ state, dispatch, view }) =>
-          goToNextCell(1)(state, dispatch, view)
+          goToNextCell(1)(state, dispatch, view),
         );
       },
       "Shift-Tab": () => {
         return this.editor.commands.command(({ state, dispatch, view }) =>
-          goToNextCell(-1)(state, dispatch, view)
+          goToNextCell(-1)(state, dispatch, view),
         );
       },
     };
@@ -76,7 +76,7 @@ export const TableExtension = Extension.create({
 
     return {
       tableRole: callOrReturn(
-        getExtensionField(extension, "tableRole", context)
+        getExtensionField(extension, "tableRole", context),
       ),
     };
   },

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -37,7 +37,8 @@ export const videoPropSchema = {
   },
   // File preview width in px.
   previewWidth: {
-    default: 512,
+    default: undefined,
+    type: "number",
   },
 } satisfies PropSchema;
 
@@ -51,7 +52,7 @@ export const videoBlockConfig = {
 
 export const videoRender = (
   block: BlockFromConfig<typeof videoBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>
+  editor: BlockNoteEditor<any, any, any>,
 ) => {
   const icon = document.createElement("div");
   icon.innerHTML = FILE_VIDEO_ICON_SVG;
@@ -80,14 +81,19 @@ export const videoRender = (
     { dom: videoWrapper },
     videoWrapper,
     editor.dictionary.file_blocks.video.add_button_text,
-    icon.firstElementChild as HTMLElement
+    icon.firstElementChild as HTMLElement,
   );
 };
 
 export const videoParse = (
-  element: HTMLElement
+  element: HTMLElement,
 ): Partial<Props<typeof videoBlockConfig.propSchema>> | undefined => {
   if (element.tagName === "VIDEO") {
+    // Ignore if parent figure has already been parsed.
+    if (element.closest("figure")) {
+      return undefined;
+    }
+
     return parseVideoElement(element as HTMLVideoElement);
   }
 
@@ -109,7 +115,7 @@ export const videoParse = (
 };
 
 export const videoToExternalHTML = (
-  block: BlockFromConfig<typeof videoBlockConfig, any, any>
+  block: BlockFromConfig<typeof videoBlockConfig, any, any>,
 ) => {
   if (!block.props.url) {
     const div = document.createElement("p");
@@ -124,7 +130,9 @@ export const videoToExternalHTML = (
   if (block.props.showPreview) {
     video = document.createElement("video");
     video.src = block.props.url;
-    video.width = block.props.previewWidth;
+    if (block.props.previewWidth) {
+      video.width = block.props.previewWidth;
+    }
   } else {
     video = document.createElement("a");
     video.href = block.props.url;

package/src/blocks/defaultBlockHelpers.ts

@@ -18,12 +18,12 @@ export function createDefaultBlockDOMOutputSpec(
   blockName: string,
   htmlTag: string,
   blockContentHTMLAttributes: Record<string, string>,
-  inlineContentHTMLAttributes: Record<string, string>
+  inlineContentHTMLAttributes: Record<string, string>,
 ) {
   const blockContent = document.createElement("div");
   blockContent.className = mergeCSSClasses(
     "bn-block-content",
-    blockContentHTMLAttributes.class
+    blockContentHTMLAttributes.class,
   );
   blockContent.setAttribute("data-content-type", blockName);
   for (const [attribute, value] of Object.entries(blockContentHTMLAttributes)) {
@@ -35,10 +35,10 @@ export function createDefaultBlockDOMOutputSpec(
   const inlineContent = document.createElement(htmlTag);
   inlineContent.className = mergeCSSClasses(
     "bn-inline-content",
-    inlineContentHTMLAttributes.class
+    inlineContentHTMLAttributes.class,
   );
   for (const [attribute, value] of Object.entries(
-    inlineContentHTMLAttributes
+    inlineContentHTMLAttributes,
   )) {
     if (attribute !== "class") {
       inlineContent.setAttribute(attribute, value);
@@ -59,10 +59,10 @@ export function createDefaultBlockDOMOutputSpec(
 export const defaultBlockToHTML = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   block: BlockNoDefaults<BSchema, I, S>,
-  editor: BlockNoteEditor<BSchema, I, S>
+  editor: BlockNoteEditor<BSchema, I, S>,
 ): {
   dom: HTMLElement;
   contentDOM?: HTMLElement;
@@ -78,7 +78,7 @@ export const defaultBlockToHTML = <
 
   if (toDOM === undefined) {
     throw new Error(
-      "This block has no default HTML serialization as its corresponding TipTap node doesn't implement `renderHTML`."
+      "This block has no default HTML serialization as its corresponding TipTap node doesn't implement `renderHTML`.",
     );
   }
 
@@ -86,7 +86,7 @@ export const defaultBlockToHTML = <
 
   if (typeof renderSpec !== "object" || !("dom" in renderSpec)) {
     throw new Error(
-      "Cannot use this block's default HTML serialization as its corresponding TipTap node's `renderHTML` function does not return an object with the `dom` property."
+      "Cannot use this block's default HTML serialization as its corresponding TipTap node's `renderHTML` function does not return an object with the `dom` property.",
     );
   }
 
@@ -95,3 +95,19 @@ export const defaultBlockToHTML = <
     contentDOM?: HTMLElement;
   };
 };
+
+// Function that merges all paragraphs into a single one separated by line breaks.
+// This is used when parsing blocks like list items and table cells, as they may
+// contain multiple paragraphs that ProseMirror will not be able to handle
+// properly.
+export function mergeParagraphs(element: HTMLElement) {
+  const paragraphs = element.querySelectorAll("p");
+  if (paragraphs.length > 1) {
+    const firstParagraph = paragraphs[0];
+    for (let i = 1; i < paragraphs.length; i++) {
+      const paragraph = paragraphs[i];
+      firstParagraph.innerHTML += "<br>" + paragraph.innerHTML;
+      paragraph.remove();
+    }
+  }
+}

package/src/blocks/defaultBlockTypeGuards.ts

@@ -20,10 +20,10 @@ import { Selection } from "prosemirror-state";
 export function checkDefaultBlockTypeInSchema<
   BlockType extends keyof DefaultBlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   blockType: BlockType,
-  editor: BlockNoteEditor<any, I, S>
+  editor: BlockNoteEditor<any, I, S>,
 ): editor is BlockNoteEditor<{ Type: DefaultBlockSchema[BlockType] }, I, S> {
   return (
     blockType in editor.schema.blockSchema &&
@@ -34,10 +34,10 @@ export function checkDefaultBlockTypeInSchema<
 export function checkDefaultInlineContentTypeInSchema<
   InlineContentType extends keyof DefaultInlineContentSchema,
   B extends BlockSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   inlineContentType: InlineContentType,
-  editor: BlockNoteEditor<B, any, S>
+  editor: BlockNoteEditor<B, any, S>,
 ): editor is BlockNoteEditor<
   B,
   { Type: DefaultInlineContentSchema[InlineContentType] },
@@ -53,11 +53,11 @@ export function checkDefaultInlineContentTypeInSchema<
 export function checkBlockIsDefaultType<
   BlockType extends keyof DefaultBlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   blockType: BlockType,
   block: Block<any, I, S>,
-  editor: BlockNoteEditor<any, I, S>
+  editor: BlockNoteEditor<any, I, S>,
 ): block is BlockFromConfig<DefaultBlockSchema[BlockType], I, S> {
   return (
     block.type === blockType &&
@@ -69,10 +69,10 @@ export function checkBlockIsDefaultType<
 export function checkBlockIsFileBlock<
   B extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   block: Block<any, I, S>,
-  editor: BlockNoteEditor<B, I, S>
+  editor: BlockNoteEditor<B, I, S>,
 ): block is BlockFromConfig<FileBlockConfig, I, S> {
   return (
     (block.type in editor.schema.blockSchema &&
@@ -84,10 +84,10 @@ export function checkBlockIsFileBlock<
 export function checkBlockIsFileBlockWithPreview<
   B extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   block: Block<any, I, S>,
-  editor: BlockNoteEditor<B, I, S>
+  editor: BlockNoteEditor<B, I, S>,
 ): block is BlockFromConfig<
   FileBlockConfig & {
     propSchema: Required<FileBlockConfig["propSchema"]>;
@@ -106,7 +106,7 @@ export function checkBlockIsFileBlockWithPreview<
 export function checkBlockIsFileBlockWithPlaceholder<
   B extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(block: Block<B, I, S>, editor: BlockNoteEditor<B, I, S>) {
   const config = editor.schema.blockSchema[block.type];
   return config.isFileBlock && !block.props.url;
@@ -115,11 +115,11 @@ export function checkBlockIsFileBlockWithPlaceholder<
 export function checkBlockTypeHasDefaultProp<
   Prop extends keyof typeof defaultProps,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   prop: Prop,
   blockType: string,
-  editor: BlockNoteEditor<any, I, S>
+  editor: BlockNoteEditor<any, I, S>,
 ): editor is BlockNoteEditor<
   {
     [BT in string]: {
@@ -143,11 +143,11 @@ export function checkBlockTypeHasDefaultProp<
 export function checkBlockHasDefaultProp<
   Prop extends keyof typeof defaultProps,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   prop: Prop,
   block: Block<any, I, S>,
-  editor: BlockNoteEditor<any, I, S>
+  editor: BlockNoteEditor<any, I, S>,
 ): block is BlockFromConfig<
   {
     type: string;
@@ -163,7 +163,7 @@ export function checkBlockHasDefaultProp<
 }
 
 export function isTableCellSelection(
-  selection: Selection
+  selection: Selection,
 ): selection is CellSelection {
   return selection instanceof CellSelection;
 }

package/src/blocks/defaultBlocks.ts

@@ -78,7 +78,7 @@ export const defaultInlineContentSpecs = {
 } satisfies InlineContentSpecs;
 
 export const defaultInlineContentSchema = getInlineContentSchemaFromSpecs(
-  defaultInlineContentSpecs
+  defaultInlineContentSpecs,
 );
 
 // underscore is used that in case a user overrides DefaultInlineContentSchema,
@@ -89,11 +89,11 @@ export type DefaultInlineContentSchema = _DefaultInlineContentSchema;
 export type PartialBlock<
   BSchema extends BlockSchema = DefaultBlockSchema,
   I extends InlineContentSchema = DefaultInlineContentSchema,
-  S extends StyleSchema = DefaultStyleSchema
+  S extends StyleSchema = DefaultStyleSchema,
 > = PartialBlockNoDefaults<BSchema, I, S>;
 
 export type Block<
   BSchema extends BlockSchema = DefaultBlockSchema,
   I extends InlineContentSchema = DefaultInlineContentSchema,
-  S extends StyleSchema = DefaultStyleSchema
+  S extends StyleSchema = DefaultStyleSchema,
 > = BlockNoDefaults<BSchema, I, S>;

package/src/comments/threadstore/DefaultThreadStoreAuth.ts

@@ -18,7 +18,7 @@ import { ThreadStoreAuth } from "./ThreadStoreAuth.js";
 export class DefaultThreadStoreAuth extends ThreadStoreAuth {
   constructor(
     private readonly userId: string,
-    private readonly role: "comment" | "editor"
+    private readonly role: "comment" | "editor",
   ) {
     super();
   }
@@ -84,7 +84,7 @@ export class DefaultThreadStoreAuth extends ThreadStoreAuth {
 
     return !comment.reactions.some(
       (reaction) =>
-        reaction.emoji === emoji && reaction.userIds.includes(this.userId)
+        reaction.emoji === emoji && reaction.userIds.includes(this.userId),
     );
   }
 
@@ -100,7 +100,7 @@ export class DefaultThreadStoreAuth extends ThreadStoreAuth {
 
     return comment.reactions.some(
       (reaction) =>
-        reaction.emoji === emoji && reaction.userIds.includes(this.userId)
+        reaction.emoji === emoji && reaction.userIds.includes(this.userId),
     );
   }
 }

package/src/comments/threadstore/ThreadStore.ts

@@ -129,6 +129,6 @@ export abstract class ThreadStore {
    * @returns a function to unsubscribe from the thread store
    */
   abstract subscribe(
-    cb: (threads: Map<string, ThreadData>) => void
+    cb: (threads: Map<string, ThreadData>) => void,
   ): () => void;
 }

package/src/comments/threadstore/TipTapThreadStore.ts

@@ -28,7 +28,7 @@ export class TiptapThreadStore extends ThreadStore {
   constructor(
     private readonly userId: string,
     private readonly provider: TiptapCollabProvider,
-    auth: ThreadStoreAuth // TODO: use?
+    auth: ThreadStoreAuth, // TODO: use?
   ) {
     super(auth);
   }
@@ -80,7 +80,7 @@ export class TiptapThreadStore extends ThreadStore {
     });
 
     return this.tiptapCommentToCommentData(
-      thread.comments[thread.comments.length - 1]
+      thread.comments[thread.comments.length - 1],
     );
   }
 
@@ -98,7 +98,7 @@ export class TiptapThreadStore extends ThreadStore {
     const comment = this.provider.getThreadComment(
       options.threadId,
       options.commentId,
-      true
+      true,
     );
 
     if (!comment) {
@@ -120,12 +120,12 @@ export class TiptapThreadStore extends ThreadStore {
     for (const reaction of (comment.data?.reactions ||
       []) as ReactionAsTiptapData[]) {
       const existingReaction = reactions.find(
-        (r) => r.emoji === reaction.emoji
+        (r) => r.emoji === reaction.emoji,
       );
       if (existingReaction) {
         existingReaction.userIds.push(reaction.userId);
         existingReaction.createdAt = new Date(
-          Math.min(existingReaction.createdAt.getTime(), reaction.createdAt)
+          Math.min(existingReaction.createdAt.getTime(), reaction.createdAt),
         );
       } else {
         reactions.push({
@@ -153,7 +153,7 @@ export class TiptapThreadStore extends ThreadStore {
       type: "thread",
       id: thread.id,
       comments: thread.comments.map((comment) =>
-        this.tiptapCommentToCommentData(comment)
+        this.tiptapCommentToCommentData(comment),
       ),
       resolved: !!thread.resolvedAt,
       metadata: thread.data?.metadata,
@@ -207,7 +207,7 @@ export class TiptapThreadStore extends ThreadStore {
     const comment = this.provider.getThreadComment(
       options.threadId,
       options.commentId,
-      true
+      true,
     );
 
     if (!comment) {
@@ -242,7 +242,7 @@ export class TiptapThreadStore extends ThreadStore {
     const comment = this.provider.getThreadComment(
       options.threadId,
       options.commentId,
-      true
+      true,
     );
 
     if (!comment) {
@@ -256,7 +256,7 @@ export class TiptapThreadStore extends ThreadStore {
           (comment.data?.reactions || []) as ReactionAsTiptapData[]
         ).filter(
           (reaction) =>
-            reaction.emoji !== options.emoji && reaction.userId !== this.userId
+            reaction.emoji !== options.emoji && reaction.userId !== this.userId,
         ),
       },
     });
@@ -276,7 +276,7 @@ export class TiptapThreadStore extends ThreadStore {
     return new Map(
       this.provider
         .getThreads()
-        .map((thread) => [thread.id, this.tiptapThreadToThreadData(thread)])
+        .map((thread) => [thread.id, this.tiptapThreadToThreadData(thread)]),
     );
   }
 

package/src/comments/threadstore/yjs/RESTYjsThreadStore.ts

@@ -22,7 +22,7 @@ export class RESTYjsThreadStore extends YjsThreadStoreBase {
     private readonly BASE_URL: string,
     private readonly headers: Record<string, string>,
     threadsYMap: Y.Map<any>,
-    auth: ThreadStoreAuth
+    auth: ThreadStoreAuth,
   ) {
     super(threadsYMap, auth);
   }
@@ -102,7 +102,7 @@ export class RESTYjsThreadStore extends YjsThreadStoreBase {
     const { threadId, commentId, ...rest } = options;
     return this.doRequest(
       `/${threadId}/comments/${commentId}?soft=${!!rest.softDelete}`,
-      "DELETE"
+      "DELETE",
     );
   };
 
@@ -127,7 +127,7 @@ export class RESTYjsThreadStore extends YjsThreadStoreBase {
     return this.doRequest(
       `/${threadId}/comments/${commentId}/reactions`,
       "POST",
-      rest
+      rest,
     );
   };
 
@@ -138,7 +138,7 @@ export class RESTYjsThreadStore extends YjsThreadStoreBase {
   }) => {
     return this.doRequest(
       `/${options.threadId}/comments/${options.commentId}/reactions/${options.emoji}`,
-      "DELETE"
+      "DELETE",
     );
   };
 }

package/src/comments/threadstore/yjs/YjsThreadStore.test.ts

@@ -25,7 +25,7 @@ describe("YjsThreadStore", () => {
     store = new YjsThreadStore(
       "test-user",
       threadsYMap,
-      new DefaultThreadStoreAuth("test-user", "editor")
+      new DefaultThreadStoreAuth("test-user", "editor"),
     );
   });
 
@@ -99,7 +99,7 @@ describe("YjsThreadStore", () => {
           comment: {
             body: "Test comment" as CommentBody,
           },
-        })
+        }),
       ).rejects.toThrow("Thread not found");
     });
   });

package/src/comments/threadstore/yjs/YjsThreadStore.ts

@@ -26,13 +26,13 @@ export class YjsThreadStore extends YjsThreadStoreBase {
   constructor(
     private readonly userId: string,
     threadsYMap: Y.Map<any>,
-    auth: ThreadStoreAuth
+    auth: ThreadStoreAuth,
   ) {
     super(threadsYMap, auth);
   }
 
   private transact = <T, R>(
-    fn: (options: T) => R
+    fn: (options: T) => R,
   ): ((options: T) => Promise<R>) => {
     return async (options: T) => {
       return this.threadsYMap.doc!.transact(() => {
@@ -79,7 +79,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
       this.threadsYMap.set(thread.id, threadToYMap(thread));
 
       return thread;
-    }
+    },
   );
 
   // YjsThreadStore does not support addThreadToDocument
@@ -121,7 +121,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       yThread.set("updatedAt", new Date().getTime());
       return comment;
-    }
+    },
   );
 
   public updateComment = this.transact(
@@ -140,7 +140,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const yCommentIndex = yArrayFindIndex(
         yThread.get("comments"),
-        (comment) => comment.get("id") === options.commentId
+        (comment) => comment.get("id") === options.commentId,
       );
 
       if (yCommentIndex === -1) {
@@ -156,7 +156,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
       yComment.set("body", options.comment.body);
       yComment.set("updatedAt", new Date().getTime());
       yComment.set("metadata", options.comment.metadata);
-    }
+    },
   );
 
   public deleteComment = this.transact(
@@ -172,7 +172,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const yCommentIndex = yArrayFindIndex(
         yThread.get("comments"),
-        (comment) => comment.get("id") === options.commentId
+        (comment) => comment.get("id") === options.commentId,
       );
 
       if (yCommentIndex === -1) {
@@ -210,13 +210,13 @@ export class YjsThreadStore extends YjsThreadStoreBase {
       }
 
       yThread.set("updatedAt", new Date().getTime());
-    }
+    },
   );
 
   public deleteThread = this.transact((options: { threadId: string }) => {
     if (
       !this.auth.canDeleteThread(
-        yMapToThread(this.threadsYMap.get(options.threadId))
+        yMapToThread(this.threadsYMap.get(options.threadId)),
       )
     ) {
       throw new Error("Not authorized");
@@ -263,7 +263,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const yCommentIndex = yArrayFindIndex(
         yThread.get("comments"),
-        (comment) => comment.get("id") === options.commentId
+        (comment) => comment.get("id") === options.commentId,
       );
 
       if (yCommentIndex === -1) {
@@ -292,7 +292,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
         reaction.set("userId", this.userId);
         reactionsByUser.set(key, reaction);
       }
-    }
+    },
   );
 
   public deleteReaction = this.transact(
@@ -304,7 +304,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
       const yCommentIndex = yArrayFindIndex(
         yThread.get("comments"),
-        (comment) => comment.get("id") === options.commentId
+        (comment) => comment.get("id") === options.commentId,
       );
 
       if (yCommentIndex === -1) {
@@ -324,13 +324,13 @@ export class YjsThreadStore extends YjsThreadStoreBase {
       const reactionsByUser = yComment.get("reactionsByUser");
 
       reactionsByUser.delete(key);
-    }
+    },
   );
 }
 
 function yArrayFindIndex(
   yArray: Y.Array<any>,
-  predicate: (item: any) => boolean
+  predicate: (item: any) => boolean,
 ) {
   for (let i = 0; i < yArray.length; i++) {
     if (predicate(yArray.get(i))) {

package/src/comments/threadstore/yjs/YjsThreadStoreBase.ts

@@ -11,7 +11,7 @@ import { yMapToThread } from "./yjsHelpers.js";
 export abstract class YjsThreadStoreBase extends ThreadStore {
   constructor(
     protected readonly threadsYMap: Y.Map<any>,
-    auth: ThreadStoreAuth
+    auth: ThreadStoreAuth,
   ) {
     super(auth);
   }

package/src/comments/threadstore/yjs/yjsHelpers.ts

@@ -52,7 +52,7 @@ type SingleUserCommentReactionData = {
 };
 
 export function yMapToReaction(
-  yMap: Y.Map<any>
+  yMap: Y.Map<any>,
 ): SingleUserCommentReactionData {
   return {
     emoji: yMap.get("emoji"),
@@ -63,7 +63,7 @@ export function yMapToReaction(
 
 function yMapToReactions(yMap: Y.Map<any>): CommentReactionData[] {
   const flatReactions = [...yMap.values()].map((reaction: Y.Map<any>) =>
-    yMapToReaction(reaction)
+    yMapToReaction(reaction),
   );
   // combine reactions by the same emoji
   return flatReactions.reduce(
@@ -74,8 +74,8 @@ function yMapToReactions(yMap: Y.Map<any>): CommentReactionData[] {
         existingReaction.createdAt = new Date(
           Math.min(
             existingReaction.createdAt.getTime(),
-            reaction.createdAt.getTime()
-          )
+            reaction.createdAt.getTime(),
+          ),
         );
       } else {
         acc.push({
@@ -86,7 +86,7 @@ function yMapToReactions(yMap: Y.Map<any>): CommentReactionData[] {
       }
       return acc;
     },
-    [] as CommentReactionData[]
+    [] as CommentReactionData[],
   );
 }
 
@@ -113,7 +113,7 @@ export function yMapToThread(yMap: Y.Map<any>): ThreadData {
     createdAt: new Date(yMap.get("createdAt")),
     updatedAt: new Date(yMap.get("updatedAt")),
     comments: ((yMap.get("comments") as Y.Array<Y.Map<any>>) || []).map(
-      (comment) => yMapToComment(comment)
+      (comment) => yMapToComment(comment),
     ),
     resolved: yMap.get("resolved"),
     resolvedUpdatedAt: new Date(yMap.get("resolvedUpdatedAt")),

package/src/editor/Block.css

@@ -14,7 +14,6 @@ BASIC STYLES
 }
 
 .bn-block-content {
-  display: flex;
   padding: 3px 0;
   transition: font-size 0.2s;
   width: 100%;
@@ -24,6 +23,14 @@ BASIC STYLES
   */
 }
 
+/* We can't set `display: flex` on `.bn-block-content` while it has inline 
+content (see #1629). However, it's necessary to set alignment of blocks
+without content as these can't use `text-align`, so this additional rule is 
+used. */
+.bn-block-content:not(:has(.bn-inline-content)) {
+  display: flex;
+}
+
 .bn-block-content::before {
   /* content: ""; */
   transition: all 0.2s;
@@ -163,6 +170,7 @@ NESTED BLOCKS
 .bn-block-content::before {
   margin-right: 0;
   content: "";
+  display: inline;
 }
 
 /* Ordered */
@@ -411,6 +419,7 @@ NESTED BLOCKS
   display: flex;
   align-items: center;
   position: relative;
+  max-width: 100%;
 }
 
 [data-file-block] .bn-visual-media {