import React from "react" ; import { LocalizableString , Serializer , JsonObjectProperty , Base } from "survey-core" ; import { ReactElementFactory , SurveyElementBase , SvgIcon } from "survey-react-ui" ; import { CreatorBase , StringEditorViewModelBase } from "@survey/creator" ; export class SurveyLocStringEditor extends SurveyElementBase < any , any > { private baseModel : StringEditorViewModelBase ; private svStringEditorRef : React . RefObject < HTMLDivElement > ; private blurredByEscape : boolean = false ; constructor ( props ) { super ( props ) ; this . state = { changed : 0 } ; this . baseModel = new StringEditorViewModelBase ( this . locString , this . creator ) ; this . svStringEditorRef = React . createRef ( ) ; this . baseModel . blurEditor = ( ) => { this . svStringEditorRef . current . blur ( ) ; } ; } private get locString ( ) : LocalizableString { return this . props . locStr . locStr ; } private get creator ( ) : CreatorBase { return this . props . locStr . creator ; } private get style ( ) : any { return this . props . style ; } protected getStateElement ( ) { return this . baseModel ; } public get errorText ( ) : string { return this . baseModel . errorText ; } public componentDidMount ( ) { if ( ! this . locString ) return ; const self = this ; this . locString . onChanged = function ( ) { self . setState ( { changed : self . state . changed + 1 } ) ; } ; if ( this . locString [ "__isEditing" ] ) { this . svStringEditorRef . current . focus ( ) ; } } public componentWillUnmount ( ) { if ( ! this . locString ) return ; this . locString . onChanged = function ( ) { } ; } private get placeholder ( ) : string { return this . baseModel . placeholder ; } private get contentEditable ( ) : boolean { return this . baseModel . contentEditable ; } private onInput = ( event ) => { this . baseModel . onInput ( event . nativeEvent ) ; return this . baseModel . errorText ; } ; private onFocus = ( event ) => { this . baseModel . onFocus ( event . nativeEvent ) ; } ; private onKeyDown = ( event ) => { return this . baseModel . onKeyDown ( event . nativeEvent ) ; } ; private done = ( event ) => { this . baseModel . done ( event ) ; this . locString [ "__isEditing" ] = false ; } ; private edit = ( event ) => { this . svStringEditorRef . current . focus ( ) ; this . locString [ "__isEditing" ] = true ; this . baseModel . onClick ( event ) ; } ; private get className ( ) { return this . baseModel . className ( this . locString . renderedHtml ) ; } public render ( ) { if ( ! this . locString ) { return null ; } else { this . baseModel . setLocString ( this . locString ) ; } let control = null ; if ( this . locString . hasHtml ) { const htmlValue = { __html : this . locString . renderedHtml } ; control = ( < span ref = { this . svStringEditorRef } className = "sv-string-editor" contentEditable = { this . contentEditable } aria - placeholder = { this . placeholder } suppressContentEditableWarning = { true } dangerouslySetInnerHTML = { htmlValue } onBlur = { this . onInput } onFocus = { this . onFocus } onKeyDown = { this . onKeyDown } onClick = { this . edit } / > ) ; } else { control = ( < span ref = { this . svStringEditorRef } className = "sv-string-editor" contentEditable = { this . contentEditable } aria - placeholder = { this . placeholder } suppressContentEditableWarning = { true } onBlur = { this . onInput } onFocus = { this . onFocus } onKeyDown = { this . onKeyDown } onClick = { this . edit } > { this . locString . renderedHtml } < /span>); } return ( < span className = { this . className } > < span className = "svc-string-editor__content" > < div className = "svc-string-editor__border" onClick = { this . edit } > < SvgIcon className = "svc-string-editor__button svc-string-editor__button--edit" size = { 16 } iconName = { "icon-edit" } > < /SvgIcon> < /div> { control } < div className = "svc-string-editor__controls" onClick = { this . edit } > < /div> < /span> { this . errorText ? < span className = "svc-string-editor__error" > { this . errorText } < /span> : ""} < /span>); } } export const editableStringRendererName = "svc-string-editor" ; ReactElementFactory . Instance . registerElement ( editableStringRendererName , ( props ) => { return React . createElement ( SurveyLocStringEditor , props ) ; } ) ;