CM6: showTrailingSpace?

Thanks a lot for CM6! The porting of my application to CM6 is almost complete with great satisfaction.
The only thing missing is showTrailingSpace addon for which I am not able to find the equivalent for CM6. Anyone has an idea where to find it?

An initial hack I found is to add to the extensions:

highlightSpecialChars({specialChars: / +$/g})

But this shows only one red dot independently from the number of trailing spaces.
Thanks in advance!
mario

Found a solution. Using RegExp lookahead syntax, I can highlight the trailing blanks:

highlightSpecialChars({specialChars: / (?= *$)/g}),

Now are only missing the squiggly lines under the trailing blanks…

You shouldn’t use highlightSpecialChars for this. There’s an implementation in Chrome devtools that you may be able to take inspiration from: here and here.

1 Like

Thanks @marijn ! Here is my solution using the render function. In the extensions array I have:

highlightSpecialChars({specialChars: / (?= *$)/g, render: specialCharsHighlight})

And the render function is:

const specialCharsHighlight = (code: number,
                               description: string | null,
                               placeholder: string): HTMLElement => {

    const element = document.createElement("span");
    if(code === 0x20) {
        element.textContent = "~";
        element.classList.add("cm-specialChar");
        element.contentEditable = "false";
        element.title = "Trailing space";
    }
    else {
        element.textContent = placeholder;
        element.classList.add("cm-specialChar");
        element.contentEditable = "false";
        element.title = description ?? "Control char unknown";
    }
    return element;
};

Now I have to finish it adding the squishy line, but the idea works.
Hope could be of help to someone.
mario

Using this type, I’m able to emulate the old show trailing spaces behavior:

        ".cm-trailingspace": {
            backgroundImage: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==')",
            backgroundPosition: "bottom left",
            backgroundRepeat: "repeat-x",
            backgroundColor: "#563232"
        }

Enjoy!
mario