FSE grid positioning is off/inconsistent

[Ben Marshall]

Describe the bug

When in FSE, clicking the character icon in the toolbar results in the character grid getting positioned incorrectly and seems inconsistent in the positioning.

Steps to Reproduce

1. Go to the FSE & edit a template or page
2. Add/edit a text component, then click on the insert character button in the toolbar
3. Notice that the grid overlay is positioned incorrectly

Screenshots, screen recording, code snippet

Environment information

• Device: MacBook Pro (M1 Max)
• OS: Ventura 13.4 (22F66)
• Browser: Chrome (v114.0.5735.133)

WordPress information

`

wp-core

version: 6.2.2
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: /%postname%/
https_status: false
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: local
user_count: 1
dotorg_communication: true

wp-paths-sizes

wordpress_path: /Users/benmarshall/Local Sites/10up-sandbox/app/public
wordpress_size: loading...
uploads_path: /Users/benmarshall/Local Sites/10up-sandbox/app/public/wp-content/uploads
uploads_size: loading...
themes_path: /Users/benmarshall/Local Sites/10up-sandbox/app/public/wp-content/themes
themes_size: loading...
plugins_path: /Users/benmarshall/Local Sites/10up-sandbox/app/public/wp-content/plugins
plugins_size: loading...
database_size: loading...
total_size: loading...

wp-dropins (1)

db.php: true

wp-active-theme

name: Twenty Twenty-Three (twentytwentythree)
version: 1.1
author: the WordPress team
author_website: https://wordpress.org
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, block-templates, widgets-block-editor
theme_path: /Users/benmarshall/Local Sites/10up-sandbox/app/public/wp-content/themes/twentytwentythree
auto_update: Disabled

wp-themes-inactive (3)

Astra: version: 4.1.5, author: Brainstorm Force, Auto-updates disabled
Twenty Twenty-One: version: 1.8, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Two: version: 1.4, author: the WordPress team, Auto-updates disabled

wp-plugins-active (9)

Akismet Anti-Spam: Spam Protection: version: 5.1, author: Automattic - Anti Spam Team, Auto-updates disabled
Autoshare for Twitter: version: 2.0.0, author: 10up, Auto-updates disabled
Eight Day Week: version: 1.2.1, author: 10up, Auto-updates disabled
Insert Special Characters: version: 1.0.6, author: 10up, Auto-updates disabled
Query Monitor: version: 3.12.3, author: John Blackbourn, Auto-updates disabled
Safe SVG: version: 2.1.1, author: 10up, Auto-updates disabled
Simple Page Ordering: version: 2.5.1, author: 10up, Auto-updates disabled
Simple Podcasting: version: 1.4.0, author: 10up, Auto-updates disabled
WP to Twitter: version: 3.7.0, author: Joseph C Dolson, Auto-updates disabled

wp-plugins-inactive (1)

Safe Redirect Manager: version: 2.0.1, author: 10up, Auto-updates disabled

wp-media

image_editor: WP_Image_Editor_GD
imagick_module_version: Not available
imagemagick_version: Not available
imagick_version: Not available
file_uploads: File uploads is turned off
post_max_size: 1000M
upload_max_filesize: 300M
max_effective_size: 300 MB
max_file_uploads: 20
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP
ghostscript_version: not available

wp-server

server_architecture: Darwin 22.5.0 arm64
httpd_software: nginx/1.16.0
php_version: 8.1.9 64bit
php_sapi: fpm-fcgi
max_input_variables: 4000
time_limit: 1200
memory_limit: 256M
max_input_time: 600
upload_max_filesize: 300M
php_post_max_size: 1000M
curl_version: 7.88.1 (SecureTransport) LibreSSL/3.3.6
suhosin: false
imagick_availability: false
pretty_permalinks: true
htaccess_extra_rules: false

wp-database

extension: mysqli
server_version: 8.0.16
client_version: mysqlnd 8.1.9
max_allowed_packet: 16777216
max_connections: 151

wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /Users/benmarshall/Local Sites/10up-sandbox/app/public/wp-content
WP_PLUGIN_DIR: /Users/benmarshall/Local Sites/10up-sandbox/app/public/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: true
WP_DEBUG_DISPLAY: false
WP_DEBUG_LOG: true
SCRIPT_DEBUG: true
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: local
DB_CHARSET: utf8
DB_COLLATE: undefined

wp-filesystem

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable

`

Code of Conduct

• I agree to follow this project's Code of Conduct

[Ben Marshall]

I've looked into this quite a bit & stumped. Seems like when using the FSE with getSelection() to find the current position on the caret, it never returns the correct object. Tried looking into how their doing it with the the inline link popover in the toolbar (https://github.com/WordPress/gutenberg/blob/5b01c97c6943890abb44b2154392ffcccef87b3e/packages/format-library/src/link/inline.js#L34) and they're too using getSelection and seems to work. I'll keep digging, but still at a loss.