.note {
position: absolute;
background-color: #fdfdfd; /* Легкий серый оттенок для мягкости /
border: 1px solid #ddd; / Более светлая граница /
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); / Более выраженная тень /
padding: 15px; / Увеличенный отступ внутри /
border-radius: 8px; / Закругленные углы /
box-sizing: border-box;
cursor: move;
transition: box-shadow 0.3s ease; / Плавный переход для тени */
}

.note:hover {
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3); /* Более сильная тень на наведении */
}

textarea {
width: 100%;
height: 100%;
border: none;
resize: none;
outline: none;
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif; /* Более современный шрифт /
font-size: 14px; / Оптимальный размер шрифта /
line-height: 1.5; / Улучшенная читабельность текста /
color: #333; / Темно-серый текст для контраста /
background-color: transparent; / Прозрачный фон внутри textarea */
}

textarea::placeholder {
color: #aaa; /* Светлая подсказка для поля ввода */
}

// notes.js

// Assumes uploadFile, showContextMenu, addResizeListeners are available globally

socket.on('new_note', (data) => {
const note = createNoteElement(data);
document.getElementById('board').appendChild(note);
});

socket.on('updated_note', (data) => {
const note = document.querySelector(.note[data-id="${data.id}"]);
if (note) {
note.style.left = ${data.x}px;
note.style.top = ${data.y}px;
note.style.width = ${data.width}px;
note.style.height = ${data.height}px;
note.querySelector('textarea').value = data.text;
}
});

socket.on('element_deleted', (data) => {
if (data.type === 'note') {
const element = document.querySelector(.note[data-id="${data.id}"]);
if (element) {
element.remove();
}
}
});

function createNoteElement(data) {
const note = document.createElement('div');
note.className = 'note';
note.dataset.id = data.id;
note.style.left = ${data.x}px;
note.style.top = ${data.y}px;
note.style.width = ${data.width}px;
note.style.height = ${data.height}px;


const textarea = document.createElement('textarea');
textarea.value = data.text;
textarea.addEventListener('input', () => {
    const x = note.offsetLeft;
    const y = note.offsetTop;
    const width = note.offsetWidth;
    const height = note.offsetHeight;
    socket.emit('update_note', { id: data.id, text: textarea.value, x, y, width, height });
});

textarea.addEventListener('mousedown', (e) => {
    e.stopPropagation();
});

note.appendChild(textarea);

addNoteEventListeners(note, data.id);

return note;
}

function addNoteEventListeners(note, id) {
let isTouchDragEnabled = false; // Флаг для контроля активности сенсорных обработчиков


note.addEventListener('mousedown', (e) => {
    if (e.button !== 0) return; // Left mouse button
    e.preventDefault();
    e.stopPropagation();
    const startX = e.clientX;
    const startY = e.clientY;
    const startLeft = parseFloat(note.style.left) || 0;
    const startTop = parseFloat(note.style.top) || 0;

    function moveNote(e) {
        const deltaX = (e.clientX - startX) / scale;
        const deltaY = (e.clientY - startY) / scale;
        note.style.left = `${startLeft + deltaX}px`;
        note.style.top = `${startTop + deltaY}px`;
        const x = parseFloat(note.style.left) || 0;
        const y = parseFloat(note.style.top) || 0;
        const width = note.offsetWidth;
        const height = note.offsetHeight;
        socket.emit('update_note', { id, text: note.querySelector('textarea').value, x, y, width, height });
    }

    document.addEventListener('mousemove', moveNote);

    document.addEventListener('mouseup', () => {
        document.removeEventListener('mousemove', moveNote);
    }, { once: true });
});

function startTouchDrag(e) {
    e.preventDefault();
    e.stopPropagation();

    hideContextMenu(); // Скрыть контекстное меню при начале сенсорного перетаскивания

    const startX = e.touches[0].clientX;
    const startY = e.touches[0].clientY;
    const startLeft = parseFloat(note.style.left) || 0;
    const startTop = parseFloat(note.style.top) || 0;

    function moveNoteTouch(e) {
        const deltaX = (e.touches[0].clientX - startX) / scale;
        const deltaY = (e.touches[0].clientY - startY) / scale;
        note.style.left = `${startLeft + deltaX}px`;
        note.style.top = `${startTop + deltaY}px`;
        const x = parseFloat(note.style.left) || 0;
        const y = parseFloat(note.style.top) || 0;
        const width = note.offsetWidth;
        const height = note.offsetHeight;
        socket.emit('update_note', { id, text: note.querySelector('textarea').value, x, y, width, height });
    }

    function endTouchDrag() {
        document.removeEventListener('touchmove', moveNoteTouch);
        document.removeEventListener('touchend', endTouchDrag);
    }

    document.addEventListener('touchmove', moveNoteTouch);
    document.addEventListener('touchend', endTouchDrag);
}

note.addEventListener('dblclick', (e) => {
    e.preventDefault();
    e.stopPropagation();
    showContextMenu(note, id, e.clientX, e.clientY);

    // Переключаем состояние перемещения
    isTouchDragEnabled = !isTouchDragEnabled;

    if (isTouchDragEnabled) {
        note.addEventListener('touchstart', startTouchDrag);

        // Добавляем слушатель, чтобы отключить перемещение при клике вне записи
        document.addEventListener('mousedown', checkClickOutside);
    } else {
        note.removeEventListener('touchstart', startTouchDrag);
        document.removeEventListener('mousedown', checkClickOutside);
    }
});

function checkClickOutside(e) {
    if (!note.contains(e.target)) {
        note.removeEventListener('touchstart', startTouchDrag);
        isTouchDragEnabled = false;
        document.removeEventListener('mousedown', checkClickOutside);
    }
}

addResizeListeners(note, id, 'note');
}

function handleExistingNotes() {
document.querySelectorAll('.note').forEach(note => {
const id = note.dataset.id;
const text = note.querySelector('textarea').value;
const x = note.offsetLeft;
const y = note.offsetTop;
const width = note.offsetWidth;
const height = note.offsetHeight;


    note.querySelector('textarea').addEventListener('input', () => {
        const x = note.offsetLeft;
        const y = note.offsetTop;
        const width = note.offsetWidth;
        const height = note.offsetHeight;
        socket.emit('update_note', { id, text: note.querySelector('textarea').value, x, y, width, height });
    });

    note.querySelector('textarea').addEventListener('mousedown', (e) => {
        e.stopPropagation();
    });

    addNoteEventListeners(note, id);
});
}

Возможно ли добавить маркдауны чтобы когда я вставляю например код в textarea он имел разметку кода