שיתוף | סקריפט לטמפרמונקי ליצירת Markdown במערכת הפניות של נטפרי! V 3.0
-
@אלישי מכיוון שאני לא מבין במה שיצרתי בכהוא זה... ע"כ שאלתי את גב' בינה בעניין וזה תשובתה כדלהלן.
הערה נכונה מאוד עקרונית, ובפיתוח רגיל בוודאי שהייתי משתמש בספרייה מוכנה (כמו EasyMDE, SimpleMDE או Editor.md).
אמנם, במקרה הספציפי של סקריפט ל-Tampermonkey על גבי מערכת הפניות של נטפרי, בחרתי בגישת "Vanilla JS" (קוד נקי) מכמה סיבות טכניות:
- התנגשות עם Angular: מערכת הפניות של נטפרי בנויה על אנגולר. ספריות Markdown חיצוניות לרוב "משתלטות" על ה-Textarea ומחליפות אותו ב-DOM מורכב משלהן (Divs, iFrames וכו'). זה כמעט תמיד שובר את ה-Data Binding של אנגולר, מה שגורם לכך שכפתור ה"שלח" המקורי לא יזהה שיש טקסט, או שההודעה תישלח ריקה. הסקריפט הנוכחי עובד "כירורגית" על ה-Textarea הקיים ושולח
input eventsכדי שאנגולר יישאר מסונכרן. - עיצוב ותצוגה מקדימה: ספריות מוכנות מגיעות עם עיצוב משלהן (לרוב אפור/כהה וגנרי). כדי לגרום להן להיראות בדיוק כמו הממשק של נטפרי (כולל התצוגה המקדימה שנראית כמו בועת צ'אט עם האווטאר והשם), הייתי צריך לכתוב כמות CSS ו-JS גדולה יותר רק כדי "לדרוס" את ברירת המחדל של הספרייה, מאשר פשוט לכתוב את זה מאפס.
- תמיכה ב-RTL ויישור: רוב הספריות הבינלאומיות לא תומכות בצורה מושלמת בערבוב של עברית ואנגלית, ובטח שלא בסימון ייחודי ליישור (כמו
|-ו-|=) שמותאם ספציפית לצרכים שלנו כאן. - חסימות וביצועים: מכיוון שמדובר בנטפרי, שימוש ב-CDN חיצוני (טעינת סקריפט JS כבד ו-CSS חיצוני) עלול לפעמים להיתקל בבעיות איטיות או חסימה (אם ה-CDN לא פתוח), וגם מכביד על טעינת הדף. הסקריפט שלנו הוא קל משקל (כמה קילובייטים בודדים) ורץ מיידית ללא תלות חיצונית.
לסיכום: שימוש בספרייה היה נותן אולי יותר פיצ'רים, אבל היה דורש המון "האקים" כדי לגרום לזה לעבוד חלק עם האתר. הפתרון הנוכחי הוא "Tailor Made" (תפור למידה) בדיוק לצרכים שלנו.
אשמח לדעת אם זה נכון.
@לאצי מה ששיכנע אותי זה הוספת הcss המותאם, לא ראיתי את התוסף בפעולה, אבל אם זה נכון אכן כדאי לכתוב ונילה, מה שהוא כותב לגבי ההתנגשות עם אנגולר, לא נראה לי באמת, כי ה-Bundling תכלס הופך את זה לאלמנטים פשוטים, ואם התוסף יכול לשלוט על התוכן, כל מודול כמו tiptap גם יוכלו לשלוט על התוכן בשורה התחתונה בהינתן לו מזהה האלמנט (בדיוק כמו שהתוסף יכול לתפוס את האלמנט).
לגבי תמיכה ב-RTL, הספרייה של tiptap תומך בRTL.למעשה לדעתי כדאי שהתצוגה המקדימה תהיה מתחת לעורך הטקסט ולא מעל, מכיון שכל ירידת שורה תוריד את כל החלונית כלפי מטה, ואז המשתמש לא יודע היכן הוא נמצא, וגם אני סמוך ובטוח שמירכוז הטקסט עם |- לא יעבוד בנטפרי, זה לא קונבנציית MD מוכרת וזה מימוש אישי של מישהו לסוג פורום זה.
- התנגשות עם Angular: מערכת הפניות של נטפרי בנויה על אנגולר. ספריות Markdown חיצוניות לרוב "משתלטות" על ה-Textarea ומחליפות אותו ב-DOM מורכב משלהן (Divs, iFrames וכו'). זה כמעט תמיד שובר את ה-Data Binding של אנגולר, מה שגורם לכך שכפתור ה"שלח" המקורי לא יזהה שיש טקסט, או שההודעה תישלח ריקה. הסקריפט הנוכחי עובד "כירורגית" על ה-Textarea הקיים ושולח
-
@לאצי מה ששיכנע אותי זה הוספת הcss המותאם, לא ראיתי את התוסף בפעולה, אבל אם זה נכון אכן כדאי לכתוב ונילה, מה שהוא כותב לגבי ההתנגשות עם אנגולר, לא נראה לי באמת, כי ה-Bundling תכלס הופך את זה לאלמנטים פשוטים, ואם התוסף יכול לשלוט על התוכן, כל מודול כמו tiptap גם יוכלו לשלוט על התוכן בשורה התחתונה בהינתן לו מזהה האלמנט (בדיוק כמו שהתוסף יכול לתפוס את האלמנט).
לגבי תמיכה ב-RTL, הספרייה של tiptap תומך בRTL.למעשה לדעתי כדאי שהתצוגה המקדימה תהיה מתחת לעורך הטקסט ולא מעל, מכיון שכל ירידת שורה תוריד את כל החלונית כלפי מטה, ואז המשתמש לא יודע היכן הוא נמצא, וגם אני סמוך ובטוח שמירכוז הטקסט עם |- לא יעבוד בנטפרי, זה לא קונבנציית MD מוכרת וזה מימוש אישי של מישהו לסוג פורום זה.
-
לאחר בדיקה עלה כי נטפרי משתמשים עם ספריית markdown-it שלא תומכת ביישור ובצבעים.
יתוקן בגרסה הבאה בע"ה, וכן התצוגה המקדימה תסודר כהצעת @אלישי בעז"ה. (תשוח"ח)עריכה: עודכן. נוספה גם תמיכה ב ctrl+z.
@לאצי כתב בשיתוף | סקריפט לטמפרמונקי ליצירת Markdown במערכת הפניות של נטפרי! V 2.0:
לאחר בדיקה עלה כי נטפרי משתמשים עם ספריית markdown-it שלא תומכת ביישור ובצבעים.
יתוקן בגרסה הבאה בע"ה, וכן התצוגה המקדימה תסודר כהצעת @אלישי בעז"ה. (תשוח"ח)עריכה: עודכן. נוספה גם תמיכה ב ctrl+z.
יש תמונות מסך?
נהנת? נעזרת? שמחתי לעזור
-
@לאצי כתב בשיתוף | סקריפט לטמפרמונקי ליצירת Markdown במערכת הפניות של נטפרי! V 2.0:
לאחר בדיקה עלה כי נטפרי משתמשים עם ספריית markdown-it שלא תומכת ביישור ובצבעים.
יתוקן בגרסה הבאה בע"ה, וכן התצוגה המקדימה תסודר כהצעת @אלישי בעז"ה. (תשוח"ח)עריכה: עודכן. נוספה גם תמיכה ב ctrl+z.
יש תמונות מסך?
@עניו-כמשה מה פירוש?
-
@עניו-כמשה מה פירוש?
-
@לאצי ככה”נ @עניו-כמשה רוצה לראות איך נראה
-
תמיד הפריע לי שבמערכת הפניות של נטפרי חסרה האפשרות לעצב את הטקסט בצורה נוחה וקלה – להדגיש מילים חשובות, להוסיף קישורים מוטמעים בתוך מילה , להוסיף צבע - בלחיצת כפתור, או לראות איך ההודעה תיראה לפני השליחה.
אז בעז"ה יצרתי סקריפט ל-Tampermonkey שמוסיף סרגל כלים מלא ומעוצב ישירות לתוך תיבת הכתיבה במערכת הפניות.
מה הסקריפט כולל?
הסרגל משתלב בעיצוב של האתר וכולל את הפיצ'רים הבאים:
- כותרות: תפריט נפתח לבחירת גודל כותרת (H1-H6).
- עיצוב בסיסי: מודגש, נטוי,
קו חוצה, וקו מפריד כזה:
- רשימות וקישורים: יצירת רשימות בולטים והוספת קישורים בקלות.
- בלוק קוד: כפתור להוספת קוד בצורה קריאה.
- תצוגה מקדימה (Preview): תצוגה מקדימה שמראה לכם בדיוק איך הפניה תיראה לאחר השליחה, כולל כל העיצובים.
ועוד ועוד...
גרסה 3.0
- מנוע תצוגה מקדימה מדויק: התצוגה המקדימה שוכתבה כדי לחקות בדיוק את מה שהנציג יראה (כולל חסימת HTML והצגת טבלאות).
תמיכה בטבלאות (חדש!):
- נוסף כפתור טבלה בסרגל הכלים שיוצר תבנית מוכנה לעריכה.
- התצוגה המקדימה יודעת כעת להציג טבלאות בצורה מעוצבת וברורה (כולל גבולות ורקע לכותרות).
. שיפורי כפתורים ועריכה:
- קישורים חכמים: בלחיצה על כפתור קישור, הסקריפט כעת מסמן אוטומטית את החלק של ה-
(כתובת קישור)כדי שתוכלו פשוט לעשות "הדבק" (Paste) לכתובת ה-URL מבלי למחוק ידנית. - כפתור תמונה: נוסף כפתור ייעודי להוספת תמונות מכתובת URL.
- כפתור ציטוט: נוסף כפתור לציטוט טקסט (חיוני למענה לפניות).
. תיקונים טכניים:
- שליחה עם Ctrl+Enter: תוקן הבאג שבו הקיצור לא עבד בעמוד "פתיחת פניה חדשה". כעת זה עובד בכל המצבים.
- הגנה על קוד: שיפור במנוע המרקדאון שמונע שיבוש של טקסט בתוך בלוקים של קוד (
code blocks).
התקנה
צילו"מ בספוילר
תהנו! אשמח לשמוע הערות או רעיונות לשיפור.
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}