Can't type after adding a card

[willrax]

Hey 👋

Unsure if this is a misunderstanding on my behalf or if I'm missing something. I've created a card that adds a tweet (through iframely). After the card is added theres an extra paragraph appended to it. If I try to type nothing happens, only after I've hit enter and started a new <p> section can I keep typing.

You can recreate this on the demo site using the image card.

http://bustle.github.io/mobiledoc-kit/demo/

Scroll to the image card example. Add the image card and try to type. Is there anything I could do?

My next step was to try and see if i could append a <p> section after the card but i feel like this would still be confusing to have the cursor visible and not be able to type.

Any ideas UX or code wise would be appreciated.

[apfelbox]

I have the same issue.

[delay]

Did anyone figure out a solution to this problem?

[kevinansfield]

We have a "card selected" state so it may not fit your use case exactly but you can use the cursorDidChange event to detect the cursor being immediately before/after a card - https://github.com/TryGhost/Ghost-Admin/blob/master/lib/koenig-editor/addon/components/koenig-editor.js#L703-L723

It should be fairly straightforward to adjust that code to place the cursor in the previous/next paragraph (creating one if needed) if that better fits your needs. You may also have to add handling for specific operations such as inserting a card section or replacing a section with a card section depending on how you're setting the range.

[melosomelo]

a bit late but I have a rough solution: editor.insertCard("my-card"); editor.run((postEditor) => { postEditor.insertSection(psn.createMarkupSection()); })

where psn is an instance of the class PostNodeBuilder (a default class that is available for creating Post Primitives, such as sections).

this made manually placing my cursor possible for me. I think that you can add a bit of logic from here so that it becomes automatic when you add any card.

[gpoitch]

After calling insertCard you can do:

editor.run(postEditor => {
  const section = postEditor.builder.createMarkupSection()
  postEditor.insertSectionBefore(editor.post.sections, section, editor.activeSection.next)
  postEditor.setRange(section.toRange())
})

I added this functionality to the demo: https://github.com/bustle/mobiledoc-kit/commit/8b7e1c9b6ba722ae15e937a46dc7c95d55b9bc0b#diff-2a4c93128b41e630e8f475d886bfd6ceaf3798eeebe0ce2bde151d6fd4ea8a20R72-R77

I did start a PR to add this as an editor option but since this is already possible with public api I shelved it for now.