Bug si le contenu dépasse la largeur du textarea #3

Open
opened 1 year ago by MathieuAlphamosa · 22 comments
Collaborator

Si il n'y a pas d'espace/tiret pour scinder une ligne de contenu alors PRISM perd les pédales

Pour test :

LIGNEPASOKsqdqsdqsdqsdqsdjhqskjdgjqsgdjhqsgdjhqsghjdgqshjdgqshjdgjhsqgdhsqgjhdgqsjhgdjhqsgdjhqsgdjhgqsjhdgqjhsdgjhsqdgjhghj


LIGNEOKsqdqsdqsdqsdqsdjhqskjdgjqsgdjhqsgdjhqsghjdgqshjdgqshjdgjhsq-gdhsqgjhdgqsjhgdjhqsgdjhqsgdjhgqsjhdgqjhsdgjhsqdgjhghj


<img_carrousel|images=4,7,1,2|navigation=points|format=ligne_images|largeur=800|hauteur=400|clic=image|legende=titre>

A noter : le scroll horizontal qui apparaît également, c'ets peut être une piste pour régler le souci.

Si il n'y a pas d'espace/tiret pour scinder une ligne de contenu alors PRISM perd les pédales Pour test : ``` LIGNEPASOKsqdqsdqsdqsdqsdjhqskjdgjqsgdjhqsgdjhqsghjdgqshjdgqshjdgjhsqgdhsqgjhdgqsjhgdjhqsgdjhqsgdjhgqsjhdgqjhsdgjhsqdgjhghj LIGNEOKsqdqsdqsdqsdqsdjhqskjdgjqsgdjhqsgdjhqsghjdgqshjdgqshjdgjhsq-gdhsqgjhdgqsjhgdjhqsgdjhqsgdjhgqsjhdgqjhsdgjhsqdgjhghj <img_carrousel|images=4,7,1,2|navigation=points|format=ligne_images|largeur=800|hauteur=400|clic=image|legende=titre> ``` A noter : le scroll horizontal qui apparaît également, c'ets peut être une piste pour régler le souci.
Collaborator

Résolu par le simple 9cb8501c6c a priori.

Je te laisse clôturer si cela marche bien :)

Résolu par le simple https://git.spip.net/spip-contrib-extensions/prism/commit/9cb8501c6c636cc99d2cb3a90b1b891bf4dd8451 a priori. Je te laisse clôturer si cela marche bien :)
Collaborator

Je ne pense pas que ça soit une bonne idée

image

  1. ça coupe sur le milieu de tous les mots
  2. il faut aussi le mettre (si conservé) sur le textarea
Je ne pense pas que ça soit une bonne idée ![image](/attachments/5b885454-c540-4282-b0a2-9d593fc9f99e) 1) ça coupe sur le milieu de tous les mots 2) il faut aussi le mettre (si conservé) sur le textarea
155 KiB
Collaborator

Par contre, cela semble bien corriger

.prism-live code.language-md,
.prism-live code.language-markdown,
.prism-live code.language-spip_typo, 
pre.prism-live, 
textarea.prism-live {
    white-space: pre-wrap !important;
+    overflow-wrap: break-word;
}

Pour références : https://css-tricks.com/where-lines-break-is-complicated-heres-all-the-related-css-and-html/

Par contre, cela semble bien corriger ```diff .prism-live code.language-md, .prism-live code.language-markdown, .prism-live code.language-spip_typo, pre.prism-live, textarea.prism-live { white-space: pre-wrap !important; + overflow-wrap: break-word; } ``` Pour références : https://css-tricks.com/where-lines-break-is-complicated-heres-all-the-related-css-and-html/
Collaborator

image

![image](/attachments/b1b943f5-f253-4c9c-85f1-65b55110362b)
135 KiB
Collaborator

Ah merde, en effet, j'en ai oublié de tester sur du texte courant ! :-/ Solution fioreuse du coup, à ne pas conserver... merci @marcimat :)

Après, est-ce vraiment un bug ? Comment peut-on se retrouver avec des lignes entières sans espace tiret ?

Pour le cas des modèles, il suffit de les saisir sur plusieurs lignes, ça permet de gagner en lisibilité qui plus est ^^ :-p

