From b0e2cec22f5ca804a3a91f3422e05d867d1bb7af Mon Sep 17 00:00:00 2001
From: void <v0id@riseup.net>
Date: Fri, 26 Feb 2021 18:26:49 +0000
Subject: [PATCH] feat(editor): preguntar al restaurar borrador

no lo pude testear por el problema que tuve
---
 app/assets/stylesheets/editor.scss       |  3 +++
 app/javascript/editor/editor.ts          | 18 ++++++++++++++++--
 app/javascript/editor/storage.ts         |  4 ++++
 app/views/posts/attributes/_content.haml |  4 ++++
 config/locales/en.yml                    |  3 +++
 config/locales/es.yml                    |  4 ++++
 6 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/editor.scss b/app/assets/stylesheets/editor.scss
index c7b50db4..dce87cff 100644
--- a/app/assets/stylesheets/editor.scss
+++ b/app/assets/stylesheets/editor.scss
@@ -33,6 +33,9 @@
 		background: white;
 	}
 
+	.editor-toolbar-aviso-guardado {
+		display: none;
+	}
 	.editor-aviso-word {
 		display: none;
 		position: initial; /* evitar que tape el texto */
diff --git a/app/javascript/editor/editor.ts b/app/javascript/editor/editor.ts
index b9e1e9fe..c3979780 100644
--- a/app/javascript/editor/editor.ts
+++ b/app/javascript/editor/editor.ts
@@ -1,4 +1,4 @@
-import { storeContent, restoreContent, forgetContent } from 'editor/storage'
+import { storeContent, restoreContent, hasContent, forgetContent } from 'editor/storage'
 import { isDirectChild, moveChildren, safeGetSelection, safeGetRangeAt, setAuxiliaryToolbar, parentBlockNames } from 'editor/utils'
 import { types, getValidChildren, getType } from 'editor/types'
 import { setupButtons as setupMarksButtons } from 'editor/types/marks'
@@ -182,6 +182,10 @@ export interface Editor {
 	},
 	contentEl: HTMLElement,
 	wordAlertEl: HTMLElement,
+	guardado: {
+		alertEl: HTMLElement,
+		restoreEl: HTMLButtonElement,
+	},
 	htmlEl: HTMLTextAreaElement,
 }
 
@@ -219,6 +223,10 @@ function setupEditor (editorEl: HTMLElement): void {
 		},
 		contentEl: getSel(editorEl, '.editor-content'),
 		wordAlertEl: getSel(editorEl, '.editor-aviso-word'),
+		guardado: {
+			alertEl: getSel(editorEl, '.editor-toolbar-aviso-guardado'),
+			restoreEl: getSel(editorEl, '[data-editor-button=restore]'),
+		},
 		htmlEl: getSel(editorEl, 'textarea'),
 	}
 	console.debug('iniciando editor', editor)
@@ -228,7 +236,13 @@ function setupEditor (editorEl: HTMLElement): void {
 	// después o la versión local es la última.
 	//
 	// TODO: Preguntar si se lo quiere recuperar.
-	restoreContent(editor)
+	if (hasContent(editor)) {
+		editor.guardado.alertEl.style.display = 'block'
+		editor.guardado.restoreEl.addEventListener('click', () => {
+			restoreContent(editor)
+			editor.guardado.alertEl.style.display = 'none'
+		})
+	}
 
 	// Word alert
 	editor.contentEl.addEventListener('paste', () => {
diff --git a/app/javascript/editor/storage.ts b/app/javascript/editor/storage.ts
index df27d59c..f442b731 100644
--- a/app/javascript/editor/storage.ts
+++ b/app/javascript/editor/storage.ts
@@ -22,6 +22,10 @@ export function storeContent (editor: Editor): void {
 	window.localStorage.setItem(getStorageKey(editor), editor.contentEl.innerHTML)
 }
 
+export function hasContent (editor: Editor): boolean {
+	return !!window.localStorage.getItem(getStorageKey(editor))
+}
+
 export function restoreContent (editor: Editor): void {
 	const content = window.localStorage.getItem(getStorageKey(editor))
 
diff --git a/app/views/posts/attributes/_content.haml b/app/views/posts/attributes/_content.haml
index 50da7e9b..4b52e2f3 100644
--- a/app/views/posts/attributes/_content.haml
+++ b/app/views/posts/attributes/_content.haml
@@ -19,6 +19,10 @@
 
       TODO: Eliminar todo el espacio en blanco para minificar HTML
     .editor-toolbar{ style: 'z-index: 1' }
+      .editor-toolbar-aviso-guardado.alert.alert-primary
+        %p= t('editor.saved.alert')
+        %button.btn{ type: 'button', data: { 'editor_button': 'restore' } }= t('editor.saved.restore')
+
       .editor-primary-toolbar.scrollbar-black
         %button.btn{ type: 'button', title: t('editor.multimedia'), data: { editor_button: 'multimedia' } }>
           %i.fa.fa-fw.fa-upload>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4a843018..60137af9 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -604,6 +604,9 @@ en:
     url: Address
     more: More heading levels
     word: "If you're pasting from an hegemonic word processor, please be patient with us, it's not always simple to recover the whole format :)"
+    saved:
+      alert: "You have a draft of the article saved, do you want to restore it?"
+      restore: "Restore draft"
   email_address:
     address_unknown: "the address is unknown"
     domain_does_not_accept_email: "this domain is not configured to accept email"
diff --git a/config/locales/es.yml b/config/locales/es.yml
index 62c3f8ed..6623cea3 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -617,6 +617,10 @@ es:
     url: Dirección
     more: Más niveles de título
     word: "Si estás pegando texto desde un hegemónico editor de texto que empieza con W, por favor tenenos paciencia, no siempre es simple recuperar y respetar todo el formato :)"
+    saved:
+      alert: "Tenés un borrador del artículo guardado, ¿querés restaurarlo?"
+      restore: "Restaurar artículo"
+
   email_address:
     address_unknown: "la dirección es desconocida"
     domain_does_not_accept_email: "el nombre de dominio no acepta correo"