@blocknote/core 0.17.1 → 0.18.0

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -1,17 +1,22 @@
-import { mergeAttributes, Node } from "@tiptap/core";
+import { Node } from "@tiptap/core";
 import { TableCell } from "@tiptap/extension-table-cell";
 import { TableHeader } from "@tiptap/extension-table-header";
 import { TableRow } from "@tiptap/extension-table-row";
+import { Node as PMNode } from "prosemirror-model";
+import { TableView } from "prosemirror-tables";
+
 import {
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
 } from "../../schema/index.js";
+import { mergeCSSClasses } from "../../util/browser.js";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
 import { defaultProps } from "../defaultProps.js";
-import { TableExtension } from "./TableExtension.js";
+import { EMPTY_CELL_WIDTH, TableExtension } from "./TableExtension.js";
 
 export const tablePropSchema = {
-  ...defaultProps,
+  backgroundColor: defaultProps.backgroundColor,
+  textColor: defaultProps.textColor,
 };
 
 export const TableBlockContent = createStronglyTypedTiptapNode({
@@ -37,6 +42,69 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
       this.options.domAttributes?.inlineContent || {}
     );
   },
+
+  // This node view is needed for the `columnResizing` plugin. By default, the
+  // plugin adds its own node view, which overrides how the node is rendered vs
+  // `renderHTML`. This means that the wrapping `blockContent` HTML element is
+  // no longer rendered. The `columnResizing` plugin uses the `TableView` as its
+  // default node view. `BlockNoteTableView` extends it by wrapping it in a
+  // `blockContent` element, so the DOM structure is consistent with other block
+  // types.
+  addNodeView() {
+    return ({ node, HTMLAttributes }) => {
+      class BlockNoteTableView extends TableView {
+        constructor(
+          public node: PMNode,
+          public cellMinWidth: number,
+          public blockContentHTMLAttributes: Record<string, string>
+        ) {
+          super(node, cellMinWidth);
+
+          const blockContent = document.createElement("div");
+          blockContent.className = mergeCSSClasses(
+            "bn-block-content",
+            blockContentHTMLAttributes.class
+          );
+          blockContent.setAttribute("data-content-type", "table");
+          for (const [attribute, value] of Object.entries(
+            blockContentHTMLAttributes
+          )) {
+            if (attribute !== "class") {
+              blockContent.setAttribute(attribute, value);
+            }
+          }
+
+          const tableWrapper = this.dom;
+
+          const tableWrapperInner = document.createElement("div");
+          tableWrapperInner.className = "tableWrapper-inner";
+          tableWrapperInner.appendChild(tableWrapper.firstChild!);
+
+          tableWrapper.appendChild(tableWrapperInner);
+
+          blockContent.appendChild(tableWrapper);
+          const floatingContainer = document.createElement("div");
+          floatingContainer.className = "table-widgets-container";
+          floatingContainer.style.position = "relative";
+          tableWrapper.appendChild(floatingContainer);
+
+          this.dom = blockContent;
+        }
+
+        ignoreMutation(record: MutationRecord): boolean {
+          return (
+            !(record.target as HTMLElement).closest(".tableWrapper-inner") ||
+            super.ignoreMutation(record)
+          );
+        }
+      }
+
+      return new BlockNoteTableView(node, EMPTY_CELL_WIDTH, {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      });
+    };
+  },
 });
 
 const TableParagraph = Node.create({
@@ -46,6 +114,17 @@ const TableParagraph = Node.create({
 
   parseHTML() {
     return [
+      {
+        preserveWhitespace: "full",
+        // set this rule as high priority so it takes precedence over the default paragraph rule,
+        // but only if we're in the tableContent context
+        priority: 210,
+        context: "tableContent",
+        tag: "p",
+        getAttrs: (_element) => {
+          return {};
+        },
+      },
       {
         tag: "p",
         getAttrs: (element) => {
@@ -70,11 +149,7 @@ const TableParagraph = Node.create({
   },
 
   renderHTML({ HTMLAttributes }) {
-    return [
-      "p",
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
+    return ["p", HTMLAttributes, 0];
   },
 });
 

package/src/blocks/TableBlockContent/TableExtension.ts

@@ -1,13 +1,22 @@
 import { callOrReturn, Extension, getExtensionField } from "@tiptap/core";
 import { columnResizing, tableEditing } from "prosemirror-tables";
 
+export const RESIZE_MIN_WIDTH = 35;
+export const EMPTY_CELL_WIDTH = 120;
+export const EMPTY_CELL_HEIGHT = 31;
+
 export const TableExtension = Extension.create({
   name: "BlockNoteTableExtension",
 
   addProseMirrorPlugins: () => {
     return [
       columnResizing({
-        cellMinWidth: 100,
+        cellMinWidth: RESIZE_MIN_WIDTH,
+        defaultCellMinWidth: EMPTY_CELL_WIDTH,
+        // We set this to null as we implement our own node view in the table
+        // block content. This node view is the same as what's used by default,
+        // but is wrapped in a `blockContent` HTML element.
+        View: null,
       }),
       tableEditing(),
     ];

package/src/blocks/defaultBlocks.ts

@@ -21,6 +21,7 @@ import {
 } from "../schema/index.js";
 
 import { AudioBlock } from "./AudioBlockContent/AudioBlockContent.js";
+import { CodeBlock } from "./CodeBlockContent/CodeBlockContent.js";
 import { FileBlock } from "./FileBlockContent/FileBlockContent.js";
 import { Heading } from "./HeadingBlockContent/HeadingBlockContent.js";
 import { ImageBlock } from "./ImageBlockContent/ImageBlockContent.js";
@@ -31,9 +32,12 @@ import { Paragraph } from "./ParagraphBlockContent/ParagraphBlockContent.js";
 import { Table } from "./TableBlockContent/TableBlockContent.js";
 import { VideoBlock } from "./VideoBlockContent/VideoBlockContent.js";
 
+export { customizeCodeBlock } from "./CodeBlockContent/CodeBlockContent.js";
+
 export const defaultBlockSpecs = {
   paragraph: Paragraph,
   heading: Heading,
+  codeBlock: CodeBlock,
   bulletListItem: BulletListItem,
   numberedListItem: NumberedListItem,
   checkListItem: CheckListItem,

package/src/editor/Block.css

@@ -196,7 +196,8 @@ NESTED BLOCKS
   cursor: pointer;
 }
 
-.bn-block-content[data-content-type="checkListItem"][data-checked="true"] .bn-inline-content {
+.bn-block-content[data-content-type="checkListItem"][data-checked="true"]
+  .bn-inline-content {
   text-decoration: line-through;
 }
 
@@ -259,6 +260,51 @@ NESTED BLOCKS
   content: "▪";
 }
 
+/* CODE BLOCKS */
+.bn-block-content[data-content-type="codeBlock"] {
+  position: relative;
+
+  background-color: rgb(22 22 22);
+  color: white;
+  border-radius: 8px;
+}
+.bn-block-content[data-content-type="codeBlock"] > pre {
+  white-space: pre;
+  overflow-x: auto;
+  margin: 0;
+  width: 100%;
+  tab-size: 2;
+
+  padding: 24px;
+}
+.bn-block-content[data-content-type="codeBlock"] > div {
+  outline: none !important;
+}
+.bn-block-content[data-content-type="codeBlock"] > div > select {
+  outline: none !important;
+  appearance: none;
+  user-select: none;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+
+  position: absolute;
+  top: 8px;
+  left: 18px;
+
+  font-size: 0.8em;
+  color: white;
+
+  opacity: 0;
+  transition: opacity 0.3s;
+  transition-delay: 1s;
+}
+.bn-block-content[data-content-type="codeBlock"]:hover > div > select,
+.bn-block-content[data-content-type="codeBlock"] > div > select:focus {
+  opacity: 0.5;
+  transition-delay: 0.1s;
+}
+
 /* FILES */
 
 /* Add block button & default preview */
@@ -349,7 +395,8 @@ NESTED BLOCKS
   cursor: ew-resize;
 }
 
-[data-content-type="audio"] > .bn-file-block-content-wrapper, .bn-audio {
+[data-content-type="audio"] > .bn-file-block-content-wrapper,
+.bn-audio {
   width: 100%;
 }
 

package/src/editor/editor.css

@@ -104,22 +104,50 @@ Tippy popups that are appended to document.body directly
   white-space: nowrap;
 }
 
+/* .tableWrapper {
+  padding
+} */
+
+.ProseMirror .tableWrapper {
+  position: relative;
+  top: -16px;
+  left: -16px;
+  /* padding: 16px; */
+  min-width: calc(100% + 16px);
+  padding-bottom: 16px;
+  overflow-y: hidden;
+}
+
+.ProseMirror .tableWrapper-inner {
+  /* position: relative; */
+  /* top: -16px;
+  left: -16px; */
+  padding: 16px;
+}
+
 /* table related: */
 .bn-editor table {
   width: auto !important;
+  word-break: break-word;
 }
 .bn-editor th,
 .bn-editor td {
-  min-width: 1em;
   border: 1px solid #ddd;
   padding: 3px 5px;
 }
 
-.bn-editor .tableWrapper {
-  margin: 1em 0;
-}
-
 .bn-editor th {
   font-weight: bold;
   text-align: left;
 }
+
+/* tiptap uses colwidth instead of data-colwidth, se we need to adjust this style from prosemirror-tables */
+.ProseMirror td,
+.ProseMirror th {
+  min-width: auto !important;
+}
+.ProseMirror td:not([colwidth]):not(.column-resize-dragging),
+.ProseMirror th:not([colwidth]):not(.column-resize-dragging) {
+  /* if there's no explicit width set and the column is not being resized, set a default width */
+  min-width: var(--default-cell-min-width) !important;
+}

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -35,6 +35,14 @@ export class FormattingToolbarView implements PluginView {
     const isEmptyTextBlock =
       !doc.textBetween(from, to).length && isTextSelection(state.selection);
 
+    // Don't show toolbar inside code blocks
+    if (
+      selection.$from.parent.type.spec.code ||
+      (isNodeSelection(selection) && selection.node.type.spec.code)
+    ) {
+      return false;
+    }
+
     // check view.hasFocus so that the toolbar doesn't show up when the editor is not focused or when for example a code block is focused
     return !(!view.hasFocus() || empty || isEmptyTextBlock);
   };

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -88,6 +88,11 @@ export const PlaceholderPlugin = (
           return;
         }
 
+        // Don't show placeholder when the cursor is inside a code block
+        if (selection.$from.parent.type.spec.code) {
+          return;
+        }
+
         const $pos = selection.$anchor;
         const node = $pos.parent;
 

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -202,6 +202,11 @@ export class SuggestionMenuProseMirrorPlugin<
             return prev;
           }
 
+          // Ignore transactions in code blocks.
+          if (transaction.selection.$from.parent.type.spec.code) {
+            return prev;
+          }
+
           // Either contains the trigger character if the menu should be shown,
           // or null if it should be hidden.
           const suggestionPluginTransactionMeta: {

package/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts

@@ -32,7 +32,8 @@ export async function getDefaultEmojiPickerItems<
   if (!data) {
     // use a dynamic import to encourage bundle-splitting
     // and a smaller initial client bundle size
-    data = import("@emoji-mart/data", { assert: { type: "json" } }) as any;
+
+    data = import("@emoji-mart/data") as any;
 
     // load dynamically because emoji-mart doesn't specify type: module and breaks in nodejs
     emojiMart = await import("emoji-mart");

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -175,6 +175,24 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("codeBlock", editor)) {
+    items.push({
+      onItemClick: () => {
+        const pos = editor._tiptapEditor.state.selection.from;
+
+        insertOrUpdateBlock(editor, {
+          type: "codeBlock",
+        });
+
+        // Move the cursor inside the code block
+        editor._tiptapEditor.commands.setTextSelection(pos);
+      },
+      badge: formatKeyboardShortcut("Mod-Alt-c"),
+      key: "code_block",
+      ...editor.dictionary.slash_menu.code_block,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("table", editor)) {
     items.push({
       onItemClick: () => {