OK
AJAX error!

Les forumsGrammalecteGrammalecte + easy MDE (contenteditable)

Grammalecte + easy MDE (contenteditable)

Bonjour,

j'espère être dans le bon forum pour vous présenter mon problème.

Pour le développement de zestedesavoir.com… nous utilisons un éditeur open-source WYSIWYM nommé easymde, lui-même issu de simple-mde.

Notre site étant un site de contenu, il est important pour nous que les différents correcteurs orthographiques soient fonctionnels.

Or, alors que le correcteur intégré à firefox corrige correctement les erreurs dans nos pages, ce n'est pas le cas de grammalecte.

Nous aimerions donc savoir ce que nous devons faire :

- ouvrir un bug de votre côté
- tenter d'aller plus loin dans les modifications que nous avons déjà apporté à easy-mde pour que le correcteur intégré fonctionne.

Afin de vous aiguiller, vous pouvez reproduire les étapes suivantes sur notre site de béta-test : beta.zestedesavoir.com…

- dans un champ texte écrire "une faute de grammaire se trouvent ici", valider
- puis éditer le poste
- lancer l'analyse grammalecte
- depuis l'interface de grammalecte changer trouvent => trouve
- cliquer sur le champ
- appuyer sur une touche
- => le texte redevient "une faute de grammaire se trouvent ici"


J'ai firefox 73.0 (64 bits) sur ubuntu 19.10, l'extension grammalecte en version Version 1.7.0 et easy-mde synchronisé avec master du projet github.com…
le 26 février 2020 à 19:20
Bonjour,

Je n’ai pas réussi à reproduire le bug dont vous parlez.

Quant au patch que vous m’avez signalé sur Twitter, ça ne me pose pas de problème de l’intégrer, mais avant ça, j’ai quand même une question : Est-il bien nécessaire de passer en paramètre de l’événement tout le texte corrigé, alors que ce texte sera de toute façon disponible dans le champ de texte en question ?
(Si je peux éviter d’occuper la mémoire de tous les utilisateurs juste pour vous, je préfère éviter, certains écrivent écrivent parfois de belles tartines.)
le 01 mars 2020 à 15:17
Bonjour, (je me suis créé un compte, ça sera plus adapté. Et ça me donne la possibilité d'activer la notification par email c'est mieux!)

Voici un gif mettant en scène le problème : i.imgur.com…

Je ne m'inquiète jamais de la gestion de la mémoire des moteurs js (des navigateurs chrome/firefox). Les moteurs js s'en sortent très bien pour ce qui est des variables, et moins bien pour la gestion du DOM (createTextNode) qui est consommateur de ressource. Un texte très long ne dépasse que rarement 1 ou 2Mo de RAM.

Si c'est vraiment nécessaire je ferais sans le texte. Un event distinct et unique à la fin de chaque correction me suffirait et je m'adapterais en fonction (je voulais éviter de trop utiliser le DOM, justement pour cet aspect mémoire et j'avais peur que notre éditeur réagisse à l'event "DOMNodeInserted").

Voici un simple test pour tester les performance de dispatchEvent. Ce code génére 500'000 caractères :

[code]
const event = new CustomEvent("grammalecteNodeContentUpdated", {
detail: {
text: Array(100001).join('éelkf')
}
});
});
this.xNode.dispatchEvent(event);
[/code]


-----------

Ensuite j'ai deux questions :

- Peut-on ouvrir grammalecte à partir de notre propre bouton via un attribut spécifique ?

- Peut-on désactiver l'ajout automatique du bouton que l'extension ajoute via un attribut ? (par exemple grammalecte="false")


Par exemple, votre concurrent Antidote permet de lier un bouton HTML à un textarea avec un attribut spécifique qu'on ajoute aux deux éléments : `data-antidoteapi_jsconnect_groupe_id="01"` et quand on clique sur ce bouton, le correcteur d'antidote s'ouvre avec le texte du textarea en question.
le 08 mars 2020 à 11:43
J’ai intégré votre patch (avec quelques corrections d’ordre cosmétique).
code.grammalecte.net…
Si je pose la question de renvoyer le texte avec l’événement, ce n’est pas tant pour un souci de mémoire (je fais aussi généralement confiance au garbage collector, même si je veille toujours à ne pas créer de fonction qui gonfle l’usage de la mémoire sans nécessité) que pour être sûr que je n’ajoute pas une fonction consommatrice de mémoire sans raison utile.
Si vous me dites que c’est nécessaire et que c’est mieux que récupérer le texte dans la zone de texte pour une quelconque raison, ça me va. Je préfère simplement vérifier que c’est nécessaire.

Peut-on désactiver l'ajout automatique du bouton que l'extension ajoute via un attribut ? (par exemple grammalecte="false")


Pas pour l’instant, mais c’est une chose que je peux ajouter aisément.

Peut-on ouvrir grammalecte à partir de notre propre bouton via un attribut spécifique ?


C’est une bonne idée, il faut que je cogite un peu sur le meilleur moyen de faire ça.

Je suis à 99% sûr que le bug qui ramène le texte à son ancienne valeur dans votre zone de texte ne vient pas de Grammalecte.
Grammalecte ne réécrit dans cette zone qu’à deux moments : lorsque vous modifiez le texte dans la zone d’édition de Grammalecte et lorsqu’une nouvelle analyse du texte est faite. Et c’est tout. Dès que vous fermez la fenêtre de Grammalecte, aucun événement ne peut venir modifier votre zone de texte de la part de Grammalecte.
le 08 mars 2020 à 19:41
Bonjour, dans ton gif on voit que easy MDE est complètement perturbé par l'intervention de Grammalecte :
- après la correction, le curseur ne se place pas au bon endroit
- après la correction, la taille/police du texte à changé
- au moment ou tu rajoute le deuxième "e" à "disparaitre" tout se remet comme avant.

