@blocknote/core 0.32.0-hackdays.0 → 0.32.0

package/src/editor/Block.css

@@ -15,26 +15,9 @@ BASIC STYLES
 
 .bn-block-content {
   padding: 3px 0;
+  display: flex;
   transition: font-size 0.2s;
   width: 100%;
-  /*
-  because the content elements are display: block
-  we use flex to position them next to list markers
-  */
-}
-
-/* We can't set `display: flex` on `.bn-block-content` while it has inline 
-content (see #1629). However, it's necessary to set alignment of blocks
-without content as these can't use `text-align`, so this additional rule is 
-used. */
-.bn-block-content:not(:has(.bn-inline-content)) {
-  display: flex;
-}
-
-.bn-block-content::before {
-  /* content: ""; */
-  transition: all 0.2s;
-  /*margin: 0px;*/
 }
 
 .bn-block-content.ProseMirror-selectednode > *,
@@ -44,6 +27,19 @@ used. */
   outline: 4px solid rgb(100, 160, 255);
 }
 
+.bn-block-content::before {
+  content: "";
+  margin-right: 0;
+  transition: all 0.2s;
+  /* Workaround for selection issue on Chrome, see #1588 and also here:
+  https://discuss.prosemirror.net/t/mouse-down-selection-behaviour-different-on-chrome/8426
+  The :before element causes the selection to be set in the wrong place vs 
+  other browsers. Setting no height fixes this, while list item indicators are 
+  still displayed fine as overflow is not hidden. */
+  height: 0;
+  overflow: visible;
+}
+
 .bn-inline-content {
   width: 100%;
 }
