pinmenote.com/pinmenote-extension
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Projects Releases Wiki Activity

fix: save css added programatically, save images inside style element

Browse Source
This commit is contained in:
Michal Szczepanski 2023-05-19 21:22:11 +02:00
parent 1697bdd6a6
commit 74d22ea54f
7 changed files with 30 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/command/snapshot/page-snapshot-add.command.ts
View File

@ -37,7 +37,7 @@ export class PageSnapshotAddCommand implements ICommand<Promise<void>> {
type: ObjTypeDto.PageSnapshot,
createdAt: dt,
updatedAt: dt,
data: { snapshot: this.dto, draw: [], comments: { data: [] } },
data: { snapshot: this.dto, draw: { data: [] }, comments: { data: [] } },
version: OBJ_DTO_VERSION,
local: {
visible: true

5
src/content-script/command/snapshot/snapshot-content-save.command.ts
View File

@ -23,6 +23,7 @@ import { ICommand } from '../../../common/model/shared/common.dto';
import { ObjNextIdCommand } from '../../../common/command/obj/id/obj-next-id.command';
import { ObjectStoreKeys } from '../../../common/keys/object.store.keys';
import { fnConsoleLog } from '../../../common/fn/console.fn';
import { fnUid } from '../../../common/fn/uid.fn';
interface SnapshotResult {
id: number;
@ -49,6 +50,10 @@ export class SnapshotContentSaveCommand implements ICommand<Promise<SnapshotResu
const htmlAttr = HtmlFactory.computeHtmlAttr();
fnConsoleLog('HTML DONE');
const css = await CssFactory.computeCssContent(urlCache);
const adopted = CssFactory.computeAdoptedStyleSheets(document.adoptedStyleSheets);
if (adopted) css.css.unshift({ id: fnUid(), data: adopted });
fnConsoleLog('CSS DONE');
const words = AutoTagMediator.computeTags(this.element);
fnConsoleLog('TAGS DONE');

14
src/content-script/factory/css.factory.ts
View File

@ -121,6 +121,20 @@ export class CssFactory {
return css;
};
static computeAdoptedStyleSheets = (adoptedStyleSheets: CSSStyleSheet[]): string => {
// TODO - probably we need javascript for that so we don't override styles ??? At least it's now working for m$n.com - micro$oft as always breaks web
// better than chrome once again ^^
let out = '';
for (let i = 0; i < adoptedStyleSheets.length; i++) {
const sheet = adoptedStyleSheets[i];
for (let j = 0; j < sheet.cssRules.length; j++) {
//eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-unsafe-call
out += sheet.cssRules[j].cssText + '\n';
}
}
return out;
};
static fetchImports = async (css: string, rel?: string, skipUrlCache?: Set<string>): Promise<CssStyleDto[]> => {
const importList = css.match(CSS_IMPORT_REG);
if (!importList) return [];

17
src/content-script/factory/html/html-attr.factory.ts
View File

@ -28,15 +28,6 @@ export class HtmlAttrFactory {
content: []
};
static computeShadowAttributes = (attributes: Attr[]): string[][] => {
const out = [];
for (const attr of attributes) {
if (!attr.value) continue;
out.push([attr.name, attr.value]);
}
return out;
};
static computeAttrValues = async (tagName: string, attributes: Attr[]): Promise<string> => {
let html = '';
let hrefFilled = false;
@ -85,13 +76,11 @@ export class HtmlAttrFactory {
} else if (attr.name === 'style') {
// style can have background-image:url('')
const urlList = attrValue.match(CSS_URL_REG);
attrValue = attrValue.replaceAll('&quot;', '"');
if (urlList) {
const value = await CssFactory.fetchUrls(attrValue);
html += `${attr.name}="${value}" `;
} else {
html += `${attr.name}="${attrValue.replaceAll('"', '&quot;')}" `;
attrValue = await CssFactory.fetchUrls(attrValue);
}
attrValue = attrValue.replaceAll('"', '&quot;');
html += `${attr.name}="${attrValue}" `;
} else if (attrValue) {
html += `${attr.name}="${attrValue}" `;
} else {

16
src/content-script/factory/html/shadow.factory.ts
View File

@ -56,23 +56,9 @@ export class ShadowFactory {
};
};
private static computeAdoptedStyleSheets = (ref: ShadowRoot): string => {
// TODO - probably we need javascript for that so we don't override styles ??? At least it's now working for m$n.com - micro$oft as always breaks web
// better than chrome once again ^^
let out = '';
for (let i = 0; i < ref.adoptedStyleSheets.length; i++) {
const sheet = ref.adoptedStyleSheets[i];
for (let j = 0; j < sheet.cssRules.length; j++) {
//eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-unsafe-call
out += sheet.cssRules[j].cssText + '\n';
}
}
return out;
};
private static computeShadowHtml = async (ref: ShadowRoot, skipUrlCache?: Set<string>): Promise<string> => {
const html = await this.computeChildren(Array.from(ref.childNodes), skipUrlCache);
const css = this.computeAdoptedStyleSheets(ref);
const css = CssFactory.computeAdoptedStyleSheets(ref.adoptedStyleSheets);
return `<template data-mode="${ref.mode}"><style>${css}</style>${html}</template>`;
};

3
src/options-ui/components/html-preview/html-preview.component.tsx
View File

@ -176,7 +176,6 @@ export const HtmlPreviewComponent: FunctionComponent = () => {
fnSleep(5)
.then(() => {
if (dto.type === ObjContentTypeDto.IFRAME) {
fnConsoleLog('RENDER IFRAME');
const iframe: ObjIFrameContentDto = dto.content as ObjIFrameContentDto;
const iframeDoc = (el as HTMLIFrameElement).contentWindow?.document;
if (iframeDoc) {
@ -201,10 +200,8 @@ export const HtmlPreviewComponent: FunctionComponent = () => {
}
}
} else if (dto.type === ObjContentTypeDto.IMG) {
fnConsoleLog('RENDER IMAGE');
(el as HTMLImageElement).src = dto.content as string;
} else if (dto.type === ObjContentTypeDto.SHADOW) {
fnConsoleLog('RENDER SHADOW');
const content = dto.content as ObjShadowContentDto;
renderShadow(el, content);
}

7
src/service-worker/command/sync/update/sync-gather-changes.command.ts
View File

@ -17,9 +17,11 @@
import { ObjCommentDto, ObjPageDto } from '../../../../common/model/obj/obj-pin.dto';
import { ObjDto, ObjTypeDto } from '../../../../common/model/obj/obj.dto';
import { ServerChangeDto, ServerPathDto } from '../../../../common/model/obj/obj-server.dto';
import { BrowserStorageWrapper } from '../../../../common/service/browser.storage.wrapper';
import { ICommand } from '../../../../common/model/shared/common.dto';
import { ObjDrawDto } from '../../../../common/model/obj/obj-draw.dto';
import { ObjGetSnapshotContentCommand } from '../../../../common/command/obj/content/obj-get-snapshot-content.command';
import { ObjectStoreKeys } from '../../../../common/keys/object.store.keys';
export class SyncGatherChangesCommand implements ICommand<Promise<ServerChangeDto[]>> {
constructor(private obj: ObjDto) {}
@ -36,6 +38,10 @@ export class SyncGatherChangesCommand implements ICommand<Promise<ServerChangeDt
}
case ObjTypeDto.PageElementPin: {
const pageObj = this.obj.data as ObjPageDto;
if (!pageObj.draw.data) {
pageObj.draw = { data: [] };
await BrowserStorageWrapper.set(`${ObjectStoreKeys.OBJECT_ID}:${this.obj.id}`, this.obj);
}
changes = await this.pageChanges(pageObj);
changes.push({ type: 'upload', path: ServerPathDto.PIN });
break;
@ -58,7 +64,6 @@ export class SyncGatherChangesCommand implements ICommand<Promise<ServerChangeDt
const comments = this.commentChanges(pageObj.comments.data);
changes.push(...comments);
const draw = this.drawChanges(pageObj.draw.data);
changes.push(...draw);
return changes;