import { renderWYSIWYGMode } from "../components/WYSIWYGMode" ; import { runExtension } from "../entry-helpers" ; const toggleWysiwyg = ( textarea ) => { const parent = textarea . parentElement ; const display = textarea . style . display ; textarea . style . display = "none" ; const reactRoot = document . createElement ( "div" ) ; reactRoot . id = `roamjs-wysiwyg-root-${ textarea . id }` ; parent . appendChild ( reactRoot ) ; renderWYSIWYGMode ( reactRoot , textarea , async ( ) => { textarea . style . display = display ; } ) ; } ; runExtension ( "wysiwyg-mode" , ( ) => { document . addEventListener ( "keydown" , ( e ) => { if ( e . code === "KeyW" && e . altKey ) { const target = e . target as HTMLElement ; if ( target . tagName === "TEXTAREA" ) { const textarea = target as HTMLTextAreaElement ; toggleWysiwyg ( textarea ) ; e . stopImmediatePropagation ( ) ; e . preventDefault ( ) ; } } } ) ; document . addEventListener ( "mousedown" , ( e ) => { if ( e . altKey ) { const target = ( e . target as HTMLElement ) . closest ( ".roam-block" ) ; if ( target ?. tagName === "DIV" ) { const blockId = target . id ; const findText = ( n ) => { const ts = ( n as HTMLElement ) . getElementsByTagName ( "textarea" ) ; return ts . length && ts [ 0 ] . id === blockId ; } ; const observer = new MutationObserver ( ( records , o ) => { const record = records . find ( ( r ) => Array . from ( r . addedNodes ) . findIndex ( findText ) >= 0 ) ; if ( record ) { const div = Array . from ( record . addedNodes ) . find ( findText ) as HTMLElement ; if ( div ) { const textarea = div . getElementsByTagName ( "textarea" ) [ 0 ] ; toggleWysiwyg ( textarea as HTMLTextAreaElement ) ; o . disconnect ( ) ; } } } ) ; observer . observe ( target . parentElement , { childList : true , subtree : true , } ) ; } } } ) ; } ) ;