@blocknote/core 0.27.0 → 0.28.0

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -10,6 +10,7 @@ import {
   StyleSchema,
 } from "../../schema/index.js";
 import { EventEmitter } from "../../util/EventEmitter.js";
+import { trackPosition } from "../../api/positionMapping.js";
 
 const findBlock = findParentNode((node) => node.type.name === "blockContainer");
 
@@ -129,7 +130,7 @@ class SuggestionMenuView<
       .focus()
       .deleteRange({
         from:
-          this.pluginState.queryStartPos! -
+          this.pluginState.queryStartPos() -
           (this.pluginState.deleteTriggerCharacter
             ? this.pluginState.triggerCharacter!.length
             : 0),
@@ -143,7 +144,7 @@ type SuggestionPluginState =
   | {
       triggerCharacter: string;
       deleteTriggerCharacter: boolean;
-      queryStartPos: number;
+      queryStartPos: () => number;
       query: string;
       decorationId: string;
       ignoreQueryLength?: boolean;
@@ -220,13 +221,22 @@ export class SuggestionMenuProseMirrorPlugin<
             suggestionPluginTransactionMeta !== null &&
             prev === undefined
           ) {
+            const trackedPosition = trackPosition(
+              editor,
+              newState.selection.from -
+                // Need to account for the trigger char that was inserted, so we offset the position by the length of the trigger character.
+                suggestionPluginTransactionMeta.triggerCharacter.length
+            );
             return {
               triggerCharacter:
                 suggestionPluginTransactionMeta.triggerCharacter,
               deleteTriggerCharacter:
                 suggestionPluginTransactionMeta.deleteTriggerCharacter !==
                 false,
-              queryStartPos: newState.selection.from,
+              // When reading the queryStartPos, we offset the result by the length of the trigger character, to make it easy on the caller
+              queryStartPos: () =>
+                trackedPosition() +
+                suggestionPluginTransactionMeta.triggerCharacter.length,
               query: "",
               decorationId: `id_${Math.floor(Math.random() * 0xffffffff)}`,
               ignoreQueryLength:
@@ -252,7 +262,7 @@ export class SuggestionMenuProseMirrorPlugin<
             transaction.getMeta("pointer") ||
             // Moving the caret before the character which triggered the menu should hide it.
             (prev.triggerCharacter !== undefined &&
-              newState.selection.from < prev.queryStartPos!)
+              newState.selection.from < prev.queryStartPos())
           ) {
             return undefined;
           }
@@ -261,7 +271,7 @@ export class SuggestionMenuProseMirrorPlugin<
 
           // Updates the current query.
           next.query = newState.doc.textBetween(
-            prev.queryStartPos!,
+            prev.queryStartPos(),
             newState.selection.from
           );
 
@@ -324,9 +334,9 @@ export class SuggestionMenuProseMirrorPlugin<
           // Creates an inline decoration around the trigger character.
           return DecorationSet.create(state.doc, [
             Decoration.inline(
-              suggestionPluginState.queryStartPos! -
+              suggestionPluginState.queryStartPos() -
                 suggestionPluginState.triggerCharacter!.length,
-              suggestionPluginState.queryStartPos!,
+              suggestionPluginState.queryStartPos(),
               {
                 nodeName: "span",
                 class: "bn-suggestion-decorator",

package/src/i18n/locales/de.ts

@@ -24,19 +24,19 @@ export const de: Dictionary = {
       title: "Zitat",
       subtext: "Zitat oder Auszug",
       aliases: ["quotation", "blockquote", "bq"],
-      group: "Grundlegende blöcke",
+      group: "Grundlegende Blöcke",
     },
     numbered_list: {
       title: "Nummerierte Liste",
       subtext: "Liste mit nummerierten Elementen",
       aliases: ["ol", "li", "liste", "nummerierteliste", "nummerierte liste"],
-      group: "Grundlegende blöcke",
+      group: "Grundlegende Blöcke",
     },
     bullet_list: {
       title: "Aufzählungsliste",
       subtext: "Liste mit unnummerierten Elementen",
       aliases: ["ul", "li", "liste", "aufzählungsliste", "aufzählung liste"],
-      group: "Grundlegende blöcke",
+      group: "Grundlegende Blöcke",
     },
     check_list: {
       title: "Checkliste",
@@ -50,19 +50,19 @@ export const de: Dictionary = {
         "geprüfte liste",
         "kontrollkästchen",
       ],
-      group: "Grundlegende blöcke",
+      group: "Grundlegende Blöcke",
     },
     paragraph: {
       title: "Absatz",
       subtext: "Der Hauptteil Ihres Dokuments",
       aliases: ["p", "absatz"],
-      group: "Grundlegende blöcke",
+      group: "Grundlegende Blöcke",
     },
     code_block: {
       title: "Codeblock",
       subtext: "Codeblock mit Syntaxhervorhebung",
       aliases: ["code", "pre"],
-      group: "Grundlegende blöcke",
+      group: "Grundlegende Blöcke",
     },
     page_break: {
       title: "Seitenumbruch",
@@ -137,9 +137,9 @@ export const de: Dictionary = {
     bulletListItem: "Liste",
     numberedListItem: "Liste",
     checkListItem: "Liste",
-    new_comment: "Einen Kommentar schreiben...",
-    edit_comment: "Kommentar bearbeiten...",
-    comment_reply: "Kommentar hinzufügen...",
+    new_comment: "Einen Kommentar schreiben …",
+    edit_comment: "Kommentar bearbeiten …",
+    comment_reply: "Kommentar hinzufügen …",
   },
   file_blocks: {
     image: {
@@ -178,7 +178,7 @@ export const de: Dictionary = {
   },
   suggestion_menu: {
     no_items_title: "Keine Elemente gefunden",
-    loading: "Laden…",
+    loading: "Laden …",
   },
   color_picker: {
     text_title: "Text",

package/types/src/api/positionMapping.d.ts

@@ -0,0 +1,25 @@
+import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
+/**
+ * This is used to keep track of positions of elements in the editor.
+ * It is needed because y-prosemirror's sync plugin can disrupt normal prosemirror position mapping.
+ *
+ * It is specifically made to be able to be used whether the editor is being used in a collaboratively, or single user, providing the same API.
+ *
+ * @param editor The editor to track the position of.
+ * @param position The position to track.
+ * @param side The side of the position to track. "left" is the default. "right" would move with the change if the change is in the right direction.
+ * @returns A function that returns the position of the element.
+ */
+export declare function trackPosition(
+/**
+ * The editor to track the position of.
+ */
+editor: BlockNoteEditor<any, any, any>, 
+/**
+ * The position to track.
+ */
+position: number, 
+/**
+ * This is the side of the position to track. "left" is the default. "right" would move with the change if the change is in the right direction.
+ */
+side?: "left" | "right"): () => number;

package/types/src/api/positionMapping.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/blocks/CodeBlockContent/defaultSupportedLanguages.d.ts

@@ -1,6 +0,0 @@
-export type SupportedLanguageConfig = {
-    id: string;
-    name: string;
-    match: string[];
-};
-export declare const defaultSupportedLanguages: SupportedLanguageConfig[];