<img_carrousel
|images=4,7,1,2
|navigation=points
|format=ligne_images
|largeur=800
|hauteur=400
|clic=image
|legende=titre>
Ah merde, en effet, j'en ai oublié de tester sur du texte courant ! :-/ Solution fioreuse du coup, à ne pas conserver... merci @marcimat :) Après, est-ce vraiment un bug ? Comment peut-on se retrouver avec des lignes entières sans espace tiret ? Pour le cas des modèles, il suffit de les saisir sur plusieurs lignes, ça permet de gagner en lisibilité qui plus est ^^ :-p ``` <img_carrousel |images=4,7,1,2 |navigation=points |format=ligne_images |largeur=800 |hauteur=400 |clic=image |legende=titre> ```
Collaborator

Si si, il faut l’implémenter : c’est très facile d’avoir ça simplement avec une URL.

Si si, il faut l’implémenter : c’est très facile d’avoir ça simplement avec une URL.
Collaborator

J'ai donc commité ta proposition @marcimat qui après quelques tests semble parfaitement fonctionner, en tout cas mieux que la mienne...

J'ai donc commité ta proposition @marcimat qui après quelques tests semble parfaitement fonctionner, en tout cas mieux que la mienne...
Poster
Collaborator

Alors on a toujours le souci sur :

  • des URLs longues https://monbeaunomdedomainearallonge.com/chemin/chemin/chemin/chemin/chemin/chemin/chemin/oups
  • des modèles chelous <img_carrousel|images=4,7,1|navigation=vignettes|hauteur=500|clic=image|legende=titre>
    Voir captures d'écrans.

J'arrive à corriger avec la règle suivante :

.prism-live .token.tag,
.prism-live .token.url {
    line-break: anywhere;
}

Mais aucune idée si on devrait l'appliquer à d'autres éléments ou si c'ets le bon endroit pour le faire.

Alors on a toujours le souci sur : - des URLs longues `https://monbeaunomdedomainearallonge.com/chemin/chemin/chemin/chemin/chemin/chemin/chemin/oups` - des modèles chelous `<img_carrousel|images=4,7,1|navigation=vignettes|hauteur=500|clic=image|legende=titre>` Voir captures d'écrans. J'arrive à corriger avec la règle suivante : ``` .prism-live .token.tag, .prism-live .token.url { line-break: anywhere; } ``` Mais aucune idée si on devrait l'appliquer à d'autres éléments ou si c'ets le bon endroit pour le faire.
Collaborator

Étrange, je ne reproduis pas, ni sous FirefoxESR (v. 78.15.0), ni sous Firefox (v. 88.0.1), ni sous Vivaldi (v. 4.3.2439.56), sous une Debian Testing à jour...

Par contre, sous Chromium sous Debian ou sous Chrome ou Edge sous Windows, en effet, ça coince...

Re-EDIT : En fait... non, je ne reproduis finalement sur aucun de ces navigateurs sous Windows ou Debian... La faute à une drôle de blague du cache... J'ai complètement désinstallé le plugin, refait un git clone, purgé le cache et là, magie, tout fonctionne !

Étrange, je ne reproduis pas, ni sous FirefoxESR (v. 78.15.0), ni sous Firefox (v. 88.0.1), ni sous Vivaldi (v. 4.3.2439.56), sous une Debian Testing à jour... Par contre, sous Chromium sous Debian ou sous Chrome ou Edge sous Windows, en effet, ça coince... Re-EDIT : En fait... non, je ne reproduis finalement sur aucun de ces navigateurs sous Windows ou Debian... La faute à une drôle de blague du cache... J'ai complètement désinstallé le plugin, refait un git clone, purgé le cache et là, magie, tout fonctionne !
Collaborator

@MathieuAlphamosa, bonjour :-) le problème persiste-t-il ? Si non, on pourra clôturer et proposer un nouveau tag pour répondre à https://discuter.spip.net/t/coloration-code-et-coloration-live/19863/88

Merci pour ton retour !

@MathieuAlphamosa, bonjour :-) le problème persiste-t-il ? Si non, on pourra clôturer et proposer un nouveau tag pour répondre à https://discuter.spip.net/t/coloration-code-et-coloration-live/19863/88 Merci pour ton retour !
Poster
Collaborator

