Mentions: Added new endpoint, Built editor list display

app/Users/Controllers/UserSearchController.php

@@ -5,6 +5,7 @@ namespace BookStack\Users\Controllers;
 use BookStack\Http\Controller;
 use BookStack\Permissions\Permission;
 use BookStack\Users\Models\User;
+use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Http\Request;
 
 class UserSearchController extends Controller
@@ -34,8 +35,43 @@ class UserSearchController extends Controller
             $query->where('name', 'like', '%' . $search . '%');
         }
 
+        /** @var Collection<User> $users */
+        $users = $query->get();
+
         return view('form.user-select-list', [
-            'users' => $query->get(),
+            'users' => $users,
+        ]);
+    }
+
+    /**
+     * Search users in the system, with the response formatted
+     * for use in a list of mentions.
+     */
+    public function forMentions(Request $request)
+    {
+        $hasPermission = !user()->isGuest() && (
+                userCan(Permission::CommentCreateAll)
+                || userCan(Permission::CommentUpdate)
+            );
+
+        if (!$hasPermission) {
+            $this->showPermissionError();
+        }
+
+        $search = $request->get('search', '');
+        $query = User::query()
+            ->orderBy('name', 'asc')
+            ->take(20);
+
+        if (!empty($search)) {
+            $query->where('name', 'like', '%' . $search . '%');
+        }
+
+        /** @var Collection<User> $users */
+        $users = $query->get();
+
+        return view('form.user-mention-list', [
+            'users' => $users,
         ]);
     }
 }

resources/js/wysiwyg/index.ts

@@ -160,7 +160,7 @@ export function createCommentEditorInstance(container: HTMLElement, htmlContent:
         registerHistory(editor, createEmptyHistoryState(), 300),
         registerShortcuts(context),
         registerAutoLinks(editor),
-        registerMentions(editor),
+        registerMentions(context),
     );
 
     // Register toolbars, modals & decorators

resources/js/wysiwyg/lexical/core/LexicalCommands.ts

@@ -78,6 +78,8 @@ export const KEY_ESCAPE_COMMAND: LexicalCommand<KeyboardEvent> =
   createCommand('KEY_ESCAPE_COMMAND');
 export const KEY_DELETE_COMMAND: LexicalCommand<KeyboardEvent> =
   createCommand('KEY_DELETE_COMMAND');
+export const KEY_AT_COMMAND: LexicalCommand<KeyboardEvent> =
+    createCommand('KEY_AT_COMMAND');
 export const KEY_TAB_COMMAND: LexicalCommand<KeyboardEvent> =
   createCommand('KEY_TAB_COMMAND');
 export const INSERT_TAB_COMMAND: LexicalCommand<void> =

resources/js/wysiwyg/lexical/core/LexicalEvents.ts

@@ -67,7 +67,7 @@ import {
   SELECTION_CHANGE_COMMAND,
   UNDO_COMMAND,
 } from '.';
