arch-editor/lib/AtomicFormula.js

Rich text editor with a high degree of customization.

/*! For license information please see AtomicFormula.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,r=require("react"),o=e.n(r),a=require("prop-types"),i=e.n(a),l=require("classnames/bind"),c=e.n(l),u=require("react-katex"),f=require("./draftUtils"),s=require("./atomic"),d=require("./Tooltip"),m=e.n(d),p=require("./Icon"),E=e.n(p),b=require("./Modal"),y=e.n(b),v=require("./LaTexDoc"),h=e.n(v),g={"formula-container":"ArchEditor-formula-container",formulaContainer:"ArchEditor-formula-container",formula:"ArchEditor-formula",active:"ArchEditor-active",placeholder:"ArchEditor-placeholder","tip-info":"ArchEditor-tip-info",tipInfo:"ArchEditor-tip-info","advise-info":"ArchEditor-advise-info",adviseInfo:"ArchEditor-advise-info","input-tex":"ArchEditor-input-tex",inputTex:"ArchEditor-input-tex"};function k(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function C(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,a=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return S(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)?S(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 S(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=c().bind(g);function O(e){var t=e.block,a=e.data,i=e.readOnly,l=e.editorState,c=e.setEditorState,d=e.editing,p=e.setEditing,b=(0,r.useRef)(null),v=(0,r.useRef)(null),S=C((0,r.useState)(""),2),O=S[0],T=S[1],j=C((0,r.useState)(!1),2),q=j[0],w=j[1];(0,r.useEffect)((function(){var e;return a.initial&&p(!0,(function(){e=setTimeout((function(){v.current&&v.current.scrollIntoView()}),0)})),function(){e&&clearTimeout(e)}}),[a,p]),(0,r.useEffect)((function(){T(a.raw)}),[a,d]);var x=(0,r.useCallback)((function(){var e=(0,f.removeBlockEntity)(t,l);c(e)}),[t,l,c]),I=(0,r.useCallback)((function(){var e=(0,f.updateBlockEntityData)(t,l,{raw:O,initial:!1});c(e)}),[t,l,O,c]),N=(0,r.useCallback)((function(){p(!0)}),[p]),M=(0,r.useCallback)((function(){O&&p(!1,(function(){I()}))}),[I,O,p]),D=(0,r.useCallback)((function(){d?p(!1,(function(){x()})):x()}),[d,x,p]),P=(0,r.useCallback)((function(){p(!1)}),[p]),R=(0,r.useCallback)((function(){w(!1)}),[]),_=(0,r.useCallback)((function(e){return o().createElement("div",{className:g.tipInfo},e.message)}),[]),z=(0,s.useToolbar)({editing:!1,onEdit:N,onDelete:D}),B=O?o().createElement(u.BlockMath,{math:String.raw(n||(n=k(["",""])),O),renderError:_}):o().createElement("span",{className:g.placeholder},"公式展示区",!d&&"（无公式）");return i?o().createElement("div",{className:g.formula},B):d?o().createElement("div",{className:g.formulaContainer,ref:v},o().createElement("div",{className:A("formula",{active:d})},B,o().createElement("textarea",{className:g.inputTex,placeholder:"请输入Tex表达式(Ctrl+Enter 提交，Esc 返回)",ref:b,value:O,onChange:function(e){T(e.target.value)},autoFocus:!0,rows:3,onKeyDown:function(e){e.ctrlKey&&13===e.keyCode&&M(),27===e.keyCode&&P()}}),o().createElement("div",{className:g.adviseInfo},o().createElement(E(),{name:"question",style:{fontSize:15,marginRight:3}}),o().createElement("span",null,"您还不了解Tex表达式？",o().createElement("button",{type:"button",onClick:function(){return w(!0)}},"查看规则")))),o().createElement(s.EditToolbar,{onCancel:P,onOk:M,onDelete:D}),o().createElement(y(),{isOpen:q,onRequestClose:R},o().createElement(h(),null))):o().createElement(m(),{content:z},o().createElement("div",{className:g.formula},B))}O.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}();