Flux d'exécution

// Créer un élément avec des classes
Dom.makel('div', ['rdac-block', 'mt-2'])
// équivaut à :
const el = document.createElement('div')
el.classList.add('rdac-block', 'mt-2')

// Créer une icône Bootstrap Icons
Dom.make_icon(['bi-type-bold'])
// équivaut à :
const i = document.createElement('i')
i.classList.add('bi', 'bi-type-bold')  // ← 'bi' ajouté automatiquement

Utils.rdm_id()       // → "k7x2mq4pnb"  (10 caractères alphanumériques aléatoires)
Utils.rdm_id(6)      // → "x4m2qp"

const redac = new Redac({
    inline_tools: {
        bold:   { class: It_bold },
        italic: { class: It_italic }
    }
})

constructor({ tools: [] }) {
    // 1. Crée le conteneur de la barre flottante
    this._wrapper = Dom.makel('div', ['rdac-inline-menu'])

    // 2. Instancie chaque outil : [It_bold, It_italic] → [new It_bold(), new It_italic()]
    this._tools = settings.tools.map(Tool_class => new Tool_class())

    // 3. Un seul listener sur le wrapper — délègue au bon outil via data-redacItName
    this._wrapper.addEventListener('click', (event) => {
        const btn = event.target.closest('button')
        if (btn === null) return   // ← garde : clic sur le wrapper mais pas un bouton
        const tool = this._tools.find(t => t.name === btn.dataset.redacItName)
        if (tool) tool.action(event)
    })

    // 4. Inséré dans document.body (PAS dans .rdac) — une seule fois, pour toujours
    document.body.appendChild(this._wrapper)

    this.close()  // masqué par défaut (display:none)
}

_init() {
    const first = new Paragraph()         // crée le bloc
    this._wrapper.append(first.render())  // render() → insère le DOM
    this._blocks.add(first)               // ajoute au tableau
    this._mount_tune(first)               // câble les callbacks
    this._refresh_states()                // met à jour les boutons ↑/↓/✕
    first.focus()                         // place le curseur dedans
}

// 1. Capturer la position du curseur
const range = sel.getRangeAt(0)

// 2. Définir un Range "du curseur jusqu'à la fin du bloc"
const tail = document.createRange()
tail.setStart(range.endContainer, range.endOffset)   // ← là où est le curseur
tail.setEnd(end_bounds.endContainer, end_bounds.endOffset) // ← fin du bloc

// 3. extractContents() : coupe et retourne ce fragment (modifie le DOM existant)
const tail_fragment = tail.extractContents()

// 4. Créer le nouveau bloc avec le contenu extrait
const new_block = new Paragraph()
new_block.content_el.innerHTML = temp.innerHTML  // ← le "après curseur"
// Le bloc courant garde le "avant curseur" (le reste après extractContents)

_add_block(after_id) {
    const block  = new Paragraph()            // nouveau bloc vide
    const dom    = block.render()
    const ref_el = document.getElementById(after_id)

    // DOM : insérer juste après le bloc de référence
    ref_el?.nextSibling
        ? this._wrapper.insertBefore(dom, ref_el.nextSibling)
        : this._wrapper.append(dom)

    this._blocks.insert_after(after_id, block)  // tableau : même position
    this._mount_tune(block)
    this._refresh_states()
    block.focus()
}

// Dans Tune._toggle() :
const { id, classes } = this.on_open()       // ← Redac retourne les valeurs courantes
this._id_input.value  = id                   // ← pré-remplit le champ "id"
this._cls_input.value = classes              // ← pré-remplit le champ "class"
this._dropdown.style.display = 'block'

// on_open est défini par _mount_tune() :
t.on_open = () => {
    const block_el = document.getElementById(block.id)
    return {
        id:      block_el?.dataset.customId || '',
        classes: Array.from(block_el?.classList || [])
                    .filter(c => c !== 'rdac-block').join(' ')
    }
}

// Tune lit les inputs et appelle on_apply_attrs :
this.on_apply_attrs?.({ id: this._id_input.value.trim(), classes: this._cls_input.value.trim() })

