Ace: موضع المؤشر خاطئ

جرب الجري

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

إذا كان هذا يطبع أرقامًا مختلفة ، فإن الخط المستخدم في المحرر ليس monospace.

لاحظ أيضًا أن إضافة قاعدة consolas !important فكرة سيئة لأنها ستتوقف على نظامي Linux و mac.

لقد حصلت على مشكلة مماثلة ، وقد أصلحت إضافة css هذه المشكلة. قد تساعد...

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

(السبب: كما أخبر @ nightwing .

لدي مستخدمون يشاهدون هذه المشكلة على Windows 10 / Chrome 41.0.2272.76.

nightwing عندما قمت بتشغيل هذا الجزء من الكود كان هذا هو الإخراج.

يبدو أن هذا يحدث فقط على Windows. لقد وجدت سابقًا أن موضع المؤشر كان _ دائمًا_ خاطئًا على Windows 8+ حتى قمت بتعديل تباعد الأحرف: https://github.com/ajaxorg/ace-builds/issues/58

ومع ذلك ، لا يزال المستخدمون يرون هذا من حين لآخر. انظر لقطات هنا:
https://github.com/Crunch/Crunch-2/issues/39

هل يستخدم Ace _all_ CSS خصائص الخط المعروض عند القياس؟ مثل تباعد الحروف ، ظل النص ، عرض النص ، -webkit-text-size-adjustment ، و -webkit-font-smoothing؟ (أي ، هل يستخدم النمط المحسوب للخط الحالي ، كما هو مطبق على المحرر المرئي؟) أم أنماط معينة فقط؟

@ Matthew-dean يتطلب الأمر تخصيص كل هذه الخصائص على عنصر جذر المحرر ، لذا فإن الأبراج الموروثة بواسطة خطوط ace يتم توارثها بواسطة مقياس div أيضًا.
عرض النص: لا يتم دعم OptizeLegibility

nightwing text-rendering: optimizeLegibility قد يكون الجاني بالفعل. إنه الشيء الوحيد الذي يمكن أن أفكر فيه من شأنه أن يوازن monospace بشكل مختلف ، والذي كان على ما يبدو مشكلة ، على وجه التحديد في Chrome ، على وجه التحديد Chrome لنظام التشغيل Windows_ منذ Windows 7. راجع: https://github.com/zurb/foundation/issues/ 1827 (وغيرها من الأخطاء المختلفة المرفوعة).

سأحاول إزالة هذا الإعداد ، على الأقل للمحرر ، لمعرفة ما إذا كان هذا يتغير. @ vzundza نظرًا لأن هذا متقطع ، سأكون مهتمًا بمعرفة ما إذا كان ذلك

لقد غيرت هذا الإعداد إلى عرض النص: geometricPrecision ، والذي يجب أن يكون أكثر دقة في عرض الأحرف النصية. ومع ذلك ، في Windows ، لا يزال يرسم موضع المؤشر بشكل غير دقيق. شاهد المزيد من لقطات الشاشة @ https://github.com/Crunch/Crunch-2/issues/39

هل يمكن أن تعطيني صفحة تجريبية تعيد إنتاج هذه المشكلة ، أو ربما crunch-2 حتى أتمكن من تصحيحها؟

nightwing يمكنك الحصول على نسخة من Crunch 2 هنا: https://github.com/Crunch/Crunch-2/releases

ثم راسلني على Twitter: https://twitter.com/matthewdeaners. في NWJS ، يمكنك الوصول إلى أدوات مطور Chrome ، ولكن هناك بعض الخطوات المتضمنة في Crunch.

nightwing أي أفكار؟ ما زلنا نواجه مشكلات على نظام التشغيل Windows 10.

لم أتمكن من إعادة إنتاج هذا على نظام التشغيل Windows 10 ، هل يمكنك أن ترسل لي صورة توضح المشكلة؟

nightwing هناك عدة صور ، بعضها متحرك لإظهار ما يحدث ، في هذا الموضوع: https://github.com/Crunch/Crunch-2/issues/39

nightwing أعتقد الآن أن هذا هو خط Hasklig (https://github.com/i-tu/Hasklig) + Chromium 41 + text-rendering مع إما OptizeLegibility أو geometricPrecision. ينتهي أي إعداد يُمكّن الأحرف المركبة من عرض أحرف غير متناسقة. لقد اختبرت ذلك باستخدام أسطر طويلة من الحروف المركبة ، وعن طريق التبديل بين تشغيل / إيقاف تشغيل عرض النص ، وتغير طول الخطوط. لذا ، في حالتي ، ربما لا يتعلق الأمر بمشكلة Ace ، نظرًا لأن Hasklig لا يبدو من الناحية الفنية خطًا أحادي المسافة في تلك البيئة. آسف لمطاردة أوزة البرية. لم أكن أدرك أن الخط كان يصور غير monospace.

Errrr ... ربما تحدثت مبكرًا جدًا. أواجه مشكلات في موضع المؤشر مع Source Code Pro أيضًا ، وتم إيقاف text-rendering: optimizeLegibility . ومع ذلك ، يبدو أن إعداد / عدم ضبط عرض النص يؤدي إلى "إعادة تعيين" قياس المؤشر ، لذلك في بعض الأحيان لا يمكنك التكاثر بعد المرة الأولى.

تمام. لذلك ، لا أعرف السبب بالضبط ، لكن لدي إصلاح يعمل من أجلي. أقوم بتعيين text-indent: 0.1px ثم text-indent: 0.1px بعد مهلة قصيرة. يؤدي هذا إلى تشغيل التخطيط / الطلاء / المركب كما هو مذكور هنا: http://csstriggers.com/

nightwing قد يكون أحد أسباب عدم

لذا ، إذا كنت ترغب في التكاثر ، فيمكنك الاختبار باستخدام بعض إعدادات الخط التي تم ضبطها فقط في CSS ، وليس في سمة ، لكنني لست متأكدًا من التركيبة السحرية لإعادة إنتاج الخطأ. من الممكن أيضًا أن يكون Ace قادرًا على اكتشاف هذا الخطأ عن طريق قياس سطر معين من النص باستخدام CSS معين ومقارنته بثابت معروف (ما يجب أن تكون النتيجة) ، ثم إذا لم يتطابق ، فسيؤدي ذلك إلى إعادة الرسم في نفس السلوك. (لكن هذا يعني بالطبع إعادة إنتاج الخطأ في المقام الأول.)

هناك شيء آخر يمكنك القيام به وهو تعيين Ace دائمًا لخاصية CSS (متأخر) بغض النظر عن أن ذلك سيؤدي دائمًا إلى تخطيط / إعادة رسم. (حاولت اكتشاف شيء لا يمكن رؤيته بوضوح ، لكنني لست متأكدًا مما قد يكون.) وبقدر ما أستطيع أن أقول ، ليس هناك أداء ملحوظ من القيام بذلك مرة واحدة ، وهو كل ما تحتاجه .

لقد واجهت المشكلة بالضبط وتمكنت من إصلاحها (لحالتي).

كنت أقوم بتشغيل وظيفة على الإخراج من Ace لاستخراج مادة YAML الأمامية. تعمل الوظيفة المذكورة في حدث onChange الخاص بـ Ace. عندما أخطأت وظيفتي ، بدأ المؤشر في إلغاء التزامن. على عكس مشكلة أخرى مماثلة حيث تخرج المؤشرات من المزامنة بشكل دائم ، فإن هذا "يتعافى" ، لأنه إذا قمت بتحديد الكل وحذف كل شيء ، وبدأت الكتابة دون أن تؤدي الوظيفة إلى أي أخطاء ، فسيتم وضع المؤشر بشكل صحيح.

لست متأكدًا مما إذا كنت واضحًا بما فيه الكفاية ، أو إذا كان ذلك مفيدًا بأي شكل من الأشكال ، لكنني أشك في أن أي نوع من المقاطعة لتدفق الكود المحيط بـ Ace يتسبب في عدم تحديث موضع المؤشر بشكل صحيح (ergo يتم تحديث موضع المؤشر _ بعد_ معينة يتم تنفيذ الأشياء ، وإذا فشلت ، يفشل وضع المؤشر؟).

kenlimmj رمي الخطأ من مستمعي الأحداث سيؤدي إلى كسر المحرر ، حيث لن يتم استدعاء المستمعين الآخرين.
قد يكون editor.on("input", حدثًا أفضل لما تفعله.

نفس المشكلة.

لقطة شاشة:

@ AviralGarg1993 تحتاج إلى استخدام خط monospace.

nightwing يبدو أن هذا لا يعمل.

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

بالنسبة لأي شخص آخر يعاني من هذه المشكلة ، قد يساعد ذلك:

إذا كان لديك حجم خط معين في rem (كما في Bootstrap 4) ، فسيكون المؤشر أحمق.
أدى تعيين حجم خط يبلغ 12 بكسل إلى حل مشكلتي:

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

بشكل أساسي ، يمكن لـ Ace عرض خطوط "monospace" فقط ، يمكنك تغيير الخط بطريقة ما أو تم تعيين اسم الخط في css.
إذا كنت تعمل في Firefox ، فهناك خط افتراضي سيغير خط monospace الخاص بك. حتئ يكون على بينة من ذلك.

لم تنجح نصيحة wislem بالنسبة لي ولكنها وضعتني على المسار الصحيح.

أظن أن استخدام هذا في ورقة أنماط عالمية من شأنه حل جميع المشكلات بغض النظر عن إطار العمل. كانت المشكلة الأساسية لاستخدام حجم الخط في rem هي نفس المشكلة الأساسية.

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

يبدو أن محرر Ace يعمل مع خط monospace فقط. كما هو مذكور بواسطة @ skbly7 يمكن أن يكون الحل تطبيق font-family:monospace لكن إضافة !important سيمنع التجاوز بواسطة css الأخرى المطبقة بعد الكلمات على العناصر.

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

أقوم بإنشاء موقع جديد باستخدام Ace for Less.js ولا تزال هذه مشكلة ، ولا يوجد أي شيء آخر على الصفحة باستثناء محررين اثنين. سأحاول الاختراق القديم text-indent: 0.1px .

هذه المرة كانت هذه هي الأنماط الافتراضية في مشروع Vue التي كانت الجاني:

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

من المحتمل أن تقوم أنماط Ace الافتراضية بإعادة تعيين هذه الإعدادات.

يبدو أن هذه مشكلة قديمة في محرر Ace ، خاصة عند لصق بعض النصوص بلغة غير الإنجليزية

افترض أن بعض الشفرات المجنونة هنا هي التي تسبب ذلك
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1221

محاولة مع
Встре́ча с медве́дем мо́жет быть о́чень опа́сна. Ру́сские лю́ди лю́бят ходи́ть в лес и собира́ть грибы́ и я́годы. Они́ де́лают э́то с осторо́жностью, так как медве́ди то́же о́чень лю́бят я́годы и мо́гут напа́сть на челове́ка. Медве́дь ест всё: я́годы, ры́бу, мя́со и да́же насеко́мых. Осо́бенно он лю́бит мёд.

بدلاً من اختيار خطوط غريبة ، ألا تريد إصلاح السبب بدلاً من ذلك؟ هذه ليست مشكلة في محرر موناكو

لم تقم بإصلاح مشكلة المؤشر حتى الآن. لا يزال هناك الكثير ولا أعتقد أن المشكلة تكمن في Css. إنه منطق المؤشر المجنون

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

وخاصة
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
إحداثي X متوقف!
هذا يؤثر على المزاريب أيضا. عرض الخط لا يؤخذ في الاعتبار على الإطلاق

أو ربما
https://github.com/ajaxorg/ace/blob/7285dad33867771a688a96bbf2309f4e995a5b7d/lib/ace/layer/cursor.js#L174

أنا على وشك إعادة هيكلة تطبيقي لاستخدام موناكو بدلاً من ذلك ، ولكني أتساءل أيضًا عما إذا كان يمكن إصلاح ذلك

حتى عند تعيين الخط أحادي المسافة باللغة الروسية ، لا تزال المشكلة قائمة

أحد الحلول المؤقتة لهذا الخط الأحادي هو تضمين خط monospace مع محرر ace يغطي جميع اللغات ، وليس الروسية فقط

أعتقد أن هناك مشكلة أخرى تتعلق بلصق النص المنسق في محرر ace مما يؤدي إلى العبث في موضع المؤشر. ايس لا يطهرها

@ blurymind أعتقد أن الخوارزمية الطويلة والقصيرة هي خوارزمية لتقدير موضع المؤشر ، وهي خوارزمية رهيبة حول كيفية عرض الخطوط في محرك المتصفح. لذا بدلاً من قياس كيفية رسم الأحرف فعليًا ، يبدو أنها تقدر ما "يجب أن تكون عليه" بناءً على بعض إعدادات CSS الأساسية وربما حجم حرف واحد ، وتفترض أن المقاييس يجب أن تحمل بقية النص؟ لست متأكدًا من الافتراضات التي يتم إجراؤها ولكن يبدو أنها معيبة بطبيعتها.

لا يمكنك معرفة مكان نهاية كتلة النص المعروضة دون الحصول على مقاييسها الفعلية. لست متأكدًا من الخوارزمية الصحيحة ، ولكن يبدو أنه نظرًا لسهولة كسرها ، إلا أنهم يفكرون في موضع المؤشر وعرض النص معيب بشكل أساسي.

في حالتي ، حدث ذلك فقط بعد كتابة "ff" أو "fi" ... بالنسبة لي ، نجح إيقاف ربط الأحرف.
لذا أضف فقط
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
إلى المغلق.

آمل أن يساعد ؛)

مرحبا،
موقف غريب هنا ولكن يمكنني أن أؤكد أن الخط ليس هو المشكلة الوحيدة.
في مشروعي ، لدي مكون يستخدم محرر Ace لإدخال JSON. إنه يفرض دائمًا أن يكون الخط "monospace".
على أي حال ، فإنه يعمل بسلاسة على Storybook عند عزله.
عندما يرث المكون من CSS (عند استخدامه في التطبيق ، وليس في القصص القصيرة) ، لا يزال لدي نفس المشكلة المتمثلة في خلل في المؤشر.
هناك الكثير من الأنماط الموروثة ، لكن الخط أحادي المسافة.

Copainbig قد تتداخل قواعد css الأخرى أيضًا ، على سبيل المثال تعيين حجم الخط لجميع عناصر div

أنا أستخدم ميدياويكي + كروم وواجهت نفس الخطأ.

تم حل المشكلة عن طريق استخدام

.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; }

في ميدياويكي: Common.css

@ skbly7 كنت أواجه هذه المشكلة ، يبدو كما في الإصدار السابق من محرر Ace ، لكن الحل الذي

هذا هو الحل الذي كنت تبحث عنه ،

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

كل شيئ ترغب بمعرفته

لذلك من الواضح أنه لا يمكنك حقًا استخدام بعض الخطوط الأخرى عند استخدام محرر ace. سيؤدي ذلك إلى إفساد الكثير من UX لمحرر الكود الخاص بك أو أيًا كان ما قد تعمل عليه حيث ربما تحاول تطبيق محرر ace. لذلك في حالة مواجهة هذه المشكلة في المستقبل ، يمكنك استخدام الكود المذكور أعلاه للتخلص من هذه المشكلة الغامضة لأنها عاهرة يجب حلها. ولا ، لم يكن خطأ جافا سكريبت ، لقد كان مجرد خطأ / خطأ css بسبب أنه لم يكن يعمل بالطريقة التي كان من المفترض أن يعمل بها.

.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; }

يعمل بشكل جيد بالنسبة لي ، على windows10 باستخدام حزمة رد فعل ace