En fait, ça donne l'impression que le "vrai" texte édité est stocké dans une variable puis recollé dans la page à chaque modification.
le 09 mars 2020 à 07:28
Ce n'est pas un problème de type bug mais plutôt de compatibilité. C'est pour cela qu'on souhaite une API pour faire notre propre middleware garantissant la comptabilité entre les deux.

Ce n'est pas directement lié à Grammalecte, c'est surtout le fait qu'il n'a pas été conçu pour être compatible avec le fonctionnement de codemirror (la base de notre éditeur).

Pour la petit histoire, nous utilisons un nouvel éditeur enrichi qui se base sur le module npm Easymde basé sur l'affichage proposé par Codemirror.

Codemirror (en mode contenteditable) va stocker les saisies claviers/modifications dans une variable, ce que Grammalecte modifie c'est simplement un rendu/aperçu qui n'est pas sauvegardé comme vous l'avez remarqué.

(Dans notre code si on veut modifier le contenu on est obligé de passer par une fonction de codemirror : EasyMde.codemirror.setValue()).
le 09 mars 2020 à 13:28
J’ai ajouté la possibilité de court-circuiter l’interaction usuelle de Grammalecte avec une zone de texte.

Si vous ajoutez à une zone de texte :

data-grammalecte_callbutton="identifiant_du_bouton_d_appel"


et un bouton avec l’identifiant passé en paramètre, Grammalecte n’affichera plus la perle animée et se lancera via ce bouton customisé.
Par ailleurs, dans ce cas-là, Grammalecte n’écrira rien dans la zone de texte, mais se contentera d’envoyer un évènement “GrammalecteNodeContentUpdated” sur le Node. Charge à la page de savoir quoi faire avec le résultat.
le 09 mars 2020 à 20:05
Réflexion faite, peut-être vaut-il mieux que le lancement par un bouton customisé et le renvoi du résultat dans un évènement utilisent deux paramètres différents. Par exemple :

grammalecte_callbutton
grammalecte_result_via_event

le 09 mars 2020 à 20:20
Deux questions :
- La détection des boutons avec `data-grammalecte_callbutton` se fait à quel moment ?
- Puis-je relancer la détection des boutons (imaginons que j'ajoute dynamiquement le bouton à la page) ?

Ensuite dans mon exemple d'antidote, Antidote va rajouter un attribut `data-antidoteapi_jsconnect_initlistener="true"` pour dire que ce bouton a déjà été détecté.

Et antidote permet de relancer une détection via une fonction, parce que dans mon cas le bouton n'est pas présent dans le code HTML mais ajouté plus tard en javascript : github.com…

Après dans leur fonctionnement je ne sais pas pourquoi ils n'ont pas fait des fonctions à la place des attributs, est-ce pour une limitation/sécurité ? (pourtant avec `window.postMessage(edit_arg, "*")`, il me semble qu'on peut l'activer pour tout).

grammalecte_activate_button()
grammalecte_deactivate_button()
grammalecte_disable_default_button()
le 09 mars 2020 à 21:35
C'est vraiment appréciable de voir que vous êtes très réactif pour améliorer votre outil (j'avais peur que ma proposition concernant la mise en place d'une API soit refusée ou qu'on me dise que ce n'est pas urgent ou que ça soit considérée comme "hors périmètre"). Je vous en suis très reconnaissant et je vous remercie. Si vous avez besoin d'aide ou d'un avis, n'hésitez pas.
le 09 mars 2020 à 22:02
Finalement, j’ai ajouté le paramètre “grammalecte_result_via_event” qui me semble plus pertinent.

Grammalecte analyse la page, liste les textareas et les zones de texte, et crée les boutons lors de leur détection.
Quant aux boutons customisés, Grammalecte vérifie la présence de l’attribut “grammalecte_callbutton” mais vérifie aussi que le bouton mentionné existe (s’il n’existe pas, c’est annulé).
Grammalecte essaie aussi de suivre la modification des pages, mais ce code n’est pas complet, je vais voir comment améliorer ça.

Je ne peux pas parler pour Antidote, mais ne page web ne peut pas utiliser le code injecté par une extension comme ça. Probablement, une question de sécurité. IllusionPerdu avait commencé à travailler sur la question, je vais regarder son code.
le 10 mars 2020 à 09:24
Antidote fait (de mémoire) : window.postMessage
le 10 mars 2020 à 11:07
Au début il rajoute un fichier js à la page HTML, se fichier js se trouve dans l'extension.

Je ne c/c pas leur code mais dans l'idée leur code ressemble à :



// Dans l'extension
if (document.getElementById('GrammalecteAPIextension') == null) {
const head = document.getElementsByTagName('head')[0]
const script = document.createElement('script')

script.setAttribute('id', 'GrammalecteAPIextension')
script.setAttribute('data-version', 'x.x.x')
script.src = (chrome || browser).extension.getURL(path_du_fichier_js_dans_lextension)

head.appendChild(script)

window.addEventListener('message', function(ev) {
if (event.data.message == 'grammalecte_activate_button') {
activate()
} else if (event.data.message == 'grammalecte_deactivate_button') {
deactivate()
} else if (event.data.message == 'grammalecte_disable_default_button') {
disable()
}
}, false)

}

// Dans path_du_fichier_js_dans_lextension :
function grammalecte_activate_button() {
window.postMessage({message: "grammalecte_activate_button"}, "*")
}

function grammalecte_deactivate_button() {
window.postMessage({message: "grammalecte_deactivate_button"}, "*")
}

function grammalecte_disable_default_button() {
window.postMessage({message: "grammalecte_disable_default_button"}, "*")
}
le 10 mars 2020 à 18:11
J’ai regardé ce qu’a fait IllusionPerdu, et même si je ne vais pas récupérer le code tel quel, je vais m’en inspirer, car je pense que la méthode générale est la bonne, et je vais cacher ça derrière un objet qui va servir d’API globale. Je ne récupère pas le code tel quel parce que tout est un peu mélangé avec une implémentation pensée pour TinyMCE, dont j’ignore même si ça fonctionne. Je voudrais d’abord un système plus générique, avant de penser à le spécialiser pour un éditeur ou un autre.

Donc, ça va donner quelque chose comme :
script de la page <–> Objet API (injecté dans la page et appelable par la page) <–> content-script (injecté dans la page, mais non appelable par la page) <–> background-script de l’extension <–> worker du correcteur grammatical.

Pour l’objet API, je ne vais pas utiliser postMessage, mais des CustomEvent. Cela dit, à votre niveau, ce ne sera pas votre problème.

A priori, pour vous, ça va ressembler à :

oGrammalecteAPI.parseNode(identifiant_du_node)
oGrammalecteAPI.parseText(texte_à_analyser)


À moins que je ne change d’avis demain. :)
le 10 mars 2020 à 20:21

Pour l’objet API, je ne vais pas utiliser postMessage, mais des CustomEvent. Cela dit, à votre niveau, ce ne sera pas votre problème.
À moins que je ne change d’avis demain. :)



En effet, ce qui m'intéresse c'est de pouvoir rendre fonctionnel Grammalecte, et si je peux intégrer ça comme antidote ça m'arrange ! :) C'est-à-dire avec un bouton personnalisé : i.imgur.com…


A priori, pour vous, ça va ressembler à : [...]


Et pourquoi pas :

oGrammalecteAPI.parse()

oGrammalecteAPI.parse = function (arg1) {
if (arg1 instanceof HTMLElement) {
parseNode(arg1)
} else {
parseText(arg1)
}
}
le 10 mars 2020 à 21:05
Oui, on peut peut-être faire comme vous dites, s’il est possible de passer un node du DOM en paramètre d’un CustomEvent. Sinon, si je suis obligé de passer l’identifiant du node, il peut y avoir ambiguïté sur l’action à faire. Il faudra que je fasse des tests.

(J’avais présumé qu’on ne pouvait pas passer un node en paramètre, mais je n’en sais rien.)
le 10 mars 2020 à 21:51
je ne sais pas si c'est possible, je ne penses pas non plus.

Il va falloir récupérer la valeur avant ou proposer seulement parseText.

if (arg1 instanceof HTMLElement) {
parseNode(('value' in car) ? arg1.value : arg1.textContent)
}
le 10 mars 2020 à 22:08
Je pensais avoir fini aujourd’hui. Ça semblait tourner. Puis je découvre que le node reçoit bien les events, mais que la page réceptrice n’a visiblement pas l’autorisation de lire ce qu’elle reçoit… WTF?
Au début, je pensais que c’était une limitation des iframes (puisque je testais avec ça) mais c’est apparemment une limitation pour toute la page.
Va falloir trouver un moyen de contourner ça…
le 12 mars 2020 à 22:49
La solution est finalement simple. Dans un sens, on peut envoyer des objets et même des nodes du DOM, mais dans l’autre sens, non, impossible. Mais on peut envoyer des chaînes de caractères. Il suffit d’utiliser JSON.stringify(). De votre côté, vous serez obligé de parser les résultats renvoyés.
le 12 mars 2020 à 23:21
Bonjour,

Je viens seulement de voir ce topic. Mon code pour tinyMce était fonctionnel dans pas mal de cas, j'avais quelques problèmes vu que tinyMce a plusieurs méthodes de chargement et contrairement au cas présent ici ça essayait d'injecter un bouton sans que le webmaster l'avait prévu ;)

Si dans le message #14 c'est le chemin que j'avais appliqué pour communiquer avec l’extension (oui ça fait longtemps que j'avais écrit le code et me souviens plus trop) le code le plus important a bien été repéré et le reste ne devrait pas être trop compliqué ;)

Il me semble que lors d'une étape on est obligé de sérialiser et désérialiser (JSON.parse, JSON.stringify) les messages (je les avais ajoutés dans ce commit http://212.47.254.152:8080/info/175e6bd8bff414a3 ) et sans ça, ça ne fonctionnait pas, donc sans doute le problème que tu as est lié à ça. (J’avais passé pas mal de temps à trouver la solution.)

Bon courage !
le 12 mars 2020 à 23:46
L’idée d’utiliser JSON.stringify() m’est venue rapidement parce ce n’est pas si rare de devoir faire ce genre de pirouettes (surtout avec Thunderbird).
Néanmoins, merci beaucoup pour ton code “expérimental”. Il m’a été très utile pour concevoir cette API.

Le boulot nécessaire pour A312 est a priori fini pour l’instant, mais avant de publier une nouvelle version je voudrais ajouter une autre possibilité à cette API, si ça ne demande pas trop de temps.
le 13 mars 2020 à 00:19
Je trouve ça super que les webmaster pourront prévoir des fonctionnalités pour interagir avec l'extension, ça ouvre beaucoup de portes :)

Content que mon code a pu servir ;)
le 13 mars 2020 à 00:31
Merci 👍🏻
le 15 mars 2020 à 08:30
Une question. Attendu que vous pouvez recevoir trois types de réponses différents en fonction de ce que vous demandez à l’API, préférez-vous recevoir un seul type d’événement quelle que soit votre demande ou un type d’événement différent pour chaque type de demande.