// Redac applique sur le wrapper DOM :
t.on_apply_attrs = ({ id, classes }) => {
    const block_el = document.getElementById(block.id)
    if (id) block_el.dataset.customId = id      // ← stocké en data-custom-id
    else    delete block_el.dataset.customId

    // Reset les classes custom, garde seulement rdac-block
    Array.from(block_el.classList)
        .filter(c => c !== 'rdac-block')
        .forEach(c => block_el.classList.remove(c))

    classes.split(/\s+/).filter(Boolean).forEach(c => block_el.classList.add(c))
}

// mouseup dans Redac._listen() :
const selection    = window.getSelection()
const selected_txt = selection.toString()
if (!selected_txt) return

// Vérifier que la sélection est dans un .rdac-content
const anchor_node = selection.anchorNode
const parent_el   = anchor_node.nodeType === Node.TEXT_NODE
    ? anchor_node.parentElement
    : anchor_node

if (parent_el?.closest('.rdac-content')) {
    this._inline_menu.render(selection, selected_txt)
}

const rect = range.getBoundingClientRect()  // coordonnées de la sélection dans le viewport

// scrollX/Y pour compenser le scroll de la page (position absolute dans body)
const x = window.scrollX + rect.left + rect.width / 2  // centré horizontalement
const y = window.scrollY + rect.top                     // bord haut de la sélection

this._wrapper.style.left      = `${x}px`
this._wrapper.style.top       = `${y}px`
this._wrapper.style.transform = 'translate(-50%, calc(-100% - 6px))'
//                               ↑ centrer     ↑ monter au-dessus + 6px de marge

// Demander à chaque outil de construire son bouton
this._tools.forEach(tool => {
    this._wrapper.appendChild(tool.render(selection, selected_txt))
})

// Délégation : un seul listener sur le wrapper lit data-redacItName
this._wrapper.addEventListener('click', (event) => {
    const btn  = event.target.closest('button')
    const tool = this._tools.find(t => t.name === btn.dataset.redacItName)
    if (tool) tool.action(event)   // ← l'outil applique le formatage
})

constructor() {
    this._name    = 'bold'
    this._wrapper = Dom.makel('button', ['btn', 'btn-outline-secondary'])
    this._wrapper.append(Dom.make_icon(['bi-type-bold']))
    this._wrapper.dataset.redacItName = this._name  // ← clé de la délégation
}

render(selection, selected_txt) {
    this._selection    = selection      // ← objet Selection du navigateur (live)
    this._selected_txt = selected_txt   // ← résultat de selection.toString()
    return this._wrapper                // ← le même bouton DOM à chaque fois
}

action(event) {
    if (!this._selected_txt || !this._selection.rangeCount) return

    const range = this._selection.getRangeAt(0)

    // commonAncestorContainer = le nœud DOM qui contient toute la sélection
    // .closest('strong') remonte dans les parents jusqu'à trouver un 
    const bold_parent = range.commonAncestorContainer.closest?.('strong')
        ?? range.commonAncestorContainer.parentElement?.closest('strong')
    //  ↑ fallback si commonAncestorContainer est un TextNode (pas d'élément)

    let new_node  // ← déclaré ici pour être accessible dans les deux branches

    if (bold_parent) {
        // ── CAS : déjà en gras → retirer le  ──────────────────────
        const text_node = document.createTextNode(this._selected_txt)
        bold_parent.replaceWith(text_node)   // ← remplace X par X
        new_node = text_node

    } else {
        // ── CAS : pas en gras → entourer de  ──────────────────────
        const strong = document.createElement('strong')
        strong.textContent = this._selected_txt
        range.deleteContents()     // ← supprime le texte sélectionné du DOM
        range.insertNode(strong)   // ← insère  exactement à cette position
        new_node = strong
    }

    // Rétablir la sélection sur le nouveau nœud (pour un toggle immédiat éventuel)
    this._selection.removeAllRanges()
    const new_range = document.createRange()
    new_range.selectNodeContents(new_node)
    this._selection.addRange(new_range)
    this._selected_txt = this._selection.toString()
}