Enable codefold

🦄Features
1

Not sure why this wouldn’t work :frowning:

require('codemirror/addon/fold/foldcode');
require('codemirror/addon/fold/foldgutter');
var cm = inkdrop.getActiveEditor().codeMirror;
cm.setOption('foldGutter', true);
cm.setOption('gutters', ['CodeMirror-foldgutter']);
2

Hi Samantha,

I guess you use the addons wrong way according to the demo: https://codemirror.net/demo/folding.html
The correct way would be:

require('codemirror/addon/fold/foldcode');
require('codemirror/addon/fold/foldgutter');
require('codemirror/addon/fold/markdown-fold.js');
var cm = inkdrop.getActiveEditor().codeMirror;
cm.setOption('foldGutter', true);
cm.setOption('gutters', ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]);

And please don’t forget to load the addon/fold/foldgutter.css file.

3

Yey! ^ this is working, but then how can I fit it into the React structure? Got confused about what’s available and what’s not in Inkdrop …

Maybe worth adding those to the “Customizing the Editor” doc (or I can help once I know how to do it!)

4

Great!
You don’t need a React component for this use case because CodeMirror isn’t React-based component.

The spell checker plugin would be helpful to learn how to make a plugin that customizes the editor:

Yeah, adding such information to the documentation is nice!
I would appreciate your contribution :wink:

5

Did you make any changes to this in the latest update? It’s not working any more :frowning:

6

You have to run above every time you launch the app.
So I recommend you to make it as a plugin.

7

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

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.

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

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.

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
consolelog

However, going into the generated HTML

17%20PM
17%20PM850×245 49.2 KB

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

What should I change there to make it work?

12

Okay, I’ll look into it next week.

13

Thanks so much!

14

Hi,

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!

15

I documented this to the docs. Thanks!

https://doc.inkdrop.info/manual/customizing-the-editor

16

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

1 Like
17

Great!

https://app.inkdrop.info/plugins/code-fold

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

18

Added :slight_smile:

19

Cool.
Thank you, Samantha!

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!