שיתוף | סקריפט לטמפרמונקי ליצירת Markdown בקלות במערכת הפניות של נטפרי! 🛠️✨

[יאנג בוי]

@לאצי
מעולה!

שאפו גדול גם על השימוש בטמפרמונקי ולא בתוסף נפרד ומעצבן...

מתאים גם לשפת העיצוב באתר.

רעיון לשיפור - שיפור התצוגה המקדימה לרענון מיידי עם עיצוב מהרעיונות הבאים:

• מעל התיבה, בצורה שבה זה יראה אחרי שזה ישלח. (אפשר להגזים ולשאוב גם את שם המשתמש וכו' כך שזה יופיע ממש כאילו התשובה שוגרה כבר...)

• לצד התיבה, בדומה לתיבה המחולקת שיש כאן בפורום.

Spoiler

עריכה:
ביקשתי מג'מיני את האפשרות הראשונה.
נראה בסדר, לא בדקתי לעומק. לא לוקח אחריות.

// ==UserScript==
// @name         NetFree Advanced Ticket Editor (Live Preview Default On)
// @namespace    http://tampermonkey.net/
// @version      6.1
// @description  עורך טקסט מתקדם לנטפרי - תצוגה מקדימה חיה פתוחה כברירת מחדל
// @author       לאצי&AI
// @match        https://netfree.link/app/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=netfree.link
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // --- הגדרות סגנון (CSS) ---
    const styles = `
        .nf-md-toolbar {
            display: flex;
            gap: 4px;
            padding: 6px;
            background: #f3f3f4;
            border: 1px solid #e7eaec;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
            flex-wrap: wrap;
            direction: rtl;
            align-items: center;
            position: relative;
        }
        .nf-md-btn {
            background: #fff;
            border: 1px solid #ddd;
            cursor: pointer;
            width: 30px;
            height: 30px;
            color: #676a6c;
            border-radius: 3px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            position: relative;
        }
        .nf-md-btn:hover, .nf-md-btn.active {
            background-color: #fff;
            color: #1ab394;
            border-color: #1ab394;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .nf-md-active-textarea {
            border-top: none !important;
            border-top-left-radius: 0 !important;
            border-top-right-radius: 0 !important;
        }
        .nf-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            z-index: 1000;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 6px 12px rgba(0,0,0,0.175);
            min-width: 160px;
            padding: 5px 0;
            margin-top: 2px;
        }
        .nf-dropdown-menu.show { display: block; }
        .nf-dropdown-item {
            display: block;
            padding: 8px 15px;
            clear: both;
            font-weight: 400;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
            text-decoration: none;
            cursor: pointer;
            text-align: right;
        }
        .nf-dropdown-item:hover { background-color: #f5f5f5; color: #262626; }

        .nf-color-picker-container { position: relative; display: inline-block; }
        input[type="color"] {
            opacity: 0;
            position: absolute;
            left: 0; top: 0; width: 100%; height: 100%;
            cursor: pointer;
        }
        .nf-separator {
            width: 1px; height: 20px; background: #ccc; margin: 0 5px;
        }

        /* סגנון לאזור התצוגה המקדימה החיה */
        .nf-live-preview-container {
            display: none; /* מוסתר ב-CSS, נדליק אותו ב-JS */
            margin-bottom: 10px;
            padding: 10px;
            border: 1px dashed #1ab394;
            border-radius: 5px;
            background: rgba(26, 179, 148, 0.05);
            transition: all 0.3s ease;
        }
        .nf-live-preview-container.active {
            display: block;
            animation: fadeIn 0.3s;
        }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .nf-preview-header-label {
            font-size: 11px;
            color: #1ab394;
            font-weight: bold;
            margin-bottom: 8px;
            display: block;
            text-align: right;
            border-bottom: 1px solid #1ab39433;
            padding-bottom: 2px;
        }
    `;

    const styleSheet = document.createElement("style");
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);

    // --- לוגיקת המרת Markdown ל-HTML ---
    function parseMarkdown(text) {
        let html = text
            .replace(/```([\s\S]*?)```/g, (match, code) => '<pre>' + code.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</pre>')
            .replace(/^#{1}\s+(.*)$/gm, '<h1>$1</h1>')
            .replace(/^#{2}\s+(.*)$/gm, '<h2>$1</h2>')
            .replace(/^#{3}\s+(.*)$/gm, '<h3>$1</h3>')
            .replace(/^#{4}\s+(.*)$/gm, '<h4>$1</h4>')
            .replace(/^#{5}\s+(.*)$/gm, '<h5>$1</h5>')
            .replace(/^#{6}\s+(.*)$/gm, '<h6>$1</h6>')
            .replace(/^\s*\*\*\*\s*$/gm, '<hr>')
            .replace(/\|-(.*?)-\|/g, '<div style="text-align: center;">$1</div>')
            .replace(/\|=(.*?)=\|/g, '<div style="text-align: justify;">$1</div>')
            .replace(/(^|\n)\|-(.*?)(?=\n|$)/g, '<div style="text-align: left; direction: ltr;">$2</div>')
            .replace(/(^|\n)(.*?)-\|(?=\n|$)/g, '<div style="text-align: right;">$2</div>')
            .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
            .replace(/\*(.*?)\*/g, '<i>$1</i>')
            .replace(/~~(.*?)~~/g, '<del>$1</del>')
            .replace(/`([^`\n]+)`/g, '<code>$1</code>')
            .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" style="color:#1ab394">$1</a>')
            .replace(/%\((.*?)\)\[(.*?)\]/g, '<span style="color:$1">$2</span>')
            .replace(/^\*\s+(.*)/gm, '<li>$1</li>')
            .replace(/\n/g, '<br>');

        html = html.replace(/<\/h(\d)><br>/g, '</h$1>')
                   .replace(/<\/div><br>/g, '</div>')
                   .replace(/<\/pre><br>/g, '</pre>')
                   .replace(/<hr><br>/g, '<hr>');
        return html;
    }

    // --- שליפת פרטי משתמש ---
    function getUserDetails() {
        const nameElement = document.querySelector('ul.nav.navbar-top-links li a[href="#/user/info"] span');
        const userName = nameElement ? nameElement.innerText.trim() : 'אני';

        let avatarSrc = 'https://secure.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y';
        const myImages = document.querySelectorAll('.chat-discussion .chat-message img');
        if (myImages.length > 0) {
             avatarSrc = myImages[myImages.length - 1].src;
        }

        return { name: userName, avatar: avatarSrc };
    }

    // --- בניית HTML של התצוגה המקדימה ---
    function createPreviewContainer() {
        const user = getUserDetails();
        const container = document.createElement('div');
        container.className = 'nf-live-preview-container';

        container.innerHTML = `
            <span class="nf-preview-header-label">תצוגה מקדימה (כך זה ייראה לאחר השליחה):</span>
            <div class="chat-message left" style="background: transparent; padding: 0;">
                <img class="pull-start" style="border-radius: 100%; height: 38px; width: 38px; float: right; margin-left: 10px;" src="${user.avatar}">
                <div class="message" style="display: block; margin-right: 50px; background-color: #fff; border: 1px solid #e7eaec; text-align: right; padding: 10px 20px; border-radius: 4px;">
                    <div class="title" style="color: #1ab394; font-weight: bold; margin-bottom: 5px;">
                        <strong>${user.name}</strong>
                        <div class="post-title-right" style="float: left; font-size: 10px; color: #888;">
                           לפני רגע
                        </div>
                    </div>
                    <div class="message-content" style="padding-top: 5px; line-height: 1.5;"></div>
                </div>
            </div>
        `;
        return container;
    }

    // --- הכנסת טקסט חכמה ---
    function insertSmart(textarea, prefix, suffix, placeholder) {
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const text = textarea.value;
        const selectedText = text.substring(start, end);

        let newText = '';
        let newSelectionStart = 0;
        let newSelectionEnd = 0;

        if (selectedText.length === 0) {
            newText = text.substring(0, start) + prefix + placeholder + suffix + text.substring(end);
            newSelectionStart = start + prefix.length;
            newSelectionEnd = newSelectionStart + placeholder.length;
        } else {
            newText = text.substring(0, start) + prefix + selectedText + suffix + text.substring(end);
            newSelectionStart = start;
            newSelectionEnd = end + prefix.length + suffix.length;
        }

        textarea.value = newText;
        textarea.focus();
        textarea.setSelectionRange(newSelectionStart, newSelectionEnd);

        textarea.dispatchEvent(new Event('input', { bubbles: true }));
        textarea.dispatchEvent(new Event('change', { bubbles: true }));
    }

    // --- יצירת הסרגל והלוגיקה ---
    function createToolbar(textarea) {
        const toolbar = document.createElement('div');
        toolbar.className = 'nf-md-toolbar';
        toolbar.onmousedown = (e) => e.preventDefault();

        // 1. יצירת אלמנט התצוגה המקדימה
        const previewBox = createPreviewContainer();
        const contentDiv = previewBox.querySelector('.message-content');

        // פונקציית עדכון
        const updatePreview = () => {
            if (previewBox.classList.contains('active')) {
                contentDiv.innerHTML = parseMarkdown(textarea.value);
            }
        };

        // האזנה לשינויים בתיבת הטקסט
        textarea.addEventListener('input', updatePreview);
        textarea.addEventListener('keyup', updatePreview);
        textarea.addEventListener('change', updatePreview);

        const createBtn = (icon, title, onClick) => {
            const btn = document.createElement('button');
            btn.className = 'nf-md-btn';
            btn.type = 'button';
            btn.title = title;
            btn.innerHTML = `<i class="fa ${icon}"></i>`;
            btn.onclick = (e) => {
                e.preventDefault();
                onClick(btn);
            };
            return btn;
        };

        const createSep = () => {
            const div = document.createElement('div');
            div.className = 'nf-separator';
            return div;
        };

        // --- כפתורים ---
        const headingWrapper = document.createElement('div');
        headingWrapper.style.position = 'relative';
        const headingBtn = createBtn('fa-heading', 'כותרת', () => headingList.classList.toggle('show'));
        const headingList = document.createElement('div');
        headingList.className = 'nf-dropdown-menu';
        for (let i = 1; i <= 6; i++) {
            const item = document.createElement('div');
            item.className = 'nf-dropdown-item';
            item.innerHTML = `<span style="color:#888; margin-left:5px;">H${i}</span> כותרת ${i}`;
            item.style.fontSize = (20 - i) + 'px';
            item.onclick = () => {
                insertSmart(textarea, '#'.repeat(i) + ' ', '', `כותרת ${i}`);
                headingList.classList.remove('show');
            };
            headingList.appendChild(item);
        }
        headingWrapper.appendChild(headingBtn);
        headingWrapper.appendChild(headingList);
        toolbar.appendChild(headingWrapper);

        document.addEventListener('click', (e) => {
            if (!headingWrapper.contains(e.target)) headingList.classList.remove('show');
        });

        toolbar.appendChild(createBtn('fa-minus', 'קו הפרדה', () => insertSmart(textarea, '\n***\n', '', '')));
        toolbar.appendChild(createSep());
        toolbar.appendChild(createBtn('fa-bold', 'מודגש', () => insertSmart(textarea, '**', '**', 'טקסט מודגש')));
        toolbar.appendChild(createBtn('fa-italic', 'נטוי', () => insertSmart(textarea, '*', '*', 'טקסט נטוי')));
        toolbar.appendChild(createBtn('fa-strikethrough', 'קו חוצה', () => insertSmart(textarea, '~~', '~~', 'קו חוצה')));
        toolbar.appendChild(createSep());
        toolbar.appendChild(createBtn('fa-list-ul', 'רשימה', () => insertSmart(textarea, '* ', '', 'פריט רשימה')));
        toolbar.appendChild(createBtn('fa-link', 'קישור', () => insertSmart(textarea, '[', '](http://)', 'טקסט קישור')));
        toolbar.appendChild(createBtn('fa-code', 'בלוק קוד', () => insertSmart(textarea, '\n```\n', '\n```\n', 'קוד')));
        toolbar.appendChild(createSep());
        toolbar.appendChild(createBtn('fa-align-right', 'יישור לימין', () => insertSmart(textarea, '', '-|', 'יישור לימין')));
        toolbar.appendChild(createBtn('fa-align-center', 'מרכוז', () => insertSmart(textarea, '|-', '-|', 'מרכוז')));
        toolbar.appendChild(createBtn('fa-align-left', 'יישור לשמאל', () => insertSmart(textarea, '|-', '', 'יישור לשמאל')));
        toolbar.appendChild(createBtn('fa-align-justify', 'יישור לשני הצדדים', () => insertSmart(textarea, '|=', '=|', 'רגיל')));
        toolbar.appendChild(createSep());

        const colorWrapper = document.createElement('div');
        colorWrapper.className = 'nf-color-picker-container';
        const colorBtn = createBtn('fa-eyedropper', 'צבע טקסט', () => {});
        const colorInput = document.createElement('input');
        colorInput.type = 'color';
        colorInput.value = '#000000';
        colorInput.onchange = (e) => {
            insertSmart(textarea, `%(${e.target.value})[`, ']', 'צבעי טקסט');
        };
        colorWrapper.appendChild(colorBtn);
        colorWrapper.appendChild(colorInput);
        toolbar.appendChild(colorWrapper);

        toolbar.appendChild(createSep());

        // --- כפתור תצוגה מקדימה חיה ---
        const eyeBtn = createBtn('fa-eye', 'הפעל/הסתר תצוגה חיה', (btn) => {
             previewBox.classList.toggle('active');
             btn.classList.toggle('active');

             if (previewBox.classList.contains('active')) {
                 updatePreview();
             }
        });

        // ======================================
        // הפעלה כברירת מחדל
        // ======================================
        previewBox.classList.add('active');
        eyeBtn.classList.add('active');
        setTimeout(updatePreview, 0); // רענון ראשוני

        toolbar.appendChild(eyeBtn);

        return { toolbar, previewBox };
    }

    // --- הזרקה לדף ---
    function scanAndInject() {
        const selectors = [
            'textarea[name="content"]',
            'textarea#respons-text',
            'textarea[placeholder="כתוב הודעה"]'
        ];

        selectors.forEach(selector => {
            const textareas = document.querySelectorAll(selector);
            textareas.forEach(textarea => {
                if (textarea.previousElementSibling && textarea.previousElementSibling.classList.contains('nf-md-toolbar')) {
                    return;
                }

                const { toolbar, previewBox } = createToolbar(textarea);

                textarea.parentNode.insertBefore(previewBox, textarea);
                textarea.parentNode.insertBefore(toolbar, textarea);

                textarea.classList.add('nf-md-active-textarea');
            });
        });
    }

    const observer = new MutationObserver(() => scanAndInject());
    observer.observe(document.body, { childList: true, subtree: true });

    setTimeout(scanAndInject, 1000);
})();

[י. פל.]

@לאצי כתב בשיתוף | סקריפט לטמפרמונקי ליצירת Markdown בקלות במערכת הפניות של נטפרי! ️:

רעיונות לשיפור.

מאוד מפריע לי שקונטרול + אנטר לא שולח את ההודעה.
הסקריפט יכול ללכוד לחיצות מקלדת?
מכיוון שאני מאמין שעוד יהיו שיפורים רבים מאוד, אשמח שתשים בגיטהאב עם עדכון אוטומטי.

[צדיק וטוב לו 0]

@לאצי כתב בשיתוף | סקריפט לטמפרמונקי ליצירת Markdown בקלות במערכת הפניות של נטפרי! ️:

להדגיש מילים חשובות

השאלה האם גם העובד שמקבל את ההודעה יראה את זה מודגש.
אחרת מה הרווחת?

[לאצי]

@צדיק-וטוב-לו-0 לכאו' כן, כי גם מה שאני מקבל מהם כתוב במרקדאון.
אבל ליתר ביטחון בא נשאל מישהו שמכיר את נטפרי מקרוב. אולי @צדיק-תמים או שמא הרב @magicode בכבודו ובעצמו?

[ע"ה דכו"ע]

@לאצי כתב בשיתוף | סקריפט לטמפרמונקי ליצירת Markdown בקלות במערכת הפניות של נטפרי! ️:

@צדיק-וטוב-לו-0 לכאו' כן, כי גם מה שאני מקבל מהם כתוב במרקדאון.
אבל ליתר ביטחון בא נשאל מישהו שמכיר את נטפרי מקרוב. אולי @צדיק-תמים או שמא הרב @magicode בכבודו ובעצמו?

אני מקווה שלא הקפצת לו התראה

בכל אופן זה ברור שזה מוצג בMD, לא אמור להיות שום הבדל בין מה שאתה רואה לאחר השליחה לבין מה שהנציג רואה.

ברשימת הפניות מבחוץ העיצוב לא עובד ומוצג כטקסט פשוט.

[לאצי]

@ע-ה-דכו-ע

Spoiler

התמונה לא נפתחת. מה תוכנה?

@ע-ה-דכו-ע כתב בשיתוף | סקריפט לטמפרמונקי ליצירת Markdown בקלות במערכת הפניות של נטפרי! ️:

ברשימת הפניות מבחוץ העיצוב לא עובד ומוצג כטקסט פשוט.

נכון. ושם באמת רואים כי הם משתמשים עם מרקדאון ולא עם html למשל.

[ע"ה דכו"ע]

@לאצי כתב בשיתוף | סקריפט לטמפרמונקי ליצירת Markdown בקלות במערכת הפניות של נטפרי! ️:

התמונה לא נפתחת. מה תוכנה?

היא נפתחה

[MAD]

@לאצי
ואוו אחד האלופים נצרך ביותר!!!

תודה

[efishesh]

פוסט זה נמחק!

[cfopuser]

פוסט זה נמחק!