From 863f5bcf187847742a492b8cd5b75fcf0485940d Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Sat, 11 May 2019 09:49:56 +0100 Subject: [PATCH] Desktop, Mobile: Fixed: Some images were not being displayed --- ReactNativeClient/lib/MdToHtml.js | 5 +-- .../rules/{html_block.js => html_image.js} | 33 ++++++++++------ .../lib/MdToHtml/rules/html_inline.js | 39 ------------------- 3 files changed, 24 insertions(+), 53 deletions(-) rename ReactNativeClient/lib/MdToHtml/rules/{html_block.js => html_image.js} (52%) delete mode 100644 ReactNativeClient/lib/MdToHtml/rules/html_inline.js diff --git a/ReactNativeClient/lib/MdToHtml.js b/ReactNativeClient/lib/MdToHtml.js index 790d6a9bee..6f81f4f6dd 100644 --- a/ReactNativeClient/lib/MdToHtml.js +++ b/ReactNativeClient/lib/MdToHtml.js @@ -13,8 +13,7 @@ const rules = { checkbox: require('./MdToHtml/rules/checkbox'), katex: require('./MdToHtml/rules/katex'), link_open: require('./MdToHtml/rules/link_open'), - html_block: require('./MdToHtml/rules/html_block'), - html_inline: require('./MdToHtml/rules/html_inline'), + html_image: require('./MdToHtml/rules/html_image'), highlight_keywords: require('./MdToHtml/rules/highlight_keywords'), code_inline: require('./MdToHtml/rules/code_inline'), }; @@ -124,7 +123,7 @@ class MdToHtml { markdownIt.use(rules.image(context, ruleOptions)); markdownIt.use(rules.checkbox(context, ruleOptions)); markdownIt.use(rules.link_open(context, ruleOptions)); - markdownIt.use(rules.html_block(context, ruleOptions)); + markdownIt.use(rules.html_image(context, ruleOptions)); if (Setting.value('markdown.plugin.katex')) markdownIt.use(rules.katex(context, ruleOptions)); markdownIt.use(rules.highlight_keywords(context, ruleOptions)); diff --git a/ReactNativeClient/lib/MdToHtml/rules/html_block.js b/ReactNativeClient/lib/MdToHtml/rules/html_image.js similarity index 52% rename from ReactNativeClient/lib/MdToHtml/rules/html_block.js rename to ReactNativeClient/lib/MdToHtml/rules/html_image.js index bf358e84f8..dc49924774 100644 --- a/ReactNativeClient/lib/MdToHtml/rules/html_block.js +++ b/ReactNativeClient/lib/MdToHtml/rules/html_image.js @@ -19,23 +19,34 @@ function renderImageHtml(before, src, after, ruleOptions) { } function installRule(markdownIt, mdOptions, ruleOptions) { - const defaultRender = markdownIt.renderer.rules.html_block || function(tokens, idx, options, env, self) { + const htmlBlockDefaultRender = markdownIt.renderer.rules.html_block || function(tokens, idx, options, env, self) { + return self.renderToken(tokens, idx, options); + }; + + const htmlInlineDefaultRender = markdownIt.renderer.rules.html_inline || function(tokens, idx, options, env, self) { return self.renderToken(tokens, idx, options); }; const imageRegex = // - markdownIt.renderer.rules.html_block = function(tokens, idx, options, env, self) { - const token = tokens[idx]; - const content = token.content; + const handleImageTags = function(defaultRender) { + return function(tokens, idx, options, env, self) { + const token = tokens[idx]; + const content = token.content; - if (!content.match(imageRegex)) return defaultRender(tokens, idx, options, env, self); - - return content.replace(imageRegex, (v, before, src, after) => { - if (!Resource.isResourceUrl(src)) return defaultRender(tokens, idx, options, env, self); - return renderImageHtml(before, src, after, ruleOptions); - }); - }; + if (!content.match(imageRegex)) return defaultRender(tokens, idx, options, env, self); + + return content.replace(imageRegex, (v, before, src, after) => { + if (!Resource.isResourceUrl(src)) return defaultRender(tokens, idx, options, env, self); + return renderImageHtml(before, src, after, ruleOptions); + }); + } + } + + // It seems images sometimes are inline, sometimes a block + // to make sure they both render correctly. + markdownIt.renderer.rules.html_block = handleImageTags(htmlBlockDefaultRender); + markdownIt.renderer.rules.html_inline = handleImageTags(htmlInlineDefaultRender); } module.exports = function(context, ruleOptions) { diff --git a/ReactNativeClient/lib/MdToHtml/rules/html_inline.js b/ReactNativeClient/lib/MdToHtml/rules/html_inline.js deleted file mode 100644 index 38df3f44c5..0000000000 --- a/ReactNativeClient/lib/MdToHtml/rules/html_inline.js +++ /dev/null @@ -1,39 +0,0 @@ -// This rule is no longer needed because HTML anchors (as opposed to those generated from Markdown) -// are handled in webviewLib. Keeping it here for reference. - -const Entities = require('html-entities').AllHtmlEntities; -const htmlentities = (new Entities()).encode; -const Resource = require('lib/models/Resource.js'); -const utils = require('../utils'); - -function installRule(markdownIt, mdOptions, ruleOptions) { - const defaultRender = markdownIt.renderer.rules.html_block || function(tokens, idx, options, env, self) { - return self.renderToken(tokens, idx, options); - }; - - const anchorRegex = // - - markdownIt.renderer.rules.html_inline = function(tokens, idx, options, env, self) { - const token = tokens[idx]; - const content = token.content; - - if (!content.match(anchorRegex)) return defaultRender(tokens, idx, options, env, self); - - return content.replace(anchorRegex, (v, content) => { - let js = ` - var href = this.getAttribute('href'); - if (!href || href.indexOf('http') < 0) return true; - ` + ruleOptions.postMessageSyntax + `(href); - return false; - `; - js = js.split('\n').join(' ').replace(/\t/g, ''); - return ''; - }); - }; -} - -module.exports = function(context, ruleOptions) { - return function(md, mdOptions) { - installRule(md, mdOptions, ruleOptions); - }; -}; \ No newline at end of file