Markdown table in code mirror

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

@@ -552,7 +552,6 @@ span.CodeMirror-selectedtext {
   background: none;
 }
 
-
 .CodeMirror-hints {
   position: absolute;
   z-index: 100;
@@ -587,7 +586,6 @@ li.CodeMirror-hint-active {
   color: #fff;
 }
 
-
 button.undoBtn,
 button.redoBtn  {
   position: relative;

app/models/deed.rb

@@ -23,15 +23,15 @@
 # Indexes
 #
 #  index_deeds_on_article_id                                        (article_id)
-#  index_deeds_on_collection_id_and_created_at                      (collection_id,created_at)
-#  index_deeds_on_collection_id_and_deed_type_and_created_at        (collection_id,deed_type,created_at)
-#  index_deeds_on_created_at_and_collection_id                      (created_at,collection_id)
+#  index_deeds_on_collection_id_and_created_at                      (collection_id,created_at DESC)
+#  index_deeds_on_collection_id_and_deed_type_and_created_at        (collection_id,deed_type,created_at DESC)
+#  index_deeds_on_created_at_and_collection_id                      (created_at DESC,collection_id)
 #  index_deeds_on_note_id                                           (note_id)
 #  index_deeds_on_page_id                                           (page_id)
-#  index_deeds_on_user_id_and_created_at                            (user_id,created_at)
+#  index_deeds_on_user_id_and_created_at                            (user_id,created_at DESC)
 #  index_deeds_on_visit_id                                          (visit_id)
-#  index_deeds_on_work_id_and_created_at                            (work_id,created_at)
-#  index_deeds_on_work_id_and_deed_type_and_user_id_and_created_at  (work_id,deed_type,user_id,created_at)
+#  index_deeds_on_work_id_and_created_at                            (work_id,created_at DESC)
+#  index_deeds_on_work_id_and_deed_type_and_user_id_and_created_at  (work_id,deed_type,user_id,created_at DESC)
 #
 class Deed < ApplicationRecord
   belongs_to :article, optional: true

app/models/editor_button.rb

@@ -36,6 +36,7 @@ module Keys
     STRIKE = 'strike'
     SUB = 'sub'
     SUP = 'sup'
+    TABLE = 'table'
     UNCLEAR = 'unclear'
     UNDERLINE = 'u'
     ITALIC = 'i'
@@ -58,6 +59,7 @@ module Keys
     Keys::STRIKE => ['<hi rend="str">', '<strike>'],
     Keys::SUB => ['<hi rend="sub">', '<sub>'],
     Keys::SUP => ['<hi rend="sup">', '<sup>'],
+    Keys::TABLE => [''],
     Keys::UNCLEAR => ['<unclear>'],
     Keys::UNDERLINE => ['<hi rend="underline">', '<u>']
   }

app/views/collection/edit_buttons.html.slim

@@ -14,6 +14,9 @@ p =t('.description')
           =f.label key
             =check_box_tag key, '1', buttons.include?(key)
             span
+              -if EditorButton::BUTTON_MAP[key][0] == ''
+                code
+                  =="| H1 | H2 |<br/>|----|----|<br/>| C1 | C2 |<br/>| C3 | C4 |"
               -if EditorButton::BUTTON_MAP[key].size > 1
                 code
                   =EditorButton::BUTTON_MAP[key][0]

app/views/shared/_codemirror.html.erb

@@ -51,18 +51,23 @@
         label: '<%= "#{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 %>');
-          if (!selection) {
-            var cursorPos = cm.getCursor();
-            cm.setCursor(cursorPos.line, cursorPos.ch - <%= button.cursor_offset %>);
-          }
-          <% if button.has_attribute %>
-            else {
+          var key = '<%= "#{button.key}" %>';
+          if(key === 'table') {
+            openTableModal()
+          } else {
+            var selection = cm.getSelection();
+            cm.replaceSelection('<%= button.open_tag %>' + selection + '<%= button.close_tag %>');
+            if (!selection) {
               var cursorPos = cm.getCursor();
-              cm.setCursor(cursorPos.line, cursorPos.ch - <%= button.cursor_offset %> - selection.length - 2);
+              cm.setCursor(cursorPos.line, cursorPos.ch - <%= button.cursor_offset %>);
             }
-          <% end %>
+            <% if button.has_attribute %>
+              else {
+                var cursorPos = cm.getCursor();
+                cm.setCursor(cursorPos.line, cursorPos.ch - <%= button.cursor_offset %> - selection.length - 2);
+              }
+            <% end %>
+          }
         }
       },
     <% end %>
