a little js

app/javascript/controllers/hide_target_controller.ts

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus';
+
+export class HideTargetController extends Controller {
+  static targets = ['source', 'toHide'];
+  declare readonly toHideTargets: HTMLDivElement[];
+  declare readonly sourceTargets: HTMLInputElement[];
+
+  connect() {
+    this.sourceTargets.forEach((source) => {
+      source.addEventListener('click', this.handleInput.bind(this));
+    });
+  }
+
+  handleInput() {
+    this.toHideTargets.forEach((toHide) => {
+      toHide.classList.toggle('fr-hidden');
+    });
+  }
+}

app/javascript/controllers/lazy/tiptap_controller.ts

@@ -10,7 +10,8 @@ import { createEditor } from '../../shared/tiptap/editor';
 export class TiptapController extends ApplicationController {
   static targets = ['editor', 'input', 'button', 'tag'];
   static values = {
-    insertAfterTag: { type: String, default: '' }
+    insertAfterTag: { type: String, default: '' },
+    attributes: { type: Object, default: {} }
   };
 
   declare editorTarget: Element;
@@ -18,6 +19,7 @@ export class TiptapController extends ApplicationController {
   declare buttonTargets: HTMLButtonElement[];
   declare tagTargets: HTMLElement[];
   declare insertAfterTagValue: string;
+  declare attributesValue: Record<string, string>;
 
   #initializing = true;
   #editor?: Editor;
@@ -28,6 +30,7 @@ export class TiptapController extends ApplicationController {
       content: this.content,
       tags: this.tags,
       buttons: this.menuButtons,
+      attributes: { class: 'fr-input', ...this.attributesValue },
       onChange: ({ editor }) => {
         for (const button of this.buttonTargets) {
           const action = getAction(editor, button);

app/javascript/controllers/tiptap_to_template_controller.ts

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+
+export class TiptapToTemplateController extends Controller {
+  static targets = ['output', 'trigger'];
+
+  declare readonly outputTarget: HTMLElement;
+  declare readonly triggerTarget: HTMLButtonElement;
+
+  connect() {
+    this.triggerTarget.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  handleClick() {
+    const template = this.element.querySelector('.tiptap.ProseMirror p');
+
+    if (template) {
+      this.outputTarget.innerHTML = template.innerHTML;
+    }
+  }
+}

app/javascript/shared/tiptap/editor.ts

@@ -33,6 +33,7 @@ export function createEditor({
   content,
   tags,
   buttons,
+  attributes,
   onChange
 }: {
   editorElement: Element;
@@ -40,8 +41,15 @@ export function createEditor({
   tags: TagSchema[];
   buttons: string[];
   onChange(change: { editor: Editor }): void;
+  attributes?: Record<string, string>;
 }): Editor {
-  const options = getEditorOptions(editorElement, tags, buttons, content);
+  const options = getEditorOptions(
+    editorElement,
+    tags,
+    buttons,
+    content,
+    attributes
+  );
   const editor = new Editor(options);
   editor.on('transaction', onChange);
   return editor;
@@ -51,7 +59,8 @@ function getEditorOptions(
   element: Element,
   tags: TagSchema[],
   actions: string[],
-  content?: JSONContent
+  content?: JSONContent,
+  attributes?: Record<string, string>
 ): Partial<EditorOptions> {
   const extensions: Extensions = [];
   for (const action of actions) {
@@ -123,7 +132,7 @@ function getEditorOptions(
   return {
     element,
     content,
-    editorProps: { attributes: { class: 'fr-input' } },
+    editorProps: { attributes },
     extensions: [
       actions.includes('title') ? DocumentWithHeader : Document,
       Hystory,