Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: New Mobiledoc Editor #7429

Closed
ErisDS opened this issue Sep 23, 2016 · 7 comments

Comments

@ErisDS
Copy link
Member

commented Sep 23, 2016

The Ghost editor is based on a 3 year old split-screen markdown-editing concept, which is now somewhat long-in-the-tooth. Modern WYSIWYG editors like Quip, Draft, Editorially or Dropbox's Paper have shown what can be achieved when you leave old-style WYSIWYG behind... and it's awesome 🎉

The 3 key problem areas with the current editor are:

  • our markdown parser is buggy and limited (markdown itself is limited).
  • split-screen doesn't provide a great UX, especially on longer documents and restricts our screen space for adding editorial tools.
  • The current editor is not customisable or configurable.

These 3 issues are the fundamental problems that we are want to address by refreshing the editor. However, when we look closely at the existing editor, there's a deeper set of problems. We feel we've outground both markdown-only and the split-screen concepts. Markdown-only is limiting in terms of features and exclusive in terms of users. The split-screen is flawed and takes up insane amounts of screen real-estate that could (and should) be used for more advanced editorial features.

The future is Mobiledoc

Moving forward, we want to build ourselves an editor for the future. We want to support more advanced editorial features out-of-the-box, whilst also enabling users to customise the editor to suit their specific use cases. To do all this, we need an underlying editor technology that will support us all the way form a basic editing surface through to customisations and collaboration.

After reviewing the editor technologies that are around, we settled on experimenting with an editor based on mobiledoc kit.

Mobiledoc is not an editor itself, it is a document format for article-style content. Mobiledoc-kit solves the fundamental problem of browser editors: the fact that the HTML you interact with when editing in the browser is different to the HTML that will be output when your content is viewed.

Mobiledoc also has a built-in concept of extensible "cards" or blocks of content. Each card has 3 conceptual parts: the stored content, the interface for editing the content, and the renderer for outputting the content. This feature allows us to create a simple way to extend our editor with all manner of layout & embed features.

In addition to all this, Mobiledoc has an amazing team behind it. It's built to work for Ember, by people who are also part of the Ember core team. It's being sponsored by Bustle, who are already using it in production. We're excited to be able to get involved, and help champion this new technology as the way forward for web-based editors.

The initial plan 😁

Building a whole new editor is going to take time and patience to get perfect. That's part of the reason that we're currently shipping weekly alphas. The first iteration of the editor is coming in alpha 2, and by the time we ship Ghost 1.0, we're hoping to have the following features:

  • A single-pane WYSIWYG editor space that supports all the features of mobiledoc, which will include a toolbar, unlike our existing editor. Mobiledoc covers basic text formatting like bold and italic, making them available using keyboard shortcuts, markdown syntax or the toolbar, depending on your preference. Mobiledoc should provide everything you need for long-form editorial writing.
  • An HTML card, which allows for embeds and writing full-HTML to format your text when mobiledoc is not enough. This is the ultimate fall-back card, and will allow you to add anything from fancy pull-quotes to fully interactive graphs to your posts.
  • An image card, for easy uploading of one or more images. This will also provide support for basic layout options, captions, and eventually more advanced features like slideshows.
  • The markdown card, for those of you who still love markdown 😍 This will also be used to provide some backwards compatibility with content from the old editor.

As well as these individual cards we'll be ensuring that all the peripheral behaviours work as well as possible, including editing, undo/redo behaviour, keyboard shortcuts, the toolbar, dragging and dropping cards, adding more markdown-style formatting command, using notion-style / commands to add cards and tonnes more details that you'll only notice if they're not right 😉

The initial version of this editor will be landing in alpha, without backwards compatibility. Over the next few weeks, we will be iterating on the editor, adding more features, polishing the UI and eventually implementing basic backwards compatibility.

This first phase is largely an experiment. Attempting to lay foundations for advanced tools and customisations, setting up the building blocks that will see us long into the future. Along side this, we will be adding tooling around images for handling optimisations and serving different sizes. The possibilities for advanced tooling are pretty much endless once we've got these basic pieces in place. We're also aiming for crazy levels of customisation, with custom cards, templates and other configurable options, however we don't expect to ship these in full until after Ghost 1.0.

@nuclearpengy

This comment has been minimized.

Copy link

commented Sep 23, 2016

This sounds like an immense amount of work. :)

Keen to see how it all works out. I love the current editor from a simplicity perspective but can understand that it might be a bit intimidating to non-markdown fanatics and that to be future ready things need to change.

kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Sep 26, 2016

