@blocknote/core 0.29.1 → 0.30.0

package/src/extensions/Collaboration/CursorPlugin.ts

@@ -0,0 +1,152 @@
+import { Plugin } from "prosemirror-state";
+import { defaultSelectionBuilder, yCursorPlugin } from "y-prosemirror";
+import { Awareness } from "y-protocols/awareness.js";
+import * as Y from "yjs";
+
+export type CollaborationUser = {
+  name: string;
+  color: string;
+  [key: string]: string;
+};
+
+export class CursorPlugin {
+  public plugin: Plugin;
+  private provider: { awareness: Awareness };
+  private recentlyUpdatedCursors: Map<
+    number,
+    { element: HTMLElement; hideTimeout: NodeJS.Timeout | undefined }
+  >;
+  constructor(
+    private collaboration: {
+      fragment: Y.XmlFragment;
+      user: CollaborationUser;
+      provider: { awareness: Awareness };
+      renderCursor?: (user: CollaborationUser) => HTMLElement;
+      showCursorLabels?: "always" | "activity";
+    }
+  ) {
+    this.provider = collaboration.provider;
+    this.recentlyUpdatedCursors = new Map();
+
+    this.provider.awareness.setLocalStateField("user", collaboration.user);
+
+    if (collaboration.showCursorLabels !== "always") {
+      this.provider.awareness.on(
+        "change",
+        ({
+          updated,
+        }: {
+          added: Array<number>;
+          updated: Array<number>;
+          removed: Array<number>;
+        }) => {
+          for (const clientID of updated) {
+            const cursor = this.recentlyUpdatedCursors.get(clientID);
+
+            if (cursor) {
+              cursor.element.setAttribute("data-active", "");
+
+              if (cursor.hideTimeout) {
+                clearTimeout(cursor.hideTimeout);
+              }
+
+              this.recentlyUpdatedCursors.set(clientID, {
+                element: cursor.element,
+                hideTimeout: setTimeout(() => {
+                  cursor.element.removeAttribute("data-active");
+                }, 2000),
+              });
+            }
+          }
+        }
+      );
+    }
+
+    this.plugin = yCursorPlugin(this.provider.awareness, {
+      selectionBuilder: defaultSelectionBuilder,
+      cursorBuilder: this.renderCursor,
+    });
+  }
+
+  public get priority() {
+    return 999;
+  }
+
+  private renderCursor = (user: CollaborationUser, clientID: number) => {
+    let cursorData = this.recentlyUpdatedCursors.get(clientID);
+
+    if (!cursorData) {
+      const cursorElement = (
+        this.collaboration.renderCursor ?? CursorPlugin.defaultCursorRender
+      )(user);
+
+      if (this.collaboration.showCursorLabels !== "always") {
+        cursorElement.addEventListener("mouseenter", () => {
+          const cursor = this.recentlyUpdatedCursors.get(clientID)!;
+          cursor.element.setAttribute("data-active", "");
+
+          if (cursor.hideTimeout) {
+            clearTimeout(cursor.hideTimeout);
+            this.recentlyUpdatedCursors.set(clientID, {
+              element: cursor.element,
+              hideTimeout: undefined,
+            });
+          }
+        });
+
+        cursorElement.addEventListener("mouseleave", () => {
+          const cursor = this.recentlyUpdatedCursors.get(clientID)!;
+
+          this.recentlyUpdatedCursors.set(clientID, {
+            element: cursor.element,
+            hideTimeout: setTimeout(() => {
+              cursor.element.removeAttribute("data-active");
+            }, 2000),
+          });
+        });
+      }
+
+      cursorData = {
+        element: cursorElement,
+        hideTimeout: undefined,
+      };
+
+      this.recentlyUpdatedCursors.set(clientID, cursorData);
+    }
+
+    return cursorData.element;
+  };
+
+  public updateUser = (user: {
+    name: string;
+    color: string;
+    [key: string]: string;
+  }) => {
+    this.provider.awareness.setLocalStateField("user", user);
+  };
+
+  public static defaultCursorRender = (user: CollaborationUser) => {
+    const cursorElement = document.createElement("span");
+
+    cursorElement.classList.add("bn-collaboration-cursor__base");
+
+    const caretElement = document.createElement("span");
+    caretElement.setAttribute("contentedEditable", "false");
+    caretElement.classList.add("bn-collaboration-cursor__caret");
+    caretElement.setAttribute("style", `background-color: ${user.color}`);
+
+    const labelElement = document.createElement("span");
+
+    labelElement.classList.add("bn-collaboration-cursor__label");
+    labelElement.setAttribute("style", `background-color: ${user.color}`);
+    labelElement.insertBefore(document.createTextNode(user.name), null);
+
+    caretElement.insertBefore(labelElement, null);
+
+    cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
+    cursorElement.insertBefore(caretElement, null);
+    cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
+
+    return cursorElement;
+  };
+}

