+ | undefined;
+ }
/**
* The `uploadFile` method is what the editor uses when files need to be uploaded (for example when selecting an image to upload).
@@ -344,17 +379,7 @@ export class BlockNoteEditor<
this.inlineContentImplementations = newOptions.schema.inlineContentSpecs;
this.styleImplementations = newOptions.schema.styleSpecs;
- this.formattingToolbar = new FormattingToolbarProsemirrorPlugin(this);
- this.linkToolbar = new LinkToolbarProsemirrorPlugin(this);
- this.sideMenu = new SideMenuProsemirrorPlugin(this);
- this.suggestionMenus = new SuggestionMenuProseMirrorPlugin(this);
- this.filePanel = new FilePanelProsemirrorPlugin(this as any);
-
- if (checkDefaultBlockTypeInSchema("table", this)) {
- this.tableHandles = new TableHandlesProsemirrorPlugin(this as any);
- }
-
- const extensions = getBlockNoteExtensions({
+ this.extensions = getBlockNoteExtensions({
editor: this,
domAttributes: newOptions.domAttributes || {},
blockSpecs: this.schema.blockSpecs,
@@ -364,27 +389,20 @@ export class BlockNoteEditor<
trailingBlock: newOptions.trailingBlock,
disableExtensions: newOptions.disableExtensions,
setIdAttribute: newOptions.setIdAttribute,
+ tableHandles: checkDefaultBlockTypeInSchema("table", this),
+ placeholders: newOptions.placeholders,
+ animations: newOptions.animations ?? true,
});
- const blockNoteUIExtension = Extension.create({
- name: "BlockNoteUIExtension",
-
- addProseMirrorPlugins: () => {
- return [
- this.formattingToolbar.plugin,
- this.linkToolbar.plugin,
- this.sideMenu.plugin,
- this.suggestionMenus.plugin,
- ...(this.filePanel ? [this.filePanel.plugin] : []),
- ...(this.tableHandles ? [this.tableHandles.plugin] : []),
- PlaceholderPlugin(this, newOptions.placeholders),
- ...(this.options.animations ?? true
- ? [PreviousBlockTypePlugin()]
- : []),
- ];
- },
+ // add extensions from _tiptapOptions
+ (newOptions._tiptapOptions?.extensions || []).forEach((ext) => {
+ this.extensions[ext.name] = ext;
+ });
+
+ // add extensions from options
+ Object.entries(newOptions.extensions || {}).forEach(([key, ext]) => {
+ this.extensions[key] = ext;
});
- extensions.push(blockNoteUIExtension);
if (newOptions.uploadFile) {
const uploadFile = newOptions.uploadFile;
@@ -440,8 +458,22 @@ export class BlockNoteEditor<
...newOptions._tiptapOptions,
content: initialContent,
extensions: [
- ...(newOptions._tiptapOptions?.extensions || []),
- ...extensions,
+ ...Object.entries(this.extensions).map(([key, ext]) => {
+ if (
+ ext instanceof Extension ||
+ ext instanceof TipTapNode ||
+ ext instanceof Mark
+ ) {
+ // tiptap extension
+ return ext;
+ }
+
+ // "blocknote" extensions (prosemirror plugins)
+ return Extension.create({
+ name: key,
+ addProseMirrorPlugins: () => [ext.plugin],
+ });
+ }),
],
editorProps: {
...newOptions._tiptapOptions?.editorProps,
@@ -766,6 +798,76 @@ export class BlockNoteEditor<
}
}
+ // TODO: what about node selections?
+ public getSelectionWithMarkers() {
+ let start = this._tiptapEditor.state.selection.$from;
+ let end = this._tiptapEditor.state.selection.$to;
+
+ // if the end is at the end of a node (|) move it forward so we include all closing tags (|)
+ // while (end.parentOffset >= end.parent.nodeSize - 2 && end.depth > 0) {
+ // end = this._tiptapEditor.state.doc.resolve(end.pos + 1);
+ // }
+
+ // // if the end is at the start of an empty node (|) move it backwards so we drop empty start tags (
|)
+ // while (end.parentOffset === 0 && end.depth > 0) {
+ // end = this._tiptapEditor.state.doc.resolve(end.pos - 1);
+ // }
+
+ // // if the start is at the start of a node (|) move it backwards so we include all open tags (|)
+ // while (start.parentOffset === 0 && start.depth > 0) {
+ // start = this._tiptapEditor.state.doc.resolve(start.pos - 1);
+ // }
+
+ // // if the start is at the end of a node (|
) move it forwards so we drop all closing tags (|)
+ // while (start.parentOffset >= start.parent.nodeSize - 2 && start.depth > 0) {
+ // start = this._tiptapEditor.state.doc.resolve(start.pos + 1);
+ // }
+
+ return withSelectionMarkers(
+ this._tiptapEditor.state,
+ start.pos,
+ end.pos,
+ this.schema.blockSchema,
+ this.schema.inlineContentSchema,
+ this.schema.styleSchema
+ );
+ }
+
+ // TODO: fix image node selection
+ public getSelection2() {
+ let start = this._tiptapEditor.state.selection.$from;
+ let end = this._tiptapEditor.state.selection.$to;
+
+ // if the end is at the end of a node (|
) move it forward so we include all closing tags (
|)
+ while (end.parentOffset >= end.parent.nodeSize - 2 && end.depth > 0) {
+ end = this._tiptapEditor.state.doc.resolve(end.pos + 1);
+ }
+
+ // if the end is at the start of an empty node (
|) move it backwards so we drop empty start tags (
|)
+ while (end.parentOffset === 0 && end.depth > 0) {
+ end = this._tiptapEditor.state.doc.resolve(end.pos - 1);
+ }
+
+ // if the start is at the start of a node (|) move it backwards so we include all open tags (|)
+ while (start.parentOffset === 0 && start.depth > 0) {
+ start = this._tiptapEditor.state.doc.resolve(start.pos - 1);
+ }
+
+ // if the start is at the end of a node (|
|) move it forwards so we drop all closing tags (|)
+ while (start.parentOffset >= start.parent.nodeSize - 2 && start.depth > 0) {
+ start = this._tiptapEditor.state.doc.resolve(start.pos + 1);
+ }
+
+ // console.log(start.pos, end.pos);
+ return prosemirrorSliceToSlicedBlocks(
+ this._tiptapEditor.state.doc.slice(start.pos, end.pos, true),
+ this.schema.blockSchema,
+ this.schema.inlineContentSchema,
+ this.schema.styleSchema,
+ this.blockCache
+ );
+ }
+
/**
* Gets a snapshot of the current selection.
*/
diff --git a/packages/core/src/editor/BlockNoteExtensions.ts b/packages/core/src/editor/BlockNoteExtensions.ts
index fca81fb5a..24451d58a 100644
--- a/packages/core/src/editor/BlockNoteExtensions.ts
+++ b/packages/core/src/editor/BlockNoteExtensions.ts
@@ -1,6 +1,6 @@
-import { Extension, Extensions, extensions } from "@tiptap/core";
+import { AnyExtension, Extension, extensions } from "@tiptap/core";
-import type { BlockNoteEditor } from "./BlockNoteEditor";
+import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
@@ -14,7 +14,16 @@ import * as Y from "yjs";
import { createCopyToClipboardExtension } from "../api/exporters/copyExtension";
import { createDropFileExtension } from "../api/parsers/fileDropExtension";
import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
+import { checkDefaultBlockTypeInSchema } from "../blocks/defaultBlockTypeGuards";
import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension";
+import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin";
+import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin";
+import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin";
+import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin";
+import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin";
+import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin";
+import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin";
+import { TableHandlesProsemirrorPlugin } from "../extensions/TableHandles/TableHandlesPlugin";
import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension";
import { TextColorExtension } from "../extensions/TextColor/TextColorExtension";
import { TrailingNode } from "../extensions/TrailingNode/TrailingNodeExtension";
@@ -55,9 +64,12 @@ export const getBlockNoteExtensions = <
renderCursor?: (user: any) => HTMLElement;
};
disableExtensions: string[] | undefined;
+ tableHandles: boolean;
+ placeholders: Record;
setIdAttribute?: boolean;
+ animations: boolean;
}) => {
- const ret: Extensions = [
+ const tiptapExtensions: AnyExtension[] = [
extensions.ClipboardTextSerializer,
extensions.Commands,
extensions.Editable,
@@ -160,7 +172,7 @@ export const getBlockNoteExtensions = <
];
if (opts.collaboration) {
- ret.push(
+ tiptapExtensions.push(
Collaboration.configure({
fragment: opts.collaboration.fragment,
})
@@ -185,7 +197,7 @@ export const getBlockNoteExtensions = <
cursor.insertBefore(nonbreakingSpace2, null);
return cursor;
};
- ret.push(
+ tiptapExtensions.push(
CollaborationCursor.configure({
user: opts.collaboration.user,
render: opts.collaboration.renderCursor || defaultRender,
@@ -195,9 +207,36 @@ export const getBlockNoteExtensions = <
}
} else {
// disable history extension when collaboration is enabled as Yjs takes care of undo / redo
- ret.push(History);
+ tiptapExtensions.push(History);
+ }
+
+ const ret: Record = {};
+
+ for (const ext of tiptapExtensions) {
+ ret[ext.name] = ext;
+ }
+
+ // TODO: things will break when user provides different keys. Define name on plugins instead?
+ ret["formattingToolbar"] = new FormattingToolbarProsemirrorPlugin(
+ opts.editor
+ );
+ ret["linkToolbar"] = new LinkToolbarProsemirrorPlugin(opts.editor);
+ ret["sideMenu"] = new SideMenuProsemirrorPlugin(opts.editor);
+ ret["suggestionMenus"] = new SuggestionMenuProseMirrorPlugin(opts.editor);
+ ret["filePanel"] = new FilePanelProsemirrorPlugin(opts.editor as any);
+ ret["placeholder"] = new PlaceholderPlugin(opts.editor, opts.placeholders);
+
+ if (opts.animations ?? true) {
+ ret["animations"] = new PreviousBlockTypePlugin();
+ }
+
+ if (checkDefaultBlockTypeInSchema("table", opts.editor)) {
+ ret["tableHandles"] = new TableHandlesProsemirrorPlugin(opts.editor as any);
}
const disableExtensions: string[] = opts.disableExtensions || [];
- return ret.filter((ex) => !disableExtensions.includes(ex.name));
+ for (const ext of Object.keys(disableExtensions)) {
+ delete ret[ext];
+ }
+ return ret;
};
diff --git a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts
index 35259d432..ce1d0e0d3 100644
--- a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts
+++ b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts
@@ -4,105 +4,116 @@ import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
-export const PlaceholderPlugin = (
- editor: BlockNoteEditor,
- placeholders: Record
-) => {
- return new Plugin({
- key: PLUGIN_KEY,
- view: () => {
- const styleEl = document.createElement("style");
- const nonce = editor._tiptapEditor.options.injectNonce;
- if (nonce) {
- styleEl.setAttribute("nonce", nonce);
- }
- if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
- editor._tiptapEditor.view.root.append(styleEl);
- } else {
- editor._tiptapEditor.view.root.head.appendChild(styleEl);
- }
-
- const styleSheet = styleEl.sheet!;
-
- const getBaseSelector = (additionalSelectors = "") =>
- `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
-
- const getSelector = (
- blockType: string | "default",
- mustBeFocused = true
- ) => {
- const mustBeFocusedSelector = mustBeFocused
- ? `[data-is-empty-and-focused]`
- : ``;
-
- if (blockType === "default") {
- return getBaseSelector(mustBeFocusedSelector);
+export class PlaceholderPlugin {
+ public readonly plugin: Plugin;
+
+ public constructor(
+ editor: BlockNoteEditor,
+ placeholders: Record
+ ) {
+ this.plugin = new Plugin({
+ key: PLUGIN_KEY,
+ view: () => {
+ const styleEl = document.createElement("style");
+ const nonce = editor._tiptapEditor.options.injectNonce;
+ if (nonce) {
+ styleEl.setAttribute("nonce", nonce);
}
+ if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
+ editor._tiptapEditor.view.root.append(styleEl);
+ } else {
+ editor._tiptapEditor.view.root.head.appendChild(styleEl);
+ }
+
+ const styleSheet = styleEl.sheet!;
+
+ const getBaseSelector = (additionalSelectors = "") =>
+ `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
- const blockTypeSelector = `[data-content-type="${blockType}"]`;
- return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
- };
+ const getSelector = (
+ blockType: string | "default",
+ mustBeFocused = true
+ ) => {
+ const mustBeFocusedSelector = mustBeFocused
+ ? `[data-is-empty-and-focused]`
+ : ``;
+
+ if (blockType === "default") {
+ return getBaseSelector(mustBeFocusedSelector);
+ }
- for (const [blockType, placeholder] of Object.entries(placeholders)) {
- const mustBeFocused = blockType === "default";
+ const blockTypeSelector = `[data-content-type="${blockType}"]`;
+ return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
+ };
- styleSheet.insertRule(
- `${getSelector(blockType, mustBeFocused)}{ content: ${JSON.stringify(
- placeholder
- )}; }`
- );
+ for (const [blockType, placeholder] of Object.entries(placeholders)) {
+ const mustBeFocused = blockType === "default";
- // For some reason, the placeholders which show when the block is focused
- // take priority over ones which show depending on block type, so we need
- // to make sure the block specific ones are also used when the block is
- // focused.
- if (!mustBeFocused) {
styleSheet.insertRule(
- `${getSelector(blockType, true)}{ content: ${JSON.stringify(
- placeholder
- )}; }`
+ `${getSelector(
+ blockType,
+ mustBeFocused
+ )}{ content: ${JSON.stringify(placeholder)}; }`
);
- }
- }
-
- return {
- destroy: () => {
- if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
- editor._tiptapEditor.view.root.removeChild(styleEl);
- } else {
- editor._tiptapEditor.view.root.head.removeChild(styleEl);
+
+ // For some reason, the placeholders which show when the block is focused
+ // take priority over ones which show depending on block type, so we need
+ // to make sure the block specific ones are also used when the block is
+ // focused.
+ if (!mustBeFocused) {
+ styleSheet.insertRule(
+ `${getSelector(blockType, true)}{ content: ${JSON.stringify(
+ placeholder
+ )}; }`
+ );
}
- },
- };
- },
- props: {
- // TODO: maybe also add placeholder for empty document ("e.g.: start writing..")
- decorations: (state) => {
- const { doc, selection } = state;
-
- if (!editor.isEditable) {
- return;
}
- if (!selection.empty) {
- return;
- }
+ return {
+ destroy: () => {
+ if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
+ editor._tiptapEditor.view.root.removeChild(styleEl);
+ } else {
+ editor._tiptapEditor.view.root.head.removeChild(styleEl);
+ }
+ },
+ };
+ },
+ props: {
+ // TODO: maybe also add placeholder for empty document ("e.g.: start writing..")
+ decorations: (state) => {
+ const { doc, selection } = state;
- const $pos = selection.$anchor;
- const node = $pos.parent;
+ if (!editor.isEditable) {
+ return;
+ }
- if (node.content.size > 0) {
- return null;
- }
+ if (!selection.empty) {
+ return;
+ }
- const before = $pos.before();
+ const $pos = selection.$anchor;
+ const node = $pos.parent;
- const dec = Decoration.node(before, before + node.nodeSize, {
- "data-is-empty-and-focused": "true",
- });
+ if ($pos.pos === 0) {
+ return;
+ }
- return DecorationSet.create(doc, [dec]);
+ const before = $pos.before();
+
+ const dec = Decoration.node(
+ before,
+ before + node.nodeSize,
+ node.content.size > 0
+ ? { "data-is-focused": "true" }
+ : {
+ "data-is-empty-and-focused": "true",
+ }
+ );
+
+ return DecorationSet.create(doc, [dec]);
+ },
},
- },
- });
-};
+ });
+ }
+}
diff --git a/packages/core/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts b/packages/core/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts
index b71eeb50f..d10ac1665 100644
--- a/packages/core/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts
+++ b/packages/core/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts
@@ -23,195 +23,200 @@ const nodeAttributes: Record = {
*
* Solution: When attributes change on a node, this plugin sets a data-* attribute with the "previous" value. This way we can still use CSS transitions. (See block.module.css)
*/
-export const PreviousBlockTypePlugin = () => {
- let timeout: any;
- return new Plugin({
- key: PLUGIN_KEY,
- view(_editorView) {
- return {
- update: async (view, _prevState) => {
- if (this.key?.getState(view.state).updatedBlocks.size > 0) {
- // use setTimeout 0 to clear the decorations so that at least
- // for one DOM-render the decorations have been applied
- timeout = setTimeout(() => {
- view.dispatch(
- view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true })
- );
- }, 0);
- }
- },
- destroy: () => {
- if (timeout) {
- clearTimeout(timeout);
- }
- },
- };
- },
- state: {
- init() {
+export class PreviousBlockTypePlugin {
+ public readonly plugin: Plugin;
+
+ constructor() {
+ let timeout: ReturnType | undefined;
+ this.plugin = new Plugin({
+ key: PLUGIN_KEY,
+ view(_editorView) {
return {
- // Block attributes, by block ID, from just before the previous transaction.
- prevTransactionOldBlockAttrs: {} as any,
- // Block attributes, by block ID, from just before the current transaction.
- currentTransactionOldBlockAttrs: {} as any,
- // Set of IDs of blocks whose attributes changed from the current transaction.
- updatedBlocks: new Set(),
+ update: async (view, _prevState) => {
+ if (this.key?.getState(view.state).updatedBlocks.size > 0) {
+ // use setTimeout 0 to clear the decorations so that at least
+ // for one DOM-render the decorations have been applied
+ timeout = setTimeout(() => {
+ view.dispatch(
+ view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true })
+ );
+ }, 0);
+ }
+ },
+ destroy: () => {
+ if (timeout) {
+ clearTimeout(timeout);
+ }
+ },
};
},
+ state: {
+ init() {
+ return {
+ // Block attributes, by block ID, from just before the previous transaction.
+ prevTransactionOldBlockAttrs: {} as any,
+ // Block attributes, by block ID, from just before the current transaction.
+ currentTransactionOldBlockAttrs: {} as any,
+ // Set of IDs of blocks whose attributes changed from the current transaction.
+ updatedBlocks: new Set(),
+ };
+ },
- apply(transaction, prev, oldState, newState) {
- prev.currentTransactionOldBlockAttrs = {};
- prev.updatedBlocks.clear();
+ apply(transaction, prev, oldState, newState) {
+ prev.currentTransactionOldBlockAttrs = {};
+ prev.updatedBlocks.clear();
- if (!transaction.docChanged || oldState.doc.eq(newState.doc)) {
- return prev;
- }
-
- // TODO: Instead of iterating through the entire document, only check nodes affected by the transactions. Will
- // also probably require checking nodes affected by the previous transaction too.
- // We didn't get this to work yet:
- // const transform = combineTransactionSteps(oldState.doc, [transaction]);
- // // const { mapping } = transform;
- // const changes = getChangedRanges(transform);
- //
- // changes.forEach(({ oldRange, newRange }) => {
- // const oldNodes = findChildrenInRange(
- // oldState.doc,
- // oldRange,
- // (node) => node.attrs.id
- // );
- //
- // const newNodes = findChildrenInRange(
- // newState.doc,
- // newRange,
- // (node) => node.attrs.id
- // );
-
- const currentTransactionOriginalOldBlockAttrs = {} as any;
-
- const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
- const oldNodesById = new Map(
- oldNodes.map((node) => [node.node.attrs.id, node])
- );
- const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
-
- // Traverses all block containers in the new editor state.
- for (const node of newNodes) {
- const oldNode = oldNodesById.get(node.node.attrs.id);
-
- const oldContentNode = oldNode?.node.firstChild;
- const newContentNode = node.node.firstChild;
-
- if (oldNode && oldContentNode && newContentNode) {
- const newAttrs = {
- index: newContentNode.attrs.index,
- level: newContentNode.attrs.level,
- type: newContentNode.type.name,
- depth: newState.doc.resolve(node.pos).depth,
- };
-
- let oldAttrs = {
- index: oldContentNode.attrs.index,
- level: oldContentNode.attrs.level,
- type: oldContentNode.type.name,
- depth: oldState.doc.resolve(oldNode.pos).depth,
- };
-
- currentTransactionOriginalOldBlockAttrs[node.node.attrs.id] =
- oldAttrs;
-
- // Whenever a transaction is appended by the OrderedListItemIndexPlugin, it's given the metadata:
- // { "orderedListIndexing": true }
- // These appended transactions happen immediately after any transaction which causes ordered list item
- // indices to require updating, including those which trigger animations. Therefore, these animations are
- // immediately overridden when the PreviousBlockTypePlugin processes the appended transaction, despite only
- // the listItemIndex attribute changing. To solve this, oldAttrs must be edited for transactions with the
- // "orderedListIndexing" metadata, so the correct animation can be re-triggered.
- if (transaction.getMeta("numberedListIndexing")) {
- // If the block existed before the transaction, gets the attributes from before the previous transaction
- // (i.e. the transaction that caused list item indices to need updating).
- if (node.node.attrs.id in prev.prevTransactionOldBlockAttrs) {
- oldAttrs =
- prev.prevTransactionOldBlockAttrs[node.node.attrs.id];
+ if (!transaction.docChanged || oldState.doc.eq(newState.doc)) {
+ return prev;
+ }
+
+ // TODO: Instead of iterating through the entire document, only check nodes affected by the transactions. Will
+ // also probably require checking nodes affected by the previous transaction too.
+ // We didn't get this to work yet:
+ // const transform = combineTransactionSteps(oldState.doc, [transaction]);
+ // // const { mapping } = transform;
+ // const changes = getChangedRanges(transform);
+ //
+ // changes.forEach(({ oldRange, newRange }) => {
+ // const oldNodes = findChildrenInRange(
+ // oldState.doc,
+ // oldRange,
+ // (node) => node.attrs.id
+ // );
+ //
+ // const newNodes = findChildrenInRange(
+ // newState.doc,
+ // newRange,
+ // (node) => node.attrs.id
+ // );
+
+ const currentTransactionOriginalOldBlockAttrs = {} as any;
+
+ const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
+ const oldNodesById = new Map(
+ oldNodes.map((node) => [node.node.attrs.id, node])
+ );
+ const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
+
+ // Traverses all block containers in the new editor state.
+ for (const node of newNodes) {
+ const oldNode = oldNodesById.get(node.node.attrs.id);
+
+ const oldContentNode = oldNode?.node.firstChild;
+ const newContentNode = node.node.firstChild;
+
+ if (oldNode && oldContentNode && newContentNode) {
+ const newAttrs = {
+ index: newContentNode.attrs.index,
+ level: newContentNode.attrs.level,
+ type: newContentNode.type.name,
+ depth: newState.doc.resolve(node.pos).depth,
+ };
+
+ let oldAttrs = {
+ index: oldContentNode.attrs.index,
+ level: oldContentNode.attrs.level,
+ type: oldContentNode.type.name,
+ depth: oldState.doc.resolve(oldNode.pos).depth,
+ };
+
+ currentTransactionOriginalOldBlockAttrs[node.node.attrs.id] =
+ oldAttrs;
+
+ // Whenever a transaction is appended by the OrderedListItemIndexPlugin, it's given the metadata:
+ // { "orderedListIndexing": true }
+ // These appended transactions happen immediately after any transaction which causes ordered list item
+ // indices to require updating, including those which trigger animations. Therefore, these animations are
+ // immediately overridden when the PreviousBlockTypePlugin processes the appended transaction, despite only
+ // the listItemIndex attribute changing. To solve this, oldAttrs must be edited for transactions with the
+ // "orderedListIndexing" metadata, so the correct animation can be re-triggered.
+ if (transaction.getMeta("numberedListIndexing")) {
+ // If the block existed before the transaction, gets the attributes from before the previous transaction
+ // (i.e. the transaction that caused list item indices to need updating).
+ if (node.node.attrs.id in prev.prevTransactionOldBlockAttrs) {
+ oldAttrs =
+ prev.prevTransactionOldBlockAttrs[node.node.attrs.id];
+ }
+
+ // Stops list item indices themselves being animated (looks smoother), unless the block's content type is
+ // changing from a numbered list item to something else.
+ if (newAttrs.type === "numberedListItem") {
+ oldAttrs.index = newAttrs.index;
+ }
}
- // Stops list item indices themselves being animated (looks smoother), unless the block's content type is
- // changing from a numbered list item to something else.
- if (newAttrs.type === "numberedListItem") {
- oldAttrs.index = newAttrs.index;
+ prev.currentTransactionOldBlockAttrs[node.node.attrs.id] =
+ oldAttrs;
+
+ // TODO: faster deep equal?
+ if (JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs)) {
+ (oldAttrs as any)["depth-change"] =
+ oldAttrs.depth - newAttrs.depth;
+
+ // for debugging:
+ // console.log(
+ // "id:",
+ // node.node.attrs.id,
+ // "previousBlockTypePlugin changes detected, oldAttrs",
+ // oldAttrs,
+ // "new",
+ // newAttrs
+ // );
+
+ prev.updatedBlocks.add(node.node.attrs.id);
}
}
+ }
- prev.currentTransactionOldBlockAttrs[node.node.attrs.id] = oldAttrs;
+ prev.prevTransactionOldBlockAttrs =
+ currentTransactionOriginalOldBlockAttrs;
- // TODO: faster deep equal?
- if (JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs)) {
- (oldAttrs as any)["depth-change"] =
- oldAttrs.depth - newAttrs.depth;
+ return prev;
+ },
+ },
+ props: {
+ decorations(state) {
+ const pluginState = (this as Plugin).getState(state);
+ if (pluginState.updatedBlocks.size === 0) {
+ return undefined;
+ }
- // for debugging:
- // console.log(
- // "id:",
- // node.node.attrs.id,
- // "previousBlockTypePlugin changes detected, oldAttrs",
- // oldAttrs,
- // "new",
- // newAttrs
- // );
+ const decorations: Decoration[] = [];
- prev.updatedBlocks.add(node.node.attrs.id);
+ state.doc.descendants((node, pos) => {
+ if (!node.attrs.id) {
+ return;
}
- }
- }
- prev.prevTransactionOldBlockAttrs =
- currentTransactionOriginalOldBlockAttrs;
+ if (!pluginState.updatedBlocks.has(node.attrs.id)) {
+ return;
+ }
- return prev;
- },
- },
- props: {
- decorations(state) {
- const pluginState = (this as Plugin).getState(state);
- if (pluginState.updatedBlocks.size === 0) {
- return undefined;
- }
-
- const decorations: Decoration[] = [];
-
- state.doc.descendants((node, pos) => {
- if (!node.attrs.id) {
- return;
- }
+ const prevAttrs =
+ pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
+ const decorationAttrs: any = {};
- if (!pluginState.updatedBlocks.has(node.attrs.id)) {
- return;
- }
-
- const prevAttrs =
- pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
- const decorationAttrs: any = {};
+ for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
+ decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
+ val || "none";
+ }
- for (const [nodeAttr, val] of Object.entries(prevAttrs)) {
- decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
- val || "none";
- }
+ // for debugging:
+ // console.log(
+ // "previousBlockTypePlugin committing decorations",
+ // decorationAttrs
+ // );
- // for debugging:
- // console.log(
- // "previousBlockTypePlugin committing decorations",
- // decorationAttrs
- // );
+ const decoration = Decoration.node(pos, pos + node.nodeSize, {
+ ...decorationAttrs,
+ });
- const decoration = Decoration.node(pos, pos + node.nodeSize, {
- ...decorationAttrs,
+ decorations.push(decoration);
});
- decorations.push(decoration);
- });
-
- return DecorationSet.create(state.doc, decorations);
+ return DecorationSet.create(state.doc, decorations);
+ },
},
- },
- });
-};
+ });
+ }
+}
diff --git a/packages/core/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts b/packages/core/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts
index 874c7e318..b4471d936 100644
--- a/packages/core/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts
+++ b/packages/core/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts
@@ -1,7 +1,5 @@
-import type { Dictionary } from "../../i18n/dictionary";
-
export type DefaultSuggestionItem = {
- key: keyof Dictionary["slash_menu"];
+ name: string;
title: string;
onItemClick: () => void;
subtext?: string;
diff --git a/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts b/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
index def4536cd..df5d073ac 100644
--- a/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
+++ b/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
@@ -91,7 +91,7 @@ export function getDefaultSlashMenuItems<
});
},
badge: formatKeyboardShortcut("Mod-Alt-1"),
- key: "heading",
+ name: "heading",
...editor.dictionary.slash_menu.heading,
},
{
@@ -102,7 +102,7 @@ export function getDefaultSlashMenuItems<
});
},
badge: formatKeyboardShortcut("Mod-Alt-2"),
- key: "heading_2",
+ name: "heading_2",
...editor.dictionary.slash_menu.heading_2,
},
{
@@ -113,7 +113,7 @@ export function getDefaultSlashMenuItems<
});
},
badge: formatKeyboardShortcut("Mod-Alt-3"),
- key: "heading_3",
+ name: "heading_3",
...editor.dictionary.slash_menu.heading_3,
}
);
@@ -127,7 +127,7 @@ export function getDefaultSlashMenuItems<
});
},
badge: formatKeyboardShortcut("Mod-Shift-7"),
- key: "numbered_list",
+ name: "numbered_list",
...editor.dictionary.slash_menu.numbered_list,
});
}
@@ -140,7 +140,7 @@ export function getDefaultSlashMenuItems<
});
},
badge: formatKeyboardShortcut("Mod-Shift-8"),
- key: "bullet_list",
+ name: "bullet_list",
...editor.dictionary.slash_menu.bullet_list,
});
}
@@ -153,7 +153,7 @@ export function getDefaultSlashMenuItems<
});
},
badge: formatKeyboardShortcut("Mod-Shift-9"),
- key: "check_list",
+ name: "check_list",
...editor.dictionary.slash_menu.check_list,
});
}
@@ -166,7 +166,7 @@ export function getDefaultSlashMenuItems<
});
},
badge: formatKeyboardShortcut("Mod-Alt-0"),
- key: "paragraph",
+ name: "paragraph",
...editor.dictionary.slash_menu.paragraph,
});
}
@@ -190,7 +190,7 @@ export function getDefaultSlashMenuItems<
});
},
badge: undefined,
- key: "table",
+ name: "table",
...editor.dictionary.slash_menu.table,
});
}
@@ -209,7 +209,7 @@ export function getDefaultSlashMenuItems<
})
);
},
- key: "image",
+ name: "image",
...editor.dictionary.slash_menu.image,
});
}
@@ -228,7 +228,7 @@ export function getDefaultSlashMenuItems<
})
);
},
- key: "video",
+ name: "video",
...editor.dictionary.slash_menu.video,
});
}
@@ -247,7 +247,7 @@ export function getDefaultSlashMenuItems<
})
);
},
- key: "audio",
+ name: "audio",
...editor.dictionary.slash_menu.audio,
});
}
@@ -266,7 +266,7 @@ export function getDefaultSlashMenuItems<
})
);
},
- key: "image",
+ name: "image",
...editor.dictionary.slash_menu.file,
});
}
@@ -278,7 +278,7 @@ export function getDefaultSlashMenuItems<
ignoreQueryLength: true,
});
},
- key: "emoji",
+ name: "emoji",
...editor.dictionary.slash_menu.emoji,
});
@@ -292,8 +292,9 @@ export function filterSuggestionItems<
({ title, aliases }) =>
title.toLowerCase().includes(query.toLowerCase()) ||
(aliases &&
- aliases.filter((alias) =>
- alias.toLowerCase().includes(query.toLowerCase())
+ aliases.filter(
+ (alias) =>
+ alias === "" || alias.toLowerCase().includes(query.toLowerCase())
).length !== 0)
);
}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 9f352e54b..04b860e2e 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,6 +1,7 @@
import * as locales from "./i18n/locales";
export * from "./api/exporters/html/externalHTMLExporter";
export * from "./api/exporters/html/internalHTMLSerializer";
+export * from "./api/getBlockInfoFromPos";
export * from "./api/getCurrentBlockContentType";
export * from "./api/testUtil";
export * from "./blocks/AudioBlockContent/AudioBlockContent";
@@ -30,7 +31,9 @@ export * from "./extensions/SuggestionMenu/getDefaultEmojiPickerItems";
export * from "./extensions/SuggestionMenu/getDefaultSlashMenuItems";
export * from "./extensions/TableHandles/TableHandlesPlugin";
export * from "./i18n/dictionary";
+export * from "./i18n/locales";
export * from "./schema";
+export * from "./util/EventEmitter";
export * from "./util/browser";
export * from "./util/esmDependencies";
export * from "./util/string";
diff --git a/packages/core/src/pm-nodes/BlockContainer.ts b/packages/core/src/pm-nodes/BlockContainer.ts
index aa476f2ea..dd60e5a5a 100644
--- a/packages/core/src/pm-nodes/BlockContainer.ts
+++ b/packages/core/src/pm-nodes/BlockContainer.ts
@@ -286,7 +286,7 @@ export const BlockContainer = Node.create<{
state.tr
.replaceWith(
startPos,
- endPos,
+ startPos + contentNode.nodeSize,
state.schema.nodes[newType].create(
{
...contentNode.attrs,
@@ -317,7 +317,7 @@ export const BlockContainer = Node.create<{
...block.props,
});
}
-
+ // state.tr.setMeta("addToHistory", false);
return true;
},
// Appends the text contents of a block to the nearest previous block, given a position between them. Children of
diff --git a/packages/mantine/src/form/TextInput.tsx b/packages/mantine/src/form/TextInput.tsx
index e741deb46..c4b4a5334 100644
--- a/packages/mantine/src/form/TextInput.tsx
+++ b/packages/mantine/src/form/TextInput.tsx
@@ -1,6 +1,6 @@
import { TextInput as MantineTextInput } from "@mantine/core";
-import { assertEmpty } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
import { ComponentProps } from "@blocknote/react";
import { forwardRef } from "react";
@@ -12,13 +12,16 @@ export const TextInput = forwardRef<
className,
name,
label,
+ variant,
icon,
value,
autoFocus,
placeholder,
+ disabled,
onKeyDown,
onChange,
onSubmit,
+ autoComplete,
...rest
} = props;
@@ -27,7 +30,10 @@ export const TextInput = forwardRef<
return (
);
});
diff --git a/packages/mantine/src/index.tsx b/packages/mantine/src/index.tsx
index 94c423ff2..fee4ca9e4 100644
--- a/packages/mantine/src/index.tsx
+++ b/packages/mantine/src/index.tsx
@@ -55,7 +55,7 @@ export * from "./BlockNoteTheme";
export * from "./defaultThemes";
export const components: Components = {
- FormattingToolbar: {
+ Toolbar: {
Root: Toolbar,
Button: ToolbarButton,
Select: ToolbarSelect,
@@ -73,10 +73,6 @@ export const components: Components = {
EmptyItem: GridSuggestionMenuEmptyItem,
Loader: GridSuggestionMenuLoader,
},
- LinkToolbar: {
- Root: Toolbar,
- Button: ToolbarButton,
- },
SideMenu: {
Root: SideMenu,
Button: SideMenuButton,
diff --git a/packages/mantine/src/style.css b/packages/mantine/src/style.css
index ee8b2e60f..7c76de356 100644
--- a/packages/mantine/src/style.css
+++ b/packages/mantine/src/style.css
@@ -118,6 +118,12 @@
height: 32px;
}
+.bn-mantine .bn-mt-input-large .mantine-TextInput-input {
+ border: none;
+ font-size: 14px;
+ height: 52px;
+}
+
/* Mantine Tooltip component base styles */
.bn-mantine .mantine-Tooltip-tooltip {
background-color: transparent;
@@ -310,6 +316,12 @@
height: 52px;
}
+.bn-mantine .bn-suggestion-menu-item-small {
+ height: fit-content;
+ /* Made to match with labels */
+ padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm);
+}
+
.bn-mantine .bn-suggestion-menu-item[aria-selected="true"],
.bn-mantine .bn-suggestion-menu-item:hover {
background-color: var(--bn-colors-hovered-background);
@@ -325,6 +337,16 @@
padding: 8px;
}
+.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-section[data-position="left"] {
+ background-color: transparent;
+ padding: 0;
+}
+
+.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-section[data-position="left"] svg {
+ height: 14px;
+ width: 14px;
+}
+
.bn-mt-suggestion-menu-item-body {
align-items: stretch;
display: flex;
@@ -343,6 +365,10 @@
padding: 0;
}
+.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-title {
+ font-size: 12px;
+}
+
.bn-mt-suggestion-menu-item-subtitle {
color: var(--bn-colors-menu-text);
line-height: 16px;
@@ -351,8 +377,13 @@
padding: 0;
}
+.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-subtitle {
+ display: none;
+}
+
.bn-mantine .bn-suggestion-menu-label {
color: var(--bn-colors-hovered-text);
+ font-weight: bold;
}
.bn-mantine .bn-suggestion-menu-loader {
diff --git a/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx b/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx
index c7db27e38..a758c39da 100644
--- a/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx
+++ b/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx
@@ -27,7 +27,7 @@ export const SuggestionMenuItem = forwardRef<
const overflow = elementOverflow(
itemRef.current,
- document.querySelector(".bn-suggestion-menu")!
+ document.querySelector(".bn-suggestion-menu, #ai-suggestion-menu")! // TODO
);
if (overflow === "top") {
@@ -44,6 +44,7 @@ export const SuggestionMenuItem = forwardRef<
ref={mergeRefs(ref, itemRef)}
id={id}
role="option"
+ onMouseDown={(event) => event.preventDefault()}
onClick={onClick}
aria-selected={isSelected || undefined}>
{item.icon && (
diff --git a/packages/mantine/src/toolbar/Toolbar.tsx b/packages/mantine/src/toolbar/Toolbar.tsx
index 9ad042e85..a9c2b07d2 100644
--- a/packages/mantine/src/toolbar/Toolbar.tsx
+++ b/packages/mantine/src/toolbar/Toolbar.tsx
@@ -5,8 +5,7 @@ import { ComponentProps } from "@blocknote/react";
import { mergeRefs, useFocusTrap, useFocusWithin } from "@mantine/hooks";
import { forwardRef } from "react";
-type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
- ComponentProps["LinkToolbar"]["Root"];
+type ToolbarProps = ComponentProps["Toolbar"]["Root"];
export const Toolbar = forwardRef(
(props, ref) => {
diff --git a/packages/mantine/src/toolbar/ToolbarButton.tsx b/packages/mantine/src/toolbar/ToolbarButton.tsx
index bd22f0411..6ba92931d 100644
--- a/packages/mantine/src/toolbar/ToolbarButton.tsx
+++ b/packages/mantine/src/toolbar/ToolbarButton.tsx
@@ -22,8 +22,7 @@ export const TooltipContent = (props: {
);
-type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] &
- ComponentProps["LinkToolbar"]["Button"];
+type ToolbarButtonProps = ComponentProps["Toolbar"]["Button"];
/**
* Helper for basic buttons that show in the formatting toolbar.
@@ -51,10 +50,12 @@ export const ToolbarButton = forwardRef(
+ mainTooltip && (
+
+ )
}>
{/*Creates an ActionIcon instead of a Button if only an icon is provided as content.*/}
{children ? (
@@ -69,11 +70,13 @@ export const ToolbarButton = forwardRef(
}
}}
onClick={onClick}
+ leftSection={icon}
aria-pressed={isSelected}
data-selected={isSelected || undefined}
data-test={
+ mainTooltip &&
mainTooltip.slice(0, 1).toLowerCase() +
- mainTooltip.replace(/\s+/g, "").slice(1)
+ mainTooltip.replace(/\s+/g, "").slice(1)
}
size={"xs"}
disabled={isDisabled || false}
@@ -96,8 +99,9 @@ export const ToolbarButton = forwardRef(
aria-pressed={isSelected}
data-selected={isSelected || undefined}
data-test={
+ mainTooltip &&
mainTooltip.slice(0, 1).toLowerCase() +
- mainTooltip.replace(/\s+/g, "").slice(1)
+ mainTooltip.replace(/\s+/g, "").slice(1)
}
size={30}
disabled={isDisabled || false}
diff --git a/packages/mantine/src/toolbar/ToolbarSelect.tsx b/packages/mantine/src/toolbar/ToolbarSelect.tsx
index 32638ca5a..6e57b178b 100644
--- a/packages/mantine/src/toolbar/ToolbarSelect.tsx
+++ b/packages/mantine/src/toolbar/ToolbarSelect.tsx
@@ -12,7 +12,7 @@ import { HiChevronDown } from "react-icons/hi";
// TODO: Turn into select?
export const ToolbarSelect = forwardRef<
HTMLDivElement,
- ComponentProps["FormattingToolbar"]["Select"]
+ ComponentProps["Toolbar"]["Select"]
>((props, ref) => {
const { className, items, isDisabled, ...rest } = props;
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx
index 1be42b3ee..a8af0d144 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx
@@ -107,7 +107,7 @@ export const BasicTextStyleButton =