Adds iframed editor example (#1879)

Summary: **Summary** Adds an iframed editor example to Draft.js based on haikyuu's CodeSandbox demo https://codesandbox.io/s/y0q1q281kz **Test Plan** ``` git clone claudiopro/draft-js . cd draft-js git checkout iframe-example python3 -m http.server 8000 open http://localhost:8000/examples/draft-0-10-0/iframe/iframe.html ``` <img width="1072" alt="screen shot 2018-09-24 at 4 23 24 pm" src="https://user-images.githubusercontent.com/860099/45957816-396c1c00-c016-11e8-9808-c4453ff6c4ff.png"> Pull Request resolved: #1879 Differential Revision: D10194094 fbshipit-source-id: 0beabd7b890fbc31acdc84a780d6e91ca1de31a4
facebookarchive · Oct 4, 2018 · 8d5cbbe · 8d5cbbe
1 parent 6ba124c
commit 8d5cbbe
Showing 1 changed file with 292 additions and 0 deletions.
diff --git a/examples/draft-0-10-0/iframe/iframe.html b/examples/draft-0-10-0/iframe/iframe.html
@@ -0,0 +1,292 @@
+<!--
+Copyright (c) 2013-present, Facebook, Inc. All rights reserved.
+
+This file provided by Facebook is for non-commercial testing and evaluation
+purposes only. Facebook reserves all rights not expressly granted.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Draft • Iframed Editor</title>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script src="../../../node_modules/react/umd/react.development.js"></script>
+    <script src="../../../node_modules/react-dom/umd/react-dom.development.js"></script>
+    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
+    <script src="../../../node_modules/es6-shim/es6-shim.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
+    <script src="../../../dist/Draft.js"></script>
+    <script type="text/babel">
+      'use strict';
+
+      const {Editor, EditorState, RichUtils, getDefaultKeyBinding} = Draft;
+
+      class IframedEditorExample extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = {editorState: EditorState.createEmpty()};
+
+          this.focus = () => this.refs.editor.focus();
+          this.onChange = (editorState) => this.setState({editorState});
+
+          this.handleKeyCommand = this._handleKeyCommand.bind(this);
+          this.mapKeyToEditorCommand = this._mapKeyToEditorCommand.bind(this);
+          this.toggleBlockType = this._toggleBlockType.bind(this);
+          this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
+        }
+
+        _handleKeyCommand(command, editorState) {
+          const newState = RichUtils.handleKeyCommand(editorState, command);
+          if (newState) {
+            this.onChange(newState);
+            return true;
+          }
+          return false;
+        }
+
+        _mapKeyToEditorCommand(e) {
+          if (e.keyCode === 9 /* TAB */) {
+            const newEditorState = RichUtils.onTab(
+              e,
+              this.state.editorState,
+              4, /* maxDepth */
+            );
+            if (newEditorState !== this.state.editorState) {
+              this.onChange(newEditorState);
+            }
+            return;
+          }
+          return getDefaultKeyBinding(e);
+        }
+
+        _toggleBlockType(blockType) {
+          this.onChange(
+            RichUtils.toggleBlockType(
+              this.state.editorState,
+              blockType
+            )
+          );
+        }
+
+        _toggleInlineStyle(inlineStyle) {
+          this.onChange(
+            RichUtils.toggleInlineStyle(
+              this.state.editorState,
+              inlineStyle
+            )
+          );
+        }
+
+        render() {
+          const {editorState} = this.state;
+
+          // If the user changes block type before entering any text, we can
+          // either style the placeholder or hide it. Let's just hide it now.
+          let className = 'RichEditor-editor';
+          var contentState = editorState.getCurrentContent();
+          if (!contentState.hasText()) {
+            if (contentState.getBlockMap().first().getType() !== 'unstyled') {
+              className += ' RichEditor-hidePlaceholder';
+            }
+          }
+
+          return (
+            <Frame
+              head={`
+                  <meta charset="utf-8" />
+                  <link rel="stylesheet" href="../../../dist/Draft.css" />
+                  <link rel="stylesheet" href="../rich/RichEditor.css" />
+              `}>
+              <div className="Editor-root">
+                <BlockStyleControls
+                  editorState={editorState}
+                  onToggle={this.toggleBlockType}
+                />
+                <InlineStyleControls
+                  editorState={editorState}
+                  onToggle={this.toggleInlineStyle}
+                />
+                <div className={className} onClick={this.focus}>
+                  <Editor
+                    blockStyleFn={getBlockStyle}
+                    customStyleMap={styleMap}
+                    editorState={editorState}
+                    handleKeyCommand={this.handleKeyCommand}
+                    keyBindingFn={this.mapKeyToEditorCommand}
+                    onChange={this.onChange}
+                    placeholder="Tell a story..."
+                    ref="editor"
+                    spellCheck={true}
+                  />
+                </div>
+              </div>
+            </Frame>
+          );
+        }
+      }
+
+      class Frame extends React.Component {
+        constructor(props) {
+          super(props);
+          this.iframeRef = null;
+          this.handleRef = this._handleRef.bind(this);
+        }
+
+        _handleRef(ref) {
+          if (ref !== this.iframeRef) {
+            this.iframeRef = ref;
+            if (ref) {
+              if (ref.contentDocument && this.props.head) {
+                ref.contentDocument.head.innerHTML = this.props.head;
+              }
+              // Re-render must take place in the next tick (Firefox)
+              setTimeout(() => {
+                this.forceUpdate();
+              });
+            }
+          }
+        }
+
+        render() {
+          const ref = this.iframeRef;
+          let portal = null;
+          if (ref && ref.contentDocument) {
+            portal = ReactDOM.createPortal(
+              React.cloneElement(this.props.children, { reference: ref }),
+              ref.contentDocument.body
+            );
+          }
+          return (
+            <div>
+              <iframe ref={this.handleRef} style={styles.frame} />
+              {portal}
+            </div>
+          );
+        }
+      }
+
+
+      // Custom overrides for "code" style.
+      const styleMap = {
+        CODE: {
+          backgroundColor: 'rgba(0, 0, 0, 0.05)',
+          fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
+          fontSize: 16,
+          padding: 2,
+        },
+      };
+
+      function getBlockStyle(block) {
+        switch (block.getType()) {
+          case 'blockquote': return 'RichEditor-blockquote';
+          default: return null;
+        }
+      }
+
+      class StyleButton extends React.Component {
+        constructor() {
+          super();
+          this.onToggle = (e) => {
+            e.preventDefault();
+            this.props.onToggle(this.props.style);
+          };
+        }
+
+        render() {
+          let className = 'RichEditor-styleButton';
+          if (this.props.active) {
+            className += ' RichEditor-activeButton';
+          }
+
+          return (
+            <span className={className} onMouseDown={this.onToggle}>
+              {this.props.label}
+            </span>
+          );
+        }
+      }
+
+      const BLOCK_TYPES = [
+        {label: 'H1', style: 'header-one'},
+        {label: 'H2', style: 'header-two'},
+        {label: 'H3', style: 'header-three'},
+        {label: 'H4', style: 'header-four'},
+        {label: 'H5', style: 'header-five'},
+        {label: 'H6', style: 'header-six'},
+        {label: 'Blockquote', style: 'blockquote'},
+        {label: 'UL', style: 'unordered-list-item'},
+        {label: 'OL', style: 'ordered-list-item'},
+        {label: 'Code Block', style: 'code-block'},
+      ];
+
+      const BlockStyleControls = (props) => {
+        const {editorState} = props;
+        const selection = editorState.getSelection();
+        const blockType = editorState
+          .getCurrentContent()
+          .getBlockForKey(selection.getStartKey())
+          .getType();
+
+        return (
+          <div className="RichEditor-controls">
+            {BLOCK_TYPES.map((type) =>
+              <StyleButton
+                key={type.label}
+                active={type.style === blockType}
+                label={type.label}
+                onToggle={props.onToggle}
+                style={type.style}
+              />
+            )}
+          </div>
+        );
+      };
+
+      var INLINE_STYLES = [
+        {label: 'Bold', style: 'BOLD'},
+        {label: 'Italic', style: 'ITALIC'},
+        {label: 'Underline', style: 'UNDERLINE'},
+        {label: 'Monospace', style: 'CODE'},
+      ];
+
+      const InlineStyleControls = (props) => {
+        const currentStyle = props.editorState.getCurrentInlineStyle();
+
+        return (
+          <div className="RichEditor-controls">
+            {INLINE_STYLES.map((type) =>
+              <StyleButton
+                key={type.label}
+                active={currentStyle.has(type.style)}
+                label={type.label}
+                onToggle={props.onToggle}
+                style={type.style}
+              />
+            )}
+          </div>
+        );
+      };
+
+      const styles = {
+        frame: {
+          height: 400,
+          width: 800,
+        },
+      };
+
+      ReactDOM.render(
+        <IframedEditorExample />,
+        document.getElementById('target')
+      );
+    </script>
+  </body>
+</html>