package/src/extensions/Collaboration/SyncPlugin.ts

@@ -0,0 +1,15 @@
+import { Plugin } from "prosemirror-state";
+import { ySyncPlugin } from "y-prosemirror";
+import type * as Y from "yjs";
+
+export class SyncPlugin {
+  public plugin: Plugin;
+
+  constructor(fragment: Y.XmlFragment) {
+    this.plugin = ySyncPlugin(fragment);
+  }
+
+  public get priority() {
+    return 1001;
+  }
+}

package/src/extensions/Collaboration/UndoPlugin.ts

@@ -0,0 +1,14 @@
+import { Plugin } from "prosemirror-state";
+import { yUndoPlugin } from "y-prosemirror";
+
+export class UndoPlugin {
+  public plugin: Plugin;
+
+  constructor() {
+    this.plugin = yUndoPlugin();
+  }
+
+  public get priority() {
+    return 1000;
+  }
+}

package/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -10,6 +10,7 @@ import type {
   StyleSchema,
 } from "../../schema/index.js";
 import { EventEmitter } from "../../util/EventEmitter.js";
+import { ySyncPluginKey } from "y-prosemirror";
 
 export type FilePanelState<
   I extends InlineContentSchema,
@@ -31,7 +32,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
       I,
       S
     >,
-    private readonly pluginKey: PluginKey,
+    private readonly pluginKey: PluginKey<FilePanelState<I, S>>,
     private readonly pmView: EditorView,
     emitUpdate: (state: FilePanelState<I, S>) => void
   ) {
@@ -81,11 +82,10 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
   };
 
   update(view: EditorView, prevState: EditorState) {
-    const pluginState: {
-      block: BlockFromConfig<FileBlockConfig, I, S>;
-    } = this.pluginKey.getState(view.state);
+    const pluginState = this.pluginKey.getState(view.state);
+    const prevPluginState = this.pluginKey.getState(prevState);
 
-    if (!this.state?.show && pluginState.block && this.editor.isEditable) {
+    if (!this.state?.show && pluginState?.block && this.editor.isEditable) {
       const blockElement = this.pmView.root.querySelector(
         `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`
       );
@@ -103,16 +103,15 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
       return;
     }
 
-    if (
-      !view.state.selection.eq(prevState.selection) ||
-      !view.state.doc.eq(prevState.doc) ||
-      !this.editor.isEditable
-    ) {
-      if (this.state?.show) {
-        this.state.show = false;
-
-        this.emitUpdate();
-      }
+    const isOpening = pluginState?.block && !prevPluginState?.block;
+    const isClosing = !pluginState?.block && prevPluginState?.block;
+    if (isOpening && this.state && !this.state.show) {
+      this.state.show = true;
+      this.emitUpdate();
+    }
+    if (isClosing && this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
     }
   }
 
@@ -132,7 +131,9 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
   }
 }
 
-const filePanelPluginKey = new PluginKey("FilePanelPlugin");
+const filePanelPluginKey = new PluginKey<FilePanelState<any, any>>(
+  "FilePanelPlugin"
+);
 
 export class FilePanelProsemirrorPlugin<
   I extends InlineContentSchema,
@@ -173,13 +174,21 @@ export class FilePanelProsemirrorPlugin<
             block: undefined,
           };
         },
