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

Merge pull request #5676 from BookStackApp/lexical_comments

Browse Source 
New WYSIWYG editor for comments & descriptions
This commit is contained in:
Dan Brown
2025-07-09 18:01:25 +01:00
committed by GitHub
parent d279b0830b a37d0c57dc
commit 4b9e6042d5
26 changed files with 388 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
resources/js/components/page-comment.ts
View File

@ -1,8 +1,9 @@
import {Component} from './component';
import {getLoading, htmlToDom} from '../services/dom';
import {buildForInput} from '../wysiwyg-tinymce/config';
import {PageCommentReference} from "./page-comment-reference";
import {HttpError} from "../services/http";
import {SimpleWysiwygEditorInterface} from "../wysiwyg";
import {el} from "../wysiwyg/utils/dom";
export interface PageCommentReplyEventData {
id: string; // ID of comment being replied to
@ -21,8 +22,7 @@ export class PageComment extends Component {
protected updatedText!: string;
protected archiveText!: string;
protected wysiwygEditor: any = null;
protected wysiwygLanguage!: string;
protected wysiwygEditor: SimpleWysiwygEditorInterface|null = null;
protected wysiwygTextDirection!: string;
protected container!: HTMLElement;
@ -44,7 +44,6 @@ export class PageComment extends Component {
this.archiveText = this.$opts.archiveText;
// Editor reference and text options
this.wysiwygLanguage = this.$opts.wysiwygLanguage;
this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
// Element references
@ -90,7 +89,7 @@ export class PageComment extends Component {
this.form.toggleAttribute('hidden', !show);
}
protected startEdit() : void {
protected async startEdit(): Promise<void> {
this.toggleEditMode(true);
if (this.wysiwygEditor) {
@ -98,21 +97,20 @@ export class PageComment extends Component {
return;
}
const config = buildForInput({
language: this.wysiwygLanguage,
containerElement: this.input,
type WysiwygModule = typeof import('../wysiwyg');
const wysiwygModule = (await window.importVersioned('wysiwyg')) as WysiwygModule;
const editorContent = this.input.value;
const container = el('div', {class: 'comment-editor-container'});
this.input.parentElement?.appendChild(container);
this.input.hidden = true;
this.wysiwygEditor = wysiwygModule.createBasicEditorInstance(container as HTMLElement, editorContent, {
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.wysiwygTextDirection,
drawioUrl: '',
pageId: 0,
translations: {},
translationMap: (window as unknown as Record<string, Object>).editor_translations,
textDirection: this.$opts.textDirection,
translations: (window as unknown as Record<string, Object>).editor_translations,
});
(window as unknown as {tinymce: {init: (arg0: Object) => Promise<any>}}).tinymce.init(config).then(editors => {
this.wysiwygEditor = editors[0];
setTimeout(() => this.wysiwygEditor.focus(), 50);
});
this.wysiwygEditor.focus();
}
protected async update(event: Event): Promise<void> {
@ -121,7 +119,7 @@ export class PageComment extends Component {
this.form.toggleAttribute('hidden', true);
const reqData = {
html: this.wysiwygEditor.getContent(),
html: await this.wysiwygEditor?.getContentAsHtml() || '',
};
try {

33
resources/js/components/page-comments.ts
View File

@ -1,10 +1,11 @@
import {Component} from './component';
import {getLoading, htmlToDom} from '../services/dom';
import {buildForInput} from '../wysiwyg-tinymce/config';
import {Tabs} from "./tabs";
import {PageCommentReference} from "./page-comment-reference";
import {scrollAndHighlightElement} from "../services/util";
import {PageCommentArchiveEventData, PageCommentReplyEventData} from "./page-comment";
import {el} from "../wysiwyg/utils/dom";
import {SimpleWysiwygEditorInterface} from "../wysiwyg";
export class PageComments extends Component {
@ -28,9 +29,8 @@ export class PageComments extends Component {
private hideFormButton!: HTMLElement;
private removeReplyToButton!: HTMLElement;
private removeReferenceButton!: HTMLElement;
private wysiwygLanguage!: string;
private wysiwygTextDirection!: string;
private wysiwygEditor: any = null;
private wysiwygEditor: SimpleWysiwygEditorInterface|null = null;
private createdText!: string;
private countText!: string;
private archivedCountText!: string;
@ -63,7 +63,6 @@ export class PageComments extends Component {
this.removeReferenceButton = this.$refs.removeReferenceButton;
// WYSIWYG options
this.wysiwygLanguage = this.$opts.wysiwygLanguage;
this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
// Translations
@ -107,7 +106,7 @@ export class PageComments extends Component {
}
}
protected saveComment(event: SubmitEvent): void {
protected async saveComment(event: SubmitEvent): Promise<void> {
event.preventDefault();
event.stopPropagation();
@ -117,7 +116,7 @@ export class PageComments extends Component {
this.form.toggleAttribute('hidden', true);
const reqData = {
html: this.wysiwygEditor.getContent(),
html: (await this.wysiwygEditor?.getContentAsHtml()) || '',
parent_id: this.parentId || null,
content_ref: this.contentReference,
};
@ -189,27 +188,25 @@ export class PageComments extends Component {
this.addButtonContainer.toggleAttribute('hidden', false);
}
protected loadEditor(): void {
protected async loadEditor(): Promise<void> {
if (this.wysiwygEditor) {
this.wysiwygEditor.focus();
return;
}
const config = buildForInput({
language: this.wysiwygLanguage,
containerElement: this.formInput,
type WysiwygModule = typeof import('../wysiwyg');
const wysiwygModule = (await window.importVersioned('wysiwyg')) as WysiwygModule;
const container = el('div', {class: 'comment-editor-container'});
this.formInput.parentElement?.appendChild(container);
this.formInput.hidden = true;
this.wysiwygEditor = wysiwygModule.createBasicEditorInstance(container as HTMLElement, '<p></p>', {
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.wysiwygTextDirection,
drawioUrl: '',
pageId: 0,
translations: {},
translationMap: (window as unknown as Record<string, Object>).editor_translations,
translations: (window as unknown as Record<string, Object>).editor_translations,
});
(window as unknown as {tinymce: {init: (arg0: Object) => Promise<any>}}).tinymce.init(config).then(editors => {
this.wysiwygEditor = editors[0];
setTimeout(() => this.wysiwygEditor.focus(), 50);
});
this.wysiwygEditor.focus();
}
protected removeEditor(): void {

23
resources/js/components/wysiwyg-input.js
View File

@ -1,23 +0,0 @@
import {Component} from './component';
import {buildForInput} from '../wysiwyg-tinymce/config';
export class WysiwygInput extends Component {
setup() {
this.elem = this.$el;
const config = buildForInput({
language: this.$opts.language,
containerElement: this.elem,
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.$opts.textDirection,
translations: {},
translationMap: window.editor_translations,
});
window.tinymce.init(config).then(editors => {
this.editor = editors[0];
});
}
}

32
resources/js/components/wysiwyg-input.ts Normal file
View File

@ -0,0 +1,32 @@
import {Component} from './component';
import {el} from "../wysiwyg/utils/dom";
import {SimpleWysiwygEditorInterface} from "../wysiwyg";
export class WysiwygInput extends Component {
private elem!: HTMLTextAreaElement;
private wysiwygEditor!: SimpleWysiwygEditorInterface;
private textDirection!: string;
async setup() {
this.elem = this.$el as HTMLTextAreaElement;
this.textDirection = this.$opts.textDirection;
type WysiwygModule = typeof import('../wysiwyg');
const wysiwygModule = (await window.importVersioned('wysiwyg')) as WysiwygModule;
const container = el('div', {class: 'basic-editor-container'});
this.elem.parentElement?.appendChild(container);
this.elem.hidden = true;
this.wysiwygEditor = wysiwygModule.createBasicEditorInstance(container as HTMLElement, this.elem.value, {
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.textDirection,
translations: (window as unknown as Record<string, Object>).editor_translations,
});
this.wysiwygEditor.onChange(() => {
this.wysiwygEditor.getContentAsHtml().then(html => {
this.elem.value = html;
});
});
}
}

48
resources/js/wysiwyg-tinymce/config.js
View File

@ -310,54 +310,6 @@ export function buildForEditor(options) {
};
}
/**
* @param {WysiwygConfigOptions} options
* @return {RawEditorOptions}
*/
export function buildForInput(options) {
// Set language
window.tinymce.addI18n(options.language, options.translationMap);
// BookStack Version
const version = document.querySelector('script[src*="/dist/app.js"]').getAttribute('src').split('?version=')[1];
// Return config object
return {
width: '100%',
height: '185px',
target: options.containerElement,
cache_suffix: `?version=${version}`,
content_css: [
window.baseUrl('/dist/styles.css'),
],
branding: false,
skin: options.darkMode ? 'tinymce-5-dark' : 'tinymce-5',
body_class: 'wysiwyg-input',
browser_spellcheck: true,
relative_urls: false,
language: options.language,
directionality: options.textDirection,
remove_script_host: false,
document_base_url: window.baseUrl('/'),
end_container_on_empty_block: true,
remove_trailing_brs: false,
statusbar: false,
menubar: false,
plugins: 'link autolink lists',
contextmenu: false,
toolbar: 'bold italic link bullist numlist',
content_style: getContentStyle(options),
file_picker_types: 'file',
valid_elements: 'p,a[href|title|target],ol,ul,li,strong,em,br',
file_picker_callback: filePickerCallback,
init_instance_callback(editor) {
addCustomHeadContent(editor.getDoc());
editor.contentDocument.documentElement.classList.toggle('dark-mode', options.darkMode);
},
};
}
/**
* @typedef {Object} WysiwygConfigOptions
* @property {Element} containerElement

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

@ -1,75 +1,76 @@
import {$getSelection, createEditor, CreateEditorArgs, LexicalEditor} from 'lexical';
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";
import {registerDropPasteHandling} from "./services/drop-paste-handling";
import {registerTaskListHandler} from "./ui/framework/helpers/task-list-handler";
import {registerTableSelectionHandler} from "./ui/framework/helpers/table-selection-handler";
import {el} from "./utils/dom";
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, 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";
const theme = {
text: {
bold: 'editor-theme-bold',
code: 'editor-theme-code',
italic: 'editor-theme-italic',
strikethrough: 'editor-theme-strikethrough',
subscript: 'editor-theme-subscript',
superscript: 'editor-theme-superscript',
underline: 'editor-theme-underline',
underlineStrikethrough: 'editor-theme-underline-strikethrough',
}
};
export function createPageEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
const config: CreateEditorArgs = {
const editor = createEditor({
namespace: 'BookStackPageEditor',
nodes: getNodesForPageEditor(),
onError: console.error,
theme: {
text: {
bold: 'editor-theme-bold',
code: 'editor-theme-code',
italic: 'editor-theme-italic',
strikethrough: 'editor-theme-strikethrough',
subscript: 'editor-theme-subscript',
superscript: 'editor-theme-superscript',
underline: 'editor-theme-underline',
underlineStrikethrough: 'editor-theme-underline-strikethrough',
}
}
};
const editArea = el('div', {
contenteditable: 'true',
class: 'editor-content-area page-content',
theme: theme,
});
const editWrap = el('div', {
class: 'editor-content-wrap',
}, [editArea]);
container.append(editWrap);
container.classList.add('editor-container');
container.setAttribute('dir', options.textDirection);
if (options.darkMode) {
container.classList.add('editor-dark');
}
const editor = createEditor(config);
editor.setRootElement(editArea);
const context: EditorUiContext = buildEditorUI(container, editArea, editWrap, editor, options);
const context: EditorUiContext = buildEditorUI(container, editor, {
...options,
editorClass: 'page-content',
});
editor.setRootElement(context.editorDOM);
mergeRegister(
registerRichText(editor),
registerHistory(editor, createEmptyHistoryState(), 300),
registerShortcuts(context),
registerKeyboardHandling(context),
registerTableResizer(editor, editWrap),
registerTableResizer(editor, context.scrollDOM),
registerTableSelectionHandler(editor),
registerTaskListHandler(editor, editArea),
registerTaskListHandler(editor, context.editorDOM),
registerDropPasteHandling(context),
registerNodeResizer(context),
registerAutoLinks(editor),
);
listenToCommonEvents(editor);
// Register toolbars, modals & decorators
context.manager.setToolbar(getMainEditorFullToolbar(context));
for (const key of Object.keys(contextToolbars)) {
context.manager.registerContextToolbar(key, contextToolbars[key]);
}
for (const key of Object.keys(modals)) {
context.manager.registerModal(key, modals[key]);
}
context.manager.registerDecoratorType('code', CodeBlockDecorator);
context.manager.registerDecoratorType('diagram', DiagramDecorator);
listenToCommonEvents(editor);
setEditorContentFromHtml(editor, htmlContent);
const debugView = document.getElementById('lexical-debug');
@ -89,17 +90,76 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
registerCommonNodeMutationListeners(context);
return new SimpleWysiwygEditorInterface(editor);
return new SimpleWysiwygEditorInterface(context);
}
export function createBasicEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
const editor = createEditor({
namespace: 'BookStackBasicEditor',
nodes: getNodesForBasicEditor(),
onError: console.error,
theme: theme,
});
const context: EditorUiContext = buildEditorUI(container, editor, options);
editor.setRootElement(context.editorDOM);
const editorTeardown = mergeRegister(
registerRichText(editor),
registerHistory(editor, createEmptyHistoryState(), 300),
registerShortcuts(context),
registerAutoLinks(editor),
);
// Register toolbars, modals & decorators
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(context);
}
export class SimpleWysiwygEditorInterface {
protected editor: LexicalEditor;
protected context: EditorUiContext;
protected onChangeListeners: (() => void)[] = [];
protected editorListenerTeardown: (() => void)|null = null;
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);
}
onChange(listener: () => void) {
this.onChangeListeners.push(listener);
this.startListeningToChanges();
}
focus(): void {
focusEditor(this.context.editor);
}
remove() {
this.context.manager.teardown();
this.context.containerDOM.remove();
if (this.editorListenerTeardown) {
this.editorListenerTeardown();
}
}
protected startListeningToChanges(): void {
if (this.editorListenerTeardown) {
return;
}
this.editorListenerTeardown = this.context.editor.registerUpdateListener(() => {
for (const listener of this.onChangeListeners) {
listener();
}
});
}
}

14
resources/js/wysiwyg/nodes.ts
View File

@ -20,9 +20,6 @@ import {HeadingNode} from "@lexical/rich-text/LexicalHeadingNode";
import {QuoteNode} from "@lexical/rich-text/LexicalQuoteNode";
import {CaptionNode} from "@lexical/table/LexicalCaptionNode";
/**
* Load the nodes for lexical.
*/
export function getNodesForPageEditor(): (KlassConstructor<typeof LexicalNode> | LexicalNodeReplacement)[] {
return [
CalloutNode,
@ -45,6 +42,15 @@ export function getNodesForPageEditor(): (KlassConstructor<typeof LexicalNode> |
];
}
export function getNodesForBasicEditor(): (KlassConstructor<typeof LexicalNode> | LexicalNodeReplacement)[] {
return [
ListNode,
ListItemNode,
ParagraphNode,
LinkNode,
];
}
export function registerCommonNodeMutationListeners(context: EditorUiContext): void {
const decorated = [ImageNode, CodeBlockNode, DiagramNode];
@ -53,7 +59,7 @@ export function registerCommonNodeMutationListeners(context: EditorUiContext): v
if (mutation === "destroyed") {
const decorator = context.manager.getDecoratorByNodeKey(nodeKey);
if (decorator) {
decorator.destroy(context);
decorator.teardown();
}
}
}

113
resources/js/wysiwyg/ui/defaults/toolbars.ts
View File

@ -79,6 +79,7 @@ import {
import {el} from "../../utils/dom";
import {EditorButtonWithMenu} from "../framework/blocks/button-with-menu";
import {EditorSeparator} from "../framework/blocks/separator";
import {EditorContextToolbarDefinition} from "../framework/toolbars";
export function getMainEditorFullToolbar(context: EditorUiContext): EditorContainerUiElement {
@ -220,50 +221,74 @@ export function getMainEditorFullToolbar(context: EditorUiContext): EditorContai
]);
}
export function getImageToolbarContent(): EditorUiElement[] {
return [new EditorButton(image)];
}
export function getMediaToolbarContent(): EditorUiElement[] {
return [new EditorButton(media)];
}
export function getLinkToolbarContent(): EditorUiElement[] {
return [
export function getBasicEditorToolbar(context: EditorUiContext): EditorContainerUiElement {
return new EditorSimpleClassContainer('editor-toolbar-main', [
new EditorButton(bold),
new EditorButton(italic),
new EditorButton(link),
new EditorButton(unlink),
];
new EditorButton(bulletList),
new EditorButton(numberList),
]);
}
export function getCodeToolbarContent(): EditorUiElement[] {
return [
new EditorButton(editCodeBlock),
];
}
export function getTableToolbarContent(): EditorUiElement[] {
return [
new EditorOverflowContainer(2, [
new EditorButton(tableProperties),
new EditorButton(deleteTable),
]),
new EditorOverflowContainer(3, [
new EditorButton(insertRowAbove),
new EditorButton(insertRowBelow),
new EditorButton(deleteRow),
]),
new EditorOverflowContainer(3, [
new EditorButton(insertColumnBefore),
new EditorButton(insertColumnAfter),
new EditorButton(deleteColumn),
]),
];
}
export function getDetailsToolbarContent(): EditorUiElement[] {
return [
new EditorButton(detailsEditLabel),
new EditorButton(detailsToggle),
new EditorButton(detailsUnwrap),
];
}
export const contextToolbars: Record<string, EditorContextToolbarDefinition> = {
image: {
selector: 'img:not([drawio-diagram] img)',
content: () => [new EditorButton(image)],
},
media: {
selector: '.editor-media-wrap',
content: () => [new EditorButton(media)],
},
link: {
selector: 'a',
content() {
return [
new EditorButton(link),
new EditorButton(unlink),
]
},
displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
const image = originalTarget.querySelector('img');
return image || originalTarget;
}
},
code: {
selector: '.editor-code-block-wrap',
content: () => [new EditorButton(editCodeBlock)],
},
table: {
selector: 'td,th',
content() {
return [
new EditorOverflowContainer(2, [
new EditorButton(tableProperties),
new EditorButton(deleteTable),
]),
new EditorOverflowContainer(3, [
new EditorButton(insertRowAbove),
new EditorButton(insertRowBelow),
new EditorButton(deleteRow),
]),
new EditorOverflowContainer(3, [
new EditorButton(insertColumnBefore),
new EditorButton(insertColumnAfter),
new EditorButton(deleteColumn),
]),
];
},
displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
return originalTarget.closest('table') as HTMLTableElement;
}
},
details: {
selector: 'details',
content() {
return [
new EditorButton(detailsEditLabel),
new EditorButton(detailsToggle),
new EditorButton(detailsUnwrap),
]
},
},
};

17
resources/js/wysiwyg/ui/framework/core.ts
View File

@ -30,6 +30,7 @@ export function isUiBuilderDefinition(object: any): object is EditorUiBuilderDef
export abstract class EditorUiElement {
protected dom: HTMLElement|null = null;
private context: EditorUiContext|null = null;
private abortController: AbortController = new AbortController();
protected abstract buildDOM(): HTMLElement;
@ -79,9 +80,16 @@ export abstract class EditorUiElement {
if (target) {
target.addEventListener('editor::' + name, ((event: CustomEvent) => {
callback(event.detail);
}) as EventListener);
}) as EventListener, { signal: this.abortController.signal });
}
}
teardown(): void {
if (this.dom && this.dom.isConnected) {
this.dom.remove();
}
this.abortController.abort('teardown');
}
}
export class EditorContainerUiElement extends EditorUiElement {
@ -129,6 +137,13 @@ export class EditorContainerUiElement extends EditorUiElement {
child.setContext(context);
}
}
teardown() {
for (const child of this.children) {
child.teardown();
}
super.teardown();
}
}
export class EditorSimpleClassContainer extends EditorContainerUiElement {

2
resources/js/wysiwyg/ui/framework/decorator.ts
View File

@ -48,7 +48,7 @@ export abstract class EditorDecorator {
* Destroy this decorator. Used for tear-down operations upon destruction
* of the underlying node this decorator is attached to.
*/
destroy(context: EditorUiContext): void {
teardown(): void {
for (const callback of this.onDestroyCallbacks) {
callback();
}

15
resources/js/wysiwyg/ui/framework/helpers/dropdowns.ts
View File

@ -41,11 +41,18 @@ export class DropDownManager {
constructor() {
this.onMenuMouseOver = this.onMenuMouseOver.bind(this);
this.onWindowClick = this.onWindowClick.bind(this);
window.addEventListener('click', (event: MouseEvent) => {
const target = event.target as HTMLElement;
this.closeAllNotContainingElement(target);
});
window.addEventListener('click', this.onWindowClick);
}
teardown(): void {
window.removeEventListener('click', this.onWindowClick);
}
protected onWindowClick(event: MouseEvent): void {
const target = event.target as HTMLElement;
this.closeAllNotContainingElement(target);
}
protected closeAllNotContainingElement(element: HTMLElement): void {

50
resources/js/wysiwyg/ui/framework/manager.ts
View File

@ -12,6 +12,8 @@ export type SelectionChangeHandler = (selection: BaseSelection|null) => void;
export class EditorUIManager {
public dropdowns: DropDownManager = new DropDownManager();
protected modalDefinitionsByKey: Record<string, EditorFormModalDefinition> = {};
protected activeModalsByKey: Record<string, EditorFormModal> = {};
protected decoratorConstructorsByType: Record<string, typeof EditorDecorator> = {};
@ -21,12 +23,12 @@ export class EditorUIManager {
protected contextToolbarDefinitionsByKey: Record<string, EditorContextToolbarDefinition> = {};
protected activeContextToolbars: EditorContextToolbar[] = [];
protected selectionChangeHandlers: Set<SelectionChangeHandler> = new Set();
public dropdowns: DropDownManager = new DropDownManager();
protected domEventAbortController = new AbortController();
protected teardownCallbacks: (()=>void)[] = [];
setContext(context: EditorUiContext) {
this.context = context;
this.setupEventListeners(context);
this.setupEventListeners();
this.setupEditor(context.editor);
}
@ -99,7 +101,7 @@ export class EditorUIManager {
setToolbar(toolbar: EditorContainerUiElement) {
if (this.toolbar) {
this.toolbar.getDOMElement().remove();
this.toolbar.teardown();
}
this.toolbar = toolbar;
@ -170,10 +172,40 @@ export class EditorUIManager {
return this.getContext().options.textDirection === 'rtl' ? 'rtl' : 'ltr';
}
onTeardown(callback: () => void): void {
this.teardownCallbacks.push(callback);
}
teardown(): void {
this.domEventAbortController.abort('teardown');
for (const [_, modal] of Object.entries(this.activeModalsByKey)) {
modal.teardown();
}
for (const [_, decorator] of Object.entries(this.decoratorInstancesByNodeKey)) {
decorator.teardown();
}
if (this.toolbar) {
this.toolbar.teardown();
}
for (const toolbar of this.activeContextToolbars) {
toolbar.teardown();
}
this.dropdowns.teardown();
for (const callback of this.teardownCallbacks) {
callback();
}
}
protected updateContextToolbars(update: EditorUiStateUpdate): void {
for (let i = this.activeContextToolbars.length - 1; i >= 0; i--) {
const toolbar = this.activeContextToolbars[i];
toolbar.destroy();
toolbar.teardown();
this.activeContextToolbars.splice(i, 1);
}
@ -198,7 +230,7 @@ export class EditorUIManager {
contentByTarget.set(targetEl, [])
}
// @ts-ignore
contentByTarget.get(targetEl).push(...definition.content);
contentByTarget.get(targetEl).push(...definition.content());
}
}
@ -253,9 +285,9 @@ export class EditorUIManager {
});
}
protected setupEventListeners(context: EditorUiContext) {
protected setupEventListeners() {
const layoutUpdate = this.triggerLayoutUpdate.bind(this);
window.addEventListener('scroll', layoutUpdate, {capture: true, passive: true});
window.addEventListener('resize', layoutUpdate, {passive: true});
window.addEventListener('scroll', layoutUpdate, {capture: true, passive: true, signal: this.domEventAbortController.signal});
window.addEventListener('resize', layoutUpdate, {passive: true, signal: this.domEventAbortController.signal});
}
}

2
resources/js/wysiwyg/ui/framework/modals.ts
View File

@ -34,8 +34,8 @@ export class EditorFormModal extends EditorContainerUiElement {
}
hide() {
this.getDOMElement().remove();
this.getContext().manager.setModalInactive(this.key);
this.teardown();
}
getForm(): EditorForm {

15
resources/js/wysiwyg/ui/framework/toolbars.ts
View File

@ -4,7 +4,7 @@ import {el} from "../../utils/dom";
export type EditorContextToolbarDefinition = {
selector: string;
content: EditorUiElement[],
content: () => EditorUiElement[],
displayTargetLocator?: (originalTarget: HTMLElement) => HTMLElement;
};
@ -60,17 +60,4 @@ export class EditorContextToolbar extends EditorContainerUiElement {
const dom = this.getDOMElement();
dom.append(...children.map(child => child.getDOMElement()));
}
protected empty() {
const children = this.getChildren();
for (const child of children) {
child.getDOMElement().remove();
}
this.removeChildren(...children);
}
destroy() {
this.empty();
this.getDOMElement().remove();
}
}

78
resources/js/wysiwyg/ui/index.ts
View File

@ -1,23 +1,30 @@
import {LexicalEditor} from "lexical";
import {
getCodeToolbarContent, getDetailsToolbarContent,
getImageToolbarContent,
getLinkToolbarContent,
getMainEditorFullToolbar, getMediaToolbarContent, getTableToolbarContent
} from "./defaults/toolbars";
import {EditorUIManager} from "./framework/manager";
import {EditorUiContext} from "./framework/core";
import {CodeBlockDecorator} from "./decorators/code-block";
import {DiagramDecorator} from "./decorators/diagram";
import {modals} from "./defaults/modals";
import {el} from "../utils/dom";
export function buildEditorUI(containerDOM: HTMLElement, editor: LexicalEditor, options: Record<string, any>): EditorUiContext {
const editorDOM = el('div', {
contenteditable: 'true',
class: `editor-content-area ${options.editorClass || ''}`,
});
const scrollDOM = el('div', {
class: 'editor-content-wrap',
}, [editorDOM]);
containerDOM.append(scrollDOM);
containerDOM.classList.add('editor-container');
containerDOM.setAttribute('dir', options.textDirection);
if (options.darkMode) {
containerDOM.classList.add('editor-dark');
}
export function buildEditorUI(container: HTMLElement, element: HTMLElement, scrollContainer: HTMLElement, editor: LexicalEditor, options: Record<string, any>): EditorUiContext {
const manager = new EditorUIManager();
const context: EditorUiContext = {
editor,
containerDOM: container,
editorDOM: element,
scrollDOM: scrollContainer,
containerDOM: containerDOM,
editorDOM: editorDOM,
scrollDOM: scrollDOM,
manager,
translate(text: string): string {
const translations = options.translations;
@ -31,50 +38,5 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, scro
};
manager.setContext(context);
// Create primary toolbar
manager.setToolbar(getMainEditorFullToolbar(context));
// Register modals
for (const key of Object.keys(modals)) {
manager.registerModal(key, modals[key]);
}
// Register context toolbars
manager.registerContextToolbar('image', {
selector: 'img:not([drawio-diagram] img)',
content: getImageToolbarContent(),
});
manager.registerContextToolbar('media', {
selector: '.editor-media-wrap',
content: getMediaToolbarContent(),
});
manager.registerContextToolbar('link', {
selector: 'a',
content: getLinkToolbarContent(),
displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
const image = originalTarget.querySelector('img');
return image || originalTarget;
}
});
manager.registerContextToolbar('code', {
selector: '.editor-code-block-wrap',
content: getCodeToolbarContent(),
});
manager.registerContextToolbar('table', {
selector: 'td,th',
content: getTableToolbarContent(),
displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
return originalTarget.closest('table') as HTMLTableElement;
}
});
manager.registerContextToolbar('details', {
selector: 'details',
content: getDetailsToolbarContent(),
});
// Register image decorator listener
manager.registerDecoratorType('code', CodeBlockDecorator);
manager.registerDecoratorType('diagram', DiagramDecorator);
return context;
}

2
resources/js/wysiwyg/utils/actions.ts
View File

@ -64,6 +64,6 @@ export function getEditorContentAsHtml(editor: LexicalEditor): Promise<string> {
});
}
export function focusEditor(editor: LexicalEditor) {
export function focusEditor(editor: LexicalEditor): void {
editor.focus(() => {}, {defaultSelection: "rootStart"});
}