From b4532e94ca3ed5c33f50b236c31df8d38fdfb200 Mon Sep 17 00:00:00 2001
From: Nulo <nulo@sutty.nl>
Date: Sat, 2 Apr 2022 14:34:12 +0000
Subject: [PATCH] Agregar citas al editor

---
 app/assets/stylesheets/editor.scss       | 6 +++++-
 app/javascript/editor/types/blocks.ts    | 8 +++++++-
 app/javascript/editor/utils.ts           | 1 +
 app/models/metadata_template.rb          | 2 +-
 app/views/posts/attributes/_content.haml | 3 +++
 config/locales/en.yml                    | 1 +
 config/locales/es.yml                    | 1 +
 7 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/editor.scss b/app/assets/stylesheets/editor.scss
index 30fab60a..85bf4471 100644
--- a/app/assets/stylesheets/editor.scss
+++ b/app/assets/stylesheets/editor.scss
@@ -67,7 +67,11 @@
 
 	.editor-content {
 		min-height: 480px;
-		p, h1, h2, h3, h4, h5, h6, ul, li, figcaption { outline: #ccc solid thin; }
+		p, h1, h2, h3, h4, h5, h6, ul, li, blockquote, figcaption { outline: #ccc solid thin; }
+		blockquote {
+			border-left: #555 solid .25em;
+			padding: .75em;
+		}
 		strong, em, del, u, sub, sup, small { background: #0002; }
 		a { background: #13fefe50; }
 		[data-editor-selected] { outline: #f206f9 solid thick; }
diff --git a/app/javascript/editor/types/blocks.ts b/app/javascript/editor/types/blocks.ts
index 2e2dea7e..956b79d9 100644
--- a/app/javascript/editor/types/blocks.ts
+++ b/app/javascript/editor/types/blocks.ts
@@ -21,11 +21,12 @@ function makeBlock(tag: string): EditorBlock {
 }
 
 export const li: EditorBlock = makeBlock("li");
+const paragraph: EditorBlock = makeBlock("p");
 
 // XXX: si agregás algo acá, agregalo a blockNames
 // (y probablemente le quieras hacer un botón en app/views/posts/attributes/_content.haml)
 export const blocks: { [propName: string]: EditorBlock } = {
-  paragraph: makeBlock("p"),
+  paragraph,
   h1: makeBlock("h1"),
   h2: makeBlock("h2"),
   h3: makeBlock("h3"),
@@ -42,6 +43,11 @@ export const blocks: { [propName: string]: EditorBlock } = {
     allowedChildren: ["li"],
     handleEmpty: li,
   },
+  blockquote: {
+    ...makeBlock("blockquote"),
+    allowedChildren: blockNames,
+    handleEmpty: paragraph,
+  },
 };
 
 export function setupButtons(editor: Editor): void {
diff --git a/app/javascript/editor/utils.ts b/app/javascript/editor/utils.ts
index 167c0a6d..b0bed66e 100644
--- a/app/javascript/editor/utils.ts
+++ b/app/javascript/editor/utils.ts
@@ -10,6 +10,7 @@ export const blockNames = [
   "h6",
   "unordered_list",
   "ordered_list",
+  "blockquote",
 ];
 export const markNames = [
   "bold",
diff --git a/app/models/metadata_template.rb b/app/models/metadata_template.rb
index 5baa7a4a..26351249 100644
--- a/app/models/metadata_template.rb
+++ b/app/models/metadata_template.rb
@@ -199,7 +199,7 @@ MetadataTemplate = Struct.new(:site, :document, :name, :label, :type,
   end
 
   def allowed_tags
-    @allowed_tags ||= %w[strong em del u mark p h1 h2 h3 h4 h5 h6 ul ol li img iframe audio video div figure
+    @allowed_tags ||= %w[strong em del u mark p h1 h2 h3 h4 h5 h6 ul ol li img iframe audio video div figure blockquote
                          figcaption a sub sup small].freeze
   end
 
diff --git a/app/views/posts/attributes/_content.haml b/app/views/posts/attributes/_content.haml
index 4ae70ba0..36b88872 100644
--- a/app/views/posts/attributes/_content.haml
+++ b/app/views/posts/attributes/_content.haml
@@ -95,6 +95,9 @@
         %button.btn{ type: 'button', title: t('editor.right'), data: { editor_button: 'parentBlock-right' } }>
           %i.fa.fa-fw.fa-align-right>
           %span.sr-only>= t('editor.right')
+        %button.btn{ type: 'button', title: t('editor.blockquote'), data: { editor_button: 'block-blockquote' } }>
+          %i.fa.fa-fw.fa-quote-left>
+          %span.sr-only>= t('editor.blockquote')
 
       -# HAML cringe
       .editor-auxiliary-toolbar.mt-1.scrollbar-black{ data: { editor_auxiliary_toolbar: '' } }
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b814796d..99fbc8b1 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -568,6 +568,7 @@ en:
     left: Left
     right: Right
     center: Center
+    blockquote: Quote
     color: Color
     text-color: Text color
     multimedia: Media
diff --git a/config/locales/es.yml b/config/locales/es.yml
index a6fbd407..3ed72d63 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -576,6 +576,7 @@ es:
     left: Izquierda
     right: Derecha
     center: Centro
+    blockquote: Cita
     color: Color
     text-color: Color del texto
     multimedia: Multimedia