How to set a new keybinding in Atom on osx - javascript

I've started using Atom with a Macbook and I wanted to create a keybinding so that alt-up arrow would be page up and alt-down arrow for page down, I've tried a bunch of options and I'm not having much luck.
I'm not sure what the difference between
'atom-text-editor':
and
'atom-text-editor:not([mini])':
is and which one to use. I also have a package called emmet installed which is using alt-up and it always overrides what I'm trying, however I thought the keymap.cson file should override all 3rd party packages.

The mini scope
The mini scope is for single-line inputs. For example, the "Find" or "Find in Project" panels use mini editors to accept input. The not([mini]) selector excludes those, so that your binding is only used in code editor windows/panes.
In this specific case, in practice it probably doesn't matter a lot, as the mini editors won't do anything with page-up or page-down anyway. But in general, I think it is better to scope the key bindings correctly instead of just making it global. It's a good habit.
Selectors
You already have a good selector (atom-text-editor:not([mini])). In the comments you asked what other selectors are (in particular, atom-workspace and ::shadow). I don't have a great explanation of ::shadow but you might read a bit including here.
atom-text-editor is scoped to, as you'd expect, text editor panes. Whereas atom-workspace is a bit wider scope: it is scoped to the entire window, which might include things like the tree view, tabs, status bars, etc.
The ingredients of a key binding
In order to make a key binding, you need three things:
A selector to apply the binding to a certain scope. You already have that, as it was in your question text. atom-text-editor:not([mini])
The key binding to use. You can find those in Atom's documentation. In this case, we need to use alt-up and alt-down.
The Atom command to point each key binding to.
How to find Atom commands
Using the Command Palette
Every Atom command should be available in the Command Palette (CmdShiftP). In your case, you can trigger the palette and search for something like "page".
You can see two matching commands, "Core: Page Up" and "Core: Page Down". To turn these into usable commands, you reformat them like so:
Remove the space after the colon
Replace spaces with hyphens
Lowercase everything
That leaves you with core:page-up and core:page-down.
Using the Key Binding Resolver
In some cases, you want to take a command already mapped to a key, and map it to another key. In those cases you can locate the command using Atom's Key Binding Resolver.
Activate the resolver by pressing Cmd.. This will open a panel at the bottom of your window and tell you what command each keypress is tied to. Pressing PageUp or PageDown will point you to the core:page-up and core:page-down commands.
Press Cmd. again to deactivate the Key Binding Resolver.
Adding your keymap
In Atom's preferences, you can click "Open Config Folder" to open a new editor window with the config folder loaded. Open the keymap.cson file to add your new keymap.
'atom-text-editor:not([mini])':
'alt-up': 'core:page-up'
'alt-down': 'core:page-down'
Save the file and your keymap should go into effect immediately.

To add new keybindings open the your ~/.atom/config.cson, and your own binding using example
'atom-text-editor':
'ctrl-alt-b': 'atom-beautify:beautify-editor'

Related

How to programmatically insert an Ember component into a div?

I am trying to figure out a way to use Ember components as a view template for tooltips. Let me explain this:
I am supposed to create a library to show tooltips in Ember. The content of this tooltip is unknown. It might be very complex or it might be a simple text. The developer is the one who will decide it but the library must offer a way to do it easily. Also, I want to offer this solution in the format of an Ember modifier so that the developer would code it something like:
<div {{tooltip foo bar}}>
Hello World
</div>
As the modifier offers a reference to its element it is easy to use the good old JS to create elements and append them to this element. For a simple text it works like a charm and I was able to do it already as shown in the example below, but for complex component it's better to create a component and show it inside the tooltip's container.
// tooltip.js
import { modifier } from 'ember-modifier';
import { isPresent } from '#ember/utils'
export default modifier(function tooltip(element) {
const content = document.createElement('span')
content.append('Hi, I am the tooltip\'s text')
element.append(content)
});
The problem starts when you want to build a complex view, specially if it's supposed to contain some logic associated.
What I thought is that I could programmatically insert Ember components into the element that is passed as the argument of the modifier function. I can't use the dynamic component helper ({{component}}) as it infers that I have to mess with .hbs files more than what I am doing already and I can't approach it using the tooltip as a component; I need it to be a modifier.
I looked into this solution here but it doesn't seem to work in Ember 3.8.
Can anybody give me a clue on how do make it happen?
I am using Ember 3.8 and Ember Modifier#1.0.5
You could use the same technique that either of these use:
https://github.com/NullVoxPopuli/ember-popperjs
https://github.com/CrowdStrike/ember-velcro
They allow for "any content tooltips" by using an external library (popper or floating-ui, depending -- these are important though, because positioning is hard).
The gist is the following:
modifier on the "reference" / "hook" element (what you hover over)
modifier on the "target" / "popover" / "loop" element
some code that communicates between the two modifiers to wait until both are present before rendering the tooltip in the correct location / position.
The key part missing from your original code is that you need two modifiers -- tooltips with complex content are not possible with a single modifier (unless you manually manage element references).
For ember 3.8, I don't know how much you'll be able to do.
Ember 3.28 is the oldest LTS supported now and is passed its last bugfixes date, and it will step receiving security patches in January -- see: https://emberjs.com/releases/lts/
you may be able to use 2 global modifiers and a service to communicate between them -- but I don't know how that would work when you attempt to have multiple tooltips / popovers on the screen at the same time.
The minimum ember version you need to use the two addons linked above is 3.27.
Personally, it's well worth the upgrade, as staying up to date is generally easier than leap frogging years at a time (because you have the community doing upgrades with you) -- and shiny stuff is fun :)

