arch-editor/lib/InlineToolbar.js

Rich text editor with a high degree of customization.

/*! For license information please see InlineToolbar.js.LICENSE.txt */
!function(){"use strict";var e={n:function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,{a:n}),n},d:function(t,n){for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:function(){return O}});var n=require("react-dom"),r=e.n(n),o=require("react"),i=e.n(o),a=require("draft-js"),l=require("react-transition-group"),c=require("react-popper"),u=require("prop-types"),s=e.n(u),p=require("classnames/bind"),m=e.n(p),f=require("./draftUtils"),d=require("./Icon"),v=e.n(d),b={popover:"ArchEditor-popover",content:"ArchEditor-content",active:"ArchEditor-active","link-content":"ArchEditor-link-content",linkContent:"ArchEditor-link-content","url-input":"ArchEditor-url-input",urlInput:"ArchEditor-url-input",button:"ArchEditor-button","popover-arrow":"ArchEditor-popover-arrow",popoverArrow:"ArchEditor-popover-arrow"},y=["visible","onRequestClose"];function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function E(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,l=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){l=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(l)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return h(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?h(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var S=m().bind(b),C=["bold","italic","underline","strikethrough","link","formatclear","delete"],k=function(e){var t=e.virtualElement,n=e.editorState,u=e.onChange,s=e.boxModeChange,p=e.bars,m=void 0===p?C:p,d=e.popoverClassName,y=e.getUpdateFn,h=E((0,o.useState)("normal"),2),k=h[0],A=h[1],O=E((0,o.useState)(""),2),I=O[0],R=O[1],w=E((0,o.useState)(null),2),N=w[0],L=w[1],j=E((0,o.useState)(null),2),U=j[0],T=j[1],q=(0,c.usePopper)(t,N,{placement:"top",modifiers:[{name:"arrow",options:{element:U}},{name:"offset",options:{offset:[0,10]}},{name:"flip",enabled:!0},{name:"preventOverflow",options:{padding:5}},{name:"computeStyles",options:{adaptive:!1}}]}),M=q.styles,P=q.attributes,x=q.update,B=function(e){var t=(0,f.takeSelectionFocus)(e.editorState||n);u&&u(t)},D=function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()};(0,o.useEffect)((function(){y&&y(x)}),[y,x]),(0,o.useEffect)((function(){s&&s(k)}),[s,k]);var F,K,H,_=(0,o.useMemo)((function(){return/^((https|http)?:\/\/)[^\s]+/.test(I)}),[I]),G=(0,o.useMemo)((function(){return a.RichUtils.currentBlockContainsLink(n)}),[n]),V=(0,o.useMemo)((function(){return[{name:"BOLD",tooltip:"加粗：Ctrl+B",component:i().createElement(v(),{name:"bold"}),onClick:function(e){var t=a.RichUtils.toggleInlineStyle(n,"BOLD");e.editorState=t}},{name:"ITALIC",tooltip:"斜体：Ctrl+I",component:i().createElement(v(),{name:"italic"}),onClick:function(e){var t=a.RichUtils.toggleInlineStyle(n,"ITALIC");e.editorState=t}},{name:"UNDERLINE",tooltip:"下划线：Ctrl+U",component:i().createElement(v(),{name:"underline"}),onClick:function(e){var t=a.RichUtils.toggleInlineStyle(n,"UNDERLINE");e.editorState=t}},{name:"STRIKETHROUGH",tooltip:"删除线：Ctrl+Alt+S",component:i().createElement(v(),{name:"strikethrough"}),onClick:function(e){var t=a.RichUtils.toggleInlineStyle(n,"STRIKETHROUGH");e.editorState=t}},!G&&{name:"LINK",tooltip:"超链接",component:i().createElement(v(),{name:"link"}),onClick:function(){A("link")}},G&&{name:"LINK",tooltip:"取消超链接",component:i().createElement(v(),{name:"unlink"}),onClick:function(e){var t=n.getSelection(),r=a.RichUtils.toggleLink(n,t,null);e.editorState=r}},{name:"FORMATCLEAR",tooltip:"清除格式：Ctrl+Alt+L",component:i().createElement(v(),{name:"format-clear"}),onClick:function(e){var t=(0,f.clearInlineStyles)(n);e.editorState=t}},{name:"DELETE",tooltip:"移除：Ctrl+D",component:i().createElement(v(),{name:"backspace"}),onClick:function(e){e.stopPropagation();var t=n.getCurrentContent(),r=n.getSelection(),o=a.Modifier.removeRange(t,r,"forward"),i=a.EditorState.push(n,o,"remove-range");i=(0,f.takeSelectionFocus)(i),u&&u(i)}}].filter(Boolean)}),[n,G,u]),$=(0,o.useCallback)((function(e){return Array.isArray(e)?e.map((function(e){return V.find((function(t){return t.name.toLowerCase()===e}))})).filter(Boolean):[]}),[V]),z=(0,o.useMemo)((function(){return $(m)}),[m,$]),J=(0,o.useMemo)((function(){return n.getCurrentInlineStyle()}),[n]);return r().createPortal(i().createElement(l.SwitchTransition,{mode:"out-in"},i().createElement(l.CSSTransition,{classNames:"ArchEditor-fade",key:k,timeout:300},i().createElement("div",g({ref:L,className:S("popover",(F={},K=d,H=!!d,K in F?Object.defineProperty(F,K,{value:H,enumerable:!0,configurable:!0,writable:!0}):F[K]=H,F)),style:M.popper,role:"dialog",onClick:D},P.popper),"normal"===k&&i().createElement("ul",{className:b.content,onClick:B},z.map((function(e){return i().createElement("li",{key:e.name,title:e.tooltip,onClick:e.onClick,className:S({active:J.has(e.name)})},e.component)}))),"link"===k&&i().createElement("div",{className:b.linkContent,role:"textbox",tabIndex:"0",onClick:B},i().createElement("button",{type:"button",className:b.button,onClick:function(){A("normal")},title:"返回"},i().createElement(v(),{name:"arrow-backward"})),i().createElement("input",{type:"text",className:b.urlInput,placeholder:"http(s)://",value:I,onClick:D,onChange:function(e){R(e.target.value)}}),_&&i().createElement("button",{type:"button",className:b.button,onClick:function(e){var t=(0,f.createBlockEntity)(n,"LINK","MUTABLE",{url:I}),r=a.RichUtils.toggleLink(t.editorState,t.editorState.getSelection(),t.entityKey);e.editorState=r,A("normal")},title:"确定"},i().createElement(v(),{name:"done"}))),i().createElement("div",{ref:T,className:b.popoverArrow,style:M.arrow})))),document.body)};k.propTypes={virtualElement:s().object,editorState:s().object.isRequired,onChange:s().func.isRequired,boxModeChange:s().func,bars:s().arrayOf(s().string),popoverClassName:s().string,getUpdateFn:s().func};var A=(0,o.memo)((function(e){var t=e.visible,n=e.onRequestClose,r=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,y),c=(0,o.useRef)(null),u=(0,o.useMemo)((function(){return{getBoundingClientRect:function(){return(0,a.getVisibleSelectionRect)(window)||c.current}}}),[]);(0,o.useEffect)((function(){var e=(0,a.getVisibleSelectionRect)(window);e&&(c.current=e)}));var s=(0,o.useCallback)((function(){n&&n()}),[n]);return(0,o.useEffect)((function(){return document.body.addEventListener("click",s),function(){document.body.removeEventListener("click",s)}}),[s]),i().createElement(l.CSSTransition,{in:t,timeout:250,unmountOnExit:!0,classNames:"ArchEditor-fade"},i().createElement(k,g({},r,{virtualElement:u})))}));A.propTypes={visible:s().bool,onRequestClose:s().func,editorState:s().object.isRequired,onChange:s().func.isRequired,boxModeChange:s().func,bars:s().arrayOf(s().string),popoverClassName:s().string,getUpdateFn:s().func};var O=A;module.exports=t}();