We need a way input our special transcription characters

[simar0at]

Maybe something like https://www.npmjs.com/package/vue3-emoji-picker

[ttechnicus]

Recently I did a minor investigation how difficult it is to create our own input component. See https://github.com/acdh-oeaw/vicav-vue3/tree/33-special-transcription-characters this was approx. 2 hrs of play/work. The cursor position is buggy, but you can get the idea

[simar0at]

From the time I created something like that using jQuery I know that the cursor positioning is the most problematic part so this is a major thing to solve before we can decide that rolling our own is a viable solution.

[ttechnicus]

I fixed the cursor position bug, and polished the code. Tested it in Firefox and Edge, too, successfully. Try it, it is a usable component now.

[simar0at]

Talked with @ctot-nondef about this, so please show him what you have.
You could add the feature to the corpus query component in the corpus-query-component branch to show how it works. That component is now ready to search for unicode characters. Here is a list of characters for a test keyboard. ēṛṯẓūīōāšḏṭǧḥžṣḏ̣ʕʔġḅṃ We will have the list in the data coming from the endpoint later.

[simar0at]

If you want me to try something I need also instructions. I see the code is autodeployed here: https://33-special-transcription-characters.acdh-cluster-2.arz.oeaw.ac.at/?w=W10=&a=smart-tile

[ttechnicus]

Documentation for the InputExtended™ component

The InputExtended™ component is a wrapper on the HTML text input element, adding a variable number of buttons to input string snippets (special characters, emojis &c.).

In this code branch the components/spec-char-input-demo-window-content.vue file illustrates its usage:

<InputExtended v-model="myString" :string-snippets="specialCharacters" />

The parameter myString is the string to be edited. The specialCharacters variable is an array of strings which are rendered as buttons which, when pressed, insert the corresponding value into the edited string at the cursor position.

Styling can be easily applied to the component. Its container has a class named ie (shorthand for InputExtended™), the button container has ie-buttons, and the input field container has ie-textinput:

<div class="ie">
    <div class="ie-buttons">
        <button …></button>
    </div>
    <div class="ie-textinput">
        <input type="text" … />
    </div>
</div>

In this code branch a button has been created on the menu bar with the label "Showtime" to open the demo window.

The component is implemented in the file components/input-extended.vue.

[ttechnicus]

As per our agreement with @simar0at I added the InputExtended component to the corpus query code branch, now associated with issue #101 .

This present task can be regarded as a Proof of Concept, and can be closed by now.