feat(attestation): use tiptap editor controller

app/assets/stylesheets/attestation_template_2_edit.scss

@@ -1,16 +1,7 @@
 #attestation-edit {
-  .mention {
-    border: 1px solid var(--text-default-grey);
-    padding: 8px;
-  }
-
-  .selected {
-    border: 1px solid #000000;
-  }
-
   .tiptap {
     padding: 8px;
-
-    min-height: 300px;
+    overflow-y: scroll;
+    min-height: 400px;
   }
 }

app/assets/stylesheets/flex.scss

@@ -60,6 +60,10 @@
   flex-shrink: 0;
 }
 
+.flex-gap-1 {
+  gap: $default-spacer;
+}
+
 .flex-gap-2 {
   gap: 2 * $default-spacer;
 }

app/controllers/administrateurs/attestation_template_v2s_controller.rb

@@ -24,11 +24,35 @@ module Administrateurs
     end
 
     def edit
+      @buttons = [
+        [
+          ['Gras', 'bold', 'bold'],
+          ['Italic', 'italic', 'italic'],
+          ['Souligner', 'underline', 'underline']
+        ],
+        [
+          ['Titre', 'title', 'h-1'],
+          ['Sous titre', 'heading2', 'h-2'],
+          ['Titre de section', 'heading3', 'h-3']
+        ],
+        [
+          ['Liste à puces', 'bulletList', 'list-unordered'],
+          ['Liste numérotée', 'orderedList', 'list-ordered']
+        ],
+        [
+          ['Aligner à gauche', 'left', 'align-left'],
+          ['Aligner au centre', 'center', 'align-center'],
+          ['Aligner à droite', 'right', 'align-right']
+        ],
+        [
+          ['Undo', 'undo', 'arrow-go-back-line'],
+          ['Redo', 'redo', 'arrow-go-forward-line']
+        ]
+      ]
     end
 
     def update
-      @attestation_template
-        .update(json_body: editor_params)
+      @attestation_template.update!(editor_params)
     end
 
     private
@@ -42,7 +66,7 @@ module Administrateurs
     end
 
     def editor_params
-      params.permit(content: [:type, content: [:type, :text, attrs: [:id, :label]]])
+      params.required(:attestation_template).permit(:tiptap_body)
     end
   end
 end

app/javascript/controllers/autosubmit_controller.ts

@@ -43,7 +43,8 @@ export class AutosubmitController extends ApplicationController {
 
     matchInputElement(target, {
       date: () => {},
-      inputable: () => this.debounce(this.submit, AUTOSUBMIT_DEBOUNCE_DELAY)
+      inputable: () => this.debounce(this.submit, AUTOSUBMIT_DEBOUNCE_DELAY),
+      hidden: () => this.debounce(this.submit, AUTOSUBMIT_DEBOUNCE_DELAY)
     });
   }
 

app/models/attestation_template.rb

@@ -99,6 +99,14 @@ class AttestationTemplate < ApplicationRecord
     signature.attached? ? signature.filename : nil
   end
 
+  def tiptap_body
+    json_body&.to_json
+  end
+
+  def tiptap_body=(json)
+    self.json_body = JSON.parse(json)
+  end
+
   private
 
   def signature_to_render(groupe_instructeur)

app/views/administrateurs/attestation_template_v2s/edit.html.haml

@@ -1,10 +1,16 @@
-#attestation-edit.fr-container.mt-2{
-    data: {
-      controller: 'attestation',
-      attestation_tags_value: @attestation_template.tags.map { _1[:libelle] },
-      attestation_url_value: admin_procedure_attestation_template_v2_path(@procedure)} }
+#attestation-edit.fr-container.mt-2{ data: { controller: 'tiptap' } }
+  = form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), data: { turbo: 'true', controller: 'autosubmit' } do |form|
+    .flex.flex-gap-2
+      - @buttons.each do |buttons|
+        .flex.flex-gap-1
+          - buttons.each do |(label, action, icon)|
+            %button.fr-btn.fr-btn--secondary.fr-btn--sm{ type: 'button', title: label, class: "fr-icon-#{icon}", data: { action: 'click->tiptap#menuButton', tiptap_target: 'button', tiptap_action: action } }
+              = label
 
-  %button.fr-btn{ data: { action: 'click->attestation#bold', attestation_target: 'bold' } } Gras
-  .editor.mt-2{ data: { attestation_target: 'editor' } }
+    .editor.mt-2{ data: { tiptap_target: 'editor' } }
+    = form.hidden_field :tiptap_body, data: { tiptap_target: 'input' }
 
-  %button.fr-btn.mt-2{ data: { action: 'click->attestation#send' } } Envoyer
+    %ul.mt-2.flex.wrap.flex-gap-1
+      - @attestation_template.tags.each do |tag|
+        %li.fr-badge.fr-badge--sm{ role: 'button', title: tag[:description], data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: tag[:libelle] } }
+          = tag[:libelle]