arch-editor/lib/AtomicImage.js

Rich text editor with a high degree of customization.

/*! For license information please see AtomicImage.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 v}});var n=require("react"),r=e.n(n),a=require("prop-types"),i=e.n(a),o=require("classnames/bind"),c=e.n(o),l=require("./Tooltip"),u=e.n(l),m=require("./draftUtils"),s=require("./atomic"),d=require("./assets/default-image.png"),f=e.n(d),p={"atomic-image-container":"ArchEditor-atomic-image-container",atomicImageContainer:"ArchEditor-atomic-image-container","atomic-image":"ArchEditor-atomic-image",atomicImage:"ArchEditor-atomic-image",active:"ArchEditor-active","image-toolbar":"ArchEditor-image-toolbar",imageToolbar:"ArchEditor-image-toolbar","default-image":"ArchEditor-default-image",defaultImage:"ArchEditor-default-image",row:"ArchEditor-row",col:"ArchEditor-col","input-number":"ArchEditor-input-number",inputNumber:"ArchEditor-input-number","input-text":"ArchEditor-input-text",inputText:"ArchEditor-input-text","input-button":"ArchEditor-input-button",inputButton:"ArchEditor-input-button","radio-button":"ArchEditor-radio-button",radioButton:"ArchEditor-radio-button"};function g(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?g(Object(n),!0).forEach((function(t){y(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(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 h=c().bind(p);function v(e){var t,a,i=e.block,o=e.data,c=void 0===o?{}:o,l=e.readOnly,d=e.editorState,g=e.setEditorState,v=e.editing,O=e.setEditing,A=(0,n.useRef)(null),w=(0,n.useRef)(null),j=(0,n.useRef)(null),N=(t=(0,n.useState)({}),a=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i=[],o=!0,c=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){c=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(c)throw a}}return i}}(t,a)||function(e,t){if(e){if("string"==typeof e)return E(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)?E(e,t):void 0}}(t,a)||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.")}()),C=N[0],S=N[1];(0,n.useEffect)((function(){var e;return c.initial&&O(!0,(function(){e=setTimeout((function(){j.current&&j.current.scrollIntoView()}),0)})),function(){e&&clearTimeout(e)}}),[c,O]),(0,n.useEffect)((function(){S(c),w.current=y({},c.type,c)}),[c,v]);var k=(0,n.useCallback)((function(){var e=(0,m.updateBlockEntityData)(i,d,b(b({},C),{},{initial:!1}));g(e)}),[i,d,C,g]),T=(0,n.useCallback)((function(){var e=(0,m.removeBlockEntity)(i,d);g(e)}),[i,d,g]),P=(0,n.useCallback)((function(){O(!0)}),[O]),I=(0,n.useCallback)((function(){C.src&&O(!1,(function(){k()}))}),[k,C,O]),x=(0,n.useCallback)((function(){v?O(!1,(function(){T()})):T()}),[v,T,O]),B=(0,n.useCallback)((function(){O(!1)}),[O]),D=function(e){var t=e.target.value,n={type:t,src:"",width:280,height:""};S((function(e){return w.current[e.type]=e,w.current[t]||n}))},q=(0,s.useToolbar)({editing:!1,onEdit:P,onDelete:x}),R=C.src?r().createElement("img",{src:C.src,width:C.width,height:C.height,alt:C.src}):r().createElement("img",{src:f(),className:p.defaultImage,alt:"未选择图片"});return l?r().createElement("div",{className:p.atomicImage},R):v?r().createElement("div",{className:p.atomicImageContainer,ref:j},r().createElement("div",{className:h("atomicImage","active")},R,r().createElement("div",{className:p.imageToolbar},r().createElement("div",{className:p.row,style:{marginBottom:5}},r().createElement("label",{className:p.radioButton},r().createElement("input",{name:"imageType",type:"radio",value:"local",checked:"local"===C.type,onChange:D}),r().createElement("span",null,"本地资源")),r().createElement("label",{className:p.radioButton},r().createElement("input",{name:"imageType",type:"radio",value:"remote",checked:"remote"===C.type,onChange:D}),r().createElement("span",null,"远程资源"))),r().createElement("div",{className:p.row},r().createElement("span",{className:p.col},r().createElement("span",null,"宽："),r().createElement("input",{value:C.width,className:p.inputNumber,type:"number",onChange:function(e){S((function(t){return b(b({},t),{},{width:e.target.value})}))}})),r().createElement("span",{className:p.col},r().createElement("span",null,"高："),r().createElement("input",{value:C.height,className:p.inputNumber,type:"number",onChange:function(e){S((function(t){return b(b({},t),{},{height:e.target.value})}))}}))),"local"===C.type&&r().createElement("div",{className:p.row},r().createElement("span",null,"地址："),r().createElement("button",{className:p.inputButton,type:"button",title:"base64",onClick:function(){return A.current.click()}},C.src||"请选择本地图片",r().createElement("input",{ref:A,type:"file",accept:"image/png,image/jpeg,image/gif",hidden:!0,onChange:function(e){var t,n,r;t=e.target.files[0],n=function(e){S((function(t){return b(b({},t),{},{src:e})}))},(r=new FileReader).readAsDataURL(t),r.onload=function(e){n(e.target.result)}}}))),"remote"===C.type&&r().createElement("div",{className:p.row},r().createElement("span",null,"地址："),r().createElement("input",{value:C.src,type:"text",className:p.inputText,onChange:function(e){S((function(t){return b(b({},t),{},{src:e.target.value})}))},placeholder:"请输入图片资源地址"})))),r().createElement(s.EditToolbar,{onCancel:B,onOk:I,onDelete:x})):r().createElement(u(),{content:q},r().createElement("div",{className:p.atomicImage},R))}v.propTypes={block:i().object,data:i().any,readOnly:i().bool,editorState:i().object,setEditorState:i().func,editing:i().bool,setEditing:i().func},module.exports=t}();