twisterarmy/twister-react
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-react.git synced 2025-09-11 21:52:12 +00:00
Code Issues Projects Releases Wiki Activity

wysiwyg markout, yey

Browse Source
This commit is contained in:
Julian Steinwachs 2016-01-28 20:08:52 +01:00
parent ea0f8bdde7
commit c19ce094ec
3 changed files with 47 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
build/app-bundle.js
View File

@ -979,10 +979,29 @@ module.exports = PostComposer = React.createClass({displayName: "PostComposer",
output+=('<span class="text-primary">'+item.raw+'</span>'); output+=('<span class="text-primary">'+item.raw+'</span>');
break; break;
default: default:
output+=('<span>'+item.raw+'</span>'); output+=(item.raw);
} }
}); });
var rules = [
{regex: /\[([^\[]+)\]\(([^\)]+)\)/g,
replacement: '<span class="ghost">[</span><a>$1</a><span class="ghost">]($2)</span>'}, // hyperlink
{regex: /(\s?)(\*)(.*?)(\*)(\s?)/g,
replacement: '$1<span class="ghost">*</span><b>$3</b><span class="ghost">*</span>$5'}, // emphasis
{regex: /(\s?)(\~)(.*?)(\~)(\s?)/g,
replacement: '$1<span class="ghost">~</span><i>$3</i><span class="ghost">~</span>$5'}, // emphasis
{regex: /(\s?)(\-)(.*?)(\-)(\s?)/g,
replacement: '$1<span class="ghost">-</span><del>$3</del><span class="ghost">-</span>$5'}, // emphasis
{regex: /(\s?)(\_)(.*?)(\_)(\s?)/g,
replacement: '$1<span class="ghost">_</span><u>$3</u><span class="ghost">_</span>$5'}, // emphasis
]
rules.forEach(function (rule) {
output = output.replace(rule.regex, rule.replacement);
});
console.log(text.slice(0, this.state.maxLength),output)
// text overflow // text overflow
if (text.length > this.state.maxLength) { if (text.length > this.state.maxLength) {
var overflow = '<span style="text-decoration: line-through;">' + var overflow = '<span style="text-decoration: line-through;">' +

7
css/main.css
View File

@ -101,3 +101,10 @@ body.modal-open {
margin-left: 0.25em; margin-left: 0.25em;
margin-right: 0.125em; margin-right: 0.125em;
} }
.ghost {
display: inline-block;
width: 0;
overflow: hidden;
height: 0;
}

21
jsx/common/PostComposer.js
View File

@ -162,10 +162,29 @@ module.exports = PostComposer = React.createClass({
output+=('<span class="text-primary">'+item.raw+'</span>'); output+=('<span class="text-primary">'+item.raw+'</span>');
break; break;
default: default:
output+=('<span>'+item.raw+'</span>'); output+=(item.raw);
} }
}); });
var rules = [
{regex: /\[([^\[]+)\]\(([^\)]+)\)/g,
replacement: '<span class="ghost">[</span><a>$1</a><span class="ghost">]($2)</span>'}, // hyperlink
{regex: /(\s?)(\*)(.*?)(\*)(\s?)/g,
replacement: '$1<span class="ghost">*</span><b>$3</b><span class="ghost">*</span>$5'}, // emphasis
{regex: /(\s?)(\~)(.*?)(\~)(\s?)/g,
replacement: '$1<span class="ghost">~</span><i>$3</i><span class="ghost">~</span>$5'}, // emphasis
{regex: /(\s?)(\-)(.*?)(\-)(\s?)/g,
replacement: '$1<span class="ghost">-</span><del>$3</del><span class="ghost">-</span>$5'}, // emphasis
{regex: /(\s?)(\_)(.*?)(\_)(\s?)/g,
replacement: '$1<span class="ghost">_</span><u>$3</u><span class="ghost">_</span>$5'}, // emphasis
]
rules.forEach(function (rule) {
output = output.replace(rule.regex, rule.replacement);
});
console.log(text.slice(0, this.state.maxLength),output)
// text overflow // text overflow
if (text.length > this.state.maxLength) { if (text.length > this.state.maxLength) {
var overflow = '<span style="text-decoration: line-through;">' + var overflow = '<span style="text-decoration: line-through;">' +