Project

General

Profile

Evolution #3720

Refaire un éditeur à base de CodeMirror + ajouts

Added by RastaPopoulos ♥ about 3 years ago. Updated about 2 months ago.

Status:
Nouveau
Priority:
Normal
Assignee:
-
Target version:
Start date:
02/27/2016
Due date:
% Done:

0%

Resolution:

Description

Cahier des charges :
- Dans l'éditeur lui-même, avoir une vue plus sémantique de ce que l'on tape (WYSIWY Mean !)
- Pouvoir mettre en plein écran
- Pouvoir prévisualiser le vrai rendu HTML final (avec les images, modèles, etc)
- Pouvoir éditer côte à côte avec la prévisu
- Être pérenne et que le noyau puisse reconnaitre plusieurs syntaxes

Des gens ont fait ça pour Markdown mais malheureusement QUE pour Markdown. Mais en fait quasiment tout ce qui est important est géré en sous-main par CodeMirror !
https://simplemde.com/

Leur éditeur est en fait relativement simple :
=> c'est CodeMirror à 80%
+ ils ajoutent une CSS qui ne change pas juste la couleur pour la syntaxe, mais aussi la taille, pour les titres, gras, italique, etc
+ ils ajoutent une barre de boutons
+ ils ajoutent un système de prévisu (seul ou côte à côte)

CodeMirror est entre l'autre l'éditeur de code de Chrome et Firefox, et de milles autres choses. Il est à priori (très) pérenne, modulaire, et sait gérer plusieurs syntaxes en les déclarant dans un module JS (un "mode"). En plus de la reconnaissance de syntaxe, il gère déjà plein de plugins comme raccourcis claviers, continuer une liste quand on fait Entrée, etc.

Pour SPIP je propose cela :
- faire un mode CodeMirror qui gère uniquement les modèles SPIP, et peut-être les liens (ce qui permettrait de l'utiliser avec d'autres syntaxes que SPIP, notamment dans Markdown)
- faire un mode CodeMirror pour tous les trucs SPIP autre que modèles
- faire une CSS qui rend plus sémantique la saisie SPIP (agrandir les intertitres, etc)
- récupérer la CSS pour la saisie Markdown de SimpleMDE
- trouver une barre de boutons se basant déjà sur CodeMirror : les boutons ne feraient qu'appeler des comportements CodeMirror
- re-implémenter notre système de prévisu + de fullscreen et côte à côte dans cette nouvelle barre (= comme SimpleMDE !), sachant que nous la prévisu ça appelle un truc serveur, alors que SimpleMDE il semble que c'est tout en JS client.

Je pense que le plus gros est de faire les deux modes de syntaxes SPIP pour CodeMirror. Mais une personne a fait un projet très cool qui apparemment fonctionne déjà : une déclaration de grammaire en JSON, beaucoup mieux que la programmation JS des modes de CodeMirror :
https://github.com/foo123/codemirror-grammar
Et ça marche !

Pour le reste, on doit pouvoir s'inspirer de SimpleMDE mais en généralisant :
1) Ce serait bien d'avoir une barre de bouton pour SPIP et pour Markdown en même temps (en fait avoir deux déclarations, suivant le mode voulu)
2) Avoir notre prévisu-serveur.

Comme on le remarque, je propose deux choses qui permettent de garder Markdown sous la main :
1) séparer la déclaration des modèles (et peut-être des liens)
2) avoir deux déclarations de boutons

Cela permettra d'office, avec le même éditeur, la même base commune, de savoir gérer à la fois SPIP et Markdown. Cela me semble important à prendre en compte dès le début.

History

#1 Updated by RealET 🔸 3 months ago

Une alternative à codeMiror : https://ace.c9.io/#nav=higlighter avec une syntaxe pour déclarer une nouvelle syntaxe à colorer qui semble plus simple que celle de CodeMiror.

#2 Updated by RastaPopoulos ♥ about 2 months ago

Pour ce qui est d'un vrai éditeur WYSIWYG mais qui peut enregistrer dans le format qu'on veut, il faut passer par un format pivot (en JS à priori). Wikipédia a fait ça mais pas en générique, juste pour leur éditeur (les nuls), mais il y a des projets qui font ça en générique, comme Prosemirror par exemple :
http://prosemirror.net/

Et il y a même une proposition de standardisation d'un format pivot JSON : PortableText
https://github.com/portabletext/portabletext

Ça me parait vraiment le truc le plus prometteur à cet instant.

Also available in: Atom PDF