Ace: Posição errada do cursor

Tente correr

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

se imprimir números diferentes, a fonte usada no editor não é monoespaçada.

Observe também que adicionar uma regra consolas !important é uma má ideia, pois ela quebrará no linux e no mac.

Eu tive um problema semelhante, e esta adição de css corrigiu isso. Pode ajudar...

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

(Motivo: como @nightwing disse. A adição de css garantiria que você estava usando o espaço único.)

Tenho usuários vendo esse problema no Windows 10 / Chrome 41.0.2272.76.

@nightwing Quando executei aquele trecho de código, essa era a saída.

Isso só parece acontecer no Windows. Anteriormente, descobri que a posição do cursor estava _sempre_ errada no Windows 8+ até ajustar o espaçamento entre letras: https://github.com/ajaxorg/ace-builds/issues/58

No entanto, meus usuários ainda estão vendo isso ocasionalmente. Veja as capturas de tela aqui:
https://github.com/Crunch/Crunch-2/issues/39

O Ace usa _all_ propriedades CSS da linha exibida ao medir? Como espaçamento entre letras, sombra de texto, renderização de texto, -webkit-text-size-ajustar e -webkit-font-smoothing? (Ou seja, usa o estilo calculado da fonte atual, aplicado ao editor visível?) Ou apenas alguns?

@ matthew-dean requer que todas essas propriedades sejam customizadas no elemento raiz do editor, então stiles herdados por ás linhas são herdados pela medida div também.
renderização de texto

@nightwing text-rendering: optimizeLegibility pode de fato ser o culpado. É a única coisa que eu poderia pensar que compensaria um monoespaço de forma diferente, o que aparentemente tem sido um problema, especificamente no Chrome, _especificamente Chrome para Windows_ desde o Windows 7. Veja: https://github.com/zurb/foundation/issues/ 1827 (e vários outros bugs arquivados).

Vou tentar remover essa configuração, pelo menos para o editor, para ver se isso muda. @vdzundza Como isso é intermitente, estou interessado em saber se isso funciona para você (e se essa proposta / valor foi aplicada).

Eu mudei essa configuração para renderização de texto: geometrPrecision, que deve ser ainda mais precisa na renderização de caracteres de texto. No entanto, no Windows, ele ainda está desenhando a posição do cursor de maneira imprecisa. Veja mais capturas de tela @ https://github.com/Crunch/Crunch-2/issues/39

Você poderia me dar uma página de demonstração reproduzindo este problema, ou talvez crunch-2 para que eu possa depurá-lo?

@nightwing Você pode obter uma cópia do Crunch 2 aqui: https://github.com/Crunch/Crunch-2/releases

Então me mande uma mensagem no Twitter: https://twitter.com/matthewdeaners. No NWJS, você pode acessar as ferramentas de desenvolvedor do Chrome, mas existem algumas etapas envolvidas para o Crunch.

@nightwing Alguma ideia? Ainda estamos tendo problemas com o Windows 10.

Não consegui reproduzir isso no Windows 10. Você poderia me enviar uma imagem mostrando o problema?

@nightwing Existem várias imagens, algumas animadas para mostrar o que está acontecendo, neste tópico: https://github.com/Crunch/Crunch-2/issues/39

