Multi-Region Editing in a Single Web View

[stevengharris]

Background

I have been using multiple MarkupEditorViews in a SwiftUI List. Each list entry is a model element that is held in a collection, and while I'm instantiating each model item, I am relying on the mechanics of view re-use in List to avoid creating a SwiftUI view for each one. It works pretty well, and when I have a collection of hundreds of these model objects, the list is only populating a few dozen views at a time. Scrolling is kind of okay, but I'm not sure it's ever going to be extremely smooth without my putting a lot of effort into background pre-loading and other optimizations I would rather not spend time on.

My model objects each hold HTML text that is created using the MarkupEditor, and since they appear in a List with a header that has some text and buttons in it, I can easily create an HTML page to hold the entire contents. What occurred to me while I was doing that exercise is that if MarkupEditor supported multiple contenteditable regions in a single web view, I could rely on WebKit to do a great job on assembling and scrolling the content. If I could do that, I would avoid sorting out the optimizations to make List scrolling work well with the underlying WKWebViews and their async behaviors. (I look at the smooth scrolling of the Ivory Mastodon client, imagining all the async interactions under the covers, and I'm both inspired and terrified, haha.)

Editorial note: When I say "currently" below, I'm referring to the state of main in MarkupEditor.

All MarkupEditor content resides in the editor div, which is defined in markup.html as <div id="editor" contenteditable="true" spellcheck="false" autocorrect="true"></div>. To support multiple editable regions, the editor element will need to not be contenteditable, and instead we need to introduce a new div for each editable region.

Currently the MarkupWKWebView loads a single bootstrap file - markup.html - that comes with the MarkupEditor bundle. That file identifies a stylesheet link for the markup.css (<link rel="stylesheet" type="text/css" href="markup.css">) and loads the markup.js script. To make multi-region editing work well, the user needs to provide their own CSS and potentially script. In my own scenario, I want to CSS style several types of regions, only some of which I want to be editable. For example, the headers above each of my List items today are not editable as text, while the body of each list item is a MarkupEditorView. Both the header and the editable content will need to reside within the editor div.

The current MarkupEditor uses a very restricted set of HTML and in fact strips all divs that you might want to insert into the editor div. Its use of CSS is limited to markup.css styling of the basic HTML elements, like p, h1, etc. The most daring thing it does with CSS is to support resizable images by setting the resize-image class for img elements. To support multiple editable regions (aka contenteditable divs), we need a more flexible means to couple a class/struct on the Swift side with a div on the JavaScript side, and that div needs to be stylable by the user.

Requirements

My requirements are fairly minimal, but I think even the minimal requirements open things up for more interesting ways to use the MarkupEditor. For example, I could see a kind of page template editor being turned out fairly quickly with it.

• [MUST HAVE] User-specifiable attributes for the editor div.
• [MUST HAVE] Styled divs with user-specifiable attributes, including contenteditable and non-contenteditable ones.
• [MUST HAVE] User-specifiable CSS file that can be delivered as a resource by the consuming app.
• [MUST HAVE] User-specifiable script file that can be delivered as a resource by the consuming app.
• [MUST HAVE] MarkupToolbar behaves well with multiple divs, both contenteditable and not.
• [MUST HAVE] User can create/delete JavaScript divs by id from Swift.
• [MUST HAVE] User can create/delete buttons that display in a div and call back to the Swift side when pressed.

Status

This is very much a work in progress, but it's looking good enough to expose and see if anyone has thoughts on it. The work-in-progress is on the editableAreas branch. Here's what it looks like at the moment.

Screen.Recording.2024-01-01.at.4.06.06.PM.mov

[stevengharris]

I have done a lot of work to support this idea and I am using it in a project. I have been doing this on a branch that I plan to merge soon-ish. I plan to add documentation, probably to the README but who knows prior to merge. The work to support multiple editable areas should be completely backward compatible and have no noticeable impact on anyone using the MarkupEditor. Here is the PR that merged the work: #195.