@blocknote/core 0.12.4 → 0.13.2

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -0,0 +1,95 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+
+const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
+
+export const PlaceholderPlugin = (
+  editor: BlockNoteEditor<any, any, any>,
+  placeholders: Record<string | "default", string>
+) => {
+  return new Plugin({
+    key: PLUGIN_KEY,
+    view: () => {
+      const styleEl = document.createElement("style");
+      document.head.appendChild(styleEl);
+      const styleSheet = styleEl.sheet!;
+
+      const getBaseSelector = (additionalSelectors = "") =>
+        `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak):before`;
+
+      const getSelector = (
+        blockType: string | "default",
+        mustBeFocused = true
+      ) => {
+        const mustBeFocusedSelector = mustBeFocused
+          ? `[data-is-empty-and-focused]`
+          : ``;
+
+        if (blockType === "default") {
+          return getBaseSelector(mustBeFocusedSelector);
+        }
+
+        const blockTypeSelector = `[data-content-type="${blockType}"]`;
+        return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
+      };
+
+      for (const [blockType, placeholder] of Object.entries(placeholders)) {
+        const mustBeFocused = blockType === "default";
+
+        styleSheet.insertRule(
+          `${getSelector(blockType, mustBeFocused)}{ content: ${JSON.stringify(
+            placeholder
+          )}; }`
+        );
+
+        // For some reason, the placeholders which show when the block is focused
+        // take priority over ones which show depending on block type, so we need
+        // to make sure the block specific ones are also used when the block is
+        // focused.
+        if (!mustBeFocused) {
+          styleSheet.insertRule(
+            `${getSelector(blockType, true)}{ content: ${JSON.stringify(
+              placeholder
+            )}; }`
+          );
+        }
+      }
+
+      return {
+        destroy: () => {
+          document.head.removeChild(styleEl);
+        },
+      };
+    },
+    props: {
+      // TODO: maybe also add placeholder for empty document ("e.g.: start writing..")
+      decorations: (state) => {
+        const { doc, selection } = state;
+
+        if (!editor.isEditable) {
+          return;
+        }
+
+        if (!selection.empty) {
+          return;
+        }
+
+        const $pos = selection.$anchor;
+        const node = $pos.parent;
+
+        if (node.content.size > 0) {
+          return null;
+        }
+
+        const before = $pos.before();
+
+        const dec = Decoration.node(before, before + node.nodeSize, {
+          "data-is-empty-and-focused": "true",
+        });
+
+        return DecorationSet.create(doc, [dec]);
+      },
+    },
+  });
+};

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -373,11 +373,12 @@ export class SideMenuView<
   };
 
   onKeyDown = (_event: KeyboardEvent) => {
-    if (this.state?.show) {
+    if (this.state?.show && this.editor.isFocused()) {
+      // Typing in editor should hide side menu
       this.state.show = false;
       this.emitUpdate(this.state);
+      this.menuFrozen = false;
     }
-    this.menuFrozen = false;
   };
 
   onMouseDown = (_event: MouseEvent) => {

package/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts

@@ -1,4 +1,7 @@
+import type { Dictionary } from "../../i18n/dictionary";
+
 export type DefaultSuggestionItem = {
+  key: keyof Dictionary["slash_menu"];
   title: string;
   onItemClick: () => void;
   subtext?: string;

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -3,8 +3,8 @@ import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
 
 const findBlock = findParentNode((node) => node.type.name === "blockContainer");
@@ -18,7 +18,7 @@ class SuggestionMenuView<
   I extends InlineContentSchema,
   S extends StyleSchema
 > {
-  private state?: SuggestionMenuState;
+  public state?: SuggestionMenuState;
   public emitUpdate: (triggerCharacter: string) => void;
 
   pluginState: SuggestionPluginState;
@@ -339,6 +339,10 @@ export class SuggestionMenuProseMirrorPlugin<
   closeMenu = () => this.view!.closeMenu();
 
   clearQuery = () => this.view!.clearQuery();
+
+  public get shown() {
+    return this.view?.state?.show || false;
+  }
 }
 
 export function createSuggestionMenu<

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -83,95 +83,82 @@ export function getDefaultSlashMenuItems<
   if (checkDefaultBlockTypeInSchema("heading", editor)) {
     items.push(
       {
-        title: "Heading 1",
         onItemClick: () => {
           insertOrUpdateBlock(editor, {
             type: "heading",
             props: { level: 1 },
           });
         },
-        subtext: "Used for a top-level heading",
         badge: formatKeyboardShortcut("Mod-Alt-1"),
-        aliases: ["h", "heading1", "h1"],
-        group: "Headings",
+        key: "heading",
+        ...editor.dictionary.slash_menu.heading,
       },
       {
-        title: "Heading 2",
         onItemClick: () => {
           insertOrUpdateBlock(editor, {
             type: "heading",
             props: { level: 2 },
           });
         },
-        subtext: "Used for key sections",
         badge: formatKeyboardShortcut("Mod-Alt-2"),
-        aliases: ["h2", "heading2", "subheading"],
-        group: "Headings",
+        key: "heading_2",
+        ...editor.dictionary.slash_menu.heading_2,
       },
       {
-        title: "Heading 3",
         onItemClick: () => {
           insertOrUpdateBlock(editor, {
             type: "heading",
             props: { level: 3 },
           });
         },
-        subtext: "Used for subsections and group headings",
         badge: formatKeyboardShortcut("Mod-Alt-3"),
-        aliases: ["h3", "heading3", "subheading"],
-        group: "Headings",
+        key: "heading_3",
+        ...editor.dictionary.slash_menu.heading_3,
       }
     );
   }
 
   if (checkDefaultBlockTypeInSchema("numberedListItem", editor)) {
     items.push({
-      title: "Numbered List",
       onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "numberedListItem",
         });
       },
-      subtext: "Used to display a numbered list",
       badge: formatKeyboardShortcut("Mod-Shift-7"),
-      aliases: ["ol", "li", "list", "numberedlist", "numbered list"],
-      group: "Basic blocks",
+      key: "numbered_list",
+      ...editor.dictionary.slash_menu.numbered_list,
     });
   }
 
   if (checkDefaultBlockTypeInSchema("bulletListItem", editor)) {
     items.push({
-      title: "Bullet List",
       onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "bulletListItem",
         });
       },
-      subtext: "Used to display an unordered list",
       badge: formatKeyboardShortcut("Mod-Shift-8"),
-      aliases: ["ul", "li", "list", "bulletlist", "bullet list"],
-      group: "Basic blocks",
+      key: "bullet_list",
+      ...editor.dictionary.slash_menu.bullet_list,
     });
   }
 
   if (checkDefaultBlockTypeInSchema("paragraph", editor)) {
     items.push({
-      title: "Paragraph",
       onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "paragraph",
         });
       },
-      subtext: "Used for the body of your document",
       badge: formatKeyboardShortcut("Mod-Alt-0"),
-      aliases: ["p", "paragraph"],
-      group: "Basic blocks",
+      key: "paragraph",
+      ...editor.dictionary.slash_menu.paragraph,
     });
   }
 
   if (checkDefaultBlockTypeInSchema("table", editor)) {
     items.push({
-      title: "Table",
       onItemClick: () => {
         insertOrUpdateBlock(editor, {
           type: "table",
@@ -188,16 +175,14 @@ export function getDefaultSlashMenuItems<
           },
         });
       },
-      subtext: "Used for for tables",
-      aliases: ["table"],
-      group: "Advanced",
       badge: undefined,
+      key: "table",
+      ...editor.dictionary.slash_menu.table,
     });
   }
 
   if (checkDefaultBlockTypeInSchema("image", editor)) {
     items.push({
-      title: "Image",
       onItemClick: () => {
         const insertedBlock = insertOrUpdateBlock(editor, {
           type: "image",
@@ -210,19 +195,8 @@ export function getDefaultSlashMenuItems<
           })
         );
       },
-      subtext: "Insert an image",
-      aliases: [
-        "image",
-        "imageUpload",
-        "upload",
-        "img",
-        "picture",
-        "media",
-        "url",
-        "drive",
-        "dropbox",
-      ],
-      group: "Media",
+      key: "image",
+      ...editor.dictionary.slash_menu.image,
     });
   }
 
