Voici comment la saisie semi-automatique basée sur l'IA est implémentée dans Novel, un éditeur de texte open source

DEV - 03/12
Dans cet article, nous analysons comment Novel implémente la saisie semi-automatique basée sur l'IA dans sa belle...

Dans cet article, nous analysons comment Novel implémente la saisie semi-automatique basée sur l'IA dans son magnifique éditeur.

Novel est un éditeur WYSIWYG open source de style Notion avec saisie semi-automatique alimentée par l'IA. Ceci est construit sur TipTap. Tiptap est le framework d'édition sans tête et open source. Intégrez plus de 100 extensions et fonctionnalités payantes telles que la collaboration et les agents IA pour créer l'UX que vous souhaitez.

Puisque nous souhaitons en savoir plus sur la saisie semi-automatique basée sur l'IA, vous devez d'abord savoir où vous voyez « Ask AI ». Ouvrez Novel et sélectionnez du texte à l'aide de votre souris dans l'éditeur rendu par défaut. Il peut s'agir de n'importe quel texte. Vous verrez ce widget contextuel comme indiqué ci-dessous :

Il est temps que nous trouvions le code responsable de ce widget. Comment faire ça ? Le référentiel Novel est un monorepo. il a un dossier d'espace de travail nomméla toiledans les applications.

Puisqu'il s'agit d'un projet basé sur Next.js et qu'il utilise un routeur d'application, dans le page.tsx, un composant nomméTailwindAdvancedÉditeur

exporter la fonction par défaut Page() { return (
// Voici le composant Editeur
); }
Entrer en mode plein écran Quitter le mode plein écran

Ce composant nommé TailwindAdvancedEditor est importé depuis composants/tailwind/advanced-edito...
[Courte citation de 8% de l'article original]