@blocknote/core 0.30.1 → 0.31.0

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -2,11 +2,11 @@ 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<
@@ -14,127 +14,130 @@ export class PlaceholderPlugin {
       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);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 }

package/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts

@@ -1,6 +1,7 @@
 import { findChildren } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 const PLUGIN_KEY = new PluginKey(`previous-blocks`);
 
@@ -23,199 +24,207 @@ const nodeAttributes: Record<string, string> = {
  *
  * Solution: When attributes change on a node, this plugin sets a data-* attribute with the "previous" value. This way we can still use CSS transitions. (See block.module.css)
  */
-export class PreviousBlockTypePlugin {
-  public readonly plugin: Plugin;
+export class PreviousBlockTypePlugin extends BlockNoteExtension {
   constructor() {
+    super();
     let timeout: ReturnType<typeof setTimeout>;
-    this.plugin = new Plugin({
-      key: PLUGIN_KEY,
-      view(_editorView) {
-        return {
-          update: async (view, _prevState) => {
-            if (this.key?.getState(view.state).updatedBlocks.size > 0) {
-              // use setTimeout 0 to clear the decorations so that at least
-              // for one DOM-render the decorations have been applied
-              timeout = setTimeout(() => {
-                view.dispatch(
-                  view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true }),
-                );
-              }, 0);
-            }
-          },
-          destroy: () => {
-            if (timeout) {
-              clearTimeout(timeout);
-            }
-          },
-        };
-      },
-      state: {
-        init() {
+    this.addProsemirrorPlugin(
+      new Plugin({
+        key: PLUGIN_KEY,
+        view(_editorView) {
           return {
-            // Block attributes, by block ID, from just before the previous transaction.
-            prevTransactionOldBlockAttrs: {} as any,
-            // Block attributes, by block ID, from just before the current transaction.
-            currentTransactionOldBlockAttrs: {} as any,
-            // Set of IDs of blocks whose attributes changed from the current transaction.
-            updatedBlocks: new Set<string>(),
+            update: async (view, _prevState) => {
+              if (this.key?.getState(view.state).updatedBlocks.size > 0) {
+                // use setTimeout 0 to clear the decorations so that at least
+                // for one DOM-render the decorations have been applied
+                timeout = setTimeout(() => {
+                  view.dispatch(
+                    view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true }),
+                  );
+                }, 0);
+              }
+            },
+            destroy: () => {
+              if (timeout) {
+                clearTimeout(timeout);
+              }
+            },
           };
         },
+        state: {
+          init() {
+            return {
+              // Block attributes, by block ID, from just before the previous transaction.
+              prevTransactionOldBlockAttrs: {} as any,
+              // Block attributes, by block ID, from just before the current transaction.
+              currentTransactionOldBlockAttrs: {} as any,
+              // Set of IDs of blocks whose attributes changed from the current transaction.
+              updatedBlocks: new Set<string>(),
+            };
+          },
 
-        apply(transaction, prev, oldState, newState) {
-          prev.currentTransactionOldBlockAttrs = {};
-          prev.updatedBlocks.clear();
+          apply(transaction, prev, oldState, newState) {
+            prev.currentTransactionOldBlockAttrs = {};
+            prev.updatedBlocks.clear();
 
-          if (!transaction.docChanged || oldState.doc.eq(newState.doc)) {
-            return prev;
-          }
-
-          // TODO: Instead of iterating through the entire document, only check nodes affected by the transactions. Will
-          //  also probably require checking nodes affected by the previous transaction too.
-          // We didn't get this to work yet:
-          // const transform = combineTransactionSteps(oldState.doc, [transaction]);
-          // // const { mapping } = transform;
-          // const changes = getChangedRanges(transform);
-          //
-          // changes.forEach(({ oldRange, newRange }) => {
-          // const oldNodes = findChildrenInRange(
-          //   oldState.doc,
-          //   oldRange,
-          //   (node) => node.attrs.id
-          // );
-          //
-          // const newNodes = findChildrenInRange(
-          //   newState.doc,
-          //   newRange,
-          //   (node) => node.attrs.id
-          // );
-
-          const currentTransactionOriginalOldBlockAttrs = {} as any;
-
-          const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
-          const oldNodesById = new Map(
-            oldNodes.map((node) => [node.node.attrs.id, node]),
-          );
-          const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
-
-          // Traverses all block containers in the new editor state.
-          for (const node of newNodes) {
-            const oldNode = oldNodesById.get(node.node.attrs.id);
-
-            const oldContentNode = oldNode?.node.firstChild;
-            const newContentNode = node.node.firstChild;
-
-            if (oldNode && oldContentNode && newContentNode) {
-              const newAttrs = {
-                index: newContentNode.attrs.index,
-                level: newContentNode.attrs.level,
-                type: newContentNode.type.name,
-                depth: newState.doc.resolve(node.pos).depth,
-              };
-
-              let oldAttrs = {
-                index: oldContentNode.attrs.index,
-                level: oldContentNode.attrs.level,
-                type: oldContentNode.type.name,
-                depth: oldState.doc.resolve(oldNode.pos).depth,
-              };
-
-              currentTransactionOriginalOldBlockAttrs[node.node.attrs.id] =
-                oldAttrs;
-
-              // Whenever a transaction is appended by the OrderedListItemIndexPlugin, it's given the metadata:
-              // { "orderedListIndexing": true }
-              // These appended transactions happen immediately after any transaction which causes ordered list item
-              // indices to require updating, including those which trigger animations. Therefore, these animations are
-              // immediately overridden when the PreviousBlockTypePlugin processes the appended transaction, despite only
-              // the listItemIndex attribute changing. To solve this, oldAttrs must be edited for transactions with the
-              // "orderedListIndexing" metadata, so the correct animation can be re-triggered.
-              if (transaction.getMeta("numberedListIndexing")) {
-                // If the block existed before the transaction, gets the attributes from before the previous transaction
-                // (i.e. the transaction that caused list item indices to need updating).
-                if (node.node.attrs.id in prev.prevTransactionOldBlockAttrs) {
-                  oldAttrs =
-                    prev.prevTransactionOldBlockAttrs[node.node.attrs.id];
-                }
+            if (!transaction.docChanged || oldState.doc.eq(newState.doc)) {
+              return prev;
+            }
 
-                // Stops list item indices themselves being animated (looks smoother), unless the block's content type is
-                // changing from a numbered list item to something else.
-                if (newAttrs.type === "numberedListItem") {
-                  oldAttrs.index = newAttrs.index;
+            // TODO: Instead of iterating through the entire document, only check nodes affected by the transactions. Will
+            //  also probably require checking nodes affected by the previous transaction too.
+            // We didn't get this to work yet:
+            // const transform = combineTransactionSteps(oldState.doc, [transaction]);
+            // // const { mapping } = transform;
+            // const changes = getChangedRanges(transform);
+            //
+            // changes.forEach(({ oldRange, newRange }) => {
+            // const oldNodes = findChildrenInRange(
+            //   oldState.doc,
+            //   oldRange,
+            //   (node) => node.attrs.id
+            // );
+            //
+            // const newNodes = findChildrenInRange(
+            //   newState.doc,
+            //   newRange,
+            //   (node) => node.attrs.id
+            // );
+
+            const currentTransactionOriginalOldBlockAttrs = {} as any;
+
+            const oldNodes = findChildren(
+              oldState.doc,
+              (node) => node.attrs.id,
+            );
+            const oldNodesById = new Map(
+              oldNodes.map((node) => [node.node.attrs.id, node]),
+            );
+            const newNodes = findChildren(
+              newState.doc,
+              (node) => node.attrs.id,
+            );
+
+            // Traverses all block containers in the new editor state.
+            for (const node of newNodes) {
+              const oldNode = oldNodesById.get(node.node.attrs.id);
+
+              const oldContentNode = oldNode?.node.firstChild;
+              const newContentNode = node.node.firstChild;
+
+              if (oldNode && oldContentNode && newContentNode) {
+                const newAttrs = {
+                  index: newContentNode.attrs.index,
+                  level: newContentNode.attrs.level,
+                  type: newContentNode.type.name,
+                  depth: newState.doc.resolve(node.pos).depth,
+                };
+
+                let oldAttrs = {
+                  index: oldContentNode.attrs.index,
+                  level: oldContentNode.attrs.level,
+                  type: oldContentNode.type.name,
+                  depth: oldState.doc.resolve(oldNode.pos).depth,
+                };
+
+                currentTransactionOriginalOldBlockAttrs[node.node.attrs.id] =
+                  oldAttrs;
+
+                // Whenever a transaction is appended by the OrderedListItemIndexPlugin, it's given the metadata:
+                // { "orderedListIndexing": true }
+                // These appended transactions happen immediately after any transaction which causes ordered list item
+                // indices to require updating, including those which trigger animations. Therefore, these animations are
+                // immediately overridden when the PreviousBlockTypePlugin processes the appended transaction, despite only
+                // the listItemIndex attribute changing. To solve this, oldAttrs must be edited for transactions with the
+                // "orderedListIndexing" metadata, so the correct animation can be re-triggered.
+                if (transaction.getMeta("numberedListIndexing")) {
+                  // If the block existed before the transaction, gets the attributes from before the previous transaction
+                  // (i.e. the transaction that caused list item indices to need updating).
+                  if (node.node.attrs.id in prev.prevTransactionOldBlockAttrs) {
+                    oldAttrs =
+                      prev.prevTransactionOldBlockAttrs[node.node.attrs.id];
+                  }
+
+                  // Stops list item indices themselves being animated (looks smoother), unless the block's content type is
+                  // changing from a numbered list item to something else.
+                  if (newAttrs.type === "numberedListItem") {
+                    oldAttrs.index = newAttrs.index;
+                  }
                 }
-              }
 
-              prev.currentTransactionOldBlockAttrs[node.node.attrs.id] =
-                oldAttrs;
-
-              // TODO: faster deep equal?
-              if (JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs)) {
-                (oldAttrs as any)["depth-change"] =
-                  oldAttrs.depth - newAttrs.depth;
-
-                // for debugging:
-                // console.log(
-                //   "id:",
-                //   node.node.attrs.id,
-                //   "previousBlockTypePlugin changes detected, oldAttrs",
-                //   oldAttrs,
-                //   "new",
-                //   newAttrs
-                // );
-
-                prev.updatedBlocks.add(node.node.attrs.id);
+                prev.currentTransactionOldBlockAttrs[node.node.attrs.id] =
+                  oldAttrs;
+
+                // TODO: faster deep equal?
+                if (JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs)) {
+                  (oldAttrs as any)["depth-change"] =
+                    oldAttrs.depth - newAttrs.depth;
+
+                  // for debugging:
+                  // console.log(
+                  //   "id:",
+                  //   node.node.attrs.id,
+                  //   "previousBlockTypePlugin changes detected, oldAttrs",
+                  //   oldAttrs,
+                  //   "new",
+                  //   newAttrs
+                  // );
+
+                  prev.updatedBlocks.add(node.node.attrs.id);
+                }
               }
             }
-          }
 
-          prev.prevTransactionOldBlockAttrs =
-            currentTransactionOriginalOldBlockAttrs;
+            prev.prevTransactionOldBlockAttrs =
+              currentTransactionOriginalOldBlockAttrs;
 
-          return prev;
+            return prev;
+          },
         },
-      },
-      props: {
-        decorations(state) {
-          const pluginState = (this as Plugin).getState(state);
-          if (pluginState.updatedBlocks.size === 0) {
-            return undefined;
-          }
-
-          const decorations: Decoration[] = [];
-
-          state.doc.descendants((node, pos) => {
-            if (!node.attrs.id) {
-              return;
+        props: {
+          decorations(state) {
+            const pluginState = (this as Plugin).getState(state);
+            if (pluginState.updatedBlocks.size === 0) {
+              return undefined;
             }
 
-            if (!pluginState.updatedBlocks.has(node.attrs.id)) {
-              return;
-            }
+            const decorations: Decoration[] = [];
 
-            const prevAttrs =
-              pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
-            const decorationAttrs: any = {};
+            state.doc.descendants((node, pos) => {
+              if (!node.attrs.id) {
+                return;
+              }
 
-            for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
-              decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
-                val || "none";
-            }
+              if (!pluginState.updatedBlocks.has(node.attrs.id)) {
+                return;
+              }
 
-            // for debugging:
-            // console.log(
-            //   "previousBlockTypePlugin committing decorations",
-            //   decorationAttrs
-            // );
+              const prevAttrs =
+                pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
+              const decorationAttrs: any = {};
 
-            const decoration = Decoration.node(pos, pos + node.nodeSize, {
-              ...decorationAttrs,
-            });
+              for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
+                decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
+                  val || "none";
+              }
+
+              // for debugging:
+              // console.log(
+              //   "previousBlockTypePlugin committing decorations",
+              //   decorationAttrs
+              // );
 
-            decorations.push(decoration);
-          });
+              const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                ...decorationAttrs,
+              });
 
-          return DecorationSet.create(state.doc, decorations);
+              decorations.push(decoration);
+            });
+
+            return DecorationSet.create(state.doc, decorations);
+          },
         },
-      },
-    });
+      }),
+    );
   }
 }