How can we improve the writing flow and its stability?

[youknowriad]

There are several open issues discussing the writing flow and the breaks happening when writing/navigating between the Post title and the blocks. Also, the current implementation is kind of dispatched across different components but not very well organized, we can't easily track what's happening. It feels "fragile".

Current State

So our current state (pseudo-code) is something close to this:

const state = { post, blocks, isTyping };

const Editor() {
  return (
    <Layout>
      <PostTitle />
      <PostContentBlocks />
    </Layout>
  );
}

Inside these components we do some hacks to navigate from blocks to post-title using arrows but we're not consistent, the opposite is not possible because this would mean, we'd have to duplicate logic across components.

We also can't ensure a continuous writing flow easily between PostTitle and The content (Pressing enter in the title should create an empty text block, clicking backspace should remove the empty text block and move back to the title)

I think we should bring some organisation into this to allow these features (and more). Not sure exactly how, but our current code is not scalable properly.

Proposal

Maybe something like this:

const state = { post, blocks };

const Editor() {
  return (
    <Layout>
      <WritingFlow>
         <WritingZone id="title">
            <PostTitle />
         </WritingZone>
         <WritingZone id="content">
            <PostContentBlocks />
         </WritingZone>
      </WritingFlow> 
    </Layout>
  );
}

What's all this? There're two main concepts:

The writing flow:

• A WritingFlow component declaring a new "writing flow" and keeping its state.
• A WritingZone component declaring a new "writing zone" inside the parent "WritingFlow".

These two components should monitor Arrow/Enter/Backspace clicks inside each writing zone and focus the right writing zone accordingly (focus the first or the last tabbable inside these zones according to the key pressed)

Maybe also a helper HigherOrderComponent could be called monitorSelection tracking if the activeElement is inside the wrapped component and providing things like isSelected, isTyping...

cc @iseulde @aduth

[aduth]

It's not clear to me the purpose of the WritingZone, if already the WritingFlow needs to be able to handle transitioning focus between multiple descendant inputs. Can you clarify its intent?

[youknowriad]

It's not clear to me the purpose of the WritingZone

To be honest, It's not clear to me either. My thinking is whether we should make the "zones" explicit to allow extra markup not handled by the WritingFlow. Also, maybe just gives an identifier to the area. In my first PR #2424 It was not necessary. so maybe it's useless.