webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-27 06:01:54 +03:00
Code Activity

Merge pull request #5731 from BookStackApp/lexical_jul25

Browse Source 
New WYSIWYG editor changes for July 2025
This commit is contained in:
Dan Brown
2025-07-26 10:08:44 +01:00
committed by GitHub
parent 0a73b70b64 d145efb6f6
commit c8cfec96dc
18 changed files with 197 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lang/en/editor.php
View File

@ -48,6 +48,7 @@ return [
'superscript' => 'Superscript',
'subscript' => 'Subscript',
'text_color' => 'Text color',
'highlight_color' => 'Highlight color',
'custom_color' => 'Custom color',
'remove_color' => 'Remove color',
'background_color' => 'Background color',

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

@ -19,6 +19,7 @@ import {contextToolbars, getBasicEditorToolbar, getMainEditorFullToolbar} from "
import {modals} from "./ui/defaults/modals";
import {CodeBlockDecorator} from "./ui/decorators/code-block";
import {DiagramDecorator} from "./ui/decorators/diagram";
import {registerMouseHandling} from "./services/mouse-handling";
const theme = {
text: {
@ -51,6 +52,7 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
registerHistory(editor, createEmptyHistoryState(), 300),
registerShortcuts(context),
registerKeyboardHandling(context),
registerMouseHandling(context),
registerTableResizer(editor, context.scrollDOM),
registerTableSelectionHandler(editor),
registerTaskListHandler(editor, context.editorDOM),

16
resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
View File

@ -848,4 +848,20 @@ export function dispatchKeydownEventForSelectedNode(editor: LexicalEditor, key:
dispatchKeydownEventForNode(node, editor, key);
}
});
}
export function dispatchEditorMouseClick(editor: LexicalEditor, clientX: number, clientY: number) {
const dom = editor.getRootElement();
if (!dom) {
return;
}
const event = new MouseEvent('click', {
clientX: clientX,
clientY: clientY,
bubbles: true,
cancelable: true,
});
dom?.dispatchEvent(event);
editor.commitUpdates();
}

2
resources/js/wysiwyg/lexical/html/__tests__/unit/LexicalHtml.test.ts
View File

@ -146,7 +146,7 @@ describe('HTML', () => {
});
expect(html).toBe(
'<p>Hello</p><p>World</p>',
'<p>Hello</p>\n<p>World</p>',
);
});

13
resources/js/wysiwyg/lexical/html/index.ts
View File

