Mention/notify users #474

New Issue

Closed

opened 2026-02-04 20:19:14 +03:00 by OVERLORD · 31 comments

OVERLORD commented 2026-02-04 20:19:14 +03:00

Owner

Copy Link

Originally created by @Awinad on GitHub (Oct 15, 2017).

For Feature Requests

Desired Feature:
Mention users by using "@". e.g. @username
Similar to how it is done here in github.
Allow to use it on pages and in comments.
Notify mentioned user by email.

Originally created by @Awinad on GitHub (Oct 15, 2017). ### For Feature Requests Desired Feature: Mention users by using "@". e.g. @username Similar to how it is done here in github. Allow to use it on pages and in comments. Notify mentioned user by email.

OVERLORD added the 🔨 Feature Request label 2026-02-04 20:19:14 +03:00

OVERLORD closed this issue 2026-02-04 20:19:15 +03:00

OVERLORD commented 2026-02-04 20:19:21 +03:00

Author

Owner

Copy Link

@galaxyfeeder commented on GitHub (Nov 8, 2017):

+1

@galaxyfeeder commented on GitHub (Nov 8, 2017): +1

OVERLORD commented 2026-02-04 20:19:28 +03:00

Author

Owner

Copy Link

@genxlee commented on GitHub (Nov 9, 2017):

+1

@genxlee commented on GitHub (Nov 9, 2017): +1

OVERLORD commented 2026-02-04 20:19:33 +03:00

Author

Owner

Copy Link

@marcusforsberg commented on GitHub (Jan 27, 2018):

+1

@marcusforsberg commented on GitHub (Jan 27, 2018): +1

OVERLORD commented 2026-02-04 20:19:38 +03:00

Author

Owner

Copy Link

@aljawaid commented on GitHub (Jan 27, 2018):

+1

@aljawaid commented on GitHub (Jan 27, 2018): +1

OVERLORD commented 2026-02-04 20:19:47 +03:00

Author

Owner

Copy Link

@berez23 commented on GitHub (May 8, 2018):

+1

@berez23 commented on GitHub (May 8, 2018): +1

OVERLORD commented 2026-02-04 20:19:49 +03:00

Author

Owner

Copy Link

@lpupillo commented on GitHub (May 8, 2018):

+1

@lpupillo commented on GitHub (May 8, 2018): +1

OVERLORD commented 2026-02-04 20:19:52 +03:00

Author

Owner

Copy Link

@abossert commented on GitHub (Feb 20, 2019):

Has there been any movement or decision on this? I would very much like to see this feature.

@abossert commented on GitHub (Feb 20, 2019): Has there been any movement or decision on this? I would very much like to see this feature.

OVERLORD commented 2026-02-04 20:19:58 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Feb 20, 2019):

@abossert Not as of yet.

If people could use the thumbs-up emoji on the original post instead of the +1 comments it would give the maintainers a much better idea of support for an issue like this.

@ssddanbrown commented on GitHub (Feb 20, 2019): @abossert Not as of yet. If people could use the thumbs-up emoji on the original post instead of the `+1` comments it would give the maintainers a much better idea of support for an issue like this.

OVERLORD commented 2026-02-04 20:20:11 +03:00

Author

Owner

Copy Link

@omran987 commented on GitHub (Sep 18, 2019):

+1

@omran987 commented on GitHub (Sep 18, 2019): +1

OVERLORD commented 2026-02-04 20:20:19 +03:00

Author

Owner

Copy Link

@sahilbhagat09 commented on GitHub (Dec 4, 2021):

Hi, has there been any update on this feature @ssddanbrown?

@sahilbhagat09 commented on GitHub (Dec 4, 2021): Hi, has there been any update on this feature @ssddanbrown?

OVERLORD commented 2026-02-04 20:20:24 +03:00

Author

Owner

Copy Link

@YuntiDevOps commented on GitHub (Apr 17, 2022):

+1

@YuntiDevOps commented on GitHub (Apr 17, 2022): +1

OVERLORD commented 2026-02-04 20:20:27 +03:00

Author

Owner

Copy Link

@acrafts0 commented on GitHub (Sep 13, 2022):

Just 👍 'd it as well. This may be a blocker for my group, otherwise really enjoy the workflows so far. Pitting this versus Confluence and this is a major feature difference (IMO).

