Img size extension

This commit is contained in:
Benoit Schweblin 2018-04-06 16:20:02 +01:00
parent e578f83d8e
commit 12c43b960b
8 changed files with 38 additions and 6 deletions

5
package-lock.json generated
View File

@ -8067,6 +8067,11 @@
"resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-3.0.1.tgz", "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-3.0.1.tgz",
"integrity": "sha1-fzcwdHysyG4v4L+KF6cQ80eRUXo=" "integrity": "sha1-fzcwdHysyG4v4L+KF6cQ80eRUXo="
}, },
"markdown-it-imsize": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/markdown-it-imsize/-/markdown-it-imsize-2.0.1.tgz",
"integrity": "sha1-zKBCeQXQUziiR8ucqdloxc3dUXA="
},
"markdown-it-mark": { "markdown-it-mark": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-2.0.0.tgz", "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-2.0.0.tgz",

View File

@ -39,6 +39,7 @@
"markdown-it-deflist": "^2.0.2", "markdown-it-deflist": "^2.0.2",
"markdown-it-emoji": "^1.3.0", "markdown-it-emoji": "^1.3.0",
"markdown-it-footnote": "^3.0.1", "markdown-it-footnote": "^3.0.1",
"markdown-it-imsize": "^2.0.1",
"markdown-it-mark": "^2.0.0", "markdown-it-mark": "^2.0.0",
"markdown-it-pandoc-renderer": "1.1.3", "markdown-it-pandoc-renderer": "1.1.3",
"markdown-it-sub": "^1.0.0", "markdown-it-sub": "^1.0.0",

View File

@ -148,6 +148,7 @@
img { img {
max-width: 100%; max-width: 100%;
padding: 0 0.15em; padding: 0 0.15em;
box-sizing: content-box;
} }
} }

View File

@ -27,6 +27,7 @@ extensions:
#del: true #del: true
#fence: true #fence: true
#footnote: true #footnote: true
#imgsize: true
#linkify: true #linkify: true
#mark: true #mark: true
#sub: true #sub: true

View File

@ -6,6 +6,7 @@ const zero = {
del: false, del: false,
fence: false, fence: false,
footnote: false, footnote: false,
imgsize: false,
linkify: false, linkify: false,
mark: false, mark: false,
sub: false, sub: false,
@ -54,6 +55,7 @@ export default {
del: true, del: true,
fence: true, fence: true,
footnote: true, footnote: true,
imgsize: true,
linkify: true, linkify: true,
mark: true, mark: true,
sub: true, sub: true,

View File

@ -2,9 +2,10 @@ import Prism from 'prismjs';
import markdownitAbbr from 'markdown-it-abbr'; import markdownitAbbr from 'markdown-it-abbr';
import markdownitDeflist from 'markdown-it-deflist'; import markdownitDeflist from 'markdown-it-deflist';
import markdownitFootnote from 'markdown-it-footnote'; import markdownitFootnote from 'markdown-it-footnote';
import markdownitMark from 'markdown-it-mark';
import markdownitImgsize from 'markdown-it-imsize';
import markdownitSub from 'markdown-it-sub'; import markdownitSub from 'markdown-it-sub';
import markdownitSup from 'markdown-it-sup'; import markdownitSup from 'markdown-it-sup';
import markdownitMark from 'markdown-it-mark';
import markdownitTasklist from './libs/markdownItTasklist'; import markdownitTasklist from './libs/markdownItTasklist';
import extensionSvc from '../services/extensionSvc'; import extensionSvc from '../services/extensionSvc';
@ -90,6 +91,9 @@ extensionSvc.onInitConverter(0, (markdown, options) => {
if (options.footnote) { if (options.footnote) {
markdown.use(markdownitFootnote); markdown.use(markdownitFootnote);
} }
if (options.imgsize) {
markdown.use(markdownitImgsize);
}
if (options.mark) { if (options.mark) {
markdown.use(markdownitMark); markdown.use(markdownitMark);
} }

View File

@ -416,17 +416,21 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
const imgCache = Object.create(null); const imgCache = Object.create(null);
const hashImgElt = imgElt => `${imgElt.src}:${imgElt.width || -1}:${imgElt.height || -1}`;
const addToImgCache = (imgElt) => { const addToImgCache = (imgElt) => {
let entries = imgCache[imgElt.src]; const hash = hashImgElt(imgElt);
let entries = imgCache[hash];
if (!entries) { if (!entries) {
entries = []; entries = [];
imgCache[imgElt.src] = entries; imgCache[hash] = entries;
} }
entries.push(imgElt); entries.push(imgElt);
}; };
const getFromImgCache = (src) => { const getFromImgCache = (imgEltsToCache) => {
const entries = imgCache[src]; const hash = hashImgElt(imgEltsToCache);
const entries = imgCache[hash];
if (!entries) { if (!entries) {
return null; return null;
} }
@ -469,6 +473,17 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
imgElt.style.display = ''; imgElt.style.display = '';
}; };
imgElt.src = uri; imgElt.src = uri;
// Take img size into account
const sizeElt = imgTokenElt.querySelector('.token.cl-size');
if (sizeElt) {
const match = sizeElt.textContent.match(/=(\d*)x(\d*)/);
if (match[1]) {
imgElt.width = parseInt(match[1], 10);
}
if (match[2]) {
imgElt.height = parseInt(match[2], 10);
}
}
imgEltsToCache.push(imgElt); imgEltsToCache.push(imgElt);
} }
const imgTokenWrapper = document.createElement('span'); const imgTokenWrapper = document.createElement('span');
@ -483,7 +498,7 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
this.clEditor.highlighter.on('highlighted', () => { this.clEditor.highlighter.on('highlighted', () => {
imgEltsToCache.forEach((imgElt) => { imgEltsToCache.forEach((imgElt) => {
const cachedImgElt = getFromImgCache(imgElt.src); const cachedImgElt = getFromImgCache(imgElt);
if (cachedImgElt) { if (cachedImgElt) {
// Found a previously loaded image that has just been released // Found a previously loaded image that has just been released
imgElt.parentNode.replaceChild(cachedImgElt, imgElt); imgElt.parentNode.replaceChild(cachedImgElt, imgElt);

View File

@ -277,6 +277,9 @@ export default {
}, },
}, },
}; };
if (options.imgsize) {
rest.img.inside['cl cl-size'] = /=\d*x\d*/;
}
rest.link = { rest.link = {
pattern: /\[.*?\]\(.+?\)/gm, pattern: /\[.*?\]\(.+?\)/gm,
inside: { inside: {