NoteJS/app.js

const textInput = document.querySelector(".textInput");
const btnSave = document.querySelector(".btnSave");
const notes = document.querySelector(".notes-container");

// Получаем кнопки
const boldBtn = document.getElementById("boldBtn");
const italicBtn = document.getElementById("italicBtn");
const headerBtn = document.getElementById("headerBtn");
const listBtn = document.getElementById("listBtn");
const quoteBtn = document.getElementById("quoteBtn");
const codeBtn = document.getElementById("codeBtn");
const linkBtn = document.getElementById("linkBtn");

function getFormattedDateTime() {
  let now = new Date();
  let day = String(now.getDate()).padStart(2, "0");
  let month = String(now.getMonth() + 1).padStart(2, "0");
  let year = now.getFullYear();
  let hours = String(now.getHours()).padStart(2, "0");
  let minutes = String(now.getMinutes()).padStart(2, "0");

  return {
    date: `${day}.${month}.${year}`,
    time: `${hours}:${minutes}`,
  };
}

// Сохранить заметки в localStorage
function saveNotesToLocalStorage(notesArr) {
  localStorage.setItem("notes", JSON.stringify(notesArr));
}

// Получить заметки из localStorage
function getNotesFromLocalStorage() {
  return JSON.parse(localStorage.getItem("notes")) || [];
}

// Обновить функцию renderNotes
function renderNotes() {
  const notesArr = getNotesFromLocalStorage();
  notes.innerHTML = ""; // Очищаем контейнер перед рендерингом

  notesArr.forEach(function (content, index) {
    const noteHtml = `
      <div id="note" class="container">
        <div class="date">
          ${content.date} ${content.time}
          <div id="editBtn" class="notesHeaderBtn" data-index="${index}">Редактировать</div>
          <div id="deleteBtn" class="notesHeaderBtn" data-index="${index}">Удалить</div>
        </div>
        <div class="textNote">${marked.parse(content.content)}</div>
      </div>
    `;
    notes.insertAdjacentHTML("afterbegin", noteHtml);
  });

  deleteNote();
  editNote();
}

// Обновить функцию saveNote
function saveNote() {
  btnSave.addEventListener("click", function () {
    if (textInput.value.trim() !== "") {
      let { date, time } = getFormattedDateTime();

      const note = {
        content: textInput.value,
        date: date,
        time: time,
      };

      const notesArr = getNotesFromLocalStorage();
      notesArr.push(note);
      saveNotesToLocalStorage(notesArr);

      textInput.value = "";
      textInput.style.height = "auto"; // Сбрасываем размер текстового поля
      renderNotes();
    }
  });
}

// Обновить функцию deleteNote
function deleteNote() {
  document.querySelectorAll("#deleteBtn").forEach((btn) => {
    btn.addEventListener("click", function (event) {
      let index = event.target.dataset.index;
      const notesArr = getNotesFromLocalStorage();
      notesArr.splice(index, 1);
      saveNotesToLocalStorage(notesArr);
      renderNotes();
    });
  });
}

// Обновить функцию editNote
function editNote() {
  document.querySelectorAll("#editBtn").forEach((btn) => {
    btn.addEventListener("click", function (event) {
      let index = event.target.dataset.index;
      let noteContainer = event.target.closest("#note");
      let noteContent = noteContainer.querySelector(".textNote");

      // Создаем textarea с уже существующим классом textInput
      let textarea = document.createElement("textarea");
      textarea.classList.add("textInput");
      textarea.value = noteContent.textContent;

      // Привязываем авторасширение к textarea для редактирования
      textarea.addEventListener("input", function () {
        autoExpandTextarea(textarea);
      });
      autoExpandTextarea(textarea);

      // Кнопка сохранить
      let saveEditBtn = document.createElement("button");
      saveEditBtn.textContent = "Сохранить";
      saveEditBtn.classList.add("btnSave");

      // Очищаем текущий контент и вставляем textarea и кнопку сохранить
      noteContent.innerHTML = "";
      noteContent.appendChild(textarea);
      noteContent.appendChild(saveEditBtn);

      saveEditBtn.addEventListener("click", function () {
        if (textarea.value.trim() !== "") {
          let { date, time } = getFormattedDateTime();
          const notesArr = getNotesFromLocalStorage();
          notesArr[index] = {
            content: textarea.value,
            date: date,
            time: time,
          };
          saveNotesToLocalStorage(notesArr);
          renderNotes();
        }
      });
    });
  });
}

