1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.noop = noop;
|
7 | exports.getApplyFontStyleFunc = getApplyFontStyleFunc;
|
8 | exports.getToggleFontStyleFunc = getToggleFontStyleFunc;
|
9 | exports.findEntities = findEntities;
|
10 | exports.getSelectionText = getSelectionText;
|
11 | exports.getApplyEntityFunc = getApplyEntityFunc;
|
12 | exports.getToggleEntityFunc = getToggleEntityFunc;
|
13 | exports.getCurrentEntity = getCurrentEntity;
|
14 | exports.inlineStyleComponentFactory = inlineStyleComponentFactory;
|
15 | exports.blockStyleComponentFactory = blockStyleComponentFactory;
|
16 |
|
17 | var _react = require('react');
|
18 |
|
19 | var React = _interopRequireWildcard(_react);
|
20 |
|
21 | var _draftJs = require('draft-js');
|
22 |
|
23 | var _classnames3 = require('classnames');
|
24 |
|
25 | var _classnames4 = _interopRequireDefault(_classnames3);
|
26 |
|
27 | var _rcEditorUtils = require('rc-editor-utils');
|
28 |
|
29 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
30 |
|
31 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj["default"] = obj; return newObj; } }
|
32 |
|
33 | function _defineProperty(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; }
|
34 |
|
35 | var __assign = undefined && undefined.__assign || Object.assign || function (t) {
|
36 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
37 | s = arguments[i];
|
38 | for (var p in s) {
|
39 | if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
40 | }
|
41 | }
|
42 | return t;
|
43 | };
|
44 | function noop(args) {}
|
45 | function getApplyFontStyleFunc(prefix, callbacks) {
|
46 | return function applyStyle(styleName) {
|
47 | var needFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
48 | var getEditorState = callbacks.getEditorState,
|
49 | setEditorState = callbacks.setEditorState;
|
50 |
|
51 | var editorState = getEditorState();
|
52 | var contentState = editorState.getCurrentContent();
|
53 | var selection = editorState.getSelection();
|
54 | var currentStyle = (0, _rcEditorUtils.getCurrentInlineStyle)(editorState);
|
55 | if (selection.isCollapsed()) {
|
56 | currentStyle.forEach(function (style) {
|
57 | if (style.indexOf('' + prefix) !== -1 && style !== styleName) {
|
58 | editorState = _draftJs.RichUtils.toggleInlineStyle(editorState, style);
|
59 | }
|
60 | });
|
61 | editorState = _draftJs.RichUtils.toggleInlineStyle(editorState, styleName);
|
62 | return setEditorState(editorState, true);
|
63 | }
|
64 | currentStyle.forEach(function (style) {
|
65 | if (style.indexOf('' + prefix) !== -1) {
|
66 | contentState = _draftJs.Modifier.removeInlineStyle(contentState, selection, style);
|
67 | }
|
68 | });
|
69 | contentState = _draftJs.Modifier.applyInlineStyle(contentState, selection, styleName);
|
70 | setEditorState(_draftJs.EditorState.push(editorState, contentState, 'apply-style'), needFocus);
|
71 | };
|
72 | }
|
73 | function getToggleFontStyleFunc(prefix, callbacks) {
|
74 | return function toggleStyle(styleName) {
|
75 | var getEditorState = callbacks.getEditorState,
|
76 | setEditorState = callbacks.setEditorState;
|
77 |
|
78 | var editorState = getEditorState();
|
79 | var currentStyle = (0, _rcEditorUtils.getCurrentInlineStyle)(editorState);
|
80 | currentStyle.forEach(function (style) {
|
81 | if (style.indexOf('' + prefix) !== -1 && style !== styleName) {
|
82 | editorState = _draftJs.RichUtils.toggleInlineStyle(editorState, style);
|
83 | }
|
84 | });
|
85 | editorState = _draftJs.RichUtils.toggleInlineStyle(editorState, styleName);
|
86 | setEditorState(editorState);
|
87 | };
|
88 | }
|
89 | function findEntities(entityType) {
|
90 | return function findEntitiesFunc(contentBlock, callback, contentState) {
|
91 | contentBlock.findEntityRanges(function (character) {
|
92 | var entityKey = character.getEntity();
|
93 | return entityKey !== null && contentState.getEntity(entityKey).getType() === entityType;
|
94 | }, callback);
|
95 | };
|
96 | }
|
97 | function getSelectionText(editorState, selection) {
|
98 | var anchorKey = selection.getAnchorKey();
|
99 | var currentContent = editorState.getCurrentContent();
|
100 | var currentBlock = currentContent.getBlockForKey(anchorKey);
|
101 | return currentBlock.getText();
|
102 | }
|
103 | function getApplyEntityFunc(callbacks) {
|
104 | return function applyEntity(entityType) {
|
105 | var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
106 | var entityMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'MUTABLE';
|
107 | var getEditorState = callbacks.getEditorState,
|
108 | setEditorState = callbacks.setEditorState;
|
109 |
|
110 | var editorState = getEditorState();
|
111 | var contentState = editorState.getCurrentContent();
|
112 | var selection = editorState.getSelection();
|
113 | var currentEntity = getCurrentEntity(editorState);
|
114 | var entityKey = contentState.createEntity(entityType, entityMode, data);
|
115 | var replacedContent = _draftJs.Modifier.applyEntity(contentState, selection, entityKey);
|
116 | return setEditorState(_draftJs.EditorState.push(editorState, replacedContent, 'toggle-block'));
|
117 | };
|
118 | }
|
119 | function getToggleEntityFunc(callbacks) {
|
120 | return function toggleEntity(entityType) {
|
121 | var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
122 | var entityMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'MUTABLE';
|
123 | var getEditorState = callbacks.getEditorState,
|
124 | setEditorState = callbacks.setEditorState;
|
125 |
|
126 | var editorState = getEditorState();
|
127 | var contentState = editorState.getCurrentContent();
|
128 | var selection = editorState.getSelection();
|
129 | var entityKey = null;
|
130 | var currentEntity = getCurrentEntity(editorState);
|
131 | if (!currentEntity || contentState.getEntity(currentEntity).getType() !== entityType) {
|
132 | contentState.createEntity(entityType, entityMode, data);
|
133 | entityKey = contentState.getLastCreatedEntityKey();
|
134 | }
|
135 | var replacedContent = _draftJs.Modifier.applyEntity(editorState.getCurrentContent(), selection, entityKey);
|
136 | return setEditorState(_draftJs.EditorState.push(editorState, replacedContent, 'toggle-block'));
|
137 | };
|
138 | }
|
139 | function getCurrentEntity(editorState) {
|
140 | var entity = void 0;
|
141 | var selection = editorState.getSelection();
|
142 | var start = selection.getStartOffset();
|
143 | var end = selection.getEndOffset();
|
144 | if (start === end && start === 0) {
|
145 | end = -1;
|
146 | } else if (start === end) {
|
147 | start = start - 1;
|
148 | }
|
149 | var block = (0, _rcEditorUtils.getSelectedBlock)(editorState);
|
150 | for (var i = start; i < end; i++) {
|
151 | var currentEntity = block.getEntityAt(i);
|
152 | if (!currentEntity) {
|
153 | entity = undefined;
|
154 | break;
|
155 | }
|
156 | if (i === start) {
|
157 | entity = currentEntity;
|
158 | } else {
|
159 | if (entity !== currentEntity) {
|
160 | entity = undefined;
|
161 | break;
|
162 | }
|
163 | }
|
164 | }
|
165 | return entity;
|
166 | }
|
167 | function inlineStyleComponentFactory(name) {
|
168 | var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
169 |
|
170 | return {
|
171 | constructor: function constructor() {
|
172 | var callbacks = {
|
173 | getEditorState: noop,
|
174 | setEditorState: noop
|
175 | };
|
176 | var upperName = name.toUpperCase();
|
177 | var toggleStyle = (0, _rcEditorUtils.getToggleStyleFunc)(callbacks);
|
178 | return {
|
179 | name: name,
|
180 | callbacks: callbacks,
|
181 | component: function component(props) {
|
182 | var _classnames;
|
183 |
|
184 | var currentStyle = (0, _rcEditorUtils.getCurrentInlineStyle)(callbacks.getEditorState());
|
185 | var classNames = (0, _classnames4["default"])((_classnames = {}, _defineProperty(_classnames, 'editor-icon', true), _defineProperty(_classnames, 'editor-icon-' + name, true), _defineProperty(_classnames, 'active', currentStyle.has(upperName)), _classnames));
|
186 | return React.createElement("span", { onMouseDown: function onMouseDown(e) {
|
187 | toggleStyle(upperName);e.preventDefault();
|
188 | }, className: classNames });
|
189 | }
|
190 | };
|
191 | },
|
192 |
|
193 | config: {}
|
194 | };
|
195 | }
|
196 | function blockStyleComponentFactory(name, style) {
|
197 | return {
|
198 | constructor: function constructor() {
|
199 | var callbacks = {
|
200 | getEditorState: noop,
|
201 | setEditorState: noop
|
202 | };
|
203 | var blockRenderMap = _defineProperty({}, '' + name, {
|
204 | element: function element(props) {
|
205 | return React.createElement("div", __assign({}, props, { style: style }));
|
206 | },
|
207 | style: style
|
208 | });
|
209 | var toggleBlockStyle = (0, _rcEditorUtils.getToggleBlockStyleFunc)(callbacks);
|
210 | return {
|
211 | name: name,
|
212 | callbacks: callbacks,
|
213 | blockRenderMap: blockRenderMap,
|
214 | component: function component(prop) {
|
215 | var _classnames2;
|
216 |
|
217 | var selectedBlock = (0, _rcEditorUtils.getSelectedBlock)(callbacks.getEditorState());
|
218 | var classNames = (0, _classnames4["default"])((_classnames2 = {}, _defineProperty(_classnames2, 'editor-icon', true), _defineProperty(_classnames2, 'editor-icon-' + name, true), _defineProperty(_classnames2, 'active', selectedBlock.getType() === name), _classnames2));
|
219 | return React.createElement("span", { onMouseDown: function onMouseDown() {
|
220 | return toggleBlockStyle(name);
|
221 | }, className: classNames });
|
222 | }
|
223 | };
|
224 | },
|
225 |
|
226 | config: {}
|
227 | };
|
228 | } |
\ | No newline at end of file |