Wysiwygeditor beschikbaar als bètafeature - Development-iteratie #311

De afgelopen sprints is er veel werk gedaan om een eerste bruikbare versie van een wysiwygeditor op te tuigen. Deze komt nu beschikbaar als bètafeature voor frontpagereacties. In dit .plan meer hierover.

Eenvoudiger tekst opmaken met de wysiwygeditor

Het vernieuwen van de editor is een al lang gehoorde wens. Een aantal jaren geleden deden we al eens een poging om een modernere editor te ontwikkelen. Helaas strandde dat toen. Maar nu is het zover. De afgelopen maanden pakten we dit project weer op en er is een eerste bruikbare versie van een wysiwygeditor beschikbaar. Als eerste stap voor de frontpagereacties en vooralsnog als bètafeature.

Wysiwygeditor: zet de bèta aan in je profiel

Je kunt de bètaversie om dit uit te proberen, aanzetten via je profiel. Uiteraard horen we ook graag je feedback. Met feedback kun je terecht in het forumtopic: Wysiwygeditor als bètafeature.

De afgelopen sprints zijn we druk verdergegaan met het invullen van de basis die we al eerder maakten. Dankzij de abstractielaag die we om Tiptap heen hebben gemaakt, kunnen we in de backend onze RML-tags blijven gebruiken en zijn (vooral eenvoudige) tags snel uitgewerkt. Zo hebben we subscript, superscript en klein met één ticket geïmplementeerd. Daarnaast hebben we nu ook ondersteuning gemaakt voor citeren, edit en offtopic. Ook de mentiontag is afgerond. Hieruit bleek dat sommige tags in een wysiwygomgeving wat meer aandacht vereisen zodat deze eenvoudig te gebruiken zijn.

Ook zaken die geen echte tags zijn, hebben we opgepakt. Zo hebben we smileys ondersteund en ook mogelijk gemaakt om zaken ongedaan te maken (ctrl + z). Daarnaast hebben we wat gesleuteld aan de abstractielaag zelf die toch nog beter kon werken. Als laatste noemenswaardige functionaliteit hebben we een controle toegevoegd die voorkomt dat er RML verloren gaat als de wysiwyg deze niet ondersteunt.

Editor demo screenshot

Met deze nieuwe editor maken we het vooral voor gebruikers op mobiel veel makkelijker om opmaak toe te passen bij het plaatsen en wijzigen van een reactie. Je hoeft niet meer omslachtig aan de slag met het aangeven van tags. Via tappen op een van de icons in de toolbar activeer je de juiste interactie. Ook op desktop is deze modernere editor natuurlijk te gebruiken. In de basis werkt de editor nog steeds met RML, waarbij je op elk willekeurig moment kunt wisselen tussen wysiwyg en RML.

Nu we deze basis hebben staan, is het plan om verder te gaan met de editor die in Vraag & Aanbod in gebruik is. Dat is vanuit wat we nu hebben staan een relatief kleine stap. Daarna komen dan de gebruikersreviews en het forum in beeld, waarbij het forum het meeste werk is doordat daar veel meer tags beschikbaar zijn.

En verder

• Bij het vernieuwen van oude delen van onze codebase pakken wij af en toe ook langstaande wensen op, zo ook onlangs bij het moderniseren van de gallery. Hierbij hebben wij de aparte zoekbalk voor het zoeken naar gebruikers verwijderd en deze functionaliteit geïntegreerd in de zoekbalk van de header. Dankzij quicksearch is het nu sneller en eenvoudiger om de juiste tweaker te vinden.
• De karmaranglijst en galleryranglijst zijn gemoderniseerd en hebben meteen een kleine visuele opfrisbeurt gekregen.
• Op de productdetailpagina hebben we de 'Alle prijzen'-link weggehaald, omdat uit een test bleek dat dit element weinig tot geen toegevoegde waarde had. Daarnaast hebben we op deze pagina een video-icoon toegevoegd aan productvideo's in de galerij.
• Op mobiele apparaten wordt op de frontpage de tekst 'Vergelijk prijzen' naast de productcategorieën getoond. Dit helpt bezoekers die minder bekend zijn met de Pricewatch sneller te vinden wat ze zoeken.
• En zoals altijd hebben we weer een aantal bugs geplet. Zo opende de vergelijkpop-up op smalle schermen buiten de viewport, werkte de afbeeldinggalerij met slechts één productfoto niet goed en ontbrak een aanduiding van vraagadvertenties in V&A. Ook kreeg de Pricewatch-paginering niet voldoende ruimte op smalle weergaven en versprong de prijsslider in sommige gevallen. Tot slot pakten onze recente verbeteringen op het gebied van toegankelijkheid niet goed uit voor de prijsinvoervelden van V&A en Unsorted, wat nu ook weer is verholpen.