@bricebou Salut ! Alors oui, j'ai retéléchargé la dernière version depuis le git, fait des tests et j'ai toujours le même problème que plus haut (Safari) #3

Avec la correction que j'avais indiqué ça fonctionne, mais je t'avoue qu'il va falloir la tester. Perso je l'ai mise dans prism-live.spip.css ligne 39, sans trop savoir si c'ets la bonne façon de procéder vis à vis de ton plugin.

Edit : attention, je viens de me rendre compte que ma modif CSS pose d'autres problème ssur Chrome cette fois-ci ! J'essaye de trouver la bonne façon de faire...

@bricebou Salut ! Alors oui, j'ai retéléchargé la dernière version depuis le git, fait des tests et j'ai toujours le même problème que plus haut (Safari) https://git.spip.net/spip-contrib-extensions/prism/issues/3#issuecomment-29337 Avec la correction que j'avais indiqué ça fonctionne, mais je t'avoue qu'il va falloir la tester. Perso je l'ai mise dans prism-live.spip.css ligne 39, sans trop savoir si c'ets la bonne façon de procéder vis à vis de ton plugin. Edit : attention, je viens de me rendre compte que ma modif CSS pose d'autres problème ssur Chrome cette fois-ci ! J'essaye de trouver la bonne façon de faire...
Poster
Collaborator

Ca y est, je pense avoir trouvé la bonen façon de procéder, avec le code suivant tout fonctionne sur Safari/Chrome/Firefox.

.prism-live .token.tag,
.prism-live .token.url {
    overflow-wrap: break-word;
}

Je te laisse vérifier de ton côté.

Ca y est, je pense avoir trouvé la bonen façon de procéder, avec le code suivant tout fonctionne sur Safari/Chrome/Firefox. ``` .prism-live .token.tag, .prism-live .token.url { overflow-wrap: break-word; } ``` Je te laisse vérifier de ton côté.
Collaborator

Ne reproduisant pas et n'ayant pas de Safari sous la main, je ne saurais vérifier --"

@marcimat reproduisais-tu le problème éventuellement ? Si oui, le fix proposé par Mathieu résoud-t-il le problème ?

Si oui, je pusherai la modif et ferai un nouveau tag !

Merci par avance :)

Ne reproduisant pas et n'ayant pas de Safari sous la main, je ne saurais vérifier --" @marcimat reproduisais-tu le problème éventuellement ? Si oui, le fix proposé par Mathieu résoud-t-il le problème ? Si oui, je pusherai la modif et ferai un nouveau tag ! Merci par avance :)
Poster
Collaborator

Bon je comprends plus rien.
Ce matin ma modif fonctionne vraiment bizarrement dans Safari, j'ai jamais vu ça ! Elle ne semble pas appliquée, si je la ré-applique manuellement dans l'inspecteur ça fonctionen comme prévu... Je me demande si j'ai pas un souci avec ma version de Safari. Donc oui ça demande vérification ailleurs.

Bon je comprends plus rien. Ce matin ma modif fonctionne vraiment bizarrement dans Safari, j'ai jamais vu ça ! Elle ne semble pas appliquée, si je la ré-applique manuellement dans l'inspecteur ça fonctionen comme prévu... Je me demande si j'ai pas un souci avec ma version de Safari. Donc oui ça demande vérification ailleurs.
Collaborator

Du nouveau sur ce ticket ? @MathieuAlphamosa, @marcimat ? Des utilisateurs de Safari?

Du nouveau sur ce ticket ? @MathieuAlphamosa, @marcimat ? Des utilisateurs de Safari?
Poster
Collaborator

J'ai toujours les mêmes problèmes, il faut absolument que je prenne un peu de temps (si possible avant la fin de semaine) pour refaire le point sur une installation clean.

J'ai toujours les mêmes problèmes, il faut absolument que je prenne un peu de temps (si possible avant la fin de semaine) pour refaire le point sur une installation clean.
Collaborator

Salut @MathieuAlphamosa !

Alors, finalement, en cherchant un peu, j'ai trouvé pour Debian le navigateur Epiphany qui est basé sur WebKit et en effet je reproduis le problème.

Par contre, ta dernière proposition ne fonctionne pas dans mon cas:

.prism-live .token.tag,
.prism-live .token.url {
    overflow-wrap: break-word;
}

Ta première solution fonctionne parfaitement pourtant:

.prism-live .token.tag,
.prism-live .token.url {
    line-break: anywhere;
}

Mais je me demande pourquoi le limiter aux seuls .token.tag et .token.url ? Pourquoi ne pas l'appliquer à .prism-live afin de répondre au cas extrême de

LIGNEPASOKsqdqsdqsdqsdqsdjhqskjdgjqsgdjhqsgdjhqsghjdgqshjdgqshjdgjhsqgdhsqgjhdgqsjhgdjhqsgdjhqsgdjhgqsjhdgqjhsdgjhsqdgjhghj

Pour le moment j'ai donc modifié la déclaration des sélecteurs .prism-live textarea.prism-live,.prism-live pre.prism-live aux lignes 9-21 ainsi:

.prism-live textarea.prism-live,
.prism-live pre.prism-live
{
    --scrollbar-width: 17px;
    margin: 0;
    padding: 1em !important;
    padding-bottom: var(--scrollbar-width) !important;
    padding-right: var(--scrollbar-width) !important;
    border: 1px solid var(--spip-form-input-border-color);
    border-radius: var(--spip-form-border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;

	overflow-wrap: break-word;
	line-break: anywhere;
}

et ça semble fonctionner.

J'essaie d'éprouver cela dans les prochains jours.
Je pousse dans une nouvelle branche (https://git.spip.net/spip-contrib-extensions/prism/src/branch/dev/issue_3) et te laisse tester de ton côté.

Salut @MathieuAlphamosa ! Alors, finalement, en cherchant un peu, j'ai trouvé pour Debian le navigateur Epiphany qui est basé sur WebKit et en effet je reproduis le problème. Par contre, ta dernière proposition ne fonctionne pas dans mon cas: ```css .prism-live .token.tag, .prism-live .token.url { overflow-wrap: break-word; } ``` Ta première solution fonctionne parfaitement pourtant: ```css .prism-live .token.tag, .prism-live .token.url { line-break: anywhere; } ``` Mais je me demande pourquoi le limiter aux seuls .token.tag et .token.url ? Pourquoi ne pas l'appliquer à `.prism-live` afin de répondre au cas extrême de ```LIGNEPASOKsqdqsdqsdqsdqsdjhqskjdgjqsgdjhqsgdjhqsghjdgqshjdgqshjdgjhsqgdhsqgjhdgqsjhgdjhqsgdjhqsgdjhgqsjhdgqjhsdgjhsqdgjhghj``` Pour le moment j'ai donc modifié la déclaration des sélecteurs `.prism-live textarea.prism-live,.prism-live pre.prism-live` aux lignes 9-21 ainsi: ```css .prism-live textarea.prism-live, .prism-live pre.prism-live { --scrollbar-width: 17px; margin: 0; padding: 1em !important; padding-bottom: var(--scrollbar-width) !important; padding-right: var(--scrollbar-width) !important; border: 1px solid var(--spip-form-input-border-color); border-radius: var(--spip-form-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; overflow-wrap: break-word; line-break: anywhere; } ``` et ça semble fonctionner. J'essaie d'éprouver cela dans les prochains jours. Je pousse dans une nouvelle branche (https://git.spip.net/spip-contrib-extensions/prism/src/branch/dev/issue_3) et te laisse tester de ton côté.
Poster
Collaborator

Bonne nouvelle @bricebou, je pense avoir trouvé une solution qui fonctionne partout.

Le line-break: anywhere; coupe tous les mots en bout de ligne, c'est très perturbant. J'ai donc repris tout depuis le début (faut avouer que ces propriétés CSS sont pas ultra évidentes).

J'arrive à un résultat correct dans mes tests, et sur tous mes navigateurs (Safari, Chrome, FF) avec :

.prism-live code.language-md,
.prism-live code.language-markdown,
.prism-live code.language-spip_typo,
pre.prism-live,
textarea.prism-live {
    white-space: pre-wrap!important;
    word-wrap: break-word!important;
}

.prism-live textarea.prism-live,
.prism-live pre.prism-live
{
    --scrollbar-width: 17px;
    margin: 0;
    padding: 1em !important;
    padding-bottom: var(--scrollbar-width) !important;
    padding-right: var(--scrollbar-width) !important;
    border: 1px solid var(--spip-form-input-border-color);
    border-radius: var(--spip-form-border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

On oublie mes propositions de ne travailler que sur les tags et URLs (via .token.tag et .token.url).

Bonne nouvelle @bricebou, je pense avoir trouvé une solution qui fonctionne partout. Le `line-break: anywhere;` coupe tous les mots en bout de ligne, c'est très perturbant. J'ai donc repris tout depuis le début (faut avouer que ces propriétés CSS sont pas ultra évidentes). J'arrive à un résultat correct dans mes tests, et sur tous mes navigateurs (Safari, Chrome, FF) avec : ``` .prism-live code.language-md, .prism-live code.language-markdown, .prism-live code.language-spip_typo, pre.prism-live, textarea.prism-live { white-space: pre-wrap!important; word-wrap: break-word!important; } .prism-live textarea.prism-live, .prism-live pre.prism-live { --scrollbar-width: 17px; margin: 0; padding: 1em !important; padding-bottom: var(--scrollbar-width) !important; padding-right: var(--scrollbar-width) !important; border: 1px solid var(--spip-form-input-border-color); border-radius: var(--spip-form-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; } ``` On oublie mes propositions de ne travailler que sur les tags et URLs (via `.token.tag` et `.token.url`).
Collaborator

Salut @MathieuAlphamosa !

Je dois avouer que je ne suis pas trop sûr de comprendre... le code que tu propose est celui de la branche master si je ne m'abuse : https://git.spip.net/spip-contrib-extensions/prism/src/branch/master/css/prism-live-spip.css

Salut @MathieuAlphamosa ! Je dois avouer que je ne suis pas trop sûr de comprendre... le code que tu propose est celui de la branche master si je ne m'abuse : https://git.spip.net/spip-contrib-extensions/prism/src/branch/master/css/prism-live-spip.css
Poster
Collaborator

Ouais mais alors ça c'est parceque je suis une andouille... Je suis reparti de zéro et j'ai pas vérifié les différences par rapport à ta branche master... pour arriver au même résultat. La branche master est donc OK. Désolé.

Ouais mais alors ça c'est parceque je suis une andouille... Je suis reparti de zéro et j'ai pas vérifié les différences par rapport à ta branche master... pour arriver au même résultat. La branche master est donc OK. Désolé.
Collaborator

Non non, pas du tout :) mais t'aurais pas un reste de cache qui traînerait ? Parce que personnellement avec Epiphany (moteur Webkit) je reproduis tout à fait ton problème de lignes longues avec la branche master.

Et par contre, évidemment, j'avais zappé que ce line-break: anywhereétait un poil trop brutal...
Mais personnellement j'arrive vraiment aux limites de mes connaissances de CSS pour régler ce problème.

@tcharlss ou @marcimat peut-être ?

Non non, pas du tout :) mais t'aurais pas un reste de cache qui traînerait ? Parce que personnellement avec Epiphany (moteur Webkit) je reproduis tout à fait ton problème de lignes longues avec la branche master. Et par contre, évidemment, j'avais zappé que ce `line-break: anywhere`était un poil trop brutal... Mais personnellement j'arrive vraiment aux limites de mes connaissances de CSS pour régler ce problème. @tcharlss ou @marcimat peut-être ?
Collaborator

Salut tout le monde !
Ce problème est quand même pas mal em###dant, surtout pour les rédateurs ...
Une solution de contournement (en attendant de trouver mieux) serait d'ajouter dans la barre d'outils un bouton pour activer/désactiver prism live (il faut juste ajouter/retirer la classe prism-live sur le textarea concerné).
Je n'ai pas encore regarder, mais ça ne doit pas étre trop compliqué !!!

Salut tout le monde ! Ce problème est quand même pas mal em###dant, surtout pour les rédateurs ... Une solution de contournement (en attendant de trouver mieux) serait d'ajouter dans la barre d'outils un bouton pour activer/désactiver prism live (il faut juste ajouter/retirer la classe prism-live sur le textarea concerné). Je n'ai pas encore regarder, mais ça ne doit pas étre trop compliqué !!!
Sign in to join this conversation.
No Label
No Milestone
No project
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.