-import {KEY_MODIFIER_COMMAND, SELECT_ALL_COMMAND} from './LexicalCommands';
+import {KEY_AT_COMMAND, KEY_MODIFIER_COMMAND, SELECT_ALL_COMMAND} from './LexicalCommands';
 import {
   COMPOSITION_START_CHAR,
   DOM_ELEMENT_TYPE,
@@ -97,7 +97,7 @@ import {
   getEditorPropertyFromDOMNode,
   getEditorsToPropagate,
   getNearestEditorFromDOMNode,
-  getWindow,
+  getWindow, isAt,
   isBackspace,
   isBold,
   isCopy,
@@ -1062,6 +1062,8 @@ function onKeyDown(event: KeyboardEvent, editor: LexicalEditor): void {
   } else if (isDeleteLineForward(key, metaKey)) {
     event.preventDefault();
     dispatchCommand(editor, DELETE_LINE_COMMAND, false);
+  } else if (isAt(key)) {
+    dispatchCommand(editor, KEY_AT_COMMAND, event);
   } else if (isBold(key, altKey, metaKey, ctrlKey)) {
     event.preventDefault();
     dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'bold');

resources/js/wysiwyg/lexical/core/LexicalUtils.ts

@@ -1056,6 +1056,10 @@ export function isDelete(key: string): boolean {
   return key === 'Delete';
 }
 
+export function isAt(key: string): boolean {
+  return key === '@';
+}
+
 export function isSelectAll(
   key: string,
   metaKey: boolean,

resources/js/wysiwyg/services/mentions.ts

@@ -1,17 +1,175 @@
-import {LexicalEditor, TextNode} from "lexical";
+import {
+    $createTextNode,
+    $getSelection, $isRangeSelection,
+    COMMAND_PRIORITY_NORMAL, RangeSelection, TextNode
+} from "lexical";
+import {KEY_AT_COMMAND} from "lexical/LexicalCommands";
+import {$createMentionNode} from "@lexical/link/LexicalMentionNode";
+import {el, htmlToDom} from "../utils/dom";
+import {EditorUiContext} from "../ui/framework/core";
+import {debounce} from "../../services/util";
+import {removeLoading, showLoading} from "../../services/dom";
 
 
-export function registerMentions(editor: LexicalEditor): () => void {
+function enterUserSelectMode(context: EditorUiContext, selection: RangeSelection) {
+    const textNode = selection.getNodes()[0] as TextNode;
+    const selectionPos = selection.getStartEndPoints();
+    if (!selectionPos) {
+        return;
+    }
 
-    const unregisterTransform = editor.registerNodeTransform(TextNode, (node: TextNode) =>{
+    const offset = selectionPos[0].offset;
-        console.log(node);
+
-        // TODO - If last character is @, show autocomplete selector list of users.
+    // Ignore if the @ sign is not after a space or the start of the line
-          // Filter list by any extra characters entered.
+    const atStart = offset === 0;
-          // On enter, replace with name mention element.
+    const afterSpace = textNode.getTextContent().charAt(offset - 1) === ' ';
-          // On space/escape, hide autocomplete list.
+    if (!atStart && !afterSpace) {
+        return;
+    }
+
+    const split = textNode.splitText(offset);
+    const newNode = split[atStart ? 0 : 1];
+
+    const mention = $createMentionNode(0, '', '');
+    newNode.replace(mention);
+    mention.select();
+
+    const revertEditorMention = () => {
+        context.editor.update(() => {
+            const text = $createTextNode('@');
+            mention.replace(text);
+            text.selectEnd();
+        });
+    };
+
+    requestAnimationFrame(() => {
+        const mentionDOM = context.editor.getElementByKey(mention.getKey());
+        if (!mentionDOM) {
+            revertEditorMention();
+            return;
+        }
+
+        const selectList = buildAndShowUserSelectorAtElement(context, mentionDOM);
+        handleUserListLoading(selectList);
+        handleUserSelectCancel(context, selectList, revertEditorMention);
     });
 
+
+    // TODO - On enter, replace with name mention element.
+}
+
+function handleUserSelectCancel(context: EditorUiContext, selectList: HTMLElement, revertEditorMention: () => void) {
+    const controller = new AbortController();
+
+    const onCancel = () => {
+        revertEditorMention();
+        selectList.remove();
+        controller.abort();
+    }
+
+    selectList.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+            onCancel();
+        }
+    }, {signal: controller.signal});
+
+    const input = selectList.querySelector('input') as HTMLInputElement;
+    input.addEventListener('keydown', (event) => {
+        if (event.key === 'Backspace' && input.value === '') {
+            onCancel();
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, {signal: controller.signal});
+
+    context.editorDOM.addEventListener('click', (event) => {
+        onCancel()
+    }, {signal: controller.signal});
+    context.editorDOM.addEventListener('keydown', (event) => {
+        onCancel();
+    }, {signal: controller.signal});
+}
+
+function handleUserListLoading(selectList: HTMLElement) {
+    const cache = new Map<string, string>();
+
+    const updateUserList = async (searchTerm: string) => {
+        // Empty list
+        for (const child of [...selectList.children].slice(1)) {
+            child.remove();
+        }
+
+        // Fetch new content
+        let responseHtml = '';
+        if (cache.has(searchTerm)) {
+            responseHtml = cache.get(searchTerm) || '';
+        } else {
+            const loadingWrap = el('li');
+            showLoading(loadingWrap);
+            selectList.appendChild(loadingWrap);
+
+            const resp = await window.$http.get(`/search/users/mention?search=${searchTerm}`);
+            responseHtml = resp.data as string;
+            cache.set(searchTerm, responseHtml);
+            loadingWrap.remove();
+        }
+
+        const doc = htmlToDom(responseHtml);
+        const toInsert = doc.querySelectorAll('li');
+        for (const listEl of toInsert) {
+            const adopted = window.document.adoptNode(listEl) as HTMLElement;
+            selectList.appendChild(adopted);
+        }
+
+    };
+
+    // Initial load
+    updateUserList('');
+
+    const input = selectList.querySelector('input') as HTMLInputElement;
+    const updateUserListDebounced = debounce(updateUserList, 200, false);
+    input.addEventListener('input', () => {
+        const searchTerm = input.value;
+        updateUserListDebounced(searchTerm);
+    });
+}
+
+function buildAndShowUserSelectorAtElement(context: EditorUiContext, mentionDOM: HTMLElement): HTMLElement {
+    const searchInput = el('input', {type: 'text'});
+    const searchItem = el('li', {}, [searchInput]);
+    const userSelect = el('ul', {class: 'suggestion-box dropdown-menu'}, [searchItem]);
+
+    context.containerDOM.appendChild(userSelect);
+
+    userSelect.style.display = 'block';
+    userSelect.style.top = '0';
+    userSelect.style.left = '0';
+    const mentionPos = mentionDOM.getBoundingClientRect();
+    const userSelectPos = userSelect.getBoundingClientRect();
+    userSelect.style.top = `${mentionPos.bottom - userSelectPos.top + 3}px`;
+    userSelect.style.left = `${mentionPos.left - userSelectPos.left}px`;
+
+    searchInput.focus();
+
+    return userSelect;
+}
+
+export function registerMentions(context: EditorUiContext): () => void {
+    const editor = context.editor;
+
+    const unregisterCommand = editor.registerCommand(KEY_AT_COMMAND, function (event: KeyboardEvent): boolean {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection) && selection.isCollapsed()) {
+            window.setTimeout(() => {
+                editor.update(() => {
+                    enterUserSelectMode(context, selection);
+                });
+            }, 1);
+        }
+        return false;
+    }, COMMAND_PRIORITY_NORMAL);
+
     return (): void => {
-        unregisterTransform();
+        unregisterCommand();
     };
 }

resources/views/form/user-mention-list.blade.php

@@ -0,0 +1,16 @@
+@if($users->isEmpty())
+<li class="px-s py-xs">
+    <span>{{ trans('common.no_items') }}</span>
+</li>
+@endif
+@foreach($users as $user)
+<li>
+    <a href="{{ $user->getProfileUrl() }}" class="flex-container-row items-center dropdown-search-item"
+       data-id="{{ $user->id }}"
+       data-name="{{ $user->name }}"
+       data-slug="{{ $user->slug }}">
+        <img class="avatar mr-m" src="{{ $user->getAvatar(30) }}" alt="{{ $user->name }}">
+        <span>{{ $user->name }}</span>
+    </a>
+</li>
+@endforeach

routes/web.php

@@ -198,6 +198,7 @@ Route::middleware('auth')->group(function () {
 
     // User Search
     Route::get('/search/users/select', [UserControllers\UserSearchController::class, 'forSelect']);
+    Route::get('/search/users/mention', [UserControllers\UserSearchController::class, 'forMentions']);
 
     // Template System
     Route::get('/templates', [EntityControllers\PageTemplateController::class, 'list']);