fix: image disappear issue (#20039)

* check if base64 value is from image tag

* add test

* check image regex

* add comment

* update comment
This commit is contained in:
Maddy
2022-07-20 13:58:49 -07:00
committed by GitHub
parent 239e7af4e6
commit 7dd36ae7b4
2 changed files with 25 additions and 1 deletions

View File

@@ -1080,6 +1080,25 @@ suite('Cell Model', function (): void {
assert.deepStrictEqual(serializedCell.attachments, undefined, 'JSON should not include attachments if attachments do not exist');
});
test('Should not include image in attachments if image is added in html image tag', async function () {
const cellAttachment = JSON.parse('{"ads.png":{"image/png":"iVBORw0KGgoAAAANSUhEUgAAAggg=="}}');
let notebookModel = new NotebookModelStub({
name: '',
version: '',
mimetype: ''
});
let contents: nb.ICellContents = {
cell_type: CellTypes.Markdown,
source: '![ads.png](attachment:ads.png)',
attachments: cellAttachment
};
let model = factory.createCell(contents, { notebook: notebookModel, isTrusted: false });
let imageElement = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggg=="';
model.source = '![ads.png](attachment:ads.png) \n Test image: ' + imageElement;
assert.deepStrictEqual(model.attachments, contents.attachments, 'Should not add the image represented in html tag to the attachments of cell source');
});
test('Should remove unused attachments name when updating cell source', async function () {
const cellAttachment = JSON.parse('{"ads.png":{"image/png":"iVBORw0KGgoAAAANSUhEUgAAAggg=="}}');
let notebookModel = new NotebookModelStub({

View File

@@ -350,7 +350,12 @@ export class CellModel extends Disposable implements ICellModel {
private attachImageFromSource(newSource: string | string[]): string | string[] {
if (!Array.isArray(newSource) && this.isValidBase64OctetStream(newSource)) {
let results;
while ((results = validBase64OctetStreamRegex.exec(newSource)) !== null) {
// only replace the base64 value if it's from markdown [](base64value) not html tags <img src="base64value">
let validImageTag = /<img\s+[^>]*src="([^"]*)"[^>]*>/;
let imageResults;
// Note: Currently this will not process any markdown image attachments that are below an HTML img element.
// This is acceptable for now given the low risk of this happening and an easy workaround being to just changing the img element to a markdown embedded image instead
while ((results = validBase64OctetStreamRegex.exec(newSource)) !== null && ((imageResults = validImageTag.exec(newSource)) !== null && this.isValidBase64OctetStream(imageResults[1]) && results[0] !== imageResults[1])) {
let imageName = this.addAttachment(results[1], results[0], 'image.png');
newSource = newSource.replace(validBase64OctetStreamRegex, `attachment:${imageName}`);
}