Skip to content

feat(advanced): add rich WYSIWYG features and AI SDK assistant - #1

Merged
tacxou merged 1 commit into
mainfrom
claude/jsonforms-wysiwyg-ai-sdk-3da477
Oct 5, 2026
Merged

tacxou merged 1 commit into
mainfrom
claude/jsonforms-wysiwyg-ai-sdk-3da477

Conversation

@tacxou

@tacxou tacxou commented Oct 5, 2026

Copy link
Copy Markdown
Member

Résumé

  • Enrichit le renderer WYSIWYG (options.wysiwyg: true) en conservant UEditor + Tiptap 3 : tableaux, listes de tâches, alignement, couleurs, surlignage, panneau de lien, rechercher/remplacer, mode source, aperçu, bulle de mise en forme et palette / optionnelles.
  • Ajoute un assistant d'écriture IA optionnel conçu pour un backend AI SDK fourni par l'application hôte : aucune clé ni appel fournisseur dans le navigateur, aucune dépendance ai / @ai-sdk/*.
  • Le résultat IA est streamé dans un panneau détaché ; le document n'est modifié qu'après acceptation explicite (Remplacer / Insérer / Insérer en dessous), avec Arrêter (AbortController), Réessayer et Ignorer.

Changements

Éditeur — src/advanced/wysiwyg/

  • features.ts, extensions.ts : capacités activables (options.features, false pour tout retirer) ; une extension de l'hôte du même nom l'emporte sur l'extension intégrée.
  • search.ts + WysiwygFindReplace.vue : rechercher/remplacer par décorations (rien n'est stocké dans le document).
  • WysiwygLinkPanel.vue (refuse javascript:, data:…), WysiwygSourceEditor.vue + source.ts, styles.ts.
  • handlers.ts, toolbar.ts, slash/commands.ts, colors.ts : kind intégrés (textColor, highlight, table, tableAction, findReplace, sourceMode, preview, ai), barre par défaut, bulles texte/tableau, palette /.
  • wysiwyg.vue, wysiwygOptions.ts : câblage ; l'éditabilité (désactivé / lecture seule / aperçu) est désormais synchronisée avec l'instance Tiptap.

IA — src/advanced/wysiwyg/ai/

  • types.ts : WysiwygAiOptions, WysiwygAiRequest, WysiwygAiTransport, WysiwygAiOperation…
  • httpTransport.ts, stream.ts : createWysiwygAiHttpTransport lit toUIMessageStreamResponse() (parts text-delta, error, data-*), toTextStreamResponse() et JSON (Output.object() / generateObject()).
  • context.ts : contexte borné par maxContextCharacters ; HTML/JSON du document seulement sur demande.
  • useWysiwygAi.ts : état, streaming, abort, retry, acceptation ; refuse le remplacement si le texte ciblé a changé pendant la génération.
  • operations.ts, sanitize.ts : texte inséré comme nœuds texte ; HTML optionnel filtré par liste blanche puis par le schéma.
  • tools.ts : outils d'agent au format tool() d'AI SDK, séparés entre lecture et proposition (jamais de mutation sans approbation).
  • actions.ts : DEFAULT_WYSIWYG_AI_ACTIONS, neutres vis-à-vis du fournisseur.

Documentation et playground

  • Nouvelle page FR/EN guide/wysiwyg-ai.md (options, contrat de requête, backend Nuxt/Nitro avec streamText, transport personnalisé, sécurité).
  • README, tables d'options string.md, liste d'exemples, API du playground.
  • Exemple nuxt-wysiwyg-ai avec un transport de démonstration local, sans réseau.

Dépendances

  • Ajout de @tiptap/extension-table, -text-style, -highlight, -text-align, -list (^3.29.2, verrouillées à 3.29.2 pour rester alignées sur @tiptap/core), externalisées au build comme le reste de Tiptap.

Vérification

  • yarn lint : OK.
  • yarn typecheck : OK.
  • yarn test : 51 fichiers, 611 tests OK (70 nouveaux ; transport mocké, éditeur Tiptap réel sous jsdom, aucune dépendance réseau).
  • yarn test:coverage : seuils respectés ; nouveaux modules entre 82 et 100 % en branches.
  • yarn test:scripts, yarn build (ESM, CJS, .d.ts), yarn docs:build : OK.
  • Playground vérifié au navigateur : bulle → IA → streaming → remplacement, /ai → arrêt avec résultat partiel conservé, rechercher/remplacer, tableau, mode source (<script> et onerror retirés), aperçu, propagation des données JSON Forms ; exemple nuxt-wysiwyg existant inchangé.

Ruptures

Aucune rupture de contrat : { wysiwyg: true } reste valide, l'IA reste inerte sans ai.enabled === true, la bulle et la palette / sont désactivées par défaut. Changements visibles à relire :

  • La barre d'outils par défaut s'enrichit (couleurs, tableau, recherche, source, aperçu) et passe à la ligne au lieu de déborder. L'export DEFAULT_TOOLBAR est inchangé ; les boutons liste de tâches et alignement, déjà présents mais inopérants faute d'extension, fonctionnent désormais. Retour arrière : features: false ou toolbar explicite.
  • Le bouton lien ouvre un panneau au lieu du prompt() de Nuxt UI ; features.linkEditor: false rétablit l'ancien comportement.

Points d'attention

  • @tiptap/pm est importé sans être déclaré, comme @tiptap/core et @tiptap/vue-3 déjà : il provient de @nuxt/ui.
  • Le transport n'a été testé qu'avec des réponses simulées suivant le protocole documenté ; un essai contre un vrai backend AI SDK reste à faire.
  • Pas de source changelog/X.Y.Z.md : à rédiger lors de la préparation de release (a priori 2.1.0).

Extend the UEditor-based renderer with tables, task lists, alignment,
colors, highlights, a link panel, find & replace, source mode, preview,
an opt-in text bubble and an opt-in slash palette.

Add an optional AI writing assistant built around a thin transport that
targets a host AI SDK backend (UI message stream, text stream or JSON).
Results stream into a detached panel and only reach the document after
explicit acceptance; requests are abortable. No AI SDK or provider
package is added, and AI stays inert unless ai.enabled is true.
@tacxou tacxou self-assigned this Oct 5, 2026
@tacxou tacxou added feat enhancement New feature or request labels Oct 5, 2026
@tacxou
tacxou merged commit 5dc359a into main Oct 5, 2026
2 of 3 checks passed
@tacxou
tacxou deleted the claude/jsonforms-wysiwyg-ai-sdk-3da477 branch October 5, 2026 08:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request feat

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant