Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 23:19:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

clipper: improve clip with styles

Browse Source 
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
This commit is contained in:
01zulfi
2025-06-11 10:45:32 +05:00
committed by Abdullah Atta
parent f2f3f7e393
commit d97d14e830
2 changed files with 34 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/clipper/src/domtoimage.ts
View File

@@ -16,13 +16,13 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { cloneNode, isSVGElement } from "./clone.js";
import { isSVGElement } from "./clone.js";
import { createImage, FetchOptions } from "./fetch.js";
import { resolveAll } from "./fontfaces.js";
import { inlineAllImages } from "./images.js";
import { Options } from "./types.js";
import { canvasToBlob, delay, escapeXhtml, height, width } from "./utils.js";
import { cacheStylesheets, inlineStylesheets } from "./styles.js";
import { inlineStylesheets } from "./styles.js";
// Default impl options
const defaultOptions: Options = {
@@ -30,28 +30,10 @@ const defaultOptions: Options = {
};
async function getInlinedNode(node: HTMLElement, options: Options) {
const { fonts, images, stylesheets, inlineImages } =
options.inlineOptions || {};
const { fonts, stylesheets, inlineImages } = options.inlineOptions || {};
if (stylesheets) await inlineStylesheets(options.fetchOptions);
// const documentStyles = getComputedStyle(document.documentElement);
// const styleCache = stylesheets
// ? await cacheStylesheets(documentStyles)
// : undefined;
// let clone = await cloneNode(node, {
// styles: options.styles,
// filter: options.filter,
// root: true,
// vector: !options.raster,
// fetchOptions: options.fetchOptions,
// getElementStyles: styleCache?.get,
// getPseudoElementStyles: styleCache?.getPseudo,
// images: images
// });
// let clone = node.cloneNode(true) as HTMLElement;
let clone = node.cloneNode(true) as HTMLElement;
if (!clone || clone instanceof Text) return;
@@ -204,7 +186,13 @@ const VALID_ATTRIBUTES = [
"width",
"height",
"target",
"rel"
"rel",
"class",
"id",
"disabled",
"type",
"data-",
"aria-"
];
function finalize(root: HTMLElement) {
@@ -214,8 +202,11 @@ function finalize(root: HTMLElement) {
if (attribute.name === "class" && element.className.includes("pseudo--"))
continue;
if (!VALID_ATTRIBUTES.includes(attribute.name)) {
// element.removeAttribute(attribute.name);
const isValidAttribute = VALID_ATTRIBUTES.some((attr) =>
attribute.name.startsWith(attr)
);
if (!isValidAttribute) {
element.removeAttribute(attribute.name);
}
}

28
packages/clipper/src/index.ts
View File

@@ -477,15 +477,25 @@ async function getPage(
title.innerText = document.title;
head.appendChild(title);
for (const sheet of document.styleSheets) {
const node = sheet.ownerNode;
if (sheet.href && node instanceof HTMLLinkElement) {
const styleNode = await downloadStylesheet(
node.href,
resolveFetchOptions(config)
);
if (styleNode) {
head.appendChild(styleNode);
if (config?.styles) {
for (const sheet of document.styleSheets) {
const node = sheet.ownerNode;
const href =
sheet.href && node instanceof HTMLLinkElement
? node.href
: node instanceof HTMLStyleElement
? node.getAttribute("href")
: null;
if (href) {
const styleNode = await downloadStylesheet(
href,
resolveFetchOptions(config)
);
if (styleNode) {
head.appendChild(styleNode);
}
} else if (node instanceof HTMLStyleElement) {
head.appendChild(node.cloneNode(true));
}
}
}