Detecting mouse clicks in Atom

Hi guys,

I’m trying to create a package that hides semicolons in CSS files and causes Atom to act as if they aren’t there. In this way you can achieve a slightly neater syntax like Sass, but without having to constantly convert from Sass to CSS if you are working locally. The semicolons will still be there in the file, just hidden.

Hiding the semicolons is easily done by adding a CSS rule but then comes the harder challenge of making Atom skip past them when moving the text cursor around in the file. I’ve managed to achieve the desired effect when moving around with the arrow keys and Home and End, it acts as if there’s no semicolon at the end of a line. I’ve done this by detecting when the text cursor comes after after a semicolon at the end of a line and then moving it back before it if the key that was used was ArrowLeft, End, etc, and putting it on the next line if the key used was ArrowRight.

For clicking the mouse at the end of a line I’ve set it up using jQuery but it doesn’t work as well as with the arrow keys as it works significantly slower so that the movement of the text cursor going back before the semicolon is visible.

So there doesn’t seem to be a way to detect mouse clicks in Atom, but is there some way to do it? It seems that if I want to achieve the behaviour I’m looking for I would need to detect mouse clicks in some way because I tried using onDidChangeCursorPosition but that doesn’t tell you what caused the change in position, if it was the keyboard or mouse, and you need to know that because clicking at the end of a row is different from pressing ArrowRight. In the same way, onDidDispatch for commands doesn’t detect mouse clicks.

Hopefully it makes sense what I’m saying and thanks for any help.

Why not use native JavaScript event listeners?

Example:

const textEditor = document.querySelector('atom-text-editor');
textEditor.addEventListener('click', console.trace);

However…

I have to admit I find it a bit odd what you’re trying to achive, but I don’t like questioning other people’s needs in general. However, the following line made me wonder, whether there are other to accomplish what you’re after:

It sounds like you convert Sass to CSS manually. Why would you do that, if there are many workflows (with or without Atom) that do this automatically? Personally, I’m still using Gulp for these tasks.

Here’s the portion from my gulpfile.js that handles Sass to CSS conversion:

gulp.task('make:sass', done => {
  gulp.src(sassFiles, { cwd: projectDir, allowEmpty: true })
    .pipe(gulpif(!isProduction, sourcemaps.init()))
    .pipe(sass(sassOptions))
    .on('error', log.error)
    .pipe(concat('app.css'))
    .pipe(gulpif(isProduction, postcss(cssPlugins)))
    .pipe(gulpif(!isProduction, sourcemaps.write()))
    .pipe(gulp.dest(assetsFolder));

  browserSync.reload();
  done();
});

No, I don’t convert Sass to CSS manually. What I’m saying is, I was working on a Sass watcher/converter that would convert in both directions, Sass to CSS and also CSS to Sass, where it would find any added, changed or removed lines in the CSS file and make the same changes to the Sass file. This is so you can edit stuff easily in the Chrome DevTools and have your changes put back into your Sass file.

But I found that it was just too prone to errors. So that’s why I’m trying to do something different because what I what I mainly want is just to be able to write CSS without semicolons.

You can delete this thread if you want. You’re right, it’s a terrible idea.

But sometimes it’s still fun and you learn something from experiments like this