From f3ad190e972476589cc8aeb7e67ed24d091ce6c0 Mon Sep 17 00:00:00 2001
From: Radek Czajka <rczajka@rczajka.pl>
Date: Fri, 18 Jul 2025 15:24:08 +0200
Subject: [PATCH 1/1] Add a button, realign the buttons.

---
 src/redakcja/static/css/html.scss             | 71 ++++++-------------
 .../static/js/wiki/view_editor_wysiwyg.js     | 20 ++++--
 2 files changed, 35 insertions(+), 56 deletions(-)

diff --git a/src/redakcja/static/css/html.scss b/src/redakcja/static/css/html.scss
index 3819c821..61d5a797 100644
--- a/src/redakcja/static/css/html.scss
+++ b/src/redakcja/static/css/html.scss
@@ -359,63 +359,36 @@ div[x-node] > .uwaga {
     visibility: hidden;
 }
 
-.active-block-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-    font-size: 16px;
-    line-height: 1.5;
+.html-editarea-toolbar {
+    display: flex;
+    justify-content: space-between;
     position: absolute;
     top: -28px;
     left: -1px;
-    width: 72px;
     height: 28px;
-    display: block;
-    /*    margin: 4px 0 2px 0;*/
-    padding: 5px 5px 2px 5px;
-    background-color: #FAFAFA;
-    /*    z-index: 3000;*/
-    /*    color: #FFF;
-     z-index: 1500;
-     */
-    border: 1px solid #DDD;
-    border-bottom: none;
-}
+    right: -1px;
 
-.delete-button {
-    left: 70px;
-}
+    .html-editarea-toolbar-left,
+    .html-editarea-toolbar-right {
+        display: flex;
+    }
 
-.tytul-button {
-    left:150px;
-    width:100px;
-}
+    button {
+        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+        font-size: 16px;
+        line-height: 1.5;
 
-.wyroznienie-button {
-    left:250px;
-    width:100px;
-}
-.slowo-button {
-    left:350px;
-    width:100px;
-}
-.znak-button {
-    left:450px;
-    width:100px;
-}
-.uwaga-button {
-    right: 0;
-    left: auto;
-}
+        display: block;
+        padding: 5px 5px 2px 5px;
+        background-color: #FAFAFA;
+        border: 1px solid #DDD;
+        border-bottom: none;
 
-.active-block-button:hover, .active-block-button:active,
-.delete-button:hover, .delete-button:active,
-.accept-button:hover, .accept-button:active,
-.tytul-button:hover, .tytul-button:active,
-.wyroznienie-button:hover, .wyroznienie-button:active,
-.slowo-button:hover, .slowo-button:active,
-.znak-button:hover, .znak-button:active {
-    /*    color: #FFF;*/
-    background-color: #999;
-    color: #FFF;
+        &:hover {
+            background-color: #999;
+            color: #FFF;
+        }
+    }
 }
 
 /*
diff --git a/src/redakcja/static/js/wiki/view_editor_wysiwyg.js b/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
index 3d4ca02c..bc498ce1 100644
--- a/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
+++ b/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
@@ -441,7 +441,7 @@
         }
 
         // start edition on this node
-        var $overlay = $('<div class="html-editarea"><button class="accept-button">Zapisz</button><button class="delete-button">Usuń</button><button class="tytul-button akap-edit-button">tytuł dzieła</button><button class="wyroznienie-button akap-edit-button">wyróżnienie</button><button class="slowo-button akap-edit-button">słowo obce</button><button class="znak-button akap-edit-button">znak spec.</button><textarea></textarea></div>').css({
+        var $overlay = $('<div class="html-editarea"><div class="html-editarea-toolbar"><div class="html-editarea-toolbar-left"><button class="accept-button">Zapisz</button><button class="delete-button">Usuń</button></div><div class="html-editarea-toolbar-right"><button class="akap-edit-button">tytuł dzieła</button><button class="akap-edit-button">wyróżnienie</button><button class="akap-edit-button">słowo obce</button><button class="akap-edit-button">br</button><button class="akap-edit-button">znak spec.</button></div></div><textarea></textarea></div>').css({
             position: 'absolute',
             height: h,
             left: x,
@@ -583,9 +583,12 @@
                     } else if (buttonName == "tytuł dzieła") {
                         startTag = "<tytul_dziela>";
                         endTag = "</tytul_dziela>";
-                    } else if(buttonName == "znak spec."){
+                    } else if (buttonName == "znak spec."){
                         addSymbol();
                         return false;
+                    } else if (buttonName == "br") {
+                        startTag = "<br/>";
+                        endTag = "";
                     }
 
                     var myField = textAreaOpened;
@@ -648,15 +651,18 @@
 
                 $('#html-view').bind('mousemove', function(event){
                     var editable = $(event.target).closest('*[x-editable]');
-                    $('.active', element).not(editable).removeClass('active').children('.active-block-button').remove();
+                    $('.active', element).not(editable).removeClass('active').children('.html-editarea-toolbar').remove();
 
                     if (!editable.hasClass('active')) {
-                        editable.addClass('active').append(button);
+                        editable.append($("<div class='html-editarea-toolbar'><div class='html-editarea-toolbar-left'></div></div>"));
+                        var buttonSpace = $('.html-editarea-toolbar-left', editable);
+                        editable.addClass('active');
+                        buttonSpace.append(button);
                         if (!editable.is('[x-edit-attribute]') &&
                             !editable.is('.annotation-inline-box') &&
                             !editable.is('[x-edit-no-format]')
                            ) {
-                            editable.append(uwagaButton);
+                            buttonSpace.append(uwagaButton);
                         }
                     }
                     if (editable.is('.annotation-inline-box')) {
@@ -720,13 +726,13 @@
                 $(document).on('click', '.edit-button', function(event){
                     self.flush();
                     event.preventDefault();
-                    openForEdit($(this).parent());
+                    openForEdit($(this).closest('.html-editarea-toolbar').parent());
                 });
 
                 $(document).on('click', '.uwaga-button', function(event){
                     self.flush();
                     event.preventDefault();
-                    createUwagaBefore($(this).parent());
+                    createUwagaBefore($(this).closest('.html-editarea-toolbar').parent());
                 });
             }
 
-- 
2.20.1