From e6edd9340ee59cdd33634647bd467dd806529a6b Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 21 Sep 2024 17:02:54 +0100 Subject: [PATCH] Lexical: Added alignment detoggle, fixed inital focus area --- resources/js/wysiwyg/todo.md | 1 - .../wysiwyg/ui/defaults/buttons/alignments.ts | 28 ++++++++++--------- resources/sass/_editor.scss | 2 ++ .../pages/parts/wysiwyg-editor.blade.php | 4 +-- 4 files changed, 19 insertions(+), 16 deletions(-) diff --git a/resources/js/wysiwyg/todo.md b/resources/js/wysiwyg/todo.md index e07792a1c..7fcf25444 100644 --- a/resources/js/wysiwyg/todo.md +++ b/resources/js/wysiwyg/todo.md @@ -22,5 +22,4 @@ ## Bugs -- Focus/click area reduced to content area, single line on initial access - List selection can get lost on nesting/unnesting \ No newline at end of file diff --git a/resources/js/wysiwyg/ui/defaults/buttons/alignments.ts b/resources/js/wysiwyg/ui/defaults/buttons/alignments.ts index b1c701dda..6233e6ce6 100644 --- a/resources/js/wysiwyg/ui/defaults/buttons/alignments.ts +++ b/resources/js/wysiwyg/ui/defaults/buttons/alignments.ts @@ -1,4 +1,4 @@ -import {$isElementNode, BaseSelection, LexicalEditor} from "lexical"; +import {$isElementNode, BaseSelection} from "lexical"; import {EditorButtonDefinition} from "../../framework/buttons"; import alignLeftIcon from "@icons/editor/align-left.svg"; import {EditorUiContext} from "../../framework/core"; @@ -15,26 +15,28 @@ import {CommonBlockAlignment} from "../../../nodes/_common"; import {nodeHasAlignment} from "../../../utils/nodes"; -function setAlignmentForSelection(editor: LexicalEditor, alignment: CommonBlockAlignment): void { - const selection = getLastSelection(editor); +function setAlignmentForSelection(context: EditorUiContext, alignment: CommonBlockAlignment): void { + const selection = getLastSelection(context.editor); const selectionNodes = selection?.getNodes() || []; // Handle inline node selection alignment if (selectionNodes.length === 1 && $isElementNode(selectionNodes[0]) && selectionNodes[0].isInline() && nodeHasAlignment(selectionNodes[0])) { selectionNodes[0].setAlignment(alignment); $selectSingleNode(selectionNodes[0]); - $toggleSelection(editor); + context.manager.triggerFutureStateRefresh(); return; } // Handle normal block/range alignment const elements = $getBlockElementNodesInSelection(selection); - for (const node of elements) { - if (nodeHasAlignment(node)) { - node.setAlignment(alignment) - } + const alignmentNodes = elements.filter(n => nodeHasAlignment(n)); + const allAlreadyAligned = alignmentNodes.every(n => n.getAlignment() === alignment); + const newAlignment = allAlreadyAligned ? '' : alignment; + for (const node of alignmentNodes) { + node.setAlignment(newAlignment); } - $toggleSelection(editor); + + context.manager.triggerFutureStateRefresh(); } function setDirectionForSelection(context: EditorUiContext, direction: 'ltr' | 'rtl'): void { @@ -52,7 +54,7 @@ export const alignLeft: EditorButtonDefinition = { label: 'Align left', icon: alignLeftIcon, action(context: EditorUiContext) { - context.editor.update(() => setAlignmentForSelection(context.editor, 'left')); + context.editor.update(() => setAlignmentForSelection(context, 'left')); }, isActive(selection: BaseSelection|null) { return $selectionContainsAlignment(selection, 'left'); @@ -63,7 +65,7 @@ export const alignCenter: EditorButtonDefinition = { label: 'Align center', icon: alignCenterIcon, action(context: EditorUiContext) { - context.editor.update(() => setAlignmentForSelection(context.editor, 'center')); + context.editor.update(() => setAlignmentForSelection(context, 'center')); }, isActive(selection: BaseSelection|null) { return $selectionContainsAlignment(selection, 'center'); @@ -74,7 +76,7 @@ export const alignRight: EditorButtonDefinition = { label: 'Align right', icon: alignRightIcon, action(context: EditorUiContext) { - context.editor.update(() => setAlignmentForSelection(context.editor, 'right')); + context.editor.update(() => setAlignmentForSelection(context, 'right')); }, isActive(selection: BaseSelection|null) { return $selectionContainsAlignment(selection, 'right'); @@ -85,7 +87,7 @@ export const alignJustify: EditorButtonDefinition = { label: 'Align justify', icon: alignJustifyIcon, action(context: EditorUiContext) { - context.editor.update(() => setAlignmentForSelection(context.editor, 'justify')); + context.editor.update(() => setAlignmentForSelection(context, 'justify')); }, isActive(selection: BaseSelection|null) { return $selectionContainsAlignment(selection, 'justify'); diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss index dd1e1a2c3..91aef9920 100644 --- a/resources/sass/_editor.scss +++ b/resources/sass/_editor.scss @@ -26,6 +26,7 @@ body.editor-is-fullscreen { } } .editor-content-area { + min-height: 100%; &:focus { outline: 0; } @@ -33,6 +34,7 @@ body.editor-is-fullscreen { .editor-content-wrap { position: relative; overflow-y: scroll; + flex: 1; } // Buttons diff --git a/resources/views/pages/parts/wysiwyg-editor.blade.php b/resources/views/pages/parts/wysiwyg-editor.blade.php index ee5a2e19b..d927a03d3 100644 --- a/resources/views/pages/parts/wysiwyg-editor.blade.php +++ b/resources/views/pages/parts/wysiwyg-editor.blade.php @@ -4,9 +4,9 @@ option:wysiwyg-editor:text-direction="{{ $locale->htmlDirection() }}" option:wysiwyg-editor:image-upload-error-text="{{ trans('errors.image_upload_error') }}" option:wysiwyg-editor:server-upload-limit-text="{{ trans('errors.server_upload_limit') }}" - class="flex-container-column flex-fill"> + class="flex-container-column flex-fill flex"> -
+