Agregar citas al editor

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; }

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 {

app/javascript/editor/utils.ts

@@ -10,6 +10,7 @@ export const blockNames = [
   "h6",
   "unordered_list",
   "ordered_list",
+  "blockquote",
 ];
 export const markNames = [
   "bold",

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
 

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: '' } }

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

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