تسليط ضوء سريع

مطور
48

نعم @satonotdead أعتقد أن هذا الموضوع قد انحرف قليلاً عن مساره… أعتقد أنه قد يتم تقليم هذا الموضوع للإشارة إلى إضافة زر تمييز إلى النافذة المنبثقة العائمة للتحرير/الاقتباس

لذلك، قمت بإنشاء مكون سمة Highlighter Composer Button لغرض محدد ومحدود للغاية وهو النقر على زر في شريط أدوات المنشئ لإدراج \u003cmark\u003ethis\u003c/mark\u003e، وأضفت أيضًا اختصار لوحة مفاتيح \u003ckbd\u003eCtrl-H\u003c/kbd\u003e للراحة.

هناك مكونان آخران مختلفان لأزرار المنشئ يمكّنانك من إدراج التعليمات البرمجية في الوقت الفعلي لإضافة لون خلفية النص وألوان النص. هذان الآخران لم يكونا سريعين ومريحين بالنسبة لي لسببين:

  1. يتطلبان كتابة ألوانك يدويًا ضمن التعليمات البرمجية المدرجة لكي تعمل.

  2. لا تتوافق دائمًا بشكل جيد مع العناصر الأخرى التي أستخدمها في مشاركاتي مثل مربعات المحتوى القابلة للتمرير:

discourse-highlighter-vs-colour-vs-bolor-bg
discourse-highlighter-vs-colour-vs-bolor-bg3072×1465 297 KB

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

هل تريد أن تفتح قليلاً كيف فعلت تلك الصناديق القابلة للتمرير :face_with_peeking_eye:

50

بالتأكيد @Jagster، إنها مكون السمة هذا…

أقوم بتصميم الصناديق بهذه الطريقة…

/* ظل صندوق المحتوى القابل للتمرير */

.scrollable-content {
    border-left: none !important;
    background-color: var(--secondary) !important;
    padding: 1em 0.5em 1em 1em !important;
    box-shadow: 0 1.36px 8.896px #c4b59d, 0 0 1px !important;
    border-radius: 4px !important;
    margin: 0 8.896px !important;
}

.scrollable-content-inner {
    padding-right: 15px !important;
}

.scrollable-content-inner h1,
.scrollable-content-inner h2,
.scrollable-content-inner h3,
.scrollable-content-inner h4,
.scrollable-content-inner h5,
.scrollable-content-inner h6 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}
3 إعجابات
51

للأسف، لن أتمكن من استخدامه على ميتا… :stuck_out_tongue:

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

@satonotdead آسف لذلك! لقد بدأت في طرح الأفكار هنا حول طرق تحسين المنشئ، والتي أجدها مفيدة أيضًا. شخصيًا، لست مقتنعًا باقتراح المنشور الأصلي بإضافة خيار تمييز بجانب الاقتباس والتحرير السريع، عند تحديد نص في منشور تقرأه. يبدو من المنطقي وضع هذه الميزة في المنشئ، في رأيي.

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

مثيرة للاهتمام. فهل تقترح أن يكون النص المميز مرئيًا للمستخدم فقط، أم سيكون مرئيًا للجميع؟ لذا يمكن لعدد قليل من الأشخاص رؤية النص المميز للجميع؟ بالنسبة لي، يبدو الأخير فوضويًا وغير مفيد. الأول لا أعتقد أنه ممكن التنفيذ.

Discourse Shared Edits قد يستفيد من شيء كهذا، لذلك عندما يقوم عدة أشخاص بالتحرير، يكون من الواضح من ساهم بأي نص. ولكن أيضًا ذو قيمة محدودة إلى حد ما، وقد يكون فوضويًا.

رائع! لقد قمت بتثبيت هذا على موقعي الشخصي ويعمل بشكل جيد. عمل جيد!

3 إعجابات
53

بالضبط، @tobiaseigen! نستخدم أقلام التمييز عندما نقرأ ونريد تمييز أجزاء من النص بسرعة.

أفكر في هذا كما أستخدم التحرير السريع حيث يمكنني (في نافذة التحرير المصغرة) كتابة العلامات حول <mark>بعض النص</mark> الذي حددته لتحريره…

<mark>بعض النص</mark>

هل تعتقد أنه سيعمل إذا قمت بنسخ مكون سمة التمييز وتغيير الكود في api-setup.js لوضع زر التمييز (أو الضغط على h) في PluginOutlet

quote-button-after

كود api-setup.js 
import { apiInitializer } from "discourse/lib/api";
import loadScript from "discourse/lib/load-script";
import I18n from "I18n";

async function applyHighlight(element) {
  const highlights = element.querySelectorAll("mark");
  if (!highlights.length) {
    return;
  }
}

export default apiInitializer("0.11.1", (api) => {
  const { iconNode } = require("discourse-common/lib/icon-library");
  let icon = iconNode("highlighter");
  const currentLocale = I18n.currentLocale();
  // I18n.translations[currentLocale].js.highlight_button_title = I18n.t(themePrefix("composer_highlight_button_title"));
  // I18n.translations[currentLocale].js.composer.highlight_button_text = I18n.t(themePrefix("composer_highlight_button_text"));
  I18n.translations[currentLocale].js.highlight_button_title = "Highlight Text";
  I18n.translations[currentLocale].js.composer.this = "this";
  // I18n.translations[currentLocale].js.composer.highlight_button_text = "Highlight Text";

  api.modifyClass("controller:composer", {
    pluginId: "highlight",
    actions: {
      highlightButton() {
        this.get("toolbarEvent").applySurround("\n" + `<mark>` + "\n" + `</mark>` + "\n");
      },
    },
  });

  // add button to the toolbar
  api.onToolbarCreate((toolbar) => {
    toolbar.addButton({
      id: "composer_highlight_button",
      group: "extras",
      icon: "highlighter",
      shortcut: "H",
      preventFocus: true,
      trimLeading: true,
      title: "highlight_button_title",
      // perform: e => e.applySurround('[wrap=highlight]', '[/wrap]', 'this')
      perform: (e) => e.applySurround("<mark>", "</mark>", "this"),
    });
  });

  api.decorateCookedElement(
    async (elem, helper) => {
      const id = helper ? `post_${helper.getModel().id}` : "composer";
      applyHighlight(elem, id);
    },
    { id: "wrap-mark" }
  );
});

أم أنها مهمة عبثية !؟

54

حسنًا. أفهم ما تسعى إلى القيام به.

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

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

كلا من إدراج و حذف

كلا من <ins>إدراج</ins> و <del>حذف</del>

الآن يجب علي أيضًا دمج هذه في مكونات سمة زر الملحن (فقط لأن، كما تقول @Lilly – “الأدوات رائعة!”)

مرحباً! HTML Formatting Tags

56

بالنسبة لي، يمكن أن يكون هذا شكلاً من أشكال الإشارات المرجعية الأكثر دقة.

أتساءل عما إذا كان يمكنك توسيع نظام الإشارات المرجعية لتذكر الأقسام المميزة من النص؟

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

فكرة مثيرة للاهتمام للغاية…