[Userscript] Keisei 形声 Semantic-Phonetic Composition

I put this at the end of the UserScript. Works well for Kanji info pages.

(function () {
  'use strict';

  function keisei(k) {
    document.getElementById('keisei_explanation').textContent = '';
    document.getElementById('keisei_main_phonetic_grid').textContent = '';
    wk_keisei.populateKeiseiSection({
      kan: k,
      phon: wk_keisei.kdb.getKPhonetic(k),
    });
  }

  new MutationObserver((muts) => {
    for (const mut of muts) {
      for (const n of mut.addedNodes) {
        if (n instanceof HTMLFormElement) {
          return;
        }
      }
    }

    const elFormContainer = document.querySelector('#keisei_section h3');
    if (elFormContainer && !elFormContainer.querySelector('form')) {
      const elForm = document.createElement('form');
      elForm.style.display = 'inline-block';
      elForm.innerHTML = `<input type="text" lang="ja" value="${
        wk_keisei.currentSubject.kan || ''
      }" style="all:unset; margin-left:0.1em; cursor:pointer">`;
      elForm.onsubmit = (ev) => {
        ev.preventDefault();
        const [elInput] = elForm.elements;
        const [v] = elInput.value
          .replace(/[\p{scx=Hiragana}\p{scx=Katakana}\w\s]/gu, '')
          .trim();
        if (v) {
          keisei(v);
        }
      };
      elFormContainer.append(' of ', elForm);
    }
  }).observe(document.body, {
    childList: true,
    subtree: true,
  });

  Object.assign(typeof unsafeWindow === 'undefined' ? window : unsafeWindow, {
    keisei,
    wk_keisei,
  });
})();

Well, there aren’t contents for many Kanji, such as 繋 in 繋がり. Perhaps Kanji Outlier’s Dictionary / app is a better idea?

About the looks (Click and edit. That is a inconspicuous text input.):