package Ġes . gu ill erm oo re ll ana . key note dex . web . components . editable Ċ Ċ import Ġkotlinx . html . js . on Blur Function Ċ import Ġkotlinx . html . js . onClick Function Ċ import Ġkotlinx . html . js . on Focus Function Ċ import Ġkotlinx . html . js . on Input Function Ċ import Ġkotlinx . html . js . on KeyDown Function Ċ import Ġkotlinx . html . tab Index Ċ import Ġorg . w 3 c . dom . HTML InputElement Ċ import Ġorg . w 3 c . dom . events . Event Ċ import Ġreact . R Builder Ċ import Ġreact . R Handler Ċ import Ġreact . dom . defaultValue Ċ import Ġreact . dom . input Ċ import Ġreact . dom . span Ċ Ċ open Ġclass ĠEdit able Text Ġ: ĠEdit ableElement < HTML InputElement >() Ġ{ ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render Normal Component () Ġ{ ĊĠĠĠĠĠĠĠ Ġspan ( make Class String ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtab Index Ġ= Ġ" 0 " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Function Ġ= Ġ{ Ġstart Editing () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Focus Function Ġ= Ġ{ Ġstart Editing () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+ ( state . newValue Ġ?: Ġprops . value ) ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render Editing Component () Ġ{ ĊĠĠĠĠĠĠĠ Ġinput ( classes Ġ= Ġmake Class String ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠdefaultValue Ġ= Ġprops . value ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisabled Ġ= Ġis Disabled () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Input Function Ġ= Ġ{ Ġevent : ĠEvent Ġ-> Ġtext Changed ( event ) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Blur Function Ġ= Ġ{ Ġfinish Editing () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon KeyDown Function Ġ= Ġ{ Ġevent : ĠEvent Ġ-> Ġkey Down ( event ) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġref Ġ{ Ġrefs Ġ= Ġit Ġas ĠHTML InputElement ? Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ fun ĠR Builder . editable Text ( handler : ĠR Handler < Editable Element Props >) Ġ= Ġchild ( Editable Text :: class , Ġhandler ) Ċ