Skip to content
Snippets Groups Projects
Commit 0b91ae1e authored by Tim Fesenko's avatar Tim Fesenko Committed by GitHub
Browse files

Merge pull request #419 from steemit/185-cleanup 

Editor cleanup/prep
parents 80cdf759 e2a834cf
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/assets/stylesheets/markdown.scss
+ 34
− 11
View file @ 0b91ae1e
...@@ -27,11 +27,12 @@ ...@@ -27,11 +27,12 @@
} }
code { code {
padding: 0.25rem 0.5rem; padding: 0.2rem;
font-size: 84%; font-size: 85%;
border-radius: 2px; border-radius: 3px;
border-color: $light-gray; border: none;
background-color: #efefef; background-color: #F4F4F4;
font-weight: inherit;
} }
pre > code { pre > code {
...@@ -45,14 +46,36 @@ ...@@ -45,14 +46,36 @@
strong { strong {
font-weight: 600; font-weight: 600;
} }
ol, ul {
margin-left: 2rem;
}
table td {
word-break: normal; // issue #146
}
p {
font-size: 100%;
line-height: 150%;
}
img { img {
max-width: 400px; width: auto;
max-height: 400px; max-width: 100%;
height: auto;
max-height: none;
} }
.Card {
border-radius: 2px; iframe {
border-color: $light-gray; max-width: 100%;
max-height: 75vw;
} }
}
.Markdown.MarkdownViewer--small {
img {
max-width: 400px;
max-height: 400px;
}
} }
app/components/cards/MarkdownViewer.jsx
+ 1
− 3
View file @ 0b91ae1e
...@@ -2,7 +2,6 @@ import React from 'react'; ...@@ -2,7 +2,6 @@ import React from 'react';
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Component} from 'react' import {Component} from 'react'
import Remarkable from 'remarkable' import Remarkable from 'remarkable'
// import CardView from 'app/components/cards/CardView'
import YoutubePreview from 'app/components/elements/YoutubePreview' import YoutubePreview from 'app/components/elements/YoutubePreview'
import sanitizeConfig, {noImageText} from 'app/utils/SanitizeConfig' import sanitizeConfig, {noImageText} from 'app/utils/SanitizeConfig'
import {renderToString} from 'react-dom/server'; import {renderToString} from 'react-dom/server';
...@@ -110,7 +109,7 @@ class MarkdownViewer extends Component { ...@@ -110,7 +109,7 @@ class MarkdownViewer extends Component {
sections.push(<div key={idx++} dangerouslySetInnerHTML={{__html: section}} />) sections.push(<div key={idx++} dangerouslySetInnerHTML={{__html: section}} />)
} }
const cn = 'Markdown' + (this.props.className ? ` ${this.props.className}` : '') + (html ? ' html' : '') const cn = 'Markdown' + (this.props.className ? ` ${this.props.className}` : '') + (html ? ' html' : '') + (large ? '' : ' MarkdownViewer--small')
return (<div className={"MarkdownViewer " + cn}> return (<div className={"MarkdownViewer " + cn}>
{sections} {sections}
{noImageActive && allowNoImage && {noImageActive && allowNoImage &&
...@@ -120,7 +119,6 @@ class MarkdownViewer extends Component { ...@@ -120,7 +119,6 @@ class MarkdownViewer extends Component {
</div> </div>
} }
</div>) </div>)
// <CardView formId={formId} canEdit={canEdit} metaLinkData={jsonMetadata ? jsonMetadata.steem : null} />
} }
} }
......
app/components/cards/PostFull.scss
+ 1
− 23
View file @ 0b91ae1e
...@@ -21,10 +21,8 @@ ...@@ -21,10 +21,8 @@
} }
.PostFull__header { .PostFull__header {
> h1, > h6 {
overflow: hidden;
}
> h1 { > h1 {
overflow: hidden;
font: 700 200% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font: 700 200% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
} }
a { a {
...@@ -56,26 +54,6 @@ ...@@ -56,26 +54,6 @@
word-break: break-word; word-break: break-word;
hyphens: auto; hyphens: auto;
table td {
word-break: normal; // issue #146
}
p {
font-size: 100%;
line-height: 150%;
}
img {
width: auto;
max-width: 100%;
height: auto;
max-height: none;
}
iframe {
max-width: 100%;
max-height: 75vw;
}
} }
.PostFull__footer { .PostFull__footer {
......
app/components/elements/ReplyEditor.jsx
+ 17
− 78
View file @ 0b91ae1e
...@@ -55,10 +55,8 @@ class ReplyEditor extends React.Component { ...@@ -55,10 +55,8 @@ class ReplyEditor extends React.Component {
//redux connect //redux connect
reply: React.PropTypes.func.isRequired, reply: React.PropTypes.func.isRequired,
setMetaLink: React.PropTypes.func.isRequired,
clearMetaData: React.PropTypes.func.isRequired, clearMetaData: React.PropTypes.func.isRequired,
setMetaData: React.PropTypes.func.isRequired, setMetaData: React.PropTypes.func.isRequired,
metaLinkData: React.PropTypes.object,
state: React.PropTypes.object.isRequired, state: React.PropTypes.object.isRequired,
hasCategory: React.PropTypes.bool.isRequired, hasCategory: React.PropTypes.bool.isRequired,
isStory: React.PropTypes.bool.isRequired, isStory: React.PropTypes.bool.isRequired,
...@@ -78,7 +76,6 @@ class ReplyEditor extends React.Component { ...@@ -78,7 +76,6 @@ class ReplyEditor extends React.Component {
parent_author: '', parent_author: '',
parent_permlink: '', parent_permlink: '',
type: 'submit_comment', type: 'submit_comment',
metaLinkData: Map(),
} }
constructor() { constructor() {
...@@ -102,16 +99,6 @@ class ReplyEditor extends React.Component { ...@@ -102,16 +99,6 @@ class ReplyEditor extends React.Component {
} }
this.onChange = this.onChange.bind(this); this.onChange = this.onChange.bind(this);
this.toggleRte = this.toggleRte.bind(this); this.toggleRte = this.toggleRte.bind(this);
this.focus = (e) => {
if(e) e.stopPropagation()
const {postRef, rte} = this.refs
if(postRef)
postRef.focus()
else {
if (e.target && e.target.className && e.target.className.indexOf('ReplyEditor__body') !== -1)
rte._focus();
}
}
this.autoVoteOnChange = () => { this.autoVoteOnChange = () => {
const {autoVote} = this.props.fields const {autoVote} = this.props.fields
const key = 'replyEditorData-autoVote-story' const key = 'replyEditorData-autoVote-story'
...@@ -119,24 +106,18 @@ class ReplyEditor extends React.Component { ...@@ -119,24 +106,18 @@ class ReplyEditor extends React.Component {
autoVote.onChange(!autoVote.value) autoVote.onChange(!autoVote.value)
} }
} }
componentWillMount() { componentWillMount() {
const {setMetaData, formId, jsonMetadata} = this.props const {setMetaData, formId, jsonMetadata} = this.props
if(process.env.BROWSER) { if(process.env.BROWSER) {
let editorData = localStorage.getItem('replyEditorData-' + formId) let editorData = localStorage.getItem('replyEditorData-' + formId)
let rte_value = RichTextEditor.createEmptyValue();
if(editorData) { if(editorData) {
editorData = JSON.parse(editorData) editorData = JSON.parse(editorData)
if(editorData.formId === formId) { if(editorData.formId === formId) {
const {fields: {category, title, body}} = this.props const {fields: {category, title, body}} = this.props
if(category) category.onChange(editorData.category) if(category) category.onChange(editorData.category)
if(title) title.onChange(editorData.title) if(title) title.onChange(editorData.title)
if (editorData.body) { if (editorData.body) body.onChange(editorData.body)
body.onChange(editorData.body)
// const html = getHtml(editorData.body)
// console.log('createValueFromString mnt1', html);
// this.state.rte_value = RichTextEditor.createValueFromString(html, 'html')
// console.log('createValueFromString mnt1 done');
}
} }
} }
this.setAutoVote() this.setAutoVote()
...@@ -147,6 +128,8 @@ class ReplyEditor extends React.Component { ...@@ -147,6 +128,8 @@ class ReplyEditor extends React.Component {
if(isStory) if(isStory)
rte = JSON.parse(localStorage.getItem('replyEditorData-rte') || RTE_DEFAULT); rte = JSON.parse(localStorage.getItem('replyEditorData-rte') || RTE_DEFAULT);
} }
let rte_value = RichTextEditor.createEmptyValue();
if (RichTextEditor) { if (RichTextEditor) {
if (body.value) { if (body.value) {
if (isHtmlTest(body.value)) { if (isHtmlTest(body.value)) {
...@@ -155,9 +138,6 @@ class ReplyEditor extends React.Component { ...@@ -155,9 +138,6 @@ class ReplyEditor extends React.Component {
rte_value = RichTextEditor.createValueFromString(html, 'html') rte_value = RichTextEditor.createValueFromString(html, 'html')
} else { } else {
rte = false; rte = false;
// console.log('createValueFromString mnt3');
// rte_value = RichTextEditor.createValueFromString(body.initialValue, 'html');
// console.log('createValueFromString mnt3 done');
} }
} }
} }
...@@ -165,8 +145,8 @@ class ReplyEditor extends React.Component { ...@@ -165,8 +145,8 @@ class ReplyEditor extends React.Component {
} }
setMetaData(formId, jsonMetadata) setMetaData(formId, jsonMetadata)
} }
componentDidMount() { componentDidMount() {
// focus
setTimeout(() => { setTimeout(() => {
if (this.props.isStory) this.refs.titleRef.focus() if (this.props.isStory) this.refs.titleRef.focus()
else if (this.refs.postRef) this.refs.postRef.focus() else if (this.refs.postRef) this.refs.postRef.focus()
...@@ -211,6 +191,7 @@ class ReplyEditor extends React.Component { ...@@ -211,6 +191,7 @@ class ReplyEditor extends React.Component {
const {clearMetaData, formId} = this.props const {clearMetaData, formId} = this.props
clearMetaData(formId) clearMetaData(formId)
} }
onChange(rte_value) { onChange(rte_value) {
this.setState({rte_value}) this.setState({rte_value})
let html = rte_value.toString('html'); let html = rte_value.toString('html');
...@@ -228,34 +209,6 @@ class ReplyEditor extends React.Component { ...@@ -228,34 +209,6 @@ class ReplyEditor extends React.Component {
autoVote.onChange(autoVoteDefault) autoVote.onChange(autoVoteDefault)
} }
} }
testForMetaLink(bodyText) {
if(!bodyText) return
// Check for links but not on every character (you'll get a lot of invalid links while typing)
// Save the link in metaLink when it is complete.
const {markdownViewerText} = this.state
const oldLen = markdownViewerText ? markdownViewerText.length : 0
const newLen = bodyText.length
const bodyChanged = oldLen !== newLen
if(!bodyChanged) return
const match = bodyText.match(links.any)
if(match) {
const link = match[0]
// body suddenly increases by more than one char
const bodyPasted = oldLen + 1 < newLen
const {formId, setMetaLink} = this.props
if(bodyPasted)
// pasted link is complete
setMetaLink(formId, link)
else {
// user is typing
if(this.state.typingLink === link) {
// the link stopped changing
setMetaLink(formId, link)
} else
this.setState({typingLink: link})
}
}
}
toggleRte(e) { toggleRte(e) {
e.preventDefault(); e.preventDefault();
const state = {rte: !this.state.rte}; const state = {rte: !this.state.rte};
...@@ -281,7 +234,7 @@ class ReplyEditor extends React.Component { ...@@ -281,7 +234,7 @@ class ReplyEditor extends React.Component {
const {title, category, body, autoVote} = this.props.fields const {title, category, body, autoVote} = this.props.fields
const { const {
reply, username, hasCategory, isStory, formId, noImage, reply, username, hasCategory, isStory, formId, noImage,
author, permlink, parent_author, parent_permlink, type, jsonMetadata, metaLinkData, author, permlink, parent_author, parent_permlink, type, jsonMetadata,
state, successCallback, handleSubmit, submitting, invalid, //lastComment, state, successCallback, handleSubmit, submitting, invalid, //lastComment,
} = this.props } = this.props
const {postError, markdownViewerText, loading, titleWarn, rte, allSteemPower} = this.state const {postError, markdownViewerText, loading, titleWarn, rte, allSteemPower} = this.state
...@@ -296,7 +249,7 @@ class ReplyEditor extends React.Component { ...@@ -296,7 +249,7 @@ class ReplyEditor extends React.Component {
const autoVoteValue = !isEdit && autoVote.value const autoVoteValue = !isEdit && autoVote.value
const replyParams = { const replyParams = {
author, permlink, parent_author, parent_permlink, type, state, originalPost, author, permlink, parent_author, parent_permlink, type, state, originalPost,
jsonMetadata, metaLinkData, autoVote: autoVoteValue, allSteemPower, jsonMetadata, autoVote: autoVoteValue, allSteemPower,
successCallback: successCallbackWrapper, errorCallback successCallback: successCallbackWrapper, errorCallback
} }
const postLabel = username ? <Tooltip t={'Post as “' + username + '”'}>Post</Tooltip> : 'Post' const postLabel = username ? <Tooltip t={'Post as “' + username + '”'}>Post</Tooltip> : 'Post'
...@@ -308,12 +261,6 @@ class ReplyEditor extends React.Component { ...@@ -308,12 +261,6 @@ class ReplyEditor extends React.Component {
{hasTitleError ? title.error : titleWarn}&nbsp; {hasTitleError ? title.error : titleWarn}&nbsp;
</div> </div>
} }
let isHtml = false;
let isMarkdown = false;
if (body.value) {
isMarkdown = !isHtmlTest(body.value);
isHtml = !isMarkdown;
}
const vframe_class = isStory ? 'vframe' : ''; const vframe_class = isStory ? 'vframe' : '';
const vframe_section_class = isStory ? 'vframe__section' : ''; const vframe_section_class = isStory ? 'vframe__section' : '';
...@@ -336,11 +283,13 @@ class ReplyEditor extends React.Component { ...@@ -336,11 +283,13 @@ class ReplyEditor extends React.Component {
</span>} </span>}
</div> </div>
<div className={'ReplyEditor__body ' + (rte ? `rte ${vframe_section_class}` : vframe_section_shrink_class)} onClick={this.focus}> <div className={'ReplyEditor__body ' + (rte ? `rte ${vframe_section_class}` : vframe_section_shrink_class)}>
<div className="float-right secondary" style={{marginRight: '1rem'}}> {!body.value && isStory &&
{rte && <a href="#" onClick={this.toggleRte}>{isHtml ? 'Raw HTML' : 'Markdown'}</a>} <div className="float-right secondary" style={{marginRight: '1rem'}}>
{!rte && isStory && (isHtml || !body.value) && <a href="#" onClick={this.toggleRte}>Editor</a>} {rte && <a href="#" onClick={this.toggleRte}>Markdown</a>}
</div> {!rte && <a href="#" onClick={this.toggleRte}>Editor</a>}
</div>
}
{process.env.BROWSER && rte ? {process.env.BROWSER && rte ?
<RichTextEditor ref="rte" <RichTextEditor ref="rte"
readOnly={loading} readOnly={loading}
...@@ -384,7 +333,7 @@ class ReplyEditor extends React.Component { ...@@ -384,7 +333,7 @@ class ReplyEditor extends React.Component {
</div>} </div>}
</div> </div>
{!loading && !rte && markdownViewerText && <div className={'Preview ' + vframe_section_shrink_class}> {!loading && !rte && markdownViewerText && <div className={'Preview ' + vframe_section_shrink_class}>
{!isHtml && <div className="float-right"><a target="_blank" href="https://guides.github.com/features/mastering-markdown/">Styling with Markdown is supported.</a></div>} {<div className="float-right"><a target="_blank" href="https://guides.github.com/features/mastering-markdown/">Styling with Markdown is supported.</a></div>}
<h6>Preview</h6> <h6>Preview</h6>
<MarkdownViewer formId={formId} text={markdownViewerText} canEdit jsonMetadata={jsonMetadata} large={isStory} noImage={noImage} /> <MarkdownViewer formId={formId} text={markdownViewerText} canEdit jsonMetadata={jsonMetadata} large={isStory} noImage={noImage} />
</div>} </div>}
...@@ -434,24 +383,18 @@ export default formId => reduxForm( ...@@ -434,24 +383,18 @@ export default formId => reduxForm(
if(hasCategory && jsonMetadata && jsonMetadata.tags) { if(hasCategory && jsonMetadata && jsonMetadata.tags) {
category = Set([category, ...jsonMetadata.tags]).join(' ') category = Set([category, ...jsonMetadata.tags]).join(' ')
} }
const metaLinkData = state.global.getIn(['metaLinkData', formId])
const ret = { const ret = {
...ownProps, ...ownProps,
fields, validate, isStory, hasCategory, username, fields, validate, isStory, hasCategory, username,
initialValues: {title, body, category}, state, initialValues: {title, body, category}, state,
// lastComment: current.get('lastComment'), // lastComment: current.get('lastComment'),
formId, formId,
metaLinkData,
} }
return ret return ret
}, },
// mapDispatchToProps // mapDispatchToProps
dispatch => ({ dispatch => ({
setMetaLink: (/*id, link*/) => {
// TODO
// dispatch(g.actions.requestMeta({id, link}))
},
clearMetaData: (id) => { clearMetaData: (id) => {
dispatch(g.actions.clearMeta({id})) dispatch(g.actions.clearMeta({id}))
}, },
...@@ -460,7 +403,7 @@ export default formId => reduxForm( ...@@ -460,7 +403,7 @@ export default formId => reduxForm(
}, },
reply: ({category, title, body, author, permlink, parent_author, parent_permlink, reply: ({category, title, body, author, permlink, parent_author, parent_permlink,
type, originalPost, autoVote = false, allSteemPower = false, type, originalPost, autoVote = false, allSteemPower = false,
state, jsonMetadata, /*metaLinkData,*/ state, jsonMetadata,
successCallback, errorCallback, loadingCallback successCallback, errorCallback, loadingCallback
}) => { }) => {
// const post = state.global.getIn(['content', author + '/' + permlink]) // const post = state.global.getIn(['content', author + '/' + permlink])
...@@ -510,10 +453,6 @@ export default formId => reduxForm( ...@@ -510,10 +453,6 @@ export default formId => reduxForm(
if(rtags.images.size) meta.image = rtags.images; else delete meta.image if(rtags.images.size) meta.image = rtags.images; else delete meta.image
if(rtags.links.size) meta.links = rtags.links; else delete meta.links if(rtags.links.size) meta.links = rtags.links; else delete meta.links
// const cp = prop => { if(metaLinkData.has(prop)) json_metadata.steem[prop] = metaLinkData.get(prop) }
// cp('link')
// cp('image')
// cp('description')
// if(Object.keys(json_metadata.steem).length === 0) json_metadata = {}// keep json_metadata minimal // if(Object.keys(json_metadata.steem).length === 0) json_metadata = {}// keep json_metadata minimal
const sanitizeErrors = [] const sanitizeErrors = []
sanitize(body, sanitizeConfig({sanitizeErrors})) sanitize(body, sanitizeConfig({sanitizeErrors}))
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment