-
-
-
+
+
-
+
-
Ред.
- Удал.
+ Ред.
+ Удал.
{
btn.addEventListener("click", async function (event) {
const noteId = event.target.closest("#archiveBtn").dataset.id;
- if (confirm("Архивировать эту заметку? Её можно будет восстановить из настроек.")) {
+ if (
+ confirm(
+ "Архивировать эту заметку? Её можно будет восстановить из настроек."
+ )
+ ) {
try {
const response = await fetch(`/api/notes/${noteId}/archive`, {
method: "PUT",
@@ -1476,6 +1544,7 @@ function addNoteEventListeners() {
tag: "- [ ] ",
},
{ id: "editImageBtn", icon: "mdi:image-plus", tag: "image" },
+ { id: "editPreviewBtn", icon: "mdi:eye", tag: "preview" },
];
markdownButtons.forEach((button) => {
@@ -1741,6 +1810,13 @@ function addNoteEventListeners() {
const saveEditNote = async function () {
if (textarea.value.trim() !== "" || editSelectedImages.length > 0) {
try {
+ // Сбрасываем режим предпросмотра перед сохранением
+ if (isEditPreviewMode) {
+ isEditPreviewMode = false;
+ textarea.style.display = "block";
+ editPreviewContainer.style.display = "none";
+ }
+
const response = await fetch(`/api/notes/${noteId}`, {
method: "PUT",
headers: {
@@ -1780,6 +1856,13 @@ function addNoteEventListeners() {
if (!ok) return;
}
+ // Сбрасываем режим предпросмотра
+ if (isEditPreviewMode) {
+ isEditPreviewMode = false;
+ textarea.style.display = "block";
+ editPreviewContainer.style.display = "none";
+ }
+
// Очистить выбранные новые изображения и превью
editSelectedImages.length = 0;
if (editImagePreviewContainer) {
@@ -1829,10 +1912,29 @@ function addNoteEventListeners() {
editImageInput.value = "";
});
+ // Создаем контейнер для предпросмотра в режиме редактирования
+ const editPreviewContainer = document.createElement("div");
+ editPreviewContainer.classList.add("note-preview-container");
+ editPreviewContainer.style.display = "none";
+
+ const editPreviewHeader = document.createElement("div");
+ editPreviewHeader.classList.add("note-preview-header");
+ editPreviewHeader.innerHTML = "Предпросмотр:";
+
+ const editPreviewContent = document.createElement("div");
+ editPreviewContent.classList.add("note-preview-content");
+
+ editPreviewContainer.appendChild(editPreviewHeader);
+ editPreviewContainer.appendChild(editPreviewContent);
+
+ // Флаг для режима предпросмотра редактирования
+ let isEditPreviewMode = false;
+
// Очищаем текущий контент и вставляем markdown кнопки, textarea, элементы для изображений и контейнер с кнопкой сохранить
noteContent.innerHTML = "";
noteContent.appendChild(markdownButtonsContainer);
noteContent.appendChild(textarea);
+ noteContent.appendChild(editPreviewContainer);
noteContent.appendChild(editImageInput);
noteContent.appendChild(editImagePreviewContainer);
noteContent.appendChild(saveButtonContainer);
@@ -1853,6 +1955,46 @@ function addNoteEventListeners() {
} else if (button.tag === "color") {
// Для кнопки цвета открываем диалог выбора цвета
insertColorTagForEdit(textarea);
+ } else if (button.tag === "preview") {
+ // Для кнопки предпросмотра переключаем режим
+ isEditPreviewMode = !isEditPreviewMode;
+
+ if (isEditPreviewMode) {
+ // Показываем предпросмотр
+ textarea.style.display = "none";
+ editPreviewContainer.style.display = "block";
+
+ // Получаем содержимое и рендерим его
+ const content = textarea.value;
+ if (content.trim()) {
+ // Парсим markdown и делаем теги кликабельными
+ const htmlContent = marked.parse(content);
+ const contentWithTags = makeTagsClickable(htmlContent);
+ editPreviewContent.innerHTML = contentWithTags;
+
+ // Инициализируем lazy loading для изображений в превью
+ setTimeout(() => {
+ initLazyLoading();
+ }, 0);
+ } else {
+ editPreviewContent.innerHTML =
+ '
Нет содержимого для предпросмотра
'; + } + + // Меняем иконку кнопки + btn.innerHTML = + ''; + btn.title = "Закрыть предпросмотр"; + } else { + // Возвращаемся к редактированию + textarea.style.display = "block"; + editPreviewContainer.style.display = "none"; + + // Меняем иконку обратно + btn.innerHTML = + ''; + btn.title = "Предпросмотр"; + } } else { insertMarkdownForEdit(textarea, button.tag); } @@ -2163,6 +2305,17 @@ async function saveNote() { selectedImages = []; updateImagePreview(); imageInput.value = ""; + + // Сбрасываем режим предпросмотра, если он был активен + if (isPreviewMode) { + isPreviewMode = false; + noteInput.style.display = "block"; + notePreviewContainer.style.display = "none"; + previewBtn.innerHTML = + ''; + previewBtn.title = "Предпросмотр"; + } + await loadNotes(true); // Показываем уведомление об успешном сохранении @@ -2407,8 +2560,12 @@ async function loadUserInfo() { if (response.ok) { const user = await response.json(); const userAvatar = document.getElementById("user-avatar"); - const userAvatarContainer = document.getElementById("user-avatar-container"); - const userAvatarPlaceholder = document.getElementById("user-avatar-placeholder"); + const userAvatarContainer = document.getElementById( + "user-avatar-container" + ); + const userAvatarPlaceholder = document.getElementById( + "user-avatar-placeholder" + ); // Показываем аватарку или плейсхолдер if (user.avatar) { diff --git a/public/notes.html b/public/notes.html index 3b55d3e..26cea2b 100644 --- a/public/notes.html +++ b/public/notes.html @@ -222,41 +222,36 @@ style="display: none" >
-
-
-
-