refactor(extensions): rewrite to use new extension system

Author: nperez0111

docs/content/docs/features/extensions.mdx

@@ -14,7 +14,7 @@ BlockNote includes an extensions system which lets you expand the editor's behav
 
 ## Creating an extension
 
-An extension is an instance of the [`BlockNoteExtension`](https://github.com/TypeCellOS/BlockNote/blob/10cdbfb5f77ef82f3617c0fa1191e0bf5b7358c5/packages/core/src/editor/BlockNoteExtension.ts#L13) class. However, it's recommended for most use cases to create extensions using the `createBlockNoteExtension` function, rather than instanciating the class directly:
+An extension is an instance of the [`BlockNoteExtension`](https://github.com/TypeCellOS/BlockNote/blob/10cdbfb5f77ef82f3617c0fa1191e0bf5b7358c5/packages/core/src/editor/BlockNoteExtension.ts#L13) class. However, it's recommended for most use cases to create extensions using the `createExtension` function, rather than instanciating the class directly:
 
 ```typescript
 type BlockNoteExtensionOptions = {
@@ -43,10 +43,10 @@ const customBlockExtensionOptions: BlockNoteExtensionOptions = {
   tiptapExtensions: ...,
 }
 
-const CustomExtension = createBlockNoteExtension(customBlockExtensionOptions);
+const CustomExtension = createExtension(customBlockExtensionOptions);
 ```
 
-Let's go over the options that can be passed into `createBlockNoteExtension`:
+Let's go over the options that can be passed into `createExtension`:
 
 `key:` The name of the extension.
 
@@ -74,7 +74,7 @@ The `extensions` [editor option](/docs/reference/editor/overview#options) takes
 const editor = useCreateBlockNote({
   extensions: [
     // Add extensions here:
-    createBlockNoteExtension({ ... })
+    createExtension({ ... })
   ],
 });
 ```
@@ -95,7 +95,7 @@ const createCustomBlock = createReactBlockSpec(
   }
   [
     // Add extensions here:
-    createBlockNoteExtension({ ... })
+    createExtension({ ... })
   ],
 });
 ```

examples/03-ui-components/11-uppy-file-panel/src/FileReplaceButton.tsx

@@ -70,7 +70,7 @@ export const FileReplaceButton = () => {
         variant={"panel-popover"}
       >
         {/* Replaces default file panel with our Uppy one. */}
-        <UppyFilePanel block={block as any} />
+        <UppyFilePanel blockId={block.id} />
       </Components.Generic.Popover.Content>
     </Components.Generic.Popover.Root>
   );

examples/03-ui-components/11-uppy-file-panel/src/UppyFilePanel.tsx

@@ -43,7 +43,7 @@ const uppy = new Uppy()
   });
 
 export function UppyFilePanel(props: FilePanelProps) {
-  const { block } = props;
+  const { blockId } = props;
   const editor = useBlockNoteEditor();
 
   useEffect(() => {
@@ -68,7 +68,7 @@ export function UppyFilePanel(props: FilePanelProps) {
             url: response.uploadURL,
           },
         };
-        editor.updateBlock(block, updateData);
+        editor.updateBlock(blockId, updateData);
 
         // File should be removed from the Uppy instance after upload.
         uppy.removeFile(file.id);
@@ -78,7 +78,7 @@ export function UppyFilePanel(props: FilePanelProps) {
     return () => {
       uppy.off("upload-success", handler);
     };
-  }, [block, editor]);
+  }, [blockId, editor]);
 
   // set up dashboard as in https://uppy.io/examples/
   return <Dashboard uppy={uppy} width={400} height={500} />;

packages/core/package.json

@@ -80,7 +80,9 @@
   },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
+    "@handlewithcare/prosemirror-inputrules": "0.1.3",
     "@shikijs/types": "3.13.0",
+    "@tanstack/store": "0.7.7",
     "@tiptap/core": "^3.7.2",
     "@tiptap/extension-bold": "^3.7.2",
     "@tiptap/extension-code": "^3.7.2",

