Ace: Posición incorrecta del cursor

Intenta correr

fm = editor.renderer.$textLayer.$fontMetrics;
"xiXbm".split("").map(fm.$measureCharWidth, fm)

si imprime diferentes números, la fuente utilizada en el editor no es monoespaciada.

También tenga en cuenta que agregar una regla consolas !important es una mala idea ya que se romperá en Linux y Mac.

Tuve un problema similar, y esta adición de CSS lo ha solucionado. Podría ayudar...

.ace_editor, .ace_editor div{
    font-family:monospace
}

(Razón: como ha dicho @nightwing . Esta adición de css aseguraría que está usando monoespacio).

Tengo usuarios que ven este problema en Windows 10 / Chrome 41.0.2272.76.

@nightwing Cuando ejecuté ese fragmento de código, esta fue la salida.

Esto solo parece suceder en Windows. Anteriormente, encontré que la posición del cursor era _siempre_ incorrecta en Windows 8+ hasta que ajusté el espacio entre letras: https://github.com/ajaxorg/ace-builds/issues/58

Sin embargo, mis usuarios siguen viendo esto ocasionalmente. Vea capturas de pantalla aquí:
https://github.com/Crunch/Crunch-2/issues/39

¿Ace utiliza _todas_ las propiedades CSS de la línea mostrada al medir? ¿Como espaciado entre letras, texto-sombra, renderizado de texto, -webkit-text-size-Adjust y -webkit-font-smoothing? (Es decir, ¿utiliza el estilo calculado de la fuente actual, tal como se aplica al editor visible?) ¿O solo algunos?

@ matthew-dean requiere que todas estas propiedades se personalicen en el elemento raíz del editor, por lo que los estilos heredados por las líneas ace también lo hereda el div de medida.
renderizado de texto

@nightwing text-rendering: optimizeLegibility podría ser el culpable. Es lo único que se me ocurre que compensaría un espacio único de manera diferente, lo que aparentemente ha sido un problema, específicamente en Chrome, _específicamente Chrome para Windows_ desde Windows 7. Ver: https://github.com/zurb/foundation/issues/ 1827 (y otros errores varios archivados).

Intentaré eliminar esa configuración, al menos para el editor, para ver si cambia. @vdzundza Dado que esto es intermitente, me interesaría saber si eso funciona para usted (y si tenía ese prop / valor aplicado).

Cambié esa configuración a text-rendering: geometricPrecision, que debería ser aún más precisa en la representación de caracteres de texto. Sin embargo, en Windows, todavía está dibujando la posición del cursor de manera inexacta. Ver más capturas de pantalla @ https://github.com/Crunch/Crunch-2/issues/39

¿Podría darme una página de demostración que reproduzca este problema, o tal vez crunch-2 para que pueda depurarlo?

@nightwing Puede obtener una copia de Crunch 2 aquí: https://github.com/Crunch/Crunch-2/releases

Entonces envíame un mensaje en Twitter: https://twitter.com/matthewdeaners. En NWJS, puede acceder a las herramientas de desarrollo de Chrome, pero hay algunos pasos involucrados para Crunch.

@nightwing ¿ Alguna idea? Seguimos teniendo problemas con Windows 10.

No pude reproducir esto en Windows 10, ¿podrían enviarme una imagen que muestre el problema?

@nightwing Hay varias imágenes, algunas animadas para mostrar lo que está sucediendo, en este hilo: https://github.com/Crunch/Crunch-2/issues/39

