Merge branch 'main' into new-releases

matthewlipski · matthewlipski · commit 0910662705c1 · 2024-01-22T03:22:10.000+01:00
diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/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
diff --git a/packages/core/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts b/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: {},
diff --git a/packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts b/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: {},
diff --git a/packages/core/src/editor/Block.css b/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"] {
diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/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);
diff --git a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts b/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;
 
diff --git a/packages/react/src/editor/styles.css b/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;
diff --git a/packages/react/src/slashMenuItems/defaultReactSlashMenuItems.tsx b/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",
diff --git a/packages/website/docs/.vitepress/config.ts b/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",
+      },
     ],
   },
   {
diff --git a/packages/website/docs/.vitepress/theme/components/Examples/BlockNote/ReactBlockNote.tsx b/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";
diff --git a/packages/website/docs/examples/formatting-toolbar-buttons.md b/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) }}
+```
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-chromium-linux.png
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-firefox-linux.png
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-webkit-linux.png

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,10 @@ NESTED BLOCKS`
`65`	`65`	`height: 0;`
`66`	`66`	`}`
`67`	`67`
	`68`	`+.bn-inline-content code {`
	`69`	`+ font-family: monospace;`
	`70`	`+}`
	`71`	`+`
`68`	`72`	`/* NESTED BLOCK ANIMATIONS (change in indent) */`
`69`	`73`
`70`	`74`	`[data-prev-depth-change="1"] {`
Original file line number	Diff line number	Diff line change
`@@ -158,7 +158,7 @@`
`158`	`158`	`}`
`159`	`159`
`160`	`160`	`/* Mantine Popover component base styles */`
`161`		`-.mantine-Popover-dropdown {`
	`161`	`+.bn-container .mantine-Popover-dropdown {`
`162`	`162`	`background-color: transparent;`
`163`	`163`	`border: none;`
`164`	`164`	`border-radius: 0;`