Format bullets?

[John Brecht]

Hey all - 

Newbie to firepad here. I'd like to customize it to apply size and color formatting to the bullet point leading a list item when a size or color is applied to that line of text. Has anybody done something like that before? Where in the code do I want to look to intercept the existing application of size/color styling? It looks like what I would need to do is to make a check when that is done to see if the span the style is applied to has a sibling span that is a CodeMirror-widget, and if so, also apply the style to it. (Or its child span, the one that contains the actual bullet or number.)

Cheers,

JB

[Michael Lehenbauer]

Sorry, that sounds tricky to do from a firepad perspective.  In general, spans of text aren't aware of what's before/after them and so it would be tricky to have conditional formatting based on that.  I wonder if maybe you can accomplish it with fancy CSS styling?  Maybe take a look at the DOM elements and see if you can come up with CSS rules to accomplish what you want?

Sorry I don't have any better ideas.

--
You received this message because you are subscribed to the Google Groups "Firepad" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firepad-io+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firepad-io/bd14e139-dc16-4084-920f-90e01735962c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[John Brecht]

Finding the relevant siblings of the span element should be trivial using standard DOM traversal functions (element.nextSibling, or element.parentNode.children). What was not immediately obvious looking at the code, since there's a lot of indirection here, is where exactly the target(s) of the current applied style are identified/instantiated, and then where the appropriate CSS class is applied. It looks like perhaps this is done in RichTextCodeMirror.prototype.updateTextAttributes but it's not terribly clear, given the dearth of code comments or documentation.

[John Brecht]

I can *almost* make this work. I can insert code in onCodeMirrorChange_ in RichTextCodeMirror such that each time it is triggered, it selects all elements with the class 'CodeMirror-widget'. For each of those, it checks if it has a child with class 'firepad-list-left', and if so, it styles it with the classes of the first sibling of 'CodeMirror-widget'. This works somewhat, but bizarrely when the last item of the list is empty, or if there is one empty line at the end of the list, then the bullets do not get styled. Totally bizarre.

[John Brecht]

It took some trial and error, but I had to insert callbacks in 5 different places in rich-text-codemirror.js in order to get this to work:

1. as part of the callback that is used to construct AnnotationList

2. in markEntity_

3. onCodeMirrorChange_

4. in markLineSentinelCharacters_

5. in newline

If you reformat all the bulletpoints in your document after each of these functions completes you can get this to work. oy.

[John Brecht]

Getting back to this... So while I can go back and insert styles into CodeMirror's otherwise unstyled bullets, you get a "flash" every time it happens. Basically, whenever you hit enter, every bullet reverts to its unstyled version until my code steps in to fix it again. Worse, CodeMirror has no idea where to put the cursor a lot of the time, nor how to size it. I think the only way to fix this properly is to bit the bullet and fix it in CodeMirror.