How to customize the CompositionEvent UI in JavaScript for IME keyboard logic on various browsers?

I just encountered What is JavaScript's CompositionEvent? Please give examples From the little images/videos available on the topic, and given that I only ever really use a English/Latin keyboard on Chrome desktop or Safari iOS, my exposure to things like Chinese/Pinyin IME editors is limited.

First off, how can I test this on say Chinese using standard Pinyin input methods, or Japanese or Korean, for example?

Typing into the example box here for Spanish ´ e = é (Mac OPT+e then e) gives logs:

compositionstart: 
compositionupdate: ´
compositionupdate: é
compositionend: é

Working with ClaudeAI for a prototype using TipTap editor system, I end up with this, relevant portion of which is this:

const editor = useEditor({
  extensions: [
    StarterKit,
    Placeholder.configure({
      placeholder: 'Start typing... IME input is supported (中文, 日本語, 한국어, etc.)'
    })
  ],
  content: '',
  onUpdate: ({ editor }) => {
    setEditorContent(editor.getHTML());
  },
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[300px] p-4',
      spellcheck: 'false'
    },
    handleDOMEvents: {
      // Handle composition start (IME input begins)
      compositionstart: (view, event) => {
        const selection = view.state.selection;
        setImeState(prev => ({
          ...prev,
          isComposing: true,
          compositionStart: selection.from,
          compositionEnd: selection.to,
          compositionText: ''
        }));
        return false;
      },
      
      // Handle composition update (IME input changes)
      compositionupdate: (view, event) => {
        const compositionEvent = event as CompositionEvent;
        setImeState(prev => ({
          ...prev,
          compositionText: compositionEvent.data || ''
        }));
        return false;
      },
      
      // Handle composition end (IME input confirmed)
      compositionend: (view, event) => {
        const compositionEvent = event as CompositionEvent;
        setImeState(prev => ({
          ...prev,
          isComposing: false,
          compositionText: '',
          compositionStart: 0,
          compositionEnd: 0
        }));
        
        // Ensure the final composed text is properly inserted
        if (compositionEvent.data) {
          const { state, dispatch } = view;
          const { from, to } = state.selection;
          const tr = state.tr.insertText(compositionEvent.data, from, to);
          dispatch(tr);
        }
        
        return false;
      },
      
      // Handle input events for better IME support
      input: (view, event) => {
        // Let Tiptap handle regular input events
        // This ensures compatibility with IME composition
        return false;
      },
      
      // Handle keydown for special IME cases
      keydown: (view, event) => {
        // Don't interfere with IME composition
        if (imeState.isComposing) {
          // Allow certain keys during composition
          const allowedKeys = ['Escape', 'Tab', 'Enter'];
          if (!allowedKeys.includes(event.key)) {
            return false;
          }
        }
        return false;
      }
    }
  }
});

So it seems like these hooks will be called when some sort of native keyboard input tool writes to the browser on desktop or mobile/phone/etc.. Is that how it works? Like do you have to install an external keyboard tool to type in Chinese/Pinyin IME, on iPhone or Desktop Chrome? If so, (tangent but) I'd like to know where to find one, as I'm confused how to get started testing this.

The main question is, what can I customize with the IME UI?

I am thinking for a fantasy language like the one I've made here which uses a code editor in the browser, and when you type an English word then press tab, it converts it into the native word (which also uses Latin script, but theoretically it could use a different script).

So how would I properly go about building a sort of IME for a custom language, that works in the browser and phone in the normal places?

Just looking for high levels of:

1. What are my options of how to play with IME for Chinese or a custom language?
2. What is possible to customize (UI-wise, in browser Desktop, and iOS Safari)?
3. What is not possible to customize?
4. Should I just be using what's there, or how much of the wheel do I need to reinvent basically?