@blocknote/core 0.23.0 → 0.23.2-hotfix.0

package/src/extensions/Collaboration/createCollaborationExtensions.ts

@@ -0,0 +1,144 @@
+import Collaboration from "@tiptap/extension-collaboration";
+import { Awareness } from "y-protocols/awareness";
+import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
+import * as Y from "yjs";
+
+export const createCollaborationExtensions = (collaboration: {
+  fragment: Y.XmlFragment;
+  user: {
+    name: string;
+    color: string;
+    [key: string]: string;
+  };
+  provider: any;
+  renderCursor?: (user: any) => HTMLElement;
+  showCursorLabels?: "always" | "activity";
+}) => {
+  const tiptapExtensions = [];
+
+  tiptapExtensions.push(
+    Collaboration.configure({
+      fragment: collaboration.fragment,
+    })
+  );
+
+  const awareness = collaboration.provider?.awareness as Awareness | undefined;
+
+  if (awareness) {
+    const cursors = new Map<
+      number,
+      { element: HTMLElement; hideTimeout: NodeJS.Timeout | undefined }
+    >();
+
+    if (collaboration.showCursorLabels !== "always") {
+      awareness.on(
+        "change",
+        ({
+          updated,
+        }: {
+          added: Array<number>;
+          updated: Array<number>;
+          removed: Array<number>;
+        }) => {
+          for (const clientID of updated) {
+            const cursor = cursors.get(clientID);
+
+            if (cursor) {
+              cursor.element.setAttribute("data-active", "");
+
+              if (cursor.hideTimeout) {
+                clearTimeout(cursor.hideTimeout);
+              }
+
+              cursors.set(clientID, {
+                element: cursor.element,
+                hideTimeout: setTimeout(() => {
+                  cursor.element.removeAttribute("data-active");
+                }, 2000),
+              });
+            }
+          }
+        }
+      );
+    }
+
+    const renderCursor = (user: { name: string; color: string }) => {
+      const cursorElement = document.createElement("span");
+
+      cursorElement.classList.add("collaboration-cursor__caret");
+      cursorElement.setAttribute("style", `border-color: ${user.color}`);
+      if (collaboration?.showCursorLabels === "always") {
+        cursorElement.setAttribute("data-active", "");
+      }
+
+      const labelElement = document.createElement("span");
+
+      labelElement.classList.add("collaboration-cursor__label");
+      labelElement.setAttribute("style", `background-color: ${user.color}`);
+      labelElement.insertBefore(document.createTextNode(user.name), null);
+
+      cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
+      cursorElement.insertBefore(labelElement, null);
+      cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
+
+      return cursorElement;
+    };
+
+    const render = (
+      user: { color: string; name: string },
+      clientID: number
+    ) => {
+      let cursorData = cursors.get(clientID);
+
+      if (!cursorData) {
+        const cursorElement =
+          collaboration?.renderCursor?.(user) || renderCursor(user);
+
+        if (collaboration?.showCursorLabels !== "always") {
+          cursorElement.addEventListener("mouseenter", () => {
+            const cursor = cursors.get(clientID)!;
+            cursor.element.setAttribute("data-active", "");
+
+            if (cursor.hideTimeout) {
+              clearTimeout(cursor.hideTimeout);
+              cursors.set(clientID, {
+                element: cursor.element,
+                hideTimeout: undefined,
+              });
+            }
+          });
+
+          cursorElement.addEventListener("mouseleave", () => {
+            const cursor = cursors.get(clientID)!;
+
+            cursors.set(clientID, {
+              element: cursor.element,
+              hideTimeout: setTimeout(() => {
+                cursor.element.removeAttribute("data-active");
+              }, 2000),
+            });
+          });
+        }
+
+        cursorData = {
+          element: cursorElement,
+          hideTimeout: undefined,
+        };
+
+        cursors.set(clientID, cursorData);
+      }
+
+      return cursorData.element;
+    };
+
+    tiptapExtensions.push(
+      CollaborationCursor.configure({
+        user: collaboration.user,
+        render: render as any, // tiptap type not compatible with latest y-prosemirror
+        provider: collaboration.provider,
+      })
+    );
+  }
+
+  return tiptapExtensions;
+};

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -1,5 +1,11 @@
 import { DOMParser, Slice } from "@tiptap/pm/model";