@acrafts0 commented on GitHub (Sep 13, 2022): Just :+1: 'd it as well. This may be a blocker for my group, otherwise really enjoy the workflows so far. Pitting this versus Confluence and this is a major feature difference (IMO).

OVERLORD commented 2026-02-04 20:20:29 +03:00

Author

Owner

Copy Link

@FalconWorks commented on GitHub (Oct 10, 2022):

Also interested if this will get featured or not

@FalconWorks commented on GitHub (Oct 10, 2022): Also interested if this will get featured or not

OVERLORD commented 2026-02-04 20:20:32 +03:00

Author

Owner

Copy Link

@mschoon85 commented on GitHub (Oct 21, 2022):

@ssddanbrown Any idea if this feature will be build into bookstack? The owner and/or the creator of a page would like to receive e-mail notifications whenever a comment is posted. I think I would be referring to #1812

@mschoon85 commented on GitHub (Oct 21, 2022): @ssddanbrown Any idea if this feature will be build into bookstack? The owner and/or the creator of a page would like to receive e-mail notifications whenever a comment is posted. I think I would be referring to #1812

OVERLORD commented 2026-02-04 20:20:42 +03:00

Author

Owner

Copy Link

@BloodyIron commented on GitHub (Nov 10, 2022):

This feature has been requested for implementation in my company, so adding that to the discussion. Can we have this added please? :)

@BloodyIron commented on GitHub (Nov 10, 2022): This feature has been requested for implementation in my company, so adding that to the discussion. Can we have this added please? :)

OVERLORD commented 2026-02-04 20:20:48 +03:00

Author

Owner

Copy Link

@akahan989 commented on GitHub (Mar 13, 2023):

+1

@akahan989 commented on GitHub (Mar 13, 2023): +1

OVERLORD commented 2026-02-04 20:20:56 +03:00

Author

Owner

Copy Link

@nothing-fr commented on GitHub (Mar 29, 2023):

For the moment I use the webhook system to notify users of a new comment, I use n8n for the processing workflow.

It's ok for a basic use, but I'm missing some information in the json about the comments, like if it's a reply to another user a key/value "replied_to: user_id" would be welcome.
Because in this case, it's always the creator of the page who will receive the notification and not the person to whom the answer is intended.

It would be very welcome to have an internal notification system in bookstack.

@nothing-fr commented on GitHub (Mar 29, 2023): For the moment I use the webhook system to notify users of a new comment, I use n8n for the processing workflow. It's ok for a basic use, but I'm missing some information in the json about the comments, like if it's a reply to another user a key/value "replied_to: user_id" would be welcome. Because in this case, it's always the creator of the page who will receive the notification and not the person to whom the answer is intended. It would be very welcome to have an internal notification system in bookstack.

OVERLORD commented 2026-02-04 20:20:58 +03:00

Author

Owner

Copy Link

@moeman2323 commented on GitHub (Jan 4, 2024):

Is there any movement on this request?

@moeman2323 commented on GitHub (Jan 4, 2024): Is there any movement on this request?

OVERLORD commented 2026-02-04 20:21:01 +03:00

Author

Owner

Copy Link

@lommes commented on GitHub (Feb 28, 2024):

This seems to be still on the roadmap. Dan mentioned this in the December video and said that the WYSIWYG editor for the comment system (which is now available) is a prerequisite to implement it

@lommes commented on GitHub (Feb 28, 2024): This seems to be still on the roadmap. Dan mentioned this in the [December video](https://youtu.be/ggnTbKmHkRA?si=W7K_IR8ku3PW2koI&t=487) and said that the WYSIWYG editor for the comment system (which is now available) is a prerequisite to implement it

OVERLORD commented 2026-02-04 20:21:05 +03:00

Author

Owner

Copy Link

@Grant-Smith-74 commented on GitHub (Aug 26, 2024):

+1 for user mentions

@Grant-Smith-74 commented on GitHub (Aug 26, 2024): +1 for user mentions

OVERLORD commented 2026-02-04 20:21:08 +03:00

Author

Owner

Copy Link

@FabricePh commented on GitHub (Jan 10, 2025):

Hello, I propose a code from my custom theme to mention @username

I guess, with Webhooks, it's possible to listen new|edit page to read @username and send a email or store in new table to have a notification page for current user/admin

custom_theme/functions.php

<?php

use BookStack\Entities\Controllers as EntityControllers;
use BookStack\Facades\Theme;
use BookStack\Theming\ThemeEvents;
use Illuminate\Support\Facades\Route;

use Custom\Controllers as CustomControllers;

Theme::listen(ThemeEvents::ROUTES_REGISTER_WEB, function ($app) {
    Route::middleware('auth')->group(function () {
        Route::get('/api/users/search', [CustomControllers\UserController::class, 'searchUsers']);
    });
});

custom_theme/Controllers/UserController.php

<?php

namespace Custom\Controllers;

use BookStack\Http\Controller;
use BookStack\Users\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function searchUsers(Request $request)
    {
        $query = $request->get('query', '');
        $users = User::where('name', 'like', '%' . $query . '%')->limit(10)->get(['id', 'name']);
        return response()->json($users);
    }
}

