maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cleanup bodyPreview component (#2980) [ci skip]

Browse source
This commit is contained in:
rhymes 2019-05-29 05:55:37 +02:00 • committed by Mac Siri
parent d330883f6e
commit 38aa45c8e3
2 changed files with 99 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/controllers/articles_controller.rb
View file

@ -88,6 +88,7 @@ class ArticlesController < ApplicationController
def preview
authorize Article
begin
fixed_body_markdown = MarkdownFixer.fix_for_preview(params[:article_body])
parsed = FrontMatterParser::Parser.new(:md).call(fixed_body_markdown)
@ -97,6 +98,7 @@ class ArticlesController < ApplicationController
@article = Article.new(body_markdown: params[:article_body])
@article.errors[:base] << ErrorMessageCleaner.new(e.message).clean
end
respond_to do |format|
if @article
format.json { render json: @article.errors, status: :unprocessable_entity }

143
app/javascript/article-form/elements/bodyPreview.jsx
View file

@ -1,6 +1,65 @@
import { h } from 'preact';
import PropTypes from 'prop-types';
function titleArea(previewResponse, version, articleState) {
if (version === 'help') {
// possibly something different here in future.
return '';
}
const tagArray = previewResponse.tags || articleState.tagList.split(', ');
let tags = '';
if (tagArray.length > 0 && tagArray[0].length > 0) {
tags = tagArray.map(tag => {
return (
<span>{tag.length > 0 ? <div className="tag">{tag}</div> : ''} </span>
);
});
}
let coverImage = '';
if (previewResponse.cover_image && previewResponse.cover_image.length > 0) {
coverImage = (
<div className="articleform__mainimage articleform__mainimagepreview">
<img src={previewResponse.cover_image} alt="cover" />
</div>
);
} else if (articleState.mainImage) {
coverImage = (
<div className="articleform__mainimage articleform__mainimagepreview">
<img src={articleState.mainImage} alt="cover" />
</div>
);
}
const previewTitle = previewResponse.title || articleState.title || '';
return (
<div>
{coverImage}
<div className="title" style={{ width: '90%', maxWidth: '1000px' }}>
<h1
className={
previewTitle.length > 44 ? 'articleform_titlepreviewsmall' : ''
}
>
{previewTitle}
</h1>
<h3>
<img
className="profile-pic"
src={window.currentUser.profile_image_90}
alt="profile"
/>
&nbsp;
<span>{window.currentUser.name}</span>
</h3>
<div className="tags">{tags}</div>
</div>
</div>
);
}
const BodyPreview = ({ previewResponse, version, articleState }) => (
<div
className="container"
@ -12,7 +71,7 @@ const BodyPreview = ({ previewResponse, version, articleState }) => (
border: '0px',
}}
>
{titleArea(version, articleState, previewResponse)}
{titleArea(previewResponse, version, articleState)}
<div
className="body"
dangerouslySetInnerHTML={{ __html: previewResponse.processed_html }}
@ -21,54 +80,46 @@ const BodyPreview = ({ previewResponse, version, articleState }) => (
</div>
);
function titleArea(version, articleState, previewResponse) {
if (version === 'help') {
// possibly something different here in future.
return '';
}
const tagArray = previewResponse.tags || articleState.tagList.split(', ');
let tags = ''
if (tagArray.length > 0 && tagArray[0].length > 0) {
tags = tagArray.map(tag => {
return (
<span>
{tag.length > 0 ? <div className="tag">{tag}</div> : ''}
{' '}
</span>
);
});
}
let coverImage = ''
if (previewResponse.cover_image && previewResponse.cover_image.length > 0) {
coverImage = <div className='articleform__mainimage articleform__mainimagepreview'><img src={previewResponse.cover_image} alt='cover image' /></div>
} else if (articleState.mainImage) {
coverImage = <div className='articleform__mainimage articleform__mainimagepreview'><img src={articleState.mainImage} alt='cover image' /></div>
}
const previewTitle = previewResponse.title || articleState.title || '';
return (
<div>
{coverImage}
<div className="title" style={{ width: '90%', maxWidth: '1000px' }}>
<h1 className={previewTitle.length > 44 ? 'articleform_titlepreviewsmall' : '' }>{previewTitle}</h1>
<h3>
<img
className="profile-pic"
src={window.currentUser.profile_image_90}
alt="image"
/>
&nbsp;
<span>{window.currentUser.name}</span>
</h3>
<div className="tags">{tags}</div>
</div>
</div>
);
}
const previewResponsePropTypes = PropTypes.shape({
processed_html: PropTypes.string.isRequired,
title: PropTypes.string,
tags: PropTypes.array,
cover_image: PropTypes.string,
});
BodyPreview.propTypes = {
previewResponse: PropTypes.object.isRequired,
articleState: PropTypes.object.isRequired,
previewResponse: previewResponsePropTypes.isRequired,
version: PropTypes.string.isRequired,
articleState: PropTypes.shape({
id: PropTypes.number,
title: PropTypes.string,
tagList: PropTypes.string,
description: PropTypes.string,
canonicalUrl: PropTypes.string,
series: PropTypes.string,
allSeries: PropTypes.arrayOf(PropTypes.string),
bodyMarkdown: PropTypes.string,
published: PropTypes.bool,
previewShowing: PropTypes.bool,
helpShowing: PropTypes.bool,
previewResponse: previewResponsePropTypes,
helpHTML: PropTypes.string,
submitting: PropTypes.bool,
editing: PropTypes.bool,
imageManagementShowing: PropTypes.bool,
moreConfigShowing: PropTypes.bool,
mainImage: PropTypes.string,
organization: PropTypes.shape({
name: PropTypes.string.isRequired,
bg_color_hex: PropTypes.string.isRequired,
text_color_hex: PropTypes.string.isRequired,
profile_image_90: PropTypes.string.isRequired,
}),
postUnderOrg: PropTypes.bool,
errors: PropTypes.any,
edited: PropTypes.bool,
version: PropTypes.string,
}).isRequired,
};
export default BodyPreview;