CLDR-18954 Use tags (chits) in ST value input dialog

[btangmu]

-Revise AddValue.vue to support new child component AddValueTags.vue

-Move template to top for consistency with most of our Vue components (we should decide on a consistent convention)

-New radio buttons enable choosing between default Text mode and new Tags mode

-Implement tags with a-tag from Ant Design Vue, see https://www.antdv.com/components/tag

-Display one tag for each Unicode code point; hover shows USV and Unicode name, see https://www.npmjs.com/package/unicode-name

-Enable inserting new tags with [+] buttons that appear between tags, before the first tag, and following the last tag

-Each tag has [x] button for deleting the tag

-Enable inputting a character either directly or by its USV (U+...)

CLDR-18954

• This PR completes the ticket.

ALLOW_MANY_COMMITS=true

[btangmu]

Please note that the ticket is still "investigate", and this PR is intended to illustrate possibilities rather than a final design.

Screenshots are based on running ST locally with these changes.

The input dialog shown above has new "Input mode" radio buttons, and the winning value has just been inserted by clicking the "Winning" button. The path is https://st.unicode.org/cldr-apps/v#/am/Gregorian/471a794c61b793f4 .

After choosing "Tags", hovering on the first tag shows the USV and character name.

After clicking on the leftmost [+], an input box is displayed for inserting a character. The user has typed "A".

After clicking on the rightmost [+], an input box is displayed for inserting a character. The user has typed "U+20000".

After pressing Return or clicking outside the input box, the character 𠀀 is displayed and the hover shows the USV and character name.

Hovering on "Text" or "Tags" shows description of the input mode. Note that a checkbox could be used instead, or there could be more than two modes. For example, sequences of ordinary characters could be combined in one tag, and separate tags could be displayed only for special characters such as thin spaces. Or, text and tags could be displayed simultaneously. Or, additional controls could be displayed for choosing from a palette of special characters to input.

[btangmu]

So far (commits 1 and 2) this PR only supports the conventional U+... notation (plus character names) to help identify characters. A likely enhancement would be to add support for codes like ❰TSP❱ for thin space; see https://cldr.unicode.org/translation/core-data/exemplars#key-to-escapes

[macchiati]

The goal is to be able to pull down a menu to enter a chit that looks like TSP, and have it appear at a place in the selection.

• Before (where | represents the cursor)

{0}|{1}

• After

{0}TSP|{1}

Moreover, clicking down, dragging with the mouse, using arrow keys, or or backspace treat TSP as an atomic unit.

The menu would contain the enums in CodePointEscaper (except for the SP and later).
You would not have a choice of Text vs Tags, nor need it.

The package I pointed to seems to do all of this, based on their demo. What you have in the screenshots doesn't do that. We can talk more next week about whether we can get a package that does (and can integrate easily).

[btangmu]

The package I pointed to seems to do all of this, based on their demo.

I tried the Tagify demo some more (specifically "Mix text & tags"), and I found that copy/paste doesn't actually work correctly with the tags. When you paste a tag, it's not a tag anymore. Even if we could fix or work around the bugs and use Tagify or something like it in a Vue component, it seems doubtful whether it would work well enough to meet the needs of all ST users, especially taking into account various input methods (like CJK) and RTL languages. The most robust interface would always give users the option of using standard text-editing features, with tags/chits as a non-obligatory alternative. That's my impression, though I'm open-minded.

I'm not sure what you mean by a "well" in this context. Do you mean a palette of tags, off to the side of the text input box? The closest thing to that in the Tagify demos might be the section with the header "Render suggestions list manually". I do think it would be possible to implement something like that with Ant Design Vue.

Also, the ticket description mentions an "XML representation" and using DAIP to convert it. That's not clear to me. It seems to me that the underlying value will always be a Unicode string without markup. If an alternative representation (such as XML) is needed to facilitate implementing the UI, that would be strictly the concern of the front end, so DAIP wouldn't be involved.

Anyway I've learned a lot from working on this code. I think Ant Design Vue has more potential than is obvious from the screenshots or the code I've written so far, though I doubt any library will perfectly support a mixture of text and tags for full-fledged copy/paste/etc., unless there is an option to edit the raw text without interference from the library.

I still need a clearer idea of what you have in mind, in terms of which paths would have the new features (all paths that allow thin spaces? exemplars? ...) and what the user interface would look like.

[macchiati]

Let's discuss this more in the infra meeting.

I'd composed a response earlier, but on my phone, and lost it when I put my phone away. So trying to reconstruct.

First, I'm not arguing for Tagify. The overall goal is to be something like google sheets, Format>Number>Custom date and time. Try it out.

The internal format is something like y-MM-dd (eg CLDR format). When it appears in the box at the top, that is converted to chits and literals. I can click down in the box and arrow around. I can also enter some literal text at any point, and add a chit at any point.

yielding

Hitting the delete key after a chit removes it.

What I can't do is select across chits, or copy and paste chits. So changing a chit means deleting and reinserting a different one. While that is a drawback, it is not a fatal one.

---

So with that level of functionality, how would we apply it to ST?

1. When viewing static text, we'd see the 'chitful' form: escaped characters as chits.
   h:mm:ssNBTSPa zzzz
2. When entering in text, if you clicked English or Winning to add a new item, you'd see escaped characters as chits (as above).
   • You'd always have pull-down to add a new chit (representing an escaped character). Maybe the ˇ as in the sheets box, or ▽, etc.
   • Whatever you put in gets converted back to the equivalent 'chitless' form on entry.
   • And so on.

---

If this works out, then we can look at expanding it for placeholders, either {0} style or H:mm:ss style.

hour (1):minutes (2):seconds (3)­NBTSP­day-period (PM) timezone (Chile Time)

for "{0} meters"

amount meters