fix(plugin-emoji): update styles to increase support (#94)

* add 'input' event handler for mobile browsers w/ virtual keyboard * [plugin-emoji] update 'default.css' fix #90 change from a block element w/ inline buttons to a flexbox layout * format and adjustments --------- Co-authored-by: BearToCode <[email protected]>
BearToCode · Jul 2, 2024 · 37ba67d · 37ba67d
1 parent cb70710
commit 37ba67d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/packages/plugin-emoji/src/lib/Emoji.svelte b/packages/plugin-emoji/src/lib/Emoji.svelte
@@ -77,10 +77,11 @@
 		}
 	}
 
-	function handleKeyInput(e: KeyboardEvent) {
+	function handleKeyInput(e: Event) {
 		if (!carta.input) return;
+		const event = e as InputEvent;
 
-		if (e.inputType === 'insertText' && e.data === ':') {
+		if (event.inputType === 'insertText' && event.data === ':') {
 			if (!visible) {
 				// open
 				visible = true;
@@ -99,18 +100,18 @@
 			return;
 		}
 		if (
-			e.inputType === 'insertText' ||
-			e.inputType === 'insertCompositionText' ||
-			e.inputType === 'deleteContentBackward'
+			event.inputType === 'insertText' ||
+			event.inputType === 'insertCompositionText' ||
+			event.inputType === 'deleteContentBackward'
 		) {
 			filter = carta.input.textarea.value.slice(
 				colonPosition + 1,
 				carta.input.textarea.selectionStart
 			);
 
-			const last_char = filter.length ? filter[filter.length - 1] : '';
+			const lastChar = filter.length ? filter[filter.length - 1] : '';
 
-			if (last_char === ' ') {
+			if (lastChar === ' ') {
 				visible = false;
 				return;
 			}

diff --git a/packages/plugin-emoji/src/lib/default.css b/packages/plugin-emoji/src/lib/default.css
@@ -6,9 +6,11 @@
 	--contrast-background: #f1f1f1;
 	--hover-background: #e3e1e1;
 
-	display: grid;
-	grid-template-columns: repeat(8, minmax(0, 1fr));
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: start;
 
+	width: 19rem;
 	max-height: 14rem;
 	overflow-x: auto;
 	overflow-y: auto;
@@ -23,18 +25,18 @@
 .carta-emoji button {
 	background: var(--contrast-background);
 
+	cursor: pointer;
 	display: inline-block;
 	border-radius: 4px;
 	border: 0;
 	padding: 0;
 	margin: 0.175rem;
 
-	cursor: pointer;
-
+	min-width: 2rem;
 	height: 2rem;
-	width: 2rem;
 	font-size: 1.2rem;
 	line-height: 100%;
+	text-align: center;
 	white-space: nowrap;
 }