Medium-editor: Internal Model Representation of the Editor Content

[mkhatib]

Medium Engineering wrote a great article on things they considered when implementing Medium Editor. One of the things that resonated with me is having an internal model representation of the content itself. Given that model, the editor would be able to render the content perfectly as described with the JSON-like model.

Any plans on moving toward a model like that? This becomes needed when you want to annotate and add meta data and start allowing embeds without having to store all the HTML and DOM elements behind it.

[steoo]

+1. I guess that if ths component would implement a model representation it will be perfect. Another issue is how to save the text costumization.

[daviferreira]

Definitely. But for now we have some more urgent stuff to solve, like modularizing files.

[butsjoh]

Once it is discussed it might be interesting to also think about collaborative editing features :) Look at https://github.com/ottypes/rich-text which is being used by some other editors (quilljs, ...)

[daviferreira]

@butsjoh that is nice, thanks :)

[butsjoh]

No problem :) I am searching for an editor that fits our requirements and believe me it is not easy :) For user experience i would choose yours + medium-editor-insert-plugin because that comes closest to the medium.com experience. On the other had we want to be future ready and think about adding collaborative editing to the mix which is a completely different world :(

[axelson]

+1

[nmielnik]

I am actively investigating building a rich-text editing system that is based on a JSON model behind the scenes that renders consistent HTML markup. If I'm able to get enough of a proof-of-concept working, I'll open it up for help and contributions either via here or another repo.

[mkhatib]

I also started playing around with the idea of building an editor with JSON model under cover, it's still early on but have a demo here. The code needs some cleanup and refactoring, I was also working on the inline-formatting but still haven't gotten much done there - block formatting works though.

You can see the git repo that I am playing with here.

[daviferreira]

@mkhatib really cool!

[nmielnik]

Yes @mkhatib this is pretty awesome. You're taking a different approach to building the JSON representation of the DOM which is great so we can compare our approaches and learn from eachother.

Looks like I need to get what I'm working on available for others to look at as well. I'll let you know once it's shared out.

[nmielnik]

@mkhatib One thing I used to get a nice visualization of the JSON structure is this: http://philogb.github.io/jit/

It took a bit of trial and error, but now I'm able to get a nice compact, visualization of the data model while the text is being edited.

[nmielnik]

@mkhatib the github repo we're working with is here if you wanted to check it out and give any feedback / collaborate as well.

Your code is in a much better working state, as we don't really have any command support as of yet (bold, italic, and underline kind of work)...I'm still trying to work out how to make sure the JSON data structure is valid as the user modifies text.

[nelsonpecora]

My coworker and I wrote a little library that handles a few use cases (splitting and merging tags, changing certain tags to other tags, etc). We're using it as our text model, and hooking it up to the medium-editor paste/etc events. It's on npm if you want to check it out!

[sielay]

Hi. Have you looked into model of ProseMirror. I like their model, but hate way editor is built. I may start doing mapper between your editor and this model (as it may turn out I will need it), but before, I wanted to check, if anyone tried to do it already.

Example from working project (my bio ;))

{
    "type": "doc",
    "content": [
        {
            "type": "paragraph",
            "content": [
                {
                    "type": "text",
                    "text": "“Do or do not, there is no try” is my life theme. Passionate about R&D, reverse engineering, early adaptation and prototyping. Worked so far with Time Inc., Nokia, Wayn.com and more. I speak Polish, Russian and English, but can pick up German, Ukrainian or Belarusian as well. I love history and totally random facts and would play bass, sail or cycle, if only I had more time. I'm also known to come out with a  Monty Python or Tolkien reference, when you expect it least."
                }
            ]
        }
    ]
}

[nmielnik]

@sielay we would definitely love to have any kind of data model backing the editor so we can stop relying on how the browser handles html formatting. I haven't looked into the source code of ProseMirror to see the actual implementation, I just know it's backed by a data model which is definitely the best way to go.

I tried to get something started but ran out of time and momentum: https://github.com/yabwe/words

https://github.com/manshar/carbon was another data model based editor that I've been following (created by @mkhatib who opened this issue originally)

If you were looking try to build a data model for the underlying text editing in medium-editor, I'd be willing and excited to help out as much as possible.

[sielay]

Thanks @nmielnik will discuss with team and let know. Both words and carbon looks interesting (and are there). In case of picking them I'd have to consider migration on my side.

[nmielnik]

@sielay Just to be forthcoming, words is not close to a state where it would be usable as full editor. The only code that's there is something that responds to when the user has typed and represents the text in a tree-like JSON structure. It hasn't dealt with actually rendering formatted html yet.

I'm not sure about the full status of carbon, but I know it's much further along than words.