Merge branch 'main' into new-releases

Author: matthewlipski

packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -148,6 +148,15 @@ export const renderImage = (
   // offset from when the resize began, and which resize handle is being used.
   const windowMouseMoveHandler = (event: MouseEvent) => {
     if (!resizeParams) {
+      if (
+        !editor.isEditable &&
+        imageWrapper.contains(leftResizeHandle) &&
+        imageWrapper.contains(rightResizeHandle)
+      ) {
+        imageWrapper.removeChild(leftResizeHandle);
+        imageWrapper.removeChild(rightResizeHandle);
+      }
+
       return;
     }
 
@@ -192,20 +201,22 @@ export const renderImage = (
   // Stops mouse movements from resizing the image and updates the block's
   // `width` prop to the new value.
   const windowMouseUpHandler = (event: MouseEvent) => {
-    if (!resizeParams) {
-      return;
-    }
-
     // Hides the drag handles if the cursor is no longer over the image.
     if (
-      (!event.target || !imageWrapper.contains(event.target as Node)) &&
+      (!event.target ||
+        !imageWrapper.contains(event.target as Node) ||
+        !editor.isEditable) &&
       imageWrapper.contains(leftResizeHandle) &&
       imageWrapper.contains(rightResizeHandle)
     ) {
       imageWrapper.removeChild(leftResizeHandle);
       imageWrapper.removeChild(rightResizeHandle);
     }
 
+    if (!resizeParams) {
+      return;
+    }
+
     resizeParams = undefined;
 
     editor.updateBlock(block, {
@@ -235,9 +246,6 @@ export const renderImage = (
     if (editor.isEditable) {
       imageWrapper.appendChild(leftResizeHandle);
       imageWrapper.appendChild(rightResizeHandle);
-    } else {
-      imageWrapper.removeChild(leftResizeHandle);
-      imageWrapper.removeChild(rightResizeHandle);
     }
   };
   // Hides the resize handles when the cursor leaves the image, unless the
@@ -254,8 +262,14 @@ export const renderImage = (
       return;
     }
 
-    imageWrapper.removeChild(leftResizeHandle);
-    imageWrapper.removeChild(rightResizeHandle);
+    if (
+      editor.isEditable &&
+      imageWrapper.contains(leftResizeHandle) &&
+      imageWrapper.contains(rightResizeHandle)
+    ) {
+      imageWrapper.removeChild(leftResizeHandle);
+      imageWrapper.removeChild(rightResizeHandle);
+    }
   };
 
   // Sets the resize params, allowing the user to begin resizing the image by

packages/core/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -37,7 +37,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
   addKeyboardShortcuts() {
     return {
       Enter: () => handleEnter(this.editor),
-      "Mod-Shift-7": () =>
+      "Mod-Shift-8": () =>
         this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
           type: "bulletListItem",
           props: {},

packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -52,7 +52,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
   addKeyboardShortcuts() {
     return {
       Enter: () => handleEnter(this.editor),
-      "Mod-Shift-8": () =>
+      "Mod-Shift-7": () =>
         this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
           type: "numberedListItem",
           props: {},

packages/core/src/editor/Block.css

@@ -65,6 +65,10 @@ NESTED BLOCKS
   height: 0;
 }
 
+.bn-inline-content code {
+  font-family: monospace;
+}
+
 /* NESTED BLOCK ANIMATIONS (change in indent) */
 
 [data-prev-depth-change="1"] {

packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -52,7 +52,8 @@ export class FormattingToolbarView {
 
     pmView.dom.addEventListener("mousedown", this.viewMousedownHandler);
     pmView.dom.addEventListener("mouseup", this.viewMouseupHandler);
-    pmView.dom.addEventListener("dragstart", this.dragstartHandler);
+    pmView.dom.addEventListener("dragstart", this.dragHandler);
+    pmView.dom.addEventListener("dragover", this.dragHandler);
 
     pmView.dom.addEventListener("focus", this.focusHandler);
     pmView.dom.addEventListener("blur", this.blurHandler);
@@ -70,7 +71,7 @@ export class FormattingToolbarView {
   };
 
   // For dragging the whole editor.
-  dragstartHandler = () => {
+  dragHandler = () => {
     if (this.formattingToolbarState?.show) {
       this.formattingToolbarState.show = false;
       this.updateFormattingToolbar();
@@ -177,7 +178,8 @@ export class FormattingToolbarView {
   destroy() {
     this.pmView.dom.removeEventListener("mousedown", this.viewMousedownHandler);
     this.pmView.dom.removeEventListener("mouseup", this.viewMouseupHandler);
-    this.pmView.dom.removeEventListener("dragstart", this.dragstartHandler);
+    this.pmView.dom.removeEventListener("dragstart", this.dragHandler);
+    this.pmView.dom.removeEventListener("dragover", this.dragHandler);
 
     this.pmView.dom.removeEventListener("focus", this.focusHandler);
     this.pmView.dom.removeEventListener("blur", this.blurHandler);

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

@@ -550,7 +550,10 @@ export class SideMenuView<
     const { contentNode, startPos, endPos } = blockInfo;
 
     // Creates a new block if current one is not empty for the suggestion menu to open in.
-    if (contentNode.textContent.length !== 0) {
+    if (
+      contentNode.type.spec.content !== "inline*" ||
+      contentNode.textContent.length !== 0
+    ) {
       const newBlockInsertionPos = endPos + 1;
       const newBlockContentPos = newBlockInsertionPos + 2;
 

packages/react/src/editor/styles.css

@@ -158,7 +158,7 @@
 }
 
 /* Mantine Popover component base styles */
-.mantine-Popover-dropdown {
+.bn-container .mantine-Popover-dropdown {
     background-color: transparent;
     border: none;
     border-radius: 0;

packages/react/src/slashMenuItems/defaultReactSlashMenuItems.tsx

@@ -49,13 +49,13 @@ const extraFields: Record<
     group: "Basic blocks",
     icon: <RiListOrdered size={18} />,
     hint: "Used to display a numbered list",
-    shortcut: formatKeyboardShortcut("Mod-Alt-7"),
+    shortcut: formatKeyboardShortcut("Mod-Shift-7"),
   },
   "Bullet List": {
     group: "Basic blocks",
     icon: <RiListUnordered size={18} />,
     hint: "Used to display an unordered list",
-    shortcut: formatKeyboardShortcut("Mod-Alt-9"),
+    shortcut: formatKeyboardShortcut("Mod-Shift-8"),
   },
   Paragraph: {
     group: "Basic blocks",

packages/website/docs/.vitepress/config.ts

@@ -137,6 +137,10 @@ const EXAMPLES_SIDEBAR = [
         text: "Changing Font",
         link: "/examples/changing-font",
       },
+      {
+        text: "Formatting Toolbar Buttons",
+        link: "/examples/formatting-toolbar-buttons",
+      },
     ],
   },
   {

packages/website/docs/.vitepress/theme/components/Examples/BlockNote/ReactBlockNote.tsx

@@ -1,6 +1,6 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
-import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
 import { useEffect, useMemo } from "react";
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";

packages/website/docs/examples/formatting-toolbar-buttons.md

@@ -0,0 +1,104 @@
+---
+title: Formatting Toolbar Buttons
+description: In this example, we change add a code styles button to the formatting toolbar.
+imageTitle: Formatting Toolbar Buttons
+path: /examples/formatting-toolbar-buttons
+---
+
+<script setup>
+import { useData } from 'vitepress';
+import { getTheme, getStyles } from "../demoUtils";
+
+const { isDark } = useData();
+</script>
+
+# Formatting Toolbar Buttons
+
+In this example, we add a code style toggle button to the Formatting Toolbar.
+
+**Relevant Docs:**
+
+- [Custom Formatting Toolbar](/docs/formatting-toolbar#custom-formatting-toolbar)
+
+::: sandbox {template=react-ts}
+
+```typescript-vue /App.tsx
+import { BlockNoteEditor } from "@blocknote/core";
+import {
+  BlockNoteView,
+  BlockTypeDropdown,
+  ColorStyleButton,
+  CreateLinkButton,
+  FormattingToolbarPositioner,
+  FormattingToolbarProps,
+  HyperlinkToolbarPositioner,
+  ImageCaptionButton,
+  ImageToolbarPositioner,
+  NestBlockButton,
+  ReplaceImageButton,
+  SideMenuPositioner,
+  SlashMenuPositioner,
+  TableHandlesPositioner,
+  TextAlignButton,
+  ToggledStyleButton,
+  Toolbar,
+  UnnestBlockButton,
+  useBlockNote,
+} from "@blocknote/react";
+import "@blocknote/react/style.css";
+
+// From https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/DefaultFormattingToolbar.tsx
+function CustomFormattingToolbar(props: FormattingToolbarProps) {
+  return (
+    <Toolbar>
+      <BlockTypeDropdown {...props} />
+
+      <ImageCaptionButton editor={props.editor} />
+      <ReplaceImageButton editor={props.editor} />
+
+      <ToggledStyleButton editor={props.editor} toggledStyle={"bold"} />
+      <ToggledStyleButton editor={props.editor} toggledStyle={"italic"} />
+      <ToggledStyleButton editor={props.editor} toggledStyle={"underline"} />
+      <ToggledStyleButton editor={props.editor} toggledStyle={"strike"} />
+      {/* Added code toggle button */}
+      <ToggledStyleButton editor={props.editor} toggledStyle={"code"} />
+
+      <TextAlignButton editor={props.editor as any} textAlignment={"left"} />
+      <TextAlignButton editor={props.editor as any} textAlignment={"center"} />
+      <TextAlignButton editor={props.editor as any} textAlignment={"right"} />
+
+      <ColorStyleButton editor={props.editor} />
+
+      <NestBlockButton editor={props.editor} />
+      <UnnestBlockButton editor={props.editor} />
+
+      <CreateLinkButton editor={props.editor} />
+    </Toolbar>
+  );
+}
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor: BlockNoteEditor = useBlockNote();
+
+  // Renders the editor instance using a React component.
+  return (
+    <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"}>
+      <FormattingToolbarPositioner
+        editor={editor}
+        formattingToolbar={CustomFormattingToolbar}
+      />
+      <HyperlinkToolbarPositioner editor={editor} />
+      <SlashMenuPositioner editor={editor} />
+      <SideMenuPositioner editor={editor} />
+      <ImageToolbarPositioner editor={editor} />
+      <TableHandlesPositioner editor={editor} />
+    </BlockNoteView>
+  );
+}
+
+```
+
+```css-vue /styles.css [hidden]
+{{ getStyles(isDark) }}
+```