Assessment: Cross-platform mobile/desktop

[Fmstrat]

Hi everyone,

I'm considering diving back into this app (well, into NextNote, back into ownNote I guess), specifically to take on a ground-up App focused on Android/iOS/Windows/OSX/Linux based off some other framework development I've completed.

It was never possible to reliably port the original ownNote Android app over to iOS, and since it's development things have changed, both from a UX and design standpoint, and I believe some new plugins and options exist allowing for a complete full cross-platform app.

I had considered going the route of Joplin and making it full external with sync via WebDav, but the progress I see here from sharing/etc make me think working with the new API makes sense.

I'll be considering the below issues (as well as original ownNote Mobile feedback) as I build out the framework, and will likely step away from TinyMCE and try something new (that still has the same feature sets):

• API Draft: API Draft #11
• Implement stylus support: Implement stylus support #69
• iOS mobile feedback: iOS mobile feedback #101

I'm starting this issue to get feedback on considerations for elements such as the WYSIWYG editor to use, required features (beyond existing ownNote Mobile app), etc.

Thanks.

[Fmstrat]

Reserved for considerations:

• WYSIWYG
  • Froala, requires licensing: https://github.com/froala/wysiwyg-editor
  • To investigate: https://alternativeto.net/software/froala/?license=opensource
  • AlloyEditor (Had investigated CKEditor previously with mixed results due to UI but great compatibility with TinyMCE features. This is the same infrastructure with new front end so it could be viable, but needs a mobile workaround for toolbars): https://alloyeditor.com/
  • To investigate: https://github.com/dandv/comparisons/blob/master/JavaScript-WYSIWYG-editors.md
  • Need to test latest TinyMCE - Mobile mode doesn't work in ionic. May have found a custom way to handle inline mode.
• Terminal client?

[ThomasDaheim]

Sounds great! Amazing, that there is no single, usable WYSIWYG editor out there that covers all requirements.

Let me start with my editor wishlist:

• WYSIWYG with option to view source html, edit source html would be nice too :-)
• Drag & drop from to Clipboards for text & images
• Table-Support
• Syntax highlight

[Fmstrat]

Well, as I've investigated further, so far there hasn't been one. However, when I originally created ownNote, iOS 9 was the defacto standard. We are on 11 now, and it's possible with some tweaks to TinyMCE in Mobile/inline mode I might be able to get things working on iOS 10 and up. I need to do some more testing, but if so I can always contribute my mods to their repository to make this easier for others in the future.

Froala also looks promising, but the licensing requirement is keeping it off my list for now.

[Fmstrat]

OK. I think TinyMCE is going to work. I am likely going to have to build a completely custom toolbar due to a "tap" issue using inline mode, but scrolling works, which is the part that has always caused problems in the past. This is good news. I already have a prototype running in the iOS emulator with a hard coded note.

[jancborchardt]

Since you mention Joplin – they do offer sync with Nextcloud, so doesn’t it make sense to integrate with them? Then you can just make use of their apps. Doing everything newly would be a bit of a waste of resources – better collaborate. :) https://joplin.cozic.net/

[Fmstrat]

@jancborchardt I had considered this, however, they are a very different solution. First, there's the cross platform nature. While I applaud the way the developer has built so much natively, it would be very hard for me to maintain updates to stay in line with Nextcloud server. It's file based, and like with ownNote I'm shooting for an internal database structure for full integration (sharing/new features/etc) with little clutter. I.E. something that's really for Nextcloud, not something that is for every sharing service.

Lastly, and more importantly, Joplin is really built for the tech crowd. It's markup, and you edit in markup, not WYSIWYG. This makes things difficult when serving a user-centered environment. This is VERY challenging for iOS in a cross-platform environment. When I built ownNote, it was impossible. With the latest versions of iOS I've finally found a way to do it, and while this post is new, I've been working on cracking that nut for a long time. In fact, this time around it will be developed "iOS first" (but simultaneous mobile release).

Then, there's always the fact that since I have been working on it a long time, I'm already in a prototype stage:

[emilsl93]

Just wanted to let you know that i have been using nextcloud for a few years now, and been looking for a good crossplatform WYSIWYG notes app with nextcloud sync for a good while now. it looks like this may be it. Thank you very much for all your work!

[Fmstrat]

@emilsl93 No problem! If you need something right away, the original ownNote (GitHub version, anyway) works on Nextcloud. However it is old, and the mobile Android app I created is dated and only maintained for show-stoppers. It's being phased out and replaced with Nextnote.

[Fmstrat]