Mobile-Doc based editor (#291)
refs TryGhost/Ghost#7429, requires TryGhost/Ghost#7437

Added Ghost-Editor (based on mobiled doc).
-------------------
- Added mobiledoc editor
- Fixed problems with workflow and auto saves
- Integrated basic toolbar
- Removed all editor related tests, everything bar the most basic acceptance tests will be in the ghost-editor repository.
- Commented out tests which relied on Ember Helpers that are not compatable with mobile-doc, workarounds are inbound shortly.

This is the first integration of ghost-editor. It's styled enough to work, however it is not anywhere approaching something that looks remotely like what the finished thing will be.

Early ALPHA, development build. Tread cautiously.

kirrg001 added a commit that referenced this issue Sep 26, 2016

[WIP] Mobile-Doc based renderer (#7437)
Refs #7429

Added mobile-doc renderer

------------

- Added generic mobiledoc-renderer
- Kept the existing showdown editor for legacy mode.

@kirrg001 kirrg001 removed this from the 1.0.0-alpha.2 milestone Sep 26, 2016

kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Oct 3, 2016

Update Ghost-Editor to 0.0.8 (#299)
refs TryGhost/Ghost#7429

Ghost Editor includes:
- Responsive toolbars
- Both Ember and Plain javascript cards
- An embeded HTML card

This is still an early release, but things are moving in the right direction. :)

We're still defining the spec for the UI, so expect drastic changes over the next couple of weeks.

This is going to be a great writing experience and we can't wait to show what we have planned.

kevinansfield added a commit that referenced this issue Oct 3, 2016

Update Ghost Editor to 0.0.8 #7429 (#7474)
This release includes:

    Ghost Editor, this is required to get access to the built in cards

Ghost Editor includes:

    Responsive toolbars 🔨 🔧
    Both Ember and Plain javascript cards 🎴
    An embeded HTML card ✍️

This is still an early release, but things are moving in the right direction. :)

We're still defining the spec for the UI, so expect drastic changes over the next couple of weeks.

This is going to be a great writing experience and we can't wait to show what we have planned.
@vickychijwani

This comment has been minimized.

Copy link
Member

commented Oct 6, 2016

Just curious: will Ghost 1.0 be able to deal with Markdown extras like fenced code blocks and footnotes?

@disordinary

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2016

@vickychijwani at this stage there is no plan to upgrade markdown support beyond what's currently supported by Ghost.

@vickychijwani

This comment has been minimized.

Copy link
Member

commented Oct 7, 2016

@disordinary Ghost does support those features currently: https://help.ghost.org/hc/en-us/articles/224410728-Markdown-Guide. Basically I'm trying to understand if my old posts using those features will break after upgrading to 1.0.

@ErisDS

This comment has been minimized.

Copy link
Member Author

commented Oct 7, 2016

@vickychijwani the new editor will use mobiledoc, not markdown. The plan for the markdown card is that it will match the current editor.

Obviously EVERYONE is going to need a way to migrate their content, but there will not be a normal upgrade path from LTS to v1.0. We haven't 100% decided how we're going to handle migrations at this point, but that is not a point for discussion on this issue ;) Have a read of https://dev.ghost.org/lts/ and if you have more questions please swing by slack.

disordinary added a commit to disordinary/Ghost that referenced this issue Oct 10, 2016

Upgraded editor
refs TryGhost#7429

Finally it's starting to feel like a real editor, although there will be another version bump over the weekend which improves the toolbar behaviour and usability, and enables image uploading.

- Added the start of a new toolbar, what we're (well I am) calling the Owesome bar, not to be confused with the Firefox Awesome bar. It's a cultural thing. (google "O for awesome").
- The idea of dragging and dropping cards has been removed for now, although the code will still be in there as we will support dragging cards around fairly shortly. When apps are included a better card interface will be required for a larger amount of app created content cards (Oh yeah!)
- Ghost Server now pulls in it's configuration from Ghost-Editor, this allows Ghost-Editor to a) keep cards up to date, and b) define what happens if a card is missing.
- The whole cards in admin written in ember and cards in server written in javascript thing is still very much a work in progress, it's kind of messy as we find the optimum solution (which isn't the current sollution).

So yeah, this is a WIP not the final styling, not the final interactions, not the final anything... :)

disordinary added a commit to disordinary/Ghost that referenced this issue Oct 10, 2016

refs TryGhost#7429
Adds a new mobile doc editor which has:
- A new toolbar
- Basic image uploading capability

madfrog2047 added a commit to madfrog2047/Ghost that referenced this issue Nov 20, 2016

[WIP] Mobile-Doc based renderer (TryGhost#7437)
Refs TryGhost#7429

Added mobile-doc renderer

------------

- Added generic mobiledoc-renderer
- Kept the existing showdown editor for legacy mode.

madfrog2047 added a commit to madfrog2047/Ghost that referenced this issue Nov 20, 2016

Update Ghost Editor to 0.0.8 TryGhost#7429 (TryGhost#7474)
This release includes:

    Ghost Editor, this is required to get access to the built in cards

Ghost Editor includes:

    Responsive toolbars 🔨 🔧
    Both Ember and Plain javascript cards 🎴
    An embeded HTML card ✍️

This is still an early release, but things are moving in the right direction. :)

We're still defining the spec for the UI, so expect drastic changes over the next couple of weeks.

This is going to be a great writing experience and we can't wait to show what we have planned.

madfrog2047 added a commit to madfrog2047/Ghost that referenced this issue Nov 20, 2016

