Img size extension
This commit is contained in:
parent
e578f83d8e
commit
12c43b960b
5
package-lock.json
generated
5
package-lock.json
generated
@ -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",
|
||||||
|
@ -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",
|
||||||
|
@ -148,6 +148,7 @@
|
|||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 0.15em;
|
padding: 0 0.15em;
|
||||||
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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,
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
@ -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: {
|
||||||
|
Loading…
Reference in New Issue
Block a user