twisterarmy/twister-react
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-react.git synced 2025-01-11 15:38:00 +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,9 +979,28 @@ module.exports = PostComposer = React.createClass({displayName: "PostComposer",
output+=('<span class="text-primary">'+item.raw+'</span>');
break;
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
if (text.length > this.state.maxLength) {

7
css/main.css
View File

@ -100,4 +100,11 @@ body.modal-open {
vertical-align: text-top;
margin-left: 0.25em;
margin-right: 0.125em;
}
.ghost {
display: inline-block;
width: 0;
overflow: hidden;
height: 0;
}

21
jsx/common/PostComposer.js
View File

@ -162,9 +162,28 @@ module.exports = PostComposer = React.createClass({
output+=('<span class="text-primary">'+item.raw+'</span>');
break;
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
if (text.length > this.state.maxLength) {