1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _react = require('react');
|
8 |
|
9 | var _react2 = _interopRequireDefault(_react);
|
10 |
|
11 | var _propTypes = require('prop-types');
|
12 |
|
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
14 |
|
15 | var _bind = require('classnames/bind');
|
16 |
|
17 | var _bind2 = _interopRequireDefault(_bind);
|
18 |
|
19 | var _quill = require('quill');
|
20 |
|
21 | var _quill2 = _interopRequireDefault(_quill);
|
22 |
|
23 | var _Toolbar = require('./Toolbar');
|
24 |
|
25 | var _Toolbar2 = _interopRequireDefault(_Toolbar);
|
26 |
|
27 | var _style = require('./style.scss');
|
28 |
|
29 | var _style2 = _interopRequireDefault(_style);
|
30 |
|
31 | require('../../styles/global/quill.scss');
|
32 |
|
33 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
34 |
|
35 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
36 |
|
37 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
38 |
|
39 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | var TextEditor = function (_PureComponent) {
|
45 | _inherits(TextEditor, _PureComponent);
|
46 |
|
47 | function TextEditor(props) {
|
48 | _classCallCheck(this, TextEditor);
|
49 |
|
50 | var _this = _possibleConstructorReturn(this, (TextEditor.__proto__ || Object.getPrototypeOf(TextEditor)).call(this, props));
|
51 |
|
52 | _this.state = {
|
53 | value: _this.props.value
|
54 | };
|
55 |
|
56 | _this.registerEventHandlers = function () {
|
57 |
|
58 | _this.state.textEditor.on('text-change', function (delta, oldDelta, source) {
|
59 | var value = _this.getHTML();
|
60 |
|
61 | if (value !== _this.state.value) {
|
62 | _this.handleChange(value);
|
63 | }
|
64 | });
|
65 | };
|
66 |
|
67 | _this.handleChange = function (value) {
|
68 | var event = {
|
69 | target: {
|
70 | name: _this.props.name,
|
71 | value: value
|
72 | }
|
73 |
|
74 |
|
75 | };_this.setState({ value: value }, function () {
|
76 | if (_this.props.changeCallback) {
|
77 | _this.props.changeCallback(event);
|
78 | }
|
79 | });
|
80 | };
|
81 |
|
82 | _this.setContent = function (value) {
|
83 | _this._editor.firstChild.innerHTML = value;
|
84 | };
|
85 |
|
86 | _this.componentDidMount = function () {
|
87 |
|
88 | var options = {
|
89 | modules: {
|
90 | toolbar: _this._toolbar
|
91 | },
|
92 | placeholder: _this.props.placeholder || '',
|
93 | theme: 'snow'
|
94 |
|
95 |
|
96 | };var AlignAttribute = _quill2.default.import('attributors/style/align');
|
97 | var FontAttribute = _quill2.default.import('attributors/style/font');
|
98 |
|
99 | _quill2.default.register(AlignAttribute, true);
|
100 | _quill2.default.register(FontAttribute, true);
|
101 |
|
102 |
|
103 | _this.setState({ textEditor: new _quill2.default(_this._editor, options) }, function () {
|
104 |
|
105 | if (_this.props.value) {
|
106 | _this.setContent(_this.props.value);
|
107 | }
|
108 |
|
109 |
|
110 | if (_this.props.disabled) {
|
111 | _this.state.textEditor.disable();
|
112 | }
|
113 |
|
114 |
|
115 | _this.registerEventHandlers();
|
116 | });
|
117 | };
|
118 |
|
119 | _this.UNSAFE_componentWillReceiveProps = function (nextProps) {
|
120 |
|
121 | _this.state.textEditor.enable(!nextProps.disabled);
|
122 |
|
123 |
|
124 | if (nextProps.value !== _this.state.value) {
|
125 | _this.setContent(nextProps.value);
|
126 | _this.setState({ value: nextProps.value });
|
127 | }
|
128 | };
|
129 |
|
130 | _this.setToolbarRef = function (toolbar) {
|
131 | _this._toolbar = toolbar;
|
132 | };
|
133 |
|
134 | _this.render = function () {
|
135 | var cx = _bind2.default.bind(_style2.default);
|
136 | var disabledClass = _this.props.disabled ? _style2.default['editor-disabled'] : '';
|
137 | var editorClass = cx(_style2.default['editor-component'], _this.props.optClass, disabledClass);
|
138 |
|
139 | return _react2.default.createElement(
|
140 | 'div',
|
141 | { className: editorClass },
|
142 | _react2.default.createElement(_Toolbar2.default, { textEditor: _this.state.textEditor, mergeTags: _this.props.mergeTags, onMount: _this.setToolbarRef }),
|
143 | _react2.default.createElement('div', { ref: function ref(c) {
|
144 | return _this._editor = c;
|
145 | } }),
|
146 | _react2.default.createElement('div', { className: _style2.default.overlay })
|
147 | );
|
148 | };
|
149 |
|
150 | _this.getHTML = function () {
|
151 | if (_this._editor) {
|
152 | return _this._editor.firstChild.innerHTML;
|
153 | }
|
154 | };
|
155 | return _this;
|
156 | }
|
157 |
|
158 | return TextEditor;
|
159 | }(_react.PureComponent);
|
160 |
|
161 | TextEditor.defaultProps = {
|
162 | disabled: false,
|
163 | value: ''
|
164 | };
|
165 | TextEditor.propTypes = {
|
166 | |
167 |
|
168 |
|
169 | disabled: _propTypes2.default.bool,
|
170 | |
171 |
|
172 |
|
173 | value: _propTypes2.default.string,
|
174 | |
175 |
|
176 |
|
177 | placeholder: _propTypes2.default.string,
|
178 | |
179 |
|
180 |
|
181 | name: _propTypes2.default.string,
|
182 | |
183 |
|
184 |
|
185 | optClass: _propTypes2.default.string,
|
186 | |
187 |
|
188 |
|
189 | changeCallback: _propTypes2.default.func,
|
190 | |
191 |
|
192 |
|
193 | mergeTags: _propTypes2.default.array
|
194 | };
|
195 | exports.default = TextEditor; |
\ | No newline at end of file |