Ask for help to understand "decoration" example


#1

Hello.

There is an example for using the decoration functionality in Atom on https://atom.io/docs/api/v1.21.0/Decoration. This example is not complete - I assume a styling declaration is needed.

Could someone please help me to fill in the blanks to have the example do something.

Another more complete example is mentioned on http://blog.atom.io/2014/07/24/decorations.html which links to https://github.com/atom/decoration-example. This is a wonderful example created by the Atom design team. But sadly it is now outdated and does not work on current versions of Atom.


FIGURE 1: The original decoration example


Thank you for your attention.


#2

The example on the Decoration page works fine. If you select text, set editor, and paste that code into your console, then go to styles.less and add

.my-line-class {
    background-color: red;
}

then you will see all lines with selected text become bright red.


#3

Thank you, that was helpful.
The result is not what I expected.

BEFORE:

  • note a small portion is selected
  • code on the right

AFTER

  • whole code line is highlighted in red, not just a character
  • highlighting a line is a type: line (?)… what is a underline?
  • on the right - make sure only a small portion was selected by range

FINISH

  • destroy action does work


#4

I think you’re looking for the highlight decoration type.


#5

That is of great help.

type: highlight was what cases only the selected text to be highlighted.
:blush: …just as the type says it will.

Moving on… I would like to have a deeper look at what type: text can deliver.
From my understanding I can choose use class and/or style attributes with that.

Please could you direct me to background study material so I may work out how my style sheet should look like and what to fill in with class and/or style. Spell check wavy underline would be possible to do, I’d expect. But the burning riddle I hope to solve, could I change font colour (maybe yes) and font (probably no).

Thank you.


UPDATE 1:
Augmenting the text by decoration seems not to be possible when looking at:
https://github.com/atom/atom/issues/2886

If I understand correctly the decoration layer is below the level of the actual editor text. This makes me curious to what type: text for decoration is useful for. Shadow under the text? Maybe in colour?