Monaco Editor をiframe内に配置すると編集できなくなる問題。

えーと、VSCode使ってますか？
このVSCodeのエディタ部分をブラウザ上で使えたらいいですよね。
そんな時便利なMonaco Editorがあります。

Reactなら以下のようにします。

npm install @monaco-editor/react

実は昔作って放置していたVSCode用の拡張機能をWordPressのブロックエディタに移植しようとしてハマりました。

Monaco EditorをWordPressのブロックエディタ内に配置したところ編集できません。
レイアウトも崩れます。
以前MUIのデータグリッドをブロックに配置した時も崩れました。

何故なのか。

ブロックエディタはWordPress 6.2からiframe内に配置されるようになりました。
なのでスタイルシートをiframe内に継承できなかったりwindowからDOMを掘っていく過程で誤作動が起きます。
MUIは前者、Monaco Editorは両方です。

今回４日かけて原因を特定しました。

Monaco Editorは内部的にtextareaが使われており、
ＤＯＭのイベント「focus、blur」を受け取り、内部で論理的にフォーカス状態を保持しています。

問題は「現在、論理的にフォーカスされているか」を取得する際に、

window.document.activeElement === textarea

という判定を行います。

以下のようなHTMLがあったとします。

<html>
  <head>
    
  </head>
  <body onload="init()">

    <h1>IFrame のテスト</h1>
    
    <textarea id="outerText"></textarea>
    
    <iframe id="innerFrame" width="300" height="200">

      <textarea id="innerText"></textarea>
       
    </iframe>
    
  </body>
</html>

もしouterTextにフォーカスが当たれば判定は成功しますが、
問題はinnerTextにフォーカスが当たってた場合です。

iframe内の要素にフォーカスが当たっていた場合、document.activeElementで取得できるのはiframe本体です。

textarea.focus()でいったん内部のフォーカス状態はtrueの状態になりますが、
その後の調整で(今回の判定が使われ)、falseの状態に戻されます。
フォーカス状態がfalseなので様々な処理がなされません。

回避する

そこで回避法です。
内部ではiframeを意識してません。
でも実はシャドウＤＯＭを想定しているようです。

シャドウＤＯＭの場合は、textareaから先祖を上ってシャドウルートを見つけ出し、

shadowRoot.activeElement === textarea

という判定を行います。

つまりMonacoEditorをShadowDom内に配置すれば何とか回避できそうです。

以下にShadowDomの実験を記録を残しておきます。

activeElementはiframeだけでなくShadowDomに対しても同じような問題があり、
iframeとShadowDomが混在するとさらにややこしくなります。

function init()
{
  const inner = `<textarea id="innerText"></textarea>`;
  const frame = document.getElementById("innerFrame").contentDocument;
  frame.body.innerHTML = `<html><head></head><body><h2>Hello</h2><div id="shadowHost"></div></body></html>`;
  const host = frame.getElementById("shadowHost");
  const shadowRoot = host.attachShadow({mode: 'open'});
  shadowRoot.innerHTML = `${inner}`;
  
  setInterval(() => showMessage(), 5000);
}

function showMessage()
{
  console.log("--- log  ---")
  //console.log(document.getElementById('innerFrame').contentDocument.activeElement)
  //console.log(window.document.activeElement);
  
  const host = document.getElementById('innerFrame').contentDocument.getElementById('shadowHost');
  console.log(host.shadowRoot)
  const innerDom = host.shadowRoot.getElementById('innerText');
  console.log(innerDom)
  
  const shadowRoot = getShadowRoot(innerDom)
  console.log(shadowRoot)
  console.log(shadowRoot.activeElement)
  
  console.log("=== やりたいこと ===")
  console.log(innerDom === shadowRoot.activeElement)
}



// 以下はmonaco editorにてtextareaからシャドウDOMを取得する際に定義してある関数
function getShadowRoot(domNode) {
	while (domNode.parentNode) {
    if (domNode === domNode.ownerDocument.body) {
			// reached the body
			return null;
		}
		domNode = domNode.parentNode;
	}
	return isShadowRoot(domNode) ? domNode : null;
}

function isShadowRoot(node){
	return (
		node && !!node.host && !!node.mode
	);
}

innerTextにフォーカスを当てて実行結果を見てください。

Reactで使うなら

Reactならreact-shadowがある

Reactで実装

これを踏まえ、Reactで実装してみます。

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { __ } from '@wordpress/i18n';
import { Editor } from '@monaco-editor/react';
import root from 'react-shadow'


export default function Edit()
{

	return (
		<div>
			{ __( 'Block Editor Develop!', 'kurage' ) }

			<root.div className="monaco-shadow-dom">

				<link
					rel="stylesheet"
					type="text/css"
					data-name="vs/editor/editor.main"
					href="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/editor/editor.main.css"
					/>


				<Editor
					width="100%"
					height="300px"
					defaultLanguage="markdown"
					theme="vs-dark"
					onChange={e => console.log(e)}
				/>	
			</root.div>


		</div>
	);
}

今回はCSSをシャドウDOMに直接追加してますがスマートではありません。
それをどうするかはまた後で考えるとします。

monaco 内部の重要コード

textareaのfocus/blueイベントで内部で論理的にフォーカス状態を変更しています。
もしtextareaにフォーカスを当てた場合どうなるか追っていきます。

フォーカスが当たった時に実行される

そのメソッドの中身

オレンジの矢印の_setHasFocus()で論理的なフォーカス状態がセットされる(イベントを発火する)。

(1)フォーカスイベントを受け取ると実行されます。
(2)により問答無用でいったんtrueに設定される。
(3)その後(4)を実行し調整される。
(4)hasFocus()の結果で上書き設定される。

ちなみにfire()されたとき、論理的にフォーカス状態がセットされる場所。

現在の論理的なフォーカス状態を取得する

hasFocus()の内部が超重要。

textareaの先祖にシャドウＲＯＯＴがあればそのactiveElementとtextareaが比較される
無ければwindow.document.activeElementとtextareaが比較される。

iframe内にあるtextareaにはwindow.document.activeElementの対象にならない(常にiframe)ので、
シャドウＤＯＭを使用する。

DOMのたどり方。