@@ -53,7 +49,7 @@ NESTED BLOCKS
 */
 
 .bn-block-group .bn-block-group {
-  margin-left: 1.5em;
+  margin-left: 24px;
 }
 
 .bn-block-group .bn-block-group > .bn-block-outer {
@@ -134,6 +130,15 @@ NESTED BLOCKS
 [data-content-type="heading"][data-level="3"] {
   --level: 1.3em;
 }
+[data-content-type="heading"][data-level="4"] {
+  --level: 1em;
+}
+[data-content-type="heading"][data-level="5"] {
+  --level: 0.9em;
+}
+[data-content-type="heading"][data-level="6"] {
+  --level: 0.8em;
+}
 
 [data-prev-level="1"] {
   --prev-level: 3em;
@@ -144,6 +149,15 @@ NESTED BLOCKS
 [data-prev-level="3"] {
   --prev-level: 1.3em;
 }
+[data-prev-level="4"] {
+  --prev-level: 1em;
+}
+[data-prev-level="5"] {
+  --prev-level: 0.9em;
+}
+[data-prev-level="6"] {
+  --prev-level: 0.8em;
+}
 
 .bn-block-outer[data-prev-type="heading"] > .bn-block > .bn-block-content {
   font-size: var(--prev-level);
@@ -175,13 +189,14 @@ NESTED BLOCKS
 .bn-block-content::before {
   margin-right: 0;
   content: "";
-  display: inline;
 }
 
 /* Ordered */
-.bn-block-content[data-content-type="numberedListItem"] {
+.bn-block-content[data-content-type="numberedListItem"]::before {
   display: flex;
-  gap: 0.5em;
+  justify-content: center;
+  min-width: 24px;
+  padding-right: 4px;
 }
 
 [data-content-type="numberedListItem"] {
@@ -209,9 +224,11 @@ NESTED BLOCKS
 }
 
 /* Unordered */
-.bn-block-content[data-content-type="bulletListItem"] {
+.bn-block-content[data-content-type="bulletListItem"]::before {
   display: flex;
-  gap: 0.5em;
+  justify-content: center;
+  min-width: 24px;
+  padding-right: 4px;
 }
 
 /* Checked */
@@ -220,9 +237,15 @@ NESTED BLOCKS
   width: 100%;
 }
 
+.bn-block-content[data-content-type="checkListItem"] > div > div {
+  display: flex;
+  justify-content: center;
+  min-width: 24px;
+  padding-right: 4px;
+}
+
 .bn-block-content[data-content-type="checkListItem"] > div > div > input {
   margin: 0;
-  margin-inline-end: 0.5em;
   cursor: pointer;
 }
 
@@ -239,6 +262,70 @@ NESTED BLOCKS
   justify-content: flex-end;
 }
 
+/* Toggle */
+.bn-block-content:has(.bn-toggle-wrapper) > div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bn-block:has(
+    > .bn-block-content > div > .bn-toggle-wrapper[data-show-children="false"]
+  )
+  > .bn-block-group,
+.bn-block:has(
+    > .react-renderer
+      > .bn-block-content
+      > div
+      > .bn-toggle-wrapper[data-show-children="false"]
+  )
+  > .bn-block-group {
+  display: none;
+}
+
+.bn-toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.bn-toggle-button {
+  color: var(--bn-colors-editor-text);
+  padding: 3px;
+}
+
+.bn-toggle-button > svg {
+  width: 18px;
+  height: 18px;
+}
+
+.bn-toggle-wrapper[data-show-children="true"] .bn-toggle-button {
+  transform: rotate(90deg);
+}
+
+.bn-toggle-add-block-button {
+  font-size: 16px;
+  color: var(--bn-colors-side-menu);
+  font-weight: normal;
+  margin-left: 22px;
+  padding-inline: 2px;
+  width: fit-content;
+}
+
+.bn-toggle-button,
+.bn-toggle-add-block-button {
+  background: none;
+  border: none;
+  border-radius: var(--bn-border-radius-small);
+  cursor: pointer;
+  display: flex;
+  user-select: none;
+}
+
+.bn-toggle-button:hover,
+.bn-toggle-add-block-button:hover {
+  background-color: var(--bn-colors-hovered-background);
+}
+
 /* No list nesting */
 .bn-block-outer[data-prev-type="bulletListItem"]
   > .bn-block

package/src/editor/BlockNoteEditor.test.ts

@@ -52,6 +52,7 @@ it("immediately replaces doc", async () => {
         "id": "2",
         "props": {
           "backgroundColor": "default",
+          "isToggleable": false,
           "level": 1,
           "textAlignment": "left",
           "textColor": "default",

package/src/editor/BlockNoteEditor.ts

@@ -229,6 +229,18 @@ export type BlockNoteEditorOptions<
     class?: string;
   }) => Plugin;
 
+  /**
+   * Configuration for headings
+   */
+  heading?: {
+    /**
+     * The levels of headings that should be available in the editor.
+     * @note Configurable up to 6 levels of headings.
+     * @default [1, 2, 3]
+     */
+    levels?: (1 | 2 | 3 | 4 | 5 | 6)[];
+  };
+
   /**
    * The content that should be in the editor when it's created, represented as an array of partial block objects.
    */
@@ -527,6 +539,9 @@ export class BlockNoteEditor<
       headers: boolean;
     };
     codeBlock: CodeBlockOptions;
+    heading: {
+      levels: (1 | 2 | 3 | 4 | 5 | 6)[];
+    };
   };
 
   public static create<
@@ -580,6 +595,9 @@ export class BlockNoteEditor<
         supportedLanguages: options?.codeBlock?.supportedLanguages ?? {},
         createHighlighter: options?.codeBlock?.createHighlighter ?? undefined,
       },
+      heading: {
+        levels: options?.heading?.levels ?? [1, 2, 3],
+      },
     };
 
     // apply defaults

package/src/editor/BlockNoteExtensions.ts

