Create new window type for SpecCharInputDemo

components/app-header.vue

@@ -21,8 +21,6 @@ const titlestring = computed(() => {
 	return data.value?.projectConfig?.logo?.string;
 });
 
-
-
 function createWindowId(_item: ItemType) {
 	/**
 	 * We intentionally do *not* use `item.target` for window id, because we don't want to
@@ -40,6 +38,16 @@ function createWindowTitle(item: ItemType) {
 
 function onSelectMenuItem(item: ItemType) {
 	switch (item.componentName) {
+		case "SpecCharInputDemo": {
+			addWindow({
+				id: createWindowId(null),
+				title: "Special Character Input Demo",
+				kind: "spec-char-input-demo",
+				params: {},
+			});
+			break;
+		}
+
 		case "BiblioQuery": {
 			addWindow({
 				id: createWindowId(item),
@@ -166,6 +174,20 @@ function onSelectMenuItem(item: ItemType) {
 					@select-menu-item="onSelectMenuItem"
 				/>
 			</div>
+
+			<button
+				class="btn"
+				@click="
+					onSelectMenuItem({
+						id: 'SpecCharInputDemo',
+						type: 'item',
+						componentName: 'SpecCharInputDemo',
+						params: {},
+					})
+				"
+			>
+				Showtime
+			</button>
 		</div>
 	</header>
 </template>

components/input-extended.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+defineProps(["modelValue"]);
+const emit = defineEmits(["update:modelValue"]);
+
+const inputElement = ref();
+
+const myString = ref("");
+watch(myString, (val) => {
+	emit("update:modelValue", val);
+});
+
+const specChars = [
+	"&#x2019;",
+	"&#x0294;",
+	"&#x0101;",
+	"&#x1e05;",
+	"&#x0295;",
+	"&#x1e0f;",
+	"&#x1e0f;&#x0323;",
+	"&#x0113;",
+	"&#x0121;",
+	"&#x01e7;",
+	"&#x1e25;",
+	"&#x012b;",
+	"&#x1d35;",
+	"&#x1e37;",
+	"&#x1e43;",
+	"&#x014d;",
+	"&#x1e5b;",
+	"&#x1e63;",
+	"&#x0073;&#x0320;",
+	"&#x0161;",
+	"&#x1e6d;",
+	"&#x1e6f;",
+	"&#x016b;",
+	"&#x1e93;",
+	"&#x017e;",
+];
+
+let cursorPosition = 0;
+const Type = (htmlChar: string): void => {
+	let decodedChar = parseHtmlEntities(htmlChar);
+	myString.value =
+		myString.value.substring(0, cursorPosition) +
+		decodedChar +
+		myString.value.substring(cursorPosition, myString.value.length);
+	cursorPosition += decodedChar.length;
+	setCursorPosition(cursorPosition);
+};
+
+const setCursorPosition = (pos: number) => {
+	if (inputElement.value.createTextRange) {
+		var range = inputElement.value.createTextRange();
+		range.move("character", pos);
+		range.select();
+	}
+	if (inputElement.value.selectionStart) {
+		inputElement.value.focus();
+		inputElement.value.setSelectionRange(pos, pos);
+	}
+};
+
+function parseHtmlEntities(str: string) {
+	return str.replace(/&#x([0-9a-f]{1,4});/gi, function (match, numStr) {
+		var num = parseInt(numStr, 16);
+		return String.fromCharCode(num);
+	});
+}
+
+const registerCursorPosition = (e: Event) => {
+	cursorPosition = e.target.selectionStart;
+};
+</script>
+
+<template>
+	<div>
+		<!-- eslint-disable-next-line vue/no-v-html -->
+		<button
+			v-for="(c, i) in specChars"
+			:key="i"
+			class="bg-gray-300 px-4 py-2 font-bold text-gray-800 hover:bg-gray-400"
+			@click="Type(c)"
+			v-html="c"
+		></button>
+	</div>
+	<div>
+		<!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
+		<input
+			ref="inputElement"
+			v-model="myString"
+			type="text"
+			class="m-2 rounded border px-3 py-2 leading-tight shadow"
+			@keyup="registerCursorPosition"
+			@click="registerCursorPosition"
+		/>
+	</div>
+</template>

components/spec-char-input-demo-window-content.vue

@@ -0,0 +1,14 @@
+<script setup>
+const myString = ref("");
+</script>
+
+<template>
+	<div>
+		<div>
+			<InputExtended v-model="myString" />
+		</div>
+		<div>
+			{{ myString }}
+		</div>
+	</div>
+</template>

components/window-content.vue

@@ -9,5 +9,9 @@ const props = defineProps<Props>();
 <template>
 	<GeoMapWindowContent v-if="props.item.kind === 'geo-map'" :params="props.item.params" />
 	<TextWindowContent v-if="props.item.kind === 'text'" :params="props.item.params" />
+	<SpecCharInputDemoWindowContent
+		v-if="props.item.kind === 'spec-char-input-demo'"
+		:params="props.item.params"
+	/>
 	<pre v-else>{{ props }}</pre>
 </template>

package.json

@@ -48,6 +48,7 @@
 		"is-ci": "^3.0.1",
 		"leaflet": "^1.9.4",
 		"lucide-vue-next": "^0.289.0",
+		"nanoid": "^5.0.3",
 		"npm-run-all2": "^6.1.1",
 		"nuxt": "^3.7.4",
 		"pinia": "^2.1.7",

stores/use-windows-store.ts

@@ -61,6 +61,11 @@ export interface TextWindowItem extends WindowItemBase {
 	};
 }
 
+export interface SpecCharInputDemo extends WindowItemBase {
+	kind: "spec-char-input-demo";
+	params: object;
+}
+
 export type WindowItem =
 	| BibliographyQueryWindowItem
 	| CorpusQueryWindowItem
@@ -71,6 +76,7 @@ export type WindowItem =
 	| DictionaryQueryWindowItem
 	| GeoMapWindowItem
 	| SampleTextWindowItem
+	| SpecCharInputDemo
 	| TextWindowItem;
 
 export type WindowItemKind = WindowItem["kind"];

utils/is-window-type.ts

@@ -12,6 +12,7 @@ export const windowTypeMap: Record<WindowType, WindowItemKind> = {
 	SampleText: "sample-text",
 	Text: "text",
 	WMap: "geo-map",
+	SpecCharInputDemo: "spec-char-input-demo",
 };
 
 export function isWindowType(value: string | undefined): value is WindowType {