@@ -135,6 +140,49 @@
       rtlMoveVisually: true,
       direction: "<%= text_direction %>",
     });
+
+  // track editing for volunteer hours
+  myCodeMirror.on("change", function(instance, changeObj) {
+    sendActiveEditing()
+  });
+
+  // give codeMirror with class of respective text direction
+  myCodeMirror.getWrapperElement().classList.add("<%= text_direction %>");
+
+
+  // open the modal
+  function openTableModal() {
+    document.getElementById('tableModal').style.display = 'block';
+  }
+
+  // close the modal
+  function closeTableModal() {
+    document.getElementById('tableModal').style.display = 'none';
+  }
+
+  // generate a Markdown table
+  function generateTable(rows, cols) {
+    let table = '| ' + Array(cols).fill('').join(' | ') + ' |\n';
+    table += '| ' + Array(cols).fill('---').join(' | ') + ' |\n';
+    for (let i = 0; i < rows - 1; i++) {
+      table += '| ' + Array(cols).fill('').join(' | ') + ' |\n';
+    }
+    return table;
+  }
+
+  // insert table into CodeMirror
+  function insertTable() {
+    const rows = parseInt(document.getElementById('rows').value);
+    const cols = parseInt(document.getElementById('columns').value);
+    const tableMarkdown = generateTable(rows, cols);
+    myCodeMirror.replaceSelection(tableMarkdown);
+    closeTableModal();
+  }
+
+  // event listeners
+  // document.querySelector('.insertTableBtn').addEventListener('click', openTableModal);
+  document.getElementById('insertTableOk').addEventListener('click', insertTable);
+  document.getElementById('insertTableCancel').addEventListener('click', closeTableModal);
     // track editing for volunteer hours
     myCodeMirror.on("change", function(instance, changeObj) {
       sendActiveEditing()
@@ -225,4 +273,4 @@
 
     document.querySelector('.undoBtn').addEventListener('click', function(){undoCodeMirror()});
     document.querySelector('.redoBtn').addEventListener('click', function(){redoCodeMirror()});
-</script>
+  </script>

app/views/shared/_insert_table_modal.html.erb

@@ -0,0 +1,50 @@
+<!-- Modal for table configuration -->
+
+<style>
+    .modal {
+        display: none;
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(0,0,0,0.5);
+    }
+
+    .modal-content {
+        background-color: #fefefe;
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 300px;
+    }
+
+    .buttons {
+        margin-top: 10px;
+        display: flex;
+        justify-content: flex-end;
+        column-gap: 5px;
+    }
+
+    .item {
+        margin-bottom: 10px;
+    }
+</style>
+<div id="tableModal" class="modal">
+    <div class="modal-content">
+        <div class="item">
+            <label for="rows"><%= t('.rows') %>:</label>
+            <input type="number" id="rows" min="1" value="2">
+        </div>
+        <div class="item">
+            <label for="columns"><%= t('.columns') %>:</label>
+            <input type="number" id="columns" min="1" value="2">
+        </div>
+        <div class="buttons">
+            <button id="insertTableOk"><%= t('.ok') %></button>
+            <button id="insertTableCancel"><%= t('.cancel') %></button>
+        </div>
+    </div>
+</div>

app/views/transcribe/display_page.html.slim

@@ -11,6 +11,9 @@
 -else
   =render({ :partial => '/shared/page_tabs', :locals => { :selected => 3, :page_id => @page.id }})
 
+
+=render({ :partial => '/shared/insert_table_modal' })
+
 -editor_class = 'page-editor' + (@auto_fullscreen == 'yes' ? ' fullscreen' : '')
 - if @autolinked_changed
   = hidden_field_tag(:autolinked_source_text, @autolinked_source_text)

app/views/transcribe/translate.html.slim

@@ -2,6 +2,8 @@
 
 =render({ :partial => '/shared/page_tabs', :locals => { :selected => 6, :page_id => @page.id }})
 
+=render({ :partial => '/shared/insert_table_modal' })
+
 =form_for(@page, :url => { :action => 'save_translation', :type => 'translation' }, :html => { class: 'page-editor' }) do |f|
   =hidden_field_tag(:page_id, @page.id)
   =validation_summary @page.errors

config/locales/collection/collection-de.yml

@@ -94,6 +94,7 @@ de:
       del_description: Markiert Text, der durch Löschen oder Durchstreichen entfernt wurde. <br><i>Empfohlen</i>
       del_label: Streichung
       description: FromThePage kann Auszeichnungen in Transkripten für TEI-XML oder HTML unterstützen. Wir empfehlen, nicht mehr als sechs Buttons auszuwählen, die im Transkriptionseditor angezeigt werden. Überlegen Sie, ob andere Systeme diese Art von Mark-up verwenden können; wenn nur plain text unterstützt wird, sollten Projekte die Buchdruck-Konventionen anstelle von Mark-up verwenden.
+      documentation: Dokumentation
       expan_description: Kennzeichnet erweiterte Abkürzungen mit Originalformen im orig-Attribut (Alternative Form des abbr-Tags).
       expan_label: Erweiterung
       fig_description: Kennzeichnet eine Abbildung oder eine horizontale Linie.
@@ -125,6 +126,8 @@ de:
       sub_label: Subskript
       sup_description: Hochgestellter Text.
       sup_label: Supskript
+      table_description: Fügt eine Markdown-Tabelle mit vom Transkribierer angegebenen Zeilen und Spalten ein
+      table_label: Tisch
       tei: " (TEI-XML)"
       u_description: Markiert unterstrichenen Text.
       u_label: Unterstrichen

config/locales/collection/collection-en.yml

@@ -94,6 +94,7 @@ en:
       del_description: Marks text that has been removed by erasure or strike-through. <br><i>Recommended</i>
       del_label: Deletion
       description: FromThePage can support mark-up within transcripts in either TEI-XML or HTML forms.  We recommend configuring no more than six buttons to appear on the transcription editor.  Consider whether other systems will be able to use this kind of mark-up; if only plaintext is supported, projects should use letterpress conventions instead of mark-up.
+      documentation: Documentation
       expan_description: Marks expanded abbreviations with original forms in the orig attribute.  (Alternate form of abbr tag.)
       expan_label: Expansion
       fig_description: Indicates a figure or a horizontal line.
@@ -125,6 +126,8 @@ en:
       sub_label: Subscript
       sup_description: Superscript text.
       sup_label: Superscript
+      table_description: Inserts a markdown table of transcriber specified rows and columns
+      table_label: Table
       tei: " (TEI-XML)"
       u_description: Marks underlined text.
       u_label: Underline

config/locales/collection/collection-es.yml

@@ -94,6 +94,7 @@ es:
       del_description: Marca el texto que ha sido eliminado por borrado o tachado. <br><i>Recomendado</i>
       del_label: Supresión
       description: FromThePage puede admitir el marcado dentro de las transcripciones en formularios TEI-XML o HTML. Recomendamos configurar no más de seis botones para que aparezcan en el editor de transcripción. Considere si otros sistemas podrán usar este tipo de margen; si solo se admite texto sin formato, los proyectos deben usar convenciones tipográficas en lugar de marcado.
+      documentation: Documentación
       expan_description: Marca abreviaturas expandidas con formas originales en el atributo orig. (Forma alternativa de etiqueta abbr.)
       expan_label: Expansión
       fig_description: Indica una figura o una línea horizontal.
@@ -125,6 +126,8 @@ es:
       sub_label: Subíndice
       sup_description: Texto en superíndice.
       sup_label: Sobrescrito
+      table_description: Inserta una tabla de rebajas de filas y columnas especificadas por el transcriptor
+      table_label: Mesa
       tei: " (TEI-XML)"
       u_description: Marca el texto subrayado.
       u_label: Subrayar

config/locales/collection/collection-fr.yml

@@ -94,6 +94,7 @@ fr:
       del_description: Marque le texte qui a été supprimé par effacement ou barré. <br><i>Recommandé</i>
       del_label: Effacement
       description: FromThePage peut prendre en charge le balisage dans les transcriptions dans les formulaires TEI-XML ou HTML. Nous vous recommandons de ne pas configurer plus de six boutons à afficher sur l'éditeur de transcription. Demandez-vous si d'autres systèmes pourront utiliser ce type de majoration ; si seul le texte brut est pris en charge, les projets doivent utiliser les conventions typographiques au lieu du balisage.
+      documentation: Documentation
       expan_description: Marque les abréviations développées avec des formes originales dans l'attribut orig. (Forme alternative de la balise abbr.)
       expan_label: Expansion
       fig_description: Indique un chiffre ou une ligne horizontale.
@@ -125,6 +126,8 @@ fr:
       sub_label: Indice
       sup_description: Texte en exposant.
       sup_label: Exposant
+      table_description: Insère un tableau de démarques de lignes et de colonnes spécifiées par le transcripteur
+      table_label: Tableau
       tei: " (TEI-XML)"
       u_description: Marque le texte souligné.
       u_label: Souligner

config/locales/collection/collection-pt.yml

@@ -94,6 +94,7 @@ pt:
       del_description: Marca o texto que foi removido por apagamento ou tachado. <br><i>Recomendado</i>
       del_label: Eliminação
       description: FromThePage pode suportar marcação em transcrições em formulários TEI-XML ou HTML. Recomendamos configurar no máximo seis botões para aparecer no editor de transcrição. Considere se outros sistemas poderão usar esse tipo de marcação; se apenas texto simples for suportado, os projetos devem usar convenções de tipografia em vez de marcação.
+      documentation: Documentação
       expan_description: Marca abreviações expandidas com formas originais no atributo orig. (Forma alternativa de tag abbr.)
       expan_label: Expansão
       fig_description: Indica uma figura ou uma linha horizontal.
@@ -125,6 +126,8 @@ pt:
       sub_label: Subscrito
       sup_description: Texto sobrescrito.
       sup_label: Sobrescrito
+      table_description: Insere uma tabela de redução de linhas e colunas especificadas pelo transcritor
+      table_label: Mesa
       tei: " (TEI-XML)"
       u_description: Marca o texto sublinhado.
       u_label: Sublinhado

config/locales/transcribe/transcribe-de.yml

@@ -1,5 +1,11 @@
 ---
 de:
+  shared:
+    insert_table_modal:
+      cancel: Annuleren
+      columns: Säulen
+      ok: OK
+      rows: Reihen
   transcribe:
     assign_categories:
       assign_categories: Kategorien zuweisen

config/locales/transcribe/transcribe-en.yml

@@ -1,5 +1,11 @@
 ---
 en:
+  shared:
+    insert_table_modal:
+      cancel: Cancel
+      columns: Columns
+      ok: OK
+      rows: Rows
   transcribe:
     assign_categories:
       assign_categories: Assign categories

config/locales/transcribe/transcribe-es.yml

@@ -1,5 +1,11 @@
 ---
 es:
+  shared:
+    insert_table_modal:
+      cancel: Cancelar
+      columns: Columnas
+      ok: De acuerdo
+      rows: Filas
   transcribe:
     assign_categories:
       assign_categories: Asignar categorías

config/locales/transcribe/transcribe-fr.yml

@@ -1,5 +1,11 @@
 ---
 fr:
+  shared:
+    insert_table_modal:
+      cancel: Annuler
+      columns: Colonnes
+      ok: D'accord
+      rows: Lignes
   transcribe:
     assign_categories:
       assign_categories: Attribuer des catégories

config/locales/transcribe/transcribe-pt.yml

@@ -1,5 +1,11 @@
 ---
 pt:
+  shared:
+    insert_table_modal:
+      cancel: Cancelar
+      columns: Colunas
+      ok: OK
+      rows: Linhas
   transcribe:
     assign_categories:
       assign_categories: Atribuir categorias