Progress on our story editor

#1

I’ve taken our current story editor and plugged it into a Codesandbox project so everyone can see some of the progress we’re making and start giving feedback and ideas for improvements. Before you dive in, here are a few notes:

  • This is and always will be a work in progress. We’ve still got a lot of iterating to do before launch.
  • Stories don’t save in this demo so please don’t write a novel for 2.0 expecting it to save.
  • The editor isn’t currently mobile friendly. You’ll need a browser that’s at least 1000px wide so things don’t get smashed.
  • I removed the image uploading functionality because we’re limited in our trial version of Filestack. In this version if you try to insert an image, it plugs in a random image.
  • Adding a code block isn’t complete. It just plugs in a random chunk of JS.
  • The modal for the link adding/editing functionality isn’t in yet so it’s a basic browser dialog.
  • We’re using SlateJS to power the editor in case you’re curious.

Enough disclaimers! Check out the Hacker Noon story editor v0.1 and let us know what you think.

5 Likes

#2

First of all, I love the practice of delivering an unpolished concept, warts and all, to early adopters!

Positive:

  • Actual code snippets as a first-class feature is great!
  • The vision for visual simplicity seems to be on par with that other platform that starts with an “M”

Negative:

  • The formatting buttons are surrounded by a lot of un-clickable space (UX)
    1. Enter text
    2. Highlight some of that text
    3. Observe the formatting menu
    4. Pass mouse from the left-most to right-most button
    5. Observe the large un-clickable margins between buttons
  • The cursor seems to disappear when focussing on non-text content (UX)
    1. Enter multiple paragraphs of text
    2. Add an empty line between paragraphs
    3. Click the (+) icon in the margin
    4. Click the option to create a divider
    5. Observe the newly created divider followed by an empty line
    6. Press
    7. Observe that the empty line and the cursor disappear
    8. Observe that in this state new text CANNOT be entered
    9. Press or
    10. Observe that the cursor reappears
    11. Observe that in this state new text CAN be entered

Questions:

  • Will we have Subtitle support?
  • Will we have multiple levels of headers?
1 Like

#3

Great feedback! The button fixes should be easy. I believe I’ve also seen some behavior related to your disappearing cursor bug. I’ve got a mental list of bugs/quirks related to inserting media so the next version should be much cleaner.

Yes. We are planning on adding subtitles. Are you primarily interested in a subtitle below the main title or are you looking for more options to delineate sections?

I assume this means h1, h2, h3… Currently I only have an h1 option. I’d like to add an h2 but our default icon set (material) doesn’t have a good h1 and h2 option. I’m thinking about either moving away from material or adding a few custom icons to fill the gaps. Ideally I think we should try and keep the number of options pretty minimal.

1 Like

#4

Also, really glad you’re into seeing early concepts. We’ve got a handful of other early concepts to show in the next few days. I’d love to make this a regular practice going forward. Starting off with a scrappy proof of concept and iterating with the team/community is something I really believe in.

3 Likes

#5

1 Like

#6

Looking clean! :grin:

1 Like