webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Comments: Switched to lexical editor

Browse Source 
Required a lot of changes to provide at least a decent attempt at proper
editor teardown control.
Also updates HtmlDescriptionFilter and testing to address issue with bad
child iteration which could lead to missed items.
Renamed editor version from comments to basic as it'll also be used for
item descriptions.
This commit is contained in:
Dan Brown
2025-06-25 14:16:01 +01:00
parent c606970e38
commit b80992ca59
16 changed files with 176 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
resources/js/wysiwyg/index.ts
View File

@ -2,9 +2,9 @@ import {createEditor, LexicalEditor} from 'lexical';
import {createEmptyHistoryState, registerHistory} from '@lexical/history';
import {registerRichText} from '@lexical/rich-text';
import {mergeRegister} from '@lexical/utils';
import {getNodesForPageEditor, registerCommonNodeMutationListeners} from './nodes';
import {getNodesForBasicEditor, getNodesForPageEditor, registerCommonNodeMutationListeners} from './nodes';
import {buildEditorUI} from "./ui";
import {getEditorContentAsHtml, setEditorContentFromHtml} from "./utils/actions";
import {focusEditor, getEditorContentAsHtml, setEditorContentFromHtml} from "./utils/actions";
import {registerTableResizer} from "./ui/framework/helpers/table-resizer";
import {EditorUiContext} from "./ui/framework/core";
import {listen as listenToCommonEvents} from "./services/common-events";
@ -15,7 +15,7 @@ import {registerShortcuts} from "./services/shortcuts";
import {registerNodeResizer} from "./ui/framework/helpers/node-resizer";
import {registerKeyboardHandling} from "./services/keyboard-handling";
import {registerAutoLinks} from "./services/auto-links";
import {contextToolbars, getMainEditorFullToolbar} from "./ui/defaults/toolbars";
import {contextToolbars, getBasicEditorToolbar, getMainEditorFullToolbar} from "./ui/defaults/toolbars";
import {modals} from "./ui/defaults/modals";
import {CodeBlockDecorator} from "./ui/decorators/code-block";
import {DiagramDecorator} from "./ui/decorators/diagram";
@ -90,20 +90,20 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
registerCommonNodeMutationListeners(context);
return new SimpleWysiwygEditorInterface(editor);
return new SimpleWysiwygEditorInterface(context);
}
export function createCommentEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
export function createBasicEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
const editor = createEditor({
namespace: 'BookStackCommentEditor',
nodes: getNodesForPageEditor(),
namespace: 'BookStackBasicEditor',
nodes: getNodesForBasicEditor(),
onError: console.error,
theme: theme,
});
const context: EditorUiContext = buildEditorUI(container, editor, options);
editor.setRootElement(context.editorDOM);
mergeRegister(
const editorTeardown = mergeRegister(
registerRichText(editor),
registerHistory(editor, createEmptyHistoryState(), 300),
registerShortcuts(context),
@ -111,23 +111,33 @@ export function createCommentEditorInstance(container: HTMLElement, htmlContent:
);
// Register toolbars, modals & decorators
context.manager.setToolbar(getMainEditorFullToolbar(context)); // TODO - Create comment toolbar
context.manager.setToolbar(getBasicEditorToolbar(context));
context.manager.registerContextToolbar('link', contextToolbars.link);
context.manager.registerModal('link', modals.link);
context.manager.onTeardown(editorTeardown);
setEditorContentFromHtml(editor, htmlContent);
return new SimpleWysiwygEditorInterface(editor);
return new SimpleWysiwygEditorInterface(context);
}
export class SimpleWysiwygEditorInterface {
protected editor: LexicalEditor;
protected context: EditorUiContext;
constructor(editor: LexicalEditor) {
this.editor = editor;
constructor(context: EditorUiContext) {
this.context = context;
}
async getContentAsHtml(): Promise<string> {
return await getEditorContentAsHtml(this.editor);
return await getEditorContentAsHtml(this.context.editor);
}
focus(): void {
focusEditor(this.context.editor);
}
remove() {
this.context.editorDOM.remove();
this.context.manager.teardown();
}
}