ركز على المحرر عندما يكون العنوان محددًا مسبقًا

مطور
1

لدي عنوان URL مشابه لهذا:

https://forum.example.com/new-message?groupname=moderators&title=Help+me+with+some+task+please

الذي أقوم بربطه على موقعي، لجلب المستخدمين إلى المنتدى لطرح سؤال. أستخدم قيمًا مختلفة لـ title لملء العنوان مسبقًا بأي موضوع يتساءلون عنه، وأرغب في أن يكون المحرر هو التركيز.

كنت أبحث عن كيفية تعديل هذا، ووجدت ملف composer.js مع تعريف focusTarget، والذي سيكون من السهل جدًا تعديله لدعم هذا السلوك إذا تم تمرير title.

المشكلة التي أواجهها هي أنني لا أرى أين يتم استدعاء focusTarget بالفعل. لقد كنت أعمل في البرمجة لسنوات عديدة، ولكنني جديد على Ember، وقد قمت ببرمجة JavaScript قليلة نسبيًا.

أي نصائح حول كيفية التعامل مع هذا ستكون موضع تقدير كبير (حتى لو كان هناك دليل مع إشارة إلى دليل معقول).

تحياتي

2

أعتقد أن هذا هو ما تبحث عنه:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/composer-editor.js#L159-L164

في كل مرة تتغير فيها قيمة focusTarget، يتم استدعاء هذه الدالة setFocus.

3

حسنًا، هذا هو الكود الذي يجعله يعمل. ما لست متأكدًا منه هو الكود الذي أحتاج إلى تعديله حتى تتمكن هذه الطريقة من الحصول على العنوان، حتى أتمكن من تعيين التركيز بشكل مناسب على المحرر هناك…

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/services/composer.js#L218-L243

4

أعتقد أنه يمكنك فعل شيء كهذا. يجب أن ينجح هذا.

import putCursorAtEnd from "discourse/lib/put-cursor-at-end";

api.onAppEvent("composer:open", ({ model }) => {
  if (model.title !== "") {
    scheduleOnce("afterRender", () => {
      putCursorAtEnd(document.querySelector("textarea.d-editor-input"));
    });
  }
});
إعجاب واحد (1)
5

لقد كدت أنتهي من هذا - عندما يتم تنفيذ الكود، أحصل على خطأ يفيد بأن scheduleOnce غير معرف - لقد جربت api.scheduleOnce، ولكن يبدو أن scheduleOnce هو شيء خاص بـ Ember. لقد حاولت إضافة هذا الاستيراد إلى المكون الخاص بي، ولكني حصلت على خطأ “الاستيرادات مسموح بها فقط في المستوى الأعلى”.
import { scheduleOnce } from "@ember/runloop";

أعتقد أن هناك شيئًا صغيرًا أفتقده، وسأستمر في العبث به، لكنني اعتقدت أنني سأرى ما إذا كان واضحًا لك.

شكرًا مرة أخرى :slight_smile:

6

نعم، الاستيراد صحيح. ضع كلا الاستيرادين في أعلى الملف وستكون جاهزًا.

إعجاب واحد (1)
7

في أي ملف يجب أن أضعهم؟ ما كنت أحاول فعله هو استخدامه فقط في <head> – كمكون – هذا ما فعلته، والذي ينتج عنه ظهور السجل “scheduling afterRender”، ثم خطأ بشأن عدم وجود scheduleOnce. لقد حاولت استخدام الاستيراد بعدة طرق، لكنه لا يعمل. أشك في أن قلة خبرتي في الوحدات النمطية في جافاسكريبت تسبب لي مشاكل. ربما لا يمكنني القيام بذلك عبر مكون، وأحتاج إلى القيام بالمزيد من المكون الإضافي. سألقي نظرة على ذلك – شكراً مرة أخرى على مساعدتك :slight_smile:

<script type="text/discourse-plugin" version="1.8.0">
    api.onAppEvent("composer:open", ({ model }) => {
      console.log("composer open happened, model is: ", model);
      if (model.title !== "") {
        console.log("scheduling afterRender");
        scheduleOnce("afterRender", () => {
          console.log("after render happening");
          api.putCursorAtEnd(document.querySelector("textarea.d-editor-input"));
        });
      }
    });
</script>
8

أوه، فهمت. افترضت أنك استخدمت JS في ملفاته.

من واجهة المستخدم الإدارية، ستكتب إذنًا:


    const putCursorAtEnd = require("discourse/lib/put-cursor-at-end").default;
    const { scheduleOnce } = require("@ember/runloop");

    api.onAppEvent("composer:open", ({ model }) => {
      if (model.title !== "") {
        scheduleOnce("afterRender", () => {
          putCursorAtEnd(document.querySelector("textarea.d-editor-input"));
        });
      }
    });

على صعيد آخر، أشجعك بشدة على استخدام Theme CLI. يمكنك إنشاء مكون سمة من قالب، ومزامنته مع Discourse مع تحديث مباشر، وتحديث أي تغييرات باستخدام محرر النصوص الخاص بك. إنه أسهل بكثير من استخدام واجهة المستخدم!

إعجابَين (2)
9

شكراً جزيلاً لك - لقد عرفت أن هناك شيئاً ما كنت أفتقده - سأقوم بالتأكيد بإعداده لاستخدام واجهة سطر أوامر السمات وتعديلها بهذه الطريقة :slight_smile: :slight_smile:

إعجاب واحد (1)
10

شكراً مرة أخرى Arkshine، لقد أنشأت أول مكون لي باستخدام discourse_theme الآن :slight_smile:
لمن يجد هذا الموضوع، لقد احتجت ببساطة إلى تشغيل بعض الأوامر:

gem install discourse_theme
npm install -g yarn
discourse_theme new <component-name>

ثم قم بتحرير الملف: javascripts/discourse/api-initializers/.js
قم بتحميله إلى github، ويمكنك تثبيته / مشاركته.
خاصتي موجود هنا (GitHub - atpsoft/discourse_focus_editor_component: This component makes it so that if you have a shortcut new-message that includes a title, when the new message pops up, the focus will be on the editor, rather than the - already specified - title.).
يبدو أن لديه ميزة حيث يمكنك تحديث الإصدار تلقائيًا على الخادم الخاص بك أيضًا، أثناء تعديل الملفات. يبدو جيدًا ومفيدًا مع تعمقي في المكونات الأكثر تعقيدًا.

تحياتي

إعجاب واحد (1)
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.