So the mobile editor is 100% working now. It's really time to move on to server integration, which means API.

@brantje Would you like me to take a stab at API implementation? If so:

• How would you like me to contribute? Administrator? Administer a branch? Fork and PR?
• As a lot has changed since the original ownNote, could you link me to an example NextCloud API source code format from another app you would like me to follow?

Thanks!

[jancborchardt]

@Fmstrat just keep in mind that not everyone has an iPhone X ;)
Some design feedback:

• Note title should go in header instead of "Edit note".
• Same for Category, takes too much editing space. Put rename and category in a 3-dot-menu in the right of the header
• Check out Medium.com's context-aware formatting bar, which isn't just there all the time: Context-based formatting popover nextcloud/notes#200
• The Notes list should get full width, and each entry higher, with 1-2 lines of content displayed too. Check out Simplenote, or Nextxloud Notes for that.
• The sync icons don't need to be that present. Synced is the expected default (no icon needed), and when it's not yet synced, show the circular arrows.
• "Groups" is a strange name for non-humans. "Categories" or "Tags" is better, depending on if notes can have multiple tags.
• In the case of Tags, please also integrate with Nextclouds existing tag management.
• The status bar icons on top should be white on the blue color (currently they are black, which clashes with the other header elements)

[Fmstrat]

@jancborchardt That's great feedback, thank you!

... just keep in mind that not everyone has an iPhone X ;)

Yup! That's just the simulator I was using at the time. This is cross-platform with support for iOS >10 and Android >4.4 (so far). I'm not going to go below that for Android like I tried to do for ownNote (Man that was a pain).

Note title should go in header instead of "Edit note".
Same for Category, takes too much editing space. Put rename and category in a 3-dot-menu in the right of the header

I've considered this as well. I'll likely implement this for release, but if not it will end up that way shortly after. I've also considered a "full-screen" button at the start of the toolbar to make the editor full screen, too. Been going back and forth on it.

Check out Medium.com's context-aware formatting bar, which isn't just there all the time: nextcloud/notes#200

I investigated AlloyEditor (see 2nd post) but context-aware bars really aren't usable on mobile. There's already the built in context bar from the OS, and they conflict. There's also the cross-platform nature. It is very difficult to get a non-native WYSIWYG editor working in iOS. Since I was able to get TinyMCE to work, which makes it 100% compatible with formatting from the server, I went that route. I did have to build a totally custom horizontal sliding toolbar, but it seems to function well and takes up little space attached to the keyboard.

The Notes list should get full width, and each entry higher, with 1-2 lines of content displayed too. Check out Simplenote, or Nextxloud Notes for that.

I had thought about this with the original ownNote, too. I'm thinking of incorporating this, plus an "icon" image of the first image if there is one. This is harder with HTML based content, so will likely be a v1.1.

The sync icons don't need to be that present. Synced is the expected default (no icon needed), and when it's not yet synced, show the circular arrows.

Good point. I'll probably go back to the single animated sync icon like I used in ownNote. Probably the "bar" style the Nextcloud app uses to stay consistent.

"Groups" is a strange name for non-humans. "Categories" or "Tags" is better, depending on if notes can have multiple tags.

This is being talked about in the API thread, too. I like the idea of renaming to Categories, but am thinking we stick with categories for now because they exist and work, It's pretty clear not many of us don't have a ton of time to invest in Nextnotes, so while tagging would be way better, it can be a v2 IMO.

In the case of Tags, please also integrate with Nextclouds existing tag management.

To the extent we can, I agree. @brantje taking over this project from a server-side perspective helps a lot. I built ownNote quickly with no previous knowledge of the system, so there were some non-optimal things there. I'll probably end up doing the API so we can get it moving, but beyond that I have a feeling (and hope) that he'll be able to participate in the other features.

The status bar icons on top should be white on the blue color (currently they are black, which clashes with the other header elements)

Good catch! I hadn't even thought of the OS integration for UI.

Thanks again!

[jancborchardt]

I've also considered a "full-screen" button at the start of the toolbar to make the editor full screen, too. Been going back and forth on it.

I'd advise against it – if it's well-designed and doesn't waste space, you don't need an extra mode.

Ack on the other points. Also the toolbar, probably good call, yeah. We can always revisit. :)

Let me know if you need more design feedback on anything, I'm always happy to give feedback on flows and interactions. :)

[Fmstrat]

I'd advise against it – if it's well-designed and doesn't waste space, you don't need an extra mode.

True, true. I already moved title/group into a sub-page. ;)

[e-alfred]

Core question: Will it be Open Source?