- )
+ keyBindings={this.keyBindings}
+ />
+ );
}
}
@@ -251,6 +330,45 @@ const root = createRoot(document.getElementById("container"));
root.render();
```
+# Functional component:
+
+```js
+import React, { useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MegadraftEditor, editorStateFromRaw } from "megadraft";
+
+const App = () => {
+ const [editorState, setEditorState] = useState(editorStateFromRaw(null));
+
+ const keyBindings = [
+ {
+ name: "save",
+ isKeyBound: e => e.keyCode === 83 && e.ctrlKey, // Control + S
+ action: () => onSave()
+ }
+ ];
+
+ const onSave = () => {
+ console.log("save");
+ };
+
+ const onChange = newEditorState => {
+ setEditorState(newEditorState);
+ };
+
+ return (
+
+ );
+};
+
+const root = createRoot(document.getElementById("container"));
+root.render();
+```
+
## Handling Missing Plugin (`handleBlockNotFound`)
When the `editorState` contains an atomic block that is no longer available,
@@ -258,54 +376,56 @@ an alternative block will be rendered as a fallback to indicate that the plugin
is missing.
This behavior is customizable using the `handleBlockNotFound` prop. It takes a
-[ContentBlock][ContentBlock] object and should return either of the following:
+[ContentBlock][contentblock] object and should return either of the following:
-* `null`: this will delegate the block rendering to DraftJS, resulting in an
+- `null`: this will delegate the block rendering to DraftJS, resulting in an
empty paragraph
-* a [valid plugin][plugins] with a `blockComponent` property to render the
+- a [valid plugin][plugins] with a `blockComponent` property to render the
fallback interface
-
-[ContentBlock]: https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content
+[contentblock]: https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content
[plugins]: http://globocom.github.io/megadraft/#/docs/plugins?_k=h3n0a5
The following example renders a `pre` element for the unregistered
`missing-plugin` atomic block.
+# Class component:
+
```js
import React from "react";
-import {createRoot} from "react-dom/client";
-import {MegadraftEditor, editorStateFromRaw} from "megadraft";
+import { createRoot } from "react-dom/client";
+import { MegadraftEditor, editorStateFromRaw } from "megadraft";
class App extends React.Component {
constructor(props) {
super(props);
- this.state = {editorState: editorStateFromRaw({
- entityMap: {
- },
- blocks: [
- {
- key: "8xut",
- text: "",
- type: "atomic",
- depth: 0,
- inlineStyleRanges: [],
- entityRanges: [],
- data: {
- type: "missing-plugin"
+ this.state = {
+ editorState: editorStateFromRaw({
+ entityMap: {},
+ blocks: [
+ {
+ key: "8xut",
+ text: "",
+ type: "atomic",
+ depth: 0,
+ inlineStyleRanges: [],
+ entityRanges: [],
+ data: {
+ type: "missing-plugin"
+ }
}
- }
- ]
- })};
+ ]
+ })
+ };
}
- onChange = (editorState) => {
- this.setState({editorState});
- }
+ onChange = editorState => {
+ this.setState({ editorState });
+ };
handleBlockNotFound(block) {
return {
- blockComponent: (props) => plugin not found {props.data.type}
+ blockComponent: props => plugin not found {props.data.type}
};
}
@@ -314,8 +434,9 @@ class App extends React.Component {
- )
+ handleBlockNotFound={this.handleBlockNotFound}
+ />
+ );
}
}
@@ -323,6 +444,56 @@ const root = createRoot(document.getElementById("container"));
root.render();
```
+# Functinoal component:
+
+```js
+import React, { useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MegadraftEditor, editorStateFromRaw } from "megadraft";
+
+const App = () => {
+ const initialEditorState = editorStateFromRaw({
+ entityMap: {},
+ blocks: [
+ {
+ key: "8xut",
+ text: "",
+ type: "atomic",
+ depth: 0,
+ inlineStyleRanges: [],
+ entityRanges: [],
+ data: {
+ type: "missing-plugin"
+ }
+ }
+ ]
+ });
+
+ const [editorState, setEditorState] = useState(initialEditorState);
+
+ const onChange = newEditorState => {
+ setEditorState(newEditorState);
+ };
+
+ const handleBlockNotFound = block => {
+ return {
+ blockComponent: props => plugin not found {props.data.type}
+ };
+ };
+
+ return (
+
+ );
+};
+
+const root = createRoot(document.getElementById("container"));
+root.render();
+```
+
### Handling too many plugins
By default, plugin buttons are shown on a vertical sidebar. This may be a bit
@@ -341,6 +512,8 @@ on the sidebar.
You can set the width and height of modal via props too. Passing the prop
`modalOptions`, see below. Default values are `width:528` and `height:393`.
+# Class component:
+
```js
import React from "react";
import {createRoot} from "react-dom/client";
@@ -373,6 +546,36 @@ const root = createRoot(document.getElementById("container"));
root.render();
```
+# Functional component:
+
+```js
+import React, { useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MegadraftEditor, editorStateFromRaw } from "megadraft";
+
+const App = () => {
+ const [editorState, setEditorState] = useState(editorStateFromRaw(null));
+ const maxSidebarButtons = 3;
+ const modalOptions = { width: 528, height: 393 };
+
+ const onChange = newEditorState => {
+ setEditorState(newEditorState);
+ };
+
+ return (
+
+ );
+};
+
+const root = createRoot(document.getElementById("container"));
+root.render();
+```
+
[api-reference-editor-state]: https://facebook.github.io/draft-js/docs/api-reference-editor-state.html
[custom actions]: https://github.com/globocom/megadraft/blob/master/src/actions/default.js
[i18n-strings]: https://github.com/globocom/megadraft/blob/master/src/i18n.js