Reacties (89)

[Tyrian]

Fijn. Gelijk aangezet. De (u)bb codes werden een beetje ouderwets en onvriendelijk in het gebruik.


Graag nog een instelling maken dat een enter naar de volgende regel gaat in plaats van een heel nieuwe paragraaf.

[DaFeliX]

Graag nog een instelling maken dat een enter naar de volgende regel gaat in plaats van een heel nieuwe paragraaf.

Met shift+enter kun je een witregel invoegen zonder een nieuwe paragraaf.
Dit werkt wel, maar moet je weten. Bij de uiteindelijke versie zullen we dit nog op e.o.a. manier duidelijk moeten maken.

[Tyrian]

Dat is een beetje on-intuitief voor mij. Enter heeft bij mij altijd een nieuwe regel gegeven i.p.v. een nieuwe paragraaf.

[willemb2]

In alle editors waar ik de laatste 45 jaar mee gewerkt heb is Enter nieuwe paragraaf en Shift+Enter nieuwe regel. Dat was op (de betere) elektrische typemachines in de jaren '60 al zo. De functie van Enter is 'huidige invoer afsluiten'. in de tekstverwerking is de invoer altijd een paragraaf is de volgende invoer dat ook.

[DaFeliX]

Hm, is het niet-intuïtief omdat je gewend bent? Ik ken het niet anders dan dat shift+enter (of ctrl+enter) witregels invoegt, en enter een nieuwe paragraaf. Dit is ook in veel andere wysiwyg-editors zo, en ook in vrijwel alle teksteditors waarmee ik heb gewerkt.

[Tyrian]

Het ligt waarschijnlijk aan de editor die je gebruikt en waar je mee bent opgegroeid. Er is geen "goed" of "fout" hier. Ik heb ook gezien dat sommigen een enkele enter voor een paragraaf gebruiken. Ik ben van een oudere generatie. In het verleden was het standaard dat 1x enter volgende regel was en 2x enter een nieuwe paragraaf. Als in MS Notepad (Kladblok) en de wat oudere versies van MS Word. Wat mij betreft zou een instelling de beste oplossing zijn. Dan kunnen gebruikers het gedrag van de enter aan hun voorkeur aanpassen en voorkom je dat er brede witregels ontstaan in teksten van gebruikers die gewend zijn om <enter> <enter> te geven om een nieuwe paragraaf te maken.

De teksteditor van het forum geeft momenteel ook een enkele enter voor een volgende regel en een dubbele enter voor een nieuwe paragraaf.

[Reactie gewijzigd door Tyrian op 13 mei 2025 16:32]

[Patriot]

Het is doorgaans doodsimpel: In een plaintext-editor (zoals hier als je geen gebruik maakt van de bètafunctionaliteit, op het forum, of in notepad) zorgt enter ervoor dat je opnieuw begint op de volgende regel. In een wysiwyg-editor (bijv. Word, of hier als je de bètafunctionaliteit aan hebt staan) begin je een nieuwe paragraaf. Alleen als je de standaardinstellingen aanpast is dat niet zo.

Ik ben er zelf altijd voorstander van om mensen te trainen om ook op die manier over de enter te denken: Alleen gebruiken om witregels toe te voegen en *bijna* nooit om een regel voortijdig af te breken. Dat moet je of op paragraafniveau doen, of gewoon in 't geheel overlaten aan het programma/de website.

Anders krijg je
van die teksten
die goed vloei-
en op iemand
anders zijn sch-
erm maar er bij
jou niet uit zien.

[CAPSLOCK2000]

