react-brandywine-editor
A WYSIWYG-like block editor for creating blogging content.
- easily customizable (see plugins)
- separate read/edit exports
- serializes to a JSON data structure
Demo
- Standalone editor
- Live blog using read mode with data produced with this library
Setup
npm install --save react-brandywine-editor
The library comes with two entry points that can be imported separately.
- Read mode for static rendering:
import { BrandywineReader } from react-bradywine-editor/src/read-mode/index
- Editor mode:
import { BrandywineEditor } from react-bradywine-editor/src/edit-mode/index
The only dependency listed is prop-types
. If your project intends to use editor mode, the peer dependencies are required:
npm install @material-ui/core@^4.9.5 styled-components@^5.0.0 react@16.x react-redux@^7.2.0 redux@^4.0 bootstrap@^4.4.1 immer@^6.0.0 uuid@^7.0.1
The library ships with a set of pre-written plugins. If you want to use them, note they have dependencies on bootstrap CSS and styled-components. Some of them also have other peer dependencies:
- Carousel:
npm install react-slick@^0.25.2
slick-carousel@^1.8.1
- HTMLVideo:
npm install react-visibility-sensor@^5.1.1
- Markdown:
npm install react-markdown@^4.3.1
See the demo src/ for an example.
API
Taken from user-prop-types.js.
/** * Applicable for <BrandywineEditor />, edit mode */const editorPropTypes = /** * Function receiving two arguments: 1. header, 2. blocks, whose shape is described * below under the pageData prop */ onChange: PropTypesfunc /** * If readOnly = false, controls the sidebar/canvas height CSS property. * true: 100vh, false: 100% * Default: false */ fullHeight: PropTypesbool /** * Whether or not to show descriptive text beside plugins in editor mode * default: true */ showPluginDescription: PropTypesbool /** * Used to generate blocks on the canvas. Note it's an array of element types, not elements */ plugins: PropTypesisRequired /** * Default editor data loaded on initialization */ pageData: PropTypes /** * Applicable for <BrandywineReader />, readonly mode */const readModePropTypes = /** * Optional React element to be rendered in between the page header and the block content */ customContent: PropTypeselement // subset of editor props pageData: editorPropTypespageDataisRequired plugins: editorPropTypesplugins // isRequired already