diff --git a/CHANGELOG.md b/CHANGELOG.md index 7339dd70..f225cf9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## [Unreleased] +- Remove Unicode Emoji support due to many issues on stable Chrome ([#53](https://github.com/marp-team/marpit/pull/53)) + ## v0.0.11 - 2018-08-12 - Bugfix: Pass `class` attribute to pseudo section on advanced background ([#48](https://github.com/marp-team/marpit/pull/48)) diff --git a/package.json b/package.json index a09252cf..9e228e9a 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,6 @@ "rimraf": "^2.6.2" }, "dependencies": { - "emoji-regex": "^7.0.0", "js-yaml": "^3.12.0", "lodash.kebabcase": "^4.1.1", "markdown-it": "^8.4.2", diff --git a/src/markdown/unicode_emoji.js b/src/markdown/unicode_emoji.js deleted file mode 100644 index 731d2e11..00000000 --- a/src/markdown/unicode_emoji.js +++ /dev/null @@ -1,64 +0,0 @@ -/** @module */ -import emojiRegex from 'emoji-regex' -import Token from 'markdown-it/lib/token' - -const regexForSplit = new RegExp(`(${emojiRegex().source})`, 'g') -const wrap = text => - text - .split(/(<[^>]*>)/g) - .reduce( - (ret, part, idx) => - `${ret}${ - idx % 2 === 1 - ? part - : part.replace( - regexForSplit, - ([emoji]) => `${emoji}` - ) - }`, - '' - ) - -/** - * Marpit unicode emoji plugin. - * - * Wrap unicode emoji by `` - * - * @alias module:markdown/unicode_emoji - * @param {MarkdownIt} md markdown-it instance. - */ -function unicodeEmoji(md) { - md.core.ruler.after('inline', 'marpit_unicode_emoji', ({ tokens }) => { - tokens.forEach(token => { - if (token.type !== 'inline') return - - token.children = token.children.reduce((arr, t) => { - if (t.type !== 'text') return [...arr, t] - - return [ - ...arr, - ...t.content.split(regexForSplit).reduce((splitedArr, text, idx) => { - const isText = idx % 2 === 0 - const textToken = Object.assign(new Token(), { - ...t, - content: isText ? text : `${text}`, - type: isText ? 'text' : 'html_inline', - }) - return text.length === 0 ? splitedArr : [...splitedArr, textToken] - }, []), - ] - }, []) - }) - }) - - // We have to override renderer rules to wrap emoji in the code - const originalCodeInline = md.renderer.rules.code_inline - const originalCodeBlock = md.renderer.rules.code_block - const originalFence = md.renderer.rules.fence - - md.renderer.rules.code_inline = (...args) => wrap(originalCodeInline(...args)) - md.renderer.rules.code_block = (...args) => wrap(originalCodeBlock(...args)) - md.renderer.rules.fence = (...args) => wrap(originalFence(...args)) -} - -export default unicodeEmoji diff --git a/src/marpit.js b/src/marpit.js index 6a3a35d5..f3ea0c3c 100644 --- a/src/marpit.js +++ b/src/marpit.js @@ -16,7 +16,6 @@ import marpitSlideContainer from './markdown/slide_container' import marpitStyleAssign from './markdown/style/assign' import marpitStyleParse from './markdown/style/parse' import marpitSweep from './markdown/sweep' -import marpitUnicodeEmoji from './markdown/unicode_emoji' const defaultOptions = { backgroundSyntax: true, @@ -123,7 +122,6 @@ class Marpit { .use(marpitSlideContainer, this.slideContainers) .use(marpitContainerPlugin, this.containers) .use(marpitParseImage, { filters }) - .use(marpitUnicodeEmoji) .use(marpitSweep) .use(marpitInlineSVG, this) .use(marpitStyleAssign, this) diff --git a/src/postcss/printable.js b/src/postcss/printable.js index 9e799c41..9006b945 100644 --- a/src/postcss/printable.js +++ b/src/postcss/printable.js @@ -39,10 +39,6 @@ const plugin = postcss.plugin('marpit-postcss-printable', opts => css => height: 100vh; width: 100vw; } - - [data-marpit-emoji] { - filter: invert(0); - } } `.trim() ) diff --git a/src/theme/scaffold.js b/src/theme/scaffold.js index b8637fa7..2e380cfb 100644 --- a/src/theme/scaffold.js +++ b/src/theme/scaffold.js @@ -1,18 +1,6 @@ /** @module */ import Theme from '../theme' -const emojiFonts = [ - 'Apple Color Emoji', - 'Segoe UI Emoji', - 'Noto Color Emoji', - 'Segoe UI Symbol', - 'Android Emoji', - 'Twitter Color Emoji', - 'EmojiOne Color', - 'Symbola', - 'EmojiSymbols', -] - const css = ` section { width: 1280px; @@ -38,10 +26,6 @@ section:not([data-marpit-pagination])::after { display: none; } -[data-marpit-emoji] { - font-family: ${emojiFonts.map(f => `'${f}'`).join(',')}; -} - /* Normalization */ h1 { font-size: 2em; @@ -54,7 +38,6 @@ h1 { * * - Define the default slide size. * - Set default style for `
`. - * - Set unicode emoji style for using system emoji fonts. * - Normalize `

