{"version":3,"file":"index.js","sources":["../../src/components/Editor/RichTextEditor/index.tsx"],"sourcesContent":["import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Editor, EditorState, DraftEditorCommand, RichUtils, Modifier, ContentState, convertToRaw, ContentBlock, CompositeDecorator, Entity, SelectionState, AtomicBlockUtils } from \"draft-js\";\r\nimport styles from \"./RichTextEditor.less\";\r\n\r\ninterface RichTextEditorProps {}\r\ninterface RichTextEditorState {\r\n  editorState: EditorState;\r\n}\r\n\r\n// 自定义组件，用于超链接\r\nconst Link = (props: any) => {\r\n    // 这里通过contentState来获取entity�，之后通过getData获取entity中包含的数据\r\n    const { url } = props.contentState.getEntity(props.entityKey).getData();\r\n    return (\r\n        <a href={url}>\r\n            {props.children}\r\n        </a>\r\n    )\r\n}\r\n// decorator，用于超链接\r\nconst decorator = new CompositeDecorator([\r\n  {\r\n      strategy (contentBlock, callback, contentState) {\r\n\r\n          // 这个方法接收2个函数作为参数，如果第一个参数的函数执行时�返回true，就会执行第二个参数函数，同时会�将匹配的�字符的起始位置和结束位置传递给第二个参数。\r\n          contentBlock.findEntityRanges(\r\n              (character) => {\r\n                  const entityKey = character.getEntity();\r\n                  return (\r\n                      entityKey !== null &&\r\n                      contentState.getEntity(entityKey).getType() === 'LINK'\r\n                  );\r\n              }, (...arr) => {\r\n                  callback(...arr)\r\n              }\r\n          );\r\n      },\r\n      component: Link\r\n  },\r\n  {\r\n    strategy (contentBlock, callback, contentState) {\r\n      contentBlock.findEntityRanges(\r\n        (character) => {\r\n          const entityKey = character.getEntity();\r\n          return (\r\n            entityKey !== null &&\r\n            contentState.getEntity(entityKey).getType() === 'EMOJI'\r\n          );\r\n        }, (...arr) => {\r\n          callback(...arr);\r\n        }\r\n      )\r\n    },\r\n    // component: (props: any) => (<span style={{ color: 'red' }}>[Emoji]</span>)\r\n    component: (props: any) => (\r\n      <i style={{\r\n          display:'inline-block',\r\n          height:'18px',\r\n          width:'18px',\r\n          backgroundImage:`url(https://i.pinimg.com/originals/03/7e/79/037e79b2fb52127537be79110891ae3f.png)`,\r\n          backgroundSize:'100% 100%',\r\n          color:'transparent'\r\n  }}>{`e`}</i>)\r\n  }\r\n]);\r\n\r\nclass RichTextEditor extends React.Component<\r\n  RichTextEditorProps,\r\n  RichTextEditorState\r\n> {\r\n  constructor(props: RichTextEditorProps) {\r\n    super(props);\r\n    this.state = {\r\n      editorState: EditorState.createEmpty(decorator)\r\n    };\r\n    this.onChange = (editorState: EditorState) =>\r\n      this.setState({ editorState });\r\n    this.handleKeyCommand = this.handleKeyCommand.bind(this);\r\n    this.defaultBlockStyleFn = this.defaultBlockStyleFn.bind(this);\r\n  }\r\n\r\n  onChange: (editorState: EditorState) => void;\r\n  handleKeyCommand(command: DraftEditorCommand, editorState: EditorState) {\r\n    const newState = RichUtils.handleKeyCommand(editorState, command);\r\n    console.log('command: ', command);\r\n    console.log('newState: ', newState);\r\n    if (newState) {\r\n      this.onChange(newState);\r\n      return \"handled\";\r\n    }\r\n\r\n    switch (command) {\r\n      case 'backspace': \r\n        const contentState = editorState.getCurrentContent();\r\n        const selectionState = editorState.getSelection();\r\n        const [startOffset, endOffset] = [selectionState.getStartOffset(), selectionState.getEndOffset()];\r\n        if (startOffset === endOffset) {\r\n          // 未选中状态\r\n          console.log(selectionState.getAnchorKey());\r\n        }\r\n        // 选中状态\r\n\r\n        break;\r\n      case 'backspace-word': \r\n      case 'backspace-to-start-of-line':\r\n        break;\r\n    }\r\n    \r\n    return \"not-handled\";\r\n  }\r\n\r\n  _onBoldClick() {\r\n    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));\r\n  }\r\n\r\n  _onLinkClick() {\r\n    const { editorState } = this.state;\r\n    const contentState = editorState.getCurrentContent();\r\n    const selectionState = editorState.getSelection();\r\n    const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {\r\n      url: 'http://www.zombo.com',\r\n    });\r\n    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();\r\n    const contentStateWithLink = Modifier.applyEntity(\r\n      contentStateWithEntity,\r\n      selectionState,\r\n      entityKey,\r\n    );\r\n    const newEditorState = EditorState.push(editorState, contentStateWithLink, 'apply-entity');\r\n    this.onChange(newEditorState);\r\n  }\r\n\r\n  _onEmojiClick(e: React.MouseEvent, emojiCode: string) {\r\n    const { editorState } = this.state;\r\n    const contentState = editorState.getCurrentContent();\r\n    const selectionState = editorState.getSelection();\r\n    const EMOJIEntity: ContentState = contentState.createEntity('EMOJI', 'IMMUTABLE', { emojiCode });\r\n    const entityKey = EMOJIEntity.getLastCreatedEntityKey();\r\n    const ncsWithEntity = Modifier.insertText(contentState, selectionState, 'e', undefined, entityKey);\r\n    const newEditorState = EditorState.push(editorState, ncsWithEntity, 'insert-characters');\r\n    // const newEditorState = AtomicBlockUtils.insertAtomicBlock(\r\n    //   editorState,\r\n    //   entityKey,\r\n    //   ' '\r\n    // );\r\n    this.onChange(newEditorState);\r\n  }\r\n\r\n  _onCheckRange() {\r\n    console.log(this.state.editorState.getCurrentContent());\r\n    console.log(convertToRaw(this.state.editorState.getCurrentContent()));\r\n  }\r\n\r\n  defaultBlockStyleFn(contentBlock: ContentBlock) {\r\n    const type = contentBlock.getType();\r\n    return \"\";\r\n  }\r\n\r\n  defaultBlockRenderFn(contentBlock: ContentBlock) {\r\n    const type = contentBlock.getType();\r\n    return contentBlock;\r\n  }\r\n\r\n  render() {\r\n    const { editorState } = this.state;\r\n    return (\r\n      <div className={styles.wrapper}>\r\n        <div className={styles.btnListWrapper}>\r\n          <button onClick={this._onBoldClick.bind(this)}>Bold</button>\r\n          <button onClick={this._onCheckRange.bind(this)}>Check</button>\r\n          <button onClick={this._onLinkClick.bind(this)}>Link</button>\r\n          <button onClick={(e: React.MouseEvent) => this._onEmojiClick(e, '0011')}>Emoji</button>\r\n        </div>\r\n        <div className={styles.editorWrapper}>\r\n          <Editor\r\n            editorState={editorState}\r\n            blockStyleFn={this.defaultBlockStyleFn}\r\n            blockRendererFn={this.defaultBlockRenderFn}\r\n            handleKeyCommand={this.handleKeyCommand}\r\n            onChange={this.onChange}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default RichTextEditor;\r\n"],"names":["Link","props","contentState","getEntity","entityKey","getData","url","React","children","decorator","CompositeDecorator","strategy","contentBlock","callback","findEntityRanges","character","getType","component","display","height","width","backgroundImage","backgroundSize","color","RichTextEditor","state","editorState","EditorState","createEmpty","onChange","setState","handleKeyCommand","bind","defaultBlockStyleFn","command","newState","RichUtils","console","log","getCurrentContent","selectionState","getSelection","getStartOffset","getEndOffset","startOffset","endOffset","getAnchorKey","toggleInlineStyle","contentStateWithEntity","createEntity","getLastCreatedEntityKey","contentStateWithLink","Modifier","applyEntity","newEditorState","push","e","emojiCode","EMOJIEntity","ncsWithEntity","insertText","undefined","convertToRaw","type","styles","wrapper","btnListWrapper","_onBoldClick","_onCheckRange","_onLinkClick","_onEmojiClick","editorWrapper","Editor","defaultBlockRenderFn","Component"],"mappings":"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"}