2222 add undo/redo functionlity (#4219)

* 2222 add undo/redo functionlity

* 2222 consistent color in undo/redo buttons

* 2222-move undo buttons to left side

* 2222 moved undo/redo buttons to codemirror toolbar

* 2222 fix tooltip bug

---------

Co-authored-by: Ben W. Brumfield <benwbrum@gmail.com>

app/assets/javascripts/application.js

@@ -377,6 +377,18 @@ function refreshEditors() {
   }
 }
 
+function undoCodeMirror() {
+  if(typeof myCodeMirror !== 'undefined') {
+    myCodeMirror.undo();
+  }
+}
+
+function redoCodeMirror() {
+  if(typeof myCodeMirror !== 'undefined') {
+    myCodeMirror.redo();
+  }
+}
+
 const ResizableSplitter = {
   initVertical: function makeResiableSplitter(splitterSelector, panel1Selector, panel2Selector, mode='', options = {}) {
     const { onDrag, onChanged, initialPosition = '50%', onPositionChange } = options;

app/assets/stylesheets/codemirror/lib/codemirror.css

@@ -585,4 +585,20 @@ span.CodeMirror-selectedtext {
 li.CodeMirror-hint-active {
   background: #08f;
   color: #fff;
+}
+
+
+button.undoBtn,
+button.redoBtn  {
+  position: relative;
+  display: flex;
+  align-items: center;
+  column-gap: 3px;
+  justify-content: center;
+  width: 40px;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 }

app/assets/stylesheets/sections/page.scss

@@ -102,7 +102,6 @@
   }
 }
 
-
 #blankPageButton {
   margin: 0px 10px;
 }

app/views/shared/_codemirror.html.erb

