暫無描述

index.js 8.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
  4. var _commonjsHelpers = require('../_commonjsHelpers-4ed3570f.js');
  5. var React = require('react');
  6. var React__default = _interopDefault(React);
  7. var styleInject_es = require('../style-inject.es-dcee06b6.js');
  8. var Draft = require('../Draft-7ee7c163.js');
  9. require('../_react-dom_commonjs-external-55867475.js');
  10. require('react-dom');
  11. var css = ".RichTextEditor_wrapper__3X3Yv .RichTextEditor_btnListWrapper__vUaki {\n display: flex;\n}\n.RichTextEditor_wrapper__3X3Yv .RichTextEditor_editorWrapper__3UFgF {\n border: 1px solid #ccc;\n}\n";
  12. var styles = {"wrapper":"RichTextEditor_wrapper__3X3Yv","btnListWrapper":"RichTextEditor_btnListWrapper__vUaki","editorWrapper":"RichTextEditor_editorWrapper__3UFgF"};
  13. styleInject_es.styleInject(css);
  14. // 自定义组件,用于超链接
  15. var Link = function Link(props) {
  16. // 这里通过contentState来获取entity�,之后通过getData获取entity中包含的数据
  17. var _props$contentState$g = props.contentState.getEntity(props.entityKey).getData(),
  18. url = _props$contentState$g.url;
  19. return React__default.createElement("a", {
  20. href: url
  21. }, props.children);
  22. }; // decorator,用于超链接
  23. var decorator = new Draft.Draft_4([{
  24. strategy: function strategy(contentBlock, callback, contentState) {
  25. // 这个方法接收2个函数作为参数,如果第一个参数的函数执行时�返回true,就会执行第二个参数函数,同时会�将匹配的�字符的起始位置和结束位置传递给第二个参数。
  26. contentBlock.findEntityRanges(function (character) {
  27. var entityKey = character.getEntity();
  28. return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
  29. }, function () {
  30. callback.apply(void 0, arguments);
  31. });
  32. },
  33. component: Link
  34. }, {
  35. strategy: function strategy(contentBlock, callback, contentState) {
  36. contentBlock.findEntityRanges(function (character) {
  37. var entityKey = character.getEntity();
  38. return entityKey !== null && contentState.getEntity(entityKey).getType() === 'EMOJI';
  39. }, function () {
  40. callback.apply(void 0, arguments);
  41. });
  42. },
  43. // component: (props: any) => (<span style={{ color: 'red' }}>[Emoji]</span>)
  44. component: function component(props) {
  45. return React__default.createElement("i", {
  46. style: {
  47. display: 'inline-block',
  48. height: '18px',
  49. width: '18px',
  50. backgroundImage: "url(https://i.pinimg.com/originals/03/7e/79/037e79b2fb52127537be79110891ae3f.png)",
  51. backgroundSize: '100% 100%',
  52. color: 'transparent'
  53. }
  54. }, "e");
  55. }
  56. }]);
  57. var RichTextEditor =
  58. /*#__PURE__*/
  59. function (_React$Component) {
  60. _commonjsHelpers._inherits(RichTextEditor, _React$Component);
  61. function RichTextEditor(props) {
  62. var _this;
  63. _commonjsHelpers._classCallCheck(this, RichTextEditor);
  64. _this = _commonjsHelpers._possibleConstructorReturn(this, _commonjsHelpers._getPrototypeOf(RichTextEditor).call(this, props));
  65. _commonjsHelpers._defineProperty(_commonjsHelpers._assertThisInitialized(_this), "onChange", void 0);
  66. _this.state = {
  67. editorState: Draft.Draft_3.createEmpty(decorator)
  68. };
  69. _this.onChange = function (editorState) {
  70. return _this.setState({
  71. editorState: editorState
  72. });
  73. };
  74. _this.handleKeyCommand = _this.handleKeyCommand.bind(_commonjsHelpers._assertThisInitialized(_this));
  75. _this.defaultBlockStyleFn = _this.defaultBlockStyleFn.bind(_commonjsHelpers._assertThisInitialized(_this));
  76. return _this;
  77. }
  78. _commonjsHelpers._createClass(RichTextEditor, [{
  79. key: "handleKeyCommand",
  80. value: function handleKeyCommand(command, editorState) {
  81. var newState = Draft.Draft_15.handleKeyCommand(editorState, command);
  82. console.log('command: ', command);
  83. console.log('newState: ', newState);
  84. if (newState) {
  85. this.onChange(newState);
  86. return "handled";
  87. }
  88. switch (command) {
  89. case 'backspace':
  90. var contentState = editorState.getCurrentContent();
  91. var selectionState = editorState.getSelection();
  92. var _ref = [selectionState.getStartOffset(), selectionState.getEndOffset()],
  93. startOffset = _ref[0],
  94. endOffset = _ref[1];
  95. if (startOffset === endOffset) {
  96. // 未选中状态
  97. console.log(selectionState.getAnchorKey());
  98. } // 选中状态
  99. break;
  100. }
  101. return "not-handled";
  102. }
  103. }, {
  104. key: "_onBoldClick",
  105. value: function _onBoldClick() {
  106. this.onChange(Draft.Draft_15.toggleInlineStyle(this.state.editorState, 'BOLD'));
  107. }
  108. }, {
  109. key: "_onLinkClick",
  110. value: function _onLinkClick() {
  111. var editorState = this.state.editorState;
  112. var contentState = editorState.getCurrentContent();
  113. var selectionState = editorState.getSelection();
  114. var contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
  115. url: 'http://www.zombo.com'
  116. });
  117. var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
  118. var contentStateWithLink = Draft.Draft_14.applyEntity(contentStateWithEntity, selectionState, entityKey);
  119. var newEditorState = Draft.Draft_3.push(editorState, contentStateWithLink, 'apply-entity');
  120. this.onChange(newEditorState);
  121. }
  122. }, {
  123. key: "_onEmojiClick",
  124. value: function _onEmojiClick(e, emojiCode) {
  125. var editorState = this.state.editorState;
  126. var contentState = editorState.getCurrentContent();
  127. var selectionState = editorState.getSelection();
  128. var EMOJIEntity = contentState.createEntity('EMOJI', 'IMMUTABLE', {
  129. emojiCode: emojiCode
  130. });
  131. var entityKey = EMOJIEntity.getLastCreatedEntityKey();
  132. var ncsWithEntity = Draft.Draft_14.insertText(contentState, selectionState, 'e', undefined, entityKey);
  133. var newEditorState = Draft.Draft_3.push(editorState, ncsWithEntity, 'insert-characters'); // const newEditorState = AtomicBlockUtils.insertAtomicBlock(
  134. // editorState,
  135. // entityKey,
  136. // ' '
  137. // );
  138. this.onChange(newEditorState);
  139. }
  140. }, {
  141. key: "_onCheckRange",
  142. value: function _onCheckRange() {
  143. console.log(this.state.editorState.getCurrentContent());
  144. console.log(Draft.Draft_20(this.state.editorState.getCurrentContent()));
  145. }
  146. }, {
  147. key: "defaultBlockStyleFn",
  148. value: function defaultBlockStyleFn(contentBlock) {
  149. var type = contentBlock.getType();
  150. return "";
  151. }
  152. }, {
  153. key: "defaultBlockRenderFn",
  154. value: function defaultBlockRenderFn(contentBlock) {
  155. var type = contentBlock.getType();
  156. return contentBlock;
  157. }
  158. }, {
  159. key: "render",
  160. value: function render() {
  161. var _this2 = this;
  162. var editorState = this.state.editorState;
  163. return React__default.createElement("div", {
  164. className: styles.wrapper
  165. }, React__default.createElement("div", {
  166. className: styles.btnListWrapper
  167. }, React__default.createElement("button", {
  168. onClick: this._onBoldClick.bind(this)
  169. }, "Bold"), React__default.createElement("button", {
  170. onClick: this._onCheckRange.bind(this)
  171. }, "Check"), React__default.createElement("button", {
  172. onClick: this._onLinkClick.bind(this)
  173. }, "Link"), React__default.createElement("button", {
  174. onClick: function onClick(e) {
  175. return _this2._onEmojiClick(e, '0011');
  176. }
  177. }, "Emoji")), React__default.createElement("div", {
  178. className: styles.editorWrapper
  179. }, React__default.createElement(Draft.Draft_1, {
  180. editorState: editorState,
  181. blockStyleFn: this.defaultBlockStyleFn,
  182. blockRendererFn: this.defaultBlockRenderFn,
  183. handleKeyCommand: this.handleKeyCommand,
  184. onChange: this.onChange
  185. })));
  186. }
  187. }]);
  188. return RichTextEditor;
  189. }(React__default.Component);
  190. exports.default = RichTextEditor;
  191. //# sourceMappingURL=index.js.map