custom-script.js

function getCaretCoordinatesInTinyMCE(editor) {
  const selection = editor.selection.getRng(); 
  if (!selection) {
    return null;
  }

  const rangeRect = selection.getBoundingClientRect();

  const iframe = editor.iframeElement;
  const iframeRect = iframe.getBoundingClientRect();

  return {
    top: iframeRect.top + rangeRect.bottom + window.scrollY,
    left: iframeRect.left + rangeRect.left + window.scrollX,
  };
}

document.addEventListener("editor-tinymce::setup", (event) => {
  const editor = event.detail.editor; 

  const autocompleteBox = document.createElement("div");
  autocompleteBox.style.position = "absolute";
  autocompleteBox.style.zIndex = "1000";
  autocompleteBox.style.display = "none";
  autocompleteBox.classList.add("autocomplete-box");
  document.body.appendChild(autocompleteBox);

  editor.on("keyup", async function (e) {
    const content = editor.getContent();
    const caretCoordinates = getCaretCoordinatesInTinyMCE(editor);
    autocompleteBox.style.left = `${caretCoordinates.left}px`;
    autocompleteBox.style.top = `${caretCoordinates.top}px`;

    const selection = editor.selection;
    const range = selection.getRng();
    const textBeforeCaret = range.startContainer.textContent.slice(0, range.startOffset);

    const matchMention = textBeforeCaret.match(/@([a-zA-Z0-9\._\s]+)/);

    if (matchMention) {
      const query = matchMention[1];
      if (query.length > 0) {
        const response = await fetch(`/api/users/search?query=${query}`);
        const users = await response.json();

        autocompleteBox.style.display = "none";

        if (users.length > 0) {
          autocompleteBox.style.display = "block";
          autocompleteBox.innerHTML = users.map((user) => `<div class="mention" data-username="@${user.name}" data-userid="${user.id}">${user.name}</div>`).join("");

          autocompleteBox.querySelectorAll(".mention").forEach((item) => {
            item.addEventListener("click", function () {
              const userid = this.getAttribute("data-userid");
              const username = this.getAttribute("data-username");

              const mentionSpan = range.startContainer.parentNode.closest("span.mention");
              if (mentionSpan) {
                mentionSpan.setAttribute("data-userid", userid);
                mentionSpan.innerHTML = username;
              } else {
                const mentionHTML = `<span class="mention" data-userid="${userid}">${username}</span>`;
                editor.setContent(content.replace(matchMention[0], mentionHTML + " "));
              }

              autocompleteBox.style.display = "none";
            });
          });
        }
      } else {
        autocompleteBox.style.display = "none";
      }
    } else {
      autocompleteBox.style.display = "none";
    }
  });

  document.addEventListener("click", function () {
    autocompleteBox.style.display = "none";
  });
});

custom-style.css

.mention {
  color: #007bff;
  font-weight: bold;
  cursor: pointer;
}

.mention:hover {
  text-decoration: underline;
}

.autocomplete-box {
  background: white;
  padding: 2px;
  border: 1px solid #ccc;
}

