diff --git a/app/javascript/controllers/hide_target_controller.ts b/app/javascript/controllers/hide_target_controller.ts new file mode 100644 index 000000000..607543aac --- /dev/null +++ b/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'); + }); + } +} diff --git a/app/javascript/controllers/lazy/tiptap_controller.ts b/app/javascript/controllers/lazy/tiptap_controller.ts index 58336e926..eeb2a58bb 100644 --- a/app/javascript/controllers/lazy/tiptap_controller.ts +++ b/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; #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); diff --git a/app/javascript/controllers/tiptap_to_template_controller.ts b/app/javascript/controllers/tiptap_to_template_controller.ts new file mode 100644 index 000000000..90f58294e --- /dev/null +++ b/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; + } + } +} diff --git a/app/javascript/shared/tiptap/editor.ts b/app/javascript/shared/tiptap/editor.ts index 3c12fc792..590aa0701 100644 --- a/app/javascript/shared/tiptap/editor.ts +++ b/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; }): 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 ): Partial { 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,