-        apply: (transaction) => {
-          const block: BlockFromConfig<FileBlockConfig, I, S> | undefined =
-            transaction.getMeta(filePanelPluginKey)?.block;
+        apply: (transaction, prev) => {
+          const state: FilePanelState<I, S> | undefined =
+            transaction.getMeta(filePanelPluginKey);
 
-          return {
-            block,
-          };
+          if (state) {
+            return state;
+          }
+
+          if (
+            !transaction.getMeta(ySyncPluginKey) &&
+            (transaction.selectionSet || transaction.docChanged)
+          ) {
+            return { block: undefined };
+          }
+          return prev;
         },
       },
     });

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -140,11 +140,9 @@ export class FormattingToolbarView implements PluginView {
     // Wrapping in a setTimeout gives enough time to wait for the blur event to
     // occur before updating the toolbar.
     const { state, composing } = view;
-    const { selection } = state;
+    const { doc, selection } = state;
     const isSame =
-      oldState &&
-      oldState.selection.from === state.selection.from &&
-      oldState.selection.to === state.selection.to;
+      oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
 
     if (composing || isSame) {
       return;

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -605,6 +605,9 @@ export const KeyboardShortcutsExtension = Extension.create<{
         this.options.editor.moveBlocksDown();
         return true;
       },
+      "Mod-z": () => this.options.editor.undo(),
+      "Mod-y": () => this.options.editor.redo(),
+      "Shift-Mod-z": () => this.options.editor.redo(),
     };
   },
 });

package/src/i18n/locales/index.ts

@@ -13,6 +13,8 @@ export * from "./no.js";
 export * from "./pl.js";
 export * from "./pt.js";
 export * from "./ru.js";
+export * from "./sk.js";
 export * from "./uk.js";
 export * from "./vi.js";
 export * from "./zh.js";
+export * from "./zh-tw.js";

package/src/i18n/locales/ru.ts

