@blocknote/core 0.18.0 → 0.19.1

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -4,110 +4,114 @@ import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 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");
-      const nonce = editor._tiptapEditor.options.injectNonce;
-      if (nonce) {
-        styleEl.setAttribute("nonce", nonce);
-      }
-      if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
-        editor._tiptapEditor.view.root.append(styleEl);
-      } else {
-        editor._tiptapEditor.view.root.head.appendChild(styleEl);
-      }
-
-      const styleSheet = styleEl.sheet!;
-
-      const getBaseSelector = (additionalSelectors = "") =>
-        `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
-
-      const getSelector = (
-        blockType: string | "default",
-        mustBeFocused = true
-      ) => {
-        const mustBeFocusedSelector = mustBeFocused
-          ? `[data-is-empty-and-focused]`
-          : ``;
-
-        if (blockType === "default") {
-          return getBaseSelector(mustBeFocusedSelector);
+export class PlaceholderPlugin {
+  public readonly plugin: Plugin;
+  constructor(
+    editor: BlockNoteEditor<any, any, any>,
+    placeholders: Record<string | "default", string>
+  ) {
+    this.plugin = new Plugin({
+      key: PLUGIN_KEY,
+      view: () => {
+        const styleEl = document.createElement("style");
+        const nonce = editor._tiptapEditor.options.injectNonce;
+        if (nonce) {
+          styleEl.setAttribute("nonce", nonce);
         }
+        if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
+          editor._tiptapEditor.view.root.append(styleEl);
+        } else {
+          editor._tiptapEditor.view.root.head.appendChild(styleEl);
+        }
+
+        const styleSheet = styleEl.sheet!;
+
+        const getBaseSelector = (additionalSelectors = "") =>
+          `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
 
-        const blockTypeSelector = `[data-content-type="${blockType}"]`;
-        return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
-      };
+        const getSelector = (
+          blockType: string | "default",
+          mustBeFocused = true
+        ) => {
+          const mustBeFocusedSelector = mustBeFocused
+            ? `[data-is-empty-and-focused]`
+            : ``;
+
+          if (blockType === "default") {
+            return getBaseSelector(mustBeFocusedSelector);
+          }
 
-      for (const [blockType, placeholder] of Object.entries(placeholders)) {
-        const mustBeFocused = blockType === "default";
+          const blockTypeSelector = `[data-content-type="${blockType}"]`;
+          return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
+        };
 
-        styleSheet.insertRule(
-          `${getSelector(blockType, mustBeFocused)}{ content: ${JSON.stringify(
-            placeholder
-          )}; }`
-        );
+        for (const [blockType, placeholder] of Object.entries(placeholders)) {
+          const mustBeFocused = blockType === "default";
 
-        // 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
-            )}; }`
+            `${getSelector(
+              blockType,
+              mustBeFocused
+            )}{ content: ${JSON.stringify(placeholder)}; }`
           );
-        }
-      }
-
-      return {
-        destroy: () => {
-          if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
-            editor._tiptapEditor.view.root.removeChild(styleEl);
-          } else {
-            editor._tiptapEditor.view.root.head.removeChild(styleEl);
+
+          // 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
+              )}; }`
+            );
           }
-        },
-      };
-    },
-    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;
-        }
+        return {
+          destroy: () => {
+            if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
+              editor._tiptapEditor.view.root.removeChild(styleEl);
+            } else {
+              editor._tiptapEditor.view.root.head.removeChild(styleEl);
+            }
+          },
+        };
+      },
+      props: {
+        // TODO: maybe also add placeholder for empty document ("e.g.: start writing..")
+        decorations: (state) => {
+          const { doc, selection } = state;
 
-        // Don't show placeholder when the cursor is inside a code block
-        if (selection.$from.parent.type.spec.code) {
-          return;
-        }
+          if (!editor.isEditable) {
+            return;
+          }
 
-        const $pos = selection.$anchor;
-        const node = $pos.parent;
+          if (!selection.empty) {
+            return;
+          }
 
-        if (node.content.size > 0) {
-          return null;
-        }
+          // Don't show placeholder when the cursor is inside a code block
+          if (selection.$from.parent.type.spec.code) {
+            return;
+          }
 
-        const before = $pos.before();
+          const $pos = selection.$anchor;
+          const node = $pos.parent;
 
-        const dec = Decoration.node(before, before + node.nodeSize, {
-          "data-is-empty-and-focused": "true",
-        });
+          if (node.content.size > 0) {
+            return null;
+          }
+
+          const before = $pos.before();
 
-        return DecorationSet.create(doc, [dec]);
+          const dec = Decoration.node(before, before + node.nodeSize, {
+            "data-is-empty-and-focused": "true",
+          });
+
+          return DecorationSet.create(doc, [dec]);
+        },
       },
-    },
-  });
-};
+    });
+  }
+}

package/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts

@@ -23,195 +23,199 @@ 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 const PreviousBlockTypePlugin = () => {
-  let timeout: any;
-  return 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() {
+export class PreviousBlockTypePlugin {
+  public readonly plugin: Plugin;
+  constructor() {
+    let timeout: ReturnType<typeof setTimeout>;
+    this.plugin = 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;
+          }
+
+          // 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;
+                }
               }
 
-              // 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;
+          prev.prevTransactionOldBlockAttrs =
+            currentTransactionOriginalOldBlockAttrs;
 
-            // TODO: faster deep equal?
-            if (JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs)) {
-              (oldAttrs as any)["depth-change"] =
-                oldAttrs.depth - newAttrs.depth;
+          return prev;
+        },
+      },
+      props: {
+        decorations(state) {
+          const pluginState = (this as Plugin).getState(state);
+          if (pluginState.updatedBlocks.size === 0) {
+            return undefined;
+          }
 
-              // for debugging:
-              // console.log(
-              //   "id:",
-              //   node.node.attrs.id,
-              //   "previousBlockTypePlugin changes detected, oldAttrs",
-              //   oldAttrs,
-              //   "new",
-              //   newAttrs
-              // );
+          const decorations: Decoration[] = [];
 
-              prev.updatedBlocks.add(node.node.attrs.id);
+          state.doc.descendants((node, pos) => {
+            if (!node.attrs.id) {
+              return;
             }
-          }
-        }
 
-        prev.prevTransactionOldBlockAttrs =
-          currentTransactionOriginalOldBlockAttrs;
+            if (!pluginState.updatedBlocks.has(node.attrs.id)) {
+              return;
+            }
 
-        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;
-          }
+            const prevAttrs =
+              pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
+            const decorationAttrs: any = {};
 
-          if (!pluginState.updatedBlocks.has(node.attrs.id)) {
-            return;
-          }
-
-          const prevAttrs =
-            pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
-          const decorationAttrs: any = {};
+            for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
+              decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
+                val || "none";
+            }
 
-          for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
-            decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
-              val || "none";
-          }
+            // for debugging:
+            // console.log(
+            //   "previousBlockTypePlugin committing decorations",
+            //   decorationAttrs
+            // );
 
-          // for debugging:
-          // console.log(
-          //   "previousBlockTypePlugin committing decorations",
-          //   decorationAttrs
-          // );
+            const decoration = Decoration.node(pos, pos + node.nodeSize, {
+              ...decorationAttrs,
+            });
 
-          const decoration = Decoration.node(pos, pos + node.nodeSize, {
-            ...decorationAttrs,
+            decorations.push(decoration);
           });
 
-          decorations.push(decoration);
-        });
-
-        return DecorationSet.create(state.doc, decorations);
+          return DecorationSet.create(state.doc, decorations);
+        },
       },
-    },
-  });
-};
+    });
+  }
+}