How to allow double click selection of strings with - in them, within Atom?

Say I have a string like 'cheap-module-inline-source-map' in the following:
In Atom, I want to be able to just double click that string to select the entire string. However it only let's me select the words I click on.
I did find the following in Settings > Editor:
Originally it was /\()"':,.;<>~!##$%^&*|+=[]{}?-…
I removed the - however this did not fix the issue.
You have already looked at the global settings (under "Editor"), but many settings (including this one) appear in the various packages so that you can customize things per syntax.
This setting seems to exist in both language-javascript and language-babel, and perhaps you have other Javascript packages that have it (there are many of them out there...)
If you navigate to...
Settings
Packages
search for "javascript" or "babel"
click "Settings" on the package
Then you will find a "Grammar" settings section in most syntax packages. This is the one from language-javascript.
As you can see it has a copy of the Non-Word Characters setting. You can set this explicitly, though I would have expected it to inherit from the global value.
language-babel has this too, though you need to scroll down a bit further to find it.

Tern doesn't go to definition in Eclipse

I'm using Tern IDE 0.9 for Javascript on Eclipse 4.4 in windows.
When pressing on a function with CTRL + Click, instead of going to definition it opens a window and asks me if i want to choose
Open an editor on the selected
Tern - go to definition
When choosing the second option, it doesn't do anything.
On a clean Eclipse without any plugins except the Tern IDE, it works.
Can anyone assist?
You have two commands both bound to the Ctrl+Click key stroke.
Open the Preferences and look in 'General > Keys' for the clashing commands. You can click on the 'Binding' column to sort by the binding which should help to find the clash.
Change one of the clashing bindings to something else to remove the issue.

How to enable code assist for the DOM for JavaScript projects in Eclipse

How can I simply get in this little popup (code completion) all possible methods/functions given when I type window.(blablabla).
Because if I type window. there is no "event" method for example.
In NuSphere there are all methods been listed.
Please differentiate between JavaScript and DOM code assist. There are many questions/answers here about this but it's ambiguous which of these two they refer to. None, I've seen, particularly claims to have found a solution for DOM and most mentions Aptana as standalone IDE or Eclipse plugin for solution.
For reasons outside the scope of this question I use Eclipse Indigo (3.7.2) and got this working w/o Aptana. This solution probably depends on the JavaScript Development Tools plugin.
First in the Navigator pane right click the project and hover the Configure option. Select Convert to JavaScript project or Add JavaScript Support.
Open project properties and a JavaScript item should appear in the left hand side list of configuration options. Expand and select Include Path. In the Libraries tab on the right you will see ECMA Script and ECMA 3 Browser Support. Switch to the Global Supertype tab and tick the ECAM 3 Browser Support checkbox. Restart Eclipse.
--
However in my case this last option didn't seem to work (when selected 'window' as global supertype, below the list got 'Window() null') and window. didn't bring results but document. and all other JS globals did. (So I could say for e.g. var w = document.defaultVeiw; and w. did bring up desired list.)

Mark a position in eclipse text editor?

I have two questions:
While editing a source file, it's very convenient to be able to label the current position of cursor and then jump to it later by somehow calling that label. I VIM, there is the marking notion, but I'm not aware of such possibility in Eclipse text editor.
Is there any way in Eclipse to add a portion of the code to the outline window, such that you can easily jump to that part when you click on it? I know that for java source-code, almost all variables and functions are shown there, but what if I have a html/javascript code, in which I'm using jquery functions, and the outline doesn't show these functions.
Any help is appreciated!
I dont have any direct answers for your question.
May be you are looking for the following eclipse features.
Eclipse supports bookmarks, you may use that feature. Also CTRL + Q will go back to the last edited location.
You may be able to get this using the Mylyn, which is packaged along with eclipse by default. Implements the notion of a Task focussed IDE ( RECOMMENDED)

Categories