@@ -28,12 +28,28 @@
 
 <script>
   var button_config = [
+    {
+      class: 'undoBtn',
+      label: '<%= svg_symbol("#icon-arrow-undo") %>',
+      title: '<%= t(".undo_description") %>',
+      callback: function (cm) {
+        return false
+      }
+    },
+    {
+      class: 'redoBtn',
+      label: '<%= svg_symbol("#icon-arrow-redo") %>',
+      title: '<%= t(".redo_description") %>',
+      callback: function (cm) {
+        return false
+      }
+    },
     <% @collection.editor_buttons.each do |button| %>
       {
         hotkey: '<%= button.hotkey %>',
         class: '<%= "editor-buttons-#{button.key}" %>',
         label: '<%= "#{button.key}" %>',
-        tooltip: '<%= t(".#{button.key}_description", default: button.key) %>',
+        title: '<%= t(".#{button.key}_description", default: button.key) %>',
         callback: function (cm) {
           var selection = cm.getSelection();
           cm.replaceSelection('<%= button.open_tag %>' + selection + '<%= button.close_tag %>');
@@ -206,4 +222,7 @@
 
     // give codeMirror with class of respective text direction
     myCodeMirror.getWrapperElement().classList.add("<%= text_direction %>");
+
+    document.querySelector('.undoBtn').addEventListener('click', function(){undoCodeMirror()});
+    document.querySelector('.redoBtn').addEventListener('click', function(){redoCodeMirror()});
 </script>

app/views/transcribe/display_page.html.slim

@@ -48,6 +48,8 @@
           span =t('.always_show_fullscreen')
 
       .flex-toolbar_group.push-right
+
+      .flex-toolbar_group
         =f.label 'mark_blank', t('.mark_as_blank')
         =f.check_box('mark_blank', {checked: @page.status_blank?})
 

app/views/transcribe/translate.html.slim

@@ -16,6 +16,8 @@
             span.voice-info
 
       .flex-toolbar_group.push-right
+
+      .flex-toolbar_group
         =f.label 'mark_blank', t('.mark_as_blank')
         =f.check_box('mark_blank', {checked: @page.status_blank?})
 

config/locales/shared/shared-de.yml

@@ -21,12 +21,14 @@ de:
       gap_description: Markiert eine Lücke im Text, oft aufgrund von Beschädigungen
       head_description: Markiert Überschriften im Text
       marginalia_description: Markiert Text am Seitenrand (außerhalb des Haupttextes).
+      redo_description: Die letzte rückgängig gemachte Aktion wiederherstellen.
       reg_description: Markiert eine normalisierte Schreibung mit Originalform im orig-Attribut.
       s_description: Markiert Text, der aus irgendeinem Grund durchgestrichen wurde.
       sub_description: Tiefgestellter Text.
       sup_description: Hochgestellter Text.
       u_description: Markiert unterstrichenen Text.
       unclear_description: Markiert unklaren Text.
+      undo_description: Die letzte Aktion rückgängig machen.
     collection_tabs:
       add_work: Werk hinzufügen
       collaborators: Mitarbeitende

config/locales/shared/shared-en.yml

@@ -21,12 +21,14 @@ en:
       gap_description: Marks a gap in the text, often due to damage
       head_description: Marks headings within the text
       marginalia_description: Marks text in the margins of the main text.
+      redo_description: Redo the last undone action
       reg_description: Marks a regularized form of the text, with original forms in the orig attribute.
       s_description: Marks text that has been struck through for any reason.
       sub_description: Subscript text.
       sup_description: Superscript text.
       u_description: Marks underlined text.
       unclear_description: Marks unclear text.
+      undo_description: Undo the last action
     collection_tabs:
       add_work: Add Work
       collaborators: Collaborators

config/locales/shared/shared-es.yml

@@ -21,12 +21,14 @@ es:
       gap_description: Marca un hueco en el texto, a menudo debido a daños
       head_description: Marca los encabezados dentro del texto
       marginalia_description: Marca el texto en los márgenes del texto principal.
+      redo_description: Rehacer la última acción deshecha
       reg_description: Marca una forma regularizada del texto, con formularios originales en el atributo orig.
       s_description: Marca el texto que se ha tachado por cualquier motivo.
       sub_description: Texto de subíndice.
       sup_description: Texto de superíndice.
       u_description: Marca el texto subrayado.
       unclear_description: Marca texto poco claro.
+      undo_description: Deshacer la última acción.
     collection_tabs:
       add_work: Añadir Obra
       collaborators: Colaboradores

config/locales/shared/shared-fr.yml

@@ -21,12 +21,14 @@ fr:
       gap_description: Marque un vide dans le texte, souvent dû à des dommages
       head_description: Marque les titres dans le texte
       marginalia_description: Marque le texte dans les marges du texte principal.
+      redo_description: Refaire la dernière action annulée
       reg_description: Marque une forme régularisée du texte, avec des formes originales dans l'attribut orig.
       s_description: Marque le texte qui a été barré pour une raison quelconque.
       sub_description: Texte en indice.
       sup_description: Texte en exposant.
       u_description: Marque le texte souligné.
       unclear_description: Marque le texte peu clair.
+      undo_description: Annuler la dernière action
     collection_tabs:
       add_work: Ajouter un œuvre
       collaborators: Collaborateurs

config/locales/shared/shared-pt.yml

@@ -21,12 +21,14 @@ pt:
       gap_description: Marca uma lacuna no texto, geralmente devido a danos
       head_description: Marca os títulos dentro do texto
       marginalia_description: Marca o texto nas margens do texto principal.
+      redo_description: Refazer a última ação anulada
       reg_description: Marca uma forma regularizada do texto, com formas originais no atributo original.
       s_description: Marca o texto que foi riscado por qualquer motivo.
       sub_description: Texto subscrito.
       sup_description: Superscript text.
       u_description: Marca o texto sublinhado
       unclear_description: Marca um texto pouco claro
+      undo_description: Anular a última ação
     collection_tabs:
       add_work: Adicionar Obra
       collaborators: Colaboradores