From 081dc7ff76e6c2e94247f08b423a6e1e3b89cff5 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Thu, 17 May 2018 14:47:57 +0200 Subject: [PATCH] On paste, read content from internal clipboard via paste registry https://github.com/springload/draftail/pull/148 --- dist/draftail.cjs.js | 39 +++++++++++++++++++++++++++++++ dist/draftail.esm.js | 39 +++++++++++++++++++++++++++++++ lib/components/DraftailEditor.js | 40 +++++++++++++++++++++++++++++++- 3 files changed, 117 insertions(+), 1 deletion(-) diff --git a/dist/draftail.cjs.js b/dist/draftail.cjs.js index 42a30f63..583a9bfa 100644 --- a/dist/draftail.cjs.js +++ b/dist/draftail.cjs.js @@ -949,7 +949,20 @@ var createClass = function () { +var defineProperty = function (obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + return obj; +}; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { @@ -1430,6 +1443,7 @@ var DraftailEditor = function (_Component) { _this.onTab = _this.onTab.bind(_this); _this.handleKeyCommand = _this.handleKeyCommand.bind(_this); _this.handleBeforeInput = _this.handleBeforeInput.bind(_this); + _this.handlePastedText = _this.handlePastedText.bind(_this); _this.toggleBlockType = _this.toggleBlockType.bind(_this); _this.toggleInlineStyle = _this.toggleInlineStyle.bind(_this); @@ -1697,6 +1711,27 @@ var DraftailEditor = function (_Component) { return NOT_HANDLED; } + }, { + key: 'handlePastedText', + value: function handlePastedText(text, html, editorState) { + var editorKey = this.editorRef.getEditorKey(); + var isEditor = html.includes('data-editor'); + var htmlKey = isEditor ? /data-editor="(\w+)"/.exec(html)[1] : ''; + + if (!htmlKey || htmlKey === editorKey || !window.editorRefs[htmlKey]) { + return false; + } + + var clipboard = window.editorRefs[htmlKey].getClipboard(); + + if (clipboard) { + var newContent = draftJs.Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), clipboard); + this.onChange(draftJs.EditorState.push(editorState, newContent, 'insert-fragment')); + return true; + } + + return false; + } }, { key: 'toggleBlockType', value: function toggleBlockType(blockType) { @@ -1983,6 +2018,9 @@ var DraftailEditor = function (_Component) { customStyleMap: behavior.getCustomStyleMap(inlineStyles.concat(inlineStylesExtra)), ref: function ref(_ref) { _this4.editorRef = _ref; + if (_ref) { + window.editorRefs = Object.assign({}, window.editorRefs, defineProperty({}, _ref.getEditorKey(), _ref)); + } }, editorState: editorState, onChange: this.onChange, @@ -2000,6 +2038,7 @@ var DraftailEditor = function (_Component) { keyBindingFn: behavior.getKeyBindingFn(blockTypes, inlineStyles, entityTypes), handleKeyCommand: this.handleKeyCommand, handleBeforeInput: this.handleBeforeInput, + handlePastedText: this.handlePastedText, onFocus: this.onFocus, onBlur: this.onBlur, onTab: this.onTab, diff --git a/dist/draftail.esm.js b/dist/draftail.esm.js index 60dac313..15deb8a7 100644 --- a/dist/draftail.esm.js +++ b/dist/draftail.esm.js @@ -942,7 +942,20 @@ var createClass = function () { +var defineProperty = function (obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + return obj; +}; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { @@ -1423,6 +1436,7 @@ var DraftailEditor = function (_Component) { _this.onTab = _this.onTab.bind(_this); _this.handleKeyCommand = _this.handleKeyCommand.bind(_this); _this.handleBeforeInput = _this.handleBeforeInput.bind(_this); + _this.handlePastedText = _this.handlePastedText.bind(_this); _this.toggleBlockType = _this.toggleBlockType.bind(_this); _this.toggleInlineStyle = _this.toggleInlineStyle.bind(_this); @@ -1690,6 +1704,27 @@ var DraftailEditor = function (_Component) { return NOT_HANDLED; } + }, { + key: 'handlePastedText', + value: function handlePastedText(text, html, editorState) { + var editorKey = this.editorRef.getEditorKey(); + var isEditor = html.includes('data-editor'); + var htmlKey = isEditor ? /data-editor="(\w+)"/.exec(html)[1] : ''; + + if (!htmlKey || htmlKey === editorKey || !window.editorRefs[htmlKey]) { + return false; + } + + var clipboard = window.editorRefs[htmlKey].getClipboard(); + + if (clipboard) { + var newContent = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), clipboard); + this.onChange(EditorState.push(editorState, newContent, 'insert-fragment')); + return true; + } + + return false; + } }, { key: 'toggleBlockType', value: function toggleBlockType(blockType) { @@ -1976,6 +2011,9 @@ var DraftailEditor = function (_Component) { customStyleMap: behavior.getCustomStyleMap(inlineStyles.concat(inlineStylesExtra)), ref: function ref(_ref) { _this4.editorRef = _ref; + if (_ref) { + window.editorRefs = Object.assign({}, window.editorRefs, defineProperty({}, _ref.getEditorKey(), _ref)); + } }, editorState: editorState, onChange: this.onChange, @@ -1993,6 +2031,7 @@ var DraftailEditor = function (_Component) { keyBindingFn: behavior.getKeyBindingFn(blockTypes, inlineStyles, entityTypes), handleKeyCommand: this.handleKeyCommand, handleBeforeInput: this.handleBeforeInput, + handlePastedText: this.handlePastedText, onFocus: this.onFocus, onBlur: this.onBlur, onTab: this.onTab, diff --git a/lib/components/DraftailEditor.js b/lib/components/DraftailEditor.js index 01b93acb..264fce4a 100644 --- a/lib/components/DraftailEditor.js +++ b/lib/components/DraftailEditor.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { Editor, EditorState, RichUtils } from 'draft-js'; +import { Editor, EditorState, RichUtils, Modifier } from 'draft-js'; + import { ListNestingStyles } from 'draftjs-conductor'; import { @@ -48,6 +49,7 @@ class DraftailEditor extends Component { this.onTab = this.onTab.bind(this); this.handleKeyCommand = this.handleKeyCommand.bind(this); this.handleBeforeInput = this.handleBeforeInput.bind(this); + this.handlePastedText = this.handlePastedText.bind(this); this.toggleBlockType = this.toggleBlockType.bind(this); this.toggleInlineStyle = this.toggleInlineStyle.bind(this); @@ -314,6 +316,32 @@ class DraftailEditor extends Component { return NOT_HANDLED; } + handlePastedText(text, html, editorState) { + const editorKey = this.editorRef.getEditorKey(); + const isEditor = html.includes('data-editor'); + const htmlKey = isEditor ? /data-editor="(\w+)"/.exec(html)[1] : ''; + + if (!htmlKey || htmlKey === editorKey || !window.editorRefs[htmlKey]) { + return false; + } + + const clipboard = window.editorRefs[htmlKey].getClipboard(); + + if (clipboard) { + const newContent = Modifier.replaceWithFragment( + editorState.getCurrentContent(), + editorState.getSelection(), + clipboard, + ); + this.onChange( + EditorState.push(editorState, newContent, 'insert-fragment'), + ); + return true; + } + + return false; + } + toggleBlockType(blockType) { const { editorState } = this.state; this.onChange(RichUtils.toggleBlockType(editorState, blockType)); @@ -592,6 +620,15 @@ class DraftailEditor extends Component { customStyleMap={behavior.getCustomStyleMap(inlineStyles.concat(inlineStylesExtra))} ref={ref => { this.editorRef = ref; + if (ref) { + window.editorRefs = Object.assign( + {}, + window.editorRefs, + { + [ref.getEditorKey()]: ref, + }, + ); + } }} editorState={editorState} onChange={this.onChange} @@ -613,6 +650,7 @@ class DraftailEditor extends Component { )} handleKeyCommand={this.handleKeyCommand} handleBeforeInput={this.handleBeforeInput} + handlePastedText={this.handlePastedText} onFocus={this.onFocus} onBlur={this.onBlur} onTab={this.onTab}