@@ -116,7 +116,7 @@ export const getBlockNoteExtensions = <
 
   if (opts.collaboration) {
     ret["ySyncPlugin"] = new SyncPlugin(opts.collaboration.fragment);
-    ret["yUndoPlugin"] = new UndoPlugin();
+    ret["yUndoPlugin"] = new UndoPlugin({ editor: opts.editor });
 
     if (opts.collaboration.provider?.awareness) {
       ret["yCursorPlugin"] = new CursorPlugin(opts.collaboration);

package/src/editor/BlockNoteTipTapEditor.ts

@@ -302,6 +302,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   ) => {
     if (!element) {
       this.destroy();
+      this.isInitialized = false;
     } else {
       this.options.element = element;
       this.createViewAlternative(blockNoteEditor, contentComponent);

package/src/editor/editor.css

@@ -44,6 +44,9 @@ Tippy popups that are appended to document.body directly
 .bn-default-styles h1,
 .bn-default-styles h2,
 .bn-default-styles h3,
+.bn-default-styles h4,
+.bn-default-styles h5,
+.bn-default-styles h6,
 .bn-default-styles li {
   margin: 0;
   padding: 0;

package/src/extensions/Collaboration/ForkYDocPlugin.ts

@@ -86,6 +86,7 @@ export class ForkYDocPlugin extends BlockNoteExtension<{
   private forkedState:
     | {
         originalFragment: Y.XmlFragment;
+        undoStack: Y.UndoManager["undoStack"];
         forkedFragment: Y.XmlFragment;
       }
     | undefined;
@@ -114,6 +115,8 @@ export class ForkYDocPlugin extends BlockNoteExtension<{
     const forkedFragment = this.findTypeInOtherYdoc(originalFragment, doc);
 
     this.forkedState = {
+      undoStack: yUndoPluginKey.getState(this.editor.prosemirrorState)!
+        .undoManager.undoStack,
       originalFragment,
       forkedFragment,
     };
@@ -128,7 +131,9 @@ export class ForkYDocPlugin extends BlockNoteExtension<{
     this.editor._tiptapEditor.registerPlugin(
       new SyncPlugin(forkedFragment).plugins[0],
     );
-    this.editor._tiptapEditor.registerPlugin(new UndoPlugin().plugins[0]);
+    this.editor._tiptapEditor.registerPlugin(
+      new UndoPlugin({ editor: this.editor }).plugins[0],
+    );
     // No need to register the cursor plugin again, it's a local fork
     this.emit("forked", true);
   }
@@ -146,17 +151,15 @@ export class ForkYDocPlugin extends BlockNoteExtension<{
     this.editor._tiptapEditor.unregisterPlugin(ySyncPluginKey);
     this.editor._tiptapEditor.unregisterPlugin(yUndoPluginKey);
 
-    const { originalFragment, forkedFragment } = this.forkedState;
-    if (keepChanges) {
-      // Apply any changes that have been made to the fork, onto the original doc
-      const update = Y.encodeStateAsUpdate(forkedFragment.doc!);
-      Y.applyUpdate(originalFragment.doc!, update);
-    }
+    const { originalFragment, forkedFragment, undoStack } = this.forkedState;
     this.editor.extensions["ySyncPlugin"] = new SyncPlugin(originalFragment);
     this.editor.extensions["yCursorPlugin"] = new CursorPlugin(
       this.collaboration!,
     );
-    this.editor.extensions["yUndoPlugin"] = new UndoPlugin();
+    this.editor.extensions["yUndoPlugin"] = new UndoPlugin({
+      editor: this.editor,
+    });
+
     // Register the plugins again, based on the original fragment
     this.editor._tiptapEditor.registerPlugin(
       this.editor.extensions["ySyncPlugin"].plugins[0],
@@ -167,6 +170,21 @@ export class ForkYDocPlugin extends BlockNoteExtension<{
     this.editor._tiptapEditor.registerPlugin(
       this.editor.extensions["yUndoPlugin"].plugins[0],
     );
+
+    // Reset the undo stack to the original undo stack
+    yUndoPluginKey.getState(
+      this.editor.prosemirrorState,
+    )!.undoManager.undoStack = undoStack;
+
+    if (keepChanges) {
+      // Apply any changes that have been made to the fork, onto the original doc
+      const update = Y.encodeStateAsUpdate(
+        forkedFragment.doc!,
+        Y.encodeStateVector(originalFragment.doc!),
+      );
+      // Applying this change will add to the undo stack, allowing it to be undone normally
+      Y.applyUpdate(originalFragment.doc!, update, this.editor);
+    }
     // Reset the forked state
     this.forkedState = undefined;
     this.emit("forked", false);

package/src/extensions/Collaboration/UndoPlugin.ts

@@ -1,4 +1,5 @@
 import { yUndoPlugin } from "y-prosemirror";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
 
 export class UndoPlugin extends BlockNoteExtension {
@@ -6,9 +7,9 @@ export class UndoPlugin extends BlockNoteExtension {
     return "yUndoPlugin";
   }
 
-  constructor() {
+  constructor({ editor }: { editor: BlockNoteEditor<any, any, any> }) {
     super();
-    this.addProsemirrorPlugin(yUndoPlugin());
+    this.addProsemirrorPlugin(yUndoPlugin({ trackedOrigins: [editor] }));
   }
 
   public get priority() {

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -130,7 +130,10 @@ export class FormattingToolbarView implements PluginView {
   };
 
   viewMousedownHandler = (e: MouseEvent) => {
-    if (!this.isElementWithinEditorWrapper(e.target as Node)) {
+    if (
+      !this.isElementWithinEditorWrapper(e.target as Node) ||
+      e.button === 0
+    ) {
       this.preventShow = true;
     }
   };

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -434,7 +434,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
       ]);
 
     const handleEnter = (withShift = false) => {
-      return this.editor.commands.first(({ commands }) => [
+      return this.editor.commands.first(({ commands, tr }) => [
         // Removes a level of nesting if the block is empty & indented, while the selection is also empty & at the start
         // of the block.
         () =>
@@ -486,9 +486,21 @@ export const KeyboardShortcutsExtension = Extension.create<{
               // both enter and shift+enter.
               blockHardBreakShortcut === "enter"
             ) {
-              return commands.insertContent({
-                type: "hardBreak",
-              });
+              const marks =
+                tr.storedMarks ||
+                tr.selection.$head
+                  .marks()
+                  .filter((m) =>
+                    this.editor.extensionManager.splittableMarks.includes(
+                      m.type.name,
+                    ),
+                  );
+
+              tr.insert(
+                tr.selection.head,
+                tr.doc.type.schema.nodes.hardBreak.create(),
+              ).ensureMarks(marks);
+              return true;
             }
 
             return false;

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -293,28 +293,18 @@ export class SuggestionMenuProseMirrorPlugin<
         },
 
         props: {
-          handleTextInput(view, from, to, text) {
-            // only on insert
-            if (from === to) {
-              const doc = view.state.doc;
-              for (const str of triggerCharacters) {
-                const snippet =
-                  str.length > 1
-                    ? doc.textBetween(from - str.length, from) + text
-                    : text;
-
-                if (str === snippet) {
-                  view.dispatch(view.state.tr.insertText(text));
-                  view.dispatch(
-                    view.state.tr
-                      .setMeta(suggestionMenuPluginKey, {
-                        triggerCharacter: snippet,
-                      })
-                      .scrollIntoView(),
-                  );
-                  return true;
-                }
-              }
+          handleTextInput(view, _from, _to, text) {
+            if (triggerCharacters.includes(text)) {
+              view.dispatch(view.state.tr.insertText(text));
+              view.dispatch(
+                view.state.tr
+                  .setMeta(suggestionMenuPluginKey, {
+                    triggerCharacter: text,
+                  })
+                  .scrollIntoView(),
+              );
+
+              return true;
             }
             return false;
           },

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -137,6 +137,19 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("toggleListItem", editor)) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "toggleListItem",
+        });
+      },
+      badge: formatKeyboardShortcut("Mod-Shift-6"),
+      key: "toggle_list",
+      ...editor.dictionary.slash_menu.toggle_list,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("numberedListItem", editor)) {
     items.push({
       onItemClick: () => {
@@ -302,6 +315,57 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("heading", editor)) {
+    items.push(
+      {
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 1, isToggleable: true },
+          });
+        },
+        key: "toggle_heading",
+        ...editor.dictionary.slash_menu.toggle_heading,
+      },
+      {
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 2, isToggleable: true },
+          });
+        },
+
+        key: "toggle_heading_2",
+        ...editor.dictionary.slash_menu.toggle_heading_2,
+      },
+      {
+        onItemClick: () => {
+          insertOrUpdateBlock(editor, {
+            type: "heading",
+            props: { level: 3, isToggleable: true },
+          });
+        },
+        key: "toggle_heading_3",
+        ...editor.dictionary.slash_menu.toggle_heading_3,
+      },
+    );
+
+    editor.settings.heading.levels
+      .filter((level): level is 4 | 5 | 6 => level > 3)
+      .forEach((level) => {
+        items.push({
+          onItemClick: () => {
+            insertOrUpdateBlock(editor, {
+              type: "heading",
+              props: { level: level },
+            });
+          },
+          key: `heading_${level}`,
+          ...editor.dictionary.slash_menu[`heading_${level}`],
+        });
+      });
+  }
+
   items.push({
     onItemClick: () => {
       editor.openSuggestionMenu(":", {

package/src/i18n/locales/ar.ts

@@ -20,6 +20,42 @@ export const ar: Dictionary = {
       aliases: ["ع3", "عنوان3", "عنوان فرعي"],
       group: "العناوين",
     },
+    heading_4: {
+      title: "عنوان 4",
+      subtext: "عنوان فرعي ثانوي صغير",
+      aliases: ["ع4", "عنوان4", "عنوان فرعي صغير"],
+      group: "العناوين الفرعية",
+    },
+    heading_5: {
+      title: "عنوان 5",
+      subtext: "عنوان فرعي صغير",
+      aliases: ["ع5", "عنوان5", "عنوان فرعي صغير"],
+      group: "العناوين الفرعية",
+    },
+    heading_6: {
+      title: "عنوان 6",
+      subtext: "أدنى مستوى للعناوين",
+      aliases: ["ع6", "عنوان6", "العنوان الفرعي الأدنى"],
+      group: "العناوين الفرعية",
+    },
+    toggle_heading: {
+      title: "عنوان قابل للطي 1",
+      subtext: "عنوان قابل للطي لإظهار وإخفاء المحتوى",
+      aliases: ["ع", "عنوان1", "ع1", "قابل للطي", "طي"],
+      group: "العناوين الفرعية",
+    },
+    toggle_heading_2: {
+      title: "عنوان قابل للطي 2",
+      subtext: "عنوان فرعي قابل للطي لإظهار وإخفاء المحتوى",
+      aliases: ["ع2", "عنوان2", "عنوان فرعي", "قابل للطي", "طي"],
+      group: "العناوين الفرعية",
+    },
+    toggle_heading_3: {
+      title: "عنوان قابل للطي 3",
+      subtext: "عنوان فرعي ثانوي قابل للطي لإظهار وإخفاء المحتوى",
+      aliases: ["ع3", "عنوان3", "عنوان فرعي", "قابل للطي", "طي"],
+      group: "العناوين الفرعية",
+    },
     quote: {
       title: "اقتباس",
       subtext: "اقتباس أو مقتطف",
@@ -52,6 +88,12 @@ export const ar: Dictionary = {
       ],
       group: "الكتل الأساسية",
     },
+    toggle_list: {
+      title: "قائمة قابلة للطي",
+      subtext: "قائمة بعناصر فرعية قابلة للإخفاء",
+      aliases: ["عناصر قائمة", "قائمة", "قائمة قابلة للطي", "قائمة منسدلة"],
+      group: "الكتل الأساسية",
+    },
     paragraph: {
       title: "فقرة",
       subtext: "تستخدم لنص الوثيقة الأساسي",
@@ -118,6 +160,7 @@ export const ar: Dictionary = {
   placeholders: {
     default: "أدخل نصًا أو اكتب '/' للأوامر",
     heading: "عنوان",
+    toggleListItem: "طيّ",
     bulletListItem: "قائمة",
     numberedListItem: "قائمة",
     checkListItem: "قائمة",
@@ -320,6 +363,9 @@ export const ar: Dictionary = {
     },
   },
   comments: {
+    edited: "تم التحرير",
+    save_button_text: "حفظ",
+    cancel_button_text: "إلغاء",
     actions: {
       add_reaction: "أضف تفاعلًا",
       resolve: "حل",