feat(stories): modernize stories code, fix draft-js-plugins#1464 (dra…

…ft-js-plugins#1465)
ynnelson · Sep 2, 2020 · d8d07f0 · d8d07f0
1 parent 78357aa
commit d8d07f0
Show file tree

Hide file tree

Showing 38 changed files with 1,664 additions and 1,621 deletions.
diff --git a/draft-js-sticker-plugin/src/StickerSelect/index.js b/draft-js-sticker-plugin/src/StickerSelect/index.js
@@ -62,6 +62,7 @@ export default class StickerSelect extends Component {
 
   // Add a sticker to the editor
   add = id => {
+    // TODO - review this approach
     const { editor } = this.props;
     editor.onChange(addSticker(editor.state.editorState, id));
   };

diff --git a/stories/adding-images/src/App.js b/stories/adding-images/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useRef, useState } from 'react';
 
 import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
 
@@ -10,41 +10,42 @@ import editorStyles from './editorStyles.css';
 const imagePlugin = createImagePlugin();
 const plugins = [imagePlugin];
 
-const text = 'Click on the + button below and insert "/images/canada-landscape-small.jpg" to add the landscape image. Alternativly you can use any image url on the web.';
+const text =
+  'Click on the + button below and insert "/images/canada-landscape-small.jpg" to add the landscape image. Alternativly you can use any image url on the web.';
 
