Move button to the beggining of editor form for easier styling

Fixes #185

Author: annda

action/editor.php

@@ -89,12 +89,12 @@ public function addDataAndToggleButton(Doku_Event $event, $param)
         $form = $event->data;
 
         if(is_a($form, \dokuwiki\Form\Form::class)) {
-            $form->addElement($this->buildToggleButton());
+            $form->addElement($this->buildToggleButton(), 0);
             $form->setHiddenField('prosemirror_json',$prosemirrorJSON);
             $form->addHTML('<div class="prosemirror_wrapper" id="prosemirror__editor"></div>', 1);
         } else {
             // todo remove when old stable is no longer supported
-            $form->addElement($this->buildOldToggleButton());
+            $form->insertElement(0, $this->buildOldToggleButton());
             $form->addHidden('prosemirror_json',$prosemirrorJSON);
             $form->insertElement(1, '<div class="prosemirror_wrapper" id="prosemirror__editor"></div>');
         }
@@ -106,7 +106,7 @@ public function addDataAndToggleButton(Doku_Event $event, $param)
      * Creates it as hidden if forcing WYSIWYG
      *
      * @deprecated use buildToggleButton instead
-     * @return array the pseudo-tag expected by \Doku_Form::addElement
+     * @return array the pseudo-tag expected by \Doku_Form::insertElement
      */
     protected function buildOldToggleButton()
     {

lang/de/lang.php

@@ -6,7 +6,7 @@
  */
 
 // custom language strings for the plugin
-$lang['switch_editors'] = 'Schalte WYSIWYG-Editor um';
+$lang['switch_editors'] = 'Syntax ⬌ Visueller Editor umschalten';
 
 $lang['link target'] = 'Linkziel';
 $lang['type:wiki page'] = 'Eine Seite in diesem Wiki';

lang/en/lang.php

@@ -6,7 +6,7 @@
  */
 
 // custom language strings for the plugin
-$lang['switch_editors'] = 'Toggle WYSIWYG editor';
+$lang['switch_editors'] = 'Toggle syntax ⬌ visual editor';
 
 $lang['link target'] = 'Link target';
 $lang['type:wiki page'] = 'A page in this wiki';

style.less

@@ -95,12 +95,8 @@
 
 .dokuwiki {
     .plugin_prosemirror_useWYSIWYG {
-        position: absolute;
-        top: 2.9em;
-        right: 2em;
-        padding: 3px 8px;
-        color: #444;
-        background-color: white;
+        margin-bottom: 0.75rem;
+        display: flex;
     }
 
     .footnote-tooltip {