Een klant meldde "een probleem" binnen Umbraco en mijn collega Pieter is gaan kijken hoe hij dat kon fixen. Wijzigingen in configuratie, zaken aanpassen, uitbreiden, maar nog steeds niet het gewenste resultaat. Afgelopen donderdag liet hij zien wat er fout ging, dus ook ik ben nu op de hoogte van deze bug. Binnen TRES ben ik een beetje de "vliegende keep", dus iemand die zoiets wel verder wil uitzoeken, alleen zat ik net in een stuk code om te zorgen dat we al onze websites beter kunnen monitoren. Zodat we kunnen zien hoeveel geheugen een website gebruikt, hoeveel database-connecties er open staan naar een bepaalde database. Het zijn indicaties van mogelijke problemen die eraan komen, dus voor mij (en TRES) had dat iets meer prioriteit.
Alleen (ik denk dat dit bij meer developers zo is), als je zo'n soort puzzel krijgt, wil je 'm ook oplossen. En dat ga ik nu ook doen. Ook omdat op mijn todo-lijstje staat om Umbraco MVP te worden ga ik eerst zorgen dat ik wat kan bijdragen aan de community. Misschien zijn er meer mensen die met dit issue worstelen en met deze oplossing geholpen worden.
TL;DR
Ik heb een werkende oplossing qua code. Pieter heeft mijn code gekregen en kan daarmee kijken of dat voor hem afdoende is (het lijkt er wel op). De code is nog niet beschikbaar ( daarom heet dit artikel "issue 1a" ), als het goed is komt er namelijk nog een "issue 1b". Ik heb hier een weekend aan besteed, toen ik zondagavond om 22.30 uur dacht te kunnen afronden liep ik nog tegen een paar "edge-cases" aan. Onder andere als je een macro aan het begin van je artikel invoegde, dat ging nog niet goed (heb ik nog gefixt zodat mijn versie rond 23.30 uur af was). Maar echt "af", dat is ook niet zo. Toen ik op het werk nog wat testte, kwam ik een artikel tegen waarbij ook met vette en italic tekst gewerkt werd. En je raad het al: de "eind-tags" daarvan, de </i> en </strong> stonden binnen een paragraaf (getverderrie!), waardoor de detectie niet goed ging. En omdat ik mogelijk de code nog wil refactoren kwam ik tot de conclusie dat ik een testproject moet maken. Ja, voor een kleine 150 regels javascript-code moet een stuk testcode gebouwd worden. Ik heb ervaring met test-projecten in C#, maar niet met testcode voor javascript. Dus dat ga ik in "issue 1b" behandelen en dan zal ik ook de code op mijn Github-account plaatsen.
Wat is het probleem?
In Umbraco heb je verschillende soorten velden, een tekstveld, een checkbox, maar ook een HTML-veld, een tinyMCE Editor. Dat is deels WYSIWYG (what you see is what you get). Via het rader-icoon kun je een macro uitvoeren. En wij hebben ingebouwd dat je een nieuwsartikel kunt invoegen. Als je dat doet ziet het er netjes uit. Alleen... dan gebeurt het. Je slaat het artikel op en denkt "oh, ik ben nog wat vergeten". Dus je gaat terug naar je artikel en ineens zie je dat er een extra lege regel boven het ingevoegde nieuwsartikel staat. Hè? Die was er zonet nog niet toch?
Inderdaad. Pieter laat zien dat als je het nieuwsartikel invoegt en je doet in je browser "inspect element" op de WYSIWYG-editor, dan zie je dat er een p(aragraaf)-tag geopend wordt, daar binnen staat een div-tag waarin het artikel staat. Alleen, dat is niet geldig. Een div-tag mag niet binnen een p-tag (andersom wel). Dus als je dit opslaat, dan wordt dat "hersteld", je krijgt dan een <p></p><div>nieuwsartikel...</div><p> </p> in je broncode. Hier zie je waardoor die lege regel (ervoor en erna) komt, dat is die <p></p>. Het mooie is trouwens dat dit een bug in de editor is, als je namelijk voordat je de boel opslaat op het < > icoon klikt, dan krijg je de broncode te zien en ook daar zie je al dat het straks <p></p> <div>...</div><p> </p> wordt.
Ik ga kijken of ik dit eerst op mijn eigen omgeving kan reproduceren. Mijn eigen website (www.prijs-bewust.nl) heb ik net opgezet als een nieuw Umbraco-13 project. Daar zitten (dus) geen macro's in. Eerst kijken hoe ik een macro kan toevoegen om hetzelfde issue te reproduceren.
Macro aanmaken
Dat is snel gefixt, ik heb de stappen van docs.umbraco.com gevolgd.
Log in op /umbraco en klik daar op Settings.
Voordat je een Macro aan kunt maken, moet je eerst een "Partial View Macro Files" aanmaken.
Ik klik daar op de 3 puntjes en kies voor "New partial view macro".
Ik geef deze de naam ProductMacro
In de content zet ik eerst deze dummy-data:
@inherits Umbraco.Cms.Web.Common.Macros.PartialViewMacroPage
<div>
<b>Hier gaan we een product tonen!</b>
</div>
Dit sla ik op.
Dan gaan we naar Macros. Ik zie dat hier al de macro "ProductMacro" aangemaakt is. Klik deze aan.
Ik zet de Use in rich tekst editor and the grid op Yes. Dan krijg je er nog een Render in rich tekst editor and the grid optie bij die aan staat, die moet ook actief blijven. Deze sla je op.
Vervolgens ga ik naar een pagina en kan nu inderdaad via het radertje deze HTML invoegen.
En ja, ook hier heb ik hetzelfde issue. Op zich is het ook wel "logisch", want zodra je in de editor naar een "nieuwe regel" gaat, dan kom je automatisch binnen een nieuwe <p></p>. Bij normale tekst is dat prima, alleen dit is een uitzonderlijke situatie waarin je het niet wilt.
Oplossing voor dit probleem:
Het mooiste zou zijn dat je op het "insert macro"-event een soort "post-actie" kunt toevoegen. Dus dat er een door jou gedefinieerde actie uitgevoerd wordt op het moment dat je een macro uitgevoerd hebt en HTML toegevoegd is aan de editor. Mocht tinyMCE dat niet ondersteunen, dan zou je er zelf via JavaScript een actie aan kunnen koppelen (waarbij je mogelijk een hoger risico op fouten hebt).
Eerst zoeken of er een oplossing is. Die is er zo te zien niet. Ik kom zelfs op een pagina van our.umbraco.com met meldingen van 2009 waarin dit probleem al speelde! De "oplossing" om op de voorkant (dus de site) via jQuery de "lege p-tags" te verwijderen is inderdaad niet wat je wilt. Want mogelijk wil je op bepaalde plekken in je HTML wel lege p-tags om wat meer witruimte te genereren. Het gaat hier puur om het macro-deel.
Ik ga dus toch kijken of ik zelf een stuk javascript in het /umbraco deel kan toevoegen wat "in de gaten houdt" of de inhoud van een tinyMCE editor bijgewerkt wordt en dan mijn filteractie daarop uitvoeren.
Ik volg de instructies zoals die op docs.umbraco.com staan.
Ik maak in mijn project een map App_Plugins aan en daar onder de map TinyMceParagraphForMacroRemover.
Daar maak ik een package.manifest aan en een tinymce.paragraphformacro.remover.js bestand.
Na veel "gepiel" kom ik dankzij de pagina van Umbraco en die van TinyMCE, namelijk https://www.tiny.cloud/docs/tinymce/latest/events/ en https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/ een heel eind met mijn aanpassingen.
Wel zie ik dat er toch wat zaken "foutgevoelig" zijn. Als je wat dingen snel achter elkaar doet, iets verwijdert, iets toevoegt, dan krijg je een soort HTML in je editor te zien en gaat het fout. Ik krijg het zelfs zover dat die foutieve HTML opgeslagen wordt en ik na de tijd de WYSIWYG editor niet meer te zien krijg omdat het javascript van Umbraco erover struikelt!
Met wat aanpassingen gaat ook dat goed. Volgende stap is om een testproject te bouwen, daarna kan ik beginnen met het refactoren en stabiel maken van mijn code.
Het andere probleem:
Zodra ik een macro ingevoegd heb en op opslaan/opslaan en publiceren klik en dan naar een andere pagina wil gaan ik de pop-up krijg: "You have unsaved changes".
Een foutieve melding, want ik heb alle wijzigingen opgeslagen. Bij een online zoektocht kom ik uit op dit punt waar het ook genoemd wordt: https://github.com/umbraco/Umbraco-CMS/issues/6366
Dat is een oude versie van Umbraco (versie 7, we zitten nu op 13), maar het probleem is vergelijkbaar.
Het lijkt erop dat zodra je een macro in je tinyMCE editor op een pagina hebt, je wat wijzigt, dat opslaat je altijd die pop-up te zien krijgt. Eerst dacht ik dat het door de toevoeging van mijn code kwam, maar bij een "schone omgeving" loop ik tegen exact hetzelfde issue aan. Een bug binnen de code van Umbraco. Misschien dat ik dit punt kan gebruiken voor een PR op de code van Umbraco, ik ga eerst kijken of ik ook hier "een pleister kan plakken". Dan kunnen "we" (eigenlijk ik) door, want ik zou "even naar dit punt kijken", uiteindelijk is dit een zaterdagavond en zondagavond geworden. Terwijl ik eigenlijk 4 uren aan mijn Umbraco-site zou besteden en 1 uur aan een "code-project".
En wat van belang is, macro's zitten nog in Umbraco 13, maar komen in versie 14 en hoger niet meer terug: blog-artikel. Dus ik ga hier (in ieder geval voor dit moment) er geen tijd aan besteden. Nog wel even een paar linkjes hier noteren, mocht ik later nog meer met de backoffice gaan doen, dan kan dit waarschijnlijk als referentiemateriaal gebruikt worden: via een vraag op our.umbraco.com kwam ik op api-documenten uit. Dat was van versie 8, via-via kwam ik op de apidocs van Umbraco 13. En ook op de Events Service.