Optimize the IME input experience in tiddlywiki

oeyoews · January 25, 2024, 3:04pm

When writing the cm6 plugin, I found that tiddlywiki did not optimize the input method editor. With the help of the composing event, I solved the problem of the cm6 plugin very well.

However, in tiddlywiki, each input box did not optimize the IME. Every input Updates will be triggered, such as the search page, tags input interface, etc. Although for editors, throttling is used to control the refresh of the preview page, it would be more appropriate to add composition events for further optimization.

Can this problem be solved through compositionstart event @jeremyruston

jeremyruston · January 27, 2024, 4:00pm

Hi @oeyoews that you, I wasn’t aware of this issue.

What does TiddlyWiki need to do? Is it just a matter of trapping the compositionend event and treating it as we do the input event?

oeyoews · January 27, 2024, 4:09pm

Yes, just don’t trigger the event during ime input

linonetwo · January 27, 2024, 4:47pm

I was using this too

github.com

tiddly-gittly/tw-command-palette/blob/66be2b84211158c10204234398357dcfbefd99b0/src/commandpalette/CommandPaletteWidget.ts#L615-L629

    
      
          // Fix IME issue
          this.input.addEventListener(
            'compositionstart',
            () => {
              this.isIMEOpen = true;
            },
            false,
          );
          this.input.addEventListener(
            'compositionend',
            () => {
              this.isIMEOpen = false;
            },
            false,
          );

It is a standard way to fix IME issue. Only people inside CJK region will have this issue, so it is counting on us.

oeyoews · January 28, 2024, 2:58am

I tested it on your website and found that it had no effect because you only judged the ime status in validateSelection. Here are some minor changes I made.

For input boxes created by js, developers can easily control them through code, but for ordinary wikitext created html search boxes, this is not easy to do, so it is easier to make tiddlywiki core support this