@FabricePh commented on GitHub (Jan 10, 2025): Hello, I propose a code from my custom theme to mention @username I guess, with Webhooks, it's possible to listen `new|edit page` to read @username and send a email or store in new table to have a notification page for current user/admin custom_theme/functions.php ```php <?php use BookStack\Entities\Controllers as EntityControllers; use BookStack\Facades\Theme; use BookStack\Theming\ThemeEvents; use Illuminate\Support\Facades\Route; use Custom\Controllers as CustomControllers; Theme::listen(ThemeEvents::ROUTES_REGISTER_WEB, function ($app) { Route::middleware('auth')->group(function () { Route::get('/api/users/search', [CustomControllers\UserController::class, 'searchUsers']); }); }); ``` custom_theme/Controllers/UserController.php ```php <?php namespace Custom\Controllers; use BookStack\Http\Controller; use BookStack\Users\Models\User; use Illuminate\Http\Request; class UserController extends Controller { public function searchUsers(Request $request) { $query = $request->get('query', ''); $users = User::where('name', 'like', '%' . $query . '%')->limit(10)->get(['id', 'name']); return response()->json($users); } } ``` custom-script.js ```javascript function getCaretCoordinatesInTinyMCE(editor) { const selection = editor.selection.getRng(); if (!selection) { return null; } const rangeRect = selection.getBoundingClientRect(); const iframe = editor.iframeElement; const iframeRect = iframe.getBoundingClientRect(); return { top: iframeRect.top + rangeRect.bottom + window.scrollY, left: iframeRect.left + rangeRect.left + window.scrollX, }; } document.addEventListener("editor-tinymce::setup", (event) => { const editor = event.detail.editor; const autocompleteBox = document.createElement("div"); autocompleteBox.style.position = "absolute"; autocompleteBox.style.zIndex = "1000"; autocompleteBox.style.display = "none"; autocompleteBox.classList.add("autocomplete-box"); document.body.appendChild(autocompleteBox); editor.on("keyup", async function (e) { const content = editor.getContent(); const caretCoordinates = getCaretCoordinatesInTinyMCE(editor); autocompleteBox.style.left = `${caretCoordinates.left}px`; autocompleteBox.style.top = `${caretCoordinates.top}px`; const selection = editor.selection; const range = selection.getRng(); const textBeforeCaret = range.startContainer.textContent.slice(0, range.startOffset); const matchMention = textBeforeCaret.match(/@([a-zA-Z0-9\._\s]+)/); if (matchMention) { const query = matchMention[1]; if (query.length > 0) { const response = await fetch(`/api/users/search?query=${query}`); const users = await response.json(); autocompleteBox.style.display = "none"; if (users.length > 0) { autocompleteBox.style.display = "block"; autocompleteBox.innerHTML = users.map((user) => `<div class="mention" data-username="@${user.name}" data-userid="${user.id}">${user.name}</div>`).join(""); autocompleteBox.querySelectorAll(".mention").forEach((item) => { item.addEventListener("click", function () { const userid = this.getAttribute("data-userid"); const username = this.getAttribute("data-username"); const mentionSpan = range.startContainer.parentNode.closest("span.mention"); if (mentionSpan) { mentionSpan.setAttribute("data-userid", userid); mentionSpan.innerHTML = username; } else { const mentionHTML = `<span class="mention" data-userid="${userid}">${username}</span>`; editor.setContent(content.replace(matchMention[0], mentionHTML + " ")); } autocompleteBox.style.display = "none"; }); }); } } else { autocompleteBox.style.display = "none"; } } else { autocompleteBox.style.display = "none"; } }); document.addEventListener("click", function () { autocompleteBox.style.display = "none"; }); }); ``` custom-style.css ```css .mention { color: #007bff; font-weight: bold; cursor: pointer; } .mention:hover { text-decoration: underline; } .autocomplete-box { background: white; padding: 2px; border: 1px solid #ccc; } ```

OVERLORD commented 2026-02-04 20:21:13 +03:00

Author

Owner

Copy Link

@davidejalexander commented on GitHub (Mar 5, 2025):

+1 for this feature @username whenever it is possible to get it onto the work list.

@davidejalexander commented on GitHub (Mar 5, 2025): +1 for this feature @username whenever it is possible to get it onto the work list.

OVERLORD commented 2026-02-04 20:21:20 +03:00

Author

Owner

Copy Link

@WiredWonder commented on GitHub (Mar 14, 2025):

+1 we want this too.

@WiredWonder commented on GitHub (Mar 14, 2025): +1 we want this too.

OVERLORD commented 2026-02-04 20:21:30 +03:00

Author

Owner

Copy Link

@michealrm commented on GitHub (Mar 26, 2025):

+1, would make great use out of e-mail notifications and is necessary for efficient collaboration

