11th July 2025

Moving. Forwards. Slowly.

As a result of my focusing on work which I actually get paid to do, Orsn development has been slower in recent months: nevertheless it has been edging forwards.

I've been working on inline toolbars and menus in the ProseMirror text editor, which I'm integrating into version 2 of Orsn. I started with a 'mentions' inline menu for creating previewable links to other content in the app. It's triggered by the '@' key:

I then moved on to menus for text formatting and inserting other kinds of content.

Creating inline toolbars and menus for the ProseMirror text editor has been time-consuming, and somewhat complicated, mainly because of the need to integrate ProseMirror into the Javascript Vue framework which I'm using to build Orsn. ProseMirror is designed to interact with the browser's document object model (DOM) directly, adding and removing interface elements as required. Vue, on the other hand, allows for a certain level of abstraction which make it easier to update sections of page content dynamically, keeping visualised content in sync with stored data models. When making popup menu elements for the ProseMirror text editor in Orsn, I had to learn and make sense of the PM way of doing things, and find a way to reconcile that with the Vue way of doing things — hopefully in a way which results in the best of both worlds.

As usual, getting into the details of using these menu features raised questions about usability and best user experience. Much of the time I devoted to this phase of development was spent on implementing the triggering and manipulation of menus using keyboard shortcuts, as I try to support a keyboard-centric workflow for speed and convenience.

A significant question for a web app is whether to offer right-mouse contextual menus. This was not traditionally approved of but is becoming increasingly common in web apps (as opposed to web sites). Orsn will be usable as a desktop app as well as a web resource, which makes the question a vexed one. For now, I have avoided contextual mouse menus and gone for key-triggered contextual menus instead:

@ key opens 'mentions' menu for linking to other internal resources such as cards, pages, people
Forward slash key opens main actions menu
Hash key opens actions menu with header options only
Selecting any text by mouse or keyboard opens a formatting toolbar

Some wheels had to be reinvented with this approach. For example, if the cursor in the text editor is on the right hand of the screen, the actions menu has to display its dropdowns in a right-to-left direction rather than a left-to-right one, and the left and right arrow key actions need to be swapped, when moving between menu items:

Such details emerge just when you think you're about done. It's true that when making something, the last 20% takes 80% of the development time. More or less. In the end, the functionality is taken for granted by the user, when they have seen similar features in other apps, and they perhaps only notice it when it doesn't work, or is unintuitive. But that's OK. As a developer I still get a kick out of making these things work.

Now that Orsn v2 has the infrastructure in place for text editor menus, additional menu options and menu functionality can be added as required. So it's time to make progress with other features.

Slowly.

Contact

Find me on the fediverse (Mastodon) @Lemmy@post.lurk.org, or send an email to: info [at] orsn.io