@blocknote/core 0.30.0 → 0.31.0

package/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts

@@ -1,4 +1,5 @@
 import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey("node-selection-keyboard");
 // By default, typing with a node selection active will cause ProseMirror to
@@ -15,54 +16,56 @@ const PLUGIN_KEY = new PluginKey("node-selection-keyboard");
 // While a more elegant solution would probably process transactions instead of
 // keystrokes, this brings us most of the way to Notion's UX without much added
 // complexity.
-export class NodeSelectionKeyboardPlugin {
-  public readonly plugin: Plugin;
+export class NodeSelectionKeyboardPlugin extends BlockNoteExtension {
   constructor() {
-    this.plugin = new Plugin({
-      key: PLUGIN_KEY,
-      props: {
-        handleKeyDown: (view, event) => {
-          // Checks for node selection
-          if ("node" in view.state.selection) {
-            // Checks if key press uses ctrl/meta modifier
-            if (event.ctrlKey || event.metaKey) {
-              return false;
-            }
-            // Checks if key press is alphanumeric
-            if (event.key.length === 1) {
-              event.preventDefault();
+    super();
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: PLUGIN_KEY,
+        props: {
+          handleKeyDown: (view, event) => {
+            // Checks for node selection
+            if ("node" in view.state.selection) {
+              // Checks if key press uses ctrl/meta modifier
+              if (event.ctrlKey || event.metaKey) {
+                return false;
+              }
+              // Checks if key press is alphanumeric
+              if (event.key.length === 1) {
+                event.preventDefault();
 
-              return true;
-            }
-            // Checks if key press is Enter
-            if (
-              event.key === "Enter" &&
-              !event.shiftKey &&
-              !event.altKey &&
-              !event.ctrlKey &&
-              !event.metaKey
-            ) {
-              const tr = view.state.tr;
-              view.dispatch(
-                tr
-                  .insert(
-                    view.state.tr.selection.$to.after(),
-                    view.state.schema.nodes["paragraph"].createChecked()
-                  )
-                  .setSelection(
-                    new TextSelection(
-                      tr.doc.resolve(view.state.tr.selection.$to.after() + 1)
+                return true;
+              }
+              // Checks if key press is Enter
+              if (
+                event.key === "Enter" &&
+                !event.shiftKey &&
+                !event.altKey &&
+                !event.ctrlKey &&
+                !event.metaKey
+              ) {
+                const tr = view.state.tr;
+                view.dispatch(
+                  tr
+                    .insert(
+                      view.state.tr.selection.$to.after(),
+                      view.state.schema.nodes["paragraph"].createChecked(),
                     )
-                  )
-              );
+                    .setSelection(
+                      new TextSelection(
+                        tr.doc.resolve(view.state.tr.selection.$to.after() + 1),
+                      ),
+                    ),
+                );
 
-              return true;
+                return true;
+              }
             }
-          }
 
-          return false;
+            return false;
+          },
         },
-      },
-    });
+      }),
+    );
   }
 }

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -2,139 +2,142 @@ import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { v4 } from "uuid";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
 
-export class PlaceholderPlugin {
-  public readonly plugin: Plugin;
+export class PlaceholderPlugin extends BlockNoteExtension {
   constructor(
     editor: BlockNoteEditor<any, any, any>,
     placeholders: Record<
       string | "default" | "emptyDocument",
       string | undefined
-    >
+    >,
   ) {
-    this.plugin = new Plugin({
-      key: PLUGIN_KEY,
-      view: (view) => {
-        const uniqueEditorSelector = `placeholder-selector-${v4()}`;
-        view.dom.classList.add(uniqueEditorSelector);
-        const styleEl = document.createElement("style");
-
-        const nonce = editor._tiptapEditor.options.injectNonce;
-        if (nonce) {
-          styleEl.setAttribute("nonce", nonce);
-        }
-
-        if (editor.prosemirrorView?.root instanceof ShadowRoot) {
-          editor.prosemirrorView.root.append(styleEl);
-        } else {
-          editor.prosemirrorView?.root.head.appendChild(styleEl);
-        }
-
-        const styleSheet = styleEl.sheet!;
-
-        const getSelector = (additionalSelectors = "") =>
-          `.${uniqueEditorSelector} .bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
-
-        try {
-          // FIXME: the names "default" and "emptyDocument" are hardcoded
-          const {
-            default: defaultPlaceholder,
-            emptyDocument: emptyPlaceholder,
-            ...rest
-          } = placeholders;
-
-          // add block specific placeholders
-          for (const [blockType, placeholder] of Object.entries(rest)) {
-            const blockTypeSelector = `[data-content-type="${blockType}"]`;
+    super();
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: PLUGIN_KEY,
+        view: (view) => {
+          const uniqueEditorSelector = `placeholder-selector-${v4()}`;
+          view.dom.classList.add(uniqueEditorSelector);
+          const styleEl = document.createElement("style");
+
+          const nonce = editor._tiptapEditor.options.injectNonce;
+          if (nonce) {
+            styleEl.setAttribute("nonce", nonce);
+          }
+
+          if (editor.prosemirrorView?.root instanceof ShadowRoot) {
+            editor.prosemirrorView.root.append(styleEl);
+          } else {
+            editor.prosemirrorView?.root.head.appendChild(styleEl);
+          }
+
+          const styleSheet = styleEl.sheet!;
 
+          const getSelector = (additionalSelectors = "") =>
+            `.${uniqueEditorSelector} .bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
+
+          try {
+            // FIXME: the names "default" and "emptyDocument" are hardcoded
+            const {
+              default: defaultPlaceholder,
+              emptyDocument: emptyPlaceholder,
+              ...rest
+            } = placeholders;
+
+            // add block specific placeholders
+            for (const [blockType, placeholder] of Object.entries(rest)) {
+              const blockTypeSelector = `[data-content-type="${blockType}"]`;
+
+              styleSheet.insertRule(
+                `${getSelector(blockTypeSelector)} { content: ${JSON.stringify(
+                  placeholder,
+                )}; }`,
+              );
+            }
+
+            const onlyBlockSelector = `[data-is-only-empty-block]`;
+            const mustBeFocusedSelector = `[data-is-empty-and-focused]`;
+
+            // placeholder for when there's only one empty block
             styleSheet.insertRule(
-              `${getSelector(blockTypeSelector)} { content: ${JSON.stringify(
-                placeholder
-              )}; }`
+              `${getSelector(onlyBlockSelector)} { content: ${JSON.stringify(
+                emptyPlaceholder,
+              )}; }`,
+            );
+
+            // placeholder for default blocks, only when the cursor is in the block (mustBeFocused)
+            styleSheet.insertRule(
+              `${getSelector(mustBeFocusedSelector)} { content: ${JSON.stringify(
+                defaultPlaceholder,
+              )}; }`,
+            );
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`,
+              e,
             );
           }
 
-          const onlyBlockSelector = `[data-is-only-empty-block]`;
-          const mustBeFocusedSelector = `[data-is-empty-and-focused]`;
-
-          // placeholder for when there's only one empty block
-          styleSheet.insertRule(
-            `${getSelector(onlyBlockSelector)} { content: ${JSON.stringify(
-              emptyPlaceholder
-            )}; }`
-          );
-
-          // placeholder for default blocks, only when the cursor is in the block (mustBeFocused)
-          styleSheet.insertRule(
-            `${getSelector(mustBeFocusedSelector)} { content: ${JSON.stringify(
-              defaultPlaceholder
-            )}; }`
-          );
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.warn(
-            `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`,
-            e
-          );
-        }
-
-        return {
-          destroy: () => {
-            if (editor.prosemirrorView?.root instanceof ShadowRoot) {
-              editor.prosemirrorView.root.removeChild(styleEl);
-            } else {
-              editor.prosemirrorView?.root.head.removeChild(styleEl);
+          return {
+            destroy: () => {
+              if (editor.prosemirrorView?.root instanceof ShadowRoot) {
+                editor.prosemirrorView.root.removeChild(styleEl);
+              } else {
+                editor.prosemirrorView?.root.head.removeChild(styleEl);
+              }
+            },
+          };
+        },
+        props: {
+          decorations: (state) => {
+            const { doc, selection } = state;
+
+            if (!editor.isEditable) {
+              return;
             }
-          },
-        };
-      },
-      props: {
-        decorations: (state) => {
-          const { doc, selection } = state;
-
-          if (!editor.isEditable) {
-            return;
-          }
 
-          if (!selection.empty) {
-            return;
-          }
+            if (!selection.empty) {
+              return;
+            }
 
-          // Don't show placeholder when the cursor is inside a code block
-          if (selection.$from.parent.type.spec.code) {
-            return;
-          }
+            // Don't show placeholder when the cursor is inside a code block
+            if (selection.$from.parent.type.spec.code) {
+              return;
+            }
 
-          const decs = [];
+            const decs = [];
 
-          // decoration for when there's only one empty block
-          // positions are hardcoded for now
-          if (state.doc.content.size === 6) {
-            decs.push(
-              Decoration.node(2, 4, {
-                "data-is-only-empty-block": "true",
-              })
-            );
-          }
+            // decoration for when there's only one empty block
+            // positions are hardcoded for now
+            if (state.doc.content.size === 6) {
+              decs.push(
+                Decoration.node(2, 4, {
+                  "data-is-only-empty-block": "true",
+                }),
+              );
+            }
 
-          const $pos = selection.$anchor;
-          const node = $pos.parent;
+            const $pos = selection.$anchor;
+            const node = $pos.parent;
 
-          if (node.content.size === 0) {
-            const before = $pos.before();
+            if (node.content.size === 0) {
+              const before = $pos.before();
 
-            decs.push(
-              Decoration.node(before, before + node.nodeSize, {
-                "data-is-empty-and-focused": "true",
-              })
-            );
-          }
+              decs.push(
+                Decoration.node(before, before + node.nodeSize, {
+                  "data-is-empty-and-focused": "true",
+                }),
+              );
+            }
 
-          return DecorationSet.create(doc, decs);
+            return DecorationSet.create(doc, decs);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 }