@michealrm commented on GitHub (Mar 26, 2025): +1, would make great use out of e-mail notifications and is necessary for efficient collaboration

OVERLORD commented 2026-02-04 20:21:35 +03:00

Author

Owner

Copy Link

@RajaRoshaan commented on GitHub (May 15, 2025):

Is this feature implemented or not? Along with this, if someone adds a comment to someone else's page then do they get an email notification or something? Without it, we would never know if someone added a comment without check the mage manually.

@RajaRoshaan commented on GitHub (May 15, 2025): Is this feature implemented or not? Along with this, if someone adds a comment to someone else's page then do they get an email notification or something? Without it, we would never know if someone added a comment without check the mage manually.

OVERLORD commented 2026-02-04 20:21:39 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (May 15, 2025):

Is this feature implemented or not?

@RajaRoshaan No, hence why this issue is still open.
Having a WYSIWYG editor for comments was a requirement for this, which did get added, but we then had to move editors, which is a pending requirement (should be something I do sometime in the next few feature releases).

Along with this, if someone adds a comment to someone else's page then do they get an email notification or something?

There are notification preference options for comments on owned pages, as well as comment replies.
These need to be enabled in the user's "My Account" area, and the user will need the "Receive/manage notifications" system permission in one of their roles for these options to show.

@ssddanbrown commented on GitHub (May 15, 2025): > Is this feature implemented or not? @RajaRoshaan No, hence why this issue is still open. Having a WYSIWYG editor for comments was a requirement for this, which did get added, but we then had to move editors, which is a pending requirement (should be something I do sometime in the next few feature releases). > Along with this, if someone adds a comment to someone else's page then do they get an email notification or something? There are notification preference options for comments on owned pages, as well as comment replies. These need to be enabled in the user's "My Account" area, and the user will need the "Receive/manage notifications" system permission in one of their roles for these options to show.

OVERLORD commented 2026-02-04 20:21:47 +03:00

Author

Owner

Copy Link

@prohtex commented on GitHub (Jun 23, 2025):

Hello, I propose a code from my custom theme to mention @username

I guess, with Webhooks, it's possible to listen new|edit page to read @username and send a email or store in new table to have a notification page for current user/admin

custom_theme/functions.php

