ObsiGate/docs/features/editeur-inline.md

#93 — Édition inline : « Editer » et « Forge » remplacent la vue lecture

Statut : 🟢 livré (en attente de vérification utilisateur) Version : 2.3.0 Composants : frontend/js/editor-inline.js (nouveau), frontend/js/utils.js, frontend/js/viewer.js, frontend/js/sync.js, frontend/js/bookslm.js, frontend/editor-poc.html, frontend/index.html, frontend/style.css, backend/bookslm.py Tests : tests/frontend/editor-inline.test.mjs (19), tests/test_bookslm.py::TestGeneralPrompt (7)

Contexte

Le mode édition (bouton Editer, CodeMirror) et Forge (éditeur avancé dans une iframe) s'ouvraient dans #editor-modal : un overlay position: fixed plein écran. Le document restait rendu dessous, mais invisible, et l'overlay recouvrait le panneau de l'assistant IA (.bookslm-panel, z-index: 100 contre 1000 pour la modale). Conséquences :

• le document n'était plus consultable pendant l'édition (pas de relecture côte à côte) ;
• l'assistant IA était inutilisable pendant l'édition : son action « Ajouter » (qui insère dans state.editorView) exigeait une session d'édition ouverte… que l'utilisateur ne pouvait pas regarder en même temps que l'assistant.

Conception

1. Bascule du conteneur d'édition dans la zone de lecture

frontend/js/editor-inline.js (module autonome, sans dépendance) déplace le conteneur #editor-container — qui contient le CodeMirror ou l'iframe Forge — de l'overlay vers la zone de contenu :

#content-area (ou .pane-content de la pane active)   ← le document en lecture
  └── .editor-container.editor-inline                ← l'éditeur, à la place du document

Fonction	Rôle
getEditorContainer() / getEditorModal()	résolution par id (#editor-container, #editor-modal)
getInlineHostArea()	zone de lecture visée : override de rendu, pane active en vue fractionnée, sinon #content-area
isInlineEditorActive()	une session occupe-t-elle une zone de contenu ?
mountEditorInline(area)	area.replaceChildren(container) + classes editor-inline / editor-inline-host / editor-inline-mode
unmountEditorInline()	conteneur rendu à la modale, zone vidée, renvoie la zone à re-rendre

Aucun identifiant DOM n'est modifié (#editor-body, #editor-save, #editor-title-input…) : CodeMirror, l'auto-sauvegarde (2 s), la collaboration Yjs, la barre IA, l'aperçu Mermaid et l'iframe Forge continuent de fonctionner sans réécriture. Seul l'hôte change.

L'overlay reste monté et garde la classe active (signal d'état utilisé par l'auto-save, le raccourci Ctrl+J, la hauteur d'éditeur mobile…), mais passe en classe editor-inline-mode : transparent, sans fond ni padding, pointer-events: none (le ruban d'édition mobile .me-ribbon, ancré à la modale, conserve pointer-events: auto).

2. Cycle de vie

Action	Effet
Editer / Forge	activateInlineEditor(vault, path) → bascule inline si la cible est le document affiché dans la zone de contenu
✓ (Sauvegarder)	sauvegarde puis closeEditor() → retour à la lecture (contenu relu depuis le disque)
✕ (Annuler) / Échap	closeEditor() → retour à la lecture (les modifications non sauvegardées sont abandonnées, comme avant)
Ouverture d'un autre fichier (renderFile())	garde-fou : detachInlineEditor() libère la session (destroy CodeMirror/Yjs, retrait de l'iframe Forge) avant le rendu de la lecture
Activation d'un onglet (TabManager.activate, PaneTabManager.activate)	même garde-fou avant le placeholder de chargement : ces fonctions vident la zone de contenu, ce qui détruirait le DOM de l'éditeur
Événement SSE index_updated sur le fichier affiché	reloadExternalWrite() recharge le tampon de l'éditeur depuis le disque au lieu de re-rendre la vue lecture (sans quoi la modification externe détruisait la session)
forge-close (message de l'iframe)	route vers closeEditor() — plus de manipulation manuelle de la modale dans sync.js

Repli overlay : si la cible n'est pas le document affiché (fichier venant d'être créé via la palette, par exemple), la modale plein écran est conservée. Le mode inline exige que la zone de lecture soit celle du fichier édité — c'est ce qui garantit que « remplacer » signifie bien remplacer ce document.

L'invalidation du cache d'onglet (_invalidateActiveTabCache) évite qu'un aller-retour d'onglets réaffiche le HTML d'avant l'édition.

3. Assistant IA — document mis à jour sous les yeux de l'utilisateur

L'éditeur n'occupe plus le panneau de l'assistant : les deux surfaces cohabitent. Trois ajouts rendent la mise à jour effective de bout en bout :

1. app_context.editing — bookslm.js::_editingDocument() envoie {vault, path, surface: "editor"|"forge"} quand une session d'édition est ouverte ; backend/bookslm.py::_format_app_context() l'annonce dans le prompt Général (« Document en cours d'édition dans … ») et indique au modèle d'utiliser les outils d'écriture pour le mettre à jour.
2. obsigate:file-written — à chaque événement SSE tool réussi d'un outil d'écriture (edit_file, append_to_file, create_file, restore_backup), bookslm.js diffuse un événement {vault, path}.
3. Rechargement — utils.js::reloadExternalWrite() :
   • fichier ouvert dans l'éditeur inline → le tampon CodeMirror est remplacé par le contenu du disque (l'auto-sauvegarde de ce remplacement est neutralisée, sinon elle réécrivait l'ancien texte par-dessus la modification de l'IA) ;
   • fichier ouvert dans Forge → message parent-reload à l'iframe (editor-poc.html), qui relit le fichier et abandonne son tampon périmé ;
   • fichier simplement affiché en lecture → re-rendu depuis le disque.

Sans ce point 3, une édition par l'IA aurait été silencieusement écrasée par l'auto-sauvegarde de l'éditeur deux secondes plus tard.

4. Feuille de style

frontend/style.css : .content-area.editor-inline-host devient une colonne flex sans padding, et .editor-container.editor-inline la remplit (flex: 1, height: auto — pour battre le height: 100vh de la media query mobile par spécificité, max-width/max-height: none, sans bordure ni ombre). L'en-tête d'édition (titre, nom de fichier, pastille d'état, ✓/✕/🗑) sert donc de barre d'outils du document, et le corps occupe la zone de lecture.

Limites connues

• Les outils de renommage / déplacement de l'IA (rename_file, move_path) ne déclenchent pas de rechargement : après un renommage, le document redevient accessible via l'arborescence.
• La collaboration Yjs reste liée à l'ouverture de l'éditeur : un changement d'onglet pendant une session collaborative la termine (comportement identique à celui de la fermeture).
• Le mode inline suppose un document affiché correspondant à la cible ; les flux « création de fichier » passent donc toujours par la modale.

Vérification

node tests/frontend/editor-inline.test.mjs      # 19 tests (DOM + câblage)
node tests/frontend/validate-imports.mjs
node tests/frontend/unit.test.mjs
.venv/Scripts/python.exe -m pytest tests/test_bookslm.py -k GeneralPrompt

Contrôle manuel sur l'instance de test (http://localhost:2020, admin / test123) : ouvrir un document markdown → Editer (le document est remplacé par l'éditeur, bandeau/onglets toujours visibles, panneau assistant cliquable) → Forge depuis la lecture (iframe plein cadre) → ✓ / ✕ / Échap → retour en lecture avec le contenu à jour.