Hm, is het niet-intuïtief omdat je gewend bent? Ik ken het niet anders dan dat shift+enter (of ctrl+enter) witregels invoegt, en enter een nieuwe paragraaf. Dit is ook in veel andere wysiwyg-editors zo, en ook in vrijwel alle teksteditors waarmee ik heb gewerkt.

Grappig hoe anders ervaringen kunnen zijn. Ik ga al een tijdje mee en heb alle grote editors, tekstverwerkers en IDE's van de afgelopen decennia wel eens gebruikt (van VIsual editor tot Visual Studio) en ik herken het totaal niet. Wel het principe dat shift-enter iets doet, maar niet de functies die jij er aan koppelt.

Ik wil niet zeggen dat je ongelijk hebt (ik ga zo even testen) alleen dat die intuïtie misschien niet universeel is. Voor mij werkt het in ieder geval niet intuïtief maar triggert het verbazing over onverwachte reacties.

[Patriot]

Google Docs en Microsoft Word doen het al heel lang standaard zo. IDE's inderdaad niet, maar in die context slaat het ook als een tang op een varken. Dat zijn plaintext-editors, geen wysiwyg-editors.

Misschien dat het je gewoon zo tegenstaat dat het bij jou standaard al uit staat (dat kan wel namelijk) en je daarom niet weet dat het al even de standaard is?

[Daoka]

Ik hoop dat er een optie komt. Ik heb wel eens gezien dat enter een paragraaf doet maar de meeste plekken waar ik kan typen is enter gewoon de volgende regel of heeft hier een instelling voor. Whatsapp en Telegram (als enter niet ingesteld staat op verzenden), alle mobiele notepads apps die ik geprobeerd heb, outlook en yahoo webmails. Ook bij eigenlijk iedereen in mijn omgeving die Word gebruikt heeft dit op volgende regel ingesteld. De meeste andere forums die ik gezien heb heeft ook enkele regel of een instelling om dit te veranderen. Misschien dat dus professionele editor software zich meer hierop gefocust heeft maar voor mij gevoel dus de rest van de wereld minder.

[R4gnax]

Ik hou persoonlijk het meeste van de oplossing waar een enter achter een zin een nieuwe regel maakt, dus alleen een line break, en waar nogmaals een enter aanslaan aan de start van een witregel deze transformeert naar een paragraafovergang.

Compleet intuitief en pijlsnel tikken.

[Yorinn]

En hoe zou dat mobiel moeten werken? Daar heb je geen shift-toets om direct op een volgende regel verder te gaan.

[DaFeliX]

Goede vraag, weet ik (nog) niet, dus dat moeten we uitzoeken

[GEi]

Werkt het niet door shift vast te houden, en daarmee caps lock te activeren, en dan te enteren? Werkt bij sommige wysiwyg is mij opgevallen. Heb de beta hier nog niet bekeken..

[R4gnax]

Dat werkt inconsistent. Caps lock aanzetten op een virtueel toetsenbord mapt niet noodzakelijk naar de shift modifier toets ingedrukt houden naast de enter toets, en dat is waar een op JavaScript gebaseerde editor zoals TipTap naar zou luisteren.

[P_Tingen]

2x enter?

[TheVivaldi]

Mijn telefoon met fysiek toetsenbord heeft die mogelijkheid wel.

[watabstract]

Hoezo heb jij geen shift-toets op mobiel? Ik wel en shift+enter werkt hetzelfde als op de pc.

[Piemol]

In mijn omgeving hebben alle non technische mensen die editors moeten gebruiken hebben het altijd andersom gewild. Dus heb ik het in de praktijk altijd andersom geconfigureerd, snellere gebruikersacceptatie.
Maar goed, hier is het publiek en de gebruikers wel wat technischer.

[Xav]

Lorem ipsum dolor sit amet, consectetur _adipiscing ^elit.

edit:

Donec id dignissim orci, iaculis interdum ante. Ut nec ex ut lectus pellentesque rutrum.

offtopic:
Praesent a arcu ex. Mauris eros velit, pulvinar at fermentum id, posuere quis ipsum.

Aliquam vitae elit tempus, ultricies risus tempor, gravida justo.

• 
• 

1. 
2. 

[DonJunior]

Senior developers die testen op productie.. herkenbaar. hahaha


