Skip to content

Commit

Permalink
fix(addon-editor): allow paste base64 image (#3138)
Browse files Browse the repository at this point in the history
  • Loading branch information
splincode authored Nov 29, 2022
1 parent 465f834 commit 4222293
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 46 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const defaultEditorExtensions = [
({FontColor}) => FontColor,
),
import(`@tiptap/extension-image`).then(({default: Image}) =>
Image.configure({inline: true}),
Image.configure({inline: true, allowBase64: true}),
),
import(`@taiga-ui/addon-editor/extensions/link`).then(({TuiLink}) => TuiLink),
import(`@taiga-ui/addon-editor/extensions/jump-anchor`).then(
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import {DOCUMENT} from '@angular/common';
import {ChangeDetectionStrategy, Component, Inject, InjectionToken} from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
Inject,
InjectionToken,
Self,
} from '@angular/core';
import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
import {TuiNodeViewNgComponent} from '@taiga-ui/addon-editor/extensions/tiptap-node-view';
import {TuiDestroyService, tuiTypedFromEvent} from '@taiga-ui/cdk';
import {merge} from 'rxjs';
Expand Down Expand Up @@ -35,8 +42,8 @@ export class TuiImageEditorComponent extends TuiNodeViewNgComponent {
return (this.node?.attrs as TuiEditableImage) || {src: ``};
}

get src(): string {
return this.attrs.src;
get src(): SafeResourceUrl {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.attrs.src);
}

get width(): number {
Expand All @@ -55,7 +62,10 @@ export class TuiImageEditorComponent extends TuiNodeViewNgComponent {
@Inject(TUI_EDITOR_MIN_IMAGE_WIDTH) readonly minWidth: number,
@Inject(TUI_EDITOR_MAX_IMAGE_WIDTH) readonly maxWidth: number,
@Inject(DOCUMENT) readonly documentRef: Document,
@Inject(TuiDestroyService) readonly destroy$: TuiDestroyService,
@Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
@Self()
@Inject(TuiDestroyService)
readonly destroy$: TuiDestroyService,
) {
super();

Expand Down
2 changes: 2 additions & 0 deletions projects/demo-integrations/cypress/support/editor/html.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,5 @@ export const HTML_EDITOR_EXAMPLE_NESTED_UL = `<ul><li>1<ul><li>2<ul><li>3</li><l
export const HTML_EDITOR_EXAMPLE_LONG_WORD_UL = `<p></p><ul><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p><p></p></li></ul><hr><ol><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p><p></p></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p><ol><li><p>2</p><ol><li><p>123</p><ol><li><p>23</p><ol><li><p>213</p></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></li></ol></li></ol></li></ol></li></ol></li><li><p>122222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></li></ol><p></p>`;

export const HTML_EDITOR_EXAMPLE_NESTED_OL_UL = `<ul><li><p>Lorem</p><ol><li><p>Ipsum</p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">is simply</span></p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">dummy text of</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">the printing</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">and typesetting</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">industry</span></p><p></p></li></ul></li></ul></li></ul></li></ol></li></ul><ol><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">Lorem</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">Ipsum</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">has been</span></p><ol><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">the industry's</span></p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">standard dummy</span></p></li></ol></li></ul></li></ul></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">text ever since the 1500s</span></p></li></ol>`;

export const HTML_BASE64_IMG = `<img%20src%3D"data:image%2Fsvg%2Bxml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUwIDUwIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiPjxzdHlsZT4uYXtmaWxsOiNkZDAwMzF9LmJ7ZmlsbDojYzMwMDJmfS5je2ZpbGw6I2ZmZn08L3N0eWxlPjxwYXRoIGNsYXNzPSJhIiBkPSJtNDMuNiAxMi42bC0yLjggMjQuNy0xNS44IDguNy0xNS44LTguNy0yLjgtMjQuNyAxOC42LTYuNnoiLz48cGF0aCBjbGFzcz0iYiIgZD0ibTI1IDZsMTguNiA2LjYtMi44IDI0LjctMTUuOCA4Ljd2LTE1LjMtMjAuMy00LjR6Ii8%2BPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGFzcz0iYyIgZD0ibTM2LjYgMzYuNWgtNC4zbC0yLjQtNS44aC05LjlsLTIuMyA1LjhoLTQuM2wxMS42LTI2LjF6bS0xMS42LTE3LjZsLTMuNCA4LjJoNi44eiIvPjwvc3ZnPg%3D%3D"%20%2F>`;
Original file line number Diff line number Diff line change
@@ -1,55 +1,73 @@
import {
tuiGetDemoContent,
tuiVisitEditorApiPage,
} from '@demo-integrations/support/editor/helpers';
import {HTML_BASE64_IMG} from '@demo-integrations/support/editor/html';
import {
EDITOR_PAGE_URL,
WAIT_BEFORE_SCREENSHOT,
} from '@demo-integrations/support/properties/shared.entities';

describe(`Examples with preview images`, () => {
beforeEach(() => cy.viewport(1650, 900).tuiVisit(EDITOR_PAGE_URL));
describe(`Examples images`, () => {
it(`base64`, () => {
tuiVisitEditorApiPage({content: HTML_BASE64_IMG, skipDecodingUrl: true});

tuiGetDemoContent()
.wait(WAIT_BEFORE_SCREENSHOT)
.matchImageSnapshot(`2-1-support-base64-image`);
});

it(`preview display of images`, () => {
cy.get(`#preview-image`).findByAutomationId(`tui-doc-example`).as(`wrapper`);
describe(`Preview`, () => {
beforeEach(() => cy.viewport(1650, 900).tuiVisit(EDITOR_PAGE_URL));

cy.get(`@wrapper`).tuiScrollIntoView().click();
it(`preview display of images`, () => {
cy.get(`#preview-image`).findByAutomationId(`tui-doc-example`).as(`wrapper`);

cy.get(`@wrapper`)
.find(`.tui-editor-socket`)
.eq(1)
.tuiScrollIntoView()
.wait(WAIT_BEFORE_SCREENSHOT)
.matchImageSnapshot(`3-1-two-visible-image`, {capture: `viewport`});

cy.get(`@wrapper`)
.find(`tui-editor-socket._preview-image`)
.find(`img`)
.filter(`[src="assets/images/big-wallpaper.jpg"]`)
.filter(`:visible`)
.click();

cy.tuiHide(`tui-doc-page`);
cy.wait(WAIT_BEFORE_SCREENSHOT).matchImageSnapshot(`3-2-preview-big-wallpaper`, {
capture: `viewport`,
});
cy.get(`@wrapper`).tuiScrollIntoView().click();

cy.tuiShow(`tui-doc-page`);
closePreview();
cy.get(`@wrapper`)
.find(`.tui-editor-socket`)
.eq(1)
.tuiScrollIntoView()
.wait(WAIT_BEFORE_SCREENSHOT)
.matchImageSnapshot(`3-1-two-visible-image`, {capture: `viewport`});

cy.get(`@wrapper`)
.find(`tui-editor-socket._preview-image`)
.find(`img`)
.filter(`[src="assets/images/lumberjack.png"]`)
.filter(`:visible`)
.click();
cy.get(`@wrapper`)
.find(`tui-editor-socket._preview-image`)
.find(`img`)
.filter(`[src="assets/images/big-wallpaper.jpg"]`)
.filter(`:visible`)
.click();

cy.tuiHide(`tui-doc-page`);
cy.wait(WAIT_BEFORE_SCREENSHOT).matchImageSnapshot(`3-3-preview-lumberjack`, {
capture: `viewport`,
cy.tuiHide(`tui-doc-page`);
cy.wait(WAIT_BEFORE_SCREENSHOT).matchImageSnapshot(
`3-2-preview-big-wallpaper`,
{
capture: `viewport`,
},
);

cy.tuiShow(`tui-doc-page`);
closePreview();

cy.get(`@wrapper`)
.find(`tui-editor-socket._preview-image`)
.find(`img`)
.filter(`[src="assets/images/lumberjack.png"]`)
.filter(`:visible`)
.click();

cy.tuiHide(`tui-doc-page`);
cy.wait(WAIT_BEFORE_SCREENSHOT).matchImageSnapshot(`3-3-preview-lumberjack`, {
capture: `viewport`,
});

cy.tuiShow(`tui-doc-page`);
closePreview();
});

cy.tuiShow(`tui-doc-page`);
closePreview();
function closePreview(): void {
cy.get(`tui-preview`).find(`button[icon=tuiIconCloseLarge]`).click();
}
});
});

function closePreview(): void {
cy.get(`tui-preview`).find(`button[icon=tuiIconCloseLarge]`).click();
}
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ import {ImgbbService} from './imgbb.service';
({createImageEditorExtension}) =>
createImageEditorExtension(injector),
),
import(`@tiptap/extension-image`).then(({default: Image}) =>
Image.configure({inline: true, allowBase64: true}),
),
],
},
{
Expand All @@ -57,7 +60,7 @@ export class TuiEditorExample7 {

constructor() {
this.control.patchValue(
`<img data-type="image-editor" src="/assets/images/lumberjack.png" width="300"><p>Try to drag right border of image!</p><p>To change min size of image use token <code>TUI_EDITOR_MIN_IMAGE_WIDTH</code>.</p><p>To change max size of image use token <code>TUI_EDITOR_MAX_IMAGE_WIDTH</code>.</p>`,
`<img data-type="image-editor" src="/assets/images/lumberjack.png" width="300"><p>Try to drag right border of image!</p><p>To change min size of image use token <code>TUI_EDITOR_MIN_IMAGE_WIDTH</code>.</p><p>To change max size of image use token <code>TUI_EDITOR_MAX_IMAGE_WIDTH</code>.</p><img src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUwIDUwIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiPjxzdHlsZT4uYXtmaWxsOiNkZDAwMzF9LmJ7ZmlsbDojYzMwMDJmfS5je2ZpbGw6I2ZmZn08L3N0eWxlPjxwYXRoIGNsYXNzPSJhIiBkPSJtNDMuNiAxMi42bC0yLjggMjQuNy0xNS44IDguNy0xNS44LTguNy0yLjgtMjQuNyAxOC42LTYuNnoiLz48cGF0aCBjbGFzcz0iYiIgZD0ibTI1IDZsMTguNiA2LjYtMi44IDI0LjctMTUuOCA4Ljd2LTE1LjMtMjAuMy00LjR6Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGFzcz0iYyIgZD0ibTM2LjYgMzYuNWgtNC4zbC0yLjQtNS44aC05LjlsLTIuMyA1LjhoLTQuM2wxMS42LTI2LjF6bS0xMS42LTE3LjZsLTMuNCA4LjJoNi44eiIvPjwvc3ZnPg==" />`,
);
}
}

0 comments on commit 4222293

Please sign in to comment.