packages/core/src/blocks/Code/block.ts

@@ -1,5 +1,5 @@
 import type { HighlighterGeneric } from "@shikijs/types";
-import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createExtension } from "../../editor/BlockNoteExtension.js";
 import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
 import { lazyShikiPlugin } from "./shiki.js";
 import { DOMParser } from "@tiptap/pm/model";
@@ -169,11 +169,11 @@ export const createCodeBlockSpec = createBlockSpec(
   }),
   (options) => {
     return [
-      createBlockNoteExtension({
+      createExtension({
         key: "code-block-highlighter",
         plugins: [lazyShikiPlugin(options)],
       }),
-      createBlockNoteExtension({
+      createExtension({
         key: "code-block-keyboard-shortcuts",
         keyboardShortcuts: {
           Delete: ({ editor }) => {

packages/core/src/blocks/Divider/block.ts

@@ -1,4 +1,4 @@
-import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createExtension } from "../../editor/BlockNoteExtension.js";
 import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
 
 export type DividerBlockConfig = ReturnType<typeof createDividerBlockConfig>;
@@ -34,7 +34,7 @@ export const createDividerBlockSpec = createBlockSpec(
     },
   },
   [
-    createBlockNoteExtension({
+    createExtension({
       key: "divider-block-shortcuts",
       inputRules: [
         {

packages/core/src/blocks/Heading/block.ts

@@ -1,5 +1,5 @@
 import { createBlockConfig, createBlockSpec } from "../../schema/index.js";
-import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js";
+import { createExtension } from "../../editor/BlockNoteExtension.js";
 import {
   addDefaultPropsExternalHTML,
   defaultProps,
@@ -97,7 +97,7 @@ export const createHeadingBlockSpec = createBlockSpec(
     },
   }),
   ({ levels = HEADING_LEVELS }: HeadingOptions = {}) => [
-    createBlockNoteExtension({
+    createExtension({
       key: "heading-shortcuts",
       keyboardShortcuts: Object.fromEntries(
         levels.map((level) => [

packages/core/src/blocks/ListItem/BulletListItem/block.ts

@@ -1,5 +1,5 @@
 import { getBlockInfoFromSelection } from "../../../api/getBlockInfoFromPos.js";
-import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
+import { createExtension } from "../../../editor/BlockNoteExtension.js";
 import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
 import {
   addDefaultPropsExternalHTML,
@@ -78,7 +78,7 @@ export const createBulletListItemBlockSpec = createBlockSpec(
     },
   },
   [
-    createBlockNoteExtension({
+    createExtension({
       key: "bullet-list-item-shortcuts",
       keyboardShortcuts: {
         Enter: ({ editor }) => {

packages/core/src/blocks/ListItem/CheckListItem/block.ts

@@ -1,4 +1,4 @@
-import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
+import { createExtension } from "../../../editor/BlockNoteExtension.js";
 import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
 import {
   addDefaultPropsExternalHTML,
@@ -123,7 +123,7 @@ export const createCheckListItemBlockSpec = createBlockSpec(
     runsBefore: ["bulletListItem"],
   },
   [
-    createBlockNoteExtension({
+    createExtension({
       key: "check-list-item-shortcuts",
       keyboardShortcuts: {
         Enter: ({ editor }) => {

packages/core/src/blocks/ListItem/NumberedListItem/block.ts

@@ -1,5 +1,5 @@
 import { getBlockInfoFromSelection } from "../../../api/getBlockInfoFromPos.js";
-import { createBlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
+import { createExtension } from "../../../editor/BlockNoteExtension.js";
 import { createBlockConfig, createBlockSpec } from "../../../schema/index.js";
 import {
   addDefaultPropsExternalHTML,
@@ -91,7 +91,7 @@ export const createNumberedListItemBlockSpec = createBlockSpec(
     },
   },
   [
-    createBlockNoteExtension({
+    createExtension({
       key: "numbered-list-item-shortcuts",
       inputRules: [
         {