How to include a text editor in my Nextcloud app?

💻 Development app dev
1

I’m building a Nextcloud app in which the user will sometimes need to edit a large text file stored in Nextcloud Files. I would like to make the app open the file with one of the Nextcloud text editors, preferably the default Text editor since I can assume it’s already installed, but I’m open to using the Plain Text Editor if that would work better.

Earlier I asked a related question here but now I realize this is a dev question not a user/features question. Sorry for the similar posts.

Ideally I’d like it to

  1. Handle large files. These are HLedger journal files which can have a lot f transactions and be pretty big.
  2. When the user wants to edit a specific transaction I want to open the file and put the cursor on the line for that transaction so they don’t have to search for it.
  3. I’d like to use an existing Nextcloud editor rather than re-inventing the wheel and building my own text editor.

Can either of these editors be embedded into my app so it would pop up just like when opening the file from the Files app?

1 Like
2

Hey @ryanb

Hope you are doing well…

Totally agree with you, it would be so nice to have an integration with Eclipse, Codeblocks, Sublime Text and similar apps. Imagine that!

Unfortunately, I don’t think they will be add any time soon.

My tip for you, is to try to embed those apps manually, I wish I could help you with that.

Good luck and let’s hope someone can help us with this.

Have a nice weekend friend!

:smiley:

3

I dug around more and discovered that opening the text file editor directly in my app is super easy! There is something called Viewer that does it. I suspect this is exactly what the Files app uses. There is even sample code to do it in the Readme. It worked on the first try.

Now I just need to figure out how to make it scroll to a specific line once the editor is open and I’m all set! @skjnldsv ?

2 Likes
4

Something like this seems to be in the right direction but the math doesn’t work. It overshoots and scrolls past the line I’m aiming for. :thinking:

var editor = $("#editor");
var line = 1850;
editor.get()[0].scroll(0, line * parseInt(editor.css('line-height')));
1 Like
5

This seems to work better. Instead of aiming for a specific line number, search for the text I want to scroll to, select it, and then scroll to that.

var jqeditor = $("#editor");
var editor = jqeditor.get(0);
var textnode = $("code", jqeditor).get(0);

var match = textnode.innerText.match(/The text I'm trying to scroll to/);

var range = document.createRange();
range.setStart(textnode.firstChild, match.index);
range.setEnd(textnode.firstChild, match.index + match[0].length);

var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

editor.scroll(0, range.getBoundingClientRect().top - textnode.getBoundingClientRect().top);
1 Like
6

Wow man, that was a good point.

Keep going mate, you’re a monster!

:smiley: :mechanical_arm: