Introduction au Slate!

http //slatejs org est un complètement cadre personnalisable pour construire des éditeurs de texte enrichi testons à nouveau slate vous permet de créer des éditeurs riches et intuitifs comme ceux de https //medium com/ , https //www dropbox com/paper ou https //www google com/docs/about/ —qui deviennent des éléments essentiels pour les applications sur le web—sans que votre code ne soit embourbé dans la complexité il peut faire cela parce que toute sa logique est implémentée avec une série de plugins, donc vous n'êtes jamais contraint par ce qui est ou n'est pas dans "noyau" vous pouvez le considérer comme une implémentation pluggable de contenteditable construit sur https //facebook github io/react/ il a été inspiré par des bibliothèques comme https //facebook github io/draft js/ , http //prosemirror net/ et http //quilljs com/ 🤖 slate est actuellement en bêta son api principale est utilisable maintenant, mais vous pourriez avoir besoin de soumettre des corrections pour des cas d'utilisation avancés certaines de ses api ne sont pas "finalisées" et vont (changer de manière disruptive) évoluer avec le temps à mesure que nous trouvons de meilleures solutions pourquoi ? pourquoi créer slate ? eh bien (attention cette section contient quelques https //github com/ianstormtaylor opinions ! ) avant de créer slate, j'ai essayé beaucoup d'autres bibliothèques de texte enrichi disponibles— https //facebook github io/draft js/ , http //prosemirror net/ , http //quilljs com/ , etc ce que j'ai trouvé, c'est que bien qu'il soit assez facile de faire fonctionner des exemples simples, une fois que vous essayez de construire quelque chose comme https //medium com/ , https //www dropbox com/paper ou https //www google com/docs/about/ , vous rencontriez des problèmes plus profonds le "schéma" de l'éditeur était codé en dur et difficile à personnaliser des choses comme le gras et l'italique étaient supportées dès le départ, mais qu'en est il des commentaires, des intégrations, ou même des besoins plus spécifiques au domaine ? transformer les documents de manière programmatique était très compliqué écrire en tant qu'utilisateur pouvait fonctionner, mais apporter des modifications programmatiques, ce qui est essentiel pour construire des comportements avancés, était inutilement complexe la sérialisation en html, markdown, etc semblait être une réflexion après coup des choses simples comme transformer un document en html ou markdown nécessitaient d'écrire beaucoup de code standard, pour ce qui semblait être des cas d'utilisation très courants réinventer la couche de vue semblait inefficace et limitant la plupart des éditeurs ont créé leurs propres vues, au lieu d'utiliser des technologies existantes comme react, donc vous deviez apprendre un tout nouveau système avec de nouvelles "pièges" l'édition collaborative n'était pas conçue à l'avance souvent, la représentation interne des données de l'éditeur rendait impossible son utilisation pour un cas d'utilisation d'édition collaborative en temps réel sans réécrire fondamentalement l'éditeur les dépôts étaient monolithiques, pas petits et réutilisables les bases de code de nombreux éditeurs n'exposaient souvent pas les outils internes qui auraient pu être réutilisés par les développeurs, ce qui a conduit à devoir réinventer la roue construire des documents complexes et imbriqués était impossible de nombreux éditeurs étaient conçus autour de documents "plats" simplistes, rendant des choses comme les tableaux, les intégrations et les légendes difficiles à comprendre et parfois impossibles bien sûr, tous les éditeurs n'exhibent pas tous ces problèmes, mais si vous avez essayé d'utiliser un autre éditeur, vous avez peut être rencontré des problèmes similaires pour contourner les limitations de leurs api et atteindre l'expérience utilisateur que vous recherchez, vous devez recourir à des solutions très bricolées et certaines expériences sont tout simplement impossibles à réaliser si cela vous semble familier, vous pourriez aimer slate ce qui m'amène à la façon dont slate résout tout cela principes slate essaie de résoudre la question de " docid\ vduodw2fqhwtb0wwie zs " avec quelques principes plugins de première classe la partie la plus importante de slate est que les plugins sont des entités de première classe cela signifie que vous pouvez complètement personnaliser l'expérience d'édition, pour construire des éditeurs complexes comme ceux de medium ou de dropbox, sans avoir à lutter contre les hypothèses de la bibliothèque noyau sans schéma la logique de base de slate suppose très peu de choses sur le schéma des données que vous allez éditer, ce qui signifie qu'il n'y a pas d'hypothèses intégrées dans la bibliothèque qui pourraient vous poser problème lorsque vous devez aller au delà des cas d'utilisation les plus basiques modèle de document imbriqué le modèle de document utilisé pour slate est un arbre imbriqué et récursif, tout comme le dom lui même cela signifie que la création de composants complexes comme des tableaux ou des citations en bloc imbriquées est possible pour des cas d'utilisation avancés mais il est également facile de rester simple en n'utilisant qu'un seul niveau de hiérarchie parallèle au dom le modèle de données de slate est basé sur le dom—le document est un arbre imbriqué, il utilise des sélections et des plages, et il expose tous les gestionnaires d'événements standard cela signifie que des comportements avancés comme des tableaux ou des citations en bloc imbriquées sont possibles à peu près tout ce que vous pouvez faire dans le dom, vous pouvez le faire dans slate commandes intuitives les documents slate sont édités à l'aide de "commandes", qui sont conçues pour être de haut niveau et extrêmement intuitives à écrire et à lire, afin que la fonctionnalité personnalisée soit aussi expressive que possible cela augmente considérablement votre capacité à raisonner sur votre code modèle de données prêt pour la collaboration le modèle de données utilisé par slate—en particulier la façon dont les opérations sont appliquées au document— a été conçu pour permettre l'édition collaborative d'être superposée, donc vous n'aurez pas besoin de repenser tout si vous décidez de rendre votre éditeur collaboratif limites "noyau" claires avec une architecture axée sur les plugins, et un noyau sans schéma, il devient beaucoup plus clair où se situe la frontière entre "noyau" et "personnalisé", ce qui signifie que l'expérience de base ne se retrouve pas embourbée dans des cas particuliers démonstration découvrez la http //slatejs org de tous les exemples ! exemples pour avoir une idée de la façon dont vous pourriez utiliser slate, consultez quelques exemples https //www slatejs org/examples/plaintext — montrant le cas le plus basique un glorifié \<textarea> https //www slatejs org/examples/richtext — montrant les fonctionnalités que vous attendez d'un éditeur de base https //www slatejs org/examples/markdown preview — montrant comment ajouter des gestionnaires de touches pour des raccourcis similaires à markdown https //www slatejs org/examples/links — montrant comment envelopper du texte dans des nœuds en ligne avec des données associées https //www slatejs org/examples/images — montrant comment utiliser des nœuds vides (sans texte) pour ajouter des images https //www slatejs org/examples/hovering toolbar — montrant comment un menu contextuel flottant peut être implémenté https //www slatejs org/examples/tables — montrant comment imbriquer des blocs pour rendre des composants plus avancés https //www slatejs org/examples/paste html — montrant comment utiliser un sérialiseur html pour gérer le html collé https //www slatejs org/examples/mentions — montrant comment utiliser des nœuds vides en ligne pour des @ mentions simples chaque exemple inclut un voir le code source lien vers le code qui l'implémente et nous avons https //github com/ianstormtaylor/slate/tree/master/site/examples aussi si vous avez une idée pour un exemple qui montre un cas d'utilisation courant, faites en une demande de tirage ! documentation si vous utilisez slate pour la première fois, consultez les http //docs slatejs org/walkthroughs/01 installing slate tutoriels et les http //docs slatejs org/concepts pour vous familiariser avec l'architecture et les modèles mentaux de slate http //docs slatejs org/walkthroughs http //docs slatejs org/concepts http //docs slatejs org/general/faq http //docs slatejs org/general/resources si même cela n'est pas suffisant, vous pouvez toujours https //github com/ianstormtaylor/slate/tree/master/packages , qui est fortement commenté il existe également des traductions de la documentation dans d'autres langues https //doodlewind github io/slate doc cn/ si vous maintenez une traduction, n'hésitez pas à faire une demande de tirage ici ! contribuer ! toutes les contributions sont les bienvenues ! consultez les docid\ svldkeopiiipfzpfa0hja pour plus d'infos ! slate est https //github com/ianstormtaylor/slate/tree/f6bfe034d707693488c38da77537fd36cb8856cf/license md