Ik weet overigens nog niet wat ik van de smileys vind.
Zijn wel heel ouderwetse smileys (zoals @Asitis ook al aangeeft, heel hoog Hyves gehalte, en dat is geen compliment)
Buiten dat weet ik niet of je dat uberhautp moet willen op de frontpage. Oogt direct een stuk rommeliger nu.

[Cambionn]

Je gaat er nu vanuit dat dit een daadwerkelijke test is en niet om te showen. Vermoed zelf echter eerder dat laatste.

Overigens vind ik de smileys horen bij Tweakers, en mooi dat het niet uitgefaseerd wordt voor de standaard die overal is. Ze zijn ze ook al flink aan het oppoetsen, hoewel ik niet weet hoeveel daar nog gebeurd @Xav ?

[Reactie gewijzigd door Cambionn op 13 mei 2025 16:17]

[SiC123]

Helemaal eens, deze smileys zijn gewoon onderdeel van tweakers en mogen nog heeeeel lang blijven

[i7x]

De smileys zijn een tijd terug grotendeels gemoderniseerd. Ja, ze behouden wel de ‘Hyves-look’, maar persoonlijk vind ik dat juist wel vet (destijds toen er discussie was wbt de smileys leken ook veel mensen nostalgische waarde te hechten aan deze smileys). Denk niet dat die snel nog verwisseld zullen worden met ‘moderne’ alternatieven. (Al kun je overigens ook gewoon emojis gebruiken als je wilt 🤡)

[laptopleon]

Het valt wel op dat nog steeds niet alle smileys omgezet zijn naar cq vertaald zijn naar een svg (neem ik aan dat het is) versie.

Even testen.

[CH4OS]

Maar Hyves kwam later met de emojis / smileys, Tweakers en Fok gebruikten de smileys al jaren voordat Hyves überhaupt kwam.

[Meg]

Nog niet mobiel vriendelijk.

Nu op de laptop even aan het testen.

edit:
Wat ziet dit er goed uit!

[Reactie gewijzigd door Meg op 13 mei 2025 16:27]

[stijnb1234]

Inderdaad, de knoppen zijn te groot waardoor je niet alle opties ziet.

[Meg]

Klopt als een bus! Heb het even in het topic gemeld.

offtopic:
De emoji zijn ook nog niet allemaal mooi transparant.

[TheVivaldi]

Ook dat, maar ook schiet de plaatsknop weg als je een bericht zo lang als dit typt en opzij scrollen werkt niet.

[LA-384]

Leuk, maar die sneltoetsen boven dit invoervenster, bevatten niet alle mogelijke opmaakopties. Zo mis ik iig de onderstrepen knop [u][ /u]

Komt dat ook nog?

[DaFeliX]

Onderstrepen ([u]) werkt niet in frontpagereacties, dus die zal hier niet komen, maar als we straks op 't forum het uitrollen zal die er wel in moeten.

Dit wordt zo weinig gebruikt dat we het wel ondersteunen als mogelijke opmaak, maar dat we het niet "actief" aanbieden. Tekst die je in RML schrijf kun je bijvoorbeeld wel bewerken, maar er is geen knop voor in de toolbar.

Overigens, we bieden op verschillende plekken verschillende soorten tags aan, dat zullen we blijven doen. Het is dus niet zo dat alle mogelijkheden van 't forum straks mogelijk zijn in frontpagereacties.

[Reactie gewijzigd door DaFeliX op 13 mei 2025 16:14]

[LA-384]

Ah ok, ik kom niet zo vaak op de frontpage om te reageren, dus was daar niet van op de hoogte. (En zag pas later dat ik deze functie nog moest activeren).

Wat ik nu wel merk is dat het nieuwe invoerveld te breed is voor mijn telefoonscherm. Ik kan ook niet naar links of rechts scrollen, dus een flink deel valt buiten beeld.

Ook zorgt een enter voor het starten van een nieuwe alinea ipv aansluitend aan de vorige. Een optie waar word ook standaard gebruik van maakt en ik persoonlijk rete irritant vind.

Ik zet het voor nu weer uit, want het is voor mij nog onwerkbaar. (Ik kon niet eens op "plaatsen" drukken, omdat die knop buiten beeld was).