Upgraded editor (TryGhost#7516)
refs TryGhost#7429

Finally it's starting to feel like a real editor, although there will be another version bump over the weekend which improves the toolbar behaviour and usability, and enables image uploading.

- Added the start of a new toolbar, what we're (well I am) calling the Owesome bar, not to be confused with the Firefox Awesome bar. It's a cultural thing. (google "O for awesome").
- The idea of dragging and dropping cards has been removed for now, although the code will still be in there as we will support dragging cards around fairly shortly. When apps are included a better card interface will be required for a larger amount of app created content cards (Oh yeah!)
- Ghost Server now pulls in it's configuration from Ghost-Editor, this allows Ghost-Editor to a) keep cards up to date, and b) define what happens if a card is missing.
- The whole cards in admin written in ember and cards in server written in javascript thing is still very much a work in progress, it's kind of messy as we find the optimum solution (which isn't the current sollution).

So yeah, this is a WIP not the final styling, not the final interactions, not the final anything... :)

Adds a new mobile doc editor which has:
- A new toolbar
- Basic image uploading capability

madfrog2047 added a commit to madfrog2047/Ghost that referenced this issue Nov 20, 2016

Markdown card (TryGhost#7568)
Refs TryGhost#7429
- Added mobiledoc card, this uses the mobiledoc editor from within Ghost. In the future we'll pull this out and replace it with a textarea as the preview is too small to fit in the content.
- Made the HTML editor a codemirror editor (pulled in from ghost-admin to save duplicating libraries).
- Ghost-Admin now passes the paths for the ghost-api and the image directory for tools.
- Fixed the scrolling issue.
@ebauger

This comment has been minimized.

Copy link

commented Dec 12, 2016

It's just an ideal. I just see this prototype UI from producthunt.com and look simple and effective.

https://bold.io/

@disordinary

This comment has been minimized.

Copy link
Contributor

commented Dec 12, 2016

Thanks for the link @ebauger, it's always interesting to see new editors out there and how they've solved the various problems. They usually validate what we're trying to do.

We are definitely going for a minimalist but intuitive interface similar to bold. The idea is for the UI to get out of the way when you don't need it but always be there when you do. It's a balancing act because we're looking at a much more feature rich and extendable experience than some of the others.

disordinary added a commit to TryGhost/Ghost-Admin that referenced this issue Mar 14, 2017

👯 ♥️ ♣️ ♦️ ♠️ Card Menu:
Adds new "card" menus to ghost-admin.i
- Navigation with keyboard in both axis.
- Search with keyboard in both menus.
- Adds a "+" Menu for cards
- Adds a "/" Menu for cards
	- if the block has content and it becomes a markdown or HTML Embed card then the content is included into the card.
	- Image and HR cards appear below the current section

Adds new toolbar with both inline and block styling.

Adds a new 'divider' card.

Refs: TryGhost/Ghost#8106
Refs: TryGhost/Ghost#7429

Requires: TryGhost/Ghost#8137

disordinary added a commit to disordinary/Ghost-Admin that referenced this issue Mar 14, 2017

👯 ♥️ ♣️ ♦️ ♠️ Card Menu:
Adds new "card" menus to ghost-admin.i
- Navigation with keyboard in both axis.
- Search with keyboard in both menus.
- Adds a "+" Menu for cards
- Adds a "/" Menu for cards
	- if the block has content and it becomes a markdown or HTML Embed card then the content is included into the card.
	- Image and HR cards appear below the current section

Adds new toolbar with both inline and block styling.

Adds a new 'divider' card.

Refs: TryGhost/Ghost#8106
Refs: TryGhost/Ghost#7429

Requires: TryGhost/Ghost#8137
@disordinary disordinary referenced this issue Mar 14, 2017
0 of 3 tasks complete

kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Mar 14, 2017

👯 ♥️ ♣️ ♦️ ♠️ New editor card menu (#580)
refs TryGhost/Ghost#8106, TryGhost/Ghost#7429, requires TryGhost/Ghost#8137

-Adds new "card" menus
  - Navigation with keyboard in both axis.
  - Search with keyboard in both menus.
  - Adds a "+" Menu for cards
  - Adds a "/" Menu for cards
    - if the block has content and it becomes a markdown or HTML Embed card then the content is included into the card.
    - Image and HR cards appear below the current section
- Adds new toolbar with both inline and block styling.
- Adds a new 'divider' card.

kevinansfield added a commit to disordinary/Ghost that referenced this issue Mar 14, 2017

Removed dependency on Ghost-Editor
Refs TryGhost#7429

☢️ 👷🏻‍♀️ This PR removes the dependency on Ghost-Editor and replaces it with the Mobiledoc DOM renderer. It includes new DOM based default cards and atoms.

kevinansfield added a commit that referenced this issue Mar 14, 2017

Removed ghost editor dependency (#8137)
refs #7429
- ☢️ 👷🏻‍♀️ This PR removes the dependency on Ghost-Editor and replaces it with the Mobiledoc DOM renderer. It includes new DOM based default cards and atoms.

@kirrg001 kirrg001 added the later label May 12, 2017

@kirrg001 kirrg001 removed the in progress label Jun 23, 2017

@ErisDS ErisDS removed later labels Jan 23, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.