[MFM] Add italic syntax

Resolve #3486
This commit is contained in:
syuilo 2018-12-05 17:39:26 +09:00
parent 20c0690352
commit ed4860dfd9
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
4 changed files with 50 additions and 0 deletions

View file

@ -100,6 +100,14 @@ export default Vue.component('misskey-flavored-markdown', {
return [createElement('del', genEl(token.children))]; return [createElement('del', genEl(token.children))];
} }
case 'italic': {
return (createElement as any)('i', {
attrs: {
style: 'font-style: oblique;'
},
}, genEl(token.children));
}
case 'big': { case 'big': {
bigCount++; bigCount++;
const isLong = getTextCount(token.children) > 10 || getChildrenCount(token.children) > 5; const isLong = getTextCount(token.children) > 10 || getChildrenCount(token.children) > 5;

View file

@ -37,6 +37,12 @@ export default (tokens: Node[], mentionedRemoteUsers: INote['mentionedRemoteUser
return el; return el;
}, },
italic(token) {
const el = doc.createElement('i');
dive(token.children).forEach(child => el.appendChild(child));
return el;
},
motion(token) { motion(token) {
const el = doc.createElement('i'); const el = doc.createElement('i');
dive(token.children).forEach(child => el.appendChild(child)); dive(token.children).forEach(child => el.appendChild(child));

View file

@ -69,6 +69,7 @@ const mfm = P.createLanguage({
r.big, r.big,
r.bold, r.bold,
r.strike, r.strike,
r.italic,
r.motion, r.motion,
r.url, r.url,
r.link, r.link,
@ -91,6 +92,8 @@ const mfm = P.createLanguage({
big: r => big: r =>
P.regexp(/^\*\*\*([\s\S]+?)\*\*\*/, 1) P.regexp(/^\*\*\*([\s\S]+?)\*\*\*/, 1)
.map(x => makeNodeWithChildren('big', P.alt( .map(x => makeNodeWithChildren('big', P.alt(
r.strike,
r.italic,
r.mention, r.mention,
r.hashtag, r.hashtag,
r.emoji, r.emoji,
@ -115,6 +118,8 @@ const mfm = P.createLanguage({
bold: r => bold: r =>
P.regexp(/\*\*([\s\S]+?)\*\*/, 1) P.regexp(/\*\*([\s\S]+?)\*\*/, 1)
.map(x => makeNodeWithChildren('bold', P.alt( .map(x => makeNodeWithChildren('bold', P.alt(
r.strike,
r.italic,
r.mention, r.mention,
r.hashtag, r.hashtag,
r.url, r.url,
@ -131,6 +136,7 @@ const mfm = P.createLanguage({
r.big, r.big,
r.bold, r.bold,
r.strike, r.strike,
r.italic,
r.motion, r.motion,
r.mention, r.mention,
r.hashtag, r.hashtag,
@ -176,6 +182,21 @@ const mfm = P.createLanguage({
.map(x => makeNode('inlineCode', { code: x })), .map(x => makeNode('inlineCode', { code: x })),
//#endregion //#endregion
//#region Italic
italic: r =>
P.regexp(/<i>([\s\S]+?)<\/i>/, 1)
.map(x => makeNodeWithChildren('italic', P.alt(
r.bold,
r.strike,
r.mention,
r.hashtag,
r.url,
r.link,
r.emoji,
r.text
).atLeast(1).tryParse(x))),
//#endregion
//#region Link //#region Link
link: r => link: r =>
P.seqObj( P.seqObj(
@ -192,6 +213,7 @@ const mfm = P.createLanguage({
r.big, r.big,
r.bold, r.bold,
r.strike, r.strike,
r.italic,
r.motion, r.motion,
r.emoji, r.emoji,
r.text r.text
@ -232,6 +254,7 @@ const mfm = P.createLanguage({
.map(x => makeNodeWithChildren('motion', P.alt( .map(x => makeNodeWithChildren('motion', P.alt(
r.bold, r.bold,
r.strike, r.strike,
r.italic,
r.mention, r.mention,
r.hashtag, r.hashtag,
r.emoji, r.emoji,
@ -270,6 +293,7 @@ const mfm = P.createLanguage({
P.regexp(/~~(.+?)~~/, 1) P.regexp(/~~(.+?)~~/, 1)
.map(x => makeNodeWithChildren('strike', P.alt( .map(x => makeNodeWithChildren('strike', P.alt(
r.bold, r.bold,
r.italic,
r.mention, r.mention,
r.hashtag, r.hashtag,
r.url, r.url,
@ -290,6 +314,7 @@ const mfm = P.createLanguage({
r.big, r.big,
r.bold, r.bold,
r.strike, r.strike,
r.italic,
r.motion, r.motion,
r.url, r.url,
r.link, r.link,

View file

@ -713,6 +713,17 @@ describe('Text', () => {
], tokens); ], tokens);
}); });
}); });
describe('italic', () => {
it('simple', () => {
const tokens = analyze('<i>foo</i>');
assert.deepEqual([
nodeWithChildren('italic', [
text('foo')
]),
], tokens);
});
});
}); });
describe('toHtml', () => { describe('toHtml', () => {