@nightwing eu acho que agora esta é a fonte Hasklig (https://github.com/i-tu/Hasklig) + Chromium 41 + text-rendering com optimizeLegibility ou geometricPrecision. Qualquer configuração que permite ligaduras acaba sendo renderizada com larguras de caracteres inconsistentes. Testei-o com longas linhas de ligaduras e alternando a renderização de texto entre ligado / desligado e as linhas mudaram de comprimento. Portanto, no meu caso, provavelmente não é um problema do Ace, já que Hasklig não parece ser tecnicamente uma fonte monoespaçada naquele ambiente. Desculpe pela caça ao ganso selvagem; Não percebi que a fonte estava renderizando não monoespaçada.

Errrr ... Posso ter falado muito cedo. Também estou tendo problemas com a posição do cursor com o Source Code Pro e text-rendering: optimizeLegibility está desligado. No entanto, definir / desativar a renderização de texto parece "redefinir" a medição do cursor, então às vezes você não pode reproduzir depois da primeira vez.

OK. Então, não sei exatamente a causa, mas tenho uma solução trabalhando para mim. Estou definindo text-indent: 0.1px e text-indent: 0.1px após um curto tempo limite. Isso aciona layout / pintura / composto conforme observado aqui: http://csstriggers.com/

@nightwing Uma razão pela qual você não encontrou isso pode ser porque definir um tema ace provavelmente causa um layout / pintura / composição na maioria dos casos, se alguma das configurações de fonte "inerentes" do navegador não corresponder às configurações de fonte do tema, o que parece provável. A primeira pintura de uma linha de texto do Chrome pode ser imprecisa, o que significa que as medidas de Ace também seriam, mas contanto que alguém defina pelo menos uma propriedade CSS que acione o novo layout, ninguém vai notar.

Então, se você quiser reproduzir, você pode testar com algumas configurações de fonte definidas apenas no CSS, e não em um tema, mas não tenho certeza de qual pode ser a combinação mágica para reproduzir o bug. Também é possível que o Ace consiga detectar esse bug medindo uma linha específica de texto com um CSS específico e comparando-o com uma constante conhecida (qual deveria ser o resultado) e, se não corresponder, acionando uma repintura no do mesmo jeito. (Mas é claro que isso significaria reproduzir o bug em primeiro lugar.)

Outra coisa que você pode fazer é fazer com que o Ace sempre defina uma propriedade CSS (atrasada), independentemente de que isso sempre acione o layout / redesenho. (Eu tentei descobrir algo que não seria visivelmente visto, mas não tenho certeza do que poderia ser.) Pelo que eu posso dizer, não há nenhum impacto perceptível no desempenho ao fazer isso uma vez, que é tudo de que você precisa .

Eu encontrei o problema exato e consegui consertá-lo (para o meu caso).

Eu estava executando uma função na saída do Ace para extrair o material inicial do YAML. A referida função é executada no evento onChange do Ace. Quando minha função gerou erros, o cursor começou a dessincronizar. Ao contrário de outro problema semelhante em que os cursores ficam fora de sincronia permanentemente, este 'se recupera', porque se eu selecionar tudo e deletar tudo, e começar a escrever sem que a função gere erros, o cursor é posicionado corretamente.

Não tenho certeza se estou sendo claro o suficiente ou se isso ajuda de alguma forma, mas suspeito que qualquer tipo de interrupção no fluxo de código em torno do Ace faz com que a posição do cursor não seja atualizada corretamente (portanto, a posição do cursor é atualizada _após_ certa coisas são executadas e, se falharem, o posicionamento do cursor falha?).

@kenlimmj lançar um erro de ouvintes de evento interromperá o editor, uma vez que outros ouvintes não serão chamados.
editor.on("input", pode ser um evento melhor para o que você está fazendo.

Mesmo problema.

Captura de tela:

@ AviralGarg1993 você precisa usar uma fonte monoespaçada.

@nightwing Isso não pareceu funcionar.

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

Para qualquer outra pessoa com esse problema, isso pode ajudar:

Se você tiver um tamanho de fonte definido em rem (como no Bootstrap 4), seu cursor ficará maluco.
Definir um tamanho de fonte de 12px resolveu meu problema:

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

Basicamente, o Ace pode exibir apenas fontes 'monoespaçadas', você pode alterar a fonte de alguma forma ou atribuir o nome da fonte em css.
se você estiver trabalhando no firefox, há uma fonte padrão que mudará sua fonte monoespaçada. Então, fique ciente disso.

O conselho de @wislem não funcionou para mim, mas me colocou no caminho certo.

Suspeito que usar isso em uma folha de estilo global resolveria todos os problemas, independentemente da estrutura. O problema básico de usar font-size in rem era o mesmo problema principal.

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

O editor Ace parece estar trabalhando apenas com fonte monoespaçada. Conforme declarado por @ skbly7, a solução pode aplicar font-family:monospace mas adicionar !important impedirá a substituição por outro css aplicado após palavras nos elementos.

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

Estou construindo um novo site usando Ace for Less.js e isso ainda é um problema, com nada mais na página, exceto para 2 editores. Vou tentar meu antigo hack de text-indent: 0.1px .

Desta vez, esses eram os estilos padrão em um projeto Vue que eram os culpados:

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

Os estilos padrão do Ace provavelmente devem redefinir essas configurações.

Este parece ser um problema antigo com o editor Ace, especialmente óbvio quando você cola algum texto em outro idioma

Minha suposição é que algum código maluco aqui está causando isso
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1221

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

em vez de escolher fontes estranhas, você não quer consertar a causa? Este não é um problema no editor monaco

Você ainda não corrigiu o problema do cursor. Ainda está lá dentro e não acho que o problema seja o css. É a lógica maluca do cursor

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

e 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
a coordenada X está desligada!
isso afeta as calhas também. a largura da fonte não é levada em consideração de forma alguma

ou talvez
https://github.com/ajaxorg/ace/blob/7285dad33867771a688a96bbf2309f4e995a5b7d/lib/ace/layer/cursor.js#L174

Estou quase refatorando meu aplicativo para usar o monaco, mas também me perguntando se isso pode ser corrigido

mesmo quando eu defino a fonte monoespaçada em russo, o problema ainda está lá

Uma solução temporária para esse inferno de fontes monoespaçadas é incluir uma fonte monoespaçada com editor ace que cobre todos os idiomas, não apenas o russo

Acho que há outro problema com a colagem de texto formatado no editor ace bagunçando a posição do cursor. Ace não está higienizando

@blurymind Acho que longo e curto é o algoritmo para estimar a posição do cursor é terrivelmente ingênuo sobre como as fontes são renderizadas em um mecanismo de navegador. Então, em vez de medir como os caracteres são realmente desenhados, parece estimar o que eles "deveriam ser" com base em algumas configurações CSS básicas e talvez o tamanho de um único caractere, e assume que as métricas devem valer para o resto do texto. Não tenho certeza de quais suposições estão sendo feitas, mas elas parecem ser inerentemente falhas.

Você não pode realmente saber onde está o final de um bloco de texto renderizado sem obter suas métricas reais. Não tenho certeza de qual é o algoritmo correto, mas parece que, por ser tão fácil de quebrar, eles estão raciocinando sobre a posição do cursor e a largura do texto é fundamentalmente falha.

No meu caso só aconteceu depois de digitar "ff" ou "fi" ... Pra mim desligar as ligaduras funcionou.
Então, basta adicionar
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
para o css.

Espero que ajude ;)

Oi,
situação estranha aqui, mas posso confirmar que a fonte não é o único problema.
No meu projeto, tenho um componente que usa o editor Ace para inserir JSON. Sempre força a fonte a ser "monoespaçada".
De qualquer forma, funciona perfeitamente no Storybook quando isolado.
Quando o componente herda de CSS (quando usado no aplicativo, não no livro de histórias), ainda terei o mesmo problema de cursor com defeito.
Existem muitos estilos herdados, mas a fonte é monoespaçada.

@Copainbig outras regras de css podem interferir também, por exemplo, definir o tamanho da fonte para todos os elementos div

Estou usando o mediawiki + chrome e encontrei o mesmo erro.

Problema resolvido 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; }

em Mediawiki: Common.css

@ skbly7 Eu estava enfrentando esse problema, parece que na versão anterior do Ace Editor, sua solução funcionou, mas para mim não funcionou.

Aqui está a solução que você estava procurando,

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

Tudo que você precisa saber

Então, aparentemente, você não pode realmente usar alguma outra fonte ao usar um editor ace. Vai bagunçar muito a experiência do usuário do seu editor de código ou qualquer coisa em que você esteja trabalhando, provavelmente tentando implementar o editor ace. Portanto, caso você enfrente esse problema no futuro, pode usar o código mencionado acima para se livrar desse problema de merda, porque é uma droga de resolver. E não, não foi um erro de javascript, foi apenas um erro / bug de css devido ao qual não estava funcionando como deveria.

.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 bem para mim, no windows10 usando o pacote react ace