canvas-editor : ce que le dépôt permet réellement de vérifier

Un éditeur de documents qui rend sur canvas

Canvas Editor est un éditeur de documents WYSIWYG qui construit sa propre couche de rendu au-dessus de l'API canvas HTML au lieu de s'appuyer sur le mécanisme contenteditable du navigateur. Le projet se décrit comme riche en fonctionnalités et conçu pour des applications centrées sur les documents telles que les dossiers médicaux électroniques, les contrats juridiques et les rapports. Parce que l'éditeur contrôle lui-même le pipeline de dessin, il promet une typographie cohérente entre les navigateurs, une pagination précise et une expérience d'exportation uniforme. La page d'accueil du dépôt et la documentation sont hébergées sur hufe.club, et le projet a une démo en direct liée depuis le README.

Pourquoi canvas plutôt que contenteditable

Le README comprend un tableau de comparaison qui positionne Canvas Editor par rapport aux éditeurs basés sur contenteditable. Il revendique un rendu pixel parfait et identique entre navigateurs contre un rendu qui varie selon le navigateur ; une pagination native de type document contre une pagination manuelle ou non prise en charge ; une fidélité d'impression qui correspond à la sortie écran contre une sortie qui diverge souvent ; un contrôle complet de la typographie contre un contrôle limité par le navigateur ; et des fonctions documentaires intégrées comme la table des matières, les en-têtes et pieds de page et les filigranes contre des fonctions nécessitant une logique personnalisée lourde. Ces affirmations sont celles du projet et n'ont pas été vérifiées indépendamment par cet article.

Ce que l'éditeur peut faire

La liste des fonctionnalités est large. Les opérations de texte enrichi incluent annuler/rétablir, changements de police et de taille, gras, italique, souligné, barré, exposant, alignement, titres et listes. Les éléments insérables incluent tableaux, images, hyperliens, blocs de code, sauts de page, formules mathématiques LaTeX, sélecteurs de date et éléments de bloc. Les contrôles de formulaire couvrent les entrées sélection, texte, date, radio et case à cocher. L'éditeur fournit une pagination native avec en-têtes, pieds de page et numéros de page ; des marges de page, filigranes et arrière-plans configurables ; la génération de catalogue, commentaires et annotations de groupe. Il prend en charge l'impression et l'exportation PDF via le rendu canvas-à-image ou PDF, des menus contextuels personnalisés, des raccourcis clavier personnalisables, le glisser-déposer pour le texte et les éléments, un système de plugins et des Web Workers pour le comptage de mots, la génération de catalogue et la récupération asynchrone de valeurs.

Installation et création d'une instance d'éditeur

L'installation se fait via le package npm @hufe921/canvas-editor. Le README montre les commandes npm install, pnpm add et yarn add. Un éditeur minimal peut être créé en important la classe Editor par défaut et en passant un élément conteneur ainsi qu'une structure de document. L'exemple de démarrage rapide utilise une div avec la classe canvas-editor, puis crée un nouvel Editor avec un tableau main contenant un objet avec une propriété value. L'exemple rend le texte 'Hello, Canvas Editor!'. Le README dirige les lecteurs vers la documentation officielle pour l'API complète, donc cet article ne tente pas de reproduire cette surface API.

Écosystème et branches expérimentales

Le dépôt liste une collection officielle de plugins appelée canvas-editor-plugin. Il liste également des branches de fonctionnalités en développement actif : feature/svg pour une couche de rendu SVG, feature/pdf pour l'exportation PDF, feature/ai pour une démo de traitement de texte basée sur l'IA, et feature/CRDT pour la collaboration basée sur CRDT décrite comme expérimentale. Le README renvoie vers GitHub Discussions pour les conversations communautaires, et vers Zread et DeepWiki pour les questions-réponses assistées par IA. Le projet a également une page de sponsors et un badge invitant aux pull requests. Ces liens externes et ces branches sont listés selon l'état actuel du README, et cet article n'a pas vérifié leur statut.

Développement, structure du projet et contribution

Le développement nécessite Node.js version 24.13.1 ou supérieure et recommande pnpm comme gestionnaire de packages. L'installation utilise pnpm install et npm run dev. Les scripts de build séparent un build de démo (npm run build) d'un build de bibliothèque publiable (npm run lib). Les contrôles de qualité incluent lint, vérification de types, tests unitaires avec Vitest et tests de bout en bout avec Cypress. La documentation est construite avec VitePress. La structure du projet place le cœur de l'éditeur sous src/editor/core, avec des répertoires pour le dessin, les commandes, les événements, les observateurs, les workers et les plugins. Les contributeurs sont invités à forker le dépôt, à créer une branche de fonctionnalité et à suivre Conventional Commits ; les hooks de pré-commit exécutent lint et type:check. Le projet est sous licence MIT, qui accorde la permission d'utiliser, copier, modifier, fusionner, publier, distribuer, sous-licencier et vendre des copies, et fournit le logiciel sans garantie. La licence ne dit rien sur le support ou les garanties de sécurité.

Vérifier canvas-editor avant décision

`pnpm install`, `npm run type:check`, `npm run test:unit` et un document contenant tableau, image et saut de page permettent de contrôler Canvas Editor. Ce contrôle est lié aux fichiers, commandes et sorties propres à canvas-editor; il ne remplace pas la lecture des limites documentées.

Conclusion éditoriale

Ce projet s’adresse aux équipes dont le besoin correspond aux fonctions décrites pour canvas-editor. Il convient moins à un usage qui dépend d’une garantie absente du README. Avant de décider, exécutez ce contrôle : `pnpm install`, `npm run type:check`, `npm run test:unit` et un document contenant tableau, image et saut de page permettent de contrôler Canvas Editor.

Sources officielles

1. Official documentation
2. Official README
3. Project repository