Enable codefold


(Samantha Zhang) #7

No I mean running the code above in the console right away doesn’t work anymore …

(Takuya Matsuyama) #8

Did you load the CSS file?
You may have other problem because I checked that it works as expected on the current version.
I didn’t change anything regarding the editor in the last release, so it should work.

(Samantha Zhang) #9

Kk, I tried again and yes putting it directly in the inspector still works.

Not sure why as a plugin it’s still not working :frowning:

I put it on a repo: https://github.com/moyicat/inkdrop-code-fold

(Takuya Matsuyama) #10

Please describe me what’s going wrong such as errors you’ve got in detail as possible so that I can help you.

Okay, below code won’t work because unfortunately plugins can’t access to the app’s node_modules folder.

import foldCode from 'codemirror/addon/fold/foldcode'
import foldGutter from 'codemirror/addon/fold/foldgutter'
import foldMd from 'codemirror/addon/fold/markdown-fold.js'

So you have to include these files in your plugins.
Hope that helps.

(Samantha Zhang) #11

Hey I tried to clean up the code a little bit as I don’t quite understand how babel works.
And I also included CodeMirror

However, it looks like the required() function is still not working.

When I console.log() from code-fold.js L23, the options are set correctly

However, going into the generated HTML

You can see the HTML for .CodeMirror-linenumber are there, but .CodeMirror-foldmarker aren’t.

What should I change there to make it work?

(Takuya Matsuyama) #12

Okay, I’ll look into it next week.

(Samantha Zhang) #13

Thanks so much!

(Takuya Matsuyama) #14


I looked into your code.

If you looked into the addons, you find that they require CodeMirror at <your_plugin>/node_modules/codemirror/lib/codemirror but they get a CodeMirror class object different from Inkdrop’s one because it is a module in a different path.
So the addons are being installed to another CodeMirror.
That’s why it doesn’t work.

A workaround would be to import the modules from the app’s node_module in order for the addons to use the same CodeMirror class object, like so:

const app = require('electron').remote.app;
const modulePath = app.getAppPath() + '/node_modules/'
require(modulePath + 'codemirror/addon/fold/foldcode.js');
require(modulePath + 'codemirror/addon/fold/foldgutter.js');
require(modulePath + 'codemirror/addon/fold/markdown-fold.js');

And please remove the dependency on ‘codemirror’ from your package.json.
I confirmed it works.
Hope that helps!

(Takuya Matsuyama) #15

I documented this to the docs. Thanks!


(Samantha Zhang) #16

Yey! Made the changes and published it as a plugin! :muscle: Thanks so much!

(Takuya Matsuyama) #17



Could it have a screenshot in the description so that people can understand the plugin? :slight_smile:

(Samantha Zhang) #18

Added :slight_smile:

(Takuya Matsuyama) #19

Thank you, Samantha!

(Samantha Zhang) #20

Hey craftzdog,

I’m trying to improve the plugin by adding foldAll() and unfoldAll() functionalities, but I couldn’t get keymaps to work right: https://github.com/moyicat/inkdrop-code-fold/commit/7d88da28f90ceffd68555d916cc174581efd1e9b

What am I missing there? Can you help? Thanks!

(Takuya Matsuyama) #21

Hi Samantha,

Hm, it looks nice but I guess the command name should be codefold:fold-all / codefold:unfold-all.
Maybe export-print plugin would be helpful as an example.

I think the command is only triggered while you are on the editor, so it’d be better if selectors for keymaps are like:

  ".platform-darwin .CodeMirror": {
    "cmd-r": "codefold:fold-all",
    "cmd-t": "codefold:unfold-all"
  ".platform-linux .CodeMirror": {
    "ctrl-r": "codefold:fold-all",
    "ctrl-t": "codefold:unfold-all"
  ".platform-win32 .CodeMirror": {
    "ctrl-r": "codefold:fold-all",
    "ctrl-t": "codefold:unfold-all"

And I guess cmd-r and cmd-t are kind of too general key combination because it’s often used for reloading, running, compiling, tabs, etc.
So other key combination would be nice like cmd-shift-o / cmd-shift-u.

Hope that helps!

(Samantha Zhang) #22

Made an update: https://github.com/moyicat/inkdrop-code-fold/commit/e7f1d9cbe356a1eafebf7a3c9c31c71581abc805

But I’m still not seeing keymap here:

(Takuya Matsuyama) #23


Thanks for the information.
I tried your plugin and found that keybindings are correctly loaded:

But there are two problems.

First, you should name commands starting with code-fold: which is your exact plugin name. Because the app tries to find commands that start with "<your plugin name>:" on your plugin detail screen. So please rename from codefold:fold-all to code-fold:fold-all.

Second, I found a bug that keybindings on the plugin screen doesn’t show them correctly if a selector has a platform. I’ll fix it in the next release!

Thanks again.

(Samantha Zhang) #24

Gotcha! Updated and published a new version :slight_smile:

(Takuya Matsuyama) #25

Great! And v3.20.2 has resolved the second issue. Thanks again!

(Yuko Otawara) #26

It’s cool plugin! Thanks!