Ps, ik weet dat het nog een beta functie is. Geen kritiek.

[Reactie gewijzigd door LA-384 op 13 mei 2025 16:16]

[Meg]

Hoezo werkt een onderstreepte tekst niet, @DaFeliX?

[TheVivaldi]

Ziet er heel goed uit! Alleen zouden mijns inziens de knopjes iets groter mogen en verder zou het fijn zijn als de emoticons met het donkere thema niet geïnverteerd worden, want daardoor zijn ze bijna niet zichtbaar.

[Yorinn]

Nog groter? In de mobiele weergave vallen al 5 knopjes weg.

[TheVivaldi]

Maar op de computer niet. Alle knopjes zijn daar piepklein.

[Reactie gewijzigd door TheVivaldi op 13 mei 2025 17:07]

[TV_NERD]

WeLk

Om

• i

1. N
   2 ₀²5

[edit]Ja werkt goed[/],

edit:

wel jammer dat je UBB niet geparsed wordt als je WYSIWYG mode zit.

[Reactie gewijzigd door TV_NERD op 13 mei 2025 17:05]

[DaFeliX]

edit:

wel jammer dat je UBB niet geparsed wordt als je WYSIWYG mode zit.

Als je bedoelt dat blokhaken in wysiwyg geen RML-tags worden: dat doen we bewust. Hiermee voorkom problemen in tekst met blokhaken wanneer gebruikers niet realiseren dat er RML achter zit. Je zult dus eerst naar de 'broncode' versie moeten overschakelen.

[TV_NERD]

Begrijpelijk, ik hoopte uit pure luiheid op een hybrid versie waarbij overschakelen niet nodig zou zijn, maar ik begrijp de mogelijkheid tot verwarring. Danku!

[TheProst]

@ikloon @DaFeliX Ik kan geen Hyperlinks toevoegen met de Beta editor ( Wel fijn dat je nu een stukje heb tekst om weer te geven). Is er ergens een plek om dit soort dingen voor de editor of voor aankomende beta functies aan te geven?

[Reactie gewijzigd door TheProst op 15 mei 2025 15:36]

[ikloon]

Dat is vreemd. Bij mij lukt dat wel (zie de link verderop ). Je kunt het het best even melden in het feedback topic hiervoor: forumtopic: Wysiwyg-editor als bètafeature. Als je dan beschrijft wat je doet en met welk device/OS dan kan er naar gekeken worden.

[TheProst]

Appart hij doet het nu wel. Gisteren als ik op invoegen klikte knipperde de witte omlijning van het tekst vak en werd hij niet toegevoegd en verdween de popup venster ook niet.


Google

[bkor]

Ik had hetzelfde. Initieel werkte het niet (eerste reactie ooit met deze editor). Daarna wel.

[Asitis]

Ik krijg meteen Hyves-flashbacks van deze commentsectie zo!

[Kroesss]

Om het af te maken zou de dansende banaan dan ook beschikbaar moeten komen!

[Loller1]

Fijn om eindelijk een modernisering van de editor te zien, het was ronduit belachelijk dat we nog steeds met UBB code zaten te werken. De editor kan wel nog wat fit-and-finish gebruiken zie ik, maar het is al een hele stap vooruit.

[Icekiller2k6]

belachelijk of retro ?

[Zeror]

Gaaf die wysiwyg editor. Wanneer kunnen we die op het forum verwachten of kunnen we die überhaupt op het forum verwachten? Zal wel iets meer werk zijn ivm de extra tags enzo die daar mogelijk zijn.

[DaFeliX]

Wanneer? Geen idee. Maar het is zeker wel de bedoeling dit ook daar uit te gaan rollen. Dat is nog wel veel werk, omdat het forum veel meer tags ondersteund. Daarvan zijn er ook best nog wel dingen die uitgedacht moeten worden om er intuïtief mee te werken, denk bijvoorbeeld aan tabellen. We werken daarom van 'makkelijk' naar moeilijk toe, zodat we eerst veel ervaring kunnen opdoen voordat we de moeilijkere aspecten hoeven op te pakken.

[miicker]

Jammer, had gehoopt dat dit ook meteen op het forum zou werken...