// Функция для авторасширения текстового поля
function autoExpandTextarea(textarea) {
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
}

// Привязываем авторасширение к текстовому полю для создания заметки
textInput.addEventListener("input", function () {
  autoExpandTextarea(textInput);
});

// Изначально запускаем для установки правильной высоты
autoExpandTextarea(textInput);

function insertMarkdown(tag) {
  const start = textInput.selectionStart;
  const end = textInput.selectionEnd;
  const text = textInput.value;

  const before = text.substring(0, start);
  const selected = text.substring(start, end);
  const after = text.substring(end);

  if (selected.startsWith(tag) && selected.endsWith(tag)) {
    // Если теги уже есть, удаляем их
    textInput.value = `${before}${selected.slice(
      tag.length,
      -tag.length
    )}${after}`;
    textInput.setSelectionRange(start, end - 2 * tag.length);
  } else if (selected.trim() === "") {
    // Если текст не выделен
    if (tag === "[Текст ссылки](URL)") {
      // Для ссылок создаем шаблон с двумя кавычками
      textInput.value = `${before}[Текст ссылки](URL)${after}`;
      const cursorPosition = start + 1; // Помещаем курсор внутрь текста ссылки
      textInput.setSelectionRange(cursorPosition, cursorPosition + 12);
    } else if (tag === "- " || tag === "> " || tag === "# ") {
      // Для списка, цитаты и заголовка помещаем курсор после `- `, `> ` или `# `
      textInput.value = `${before}${tag}${after}`;
      const cursorPosition = start + tag.length;
      textInput.setSelectionRange(cursorPosition, cursorPosition);
    } else {
      // Для остальных типов создаем два тега
      textInput.value = `${before}${tag}${tag}${after}`;
      const cursorPosition = start + tag.length;
      textInput.setSelectionRange(cursorPosition, cursorPosition);
    }
  } else {
    // Если текст выделен
    if (tag === "[Текст ссылки](URL)") {
      // Для ссылок используем выделенный текст вместо "Текст ссылки"
      textInput.value = `${before}[${selected}](URL)${after}`;
      const cursorPosition = start + selected.length + 3; // Помещаем курсор в URL
      textInput.setSelectionRange(cursorPosition, cursorPosition + 3);
    } else if (tag === "- " || tag === "> " || tag === "# ") {
      // Для списка, цитаты и заголовка добавляем `- `, `> ` или `# ` перед выделенным текстом
      textInput.value = `${before}${tag}${selected}${after}`;
      const cursorPosition = start + tag.length + selected.length;
      textInput.setSelectionRange(cursorPosition, cursorPosition);
    } else {
      // Для остальных типов оборачиваем выделенный текст
      textInput.value = `${before}${tag}${selected}${tag}${after}`;
      const cursorPosition = start + tag.length + selected.length + tag.length;
      textInput.setSelectionRange(cursorPosition, cursorPosition);
    }
  }

  textInput.focus();
}

// Обработчики для кнопок
boldBtn.addEventListener("click", function () {
  insertMarkdown("**"); // Вставляем жирный текст
});

italicBtn.addEventListener("click", function () {
  insertMarkdown("*"); // Вставляем курсив
});

headerBtn.addEventListener("click", function () {
  insertMarkdown("# "); // Вставляем заголовок
});

listBtn.addEventListener("click", function () {
  insertMarkdown("- "); // Вставляем элемент списка
});

quoteBtn.addEventListener("click", function () {
  insertMarkdown("> "); // Вставляем цитату
});

codeBtn.addEventListener("click", function () {
  insertMarkdown("`"); // Вставляем код
});

linkBtn.addEventListener("click", function () {
  insertMarkdown("[Текст ссылки](URL)"); // Вставляем ссылку
});

// Удалено дублирование добавления кнопок Markdown в окно сохранения заметки
// Кнопки уже добавлены в HTML (index.html), поэтому их повторное создание не требуется

renderNotes();
saveNote();