Skip to content

Adam Hyde

  • Business
  • Personal
  • About Me
Raglan NZ, 2020
Latest posts

Tag: online text production

Think Editing Environments, not Edit Boxes

It takes a lot of expertise and time to build a good HTML editor. We have many of them out there to pick and choose from. CKEditor, TinyMCE, WMF VisualEditor, Aloha…to name a few.These are great software and are leveraged by many software projects. These editors are an extremely important part of the web. Without them, the web would be without text production. That is pretty difficult to imagine.

These HTML editors are typically dropped into an existing project to lend the project editing functionality. If you were to build a new software platform and the users need to edit text in the browser then you simply choose your favourite HTML editor and ‘drop it in’.

editor1

The editor effectively sits within, and apart from, the page. It has no relationship to anything outside of the small box-like editable surface it presents to the world and ‘the only thing it does’ is to allow the user to effect that surface. That surface specifically.

In the world of online text production this has proven a useful way of doing things and it such a dominant model it is hard to see the limitation of the approach. Seems pretty useful.

I just want to look at one assumption and pull it a little bit apart to show how this paradigm could be very limiting. The assumption we need to examine is this – when we create content using an HTML editor we believe that there is only one surface we are operating on. In effect, we assume that the surface to be written on is a single object under construction. That surface is contained explicitly within the boundaries of the dropped-in editor.

The idea is possibly easier to understand if we look at paper, which is possibly where the assumption finds its initial host. If I write on a piece of paper, I am writing on just one piece of paper. That piece of paper is a single object – a single piece of paper. Sounds a little bit ridiculously straightforward doesn’t it?

When we write on this one piece of paper, we are writing on just one surface. Not two surfaces, not three, four etc…just one.

So, this piece of paper – upon which we mark text – is a single surface under construction.

Bringing this forward a little – when we write using an HTML editor we are also, from a user’s perspective, writing on a single surface. Our surface is not a piece of paper, rather it is the area exposed by, and contained within, the bounds of the HTML editor. When we mark our text on it, we know where those marks reside. Sure they might pop up in other contexts later, when we press save and then visit another part of the website we see those words wrapped in a theme and presented as a blog post or some such. It is not the re-representation of the content in another context after it has been written that is important here. The issue we are interested in is when the object we are constructing is affecting, and affected by, other surfaces at the same time.

This is where our HTML Editor paradigm, so far, breaks down.

The above is one very simple example.

In other words, the editing surface should not be an isolated box contained by the editor, as is the current model. Edits need to break this single surface model and move towards a pattern where edits affect multiple objects contained within the page (or some other greater context).

A specific example

So, here is a very specific example taken from the world of scientific publishing. It’s easy to lose the generic point in the specific, so forgive me for being lost in some specifics as I try to illustrate something that I believe has a much wider and more generalised applicability.

In scientific publishing, the manuscript contains metadata. Information such as, for example, the ethics statement, is contained within the manuscript and it is also treated as a piece of stand-alone metadata.

In current submission systems used by scientific publishers (journals) the ethics statement will exist in two separate places – in the manuscript (as part of the narrative) and in a data field in the submission system. Since submission systems mostly manage the manuscript as an attached word file, it is very difficult to synchronise any changes made in the submission system with changes that are made in the manuscript. If, for example, the author changes the ethics statement in the word file then someone (perhaps the author, perhaps the publisher) needs to make the change again in the submission system. A very manual and error-prone process.

So, it would be very handy if the manuscript was represented in HTML, editable in HTML, and edits made in that document would be reflected in the appropriate metadata fields in the submission system.

The use case we want is this – the author changes the ethics statement in the manuscript and this change is reflected in the metadata field.

We can easily imagine systems where the manuscript and metadata are represented in the same page. In this case, what we want, is that when the manuscript is edited, the metadata is also being edited, in the same space at the same time. In other words, the author will be effectively editing two surfaces at the same time.

In the scientific world, we can imagine other cases where the metadata is represented in the manuscript as well as metadata fields in the submisison system. eg. citations, figures and figure captions, author lists etc.

Imagine, for example, a case where we have figures managed in a ‘figure gallery’ (a common pattern for HTML editors).

We may wish to be able to edit the figure caption in the gallery or the manuscript and have that change immediately reflected in both places.

This would be very useful for a single author working on a text – it means not having to make the same change twice. However, it is also easy to see that the value of this is increased when more than one person is working on the text. If author A changes the caption in the figure gallery, then author B should see that change immediately in the manuscript. Having edits synchronised like this is extremely important in collaborative environments.

Separating the editor engine from the edit box

So, having one object changed when another is being changed can be achieved in a number of ways. I have one proposal that would help solve this, it is not the only way, but I think it is a good one. It involves calling for the development of an HTML editor where the edit engine is separated from the UI – enabling the developer to leverage the power of an HTML edit engine to break out of the ‘box-like’ editing paradigm and create more interesting editing environments and editing UX.

Currently, implementing an HTML editor means the user gets the background editing engine – the mechanism that controls the edit experience, alters the text, plugin structure etc – along with the UI. There is no way to separate the two.

We need editing software that provides an edit engine but will also allow the developer to create their own front end (UI) that integrates seamlessly into the environment of the page being worked on. In this way, we can develop editing environments rather than working with the strict editing UX that comes bundled with the editing software.

This would move towards helping us to solve the problem discussed above, as well as opening the door for much more interesting approaches to editing online.

Colophon: A colophon used to be present at the back of many books to explain the publishing process. I think it’s useful to revisit this very useful practice and also to use it to supply narrative notes on how something was made to give insight into process and attribution. So… In March 2015 Adam sat down and wrote the above in two sittings using the Ghost publishing platform (free software). He then reached out to Raewyn Whyte to improve it, and also will reach out to Henrik van Leeuwen to replace the whiteboard images with nicer graphics. The ideas about separating the UI from the edit engine are directly derived from discussions with Oliver Buchtala (substance.io) when working on scholarly editing interfaces for Open Source projects.

Posted on March 28, 2015November 12, 2016Categories Uncategorized
Tags
Tags CKEditorediting environmentsHTML editor paradigmHTML editorsmetadataonline text productionsubmission systemsthe ethics statementTinyMCEVisual Editor
Leave a comment on Think Editing Environments, not Edit Boxes

Newsletter

Check your inbox or spam folder to confirm your subscription.

Recent Posts

  • Scaling
  • Some folks that have used our calendar software
  • Push Button Export to JATS
  • First Journal Article Out from Kotahi
  • Book Sprints in Mozambique

Archives

  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • June 2016
  • April 2016
  • February 2016
  • January 2016
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • April 2015
  • March 2015
  • November 2014
  • October 2014
  • September 2014
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • May 2012
  • March 2012
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • May 2011
  • April 2011
  • March 2011
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • April 2008
  • December 2007
  • November 2007
  • August 2007
  • July 2007
  • February 2007
  • January 2007
  • December 2006
  • Business
  • Personal
  • About Me
adam@coko.foundation
All posts CC-BY-SA