Skip to content

fix: Inserting link removes comment & add comment button click buggy #2620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
matthewlipski merged 12 commits into from
Apr 20, 2026
Merged

fix: Inserting link removes comment & add comment button click buggy #2620

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b89283f
Made inserting links not call `insertText` when text is the same
matthewlipski Apr 2, 2026
5a7a186
test: add e2e test for preserving marks when editing a link (#2573)
miadnguyen Apr 5, 2026
17386a6
Fixed some comments UI issues, updated test and added comments testin…
matthewlipski Apr 14, 2026
50fdda4
Updated test
matthewlipski Apr 14, 2026
437a7d3
Fixed failing link toolbar tests
matthewlipski Apr 14, 2026
46c0600
Small fix
matthewlipski Apr 16, 2026
82c5971
Implemented PR feedback
matthewlipski Apr 20, 2026
9e179fd
Merge branch 'main' into link-overwrite-comments-fix
matthewlipski Apr 20, 2026
3543c94
Fixed example generated `package.json` files
matthewlipski Apr 20, 2026
c58be94
Updated lock file
matthewlipski Apr 20, 2026
703e2fd
Changed example number
matthewlipski Apr 20, 2026
03d90d9
Updated lock file
matthewlipski Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions examples/07-collaboration/10-comments-testing/.bnexample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"playground": true,
"docs": false,
"author": "matthewlipski",
"tags": ["Advanced", "Comments", "Testing"],
"dependencies": {
"yjs": "^13.6.27"
}
}
3 changes: 3 additions & 0 deletions examples/07-collaboration/10-comments-testing/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Comments Testing

A minimal comments example used for end-to-end testing. Uses a local Y.Doc (no collaboration provider) with a single hardcoded editor user.
14 changes: 14 additions & 0 deletions examples/07-collaboration/10-comments-testing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Comments Testing</title>
<script>
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>
11 changes: 11 additions & 0 deletions examples/07-collaboration/10-comments-testing/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./src/App.jsx";

const root = createRoot(document.getElementById("root")!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
32 changes: 32 additions & 0 deletions examples/07-collaboration/10-comments-testing/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"name": "@blocknote/example-collaboration-comments-testing",
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
"type": "module",
"private": true,
"version": "0.12.4",
"scripts": {
"start": "vite",
"dev": "vite",
"build:prod": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@blocknote/ariakit": "latest",
"@blocknote/core": "latest",
"@blocknote/mantine": "latest",
"@blocknote/react": "latest",
"@blocknote/shadcn": "latest",
"@mantine/core": "^8.3.11",
"@mantine/hooks": "^8.3.11",
"@mantine/utils": "^6.0.22",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"yjs": "^13.6.27"
},
"devDependencies": {
"@types/react": "^19.2.3",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^4.7.0",
"vite": "^5.4.20"
}
}
44 changes: 44 additions & 0 deletions examples/07-collaboration/10-comments-testing/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
"use client";

import {
CommentsExtension,
DefaultThreadStoreAuth,
YjsThreadStore,
} from "@blocknote/core/comments";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
import { useMemo } from "react";
import * as Y from "yjs";

const USER = {
id: "1",
username: "John Doe",
avatarUrl: "https://placehold.co/100x100?text=John",
role: "editor" as const,
};

async function resolveUsers(userIds: string[]) {
return [USER].filter((user) => userIds.includes(user.id));
}

export default function App() {
const doc = useMemo(() => new Y.Doc(), []);

const threadStore = useMemo(() => {
return new YjsThreadStore(
USER.id,
doc.getMap("threads"),
new DefaultThreadStoreAuth(USER.id, USER.role),
);
}, [doc]);

const editor = useCreateBlockNote(
{
extensions: [CommentsExtension({ threadStore, resolveUsers })],
},
[threadStore],
);

return <BlockNoteView editor={editor} />;
}
36 changes: 36 additions & 0 deletions examples/07-collaboration/10-comments-testing/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": [
"DOM",
"DOM.Iterable",
"ESNext"
],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"composite": true
},
"include": [
"."
],
"__ADD_FOR_LOCAL_DEV_references": [
{
"path": "../../../packages/core/"
},
{
"path": "../../../packages/react/"
}
]
}
32 changes: 32 additions & 0 deletions examples/07-collaboration/10-comments-testing/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
import react from "@vitejs/plugin-react";
import * as fs from "fs";
import * as path from "path";
import { defineConfig } from "vite";
// import eslintPlugin from "vite-plugin-eslint";
// https://vitejs.dev/config/
export default defineConfig((conf) => ({
plugins: [react()],
optimizeDeps: {},
build: {
sourcemap: true,
},
resolve: {
alias:
conf.command === "build" ||
!fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
? {}
: ({
// Comment out the lines below to load a built version of blocknote
// or, keep as is to load live from sources with live reload working
"@blocknote/core": path.resolve(
__dirname,
"../../packages/core/src/"
),
"@blocknote/react": path.resolve(
__dirname,
"../../packages/react/src/"
),
} as any),
},
}));
1 change: 1 addition & 0 deletions packages/core/src/comments/extension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,7 @@ export const CommentsExtension = createExtension(
selectedThreadId: undefined,
pendingComment: true,
}));
editor.focus();
editor
.getExtension(ShowSelectionExtension)
?.showSelection(true, "comments");
Expand Down
7 changes: 6 additions & 1 deletion packages/core/src/editor/managers/StyleManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,12 @@ export class StyleManager<
const { from, to } = tr.selection;

