Skip to content

Commit

Permalink
On paste, read content from internal clipboard via paste registry spr…
Browse files Browse the repository at this point in the history 
…ingload#148
  • Loading branch information
@superalex @hirunatan
superalex authored and hirunatan committed Jun 21, 2018
1 parent d8beb36 commit 081dc7f
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 1 deletion.
39 changes: 39 additions & 0 deletions dist/draftail.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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++) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
39 changes: 39 additions & 0 deletions dist/draftail.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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++) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
40 changes: 39 additions & 1 deletion lib/components/DraftailEditor.js
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down

0 comments on commit 081dc7f

Please sign in to comment.