Autrement dit, vous voulez seulement recevoir un événement nommé “GrammalecteResult” ou trois événements nommés “GrammalecteTextResult”, “GrammalecteParseResult”, “GrammalecteSpellingResult” ?
le 16 mars 2020 à 08:21
Heu... ce serait quoi concrètement la différence entre les trois évènements ?
le 17 mars 2020 à 19:45
“GrammalecteTextResult” : texte modifié.
“GrammalecteParseResult” : liste d’erreurs grammaticales et orthographiques.
“GrammalecteSpellingResult” : liste de suggestions pour un mot mal orthographié.
le 17 mars 2020 à 19:49
Vu comment il est simple de faire un dispatcher si c'est nécessaire pour une utilisation spécifique, je pense qu'un seul événement suffit.
Après c'est surtout A312 qui peut répondre vu qu'a l'origine c'est un de ses besoins ;)
le 17 mars 2020 à 21:49
Voilà la doc : code.grammalecte.net…
Merci de tester.
le 18 mars 2020 à 14:26
J'ai pas trop le temps de tester en se moment mais j'ai quelques remarques en lisant la documentation :

Pour

data-grammalecte_button="false"

j'aurrais plutot mis

data-grammalecte="false"


Pour

data-grammalecte_result_via_event="true"

=>

data-grammalecte_event="true"



Pour Obtenir les erreurs

if (event.detail.sType && event.detail.sType == "errors")