if (text) {
tr.insertText(text, from, to).addMark(from, from + text.length, mark);
const existingText = tr.doc.textBetween(from, to);
if (text !== existingText) {
tr.insertText(text, from, to);
}

tr.addMark(from, from + text.length, mark);
} else {
tr.setSelection(TextSelection.create(tr.doc, to)).addMark(
from,
Expand Down
7 changes: 6 additions & 1 deletion packages/core/src/extensions/LinkToolbar/LinkToolbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,12 @@ export const LinkToolbarExtension = createExtension(({ editor }) => {
if (!range) {
return;
}
tr.insertText(text, range.from, range.to);

Copy link
Copy Markdown
Contributor

@nperez0111 nperez0111 Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should actually probably use style manager.createLink here no?

Copy link
Copy Markdown
Collaborator Author

@matthewlipski matthewlipski Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not exactly, since editLink takes an optional position whereas createLink always uses the selection start position to insert the link. This is necessary for hovered links, as the editor selection isn't related to the link position in this case.

We could ofc just update createLink to take an optional position/range, but because it's part of the editor API, I don't think we want to have anything related to ProseMirror positions there. Ideally this would be solved when we finish our own locations API.

const existingText = tr.doc.textBetween(range.from, range.to);
if (text !== existingText) {
tr.insertText(text, range.from, range.to);
}

tr.addMark(
range.from,
range.from + text.length,
Expand Down
26 changes: 24 additions & 2 deletions packages/react/src/components/Comments/FloatingComposer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { mergeCSSClasses } from "@blocknote/core";
import {
BlockSchema,
DefaultBlockSchema,
DefaultInlineContentSchema,
DefaultStyleSchema,
InlineContentSchema,
mergeCSSClasses,
StyleSchema,
} from "@blocknote/core";
import { CommentsExtension } from "@blocknote/core/comments";

import { useComponentsContext } from "../../editor/ComponentsContext.js";
Expand All @@ -7,13 +15,21 @@ import { useExtension } from "../../hooks/useExtension.js";
import { useDictionary } from "../../i18n/dictionary.js";
import { CommentEditor } from "./CommentEditor.js";
import { defaultCommentEditorSchema } from "./defaultCommentEditorSchema.js";
import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
import { TextSelection } from "@tiptap/pm/state";

/**
* The FloatingComposer component displays a comment editor "floating" card.
*
* It's used when the user highlights a parts of the document to create a new comment / thread.
*/
export function FloatingComposer() {
export function FloatingComposer<
B extends BlockSchema = DefaultBlockSchema,
I extends InlineContentSchema = DefaultInlineContentSchema,
S extends StyleSchema = DefaultStyleSchema,
>() {
const editor = useBlockNoteEditor<B, I, S>();

const comments = useExtension(CommentsExtension);

const Components = useComponentsContext()!;
Expand Down Expand Up @@ -57,6 +73,12 @@ export function FloatingComposer() {
},
});
comments.stopPendingComment();
editor.transact((tr) => {
tr.setSelection(
TextSelection.create(tr.doc, tr.selection.to),
);
});
editor.focus();
}}
>
Save
Expand Down
24 changes: 24 additions & 0 deletions playground/src/examples.gen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1687,6 +1687,30 @@
"slug": "collaboration"
},
"readme": "In this example, we can fork a document and edit it independently of other collaborators. Then, we can choose to merge the changes back into the original document, or discard the changes.\n\n**Try it out:** Open this page in a new browser tab or window to see it in action!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)"
},
{
"projectSlug": "comments-testing",
"fullSlug": "collaboration/comments-testing",
"pathFromRoot": "examples/07-collaboration/10-comments-testing",
"config": {
"playground": true,
"docs": false,
"author": "matthewlipski",
"tags": [
"Advanced",
"Comments",
"Testing"
],
"dependencies": {
"yjs": "^13.6.27"
} as any
},
"title": "Comments Testing",
"group": {
"pathFromRoot": "examples/07-collaboration",
"slug": "collaboration"
},
"readme": "A minimal comments example used for end-to-end testing. Uses a local Y.Doc (no collaboration provider) with a single hardcoded editor user."
}
]
},
Expand Down
Loading
Loading