search

Listoka / bittoka

4 stars 1 forks source link

Editor Refactor #173

Closed robbyphillips closed 5 years ago

robbyphillips commented 5 years ago

This refactors the editor page to make use of the draft-js plugins enabled editor. We currently only use the inline toolbar, anchor, and word count plugins, but for the next milestone, we should be able to implement the medium style side toolbar for inserting image and video content.

Styling all these components is currently pretty tedious, as they are not all accessible in the same way. For the editor and plugins we need to use css modules, and these can be found in the client/src/components/PostEditor/themes directory.

The mechanism for applying styles to the blocks of the editor (block quote, code block, etc) is found in the client/src/components/PostEditor/blockStyleFn.js file. This function is used by the editor to apply a set of css classes to a matching block.

Additionally, we can use styleMap.js in the same folder to override the inline styles that the editor uses like BOLD or ITALIC. This file is currently not used, but if we need to overwrite the default styles, we can do it there.

Finally, the additional post settings like selecting the category, tags, and writing the teaser have been moved off the main editor page and into a modal that can be accessed from a menu on the editor page.

(Side note: this menu itself is currently very basic, and really just there to flesh out the funtionality. I highly recommend that this menu is pulled out into its own component and styled into something that can collapse out of the way when not needed.)

robbyphillips commented 5 years ago

This should be pretty much ready to go. We still need some styles as mentioned in the first comment on this pull request, but the actual functionality is there.