feat(unicode): accept unicode characters through the app's input handler to be handled correctly; key introduce isUnicode method

With the `isUnicode` method the read unicode characters from the user
can be checked against displayable text and rendered on the screen accordingly.

src/element.zig

@@ -631,7 +631,7 @@ pub fn TextField(Model: type, Event: type) type {
 
                     // TODO should this also accept `input.Enter` and insert `\n` into the value of the field?
                     // usual input keys
-                    if (key.isAscii()) try this.input.insert(this.allocator, this.input.items.len - this.cursor_offset, key.cp);
+                    if (key.isUnicode()) try this.input.insert(this.allocator, this.input.items.len - this.cursor_offset, key.cp);
 
                     if (key.eql(.{ .cp = input.Backspace })) {
                         if (this.cursor_offset < this.input.items.len) {
@@ -666,8 +666,20 @@ pub fn TextField(Model: type, Event: type) type {
             const value = switch (t) {
                 .bytes => blk: {
                     // NOTE convert unicode characters to ascii characters; if non ascii characters are found this is will fail!
-                    var slice = try this.allocator.alloc(u8, this.input.items.len);
-                    for (0.., this.input.items) |i, c| slice[i] = @intCast(c);
+                    const len: usize = len: {
+                        var res: usize = 0;
+                        for (this.input.items) |cp| res += try std.unicode.utf8CodepointSequenceLength(cp);
+                        break :len res;
+                    };
+                    var slice = try this.allocator.alloc(u8, len);
+                    errdefer this.allocator.free(slice);
+
+                    var i: usize = 0;
+                    for (this.input.items) |cp| {
+                        const size = try std.unicode.utf8CodepointSequenceLength(cp);
+                        _ = try std.unicode.utf8Encode(cp, slice[i .. i + size]);
+                        i += size;
+                    }
                     this.input.clearAndFree(this.allocator);
                     break :blk slice;
                 },