-import { EditorState, Plugin, PluginKey, PluginView } from "@tiptap/pm/state";
+import {
+  EditorState,
+  Plugin,
+  PluginKey,
+  TextSelection,
+  PluginView,
+} from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
 
 import { Block } from "../../blocks/defaultBlocks.js";
@@ -187,6 +193,11 @@ export class SideMenuView<
       this.onKeyDown as EventListener,
       true
     );
+
+    // Setting capture=true ensures that any parent container of the editor that
+    // gets scrolled will trigger the scroll event. Scroll events do not bubble
+    // and so won't propagate to the document by default.
+    pmView.root.addEventListener("scroll", this.onScroll, true);
   }
 
   updateState = (state: SideMenuState<BSchema, I, S>) => {
@@ -263,21 +274,56 @@ export class SideMenuView<
     }
   };
 
-  /**
-   * If the event is outside the editor contents,
-   * we dispatch a fake event, so that we can still drop the content
-   * when dragging / dropping to the side of the editor
-   */
   onDrop = (event: DragEvent) => {
+    // Content from outside a BlockNote editor is being dropped - just let
+    // ProseMirror's default behaviour handle it.
+    if (this.pmView.dragging === null) {
+      return;
+    }
+
     this.editor._tiptapEditor.commands.blur();
 
-    // ProseMirror doesn't remove the dragged content if it's dropped outside
-    // the editor (e.g. to other editors), so we need to do it manually. Since
-    // the dragged content is the same as the selected content, we can just
-    // delete the selection.
-    if (this.isDragOrigin && !this.pmView.dom.contains(event.target as Node)) {
-      this.pmView.dispatch(this.pmView.state.tr.deleteSelection());
+    // When ProseMirror handles a drop event on the editor while
+    // `view.dragging` is set, it deletes the selected content. However, if
+    // a block from a different editor is being dropped, this causes some
+    // issues that the code below fixes:
+    if (!this.isDragOrigin && this.pmView.dom.contains(event.target as Node)) {
+      // 1. Because the editor selection is unrelated to the dragged content,
+      // we don't want PM to delete its content. Therefore, we collapse the
+      // selection.
+      this.pmView.dispatch(
+        this.pmView.state.tr.setSelection(
+          TextSelection.create(
+            this.pmView.state.tr.doc,
+            this.pmView.state.tr.selection.to
+          )
+        )
+      );
+    } else if (
+      this.isDragOrigin &&
+      !this.pmView.dom.contains(event.target as Node)
+    ) {
+      // 2. Because the editor from which the block originates doesn't get a
+      // drop event on it, PM doesn't delete its selected content. Therefore, we
+      // need to do so manually.
+      //
+      // Note: Deleting the selected content from the editor from which the
+      // block originates, may change its height. This can cause the position of
+      // the editor in which the block is being dropping to shift, before it
+      // can handle the drop event. That in turn can cause the drop to happen
+      // somewhere other than the user intended. To get around this, we delay
+      // deleting the selected content until all editors have had the chance to
+      // handle the event.
+      setTimeout(
+        () => this.pmView.dispatch(this.pmView.state.tr.deleteSelection()),
+        0
+      );
     }
+    // 3. PM only clears `view.dragging` on the editor that the block was
+    // dropped, so we manually have to clear it on all the others. However,
+    // PM also needs to read `view.dragging` while handling the event, so we
+    // use a `setTimeout` to ensure it's only cleared after that.
+    setTimeout(() => (this.pmView.dragging = null), 0);
 
     if (
       this.sideMenuDetection === "editor" ||
@@ -293,6 +339,11 @@ export class SideMenuView<
     });
 
     if (!pos || pos.inside === -1) {
+      /**
+       * When `this.sideMenuSelection === "viewport"`, if the event is outside the
+       * editor contents, we dispatch a fake event, so that we can still drop the
+       * content when dragging / dropping to the side of the editor
+       */
       const evt = this.createSyntheticEvent(event);
       // console.log("dispatch fake drop");
       this.pmView.dom.dispatchEvent(evt);
@@ -318,25 +369,27 @@ export class SideMenuView<
    * access `dataTransfer` contents on `dragstart` and `drop` events.
    */
   onDragStart = (event: DragEvent) => {
-    if (!this.pmView.dragging) {
-      const html = event.dataTransfer?.getData("blocknote/html");
-      if (!html) {
-        return;
-      }
+    const html = event.dataTransfer?.getData("blocknote/html");
+    if (!html) {
+      return;
+    }
 
-      const element = document.createElement("div");
-      element.innerHTML = html;
+    if (this.pmView.dragging) {
+      throw new Error("New drag was started while an existing drag is ongoing");
+    }
 
-      const parser = DOMParser.fromSchema(this.pmView.state.schema);
-      const node = parser.parse(element, {
-        topNode: this.pmView.state.schema.nodes["blockGroup"].create(),
-      });
+    const element = document.createElement("div");
+    element.innerHTML = html;
 
-      this.pmView.dragging = {
-        slice: new Slice(node.content, 0, 0),
-        move: true,
-      };
-    }
+    const parser = DOMParser.fromSchema(this.pmView.state.schema);
+    const node = parser.parse(element, {
+      topNode: this.pmView.state.schema.nodes["blockGroup"].create(),
+    });
+
+    this.pmView.dragging = {
+      slice: new Slice(node.content, 0, 0),
+      move: true,
+    };
   };
 
   /**
@@ -473,6 +526,13 @@ export class SideMenuView<
     return evt;
   }
 
+  onScroll = () => {
+    if (this.state?.show) {
+      this.state.referencePos = this.hoveredBlock!.getBoundingClientRect();
+      this.emitUpdate(this.state);
+    }
+  };
+
   // Needed in cases where the editor state updates without the mouse cursor
   // moving, as some state updates can require a side menu update. For example,
   // adding a button to the side menu which removes the block can cause the
@@ -515,6 +575,7 @@ export class SideMenuView<
       this.onKeyDown as EventListener,
       true
     );
+    this.pmView.root.removeEventListener("scroll", this.onScroll, true);
   }
 }
 

package/src/i18n/locales/fr.ts

@@ -281,11 +281,11 @@ export const fr: Dictionary = {
       tooltip: "Basculer l'aperçu",
     },
     nest: {
-      tooltip: "Emboîter le bloc",
+      tooltip: "Augmenter le retrait du bloc",
       secondary_tooltip: "Tab",
     },
     unnest: {
-      tooltip: "Démboîter le bloc",
+      tooltip: "Diminuer le retait du bloc",
       secondary_tooltip: "Shift+Tab",
     },
     align_left: {

package/src/i18n/locales/index.ts

@@ -5,12 +5,13 @@ export * from "./es.js";
 export * from "./fr.js";
 export * from "./hr.js";
 export * from "./is.js";
+export * from "./it.js";
 export * from "./ja.js";
 export * from "./ko.js";
 export * from "./nl.js";
 export * from "./pl.js";
 export * from "./pt.js";
 export * from "./ru.js";
+export * from "./uk.js";
 export * from "./vi.js";
 export * from "./zh.js";
-export * from "./it.js"

package/src/i18n/locales/uk.ts

@@ -0,0 +1,289 @@
+import { Dictionary } from "../dictionary.js";
+
+export const uk: Dictionary = {
+    slash_menu: {
+        heading: {
+          title: "Заголовок 1",
+          subtext: "Заголовок найвищого рівня",
+          aliases: ["h", "heading1", "h1", "заголовок1"],
+          group: "Заголовки",
+        },
+        heading_2: {
+          title: "Заголовок 2",
+          subtext: "Основний заголовок розділу",
+          aliases: ["h2", "heading2", "subheading", "заголовок2"],
+          group: "Заголовки",
+        },
+        heading_3: {
+          title: "Заголовок 3",
+          subtext: "Підзаголовок і груповий заголовок",
+          aliases: ["h3", "heading3", "subheading", "заголовок3"],
+          group: "Заголовки",
+        },
+        numbered_list: {
+          title: "Нумерований список",
+          subtext: "Список із впорядкованими елементами",
+          aliases: ["ol", "li", "list", "numberedlist", "numbered list", "список", "нумерований список"],
+          group: "Базові блоки",
+        },
+        bullet_list: {
+          title: "Маркований список",
+          subtext: "Список із невпорядкованими елементами",
+          aliases: ["ul", "li", "list", "bulletlist", "bullet list", "список", "маркований список"],
+          group: "Базові блоки",
+        },
+        check_list: {
+          title: "Чек-лист",
+          subtext: "Список із чекбоксами",
+          aliases: ["ul", "li", "list", "checklist", "check list", "checked list", "checkbox", "чекбокс", "чек-лист"],
+          group: "Базові блоки",
+        },
+        paragraph: {
+          title: "Параграф",
+          subtext: "Основний текст документа",
+          aliases: ["p", "paragraph", "параграф"],
+          group: "Базові блоки",
+        },
+        code_block: {
+          title: "Блок коду",
+          subtext: "Блок коду з підсвіткою синтаксису",
+          aliases: ["code", "pre", "блок коду"],
+          group: "Базові блоки",
+        },
+        page_break: {
+          title: "Розрив сторінки",
+          subtext: "Роздільник сторінки",
+          aliases: ["page", "break", "separator", "розрив сторінки", "розділювач"],
+          group: "Базові блоки",
+        },
+        table: {
+          title: "Таблиця",
+          subtext: "Таблиця з редагованими клітинками",
+          aliases: ["table", "таблиця"],
+          group: "Розширені",
+        },
+        image: {
+          title: "Зображення",
+          subtext: "Масштабоване зображення з підписом",
+          aliases: ["image", "imageUpload", "upload", "img", "picture", "media", "url", "зображення", "медіа"],
+          group: "Медіа",
+        },
+        video: {
+          title: "Відео",
+          subtext: "Масштабоване відео з підписом",
+          aliases: ["video", "videoUpload", "upload", "mp4", "film", "media", "url", "відео", "медіа"],
+          group: "Медіа",
+        },
+        audio: {
+          title: "Аудіо",
+          subtext: "Вбудоване аудіо з підписом",
+          aliases: ["audio", "audioUpload", "upload", "mp3", "sound", "media", "url", "аудіо", "медіа"],
+          group: "Медіа",
+        },
+        file: {
+          title: "Файл",
+          subtext: "Вбудований файл",
+          aliases: ["file", "upload", "embed", "media", "url", "файл", "медіа"],
+          group: "Медіа",
+        },
+        emoji: {
+          title: "Емодзі",
+          subtext: "Пошук і вставка емодзі",
+          aliases: ["emoji", "emote", "emotion", "face", "смайлик", "емодзі"],
+          group: "Інше",
+        },
+      },
+      placeholders: {
+        default: "Введіть текст або наберіть '/' для команд",
+        heading: "Заголовок",
+        bulletListItem: "Список",
+        numberedListItem: "Список",
+        checkListItem: "Список",
+      },
+      file_blocks: {
+        image: {
+          add_button_text: "Додати зображення",
+        },
+        video: {
+          add_button_text: "Додати відео",
+        },
+        audio: {
+          add_button_text: "Додати аудіо",
+        },
+        file: {
+          add_button_text: "Додати файл",
+        },
+      },
+      // from react package:
+      side_menu: {
+        add_block_label: "Додати блок",
+        drag_handle_label: "Відкрити меню блока",
+      },
+      drag_handle: {
+        delete_menuitem: "Видалити",
+        colors_menuitem: "Кольори",
+      },
+      table_handle: {
+        delete_column_menuitem: "Видалити стовпець",
+        delete_row_menuitem: "Видалити рядок",
+        add_left_menuitem: "Додати стовпець зліва",
+        add_right_menuitem: "Додати стовпець справа",
+        add_above_menuitem: "Додати рядок вище",
+        add_below_menuitem: "Додати рядок нижче",
+      },
+      suggestion_menu: {
+        no_items_title: "Нічого не знайдено",
+        loading: "Завантаження…",
+      },
+      color_picker: {
+        text_title: "Текст",
+        background_title: "Фон",
+        colors: {
+          default: "За замовчуванням",
+          gray: "Сірий",
+          brown: "Коричневий",
+          red: "Червоний",
+          orange: "Помаранчевий",
+          yellow: "Жовтий",
+          green: "Зелений",
+          blue: "Блакитний",
+          purple: "Фіолетовий",
+          pink: "Рожевий",
+        },
+      },
+      formatting_toolbar: {
+        bold: {
+          tooltip: "Жирний",
+          secondary_tooltip: "Mod+B",
+        },
+        italic: {
+          tooltip: "Курсив",
+          secondary_tooltip: "Mod+I",
+        },
+        underline: {
+          tooltip: "Підкреслений",
+          secondary_tooltip: "Mod+U",
+        },
+        strike: {
+          tooltip: "Закреслений",
+          secondary_tooltip: "Mod+Shift+X",
+        },
+        code: {
+          tooltip: "Код",
+          secondary_tooltip: "",
+        },
+        colors: {
+          tooltip: "Кольори",
+        },
+        link: {
+          tooltip: "Створити посилання",
+          secondary_tooltip: "Mod+K",
+        },
+        file_caption: {
+          tooltip: "Редагувати підпис",
+          input_placeholder: "Редагувати підпис",
+        },
+        file_replace: {
+          tooltip: {
+            image: "Замінити зображення",
+            video: "Замінити відео",
+            audio: "Замінити аудіо",
+            file: "Замінити файл",
+          },
+        },
+        file_rename: {
+          tooltip: {
+            image: "Перейменувати зображення",
+            video: "Перейменувати відео",
+            audio: "Перейменувати аудіо",
+            file: "Перейменувати файл",
+          },
+          input_placeholder: {
+            image: "Перейменувати зображення",
+            video: "Перейменувати відео",
+            audio: "Перейменувати аудіо",
+            file: "Перейменувати файл",
+          },
+        },
+        file_download: {
+          tooltip: {
+            image: "Завантажити зображення",
+            video: "Завантажити відео",
+            audio: "Завантажити аудіо",
+            file: "Завантажити файл",
+          },
+        },
+        file_delete: {
+          tooltip: {
+            image: "Видалити зображення",
+            video: "Видалити відео",
+            audio: "Видалити аудіо",
+            file: "Видалити файл",
+          },
+        },
+        file_preview_toggle: {
+          tooltip: "Перемкнути попередній перегляд",
+        },
+        nest: {
+          tooltip: "Вкладений блок",
+          secondary_tooltip: "Tab",
+        },
+        unnest: {
+          tooltip: "Розгрупувати блок",
+          secondary_tooltip: "Shift+Tab",
+        },
+        align_left: {
+          tooltip: "Вирівняти за лівим краєм",
+        },
+        align_center: {
+          tooltip: "Вирівняти по центру",
+        },
+        align_right: {
+          tooltip: "Вирівняти за правим краєм",
+        },
+        align_justify: {
+          tooltip: "Вирівняти за шириною",
+        },
+      },
+      file_panel: {
+        upload: {
+          title: "Завантажити",
+          file_placeholder: {
+            image: "Завантажити зображення",
+            video: "Завантажити відео",
+            audio: "Завантажити аудіо",
+            file: "Завантажити файл",
+          },
+          upload_error: "Помилка: не вдалося завантажити",
+        },
+        embed: {
+          title: "Вставити",
+          embed_button: {
+            image: "Вставити зображення",
+            video: "Вставити відео",
+            audio: "Вставити аудіо",
+            file: "Вставити файл",
+          },
+          url_placeholder: "Введіть URL",
+        },
+      },
+      link_toolbar: {
+        delete: {
+          tooltip: "Видалити посилання",
+        },
+        edit: {
+          text: "Редагувати посилання",
+          tooltip: "Редагувати",
+        },
+        open: {
+          tooltip: "Відкрити в новій вкладці",
+        },
+        form: {
+          title_placeholder: "Редагувати заголовок",
+          url_placeholder: "Редагувати URL",
+        },
+      },
+      generic: {
+        ctrl_shortcut: "Ctrl",
+      },
+};

package/types/src/api/exporters/html/util/serializeBlocksInternalHTML.d.ts

@@ -2,7 +2,7 @@ import { DOMSerializer } from "prosemirror-model";
 import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../../schema/index.js";
-export declare function serializeInlineContentInternalHTML<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<any, I, S>, blockContent: PartialBlock<BSchema, I, S>["content"], serializer: DOMSerializer, options?: {
+export declare function serializeInlineContentInternalHTML<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<any, I, S>, blockContent: PartialBlock<BSchema, I, S>["content"], serializer: DOMSerializer, blockType?: string, options?: {
     document?: Document;
 }): HTMLElement | DocumentFragment;
 export declare const serializeBlocksInternalHTML: <BSchema extends Record<string, import("../../../../schema/index.js").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>, blocks: PartialBlock<BSchema, I, S>[], serializer: DOMSerializer, options?: {

package/types/src/api/nodeConversions/blockToNode.d.ts

@@ -4,7 +4,7 @@ import type { PartialBlock } from "../../blocks/defaultBlocks";
 /**
  * converts an array of inline content elements to prosemirror nodes
  */
-export declare function inlineContentToNodes<I extends InlineContentSchema, S extends StyleSchema>(blockContent: PartialInlineContent<I, S>, schema: Schema, styleSchema: S): Node[];
+export declare function inlineContentToNodes<I extends InlineContentSchema, S extends StyleSchema>(blockContent: PartialInlineContent<I, S>, schema: Schema, styleSchema: S, blockType?: string): Node[];
 /**
  * converts an array of inline content elements to prosemirror nodes
  */

package/types/src/editor/BlockNoteEditor.d.ts

@@ -16,8 +16,9 @@ import { BlockNoteSchema } from "./BlockNoteSchema.js";
 import { BlockNoteTipTapEditor } from "./BlockNoteTipTapEditor.js";
 import { Dictionary } from "../i18n/dictionary.js";
 import { Plugin, Transaction } from "@tiptap/pm/state";
-import "../style.css";
 import { EditorView } from "prosemirror-view";
+import "../style.css";
+export type BlockNoteExtensionFactory = (editor: BlockNoteEditor<any, any, any>) => BlockNoteExtension;
 export type BlockNoteExtension = AnyExtension | {
     plugin: Plugin;
 };
@@ -111,7 +112,7 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema, ISchema extends
     /**
      * (experimental) add extra prosemirror plugins or tiptap extensions to the editor
      */
-    _extensions: Record<string, BlockNoteExtension>;
+    _extensions: Record<string, BlockNoteExtension | BlockNoteExtensionFactory>;
     trailingBlock?: boolean;
     /**
      * Boolean indicating whether the editor is in headless mode.

package/types/src/editor/BlockNoteExtensions.d.ts

@@ -1,6 +1,6 @@
-import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
 import { Plugin } from "prosemirror-state";
 import * as Y from "yjs";
+import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
 import { BlockNoteDOMAttributes, BlockSchema, BlockSpecs, InlineContentSchema, InlineContentSpecs, StyleSchema, StyleSpecs } from "../schema/index.js";
 type ExtensionOptions<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema> = {
     editor: BlockNoteEditor<BSchema, I, S>;