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 a72f8e83..d51b58db 100644 --- a/app/models/metadata_template.rb +++ b/app/models/metadata_template.rb @@ -202,7 +202,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 13d2eaf2..86797770 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -577,6 +577,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 eac111ae..c7aa49b2 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -585,6 +585,7 @@ es: left: Izquierda right: Derecha center: Centro + blockquote: Cita color: Color text-color: Color del texto multimedia: Multimedia