@@ -234,10 +208,10 @@ export function filterSuggestionItems<
 >(items: T[], query: string) {
   return items.filter(
     ({ title, aliases }) =>
-      title.toLowerCase().startsWith(query.toLowerCase()) ||
+      title.toLowerCase().includes(query.toLowerCase()) ||
       (aliases &&
         aliases.filter((alias) =>
-          alias.toLowerCase().startsWith(query.toLowerCase())
+          alias.toLowerCase().includes(query.toLowerCase())
         ).length !== 0)
   );
 }

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -350,7 +350,7 @@ export class TableHandlesView<
   };
 
   destroy() {
-    this.pmView.dom.removeEventListener("mousedown", this.mouseMoveHandler);
+    this.pmView.dom.removeEventListener("mousemove", this.mouseMoveHandler);
 
     document.removeEventListener("dragover", this.dragOverHandler);
     document.removeEventListener("drop", this.dropHandler);

package/src/i18n/dictionary.ts

@@ -0,0 +1,17 @@
+// function scramble(dict: any) {
+//   const newDict: any = {} as any;
+
+import type { en } from "./locales";
+
+//   for (const key in dict) {
+//     if (typeof dict[key] === "object") {
+//       newDict[key] = scramble(dict[key]);
+//     } else {
+//       newDict[key] = dict[key].split("").reverse().join("");
+//     }
+//   }
+
+//   return newDict;
+// }
+
+export type Dictionary = typeof en;

package/src/i18n/locales/en.ts

@@ -0,0 +1,196 @@
+export const en = {
+  slash_menu: {
+    heading: {
+      title: "Heading 1",
+      subtext: "Used for a top-level heading",
+      aliases: ["h", "heading1", "h1"],
+      group: "Headings",
+    },
+    heading_2: {
+      title: "Heading 2",
+      subtext: "Used for key sections",
+      aliases: ["h2", "heading2", "subheading"],
+      group: "Headings",
+    },
+    heading_3: {
+      title: "Heading 3",
+      subtext: "Used for subsections and group headings",
+      aliases: ["h3", "heading3", "subheading"],
+      group: "Headings",
+    },
+    numbered_list: {
+      title: "Numbered List",
+      subtext: "Used to display a numbered list",
+      aliases: ["ol", "li", "list", "numberedlist", "numbered list"],
+      group: "Basic blocks",
+    },
+    bullet_list: {
+      title: "Bullet List",
+      subtext: "Used to display an unordered list",
+      aliases: ["ul", "li", "list", "bulletlist", "bullet list"],
+      group: "Basic blocks",
+    },
+    paragraph: {
+      title: "Paragraph",
+      subtext: "Used for the body of your document",
+      aliases: ["p", "paragraph"],
+      group: "Basic blocks",
+    },
+    table: {
+      title: "Table",
+      subtext: "Used for for tables",
+      aliases: ["table"],
+      group: "Advanced",
+    },
+    image: {
+      title: "Image",
+      subtext: "Insert an image",
+      aliases: [
+        "image",
+        "imageUpload",
+        "upload",
+        "img",
+        "picture",
+        "media",
+        "url",
+        "drive",
+        "dropbox",
+      ],
+      group: "Media",
+    },
+  },
+  placeholders: {
+    default: "Enter text or type '/' for commands",
+    heading: "Heading",
+    bulletListItem: "List",
+    numberedListItem: "List",
+  },
+  image: {
+    add_button: "Add Image",
+  },
+  // from react package:
+  side_menu: {
+    add_block_label: "Add block",
+    drag_handle_label: "Open block menu",
+  },
+  drag_handle: {
+    delete_menuitem: "Delete",
+    colors_menuitem: "Colors",
+  },
+  table_handle: {
+    delete_column_menuitem: "Delete column",
+    delete_row_menuitem: "Delete row",
+    add_left_menuitem: "Add column left",
+    add_right_menuitem: "Add column right",
+    add_above_menuitem: "Add row above",
+    add_below_menuitem: "Add row below",
+  },
+  suggestion_menu: {
+    no_items_title: "No items found",
+    loading: "Loading…",
+  },
+  color_picker: {
+    text_title: "Text",
+    background_title: "Background",
+    colors: {
+      default: "Default",
+      gray: "Gray",
+      brown: "Brown",
+      red: "Red",
+      orange: "Orange",
+      yellow: "Yellow",
+      green: "Green",
+      blue: "Blue",
+      purple: "Purple",
+      pink: "Pink",
+    },
+  },
+
+  formatting_toolbar: {
+    bold: {
+      tooltip: "Bold",
+      secondary_tooltip: "Mod+B",
+    },
+    italic: {
+      tooltip: "Italic",
+      secondary_tooltip: "Mod+I",
+    },
+    underline: {
+      tooltip: "Underline",
+      secondary_tooltip: "Mod+U",
+    },
+    strike: {
+      tooltip: "Strike",
+      secondary_tooltip: "Mod+Shift+X",
+    },
+    code: {
+      tooltip: "Code",
+      secondary_tooltip: "",
+    },
+    colors: {
+      tooltip: "Colors",
+    },
+    link: {
+      tooltip: "Create link",
+      secondary_tooltip: "Mod+K",
+    },
+    image_caption: {
+      tooltip: "Edit caption",
+      input_placeholder: "Edit caption",
+    },
+    image_replace: {
+      tooltip: "Replace image",
+    },
+    nest: {
+      tooltip: "Nest block",
+      secondary_tooltip: "Tab",
+    },
+    unnest: {
+      tooltip: "Unnest block",
+      secondary_tooltip: "Shift+Tab",
+    },
+    align_left: {
+      tooltip: "Align text left",
+    },
+    align_center: {
+      tooltip: "Align text center",
+    },
+    align_right: {
+      tooltip: "Align text right",
+    },
+    align_justify: {
+      tooltip: "Justify text",
+    },
+  },
+  image_panel: {
+    upload: {
+      title: "Upload",
+      file_placeholder: "Upload image",
+      upload_error: "Error: Upload failed",
+    },
+    embed: {
+      title: "Embed",
+      embed_button: "Embed image",
+      url_placeholder: "Enter URL",
+    },
+  },
+  link_toolbar: {
+    delete: {
+      tooltip: "Remove link",
+    },
+    edit: {
+      text: "Edit link",
+      tooltip: "Edit",
+    },
+    open: {
+      tooltip: "Open in new tab",
+    },
+    form: {
+      title_placeholder: "Edit title",
+      url_placeholder: "Edit URL",
+    },
+  },
+  generic: {
+    ctrl_shortcut: "Ctrl",
+  },
+};