I need help for a Vim integration via Firenvim

[Kabluv 1]

Hello everyone, I hope this is the correct area of the forums to ask this question.

I really love learning and using Vim for editing text, and also I love taking notes with Evernote.
Having a Vim integration in Evernote is because of understandable reasons (accessibility, niche feature) rather unlikely, so I did some research for a solution to this. There is this really handy open source plugin for Neovim and Chrome/Firefox, called Firenvim on GitHub, which allows creating an instance of Neovim in place of the text input box of several websites. What it basically does is creating an overlay above the text input box which is Neovim, and after saving and exiting the text input, everything written will be put into the text box.

While this works flawlessly here in the forums, it does not in Evernote web.
As glacambre, the creator of Firenvim pointed out, to make Firenvim run in Evernote web:

Quote

You need to figure out what HTML element Firenvim should take over [...]. Once you've chosen an element, you need to find a uniquely-identifying CSS selector for it and tell firenvim to use it as described [in the documentation].

Now, as I have very little to no experience about HTML and CSS, I would like to ask if you (Evernote) could help me, and probably others to find what is required to get this running? I'm pretty sure more people would be interested in Evernote, if there was a way to use Vim controls, so I think this could be a good way to get some more happy users.

I would love to hearing back from you

[gazumped 11,697]

Hi.  Sadly,  we're not Evernote.  We are mainly other users here and if you need that sort of information,  you (or the developer) really need to talk to Evernote direct.  AFAIK Evernote notes aren't 'normal' html,  though it's possible to copy and paste into them.

[mackid1993 754]

Use the developer tools in your browser to find the CSS class used by the editor element. It looks like the id en-note may be a starting point. The id may be better as it's specific to the note editor whereas a class can be used in many places. The HTML element you'd want looks to be custom to Evernote. It's:

<en-note>

[Kabluv 1]

21 hours ago, mackid1993 said:

Use the developer tools in your browser to find the CSS class used by the editor element. It looks like the id en-note may be a starting point. The id may be better as it's specific to the note editor whereas a class can be used in many places. The HTML element you'd want looks to be custom to Evernote. It's:

<en-note>

Thank you so much for your help! 
I wouldn't have been able to get this running without your help.

It took me a while to figure out how to make this work, but I'm very happy to share my code, which simply must be placed inside the init.lua:

vim.g.firenvim_config = {
    localSettings ={
        ['https://www.evernote.com/'] = { 
            selector = "en-note",
            takeover = "always"
        }
    }
}

 

Once again, thank you for your kind help!

[mackid1993 754]

Glad it worked.

[Dave-in-Decatur 3,971]

Wow. That was impressive. @mackid1993, any chance of a really simple explanation of what it was?

[mackid1993 754]

9 minutes ago, Dave-in-Decatur said:

Wow. That was impressive. @mackid1993, any chance of a really simple explanation of what it was?

It's just the CSS selector used on the element for the note editor. The same name is actually also used for the element too, they seem to use en-note in a couple of places for different things. With a webapp anything frontend like that can be (easily depending on skill) found with the inspector tools in the browser.

One part of my job is some very basic web development, I'm kind of a jack of all trades master of none but web development is part of that for me.