react-filerobot-image-editor/lib/components/Layers/DesignLayer/AnnotationNodes/TextNode/TextNodeContentTextarea.js

React component version of filerobot image editor (FIE).

import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useRef,useEffect,Fragment,useCallback}from"react";import{Html}from"react-konva-utils";import{useSetAnnotation,useStore,useTextAnnotationEditing,useUpdateEffect}from"../../../../../hooks";import{ALLOWED_TEXT_PART_FORMATS,EVENTS,TEXT_EDITOR_ID,UNFOCUSED_MARKED_TEXT_SELECTOR_ID}from"../../../../../utils/constants";import getNodeText from"../../../../../utils/getNodeText";import{StyledTextNodeContentTextarea}from"./TextNode.styled";import{getNewFormattedContent,getQuotedFontFamily,pushNodeFlattenedContent,recursivelyRemoveCssProperties,dispatchTextContentChangingEvent}from"./TextNode.utils";var timeoutId,getPreparedStyle=function(a){var b=a.fontWeight,c=a.fontStyle,d=a.fontSize,e=a.fontFamily,f=a.fill,g=a.letterSpacing,h=a.baselineShift;return{fontWeight:b,fontStyle:c,fontSize:d,color:f,letterSpacing:g&&"".concat(g,"px"),transform:"translateY(".concat(-h,"px)"),display:h&&"inline-block",fontFamily:getQuotedFontFamily(e)}},TextNodeContentTextarea=function(a){var b=a.id,c=a.fill,d=a.opacity,e=a.fontFamily,f=a.fontSize,g=a.fontWeight,h=a.fontStyle,i=a.letterSpacing,j=a.lineHeight,k=a.textAlign,l=a.verticalAlign,m=a.text,n=a.width,o=a.height,p=useRef(),q=useRef(""),r=useStore(),s=r.toolId,t=r.designLayer,u=useSetAnnotation(),v=useTextAnnotationEditing(!0),w=v.commitTextUpdates,x=v.cancelTextEditing,y=v.getEditableSelectedUnfocusedTextData,z=function a(){var b=[];return pushNodeFlattenedContent(b,p.current,{}),b},A=function c(a){u(_objectSpread(_objectSpread({},a),{},{id:b,tmpText:z(),dismissHistory:!0}))},B=function a(){timeoutId&&clearTimeout(timeoutId),timeoutId=setTimeout(function(){p.current&&(q.current=Array.isArray(m)?m.map(function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.textContent,c=void 0===b?"":b;return c}).join(""):m)},0)},C=useCallback(function(a){if(p.current=a,p.current){var b=document.createRange(),c=window.getSelection();b.selectNodeContents(p.current),b.collapse(!1),c.removeAllRanges(),c.addRange(b),q.current=p.current.innerText}},[]),D=function a(){if(p.current){var c=dispatchTextContentChangingEvent(p,q.current,b);q.current=c.newText,A()}},E=function a(){var b=p.current.innerText;return w(b,z())},F=function a(){var b=!(0<arguments.length&&arguments[0]!==void 0)||arguments[0],c=!!(1<arguments.length&&arguments[1]!==void 0)&&arguments[1];E()&&!c&&x(!1,b)},G=function a(){F(!1)},H=function b(a){var c,d,e,f=a||{},g=f.detail,h=window.getSelection();if(0!==h.rangeCount&&g&&!Object.keys(g).some(function(a){return!ALLOWED_TEXT_PART_FORMATS.includes(a)})){var i=_objectSpread({},g);"undefined"==typeof i.fontSize||"number"!=typeof i.fontSize&&i.fontSize.endsWith("px")||(i.fontSize="".concat(i.fontSize,"px")),"undefined"!=typeof i.letterSpacing&&(i.letterSpacing="".concat(parseFloat(i.letterSpacing),"px")),"undefined"!=typeof i.baselineShift&&(i.transform="translateY(".concat(-i.baselineShift,"px)"),i.display="inline-block",delete i.baselineShift),g.fill&&(i.color=i.fill,delete i.fill);var j=h.getRangeAt(0),k=h.isCollapsed,l=k&&(null===(c=y())||void 0===c?void 0:c.element),m=k?l||p.current:j.extractContents(),n=(null===(d=getNodeText(m))||void 0===d?void 0:d.length)===(null===(e=getNodeText(p.current))||void 0===e?void 0:e.length),o=Object.keys(i);k&&!l&&recursivelyRemoveCssProperties(p.current,o);var q=getNewFormattedContent(m,i);m!==q[0]&&m.replaceChildren.apply(m,_toConsumableArray(q)),k||j.insertNode(m),A(n&&g)}};useEffect(function(){var a,b=function a(){var b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=b.detail.avoidEditingCancel,d=void 0!==c&&c;F(!1,d)};return null===(a=window)||void 0===a||a.addEventListener(EVENTS.SAVE_EDITED_TEXT_CONTENT,b),function(){var a;null===(a=window)||void 0===a||a.removeEventListener(EVENTS.SAVE_EDITED_TEXT_CONTENT,b)}},[]),useEffect(function(){B()},[m]),useEffect(function(){var a=null===t||void 0===t?void 0:t.getStage();return window&&(a.on("click",G),window.addEventListener(EVENTS.APPLY_TEXT_FORMAT,H)),function(){var b;a.off("click",G),null===(b=window)||void 0===b||b.removeEventListener(EVENTS.APPLY_TEXT_FORMAT,H),timeoutId=null}},[]),useUpdateEffect(function(){if(p.current){var a=E();x(!a,!1)}},[s]);var I=function b(a){return a.split("\n").map(function(a,b){return React.createElement(Fragment,{key:b},0!==b&&React.createElement("br",null),a)})};return React.createElement(Html,null,React.createElement(StyledTextNodeContentTextarea,{id:TEXT_EDITOR_ID,ref:C,onKeyDown:function b(a){return"Enter"===a.key?void(a.shiftKey||(a.preventDefault(),a.stopPropagation(),F())):void("Escape"===a.key&&(a.preventDefault(),a.stopPropagation(),x()))},onBlur:function a(){var b=window.getSelection();if(!(0>=b.rangeCount||b.isCollapsed)){var c=b.getRangeAt(0),d=c.extractContents(),e=document.createElement("mark");e.id=UNFOCUSED_MARKED_TEXT_SELECTOR_ID,e.appendChild(d),b.removeAllRanges(),c.insertNode(e),z()}},onFocus:function a(){var b,c=null===(b=y())||void 0===b?void 0:b.element;if(c){var d,e,f,g,h=document.createDocumentFragment(),i=[];c.childNodes.forEach(function(a,b,c){var d;if("BR"===a.nodeName)return void i.push(a);if(a.textContent||0===a.textContent){var e=0<b?c[b-1]:void 0,f="true"===(null===(d=a.dataset)||void 0===d?void 0:d.detached);"#text"!==(null===e||void 0===e?void 0:e.nodeName)||"#text"!==a.nodeName||f?i.push(a):e.textContent="".concat(e.textContent).concat(a.textContent)}}),"#text"===(null===(d=c.previousSibling)||void 0===d?void 0:d.nodeName)&&"#text"===i[0].nodeName&&"true"!==(null===(e=i[0].dataset)||void 0===e?void 0:e.detached)&&(i[0].textContent="".concat(c.previousSibling.textContent).concat(i[0].textContent),c.previousSibling.remove());var j=i[i.length-1];"#text"===(null===(f=c.nextSibling)||void 0===f?void 0:f.nodeName)&&"#text"===j.nodeName&&"true"!==(null===(g=j.dataset)||void 0===g?void 0:g.detached)&&(j.textContent="".concat(j.textContent).concat(c.nextSibling.textContent),c.nextSibling.remove()),h.replaceChildren.apply(h,i),c.replaceWith(h);var k=window.getSelection();k.removeAllRanges()}},onInput:D,contentEditable:!0,suppressContentEditableWarning:!0,$width:n,$height:o,$textAlign:k,$verticalAlign:l,$opacity:d,onPaste:function b(a){var c;a.preventDefault();var d=null===(c=(a.clipboardData||window.clipboardData).getData("text/plain"))||void 0===c?void 0:c.split(/\r?\n/),e=document.createDocumentFragment();d.forEach(function(a,b){0!==b&&e.appendChild(document.createElement("br")),e.appendChild(document.createTextNode(a))});var f=window.getSelection();f.rangeCount&&(f.deleteFromDocument(),f.getRangeAt(0).insertNode(e),f.collapseToEnd(),D())},style:{color:c,fontFamily:getQuotedFontFamily(e),fontSize:f,letterSpacing:i&&"".concat(i,"px"),lineHeight:j,fontWeight:g,fontStyle:h}},Array.isArray(m)?m.map(function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.textContent,c=void 0===b?"":b,d=a.style,e=a.isDetached,f=1<arguments.length&&arguments[1]!==void 0?arguments[1]:0;return React.createElement("span",{style:getPreparedStyle(d||{}),key:f,"data-detached":e},I(c))}):I(m)))};export default TextNodeContentTextarea;