-export default class CustomImageEditor extends Component {
+const CustomImageEditor = () => {
+  const [editorState, setEditorState] = useState(
+    createEditorStateWithText(text)
+  );
+  const editor = useRef();
 
-  state = {
-    editorState: createEditorStateWithText(text),
+  const onChange = value => {
+    setEditorState(value);
   };
 
-  onChange = (editorState) => {
-    this.setState({
-      editorState,
-    });
+  const focus = () => {
+    editor.current.focus();
   };
 
-  focus = () => {
-    this.editor.focus();
-  };
-
-  render() {
-    return (
-      <div>
-        <div className={editorStyles.editor} onClick={this.focus}>
-          <Editor
-            editorState={this.state.editorState}
-            onChange={this.onChange}
-            plugins={plugins}
-            ref={(element) => { this.editor = element; }}
-          />
-        </div>
-        <ImageAdd
-          editorState={this.state.editorState}
-          onChange={this.onChange}
-          modifier={imagePlugin.addImage}
+  return (
+    <div>
+      <div className={editorStyles.editor} onClick={focus}>
+        <Editor
+          editorState={editorState}
+          onChange={onChange}
+          plugins={plugins}
+          ref={element => {
+            editor.current = element;
+          }}
         />
       </div>
-    );
-  }
-}
+      <ImageAdd
+        editorState={editorState}
+        onChange={onChange}
+        modifier={imagePlugin.addImage}
+      />
+    </div>
+  );
+};
+
+export default CustomImageEditor;
diff --git a/stories/adding-video/src/App.js b/stories/adding-video/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useRef, useState } from 'react';
 import { EditorState } from 'draft-js';
 import Editor from 'draft-js-plugins-editor';
 import createVideoPlugin from 'draft-js-video-plugin';
@@ -9,41 +9,37 @@ const videoPlugin = createVideoPlugin();
 
 const plugins = [videoPlugin];
 
-export default class CustomVideoEditor extends Component {
+const CustomVideoEditor = () => {
+  const [editorState, setEditorState] = useState(EditorState.createEmpty());
+  const editor = useRef();
 
-  state = {
-    editorState: EditorState.createEmpty(),
+  const onChange = value => {
+    setEditorState(value);
   };
 
-  onChange = (editorState) => {
-    this.setState({
-      editorState,
-    });
+  const focus = () => {
+    editor.current.focus();
   };
 
-  focus = () => {
-    this.editor.focus();
-  };
-
-  render() {
-    return (
-      <div>
-        <div className={editorStyles.editor} onClick={this.focus} >
-          <Editor
-            editorState={this.state.editorState}
-            onChange={this.onChange}
-            plugins={plugins}
-            ref={(element) => {
-              this.editor = element;
-            }}
-          />
-        </div>
-        <VideoAdd
-          editorState={this.state.editorState}
-          onChange={this.onChange}
-          modifier={videoPlugin.addVideo}
+  return (
+    <div>
+      <div className={editorStyles.editor} onClick={focus}>
+        <Editor
+          editorState={editorState}
+          onChange={onChange}
+          plugins={plugins}
+          ref={element => {
+            editor.current = element;
+          }}
         />
       </div>
-    );
-  }
-}
+      <VideoAdd
+        editorState={editorState}
+        onChange={onChange}
+        modifier={videoPlugin.addVideo}
+      />
+    </div>
+  );
+};
+
+export default CustomVideoEditor;
diff --git a/stories/align-drag-focus-and-resize-images/src/App.js b/stories/align-drag-focus-and-resize-images/src/App.js
@@ -1,8 +1,5 @@
-import React, { Component } from 'react';
-import {
-  convertFromRaw,
-  EditorState,
-} from 'draft-js';
+import React, { useRef, useState } from 'react';
+import { convertFromRaw, EditorState } from 'draft-js';
 
 import Editor, { composeDecorators } from 'draft-js-plugins-editor';
 import createImagePlugin from 'draft-js-image-plugin';
@@ -31,81 +28,88 @@ const plugins = [
   focusPlugin,
   alignmentPlugin,
   resizeablePlugin,
-  imagePlugin
+  imagePlugin,
 ];
 
 /* eslint-disable */
 const initialState = {
-    "entityMap": {
-        "0": {
-            "type": "IMAGE",
-            "mutability": "IMMUTABLE",
-            "data": {
-                "src": "/images/canada-landscape-small.jpg"
-            }
-        }
+  entityMap: {
+    '0': {
+      type: 'IMAGE',
+      mutability: 'IMMUTABLE',
+      data: {
+        src: '/images/canada-landscape-small.jpg',
+      },
     },
-    "blocks": [{
-        "key": "9gm3s",
-        "text": "You can have images in your text field. This is a very rudimentary example, but you can enhance the image plugin with resizing, focus or alignment plugins.",
-        "type": "unstyled",
-        "depth": 0,
-        "inlineStyleRanges": [],
-        "entityRanges": [],
-        "data": {}
-    }, {
-        "key": "ov7r",
-        "text": " ",
-        "type": "atomic",
-        "depth": 0,
-        "inlineStyleRanges": [],
-        "entityRanges": [{
-            "offset": 0,
-            "length": 1,
-            "key": 0
-        }],
-        "data": {}
-    }, {
-        "key": "e23a8",
-        "text": "See advanced examples further down …",
-        "type": "unstyled",
-        "depth": 0,
-        "inlineStyleRanges": [],
-        "entityRanges": [],
-        "data": {}
-    }]
+  },
+  blocks: [
+    {
+      key: '9gm3s',
+      text:
+        'You can have images in your text field. This is a very rudimentary example, but you can enhance the image plugin with resizing, focus or alignment plugins.',
+      type: 'unstyled',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {},
+    },
+    {
+      key: 'ov7r',
+      text: ' ',
+      type: 'atomic',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [
+        {
+          offset: 0,
+          length: 1,
+          key: 0,
+        },
+      ],
+      data: {},
+    },
+    {
+      key: 'e23a8',
+      text: 'See advanced examples further down …',
+      type: 'unstyled',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {},
+    },
+  ],
 };
 /* eslint-enable */
 
-export default class CustomImageEditor extends Component {
+const CustomImageEditor = () => {
+  const [editorState, setEditorState] = useState(
+    EditorState.createWithContent(convertFromRaw(initialState))
+  );
+  const editor = useRef();
 
-  state = {
-    editorState: EditorState.createWithContent(convertFromRaw(initialState)),
+  const onChange = value => {
+    setEditorState(value);
   };
 
-  onChange = (editorState) => {
-    this.setState({
-      editorState,
-    });
+  const focus = () => {
+    editor.current.focus();
   };
 
-  focus = () => {
-    this.editor.focus();
-  };
-
-  render() {
-    return (
-      <div>
-        <div className={editorStyles.editor} onClick={this.focus}>
-          <Editor
-            editorState={this.state.editorState}
-            onChange={this.onChange}
-            plugins={plugins}
-            ref={(element) => { this.editor = element; }}
-          />
-          <AlignmentTool />
-        </div>
+  return (
+    <div>
+      <div className={editorStyles.editor} onClick={focus}>
+        <Editor
+          editorState={editorState}
+          onChange={onChange}
+          plugins={plugins}
+          ref={element => {
+            editor.current = element;
+          }}
+        />
+        <AlignmentTool />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+export default CustomImageEditor;