Vim mode plugin

craftzdog · September 11, 2017, 6:43am

Original post:

Christopher_Collier · September 20, 2017, 1:01pm

Hi, @craftzdog I noticed a new version of Inkdrop has been released. I’m wondering if the change you mentioned to allow for vim support is included. Thanks, Chris

craftzdog · September 20, 2017, 1:21pm

Hi!

Yes, you can enable vim keybindings with following code:

require('codemirror/keymap/vim')
var cm = inkdrop.getActiveEditor().codeMirror
cm.setOption('keyMap', 'vim')

But it conflicts default Inkdrop keybindings, so there’re still some tasks to do.
At the moment, you need to disable keybindings such as editor:go-char-left, editor:go-line-up, etc.
I included vim support to the next roadmap.

craftzdog · October 2, 2017, 7:26am

Finally available!

https://app.inkdrop.info/plugins/vim

Thanks @Christopher_Collier

skipadu · June 24, 2020, 10:01am

Feature request for the vim-plugin:

Would be nice to have some statusline setting to show it all the time. So that I will know which mode (in addition to cursor) I’m in and column/row, location percentage etc.
Support for relative line numbering
Some quick toolbarbutton/shortcut to switch plugin on/off

These of course are not so much required but might add some more value. So through some setting, that it is not enabled by default to not disturb existing users.
I might try to implement these at sometime, but currently having hard to find time for anything else than my blog-project at nights

And are there some other that might be useful to others?

craftzdog · June 25, 2020, 5:15am

Regarding relative line numbers, I found a snippet to accomplish it:

It does not rely on vim itself.
It looks simple to create a separate plugin for that feature.

Adding a toolbar button is easy. Here is an example code:

github.com

inkdropapp/layout-example-plugin/blob/master/lib/layout-example-editor-toolbar-button.js

'use babel'

import * as React from 'react'

export default function LayoutExampleEditorToolbarButton() {
  return (
    <a
      title="Custom Toolbar Button"
      className="layout-example editor-toolbar-button fa fa-flask"
    />
  )
}

export const componentName = LayoutExampleEditorToolbarButton.name

const layoutName = 'editor-toolbar'

export function toggle() {
  const isVisible =
    inkdrop.layouts.indexOfComponentInLayout(layoutName, componentName) >= 0

This file has been truncated. show original

But as you may know, I’m working on refurbishing the UI. So, please note that it will have a breaking change on this.

Hope that helps!

skipadu · June 25, 2020, 6:57am

Thanks @craftzdog for those links!

I can take a better look of implementing few of these after the UI is refurbished.