react-filerobot-image-editor/lib/hooks/useTextAnnotationEditing.js

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{useCallback,useState,useMemo,useEffect}from"react";import{ENABLE_TEXT_CONTENT_EDIT,SELECT_ANNOTATION,SET_FEEDBACK,SET_SELECTED_TEXT_PART}from"../actions";import emitCustomEvent from"../utils/emitCustomEvent";import{ALLOWED_TEXT_PART_FORMATS,EVENTS,UNFOCUSED_MARKED_TEXT_SELECTOR_ID}from"../utils/constants";import{cssStyleToJsCanvasProps,getCurrentSelectedNodeStyles}from"../components/Layers/DesignLayer/AnnotationNodes/TextNode/TextNode.utils";import useStore from"./useStore";import useEditableTextId from"./useEditableTextId";import useSetAnnotation from"./useSetAnnotation";import useUpdateEffect from"./useUpdateEffect";var useTextAnnotationEditing=function(){var a=!!(0<arguments.length&&void 0!==arguments[0])&&arguments[0],b=useStore(),c=b.dispatch,d=b.t,e=b.config.textContentRegex,f=b.annotations,g=b.selectionsIds,h=b.selectedTextPart,i=b.shownImageDimensions,j=void 0===i?{}:i,k=j.originalSourceInitialScale,l=useEditableTextId(),m=useSetAnnotation(),n=useState({}),o=_slicedToArray(n,2),p=o[0],q=o[1],r=function(){var a=document.querySelector("#".concat(UNFOCUSED_MARKED_TEXT_SELECTOR_ID));return a?{element:a,textContent:a.textContent,startIndex:+a.dataset.startIndex,endIndex:+a.dataset.endIndex}:void 0},s=function(a){c({type:SET_SELECTED_TEXT_PART,payload:a})},t=useMemo(function(){var a=f[l];return a?_objectSpread(_objectSpread({},a),p):f[g[0]]},[f,l,g,p]),u=useCallback(function(){var a=!(0<arguments.length&&void 0!==arguments[0])||arguments[0],b=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];c({type:ENABLE_TEXT_CONTENT_EDIT,payload:{editableTextId:null}}),b&&c({type:SELECT_ANNOTATION,payload:{annotationId:t.id}}),a&&m({id:l,tmpText:void 0}),emitCustomEvent(EVENTS.TEXT_CONTENT_CHANGE_CANCELLED,{annotationId:t.id,textContent:t.text})},[l,m]),v=function(){var a=window.getSelection(),b=r()||{},c=b.element,d=b.textContent,e=b.startIndex,f=b.endIndex;if(s({textContent:d,element:c,startIndex:e,endIndex:f,hasSelection:!a.isCollapsed||!!c}),0===a.rangeCount&&!c)return void q({});var g=!c&&a.getRangeAt(0),h=c||g.commonAncestorContainer,i=!c&&g.cloneContents().firstElementChild;if(h){var j=getCurrentSelectedNodeStyles("#text"!==h.nodeName&&(h.firstElementChild||h.firstChild)||h,null!==i&&void 0!==i&&i.style?cssStyleToJsCanvasProps(i.style.cssText,k):{},{originalSourceInitialScale:k});q(j)}};return useUpdateEffect(function(){null!==t&&void 0!==t&&t.tmpText&&v()},[null===t||void 0===t?void 0:t.tmpText]),useEffect(function(){return l&&a&&document.addEventListener("selectionchange",v),function(){a&&document.removeEventListener("selectionchange",v),l||s({})}},[l,a,k]),{currentTextAnnotation:t,commitTextUpdates:function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],f=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},g=f.cancelEditingAfterCommit;return e&&e.test(a)?(c({type:SET_FEEDBACK,payload:{feedback:{message:d("invalidTextContent")}}}),!1):(Array.isArray(b)&&0<b.length&&(m({id:l,text:b,tmpText:void 0}),emitCustomEvent(EVENTS.TEXT_CONTENT_EDITED,{id:l,textContent:a,formattedText:b,annotation:_objectSpread(_objectSpread({},t),{},{text:b})})),void 0!==g&&g&&u(!1),!0)},updateTextFormats:function(){var a,b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=!l||window.getSelection().isCollapsed&&!(null!==(a=r())&&void 0!==a&&a.element);if(c||Object.keys(b).some(function(a){return!ALLOWED_TEXT_PART_FORMATS.includes(a)})){var d=!1,e=Object.keys(b).reduce(function(a,c){return ALLOWED_TEXT_PART_FORMATS.includes(c)?_objectSpread(_objectSpread({},a),{},{textPartFormats:_objectSpread(_objectSpread({},a.textPartFormats),{},_defineProperty({},c,b[c]))}):(!d&&(c.startsWith("stroke")||c.startsWith("shadow"))&&(d=!0),_objectSpread(_objectSpread({},a),{},{generalTextFormats:_objectSpread(_objectSpread({},a.generalTextFormats),{},_defineProperty({},c,b[c]))}))},{generalTextFormats:void 0,textPartFormats:void 0}),f=e.generalTextFormats,g=e.textPartFormats;return m(_objectSpread(_objectSpread({id:t.id,dismissHistory:!!l,text:Array.isArray(t.text)&&g?t.text.map(function(a){return _objectSpread(_objectSpread({},a),{},{style:_objectSpread(_objectSpread({},a.style),g)})}):t.text},f),g)),q(function(a){return _objectSpread(_objectSpread(_objectSpread({},a),f),g)}),void(d&&u(!0))}emitCustomEvent(EVENTS.APPLY_TEXT_FORMAT,b)},cancelTextEditing:u,textContentRegex:e,getEditableSelectedUnfocusedTextData:r,replaceEditableUnfocusedSelectedText:function(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1];if(a){var c=r()||{},d=c.element,e=c.startIndex;if(d){var f;if(d.firstElementChild)d.firstElementChild.innerText=a,d.replaceChildren(d.firstElementChild);else if("#text"===(null===(f=d.firstChild)||void 0===f?void 0:f.nodeName)){var g=document.createElement("span");g.innerText=a,d.replaceChildren(g)}else d.innerText=a;d.dataset.endIndex=parseInt(e,10)+a.length,d.firstElementChild&&b&&(d.firstElementChild.dataset.detached="true")}}},selectedTextPart:h,editableTextId:l,triggerTextSaveAndClose:function(){l&&emitCustomEvent(EVENTS.SAVE_EDITED_TEXT_CONTENT)}}};export default useTextAnnotationEditing;