@blocknote/core 0.17.1 → 0.18.0

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -1,8 +1,9 @@
 import { Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 import { nodeToBlock } from "../../api/nodeConversions/nodeToBlock.js";
+import { getNodeById } from "../../api/nodeUtil.js";
 import { checkBlockIsDefaultType } from "../../blocks/defaultBlockTypeGuards.js";
-import { Block, DefaultBlockSchema } from "../../blocks/defaultBlocks.js";
+import { DefaultBlockSchema } from "../../blocks/defaultBlocks.js";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import {
   BlockFromConfigNoChildren,
@@ -20,12 +21,14 @@ export type TableHandlesState<
   S extends StyleSchema
 > = {
   show: boolean;
-  referencePosCell: DOMRect;
+  showAddOrRemoveRowsButton: boolean;
+  showAddOrRemoveColumnsButton: boolean;
+  referencePosCell: DOMRect | undefined;
   referencePosTable: DOMRect;
 
   block: BlockFromConfigNoChildren<DefaultBlockSchema["table"], I, S>;
-  colIndex: number;
-  rowIndex: number;
+  colIndex: number | undefined;
+  rowIndex: number | undefined;
 
   draggingState:
     | {
@@ -34,6 +37,8 @@ export type TableHandlesState<
         mousePos: number;
       }
     | undefined;
+
+  widgetContainer: HTMLElement | undefined;
 };
 
 function setHiddenDragImage(rootEl: Document | ShadowRoot) {
@@ -70,28 +75,45 @@ function getChildIndex(node: Element) {
 
 // Finds the DOM element corresponding to the table cell that the target element
 // is currently in. If the target element is not in a table cell, returns null.
-function domCellAround(target: Element | null): Element | null {
-  while (target && target.nodeName !== "TD" && target.nodeName !== "TH") {
-    target =
-      target.classList && target.classList.contains("ProseMirror")
-        ? null
-        : (target.parentNode as Element);
+function domCellAround(target: Element) {
+  let currentTarget: Element | undefined = target;
+  while (
+    currentTarget &&
+    currentTarget.nodeName !== "TD" &&
+    currentTarget.nodeName !== "TH" &&
+    !currentTarget.classList.contains("tableWrapper")
+  ) {
+    if (currentTarget.classList.contains("ProseMirror")) {
+      return undefined;
+    }
+    const parent: ParentNode | null = currentTarget.parentNode;
+
+    if (!parent || !(parent instanceof Element)) {
+      return undefined;
+    }
+    currentTarget = parent;
   }
-  return target;
+
+  return currentTarget.nodeName === "TD" || currentTarget.nodeName === "TH"
+    ? {
+        type: "cell",
+        domNode: currentTarget,
+        tbodyNode: currentTarget.closest("tbody"),
+      }
+    : {
+        type: "wrapper",
+        domNode: currentTarget,
+        tbodyNode: currentTarget.querySelector("tbody"),
+      };
 }
 
 // Hides elements in the DOMwith the provided class names.
-function hideElementsWithClassNames(
-  classNames: string[],
-  rootEl: Document | ShadowRoot
-) {
-  classNames.forEach((className) => {
-    const elementsToHide = rootEl.querySelectorAll(className);
-
-    for (let i = 0; i < elementsToHide.length; i++) {
-      (elementsToHide[i] as HTMLElement).style.visibility = "hidden";
-    }
-  });
+function hideElements(selector: string, rootEl: Document | ShadowRoot) {
+  const elementsToHide = rootEl.querySelectorAll(selector);
+
+  for (let i = 0; i < elementsToHide.length; i++) {
+    (elementsToHide[i] as HTMLElement).style.visibility = "hidden";
+  }
 }
 
 export class TableHandlesView<
@@ -104,6 +126,7 @@ export class TableHandlesView<
 
   public tableId: string | undefined;
   public tablePos: number | undefined;
+  public tableElement: HTMLElement | undefined;
 
   public menuFrozen = false;
 
@@ -130,25 +153,20 @@ export class TableHandlesView<
 
     pmView.dom.addEventListener("mousemove", this.mouseMoveHandler);
     pmView.dom.addEventListener("mousedown", this.viewMousedownHandler);
-    pmView.dom.addEventListener("mouseup", this.viewMouseupHandler);
+    window.addEventListener("mouseup", this.mouseUpHandler);
 
     pmView.root.addEventListener(
       "dragover",
       this.dragOverHandler as EventListener
     );
     pmView.root.addEventListener("drop", this.dropHandler as EventListener);
-
-    // Setting capture=true ensures that any parent container of the editor that
-    // gets scrolled will trigger the scroll event. Scroll events do not bubble
-    // and so won't propagate to the document by default.
-    pmView.root.addEventListener("scroll", this.scrollHandler, true);
   }
 
   viewMousedownHandler = () => {
     this.mouseState = "down";
   };
 
-  viewMouseupHandler = (event: MouseEvent) => {
+  mouseUpHandler = (event: MouseEvent) => {
     this.mouseState = "up";
     this.mouseMoveHandler(event);
   };
@@ -158,100 +176,150 @@ export class TableHandlesView<
       return;
     }
 
-    if (this.mouseState === "down") {
+    if (this.mouseState === "selecting") {
+      return;
+    }
+
+    if (
+      !(event.target instanceof Element) ||
+      !this.pmView.dom.contains(event.target)
+    ) {
+      return;
+    }
+
+    const target = domCellAround(event.target);
+
+    if (
+      target?.type === "cell" &&
+      this.mouseState === "down" &&
+      !this.state?.draggingState
+    ) {
+      // hide draghandles when selecting text as they could be in the way of the user
       this.mouseState = "selecting";
 
       if (this.state?.show) {
         this.state.show = false;
+        this.state.showAddOrRemoveRowsButton = false;
+        this.state.showAddOrRemoveColumnsButton = false;
         this.emitUpdate();
       }
-    }
-
-    if (this.mouseState === "selecting") {
       return;
     }
 
-    const target = domCellAround(event.target as HTMLElement);
-
     if (!target || !this.editor.isEditable) {
       if (this.state?.show) {
         this.state.show = false;
+        this.state.showAddOrRemoveRowsButton = false;
+        this.state.showAddOrRemoveColumnsButton = false;
         this.emitUpdate();
       }
       return;
     }
 
-    const colIndex = getChildIndex(target);
-    const rowIndex = getChildIndex(target.parentElement!);
-    const cellRect = target.getBoundingClientRect();
-    const tableRect =
-      target.parentElement?.parentElement?.getBoundingClientRect();
-
-    if (!tableRect) {
+    if (!target.tbodyNode) {
       return;
     }
 
-    const blockEl = getDraggableBlockFromElement(target, this.pmView);
+    const tableRect = target.tbodyNode.getBoundingClientRect();
+
+    const blockEl = getDraggableBlockFromElement(target.domNode, this.pmView);
     if (!blockEl) {
       return;
     }
+    this.tableElement = blockEl.node;
 
-    let tableBlock: Block<any, any, any> | undefined = undefined;
-
-    // Copied from `getBlock`. We don't use `getBlock` since we also need the PM
-    // node for the table, so we would effectively be doing the same work twice.
-    this.editor._tiptapEditor.state.doc.descendants((node, pos) => {
-      if (typeof tableBlock !== "undefined") {
-        return false;
-      }
-
-      if (node.type.name !== "blockContainer" || node.attrs.id !== blockEl.id) {
-        return true;
-      }
+    let tableBlock:
+      | BlockFromConfigNoChildren<DefaultBlockSchema["table"], I, S>
+      | undefined;
 
-      const block = nodeToBlock(
-        node,
-        this.editor.schema.blockSchema,
-        this.editor.schema.inlineContentSchema,
-        this.editor.schema.styleSchema,
-        this.editor.blockCache
-      );
+    const pmNodeInfo = getNodeById(
+      blockEl.id,
+      this.editor._tiptapEditor.state.doc
+    );
 
-      if (checkBlockIsDefaultType("table", block, this.editor)) {
-        this.tablePos = pos + 1;
-        tableBlock = block;
-      }
+    const block = nodeToBlock(
+      pmNodeInfo.node,
+      this.editor.schema.blockSchema,
+      this.editor.schema.inlineContentSchema,
+      this.editor.schema.styleSchema,
+      this.editor.blockCache
+    );
 
-      return false;
-    });
+    if (checkBlockIsDefaultType("table", block, this.editor)) {
+      this.tablePos = pmNodeInfo.posBeforeNode + 1;
+      tableBlock = block;
+    }
 
     if (!tableBlock) {
       return;
     }
 
     this.tableId = blockEl.id;
+    const widgetContainer = target.domNode
+      .closest(".tableWrapper")
+      ?.querySelector(".table-widgets-container") as HTMLElement;
+
+    if (target?.type === "wrapper") {
+      // if we're just to the right or below the table, show the extend buttons
+      // (this is a bit hacky. It would probably be cleaner to render the extend buttons in the Table NodeView instead)
+      const belowTable =
+        event.clientY >= tableRect.bottom - 1 && // -1 to account for fractions of pixels in "bottom"
+        event.clientY < tableRect.bottom + 20;
+      const toRightOfTable =
+        event.clientX >= tableRect.right - 1 &&
+        event.clientX < tableRect.right + 20;
+
+      // without this check, we'd also hide draghandles when hovering over them
+      const hideHandles =
+        event.clientX > tableRect.right || event.clientY > tableRect.bottom;
+
+      this.state = {
+        ...this.state!,
+        show: true,
+        showAddOrRemoveRowsButton: belowTable,
+        showAddOrRemoveColumnsButton: toRightOfTable,
+        referencePosTable: tableRect,
+        block: tableBlock,
+        widgetContainer,
+        colIndex: hideHandles ? undefined : this.state!.colIndex,
+        rowIndex: hideHandles ? undefined : this.state!.rowIndex,
+        referencePosCell: hideHandles
+          ? undefined
+          : this.state!.referencePosCell,
+      };
+    } else {
+      const colIndex = getChildIndex(target.domNode);
+      const rowIndex = getChildIndex(target.domNode.parentElement!);
+      const cellRect = target.domNode.getBoundingClientRect();
+
+      if (
+        this.state !== undefined &&
+        this.state.show &&
+        this.tableId === blockEl.id &&
+        this.state.rowIndex === rowIndex &&
+        this.state.colIndex === colIndex
+      ) {
+        // no update needed
+        return;
+      }
 
-    if (
-      this.state !== undefined &&
-      this.state.show &&
-      this.tableId === blockEl.id &&
-      this.state.rowIndex === rowIndex &&
-      this.state.colIndex === colIndex
-    ) {
-      return;
+      this.state = {
+        show: true,
+        showAddOrRemoveColumnsButton:
+          colIndex === tableBlock.content.rows[0].cells.length - 1,
+        showAddOrRemoveRowsButton:
+          rowIndex === tableBlock.content.rows.length - 1,
+        referencePosTable: tableRect,
+
+        block: tableBlock,
+        draggingState: undefined,
+        referencePosCell: cellRect,
+        colIndex: colIndex,
+        rowIndex: rowIndex,
+
+        widgetContainer,
+      };
     }
-
-    this.state = {
-      show: true,
-      referencePosCell: cellRect,
-      referencePosTable: tableRect,
-
-      block: tableBlock,
-      colIndex: colIndex,
-      rowIndex: rowIndex,
-
-      draggingState: undefined,
-    };
     this.emitUpdate();
 
     return false;
@@ -265,12 +333,8 @@ export class TableHandlesView<
     event.preventDefault();
     event.dataTransfer!.dropEffect = "move";
 
-    hideElementsWithClassNames(
-      [
-        "column-resize-handle",
-        "prosemirror-dropcursor-block",
-        "prosemirror-dropcursor-inline",
-      ],
+    hideElements(
+      ".prosemirror-dropcursor-block, .prosemirror-dropcursor-inline",
       this.pmView.root
     );
 
@@ -358,25 +422,37 @@ export class TableHandlesView<
   };
 
   dropHandler = (event: DragEvent) => {
+    this.mouseState = "up";
     if (this.state === undefined || this.state.draggingState === undefined) {
       return;
     }
 
+    if (
+      this.state.rowIndex === undefined ||
+      this.state.colIndex === undefined
+    ) {
+      throw new Error(
+        "Attempted to drop table row or column, but no table block was hovered prior."
+      );
+    }
+
     event.preventDefault();
 
+    const { draggingState, colIndex, rowIndex } = this.state;
+
     const rows = this.state.block.content.rows;
 
-    if (this.state.draggingState.draggedCellOrientation === "row") {
-      const rowToMove = rows[this.state.draggingState.originalIndex];
-      rows.splice(this.state.draggingState.originalIndex, 1);
-      rows.splice(this.state.rowIndex, 0, rowToMove);
+    if (draggingState.draggedCellOrientation === "row") {
+      const rowToMove = rows[draggingState.originalIndex];
+      rows.splice(draggingState.originalIndex, 1);
+      rows.splice(rowIndex, 0, rowToMove);
     } else {
       const cellsToMove = rows.map(
-        (row) => row.cells[this.state!.draggingState!.originalIndex]
+        (row) => row.cells[draggingState.originalIndex]
       );
       rows.forEach((row, rowIndex) => {
-        row.cells.splice(this.state!.draggingState!.originalIndex, 1);
-        row.cells.splice(this.state!.colIndex, 0, cellsToMove[rowIndex]);
+        row.cells.splice(draggingState.originalIndex, 1);
+        row.cells.splice(colIndex, 0, cellsToMove[rowIndex]);
       });
     }
 
@@ -392,26 +468,45 @@ export class TableHandlesView<
     // the existing selection out of the block.
     this.editor.setTextCursorPosition(this.state.block.id);
   };
+  // Updates drag handle positions on table content updates.
+  update() {
+    if (!this.state || !this.state.show) {
+      return;
+    }
 
-  scrollHandler = () => {
-    if (this.state?.show) {
-      const tableElement = this.pmView.root.querySelector(
-        `[data-node-type="blockContainer"][data-id="${this.tableId}"] table`
-      )!;
-      const cellElement = tableElement.querySelector(
-        `tr:nth-child(${this.state.rowIndex + 1}) > td:nth-child(${
-          this.state.colIndex + 1
-        })`
-      )!;
-
-      this.state.referencePosTable = tableElement.getBoundingClientRect();
-      this.state.referencePosCell = cellElement.getBoundingClientRect();
-      this.emitUpdate();
+    const tableBody = this.tableElement!.querySelector("tbody");
+    if (!tableBody) {
+      return;
     }
-  };
+
+    if (
+      this.state.rowIndex !== undefined &&
+      this.state.colIndex !== undefined
+    ) {
+      // If rows or columns are deleted in the update, the hovered indices for
+      // those may now be out of bounds. If this is the case, they are moved to
+      // the new last row or column.
+      if (this.state.rowIndex >= tableBody.children.length) {
+        this.state.rowIndex = tableBody.children.length - 1;
+      }
+      if (this.state.colIndex >= tableBody.children[0].children.length) {
+        this.state.colIndex = tableBody.children[0].children.length - 1;
+      }
+
+      const row = tableBody.children[this.state.rowIndex];
+      const cell = row.children[this.state.colIndex];
+      this.state.referencePosCell = cell.getBoundingClientRect();
+    }
+
+    this.state.block = this.editor.getBlock(this.state.block.id)!;
+    this.state.referencePosTable = tableBody.getBoundingClientRect();
+    this.emitUpdate();
+  }
 
   destroy() {
     this.pmView.dom.removeEventListener("mousemove", this.mouseMoveHandler);
+    window.removeEventListener("mouseup", this.mouseUpHandler);
+    this.pmView.dom.removeEventListener("mousedown", this.viewMousedownHandler);
     this.pmView.root.removeEventListener(
       "dragover",
       this.dragOverHandler as EventListener
@@ -420,7 +515,6 @@ export class TableHandlesView<
       "drop",
       this.dropHandler as EventListener
     );
-    this.pmView.root.removeEventListener("scroll", this.scrollHandler, true);
   }
 }
 
@@ -467,6 +561,10 @@ export class TableHandlesProsemirrorPlugin<
               ? this.view.state.rowIndex
               : this.view.state.colIndex;
 
+          if (newIndex === undefined) {
+            return;
+          }
+
           const decorations: Decoration[] = [];
 
           if (newIndex === this.view.state.draggingState.originalIndex) {
@@ -547,6 +645,7 @@ export class TableHandlesProsemirrorPlugin<
                 (newIndex > this.view.state.draggingState.originalIndex
                   ? cellNode.nodeSize - 2
                   : 0);
+
               decorations.push(
                 // The widget is a small bar which spans the height of the cell.
                 Decoration.widget(decorationPos, () => {
@@ -592,7 +691,10 @@ export class TableHandlesProsemirrorPlugin<
     dataTransfer: DataTransfer | null;
     clientX: number;
   }) => {
-    if (this.view!.state === undefined) {
+    if (
+      this.view!.state === undefined ||
+      this.view!.state.colIndex === undefined
+    ) {
       throw new Error(
         "Attempted to drag table column, but no table block was hovered prior."
       );
@@ -628,7 +730,10 @@ export class TableHandlesProsemirrorPlugin<
     dataTransfer: DataTransfer | null;
     clientY: number;
   }) => {
-    if (this.view!.state === undefined) {
+    if (
+      this.view!.state === undefined ||
+      this.view!.state.rowIndex === undefined
+    ) {
       throw new Error(
         "Attempted to drag table row, but no table block was hovered prior."
       );

package/src/i18n/locales/ar.ts

@@ -52,6 +52,12 @@ export const ar: Dictionary = {
       aliases: ["ف", "فقرة"],
       group: "الكتل الأساسية",
     },
+    code_block: {
+      title: "كود",
+      subtext: "يستخدم لعرض الكود مع تحديد الصيغة",
+      aliases: ["كود", "مسبق"],
+      group: "الكتل الأساسية",
+    },
     table: {
       title: "جدول",
       subtext: "يستخدم للجداول",