Highliting a part of the text


#1

Hi,

I am trying to make a text selected by the user appear in blue.

To do this, I am using the following commands:

let range = currentEditor.getSelectedBufferRange();
let marker = currentEditor.markBufferRange(range, { invalidate: 'never' });
currentEditor.decorateMarker(marker, {type: 'highlight', class: 'copied-text'});

And these are my styles:

@import "ui-variables";

.srt-helper
{
	.block-centered
	{
		text-align:center;
	}

	.panel-heading-centered
	{
		text-align:center;
	}

	.copied-text
	{
		color: blue;
	}
}

.syntax--untranslated
{
	color: orange;
}

.syntax--out-of-bounds-text
{
	color: red;
}

Unfortunately the command above is not working (I believe that I am not calling it with the correct CSS class, because if I call it using: currentEditor.decorateMarker(marker, {type: 'highlight', class: 'selected'}); (the selected class is the one that highlights a selection in the editor), than everything works fine.

Thanks


#2

The problem is that highlight decorations can’t change the foreground color of things because they’re in a separate DOM node from the text itself. So if you change .copied-text to have background-color: blue, you’ll see things appear properly.


#3

Hi @leedohm,

I’ve changed my CSS file according to your suggestion:

@import "ui-variables";

.srt-helper
{
	.block-centered
	{
		text-align:center;
	}

	.panel-heading-centered
	{
		text-align:center;
	}

	.copied-text
	{
		background-color: blue;
	}
}

.syntax--untranslated
{
	color: orange;
}

.syntax--out-of-bounds-text
{
	color: red;
} 

But, it is still not working.

I’ve also changed my highliting code to use the selection style instead of my own style and it worked:

let range = currentEditor.getSelectedBufferRange();
let marker = currentEditor.markBufferRange(range, { invalidate: 'never' });
currentEditor.decorateMarker(marker, {type: 'highlight', class: 'selection'});

So, I believe that the code above is correct and the problem that I am having is with the CSS file itself.

Finally, is there a way to change the text color instead of it’s background color?

Thanks


#4

Not using Decorations, no.

Why is .copied-text inside .srt-helper? Have you tried .copied-text by itself?


#5

So, [quote=“leedohm, post:4, topic:39962”]
Why is .copied-text inside .srt-helper? Have you tried .copied-text by itself?
[/quote]

I thought it was supposed to be inside the .srt-helper, to sort of encapsulate all my styles there. Anyway, yes I did try it outside and it also didn’t work.

I see, so the only way would be to open and edit the text editor DOM to do this?


#6

To change the color of the text, yes. The first time you scroll or the text needs to be repainted for any reason, your changes may be wiped out.

Have you used the Chrome Debugging tools to see if the elements have the proper classes and if the classes have the appropriate properties? At this point, I can’t think of anything else to suggest. From your description, things should be working.


#7

Yes, I did.

It seems ok to me:

<div class="highlights">
	<div class="highlight copied-text">
		<div class="region" style="box-sizing: border-box; top: 0px; left: 0px; height: 21px; right: 0px;"/>
		<div class="region" style="box-sizing: border-box; top: 21px; left: 0px; right: 0px; height: 21px;"/>
		<div class="region" style="box-sizing: border-box; top: 42px; left: 0px; width: 38px; height: 21px;"/>
	</div>
	<div class="highlight selection">
		<div class="region" style="box-sizing: border-box; top: 42px; left: 0px; width: 38px; height: 21px;"/>
	</div>
</div>

I’ve done some tests and if I change the class from copied-text to selection, then the selection highlight appears. Also, if I change the classes of the div elements inside the highlights to include the copied-text style, then it works: <div class="region copied-text" style="box-sizing: border-box; top: 0px; left: 0px; height: 21px; right: 0px;"/>.

I am not sure what I am missing here.


#8

Hi,

I’ve got it working. I’ve checked the atom source code and the highlight styles have an additional .region class. I’ve changed my source code to this:

.copied-text .region
{
	background-color: blue;
}

And it works now! Thanks for the help!