` heading style. * * @alias module:theme/scaffold diff --git a/test/markdown/unicode_emoji.js b/test/markdown/unicode_emoji.js deleted file mode 100644 index 439569c2..00000000 --- a/test/markdown/unicode_emoji.js +++ /dev/null @@ -1,70 +0,0 @@ -import MarkdownIt from 'markdown-it' -import unicodeEmoji from '../../src/markdown/unicode_emoji' - -describe('Marpit unicode emoji plugin', () => { - const md = () => new MarkdownIt('commonmark').use(unicodeEmoji) - - it('wraps each emoji by span tag with data attribute', () => { - // Simple emoji - expect(md().renderInline('πŸ˜ƒ')).toBe('πŸ˜ƒ') - - // Multiple emojis - expect(md().renderInline('πŸ‘+πŸ‘Ž')).toBe( - 'πŸ‘+πŸ‘Ž' - ) - - // Ligatures - const ligatures = { - 'πŸ‘¨\u{1f3fb}': 'πŸ‘¨πŸ»', // Skin tone - 'πŸ‘©\u{1f3fc}': 'πŸ‘©πŸΌ', - 'πŸ‘¦\u{1f3fd}': 'πŸ‘¦πŸ½', - 'πŸ‘§\u{1f3fe}': 'πŸ‘§πŸΎ', - 'πŸ‘Ά\u{1f3ff}': 'πŸ‘ΆπŸΏ', - 'πŸ‘¨\u{200d}πŸ‘©\u{200d}πŸ‘¦': 'πŸ‘¨β€πŸ‘©β€πŸ‘¦', // Family ligature - 'πŸ‘¨\u{200d}πŸ‘©\u{200d}πŸ‘§': 'πŸ‘¨β€πŸ‘©β€πŸ‘§', - } - Object.keys(ligatures).forEach(markdown => { - const out = md().renderInline(markdown) - expect(out).toBe(`${ligatures[markdown]}`) - }) - - // Unicode 11 - expect(md().renderInline('\u{1f9f6}')).toBe( - '\u{1f9f6}' - ) - }) - - it('wraps emoji in inline code ', () => { - const out = md().renderInline('`emoji πŸ‘Œ`') - expect(out).toBe('emoji πŸ‘Œ') - }) - - it('wraps emoji in code block', () => { - const fenced = md().render('```\nemoji πŸ‘Œ\n```') - const indented = md().render('\temoji πŸ‘Œ') - const expectedStart = '
emoji πŸ‘Œ'
-
-    expect(fenced.startsWith(expectedStart)).toBe(true)
-    expect(indented.startsWith(expectedStart)).toBe(true)
-
-    // Prevent wrapping in attributes
-    const langFence = md().render('```<πŸ˜ƒ>\nπŸ‘\n```')
-    expect(
-      langFence.startsWith(
-        '
πŸ‘'
-      )
-    ).toBe(true)
-  })
-
-  it('follows variation sequence', () => {
-    // Numbers
-    expect(md().renderInline('1 2\u{fe0e} 3\u{fe0f}')).toBe(
-      '1 2\u{fe0e} 3\u{fe0f}'
-    )
-
-    // Right arrow
-    expect(md().renderInline('➑ ➑\u{fe0e} ➑\u{fe0f}')).toBe(
-      '➑ ➑\u{fe0e} ➑\u{fe0f}'
-    )
-  })
-})
diff --git a/yarn.lock b/yarn.lock
index 3f3786d7..061b41c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1352,10 +1352,6 @@ electron-to-chromium@^1.3.47:
   version "1.3.55"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.55.tgz#f150e10b20b77d9d41afcca312efe0c3b1a7fdce"
 
-emoji-regex@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.0.tgz#7c25d9bb46480f9a5a80ab6a2a12935bdde6cb6c"
-
 entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"