more lint rules

.eslintrc.js

@@ -1,7 +1,13 @@
 module.exports = {
   root: true,
-  extends: ["react-app", "react-app/jest"],
-  plugins: ["import"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "react-app",
+    "react-app/jest",
+  ],
+  parser: "@typescript-eslint/parser",
+  plugins: ["import", "@typescript-eslint"],
   rules: {
     curly: 1,
     "import/no-extraneous-dependencies": [
@@ -13,5 +19,8 @@ module.exports = {
         bundledDependencies: false,
       },
     ],
+    // would be nice to enable these rules later, but they are too noisy right now
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
   },
 };

examples/vanilla/src/ui/addHyperlinkToolbar.ts

@@ -12,8 +12,8 @@ export const addHyperlinkToolbar = (editor: BlockNoteEditor) => {
       element.style.padding = "10px";
       element.style.opacity = "0.8";
 
-      let url = hyperlinkToolbarState.url;
-      let text = hyperlinkToolbarState.text;
+      const url = hyperlinkToolbarState.url;
+      const text = hyperlinkToolbarState.text;
 
       const editBtn = createButton("edit", () => {
         const newUrl = prompt("new url") || url;

package.json

@@ -13,7 +13,9 @@
     "eslint-config-react-app": "^7.0.0",
     "lerna": "^5.4.0",
     "patch-package": "^6.4.7",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "@typescript-eslint/parser": "^5.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.5.0"
   },
   "scripts": {
     "start": "lerna run --stream --scope @blocknote/example-editor dev",

packages/core/src/BlockNoteEditor.ts

@@ -353,7 +353,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    */
   public forEachBlock(
     callback: (block: Block<BSchema>) => boolean,
-    reverse: boolean = false
+    reverse = false
   ): void {
     const blocks = this.topLevelBlocks.slice();
 
@@ -692,7 +692,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       return;
     }
 
-    let { from, to } = this._tiptapEditor.state.selection;
+    const { from, to } = this._tiptapEditor.state.selection;
 
     if (!text) {
       text = this._tiptapEditor.state.doc.textBetween(from, to);

packages/core/src/api/blockManipulation/blockManipulation.test.ts

@@ -24,7 +24,7 @@ let insert: (
 ) => Block<DefaultBlockSchema>[];
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
 
@@ -80,7 +80,7 @@ afterEach(() => {
   editor._tiptapEditor.destroy();
   editor = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Inserting Blocks with Different Placements", () => {

packages/core/src/api/blockManipulation/blockManipulation.ts

@@ -107,7 +107,7 @@ export function removeBlocks(
   });
 
   if (idsOfBlocksToRemove.size > 0) {
-    let notFoundIds = [...idsOfBlocksToRemove].join("\n");
+    const notFoundIds = [...idsOfBlocksToRemove].join("\n");
 
     throw Error(
       "Blocks with the following IDs could not be found in the editor: " +

packages/core/src/api/formatConversions/formatConversions.test.ts

@@ -579,7 +579,7 @@ function removeInlineContentClass(html: string) {
 }
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
 });
@@ -588,7 +588,7 @@ afterEach(() => {
   editor._tiptapEditor.destroy();
   editor = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Non-Nested Block/HTML/Markdown Conversions", () => {

packages/core/src/api/nodeConversions/nodeConversions.test.ts

@@ -1,19 +1,19 @@
 import { Editor } from "@tiptap/core";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { BlockNoteEditor, PartialBlock } from "../..";
-import UniqueID from "../../extensions/UniqueID/UniqueID";
-import { blockToNode, nodeToBlock } from "./nodeConversions";
-import { partialBlockToBlockForTesting } from "./testUtil";
 import {
-  defaultBlockSchema,
   DefaultBlockSchema,
+  defaultBlockSchema,
 } from "../../extensions/Blocks/api/defaultBlocks";
+import UniqueID from "../../extensions/UniqueID/UniqueID";
+import { blockToNode, nodeToBlock } from "./nodeConversions";
+import { partialBlockToBlockForTesting } from "./testUtil";
 
 let editor: BlockNoteEditor;
 let tt: Editor;
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
   tt = editor._tiptapEditor;
@@ -24,7 +24,7 @@ afterEach(() => {
   editor = undefined as any;
   tt = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Simple ProseMirror Node Conversions", () => {

packages/core/src/api/nodeConversions/nodeConversions.ts

@@ -91,7 +91,7 @@ function styledTextArrayToNodes(
   content: string | StyledText[],
   schema: Schema
 ): Node[] {
-  let nodes: Node[] = [];
+  const nodes: Node[] = [];
 
   if (typeof content === "string") {
     nodes.push(
@@ -113,7 +113,7 @@ export function inlineContentToNodes(
   blockContent: PartialInlineContent[],
   schema: Schema
 ): Node[] {
-  let nodes: Node[] = [];
+  const nodes: Node[] = [];
 
   for (const content of blockContent) {
     if (content.type === "link") {

packages/core/src/extensions/Blocks/PreviousBlockTypePlugin.ts

@@ -96,7 +96,7 @@ export const PreviousBlockTypePlugin = () => {
         const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
 
         // Traverses all block containers in the new editor state.
-        for (let node of newNodes) {
+        for (const node of newNodes) {
           const oldNode = oldNodesById.get(node.node.attrs.id);
 
           const oldContentNode = oldNode?.node.firstChild;
@@ -192,7 +192,7 @@ export const PreviousBlockTypePlugin = () => {
             pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
           const decorationAttrs: any = {};
 
-          for (let [nodeAttr, val] of Object.entries(prevAttrs)) {
+          for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
             decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
               val || "none";
           }

packages/core/src/extensions/Blocks/helpers/getBlockInfoFromPos.ts

@@ -56,6 +56,7 @@ export function getBlockInfoFromPos(doc: Node, pos: number): BlockInfo {
   let node = $pos.node(maxDepth);
   let depth = maxDepth;
 
+  // eslint-disable-next-line no-constant-condition
   while (true) {
     if (depth < 0) {
       throw new Error(

packages/core/src/extensions/Blocks/nodes/BlockContainer.ts

@@ -6,15 +6,15 @@ import {
   inlineContentToNodes,
 } from "../../../api/nodeConversions/nodeConversions";
 
-import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
-import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
-import styles from "./Block.module.css";
-import BlockAttributes from "./BlockAttributes";
 import {
   BlockNoteDOMAttributes,
   BlockSchema,
   PartialBlock,
 } from "../api/blockTypes";
+import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
+import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
+import styles from "./Block.module.css";
+import BlockAttributes from "./BlockAttributes";
 import { mergeCSSClasses } from "../../../shared/utils";
 
 declare module "@tiptap/core" {
@@ -60,7 +60,7 @@ export const BlockContainer = Node.create<{
           }
 
           const attrs: Record<string, string> = {};
-          for (let [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
+          for (const [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
             if (element.getAttribute(HTMLAttr)) {
               attrs[nodeAttr] = element.getAttribute(HTMLAttr)!;
             }

packages/core/src/extensions/SideMenu/MultipleNodeSelection.ts

@@ -1,5 +1,5 @@
-import { Selection } from "prosemirror-state";
 import { Fragment, Node, ResolvedPos, Slice } from "prosemirror-model";
+import { Selection } from "prosemirror-state";
 import { Mappable } from "prosemirror-transform";
 
 /**
@@ -64,8 +64,8 @@ export class MultipleNodeSelection extends Selection {
   }
 
   map(doc: Node, mapping: Mappable): Selection {
-    let fromResult = mapping.mapResult(this.from);
-    let toResult = mapping.mapResult(this.to);
+    const fromResult = mapping.mapResult(this.from);
+    const toResult = mapping.mapResult(this.to);
 
     if (toResult.deleted) {
       return Selection.near(doc.resolve(fromResult.pos));

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -32,7 +32,7 @@ function getDraggableBlockFromCoords(
     return undefined;
   }
 
-  let pos = view.posAtCoords(coords);
+  const pos = view.posAtCoords(coords);
   if (!pos) {
     return undefined;
   }
@@ -61,12 +61,12 @@ function blockPositionFromCoords(
   coords: { left: number; top: number },
   view: EditorView
 ) {
-  let block = getDraggableBlockFromCoords(coords, view);
+  const block = getDraggableBlockFromCoords(coords, view);
 
   if (block && block.node.nodeType === 1) {
     // TODO: this uses undocumented PM APIs? do we need this / let's add docs?
     const docView = (view as any).docView;
-    let desc = docView.nearestDesc(block.node, true);
+    const desc = docView.nearestDesc(block.node, true);
     if (!desc || desc === docView) {
       return null;
     }
@@ -186,12 +186,12 @@ function dragStart(
 
   const editorBoundingBox = view.dom.getBoundingClientRect();
 
-  let coords = {
+  const coords = {
     left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
     top: e.clientY,
   };
 
-  let pos = blockPositionFromCoords(coords, view);
+  const pos = blockPositionFromCoords(coords, view);
   if (pos != null) {
     const selection = view.state.selection;
     const doc = view.state.doc;
@@ -215,8 +215,8 @@ function dragStart(
       setDragImage(view, pos);
     }
 
-    let slice = view.state.selection.content();
-    let { dom, text } = serializeForClipboard(view, slice);
+    const slice = view.state.selection.content();
+    const { dom, text } = serializeForClipboard(view, slice);
 
     e.dataTransfer.clearData();
     e.dataTransfer.setData("text/html", dom.innerHTML);
@@ -288,7 +288,7 @@ export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
       return;
     }
 
-    let pos = this.pmView.posAtCoords({
+    const pos = this.pmView.posAtCoords({
       left: event.clientX,
       top: event.clientY,
     });
@@ -319,7 +319,7 @@ export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
     if ((event as any).synthetic || !this.isDragging) {
       return;
     }
-    let pos = this.pmView.posAtCoords({
+    const pos = this.pmView.posAtCoords({
       left: event.clientX,
       top: event.clientY,
     });

packages/core/src/extensions/UniqueID/UniqueID.ts

@@ -129,7 +129,7 @@ const UniqueID = Extension.create({
           const filterTransactions =
             this.options.filterTransaction &&
             transactions.some((tr) => {
-              var _a, _b;
+              let _a, _b;
               return !((_b = (_a = this.options).filterTransaction) === null ||
               _b === void 0
                 ? void 0
@@ -161,7 +161,7 @@ const UniqueID = Extension.create({
               .filter((id) => id !== null);
             const duplicatedNewIds = findDuplicates(newIds);
             newNodes.forEach(({ node, pos }) => {
-              var _a;
+              let _a;
               // instead of checking `node.attrs[attributeName]` directly
               // we look at the current state of the node within `tr.doc`.
               // this helps to prevent adding new ids to the same node
@@ -196,7 +196,7 @@ const UniqueID = Extension.create({
         // we register a global drag handler to track the current drag source element
         view(view) {
           const handleDragstart = (event: any) => {
-            var _a;
+            let _a;
             dragSourceElement = (
               (_a = view.dom.parentElement) === null || _a === void 0
                 ? void 0
@@ -219,7 +219,7 @@ const UniqueID = Extension.create({
             // only create new ids for dropped content while holding `alt`
             // or content is dragged from another editor
             drop: (view, event: any) => {
-              var _a;
+              let _a;
               if (
                 dragSourceElement !== view.dom.parentElement ||
                 ((_a = event.dataTransfer) === null || _a === void 0

packages/core/src/shared/EventEmitter.ts

@@ -11,6 +11,7 @@ type CallbackFunction<
 > = (...props: CallbackType<T, EventName>) => any;
 
 export class EventEmitter<T extends Record<string, any>> {
+  // eslint-disable-next-line @typescript-eslint/ban-types
   private callbacks: { [key: string]: Function[] } = {};
 
   public on<EventName extends StringKeyOf<T>>(

packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts

@@ -28,7 +28,9 @@ class SuggestionsMenuView<
     private readonly pluginKey: PluginKey,
     updateSuggestionsMenu: (
       suggestionsMenuState: SuggestionsMenuState<T>
-    ) => void = () => {}
+    ) => void = () => {
+      // noop
+    }
   ) {
     this.pluginState = getDefaultPluginState<T>();
 
@@ -158,7 +160,9 @@ export const setupSuggestionsMenu = <
   onSelectItem: (props: {
     item: T;
     editor: BlockNoteEditor<BSchema>;
-  }) => void = () => {}
+  }) => void = () => {
+    // noop
+  }
 ) => {
   // Assertions
   if (defaultTriggerCharacter.length !== 1) {