I would like to enhance the Markdown editor field a bit. For a start, I would like to see the red dots marked up differently according to which character they're replacing. Currently I am experimenting with soft hyphens (\uad) and no-break spaces (\ua0). These are rendered by the editor as red dots, and in the markup like this:
Spectre provides <span class="cm-invalidchar" title="\uad" aria-label="\uad" cm-text="">•</span> bas<span class="cm-invalidchar" title="\ua0" aria-label="\ua0" cm-text=" ">•</span>ic styl<span class="cm-invalidchar" title="\uad" aria-label="\uad" cm-text="">•</span><span class="cm-invalidchar" title="\ua0" aria-label="\ua0" cm-text=" ">•</span>es for t<span class="cm-invalidchar" title="\ua0" aria-label="\ua0" cm-text=" ">•</span>ypography, elements, and a respon<span class="cm-invalidchar" title="\uad" aria-label="\uad" cm-text="">•</span>sive layout system that utilizes best practices and consistent language design.
I can address these different chars via their title or aria-label attributes in css, BUT no matter how I try adding the css file, it doesn't turn up.
I have copied the twig template user/plugins/admin/themes/grav/templates/forms/fields/editor/editor.html.twig into user/plugins/typography-helper/admin/themes/grav/templates/forms/fields/editor/editor.html.twig. This works alright and gets used. If I hardcode a style in there it shows up in the editor. However, this does not seem to do anything:
{% do assets.addCss('plugin://typography-helper/css/typography-highlighting.css', {'loading': 'inline', position: 'after'}) %}
But I think it should work? Why not? 🤔
Your input is much appreciated!