@Vec I've been holding off on editor features while experimenting with different editors, but I also don't want to stagnate the current editor in the "someday I'll replace it" limbo indefinitely. I'll have to draw the line soon and decide on what to do.
The editor is definitely the hardest aspect of the Guild.
I'm currently evaluating the possibility of building a WYSIWYG editor on top of the framework that Facebook built for its own products: draftjs.org
Cons:
- It's a WYSIWYG editor meaning that it can be frustrating if its rough edges are too rough. Ever create an element like a table or a list in an editor, yet no matter how many times you press ESC or Enter, you can't get out of it?
- Seems pretty hard to allow block elements (like Quotes and Hiders) to contain other block elements like more Quotes and Hiders, at least not without a real mastery of the Draft.js framework.
- Unknown mobile-friendliness.
Pros:
- Draft.js gives me control over the undo/redo stack. This is a classic forum-editor pain point where undo either doesn't work or it messes up your post more than it undoes anything.
- It's a WYSIWYG editor meaning that you don't write BBCode by hand. You can see what your post will look like without pressing "preview". The editor buttons are more powerful and it's better able to let you toggle a style on and off by selecting an element and clicking the button.
- I can integrate it with the Guild, like have a pop-up autocomplete box when you want to @Mention somebody, or allow you to click-and-drag an image into the post which uploads it to the Guild so that the image URL never breaks.
So far I have basic inline styles working in my dev environment:
- Colors
- Fonts
- The start of a @Mention autocomplete system
I also have some basic block elements working:
- Headers: H1, H2, H3
- Alignment: Left, Center, Right
- Lists: Unordered, Ordered
And these features work pretty well so far. You can undo/redo your changes. If you put your cursor on an orange H1 block, the orange button and the H1 button light up.
But so far, while experimenting with implementing Quote and Hider blocks, it seems like a challenge to allow blocks to contain other blocks since I'm still learning. I may have to just constrain block elements (Quotes, Hiders) such that they can only contain inline styles (colors, fonts, @Mentions, maybe headers, etc). At least at the start.
Ex: I reckon clicking the Quote button on somebody's post will have to strip out all of their block elements and only show text.
I hope to get a demo up and running online so yall can check it out an tell me if it seems worth pursuing.
The editor is definitely the hardest aspect of the Guild.
I'm currently evaluating the possibility of building a WYSIWYG editor on top of the framework that Facebook built for its own products: draftjs.org
Cons:
- It's a WYSIWYG editor meaning that it can be frustrating if its rough edges are too rough. Ever create an element like a table or a list in an editor, yet no matter how many times you press ESC or Enter, you can't get out of it?
- Seems pretty hard to allow block elements (like Quotes and Hiders) to contain other block elements like more Quotes and Hiders, at least not without a real mastery of the Draft.js framework.
- Unknown mobile-friendliness.
Pros:
- Draft.js gives me control over the undo/redo stack. This is a classic forum-editor pain point where undo either doesn't work or it messes up your post more than it undoes anything.
- It's a WYSIWYG editor meaning that you don't write BBCode by hand. You can see what your post will look like without pressing "preview". The editor buttons are more powerful and it's better able to let you toggle a style on and off by selecting an element and clicking the button.
- I can integrate it with the Guild, like have a pop-up autocomplete box when you want to @Mention somebody, or allow you to click-and-drag an image into the post which uploads it to the Guild so that the image URL never breaks.
So far I have basic inline styles working in my dev environment:
- Colors
- Fonts
- The start of a @Mention autocomplete system
I also have some basic block elements working:
- Headers: H1, H2, H3
- Alignment: Left, Center, Right
- Lists: Unordered, Ordered
And these features work pretty well so far. You can undo/redo your changes. If you put your cursor on an orange H1 block, the orange button and the H1 button light up.
But so far, while experimenting with implementing Quote and Hider blocks, it seems like a challenge to allow blocks to contain other blocks since I'm still learning. I may have to just constrain block elements (Quotes, Hiders) such that they can only contain inline styles (colors, fonts, @Mentions, maybe headers, etc). At least at the start.
Ex: I reckon clicking the Quote button on somebody's post will have to strip out all of their block elements and only show text.
I hope to get a demo up and running online so yall can check it out an tell me if it seems worth pursuing.