Lexical: Added alignment detoggle, fixed inital focus area

diff --git a/resources/js/wysiwyg/todo.md b/resources/js/wysiwyg/todo.md
index e07792a1c063b47cb483dc8b4a3a126e36f80ff2..7fcf254445529c0e648644db7a3d56416981e6c0 100644 (file)
--- a/resources/js/wysiwyg/todo.md
+++ b/resources/js/wysiwyg/todo.md
@@ -22,5 +22,4 @@
 
 ## Bugs
 
 
 ## 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
 - 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 b1c701dda4d5badd61a35ada3ea639355fb93a7d..6233e6ce64c0b865708b381a97b53ae1e0208ab2 100644 (file)
--- 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";
 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";
 
 
 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]);
     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);
         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 {
 }
 
 function setDirectionForSelection(context: EditorUiContext, direction: 'ltr' | 'rtl'): void {


@@ -52,7 +54,7 @@ export const alignLeft: EditorButtonDefinition = {
     label: 'Align left',
     icon: alignLeftIcon,
     action(context: EditorUiContext) {
     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');
     },
     isActive(selection: BaseSelection|null) {
         return $selectionContainsAlignment(selection, 'left');


@@ -63,7 +65,7 @@ export const alignCenter: EditorButtonDefinition = {
     label: 'Align center',
     icon: alignCenterIcon,
     action(context: EditorUiContext) {
     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');
     },
     isActive(selection: BaseSelection|null) {
         return $selectionContainsAlignment(selection, 'center');


@@ -74,7 +76,7 @@ export const alignRight: EditorButtonDefinition = {
     label: 'Align right',
     icon: alignRightIcon,
     action(context: EditorUiContext) {
     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');
     },
     isActive(selection: BaseSelection|null) {
         return $selectionContainsAlignment(selection, 'right');


@@ -85,7 +87,7 @@ export const alignJustify: EditorButtonDefinition = {
     label: 'Align justify',
     icon: alignJustifyIcon,
     action(context: EditorUiContext) {
     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');
     },
     isActive(selection: BaseSelection|null) {
         return $selectionContainsAlignment(selection, 'justify');

diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index dd1e1a2c368aa2556ffe5e6bf7a7ae3e271e4dac..91aef9920861cbf26ab7e67c989cd2d200f26fc5 100644 (file)
--- a/resources/sass/_editor.scss
+++ b/resources/sass/_editor.scss
@@ -26,6 +26,7 @@ body.editor-is-fullscreen {
   }
 }
 .editor-content-area {
   }
 }
 .editor-content-area {

+  min-height: 100%;

   &:focus {
     outline: 0;
   }
   &:focus {
     outline: 0;
   }


@@ -33,6 +34,7 @@ body.editor-is-fullscreen {
 .editor-content-wrap {
   position: relative;
   overflow-y: scroll;
 .editor-content-wrap {
   position: relative;
   overflow-y: scroll;

+  flex: 1;

 }
 
 // Buttons
 }
 
 // Buttons

diff --git a/resources/views/pages/parts/wysiwyg-editor.blade.php b/resources/views/pages/parts/wysiwyg-editor.blade.php
index ee5a2e19b11dd1b527253aea6a9311be889cb5dd..d927a03d3fb1971427062d4bd0a5fb10f2619584 100644 (file)
--- 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') }}"
      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">

 
 

-    <div class="editor-container flex-container-column flex-fill" refs="wysiwyg-editor@edit-container">
+    <div class="editor-container flex-container-column flex-fill flex" refs="wysiwyg-editor@edit-container">

     </div>
 
     <div id="lexical-debug" style="white-space: pre-wrap; font-size: 12px; height: 200px; overflow-y: scroll; background-color: #000; padding: 1rem; border-radius: 4px; color: #FFF;"></div>
     </div>
 
     <div id="lexical-debug" style="white-space: pre-wrap; font-size: 12px; height: 200px; overflow-y: scroll; background-color: #000; padding: 1rem; border-radius: 4px; color: #FFF;"></div>