je pense que ça serait mieux de remplacer "errors" par result (ou reponse") car la le "errors" fait plus pensé a une erreur dans l'event et non a la liste des "fautes"

dans Get spelling suggestions je ne comprends pas (avec la doc) se que fait le paramètre

error_identifier

le 18 mars 2020 à 19:02
Pour “errors”, oui, tu as raison, c’est sans doute trop susceptible de confusion. Mais “result” ou “response”, c’est tout aussi vague.

Le paramètre “error_identifier” ne fait rien, mais il permet de donner un identifiant à une demande et de le retrouver lorsqu’on reçoit la réponse. Par exemple, dans le texte d’un node, tu as potentiellement plusieurs erreurs orthographiques, et tu peux savoir avec ça à quel sous-node la réponse se rapporte si tu l’indiques en paramètre.

Quant aux noms donnés aux paramètres à mettre sur les zones de texte, non, je préfère les noms explicites.
Par exemple, grammalecte="false" pourrait faire croire que Grammalecte ne peut pas être lancé autrement, avec le menu contextuel ou un raccourci clavier. Or, il n’en est rien.
le 18 mars 2020 à 19:29
Le type “errors” devient “proofreading”.
le 18 mars 2020 à 20:26
J’ai mis à jour la doc ce matin.
Le paramètre “error_identifier” devient “request_identifier”, ce qui est peut-être plus clair.
le 19 mars 2020 à 09:50
Un seul event `GrammalecteResult` me semble plus simple pour tout le monde ? Au moins c'est facile à debug avec un console.log, sans avoir à ajouter 3 listeners. Où je peux télécharger cette version : code.grammalecte.net… de l'extension ?
le 19 mars 2020 à 23:55
Voilà l’extension pour Firefox : [[ lien supprimé]]
le 20 mars 2020 à 08:59
Je tente son implémentation ce soir/cet après midi ou demain sur l'instance de dev de mon projet pour vous faire un retour convenable.
le 20 mars 2020 à 11:56
`oGrammalecteAPI.openPanelForText("your text")` renvoie un event ?

EDIT : Je suis bloqué, je ne sais pas comment avoir le retour pour le traiter.

EDIT 2 : Vous injectez le connecteur à chaque page, ne devriez vous pas detecter un attr `grammelecte_connect=true` dans le ltag HTML de la page ?

Par exemple :

```
<html class="enable-mobile-menu js" grammelecte_connect="true" lang="fr">
```

EDIT 3 :

Hmmm... Comment puis-je savoir si Grammalecte est chargé avec un script qui se charge durant le chargement de la page ? C'est-à-dire avant Grammalecte, puis avoir un event `window.addEventListener("GrammalecteLoad"` ou tout autre alternative ?
le 21 mars 2020 à 14:31
L'exemple de la doc devrait être :

`
contenteditable.addEventListener('GrammalecteResult', function(event) {
const detail = (typeof event.detail === 'string') && JSON.parse(event.detail)

if (detail.sType === 'text') {
easyMDE.codemirror.setValue(detail.sText)
}
})
`

au lieu de : `if (event.detail.sType && event.detail.sType == "text") {`

Car event detail est une chaine de caractère et non un objet
le 21 mars 2020 à 15:09

`oGrammalecteAPI.openPanelForText("your text")` renvoie un event ?


Non. Cette fonction est équivalente à celle qui permet d’analyser une sélection, donc en théorie pas de retour nécessaire, puisqu’il ne s’agit pas d’analyser un node à modifier.
Mais je pourrais ajouter un paramètre node sur lequel renvoyer le résultat, si vous jugez ça utile.

const detail = (typeof event.detail === 'string') && JSON.parse(event.detail)


Ah oui, en effet. J’ai corrigé la doc.

ne devriez vous pas detecter un attr `grammelecte_connect=true` dans le ltag HTML de la page ?


Grammalecte injecte déjà sept scripts bien plus gros dans chaque page, je ne suis pas sûr que ce soit bien utile…

Comment puis-je savoir si Grammalecte est chargé avec un script qui se charge durant le chargement de la page ?


Quelque chose comme “document.dispatchEvent(new Event('GrammalecteLoaded'))”, par exemple ?
C’est fait.
le 21 mars 2020 à 16:06
Je vous envoie une nouvelle préversion dès que j’ai fini.
le 21 mars 2020 à 16:32

Admin :

`oGrammalecteAPI.openPanelForText("your text")` renvoie un event ?


Non. Cette fonction est équivalente à celle qui permet d’analyser une sélection, donc en théorie pas de retour nécessaire, puisqu’il ne s’agit pas d’analyser un node à modifier.
Mais je pourrais ajouter un paramètre node sur lequel renvoyer le résultat, si vous jugez ça utile.



A quoi ça sert alors ? Je ne suis pas sûr de comprendre si on a aucun retour/modification qui se réalise. C'est juste du READONLY? Je préférerai utiliser openPanelForText que openPanelForNode (notamment pour un éditeur enrichi).

ne devriez vous pas detecter un attr `grammelecte_connect=true` dans le ltag HTML de la page ?


Grammalecte injecte déjà sept scripts bien plus gros dans chaque page, je ne suis pas sûr que ce soit bien utile… <p> <p>



Je ne savais pas, je pensais que tout était dans l'extension sans modification de la page.

Comment puis-je savoir si Grammalecte est chargé avec un script qui se charge durant le chargement de la page ?


Quelque chose comme “document.dispatchEvent(new Event('GrammalecteLoaded'))”, par exemple ?
C’est fait.



Oui ça évite de faire un SetInterval ^^'
le 21 mars 2020 à 19:58

A quoi ça sert alors ? Je ne suis pas sûr de comprendre si on a aucun retour/modification qui se réalise. C'est juste du READONLY? Je préférerai utiliser openPanelForText que openPanelForNode (notamment pour un éditeur enrichi).


Oui, c’était un mode ReadOnly, parce que Grammalecte peut aussi analyser une page web entière ou juste une sélection de texte quelconque sur lesquelles on ne peut pas faire de réécriture.
J’ai ajouté une option à openPanelForText() pour inclure un node sur lequel les events seront renvoyés.
J’ai fini, mais je n’ai pas le temps de tester ce soir. J’enverrai la nouvelle préversion demain.

Je ne savais pas, je pensais que tout était dans l'extension sans modification de la page.


Le panneau, et tout ce qui est UI ou presque, se construit dans la page, à l’intérieur de celle-ci.
Le background-script ne sert qu’à passer les plats entre l’UI dans la page et le Worker où tourne le correcteur grammatical.
le 21 mars 2020 à 20:37
Nouvelle préversion : grammalecte.net…
La doc a été mise à jour.
le 22 mars 2020 à 09:49
Je viens de faire une intégration stable de Grammalecte dans notre nouvelle éditeur (Easymde) grâce à cette dernière version :

user-images.githubusercontent.com… (image gif)

Pour informations, voici les lignes de code qui correspondent à cette intégration :

EDIT : Les lignes ont bougés :(

github.com…
github.com…



( Pour votre curiosité, si vous souhaitez voir le résultat de vous même, j'ai demandé que ce changement soit accessible aujourd'hui via l'instance de Bêta de notre site : beta.zestedesavoir.com… )
le 22 mars 2020 à 11:17
Merci. Quand vous aurez suffisamment testé, je publierai une nouvelle version dans un délai pas trop long.
le 22 mars 2020 à 11:52
Woa merci à vous tous. C'est énorme comme travail ce que vous avez fait.
le 22 mars 2020 à 14:58
J’ai publié la nouvelle version de Grammalecte.
Pour Chrome,il faut patienter. Apparemment, il y a de nouvelles règles de contrôle et ça peut demander plusieurs jours, dixit leur site.
le 27 mars 2020 à 20:29
Parfait merci ! :D
le 02 avril 2020 à 12:54
Sous Firefox (version 1.8.1) ça fonctionne, sous chrome (version 1.8.1 du 29 mars 2020) j'ai une erreur interne : imgur.com…

L'erreur vient de : `oGrammalecteAPI.openPanelForText`

Exemple avec `oGrammalecteAPI.openPanelForText($("#text").val(), $("#text")[0])`

(Où `$("#text").val()` retourne du texte)


Erreur : i.imgur.com…
le 02 avril 2020 à 13:22
OK, je regarde.
le 02 avril 2020 à 14:11
C’est corrigé. C’est juste encore une question de “stringifier” le contenu de certains événements. Pas de changement de l’API.
Je vais mettre à jour la version pour Chrome seulement.
le 02 avril 2020 à 15:28
Voilà une nouvelle version : grammalecte.net…
Si elle convient, je la téléverserai sur le site des extensions.
le 02 avril 2020 à 18:32
Je n'ai pas vu que vous attendiez une réponse :')

Je viens d'essayer, ça ne fonctionne pas aucune erreur (j'ai la roue d'active alors qu'elle ne devrait pas être présente, mon bouton ne fait rien, alors qu’apparemment mon script détecte la présence de grammalecte) et ça fonctionne très bien avec Firefox.


EDIT : Après un deuxième essai, la roue a disparu mais le bouton ne fait rien.
le 07 avril 2020 à 08:31
J'ai mis un `console.log` dans la fonction `openPanelForText`, avant : `document.dispatchEvent(xEvent);`. J'ai : .


CustomEvent {isTrusted: false, detail: "{"sCommand":"openPanelForText","sText":"..........…...........^-\\->... ede d ed eded","sNodeId":""}", type: "GrammalecteCall", target: null, currentTarget: null, …}
{
isTrusted: false
detail: "{"sCommand":"openPanelForText","sText":"............................^-\\->... ede d ed eded","sNodeId":""}"
type: "GrammalecteCall"
target: document
currentTarget: null
eventPhase: 0
bubbles: false
cancelable: false



J'ai essayé sur cette page : beta.zestedesavoir.com…
le 07 avril 2020 à 08:40
J’ai bien fait de vous demander confirmation avant de publier… Je n’avais pas vu de problèmes quand j’avais testé.
Je vais chercher.
le 07 avril 2020 à 08:59
Sur Firefox, on a un problème quand on ajoute du texte à la fin d'un paragraphe (quand on en a plusieurs) via l'interface de Grammalecte, j'ai l'impression que seulement le paragraphe en question est envoyé : cdn.discordapp.com…

(Un peu tardive cette remonté de bug, je ne me suis pas aperçu quand j'ai testé) :(
le 07 avril 2020 à 09:16
Je ne peux pas tester sur votre site, attendu que le mail de confirmation à l’inscription ne vient tout simplement pas.

Le seul problème que je constate, c’est que si vous omettez de donner un node ou un identifiant en second paramètre, comme vous le faites ici, le panneau ne s’ouvre pas (mais c’est corrigé, le panneau s’ouvrira désormais même si vous ne mentionnez pas de node).

Mais si vous donnez un second paramètre, ça devrait fonctionner. C’est de toute façon nécessaire si vous voulez recevoir les résultats quelque part. Grammalecte ne peut pas deviner où vous voulez recevoir les événements.

J’ai fait une màj : grammalecte.net…
le 07 avril 2020 à 09:49
Quant au second problème, je ne pense pas que ça puisse venir de Grammalecte pour les mêmes raisons exposées plus haut. Ça survient après la fermeture de Grammalecte. Je ne vois aucun élément susceptible de créer une telle modification de votre côté.
le 07 avril 2020 à 10:03
Quel est votre pseudo ? Artragis va activer votre compte à manuellement, notre serveur de beta n'a pas le sendmail de configurer.


Mon bouton à bien deux arguments :

oGrammalecteAPI.openPanelForText(easyMDE.codemirror.getValue(), easyMDE.codemirror.display.lineDiv)`




lineDiv est le contenteditable qui reçoit l'event :

contenteditable.addEventListener('GrammalecteResult', function(event) {
const detail = (typeof event.detail === 'string') && JSON.parse(event.detail)

if (detail && detail.sType === 'text') {
easyMDE.codemirror.setValue(detail.sText)
}
})




Ca marche très bien quand j'ai un seul paragraphe.

(Je vais retester pour chrome, je vous fais un retour au plus vite)
le 07 avril 2020 à 10:09
Pourtant, dans le CustomEvent cité plus haut, sNodeId est une chaîne vide… lineDiv est-il un node ou un identifiant de node ? si c’est un node, votre node a-t-il un identifiant ?
Ajout : Quoique, non, a priori le panneau se souvient du node avec lequel il est ouvert, donc a priori même s’il n’y a pas d’identifiant, ça passe.
le 07 avril 2020 à 10:15
Mon identifiant sur votre beta est “olr”.
le 07 avril 2020 à 10:15
Bon, je viens de faire des tests sur votre bêta.
Sur le textarea de base (éditeur historique), je n’ai pas vu de problème.

En revanche, sur le nouvel éditeur, je ne vois pas comment ça pourrait marcher tel quel.
1. quand je clique sur l’icône Grammalecte de votre éditeur, la panneau indique “Aucun champ textuel défini” , ce qui signifie qu’il ne sait pas sur quel node renvoyer les résultats, donc il est normal que les modifications ne soient envoyées nulle part.
2. Chaque ligne de l’éditeur est un node “contenteditable”, Grammalecte y fait apparaître la perle tournante dès qu’on passe d’une ligne à l’autre, vu que les nodes ne contiennent pas la commande data-grammalecte_button="false".
Je vais voir s’il y a moyen de contourner ça sur Chrome. Ça fonctionne normalement sur Firefox.

Edit: Ah non, sur Firefox aussi, ça fait ça.

Mais je ne reproduis pas le bug dont vous avez fait un gif.
le 07 avril 2020 à 10:54
easyMDE.codemirror.display.lineDiv === `<div class="CodeMirror-code" role="presentation" autocorrect="off" autocapitalize="off" spellcheck="true" contenteditable="true" tabindex="0" data-grammalecte_button="false" data-grammalecte_result_via_event="true">`

J'ai été un peu fainéant sur ce coup là, je vous donne des exemples avec le code de zeste de savoir (qui est assez long, je voulais faire un jsfiddle mais Grammalecte ne fonctionne pas dans une iframe).

Voila une page de HTML (demo complète) de ce que je fais sur zeste de savoir :

gist.github.com… (cliquer sur le bouton "Raw" pour télécharger la page)

----------

Votre compte est activé sur la Bêta du site.

-------------

Avec la demo (code donnée ci-dessus) :
- Sur chrome je ne recois pas l'event : i.imgur.com…
- Sur firefox, c'est ok : i.imgur.com…

---------

Pour le bug que je vous ai communiqué, apparemment c'est à la fermeture de la fenêtre de Grammalecte qui provoque la disparition du texte : i.imgur.com…
le 07 avril 2020 à 10:56
Je n'avais pas vu votre dernier message.

En revanche, sur le nouvel éditeur, je ne vois pas comment ça pourrait marcher tel quel.



Sur Firefox ça fonctionne bien pourtant (avez-vous essayez CTRL + F5) ?

1. quand je clique sur l’icône Grammalecte de votre éditeur, la panneau indique “Aucun champ textuel défini” , ce qui signifie qu’il ne sait pas sur quel node renvoyer les résultats, donc il est normal que les modifications ne soient envoyées nulle part.



Etrange je n'ai jamais eu ce comportement

Edit: Ah non, sur Firefox aussi, ça fait ça.



Ah ? Je n'ai pas de soucis (à part le bug avec plusieurs paragraphes) beta.zestedesavoir.com…


EDIT : Si je dois modifier mon code parce que Chrome ne gère pas de la même façon les events, je le ferais (j'ai suivi au mieux la documentation que vous m'aviez donné).
le 07 avril 2020 à 11:13
Bonjour,

N'ayant pas testé mais juste regardé le code du gist, j'ai remarqué que vous vérifiez pas que l'API était bien chargée :

document.addEventListener("GrammalecteLoaded", function (event) {
...
});


Je me demande donc si certain problème ne vienne pas de là. Il faudrait aussi peut-être s'assurer que le doc est bien chargé ;)

$(window).on('load', function () {
...
});

le 07 avril 2020 à 12:31

IllusionPerdu :
Bonjour,

N'ayant pas tester mais juste regarder le code du gist, j'ai remarqué que vous vérifier pas que l'API était bien chargé :

document.addEventListener("GrammalecteLoaded", function (event) {
...
});


Je me demande donc si certain problème ne vienne pas de là. Il faudrait aussi peut être s'assurer que le doc est bien charger ;)

$(window).on('load', function () {
...
});



Je l'ai enlevé pour simplifier le code (le problème ne vient pas de là) :
- Je clique sur le bouton quand le chargement de la page est fini (ce qui laisse largement le temps à Grammalecte de se charger) ;
- J'aurais eu un 'oGrammalecte is undefined' si c'était le cas
le 07 avril 2020 à 12:43
Désolé pour le délai de réponse, je suis parti faire des courses en urgence. C’était programmé et j’avais oublié.

Mais j’ai trouvé le problème juste avant mon départ. :)
Le node que vous passez doit impérativement avoir un identifiant. Sur Firefox, on peut passer les nodes sur les événements. Sur Chrome, on ne peut pas. Seul l’identifiant est transmissible. Comme vous n’avez pas d’identifiant, Grammalecte ne sait pas où envoyer les évents ou les modifications et ne le fait pas. C’est pour cette raison que le panneau indique “Aucun champ textuel défini”.

Je vais mettre à jour la doc. Et afficher un avertissement dans la console le cas échéant.
le 07 avril 2020 à 13:08
Pour l’autre problème, celui de la disparition du texte, je suis incapable de le reproduire.
Chez moi tout va bien.
le 07 avril 2020 à 13:22
@Admin je pense que l’extension doit pouvoir ajouter un identifiant ((semi-)aléatoire) sans que ça pose de problème ;)
Genre avec quelque chose de ce type :


if (vNode instanceof HTMLElement ) {
if (!vNode.id){
vNode.id = "Gramma-" + Date.now().toString(36) + "-" + (Math.floor(Math.random() * (1000000))).toString(36);
}
sNodeId = vNode.id;
}
else if (typeof(vNode) === "string" && document.getElementById(vNode)) {
sNodeId = vNode;
}
else {
console.log("[Grammalecte API] No node identifier. No event, no result will be sent.")
}

le 07 avril 2020 à 13:48
@Admin Pourtant on a été deux à le reproduire sur Firefox :/

La proposition d'@IllusionPerdu est elle envisageable ?
le 07 avril 2020 à 15:15
Ni sur Firefox, ni sur Chrome je n’observe de disparition de texte. Jamais.
framapic.org…

Comme je vous l’ai déjà dit, Grammalecte ne renvoie de modification vers les zones de texte que lorsque vous modifiez le texte, et à aucun autre moment.
Une fois la fenêtre fermée, ça me semble plus que douteux. Je ne doute pas que vous ayez ce problème, mais je pense qu’il vient d’ailleurs. Par ailleurs, Grammalecte ne stocke même pas votre texte initial, ni d’historique des corrections. Comment pourrait-il rétablir le texte original une fois le panneau clos ?

La proposition d'@IllusionPerdu est elle envisageable ?


C’est bien sûr possible, mais pourquoi ne donnez-vous pas vous-même un identifiant à votre zone ? Ça me paraît quand même moins risqué. Je n’aime pas trop l’idée d’imposer un identifiant à un élément d’une page web. Si je peux éviter d’interférer, je préfère.
le 07 avril 2020 à 15:27
> Comment pourrait-il rétablir le texte original une fois le panneau clos ?

A mon avis, il renvoit un contenu incomplet en event (ce qu'on voit dans mon gif), on voit qu'il ne reçoit qu'un seul paragraphe au lieu des deux présents.

----

> C’est bien sûr possible, mais pourquoi ne donnez-vous pas vous-même un identifiant à votre zone ? Ça me paraît quand même moins risqué. Je n’aime pas trop l’idée d’imposer un identifiant à un élément d’une page web. Si je peux éviter d’interférer, je préfère.

Ce qui m'embête c'est pour les mêmes raisons que vous, c'est de mettre un id sur un élément venant d'une bibliothèque (ici codemirror, je ne sais pas comment il va le supporter ou si ça peut rentrer en confusion. :/)

Autres possibilités : Vous ne pouvez pas me garder en mémoire dans la fonction de votre connecteur et envoyer la position (l'index) de l'objet dans l'array ? Puis ensuite vous refaites la conversion ? (je ne sais pas si je suis claire et si c'est possible) C'est peut être trop complexe pour si peu, je vais générer mon propre id aléatoire sinon.
le 07 avril 2020 à 15:41
A312 je pense qu'il pourrait être bien de faire une page html minimal avec votre éditeur afin que se soit plus facile a trouver le problème.
le 07 avril 2020 à 16:04
Ça arrivait aussi la petite page web qu’il m’a envoyée : grammalecte.net…
le 07 avril 2020 à 16:10
Je prépare une nouvelle version avec des console.log() où il faut.
le 07 avril 2020 à 16:16

IllusionPerdu :
A312 je pense qu'il pourrait être bien de faire une page html minimal avec votre éditeur afin que se soit plus facile a trouver le problème.



message 63

----------

Sur 4 essais, le bug est apparu 3 fois, je ne suis pas sûr de la marche à suivre pour reproduire le bug, peut être qu'il faut cliquer la page après avoir fermé grammalecte.

i.imgur.com…
le 07 avril 2020 à 17:03
Je viens de faire des tests. Pas de perte de texte. Mais il est vrai qu’il y a quelque chose d’anormal. En théorie, si un événement est envoyé sur le node, le contenu ne devrait pas être modifié. C’est l’un ou l’autre, mais pas les deux. Or, ici, on a les deux, un événement envoyé et le contenu du node modifié. Ce n’est pas normal.

Edit : Ah oui, c’est la page web qui fait ça. Je cherchais inutilement dans mon code où ça merdait… :(
le 07 avril 2020 à 17:19
Màj pour Firefox : [[ lien supprimé ]]
Màj pour Chrome : [[ lien supprimé ]]

Il y a des console.log() quand ça modifie le contenu des nodes, quand ça envoie des events, et ça génère un id pour les nodes sans id.

Du coup, ça fonctionne avec la bêta.

Toujours pas de disparition de texte de mon côté. J’ai le cerveau qui fume avec cette histoire. :)
le 07 avril 2020 à 17:34

Toujours pas de disparition de texte de mon côté. J’ai le cerveau qui fume avec cette histoire. :)



Pourtant dans mon gif on voit bien que l'event diffère du contenu de grammalecte, vous n'arrivez pas à le reproduire ? :/
le 07 avril 2020 à 19:10
Non. Accessoirement, j’aimerais savoir comment vous faites vos enregistrements en gif. Ma méthode est sûrement moins au point que la vôtre. Qu’utilisez-vous ?
le 07 avril 2020 à 19:47
Petit retour après un test rapide avec la page grammalecte.net…

Quand on Click sur l'icone réanalyser dans le panel ça envoie l'event ce qui je pense n'est pas normal car il ne doit que relire le texte.

Lorsque nous modifions dans le panel la dernière saisie produit deux fois l'event. La deuxième fois il y a une petite latence il y a le même contenu du texte sauf si on ferme le panel avant cet event répétitif se produise dans ce cas une partie du texte est supprimé ;)

C'est donc surement à cause de la fonction "recheckParagraph" qui enclenche un "this.oTextControl.write();" qu'elle ne devrait pas !

Voilà en espérant que ça peut aider ;)
le 07 avril 2020 à 19:51
Oui, ça semble être une piste intéressante, même si ça n’explique pas pourquoi je ne reproduis pas le problème.
Effectivement, la réécriture n’est pas toujours nécessaire, et la réanalyse du paragraphe devrait être distincte de la réécriture dans certains cas.
le 07 avril 2020 à 20:18
Ça y est, j’ai reproduit le problème. Si j’écris super vite partout et que je ferme la fenêtre à l’arrache, il se passe n’importe quoi.
le 07 avril 2020 à 20:22
Le bug est a priori corrigé. Nouvelles versions :
Firefox : grammalecte.net…
Chrome : grammalecte.net…
le 08 avril 2020 à 12:25
Par curiosité, quel est la puissance de votre machine, quelle est la puissance de votre processeur ?
le 08 avril 2020 à 12:32

Admin :
Non. Accessoirement, j’aimerais savoir comment vous faites vos enregistrements en gif. Ma méthode est sûrement moins au point que la vôtre. Qu’utilisez-vous ?



ScreenToGif 2.22.1

Admin :
Par curiosité, quel est la puissance de votre machine, quelle est la puissance de votre processeur ?



Intel Core i7-3370 @ 3.40Ghz
le 08 avril 2020 à 13:56
OK, merci.
le 08 avril 2020 à 14:17
De mon côté ça semble fonctionner, j'attends plus de retour (des autres utilisateurs de zestedesavoir) pour vous le confirmer.


En tout cas merci pour tout ! C'est vraiment une magnifique API que vous nous fournissez ! :)
le 08 avril 2020 à 14:26
De mon côté, j’ai un bug que vous n’avez pas rapporté : dans votre interface bêta, le bouton apparaît pour chaque ligne de la zone de texte, parce que votre zone éditable est divisée en une multitude de zones éditables (arborescence profonde et assez complexe).
J’hésite sur la manière d’y remédier.
le 08 avril 2020 à 14:33
Je n'ai pas ce problème :

beta.zestedesavoir.com…

(D'ailleurs je viens de voir que le bouton (la petite roue) apparaît au clique mais disparaît après)
le 08 avril 2020 à 14:42
La bug est corrigé. Je vais encore tester cette version pendant deux ou trois jours, puis, si tout va bien, je publierai une mise à jour.
le 08 avril 2020 à 15:53

Admin :
La bug est corrigé. Je vais encore tester cette version pendant deux ou trois jours, puis, si tout va bien, je publierai une mise à jour.



Vous voulez dire, celui-ci :

(D'ailleurs je viens de voir que le bouton (la petite roue) apparaît au clique mais disparaît après)

?

Car j'avais trouvé un fix : beta.zestedesavoir.com… Où il s’agissait simplement de comparer l'élément contenteditable d'origin au lieu de se contenter du content editable actuel (les éléments enfants d'un contenteditable hérite de son attribut editable).

(En plus ça corrige le comportement normal du bouton quand il est actif, il ne se déplace pas de haut en bas dans un contenteditable)

----------

Avec mon fix : beta.zestedesavoir.com…
Sans mon fix : beta.zestedesavoir.com…
le 08 avril 2020 à 16:47
Oui, c’était ce bug. Pour l’instant, j’ai juste fait une correction à l’arrache, car je suis embêté avec sur la manière de deviner s’il faut afficher le bouton ou non, en dehors de votre cas qui est facilement soluble comme vous l’avez fait.
Mais il y aussi toutes les autres possibilités et je me demande ce que je veux brider finalement.
le 08 avril 2020 à 18:46
Je pense que mon fix fonctionne pour tout les éditeurs à base de contenteditable, ils ajoutent souvent des sous éléments HTMLElement, il faut donc viser l'élément parent pour la correction.
le 08 avril 2020 à 22:18
J’ai commité hier soir juste avant votre message : code.grammalecte.net…
le 09 avril 2020 à 08:20

Notification par e-mail    1