@nightwing Creo que ahora esta es la fuente Hasklig (https://github.com/i-tu/Hasklig) + Chromium 41 + text-rendering ya sea con OptimizeLegibility o geometricPrecision. Cualquier configuración que habilite ligaduras termina renderizándose con anchos de caracteres inconsistentes. Lo probé con largas líneas de ligaduras y activando / desactivando la representación de texto, y las líneas cambiaron de longitud. Entonces, en mi caso, probablemente no sea un problema de Ace, ya que Hasklig no parece ser técnicamente una fuente monoespaciada en ese entorno. Perdón por la persecución inútil; No me di cuenta de que la fuente se estaba reproduciendo sin espacio único.

Errrr ... Puede que haya hablado demasiado pronto. También tengo problemas con la posición del cursor con Source Code Pro y text-rendering: optimizeLegibility está desactivado. Sin embargo, configurar / desarmar la representación de texto parece "restablecer" la medición del cursor, por lo que a veces no se puede reproducir después de la primera vez.

Bueno. Entonces, no sé exactamente la causa, pero tengo una solución que funciona para mí. Estoy configurando text-indent: 0.1px y luego text-indent: 0.1px después de un breve tiempo de espera. Esto activa el diseño / pintura / compuesto como se indica aquí: http://csstriggers.com/

@nightwing Una razón por la que no ha encontrado esto podría ser porque establecer un tema ace probablemente causa un diseño / pintura / compuesto en la mayoría de los casos, si alguna de las configuraciones de fuente "inherentes" del navegador no coincide con la configuración de fuente del tema, que parece probable. La primera pintura de Chrome de una línea de texto puede ser inexacta, lo que significa que las medidas de Ace también lo serían, pero siempre que alguien establezca incluso una propiedad de CSS que active el rediseño, nadie se daría cuenta.

Entonces, si desea reproducir, puede probar con algunas configuraciones de fuente configuradas solo en el CSS, y no en un tema, pero no estoy seguro de cuál podría ser la combinación mágica para reproducir el error. También es posible que Ace pueda detectar este error midiendo una línea particular de texto con CSS particular y comparándola con una constante conocida (cuál debería ser el resultado), y luego, si no coincide, activando un repintado en el Misma manera. (Pero, por supuesto, eso significaría reproducir el error en primer lugar).

Otra cosa que podría hacer es que Ace siempre establezca una propiedad CSS (tardía) independientemente de que siempre active el diseño / repintado. (Traté de descubrir algo que no se vería visiblemente, pero no estoy seguro de qué podría ser). Por lo que puedo decir, no hay un impacto notable en el rendimiento al hacer esto una vez, que es todo lo que debería necesitar. .

Encontré el problema exacto y logré solucionarlo (en mi caso).

Estaba ejecutando una función en la salida de Ace para extraer la materia frontal de YAML. Dicha función se ejecuta en el evento onChange de Ace. Cuando mi función arrojó errores, el cursor comenzó a desincronizarse. Al contrario de otro problema similar en el que los cursores se desincronizan permanentemente, este se 'recupera', porque si selecciono todo y borro todo, y empiezo a escribir sin que la función arroje ningún error, el cursor se posiciona correctamente.

No estoy seguro de si estoy siendo lo suficientemente claro, o si ayuda de alguna manera, pero sospecho que cualquier tipo de interrupción en el flujo de código que rodea a Ace hace que la posición del cursor no se actualice correctamente (ergo, la posición del cursor se actualiza _después_decierto las cosas se ejecutan, y si fallan, ¿falla el posicionamiento del cursor?).

@kenlimmj arrojar un error de los oyentes de eventos romperá el editor, ya que no se llamará a otros oyentes.
editor.on("input", podría ser un mejor evento para lo que estás haciendo.

El mismo problema.

Captura de pantalla:

@ AviralGarg1993 necesitas usar una fuente monoespaciada.

@nightwing Eso no pareció funcionar.

https://github.com/AviralGarg1993/codeSirens/commit/edf539da1d752e5b7404a4fd7ae129f0f74a1d35

Para cualquier otra persona que tenga este problema, esto podría ayudar:

Si tiene un tamaño de fuente establecido en rem (como en Bootstrap 4), su cursor sería loco.
Establecer un tamaño de fuente de 12px resolvió mi problema:

.ace_editor .ace_content {
  font-size: 12px !important;
}

Básicamente, Ace puede mostrar solo fuentes 'monoespaciadas', puede cambiar la fuente de alguna manera o asignó el nombre de la fuente en css.
Si está trabajando en Firefox, hay una fuente predeterminada que cambiará su fuente de espacio único. así que ten en cuenta eso.

El consejo de @wislem no funcionó para mí, pero me puso en el camino correcto.

Sospecho que usar esto en una hoja de estilo global solucionaría todos los problemas independientemente del marco. Sin embargo, el problema básico de usar el tamaño de fuente en rem era el mismo problema central.

.ace_editor div, .ace_editor span { font-size: 12px !important; }

El editor Ace parece estar trabajando solo con fuentes monoespaciadas. Como se indica en @ skbly7, la solución puede aplicar font-family:monospace pero agregar !important evitará que otros css se apliquen después de las palabras en los elementos.

.ace_editor, .ace_text-input, .ace_editor div{
    font-family : monospace !important;
}

Estoy construyendo un nuevo sitio usando Ace para Less.js y esto sigue siendo un problema, sin nada más en la página excepto por 2 editores. Voy a probar mi antiguo truco text-indent: 0.1px .

Esta vez, estos fueron los estilos predeterminados en un proyecto de Vue que fueron los culpables:

html {
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

Los estilos predeterminados de Ace probablemente deberían restablecer esa configuración.

Este parece ser un viejo problema con el editor Ace, especialmente obvio cuando pegas texto que no está en inglés.

Mi suposición es que algún código loco aquí lo está causando
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1221

prueba con
Встре́ча с медве́дем мо́жет быть о́чень опа́сна. Ру́сские лю́ди лю́бят ходи́ть в лес и собира́ть грибы́ и я́годы. Они́ де́лают э́то с осторо́жностью, так как медве́ди то́же о́чень лю́бят я́годы и мо́гут напа́сть на челове́ка. Медве́дь ест всё: я́годы, ры́бу, мя́со и да́же насеко́мых. Осо́бенно он лю́бит мёд.

en lugar de elegir fuentes extrañas, ¿no quieres arreglar la causa? Esto no es un problema en el editor de mónaco.

Aún no ha solucionado el problema del cursor. Todavía está ahí y no creo que el problema sea el CSS. Es la loca lógica del cursor

https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1309

y especialmente
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1482
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1509
¡la coordenada X está apagada!
esto también afecta a las canaletas. el ancho de la fuente no se tiene en cuenta en absoluto

o tal vez
https://github.com/ajaxorg/ace/blob/7285dad33867771a688a96bbf2309f4e995a5b7d/lib/ace/layer/cursor.js#L174

Estoy a punto de refactorizar mi aplicación para usar Mónaco en su lugar, pero también me pregunto si esto se puede solucionar

incluso cuando configuro la fuente monoespaciada en ruso, el problema sigue ahí

Una solución temporal para este infierno de fuentes monoespaciales es incluir una fuente monoespaciada con un editor ace que cubra todos los idiomas, no solo el ruso.

Creo que hay otro problema con el pegado de texto formateado en un editor as que estropea la posición del cursor. Ace no lo está desinfectando

@blurymind Creo que lo largo y lo corto es que el algoritmo para estimar la posición del cursor es terriblemente ingenuo sobre cómo se procesan las fuentes en un motor de navegador. Entonces, en lugar de medir cómo se dibujan realmente los caracteres, parece estimar lo que "deberían ser" en función de algunas configuraciones básicas de CSS y tal vez el tamaño de un solo carácter, y asume que las métricas deberían ser válidas para el resto del texto. No estoy seguro de qué suposiciones se están haciendo, pero parecen ser inherentemente defectuosas.

Realmente no puede saber dónde está el final de un bloque de texto renderizado sin obtener sus métricas reales. No estoy seguro de cuál es el algoritmo correcto, pero parece que debido a que es tan fácil de romper, sin embargo, su razonamiento sobre la posición del cursor y el ancho del texto es fundamentalmente defectuoso.

En mi caso, solo sucedió después de escribir "ff" o "fi" ... Para mí, apagar las ligaduras funcionó.
Así que solo agrega
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
al css.

Espero eso ayude ;)

Hola,
situación extraña aquí, pero puedo confirmar que la fuente no es el único problema.
En mi proyecto, tengo un componente que usa el editor Ace para ingresar JSON. Siempre obliga a la fuente a ser "monoespaciada".
De todos modos, funciona sin problemas en Storybook cuando está aislado.
Cuando el componente hereda de CSS (cuando se usa en la aplicación, no en el libro de cuentos), todavía tengo el mismo problema de mal funcionamiento del cursor.
Hay muchos estilos heredados, pero la fuente es monoespaciada.

@Copainbig otras reglas CSS también pueden interferir, por ejemplo, establecer el tamaño de fuente para todos los elementos div

Estoy usando mediawiki + chrome y encontré el mismo error.

Problema resuelto usando

.ace_editor, .ace_editor * { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; }

en Mediawiki: Common.css

@ skbly7 Estaba enfrentando este problema, parece que en la versión anterior de Ace Editor, su solución funcionó, pero para mí no funcionó.

Aquí está la solución que buscaba,

.ace_editor * {
    font-family: monospace !important;
}

Todo lo que necesitas saber

Entonces, aparentemente, no puedes usar otra fuente cuando usas un editor as. Va a estropear una gran cantidad de UX para su editor de código o lo que sea en lo que pueda estar trabajando donde probablemente esté tratando de implementar el editor as. Entonces, en caso de que se enfrente a este problema en el futuro, puede usar el código mencionado anteriormente para deshacerse de este problema de mierda porque es muy difícil de resolver. Y no, no fue un error de JavaScript, fue solo un error / error de CSS debido al cual no estaba funcionando como se suponía.

.ace_editor, .ace_editor * { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; }

funciona bien para mí, en windows10 usando el paquete react ace