<?php use BookStack\Entities\Controllers as EntityControllers; use BookStack\Facades\Theme; use BookStack\Theming\ThemeEvents; use Illuminate\Support\Facades\Route; use Custom\Controllers as CustomControllers; Theme::listen(ThemeEvents::ROUTES_REGISTER_WEB, function ($app) { Route::middleware('auth')->group(function () { Route::get('/api/users/search', [CustomControllers\UserController::class, 'searchUsers']); }); }); custom_theme/Controllers/UserController.php <?php namespace Custom\Controllers; use BookStack\Http\Controller; use BookStack\Users\Models\User; use Illuminate\Http\Request; class UserController extends Controller { public function searchUsers(Request $request) { $query = $request->get('query', ''); $users = User::where('name', 'like', '%' . $query . '%')->limit(10)->get(['id', 'name']); return response()->json($users); } } custom-script.js function getCaretCoordinatesInTinyMCE(editor) { const selection = editor.selection.getRng(); if (!selection) { return null; } const rangeRect = selection.getBoundingClientRect(); const iframe = editor.iframeElement; const iframeRect = iframe.getBoundingClientRect(); return { top: iframeRect.top + rangeRect.bottom + window.scrollY, left: iframeRect.left + rangeRect.left + window.scrollX, }; } document.addEventListener("editor-tinymce::setup", (event) => { const editor = event.detail.editor; const autocompleteBox = document.createElement("div"); autocompleteBox.style.position = "absolute"; autocompleteBox.style.zIndex = "1000"; autocompleteBox.style.display = "none"; autocompleteBox.classList.add("autocomplete-box"); document.body.appendChild(autocompleteBox); editor.on("keyup", async function (e) { const content = editor.getContent(); const caretCoordinates = getCaretCoordinatesInTinyMCE(editor); autocompleteBox.style.left = `${caretCoordinates.left}px`; autocompleteBox.style.top = `${caretCoordinates.top}px`; const selection = editor.selection; const range = selection.getRng(); const textBeforeCaret = range.startContainer.textContent.slice(0, range.startOffset); const matchMention = textBeforeCaret.match(/@([a-zA-Z0-9\._\s]+)/); if (matchMention) { const query = matchMention[1]; if (query.length > 0) { const response = await fetch(`/api/users/search?query=${query}`); const users = await response.json(); autocompleteBox.style.display = "none"; if (users.length > 0) { autocompleteBox.style.display = "block"; autocompleteBox.innerHTML = users.map((user) => `

${user.name}

`).join(""); autocompleteBox.querySelectorAll(".mention").forEach((item) => { item.addEventListener("click", function () { const userid = this.getAttribute("data-userid"); const username = this.getAttribute("data-username"); const mentionSpan = range.startContainer.parentNode.closest("span.mention"); if (mentionSpan) { mentionSpan.setAttribute("data-userid", userid); mentionSpan.innerHTML = username; } else { const mentionHTML = `${username}`; editor.setContent(content.replace(matchMention[0], mentionHTML + " ")); } autocompleteBox.style.display = "none"; }); }); } } else { autocompleteBox.style.display = "none"; } } else { autocompleteBox.style.display = "none"; } }); document.addEventListener("click", function () { autocompleteBox.style.display = "none"; }); }); custom-style.css .mention { color: #007bff; font-weight: bold; cursor: pointer; } .mention:hover { text-decoration: underline; } .autocomplete-box { background: white; padding: 2px; border: 1px solid #ccc; }

This is working pretty well for me. @ssddanbrown love the notifications on owned pages, but in many cases we are @ mentioning users in pages themselves, and it would be amazing for them to receive an email

@prohtex commented on GitHub (Jun 23, 2025): > Hello, I propose a code from my custom theme to mention @username > > I guess, with Webhooks, it's possible to listen `new|edit page` to read @username and send a email or store in new table to have a notification page for current user/admin > > custom_theme/functions.php > > <?php > > use BookStack\Entities\Controllers as EntityControllers; > use BookStack\Facades\Theme; > use BookStack\Theming\ThemeEvents; > use Illuminate\Support\Facades\Route; > > use Custom\Controllers as CustomControllers; > > Theme::listen(ThemeEvents::ROUTES_REGISTER_WEB, function ($app) { > Route::middleware('auth')->group(function () { > Route::get('/api/users/search', [CustomControllers\UserController::class, 'searchUsers']); > }); > }); > custom_theme/Controllers/UserController.php > > <?php > > namespace Custom\Controllers; > > use BookStack\Http\Controller; > use BookStack\Users\Models\User; > use Illuminate\Http\Request; > > class UserController extends Controller > { > public function searchUsers(Request $request) > { > $query = $request->get('query', ''); > $users = User::where('name', 'like', '%' . $query . '%')->limit(10)->get(['id', 'name']); > return response()->json($users); > } > } > custom-script.js > > function getCaretCoordinatesInTinyMCE(editor) { > const selection = editor.selection.getRng(); > if (!selection) { > return null; > } > > const rangeRect = selection.getBoundingClientRect(); > > const iframe = editor.iframeElement; > const iframeRect = iframe.getBoundingClientRect(); > > return { > top: iframeRect.top + rangeRect.bottom + window.scrollY, > left: iframeRect.left + rangeRect.left + window.scrollX, > }; > } > > document.addEventListener("editor-tinymce::setup", (event) => { > const editor = event.detail.editor; > > const autocompleteBox = document.createElement("div"); > autocompleteBox.style.position = "absolute"; > autocompleteBox.style.zIndex = "1000"; > autocompleteBox.style.display = "none"; > autocompleteBox.classList.add("autocomplete-box"); > document.body.appendChild(autocompleteBox); > > editor.on("keyup", async function (e) { > const content = editor.getContent(); > const caretCoordinates = getCaretCoordinatesInTinyMCE(editor); > autocompleteBox.style.left = `${caretCoordinates.left}px`; > autocompleteBox.style.top = `${caretCoordinates.top}px`; > > const selection = editor.selection; > const range = selection.getRng(); > const textBeforeCaret = range.startContainer.textContent.slice(0, range.startOffset); > > const matchMention = textBeforeCaret.match(/@([a-zA-Z0-9\._\s]+)/); > > if (matchMention) { > const query = matchMention[1]; > if (query.length > 0) { > const response = await fetch(`/api/users/search?query=${query}`); > const users = await response.json(); > > autocompleteBox.style.display = "none"; > > if (users.length > 0) { > autocompleteBox.style.display = "block"; > autocompleteBox.innerHTML = users.map((user) => `<div class="mention" data-username="@${user.name}" data-userid="${user.id}">${user.name}</div>`).join(""); > > autocompleteBox.querySelectorAll(".mention").forEach((item) => { > item.addEventListener("click", function () { > const userid = this.getAttribute("data-userid"); > const username = this.getAttribute("data-username"); > > const mentionSpan = range.startContainer.parentNode.closest("span.mention"); > if (mentionSpan) { > mentionSpan.setAttribute("data-userid", userid); > mentionSpan.innerHTML = username; > } else { > const mentionHTML = `<span class="mention" data-userid="${userid}">${username}</span>`; > editor.setContent(content.replace(matchMention[0], mentionHTML + " ")); > } > > autocompleteBox.style.display = "none"; > }); > }); > } > } else { > autocompleteBox.style.display = "none"; > } > } else { > autocompleteBox.style.display = "none"; > } > }); > > document.addEventListener("click", function () { > autocompleteBox.style.display = "none"; > }); > }); > custom-style.css > > .mention { > color: #007bff; > font-weight: bold; > cursor: pointer; > } > > .mention:hover { > text-decoration: underline; > } > > .autocomplete-box { > background: white; > padding: 2px; > border: 1px solid #ccc; > } This is working pretty well for me. @ssddanbrown love the notifications on owned pages, but in many cases we are @ mentioning users in pages themselves, and it would be amazing for them to receive an email

OVERLORD commented 2026-02-04 20:21:56 +03:00

Author

Owner

Copy Link

@Kofl commented on GitHub (Aug 18, 2025):

+1

@Kofl commented on GitHub (Aug 18, 2025): +1

OVERLORD commented 2026-02-04 20:22:02 +03:00

Author

Owner

Copy Link

@cittadhammo commented on GitHub (Nov 7, 2025):

+1

@cittadhammo commented on GitHub (Nov 7, 2025): +1

OVERLORD commented 2026-02-04 20:22:04 +03:00

Author

Owner

Copy Link

@david-prv commented on GitHub (Nov 10, 2025):

+1

@david-prv commented on GitHub (Nov 10, 2025): +1

OVERLORD commented 2026-02-04 20:22:13 +03:00

Author

Owner

Copy Link

@ssddanbrown commented on GitHub (Dec 18, 2025):

With the merge of #5944, mentions in comments has now been added and will be part of the next feature release.
I'm going to therefore close this off.

I'm aware this issue was a bit wider though, with the ability to mention from pages/content, bit it's hard to distinguish that need relative to mentions in comments, so please feel free to open/support new specific issues for mentions elsewhere.

Also, from reading some of the above, some of the support here has been for general new-comment notifications (rather than mentions) which have been available since v23.08 as detailed here: https://www.bookstackapp.com/blog/bookstack-release-v23-08/#content-notification-system

@ssddanbrown commented on GitHub (Dec 18, 2025): With the merge of #5944, mentions in comments has now been added and will be part of the next feature release. I'm going to therefore close this off. I'm aware this issue was a bit wider though, with the ability to mention from pages/content, bit it's hard to distinguish that need relative to mentions in comments, so please feel free to open/support new specific issues for mentions elsewhere. Also, from reading some of the above, some of the support here has been for general new-comment notifications (rather than mentions) which have been available since v23.08 as detailed here: https://www.bookstackapp.com/blog/bookstack-release-v23-08/#content-notification-system

OVERLORD referenced this issue 2026-02-05 10:13:15 +03:00

[PR #474] [MERGED] Update and fix German translation #5650

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

development

l10n_development

release

llm_only

vectors

v25-11

docker_env

drawio_rendering

user_permissions

ldap_host_failover

svg_image

prosemirror

captcha_example

fix/video-export

v25.12.3

v25.12.2

v25.12.1

v25.12

v25.11.6

v25.11.5

v25.11.4

v24.11.4

v25.11.3

v25.11.2

v25.11.1

v25.11

v25.07.3

v25.07.2

v25.07.1

v25.07

v25.05.2

v25.05.1

v25.05

v25.02.5

v25.02.4

v25.02.3

v25.02.2

v25.02.1

v25.02

v24.12.1

v24.12

v24.10.3

v24.10.2

v24.10.1

v24.10

v24.05.4

v24.05.3

v24.05.2

v24.05.1

v24.05

v24.02.3

v24.02.2

v24.02.1

v24.02

v23.12.3

v23.12.2

v23.12.1

v23.12

v23.10.4

v23.10.3

v23.10.2

v23.10.1

v23.10

v23.08.3

v23.08.2

v23.08.1

v23.08

v23.06.2

v23.06.1

v23.06

v23.05.2

v23.05.1

v23.05

v23.02.3

v23.02.2

v23.02.1

v23.02

v23.01.1

v23.01

v22.11.1

v22.11

v22.10.2

v22.10.1

v22.10

v22.09.1

v22.09

v22.07.3

v22.07.2

v22.07.1

v22.07

v22.06.2

v22.06.1

v22.06

v22.04.2

v22.04.1

v22.04

v22.03.1

v22.03

v22.02.3

v22.02.2

v22.02.1

v22.02

v21.12.5

v21.12.4

v21.12.3

v21.12.2

v21.12.1

v21.12

v21.11.3

v21.11.2

v21.11.1

v21.11

v21.10.3

v21.10.2

v21.10.1

v21.10

v21.08.6

v21.08.5

v21.08.4

v21.08.3

v21.08.2

v21.08.1

v21.08

v21.05.4

v21.05.3

v21.05.2

v21.05.1

v21.05

v21.04.6

v21.04.5

v21.04.4

v21.04.3

v21.04.2

v21.04.1

v21.04

v0.31.8

v0.31.7

v0.31.6

v0.31.5

v0.31.4

v0.31.3

v0.31.2

v0.31.1

v0.31.0

v0.30.7

v0.30.6

v0.30.5

v0.30.4

v0.30.3

v0.30.2

v0.30.1

v0.30.0

v0.29.3

v0.29.2

v0.29.1

v0.29.0

v0.28.3

v0.28.2

v0.28.1

v0.28.0

v0.27.5

v0.27.4

v0.27.3

v0.27.2

v0.27.1

v0.27

v0.26.4

v0.26.3

v0.26.2

v0.26.1

v0.26.0

v0.25.5

v0.25.4

v0.25.3

v0.25.2

v0.25.1

v0.25.0

v0.24.3

v0.24.2

v0.24.1

v0.24.0

v0.23.2

v0.23.1

v0.23.0

v0.22.0

v0.21.0

v0.20.3

v0.20.2

v0.20.1

v0.20.0

v0.19.0

v0.18.5

v0.18.4

v0.18.3

v0.18.2

v0.18.1

v0.18.0

v0.17.4

v0.17.3

v0.17.2

v0.17.1

v0.17.0

v0.16.3

v0.16.2

v0.16.1

v0.16.0

v0.15.3

v0.15.2

v0.15.1

v0.15.0

v0.14.3

v0.14.2

v0.14.1

v0.14.0

v0.13.1

v0.13.0

v0.12.2

v0.12.1

v0.12.0

v0.11.2

v0.11.1

v0.11.0

v0.10.0

v0.9.3

v0.9.2

v0.9.1

v0.9.0

v0.8.2

v0.8.1

v0.8.0

v0.7.6

v0.7.5

v0.7.4

v0.7.3

0.7.2

v.0.7.1

v0.7.0

v0.6.3

v0.6.2

v0.6.1

v0.6.0

v0.5.0

Labels

Clear labels

🎨 Design

📖 Docs Update

🐛 Bug

🐛 Bug

:cat2:🐈 Possible duplicate

💿 Database

☕ Open to discussion

💻 Front-End

🐕 Support

🚪 Authentication

🌍 Translations

🔌 API Task

🏭 Back-End

⛲ Upstream

🔨 Feature Request

🛠️ Enhancement

🛠️ Enhancement

🛠️ Enhancement

❤️ Happy feedback

🔒 Security

🔍 Pending Validation

💆 UX

📝 WYSIWYG Editor

🌔 Out of scope

🔩 API Request

:octocat: Admin/Meta

🖌️ View Customization

❓ Question

🚀 Priority

🛡️ Blocked

🚚 Export System

♿ A11y

🔧 Maintenance

> Markdown Editor

pull-request

Mirrored from GitHub Pull Request

No Label 🔨 Feature Request

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

OVERLORD

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#474