@@ -42,7 +42,7 @@ export const ru: Dictionary = {
     },
     bullet_list: {
       title: "Маркированный список",
-      subtext: "Для отображения неупорядоченного списка.",
+      subtext: "Для отображения неупорядоченного списка",
       aliases: [
         "ul",
         "li",
@@ -158,7 +158,7 @@ export const ru: Dictionary = {
     },
   },
   placeholders: {
-    default: "Ведите текст или введите «/» для команд",
+    default: "Введите текст или введите «/» для команд",
     heading: "Заголовок",
     bulletListItem: "Список",
     numberedListItem: "Список",

package/src/i18n/locales/sk.ts

@@ -0,0 +1,355 @@
+export const sk = {
+  slash_menu: {
+    heading: {
+      title: "Nadpis 1",
+      subtext: "Nadpis najvyššej úrovne",
+      aliases: ["h", "nadpis1", "h1"],
+      group: "Nadpisy",
+    },
+    heading_2: {
+      title: "Nadpis 2",
+      subtext: "Kľúčový nadpis sekcie",
+      aliases: ["h2", "nadpis2", "podnadpis"],
+      group: "Nadpisy",
+    },
+    heading_3: {
+      title: "Nadpis 3",
+      subtext: "Podsekcia alebo skupinový nadpis",
+      aliases: ["h3", "nadpis3", "podnadpis"],
+      group: "Nadpisy",
+    },
+    quote: {
+      title: "Citát",
+      subtext: "Citát alebo výňatok",
+      aliases: ["citácia", "blockquote", "bq"],
+      group: "Základné bloky",
+    },
+    numbered_list: {
+      title: "Číslovaný zoznam",
+      subtext: "Zoznam s očíslovanými položkami",
+      aliases: ["ol", "li", "zoznam", "číslovanýzoznam", "číslovaný zoznam"],
+      group: "Základné bloky",
+    },
+    bullet_list: {
+      title: "Odrážkový zoznam",
+      subtext: "Zoznam s nečíslovanými položkami",
+      aliases: ["ul", "li", "zoznam", "odrážkovýzoznam", "odrážkový zoznam"],
+      group: "Základné bloky",
+    },
+    check_list: {
+      title: "Kontrolný zoznam",
+      subtext: "Zoznam s checkboxmi",
+      aliases: [
+        "ul",
+        "li",
+        "zoznam",
+        "kontrolnýzoznam",
+        "kontrolný zoznam",
+        "zaškrtnutý zoznam",
+        "checkbox",
+      ],
+      group: "Základné bloky",
+    },
+    paragraph: {
+      title: "Odstavec",
+      subtext: "Telo dokumentu",
+      aliases: ["p", "odstavec"],
+      group: "Základné bloky",
+    },
+    code_block: {
+      title: "Blok kódu",
+      subtext: "Blok kódu so zvýraznením syntaxe",
+      aliases: ["kód", "pre"],
+      group: "Základné bloky",
+    },
+    page_break: {
+      title: "Zlom strany",
+      subtext: "Oddeľovač strán",
+      aliases: ["strana", "zlom", "oddeľovač"],
+      group: "Základné bloky",
+    },
+    table: {
+      title: "Tabuľka",
+      subtext: "Tabuľka s editovateľnými bunkami",
+      aliases: ["tabuľka"],
+      group: "Pokročilé",
+    },
+    image: {
+      title: "Obrázok",
+      subtext: "Meniteľný obrázok s popisom",
+      aliases: [
+        "obrázok",
+        "nahratieObrázka",
+        "nahratie",
+        "img",
+        "obrázok",
+        "média",
+        "url",
+      ],
+      group: "Médiá",
+    },
+    video: {
+      title: "Video",
+      subtext: "Meniteľné video s popisom",
+      aliases: [
+        "video",
+        "nahratieVidea",
+        "nahratie",
+        "mp4",
+        "film",
+        "média",
+        "url",
+      ],
+      group: "Médiá",
+    },
+    audio: {
+      title: "Audio",
+      subtext: "Vložený zvuk s popisom",
+      aliases: [
+        "audio",
+        "nahratieAudia",
+        "nahratie",
+        "mp3",
+        "zvuk",
+        "média",
+        "url",
+      ],
+      group: "Médiá",
+    },
+    file: {
+      title: "Súbor",
+      subtext: "Vložený súbor",
+      aliases: ["súbor", "nahratie", "vloženie", "média", "url"],
+      group: "Médiá",
+    },
+    emoji: {
+      title: "Emoji",
+      subtext: "Vyhľadať a vložiť emoji",
+      aliases: ["emoji", "emócia", "tvár"],
+      group: "Ostatné",
+    },
+  },
+  placeholders: {
+    default: "Zadajte text alebo napíšte '/' pre príkazy",
+    heading: "Nadpis",
+    bulletListItem: "Zoznam",
+    numberedListItem: "Zoznam",
+    checkListItem: "Zoznam",
+    emptyDocument: undefined,
+    new_comment: "Napíšte komentár...",
+    edit_comment: "Upravte komentár...",
+    comment_reply: "Pridať komentár...",
+  } as Record<string | "default" | "emptyDocument", string | undefined>,
+  file_blocks: {
+    image: {
+      add_button_text: "Pridať obrázok",
+    },
+    video: {
+      add_button_text: "Pridať video",
+    },
+    audio: {
+      add_button_text: "Pridať audio",
+    },
+    file: {
+      add_button_text: "Pridať súbor",
+    },
+  },
+  side_menu: {
+    add_block_label: "Pridať blok",
+    drag_handle_label: "Otvoriť menu bloku",
+  },
+  drag_handle: {
+    delete_menuitem: "Vymazať",
+    colors_menuitem: "Farby",
+    header_row_menuitem: "Hlavičkový riadok",
+    header_column_menuitem: "Hlavičkový stĺpec",
+  },
+  table_handle: {
+    delete_column_menuitem: "Vymazať stĺpec",
+    delete_row_menuitem: "Vymazať riadok",
+    add_left_menuitem: "Pridať stĺpec vľavo",
+    add_right_menuitem: "Pridať stĺpec vpravo",
+    add_above_menuitem: "Pridať riadok nad",
+    add_below_menuitem: "Pridať riadok pod",
+    split_cell_menuitem: "Rozdeliť bunku",
+    merge_cells_menuitem: "Zlúčiť bunky",
+    background_color_menuitem: "Farba pozadia",
+  },
+  suggestion_menu: {
+    no_items_title: "Nenašli sa žiadne položky",
+    loading: "Načítava sa…",
+  },
+  color_picker: {
+    text_title: "Text",
+    background_title: "Pozadie",
+    colors: {
+      default: "Predvolená",
+      gray: "Sivá",
+      brown: "Hnedá",
+      red: "Červená",
+      orange: "Oranžová",
+      yellow: "Žltá",
+      green: "Zelená",
+      blue: "Modrá",
+      purple: "Fialová",
+      pink: "Ružová",
+    },
+  },
+  formatting_toolbar: {
+    bold: {
+      tooltip: "Tučné",
+      secondary_tooltip: "Mod+B",
+    },
+    italic: {
+      tooltip: "Kurzíva",
+      secondary_tooltip: "Mod+I",
+    },
+    underline: {
+      tooltip: "Podčiarknuté",
+      secondary_tooltip: "Mod+U",
+    },
+    strike: {
+      tooltip: "Prečiarknuté",
+      secondary_tooltip: "Mod+Shift+S",
+    },
+    code: {
+      tooltip: "Kód",
+      secondary_tooltip: "",
+    },
+    colors: {
+      tooltip: "Farby",
+    },
+    link: {
+      tooltip: "Vytvoriť odkaz",
+      secondary_tooltip: "Mod+K",
+    },
+    file_caption: {
+      tooltip: "Upraviť popis",
+      input_placeholder: "Upraviť popis",
+    },
+    file_replace: {
+      tooltip: {
+        image: "Nahradiť obrázok",
+        video: "Nahradiť video",
+        audio: "Nahradiť audio",
+        file: "Nahradiť súbor",
+      },
+    },
+    file_rename: {
+      tooltip: {
+        image: "Premenovať obrázok",
+        video: "Premenovať video",
+        audio: "Premenovať audio",
+        file: "Premenovať súbor",
+      },
+      input_placeholder: {
+        image: "Premenovať obrázok",
+        video: "Premenovať video",
+        audio: "Premenovať audio",
+        file: "Premenovať súbor",
+      },
+    },
+    file_download: {
+      tooltip: {
+        image: "Stiahnuť obrázok",
+        video: "Stiahnuť video",
+        audio: "Stiahnuť audio",
+        file: "Stiahnuť súbor",
+      },
+    },
+    file_delete: {
+      tooltip: {
+        image: "Vymazať obrázok",
+        video: "Vymazať video",
+        audio: "Vymazať audio",
+        file: "Vymazať súbor",
+      },
+    },
+    file_preview_toggle: {
+      tooltip: "Prepnúť náhľad",
+    },
+    nest: {
+      tooltip: "Zarovnať blok",
+      secondary_tooltip: "Tab",
+    },
+    unnest: {
+      tooltip: "Odzarovnať blok",
+      secondary_tooltip: "Shift+Tab",
+    },
+    align_left: {
+      tooltip: "Zarovnať text vľavo",
+    },
+    align_center: {
+      tooltip: "Zarovnať text na stred",
+    },
+    align_right: {
+      tooltip: "Zarovnať text vpravo",
+    },
+    align_justify: {
+      tooltip: "Zarovnať text do bloku",
+    },
+    table_cell_merge: {
+      tooltip: "Zlúčiť bunky",
+    },
+    comment: {
+      tooltip: "Pridať komentár",
+    },
+  },
+  file_panel: {
+    upload: {
+      title: "Nahratie",
+      file_placeholder: {
+        image: "Nahrať obrázok",
+        video: "Nahrať video",
+        audio: "Nahrať audio",
+        file: "Nahrať súbor",
+      },
+      upload_error: "Chyba: Nahratie zlyhalo",
+    },
+    embed: {
+      title: "Vložiť",
+      embed_button: {
+        image: "Vložiť obrázok",
+        video: "Vložiť video",
+        audio: "Vložiť audio",
+        file: "Vložiť súbor",
+      },
+      url_placeholder: "Zadajte URL",
+    },
+  },
+  link_toolbar: {
+    delete: {
+      tooltip: "Odstrániť odkaz",
+    },
+    edit: {
+      text: "Upraviť odkaz",
+      tooltip: "Upraviť",
+    },
+    open: {
+      tooltip: "Otvoriť v novom okne",
+    },
+    form: {
+      title_placeholder: "Upraviť názov",
+      url_placeholder: "Upraviť URL",
+    },
+  },
+  comments: {
+    actions: {
+      add_reaction: "Pridať reakciu",
+      resolve: "Vyriešiť",
+      edit_comment: "Upraviť komentár",
+      delete_comment: "Vymazať komentár",
+      more_actions: "Ďalšie akcie",
+    },
+    reactions: {
+      reacted_by: "Reagoval/a",
+    },
+    sidebar: {
+      marked_as_resolved: "Označené ako vyriešené",
+      more_replies: (count: number) => `${count} ďalších odpovedí`,
+    },
+  },
+  generic: {
+    ctrl_shortcut: "Ctrl",
+  },
+};