خطاف JavaScript لـ Composer

مطور
1

مرحباً،
لقد كان لي منشور سابق لم يحصل على أي رد، ربما لأن الطلب كان ضيقًا جدًا. لذا سأحاول مرة أخرى هنا: أود ربط محرر الكتابة بحيث عندما يكتب المستخدم تسلسلًا معينًا من الأحرف (مثل --) يليه استعلام، يمكنني إظهار نافذة منبثقة تحتوي على نتائج البحث. بمجرد أن ينقر المستخدم على أحد هذه النتائج، يتم إدراج رابط عادي مكان الاستعلام الذي تم كتابته. ما هو أفضل ممارسة للوصول إلى عنصر المحرر وإشعار إضافة الخاص بي بمجرد أن يكتب المستخدم منشورًا؟ لقد راجعت واجهة برمجة التطبيقات للإضافات وبعض الإضافات على GitHub، لكن لم أتمكن من العثور على مثال جيد.
مع خالص التحيات
ألكسندر

2

أعتقد أنك ترغب في اتباع مثال موجود.

المكان الذي يجب البحث فيه، على ما أظن، هو discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at f62b8990acb9ce4af8bfc67fc80dc0847177e458 · discourse/discourse · GitHub

تحديداً:

  didInsertElement() {
    this._super(...arguments);

    const $editorInput = $(this.element.querySelector(".d-editor-input"));
    this._applyEmojiAutocomplete($editorInput);
    this._applyCategoryHashtagAutocomplete($editorInput);

وربما تنظر أيضاً إلى:

  _applyCategoryHashtagAutocomplete() {
    const siteSettings = this.siteSettings;

    $(this.element.querySelector(".d-editor-input")).autocomplete({
      template: findRawTemplate("category-tag-autocomplete"),
      key: "#",
      afterComplete: () => this._focusTextArea(),
      transformComplete: obj => {
        return obj.text;
      },
      dataSource: term => {
        if (term.match(/\s/)) {
          return null;
        }
        return searchCategoryTag(term, siteSettings);
      },
      triggerRule: (textarea, opts) => {
        return categoryHashtagTriggerRule(textarea, opts);
      }
    });
  },

ملاحظة: لم أستخدم هذا بنفسي، لكن هذا هو ظني.

3

مرحبًا @merefield،
شكرًا جزيلاً، هذا مفيد بالفعل. لكن أين هو أفضل مكان لتهيئة هذا؟ هل يجب أن أتحقق في دالة التهيئة الخاصة بالإضافة ما إذا كان عنصر .d-editor-input موجودًا وأربطه وفقًا لذلك، أم هناك مكان لتسجيل الإضافة كإضافة لتمديد عرض التكوين، بحيث يتم تحميلها فقط عندما يفتح المستخدم التكوين فعليًا؟
مع خالص التحيات
ألكسندر

4

هذا مكون، لذا ستحتاج إلى تجاوز هذه الدالة didInsertElement() في المُهيئ الخاص بك.

مثال:

withPluginApi('0.8.12', (api) => {

      api.modifyClass('component:load-more'

من هنا https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6

إذا كنت محظوظًا، يمكنك ببساطة استدعاء this._super(); ثم إرفاق المنطق الإضافي الخاص بك في النهاية.

5

ممتاز! شكرًا جزيلًا. أعتقد أن هذا سيُجدي نفعًا.