react-brandywine-editor
v3.0.13
Published
A React WYSIWYG block editor for creating blogging content
Downloads
90
Maintainers
Readme
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 [email protected] 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: PropTypes.func,
/**
* If readOnly = false, controls the sidebar/canvas height CSS property.
* true: 100vh, false: 100%
* Default: false
*/
fullHeight: PropTypes.bool,
/**
* Whether or not to show descriptive text beside plugins in editor mode
* default: true
*/
showPluginDescription: PropTypes.bool,
/**
* Used to generate blocks on the canvas. Note it's an array of element types, not elements
*/
plugins: PropTypes.arrayOf(PropTypes.shape({
// ... see /docs/plugins.md, or use of one default shipped plugins in /src/plugins/
})).isRequired,
/**
* Default editor data loaded on initialization
*/
pageData: PropTypes.exact({
header: PropTypes.exact({
title: PropTypes.string,
subTitle: PropTypes.string,
displayDate1: PropTypes.string, // dates: yyyy-mm-dd format
displayDate2: PropTypes.string
}),
// The header and blocks properties are the same as the arguments
// supplied to the onChange prop
blocks: PropTypes.arrayOf(PropTypes.exact({
name: PropTypes.string.isRequired,
baseAttrs: PropTypes.object,
variation: PropTypes.string,
variationAttrs: PropTypes.object
}))
})
}
/**
* Applicable for <BrandywineReader />, readonly mode
*/
const readModePropTypes = {
/**
* Optional React element to be rendered in between the page header and the block content
*/
customContent: PropTypes.element,
// subset of editor props
pageData: editorPropTypes.pageData.isRequired,
plugins: editorPropTypes.plugins, // isRequired already
}