@ -85,7 +85,18 @@ export function $generateHtmlFromNodes(
$appendNodesToHTML(editor, topLevelNode, container, selection);
}
return container.innerHTML;
const nodeCode = [];
for (const node of container.childNodes) {
if ("outerHTML" in node) {
nodeCode.push(node.outerHTML)
} else {
const wrap = document.createElement('div');
wrap.appendChild(node.cloneNode(true));
nodeCode.push(wrap.innerHTML);
}
}
return nodeCode.join('\n');
}
function $appendNodesToHTML(

12
resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalAutoLinkNode.test.ts
View File

@ -273,18 +273,6 @@ describe('LexicalAutoAutoLinkNode tests', () => {
});
});
test('AutoLinkNode.createDOM() sanitizes javascript: URLs', async () => {
const {editor} = testEnv;
await editor.update(() => {
// eslint-disable-next-line no-script-url
const autoLinkNode = new AutoLinkNode('javascript:alert(0)');
expect(autoLinkNode.createDOM(editorConfig).outerHTML).toBe(
'<a href="about:blank" class="my-autolink-class"></a>',
);
});
});
test('AutoLinkNode.updateDOM()', async () => {
const {editor} = testEnv;

12
resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalLinkNode.test.ts
View File

@ -218,18 +218,6 @@ describe('LexicalLinkNode tests', () => {
});
});
test('LinkNode.createDOM() sanitizes javascript: URLs', async () => {
const {editor} = testEnv;
await editor.update(() => {
// eslint-disable-next-line no-script-url
const linkNode = new LinkNode('javascript:alert(0)');
expect(linkNode.createDOM(editorConfig).outerHTML).toBe(
'<a href="about:blank" class="my-link-class"></a>',
);
});
});
test('LinkNode.updateDOM()', async () => {
const {editor} = testEnv;

23
resources/js/wysiwyg/lexical/link/index.ts
View File

@ -48,14 +48,6 @@ export type SerializedLinkNode = Spread<
type LinkHTMLElementType = HTMLAnchorElement | HTMLSpanElement;
const SUPPORTED_URL_PROTOCOLS = new Set([
'http:',
'https:',
'mailto:',
'sms:',
'tel:',
]);
/** @noInheritDoc */
export class LinkNode extends ElementNode {
/** @internal */
@ -90,7 +82,7 @@ export class LinkNode extends ElementNode {
createDOM(config: EditorConfig): LinkHTMLElementType {
const element = document.createElement('a');
element.href = this.sanitizeUrl(this.__url);
element.href = this.__url;
if (this.__target !== null) {
element.target = this.__target;
}
@ -166,19 +158,6 @@ export class LinkNode extends ElementNode {
return node;
}
sanitizeUrl(url: string): string {
try {
const parsedUrl = new URL(url);
// eslint-disable-next-line no-script-url
if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
return 'about:blank';
}
} catch {
return url;
}
return url;
}
exportJSON(): SerializedLinkNode | SerializedAutoLinkNode {
return {
...super.exportJSON(),

9
resources/js/wysiwyg/lexical/table/LexicalTableCellNode.ts
View File

@ -353,10 +353,17 @@ export function $convertTableCellNodeElement(
const hasUnderlineTextDecoration = textDecoration.includes('underline');
if (domNode instanceof HTMLElement) {
tableCellNode.setStyles(extractStyleMapFromElement(domNode));
const styleMap = extractStyleMapFromElement(domNode);
styleMap.delete('background-color');
tableCellNode.setStyles(styleMap);
tableCellNode.setAlignment(extractAlignmentFromElement(domNode));
}
const background = style.backgroundColor || null;
if (background) {
tableCellNode.setBackgroundColor(background);
}
return {
after: (childLexicalNodes) => {
if (childLexicalNodes.length === 0) {

12
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.ts
View File

@ -38,7 +38,7 @@ describe('LexicalUtils#splitNode', () => {
{
_: 'split paragraph in between two text nodes',
expectedHtml:
'<p>Hello</p><p>world</p>',
'<p>Hello</p>\n<p>world</p>',
initialHtml: '<p><span>Hello</span><span>world</span></p>',
splitOffset: 1,
splitPath: [0],
@ -46,7 +46,7 @@ describe('LexicalUtils#splitNode', () => {
{
_: 'split paragraph before the first text node',
expectedHtml:
'<p><br></p><p>Helloworld</p>',
'<p><br></p>\n<p>Helloworld</p>',
initialHtml: '<p><span>Hello</span><span>world</span></p>',
splitOffset: 0,
splitPath: [0],
@ -54,7 +54,7 @@ describe('LexicalUtils#splitNode', () => {
{
_: 'split paragraph after the last text node',
expectedHtml:
'<p>Helloworld</p><p><br></p>',
'<p>Helloworld</p>\n<p><br></p>',
initialHtml: '<p><span>Hello</span><span>world</span></p>',
splitOffset: 2, // Any offset that is higher than children size
splitPath: [0],
@ -62,7 +62,7 @@ describe('LexicalUtils#splitNode', () => {
{
_: 'split list items between two text nodes',
expectedHtml:
'<ul><li>Hello</li></ul>' +
'<ul><li>Hello</li></ul>\n' +
'<ul><li>world</li></ul>',
initialHtml: '<ul><li><span>Hello</span><span>world</span></li></ul>',
splitOffset: 1, // Any offset that is higher than children size
@ -71,7 +71,7 @@ describe('LexicalUtils#splitNode', () => {
{
_: 'split list items before the first text node',
expectedHtml:
'<ul><li></li></ul>' +
'<ul><li></li></ul>\n' +
'<ul><li>Helloworld</li></ul>',
initialHtml: '<ul><li><span>Hello</span><span>world</span></li></ul>',
splitOffset: 0, // Any offset that is higher than children size
@ -83,7 +83,7 @@ describe('LexicalUtils#splitNode', () => {
'<ul>' +
'<li>Before</li>' +
'<li style="list-style: none;"><ul><li>Hello</li></ul></li>' +
'</ul>' +
'</ul>\n' +
'<ul>' +
'<li style="list-style: none;"><ul><li>world</li></ul></li>' +
'<li>After</li>' +

28
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.ts
View File

@ -46,7 +46,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
{
_: 'insert into paragraph in between two text nodes',
expectedHtml:
'<p>Hello</p><test-decorator></test-decorator><p>world</p>',
'<p>Hello</p>\n<test-decorator></test-decorator>\n<p>world</p>',
initialHtml: '<p><span>Helloworld</span></p>',
selectionOffset: 5, // Selection on text node after "Hello" world
selectionPath: [0, 0],
@ -57,8 +57,8 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
'<ul>' +
'<li>Before</li>' +
'<li style="list-style: none;"><ul><li>Hello</li></ul></li>' +
'</ul>' +
'<test-decorator></test-decorator>' +
'</ul>\n' +
'<test-decorator></test-decorator>\n' +
'<ul>' +
'<li style="list-style: none;"><ul><li>world</li></ul></li>' +
'<li>After</li>' +
@ -74,7 +74,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
},
{
_: 'insert into empty paragraph',
expectedHtml: '<p><br></p><test-decorator></test-decorator><p><br></p>',
expectedHtml: '<p><br></p>\n<test-decorator></test-decorator>\n<p><br></p>',
initialHtml: '<p></p>',
selectionOffset: 0, // Selection on text node after "Hello" world
selectionPath: [0],
@ -82,8 +82,8 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
{
_: 'insert in the end of paragraph',
expectedHtml:
'<p>Hello world</p>' +
'<test-decorator></test-decorator>' +
'<p>Hello world</p>\n' +
'<test-decorator></test-decorator>\n' +
'<p><br></p>',
initialHtml: '<p>Hello world</p>',
selectionOffset: 12, // Selection on text node after "Hello" world
@ -92,8 +92,8 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
{
_: 'insert in the beginning of paragraph',
expectedHtml:
'<p><br></p>' +
'<test-decorator></test-decorator>' +
'<p><br></p>\n' +
'<test-decorator></test-decorator>\n' +
'<p>Hello world</p>',
initialHtml: '<p>Hello world</p>',
selectionOffset: 0, // Selection on text node after "Hello" world
@ -102,9 +102,9 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
{
_: 'insert with selection on root start',
expectedHtml:
'<test-decorator></test-decorator>' +
'<test-decorator></test-decorator>' +
'<p>Before</p>' +
'<test-decorator></test-decorator>\n' +
'<test-decorator></test-decorator>\n' +
'<p>Before</p>\n' +
'<p>After</p>',
initialHtml:
'<test-decorator></test-decorator>' +
@ -116,8 +116,8 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
{
_: 'insert with selection on root child',
expectedHtml:
'<p>Before</p>' +
'<test-decorator></test-decorator>' +
'<p>Before</p>\n' +
'<test-decorator></test-decorator>\n' +
'<p>After</p>',
initialHtml: '<p>Before</p><p>After</p>',
selectionOffset: 1,
@ -126,7 +126,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
{
_: 'insert with selection on root end',
expectedHtml:
'<p>Before</p>' +
'<p>Before</p>\n' +
'<test-decorator></test-decorator>',
initialHtml: '<p>Before</p>',
selectionOffset: 1,

51
resources/js/wysiwyg/services/__tests__/mouse-handling.test.ts Normal file
View File

@ -0,0 +1,51 @@
import {
createTestContext, destroyFromContext, dispatchEditorMouseClick,
} from "lexical/__tests__/utils";
import {
$getRoot, LexicalEditor, LexicalNode,
ParagraphNode,
} from "lexical";
import {registerRichText} from "@lexical/rich-text";
import {EditorUiContext} from "../../ui/framework/core";
import {registerMouseHandling} from "../mouse-handling";
import {$createTableNode, TableNode} from "@lexical/table";
describe('Mouse-handling service tests', () => {
let context!: EditorUiContext;
let editor!: LexicalEditor;
beforeEach(() => {
context = createTestContext();
editor = context.editor;
registerRichText(editor);
registerMouseHandling(context);
});
afterEach(() => {
destroyFromContext(context);
});
test('Click below last table inserts new empty paragraph', () => {
let tableNode!: TableNode;
let lastRootChild!: LexicalNode|null;
editor.updateAndCommit(() => {
tableNode = $createTableNode();
$getRoot().append(tableNode);
lastRootChild = $getRoot().getLastChild();
});
expect(lastRootChild).toBeInstanceOf(TableNode);
const tableDOM = editor.getElementByKey(tableNode.getKey());
const rect = tableDOM?.getBoundingClientRect();
dispatchEditorMouseClick(editor, 0, (rect?.bottom || 0) + 1)
editor.getEditorState().read(() => {
lastRootChild = $getRoot().getLastChild();
});
expect(lastRootChild).toBeInstanceOf(ParagraphNode);
});
});

63
resources/js/wysiwyg/services/mouse-handling.ts Normal file
View File

@ -0,0 +1,63 @@
import {EditorUiContext} from "../ui/framework/core";
import {
$createParagraphNode, $getRoot,
$getSelection,
$isDecoratorNode, CLICK_COMMAND,
COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND,
KEY_BACKSPACE_COMMAND,
KEY_DELETE_COMMAND,
KEY_ENTER_COMMAND, KEY_TAB_COMMAND,
LexicalEditor,
LexicalNode
} from "lexical";
import {$isImageNode} from "@lexical/rich-text/LexicalImageNode";
import {$isMediaNode} from "@lexical/rich-text/LexicalMediaNode";
import {getLastSelection} from "../utils/selection";
import {$getNearestNodeBlockParent, $getParentOfType, $selectOrCreateAdjacent} from "../utils/nodes";
import {$setInsetForSelection} from "../utils/lists";
import {$isListItemNode} from "@lexical/list";
import {$isDetailsNode, DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
import {$isDiagramNode} from "../utils/diagrams";
import {$isTableNode} from "@lexical/table";
function isHardToEscapeNode(node: LexicalNode): boolean {
return $isDecoratorNode(node) || $isImageNode(node) || $isMediaNode(node) || $isDiagramNode(node) || $isTableNode(node);
}
function insertBelowLastNode(context: EditorUiContext, event: MouseEvent): boolean {
const lastNode = $getRoot().getLastChild();
if (!lastNode || !isHardToEscapeNode(lastNode)) {
return false;
}
const lastNodeDom = context.editor.getElementByKey(lastNode.getKey());
if (!lastNodeDom) {
return false;
}
const nodeBounds = lastNodeDom.getBoundingClientRect();
const isClickBelow = event.clientY > nodeBounds.bottom;
if (isClickBelow) {
context.editor.update(() => {
const newNode = $createParagraphNode();
$getRoot().append(newNode);
newNode.select();
});
return true;
}
return false;
}
export function registerMouseHandling(context: EditorUiContext): () => void {
const unregisterClick = context.editor.registerCommand(CLICK_COMMAND, (event): boolean => {
insertBelowLastNode(context, event);
return false;
}, COMMAND_PRIORITY_LOW);
return () => {
unregisterClick();
};
}

16
resources/js/wysiwyg/services/shortcuts.ts
View File

@ -13,14 +13,16 @@ import {$showLinkForm} from "../ui/defaults/forms/objects";
import {showLinkSelector} from "../utils/links";
import {HeadingTagType} from "@lexical/rich-text/LexicalHeadingNode";
function headerHandler(editor: LexicalEditor, tag: HeadingTagType): boolean {
toggleSelectionAsHeading(editor, tag);
function headerHandler(context: EditorUiContext, tag: HeadingTagType): boolean {
toggleSelectionAsHeading(context.editor, tag);
context.manager.triggerFutureStateRefresh();
return true;
}
function wrapFormatAction(formatAction: (editor: LexicalEditor) => any): ShortcutAction {
return (editor: LexicalEditor) => {
return (editor: LexicalEditor, context: EditorUiContext) => {
formatAction(editor);
context.manager.triggerFutureStateRefresh();
return true;
};
}
@ -45,10 +47,10 @@ const actionsByKeys: Record<string, ShortcutAction> = {
window.$events.emit('editor-save-page');
return true;
},
'meta+1': (editor) => headerHandler(editor, 'h1'),
'meta+2': (editor) => headerHandler(editor, 'h2'),
'meta+3': (editor) => headerHandler(editor, 'h3'),
'meta+4': (editor) => headerHandler(editor, 'h4'),
'meta+1': (editor, context) => headerHandler(context, 'h2'),
'meta+2': (editor, context) => headerHandler(context, 'h3'),
'meta+3': (editor, context) => headerHandler(context, 'h4'),
'meta+4': (editor, context) => headerHandler(context, 'h5'),
'meta+5': wrapFormatAction(toggleSelectionAsParagraph),
'meta+d': wrapFormatAction(toggleSelectionAsParagraph),
'meta+6': wrapFormatAction(toggleSelectionAsBlockquote),

5
resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts
View File

@ -13,7 +13,6 @@ import codeIcon from "@icons/editor/code.svg";
import formatClearIcon from "@icons/editor/format-clear.svg";
import {$selectionContainsTextFormat} from "../../../utils/selection";
import {$patchStyleText} from "@lexical/selection";
import {context} from "esbuild";
function buildFormatButton(label: string, format: TextFormatType, icon: string): EditorButtonDefinition {
return {
@ -32,7 +31,7 @@ export const bold: EditorButtonDefinition = buildFormatButton('Bold', 'bold', bo
export const italic: EditorButtonDefinition = buildFormatButton('Italic', 'italic', italicIcon);
export const underline: EditorButtonDefinition = buildFormatButton('Underline', 'underline', underlinedIcon);
export const textColor: EditorBasicButtonDefinition = {label: 'Text color', icon: textColorIcon};
export const highlightColor: EditorBasicButtonDefinition = {label: 'Background color', icon: highlightIcon};
export const highlightColor: EditorBasicButtonDefinition = {label: 'Highlight color', icon: highlightIcon};
function colorAction(context: EditorUiContext, property: string, color: string): void {
context.editor.update(() => {
@ -44,7 +43,7 @@ function colorAction(context: EditorUiContext, property: string, color: string):
}
export const textColorAction = (color: string, context: EditorUiContext) => colorAction(context, 'color', color);
export const highlightColorAction = (color: string, context: EditorUiContext) => colorAction(context, 'color', color);
export const highlightColorAction = (color: string, context: EditorUiContext) => colorAction(context, 'background-color', color);
export const strikethrough: EditorButtonDefinition = buildFormatButton('Strikethrough', 'strikethrough', strikethroughIcon);
export const superscript: EditorButtonDefinition = buildFormatButton('Superscript', 'superscript', superscriptIcon);

4
resources/js/wysiwyg/ui/defaults/forms/tables.ts
View File

@ -75,7 +75,7 @@ export function $showCellPropertiesForm(cell: TableCellNode, context: EditorUiCo
border_width: styles.get('border-width') || '',
border_style: styles.get('border-style') || '',
border_color: styles.get('border-color') || '',
background_color: styles.get('background-color') || '',
background_color: cell.getBackgroundColor() || styles.get('background-color') || '',
});
return modalForm;
}
@ -91,6 +91,7 @@ export const cellProperties: EditorFormDefinition = {
$setTableCellColumnWidth(cell, width);
cell.updateTag(formData.get('type')?.toString() || '');
cell.setAlignment((formData.get('h_align')?.toString() || '') as CommonBlockAlignment);
cell.setBackgroundColor(formData.get('background_color')?.toString() || '');
const styles = cell.getStyles();
styles.set('height', formatSizeValue(formData.get('height')?.toString() || ''));
@ -98,7 +99,6 @@ export const cellProperties: EditorFormDefinition = {
styles.set('border-width', formatSizeValue(formData.get('border_width')?.toString() || ''));
styles.set('border-style', formData.get('border_style')?.toString() || '');
styles.set('border-color', formData.get('border_color')?.toString() || '');
styles.set('background-color', formData.get('background_color')?.toString() || '');
cell.setStyles(styles);
}

1
resources/js/wysiwyg/utils/tables.ts
View File

@ -282,6 +282,7 @@ export function $clearTableFormatting(table: TableNode): void {
const cells = row.getChildren().filter(c => $isTableCellNode(c));
for (const cell of cells) {
cell.setStyles(new Map);
cell.setBackgroundColor(null);
cell.clearWidth();
}
}

8
resources/sass/_editor.scss
View File

@ -681,6 +681,14 @@ textarea.editor-form-field-input {
}
}
// Specific field styles
textarea.editor-form-field-input[name="source"] {
width: 1000px;
height: 600px;
max-height: 60vh;
max-width: 80vw;
}
// Editor theme styles
.editor-theme-bold {
font-weight: bold;