arch-editor/lib/BlockToolbar.js

Rich text editor with a high degree of customization.

/*! For license information please see BlockToolbar.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 w}});var n=require("react"),r=e.n(n),o=require("prop-types"),l=e.n(o),i=require("classnames/bind"),a=e.n(i),c=require("uuid"),u=require("draft-js"),m=require("./default"),s=require("./draftUtils"),d=require("./Provider"),f=require("./Icon"),p=e.n(f),y=require("./Tooltip"),E=e.n(y),h=require("./CellSelector"),b=e.n(h),g={"block-toolbar":"ArchEditor-block-toolbar",blockToolbar:"ArchEditor-block-toolbar",inner:"ArchEditor-inner","bar-button":"ArchEditor-bar-button",barButton:"ArchEditor-bar-button",active:"ArchEditor-active","sum-words":"ArchEditor-sum-words",sumWords:"ArchEditor-sum-words",divider:"ArchEditor-divider"};function v(e,t){if(e){if("string"==typeof e)return k(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)?k(e,t):void 0}}function k(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 A=a().bind(g),C=["unstyled","h1","h2","h3","divider","ol","ul","divider","image","table","formula"],S={fontSize:14,marginRight:5},B={display:"inline-block",lineHeight:1,margin:0,padding:5,color:"#fff"},T={display:"inline-block",lineHeight:1.7,margin:0,padding:0,marginLeft:20,marginRight:10,fontSize:14},U=function(e){var t=e.editorState,o=e.onChange,l=e.bars,i=void 0===l?C:l,a=e.extraBarMaps,f=void 0===a?[]:a,y=e.showNumberOfWords,h=(0,n.useContext)(d.ArchEditorContext),U=h.contextEditorState,w=h.setContextEditorState,M=(0,n.useMemo)((function(){return t||U||m.defaultEditorState}),[U,t]),F=(0,n.useCallback)((function(){return t?o:U?w:null}),[U,t,o,w]),R=(0,n.useMemo)((function(){return F()}),[F]),O=(0,n.useCallback)((function(e){var t=function(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,l=[],i=!0,a=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(a)throw o}}return l}}(e,t)||v(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.")}()}(e,2),n=t[0],r=t[1],o=u.EditorState.createEmpty().getCurrentContent(),l=(0,u.convertToRaw)(o),i=new Array(n).fill().map((function(){return{key:(0,c.v4)(),columns:new Array(r).fill().map((function(){return{key:(0,c.v4)(),rawContentState:l}}))}})),a=(0,s.createBlockEntity)(M,"TABLE","MUTABLE",{initial:!0,rows:i}),m=u.AtomicBlockUtils.insertAtomicBlock(a.editorState,a.entityKey," ");R&&R(m)}),[M,R]),L=(0,n.useCallback)((function(e){return Array.isArray(e)?e:"function"==typeof e?e(C):[]}),[]),q=(0,n.useMemo)((function(){return L(i)}),[i,L]),j=(0,n.useMemo)((function(){return[{name:"UNSTYLED",tooltip:r().createElement(r().Fragment,null,r().createElement("span",{style:S},"正文"),r().createElement("span",null,"Ctrl+Alt+T")),component:r().createElement(p(),{name:"text"}),onClick:function(){var e=u.RichUtils.toggleBlockType(M,"unstyled"),t=(0,s.takeSelectionFocus)(e);R&&R(t)}},{name:"H1",tooltip:r().createElement(r().Fragment,null,r().createElement("h1",{style:B},"H1"),r().createElement("span",null,"Ctrl+Alt+F1")),component:r().createElement(p(),{name:"h1"}),active:"header-one"===u.RichUtils.getCurrentBlockType(M),onClick:function(){var e=u.RichUtils.toggleBlockType(M,"header-one"),t=(0,s.takeSelectionFocus)(e);R&&R(t)}},{name:"H2",tooltip:r().createElement(r().Fragment,null,r().createElement("h2",{style:B},"H2"),r().createElement("span",null,"Ctrl+Alt+F2")),component:r().createElement(p(),{name:"h2"}),active:"header-two"===u.RichUtils.getCurrentBlockType(M),onClick:function(){var e=u.RichUtils.toggleBlockType(M,"header-two"),t=(0,s.takeSelectionFocus)(e);R&&R(t)}},{name:"H3",tooltip:r().createElement(r().Fragment,null,r().createElement("h3",{style:B},"H3"),r().createElement("span",null,"Ctrl+Alt+F3")),component:r().createElement(p(),{name:"h3"}),active:"header-three"===u.RichUtils.getCurrentBlockType(M),onClick:function(){var e=u.RichUtils.toggleBlockType(M,"header-three"),t=(0,s.takeSelectionFocus)(e);R&&R(t)}},{name:"OL",tooltip:r().createElement(r().Fragment,null,r().createElement("ol",{style:T},r().createElement("li",null,"🌞"),r().createElement("li",null,"🌛")),r().createElement("span",null,"Ctrl+Alt+O")),component:r().createElement(p(),{name:"ol"}),active:"ordered-list-item"===u.RichUtils.getCurrentBlockType(M),onClick:function(){var e=u.RichUtils.toggleBlockType(M,"ordered-list-item"),t=(0,s.takeSelectionFocus)(e);R&&R(t)}},{name:"UL",tooltip:r().createElement(r().Fragment,null,r().createElement("ul",{style:T},r().createElement("li",null,"🌞"),r().createElement("li",null,"🌛")),r().createElement("span",null,"Ctrl+Alt+U")),component:r().createElement(p(),{name:"ul"}),active:"unordered-list-item"===u.RichUtils.getCurrentBlockType(M),onClick:function(){var e=u.RichUtils.toggleBlockType(M,"unordered-list-item"),t=(0,s.takeSelectionFocus)(e);R&&R(t)}},{name:"IMAGE",tooltip:"图片",component:r().createElement(p(),{name:"image"}),onClick:function(){var e=(0,s.createBlockEntity)(M,"IMAGE","MUTABLE",{initial:!0,type:"local",src:"",width:280,height:""}),t=u.AtomicBlockUtils.insertAtomicBlock(e.editorState,e.entityKey," ");R&&R(t)}},{name:"TABLE",tooltip:"表格",component:r().createElement(b(),{rows:10,cols:10,onSelect:O})},{name:"FORMULA",tooltip:"数学公式",component:r().createElement(p(),{name:"formula"}),onClick:function(){var e=(0,s.createBlockEntity)(M,"FORMULA","MUTABLE",{initial:!0,raw:""}),t=u.AtomicBlockUtils.insertAtomicBlock(e.editorState,e.entityKey," ");R&&R(t)}}].concat(function(e){if(Array.isArray(e))return k(e)}(e=f)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||v(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}());var e}),[M,f,O,R]),x=(0,n.useCallback)((function(e){return e.map((function(e,t){return"divider"===e?{name:"divider",key:"divider".concat(t)}:j.find((function(t){return t.name&&t.name.toLowerCase()===e}))})).filter(Boolean)}),[j]),H=(0,n.useMemo)((function(){return x(q)}),[q,x]),I=(0,n.useCallback)((function(e,t){if(!t)return 0;var n=e.getCurrentContent().getPlainText();return(n=n.replace(/\n/g,"")).length}),[]),N=(0,n.useMemo)((function(){return I(M,y)}),[M,y,I]);return r().createElement("div",{className:g.blockToolbar},r().createElement("ul",{className:g.inner},H.map((function(e){if("divider"===e.name)return r().createElement("span",{key:e.key,className:g.divider});var t=n.Fragment,o={};return e.tooltip&&(t=E(),o={content:e.tooltip}),r().createElement("li",{key:e.name},r().createElement(t,o,r().createElement("button",{className:A("barButton",{active:e.active}),type:"button",onClick:e.onClick},e.component)))})),y&&r().createElement("li",null,r().createElement("span",{className:g.sumWords},"".concat(N," 字")))))};U.propTypes={editorState:l().object,onChange:l().func,bars:l().oneOfType([l().arrayOf(l().string),l().func]),extraBarMaps:l().array,showNumberOfWords:l().bool};var w=U;module.exports=t}();