Merge branch 'update_content_parsing' into 'master'

Update content parsing

See merge request tools/pagedjs!17

README.md

@@ -76,6 +76,7 @@ afterPageLayout(pageElement, page, breakToken)
 afterRendered(pages)
 
 // Polisher
+beforeTreeParse(text, sheet)
 onUrl(urlNode)
 onAtPage(atPageNode)
 onRule(ruleNode)
@@ -161,7 +162,7 @@ docker run -it -p 9090:9090 pagedmedia/pagedjs
 ```
 
 The tests and specs can be run within the container by passing a `seccomp` file for Chrome and running `npm test`
- 
+
 ```bash
 docker run -it --security-opt 'seccomp=seccomp.json' pagedmedia/pagedjs npm test
 ```

examples/assets/aurorae/book.css

@@ -139,7 +139,7 @@ section[data-type="epigraph"],
 /* running elements */
 
 #cover h1 {
-  string-set: booktitle content(text);
+  /* string-set: booktitle content(text); */
 }
 
 #cover {
@@ -210,8 +210,8 @@ section[data-type="copyright"] #flexbox {
   float:right;
 }
 
-.toc-subchap a[href]::before{
-  content: target-text(attr(href)); /* pdfreactor */
+.toc-subchap a[href]::before {
+  content: target-text(attr(href));
 }
 
 .toc-subchap a[href]::after {

specs/target/target-counter/target-counter.spec.js

+const TIMEOUT = 10000; // Some book might take longer than this to renderer
+
+describe('target-counter', async () => {
+		let page;
+		let rendered;
+		beforeAll(async () => {
+			page = await loadPage('target/target-counter/target-counter.html')
+			return page.rendered;
+		}, TIMEOUT)
+
+		afterAll(async () => {
+			if (!DEBUG) {
+				await page.close();
+			}
+		})
+
+		it('Cross reference should include See p. text', async () => {
+			let text = await page.$eval("#ref-call", (r) => window.getComputedStyle(r, '::after').content);
+			expect(text).toContain("(See p. ");
+		})
+
+
+		if (!DEBUG) {
+			it('should create a pdf', async () => {
+				let pdf = await page.pdf(PDF_SETTINGS);
+
+				expect(pdf).toMatchPDFSnapshot(1);
+			})
+		}
+	}
+)

src/modules/generated-content/running-headers.js

@@ -32,26 +32,20 @@ class RunningHeaders extends Handler {
 		}
 
 		if (declaration.property === "content") {
-			// Handle Raw
-			// element(x) is not parsed
+
 			csstree.walk(declaration, {
-				visit: 'Raw',
+				visit: 'Function',
 				enter: (funcNode, fItem, fList) => {
 
-					if (funcNode.value.indexOf("element") > -1) {
+					if (funcNode.name.indexOf("element") > -1) {
 
 						let selector = csstree.generate(rule.ruleNode.prelude);
-						let parsed = funcNode.value.match(/([^(]+)\(([^)]+)\)/);
-
-						let func = parsed[1];
 
-						let value = funcNode.value;
+						let func = funcNode.name;
 
-						let args = [];
+						let value = funcNode.children.first().name;
 
-						if (parsed.length >= 3) {
-							args.push(parsed[2]);
-						}
+						let args = [value];
 
 						// we only handle first for now
 						let style = "first";
@@ -216,6 +210,11 @@ class RunningHeaders extends Handler {
 
 		return orderedSelectors;
 	}
+
+	beforeTreeParse(text, sheet) {
+		// element(x) is parsed as image element selector, so update element to element-ident
+		sheet.text = text.replace(/element[\s]*\(([^\|^#)]*)\)/g, "element-ident($1)");
+	}
 }
 
 export default RunningHeaders;

src/modules/generated-content/target-counters.js

@@ -33,6 +33,8 @@ class TargetCounters extends Handler {
 				counter = last.name;
 			}
 
+			let variable = "--" + UUID();
+
 			selector.split(",").forEach((s) => {
 				this.counterTargets[s] = {
 					func: func,
@@ -40,10 +42,19 @@ class TargetCounters extends Handler {
 					value: value,
 					counter: counter,
 					selector: s,
-					fullSelector: selector
+					fullSelector: selector,
+					variable: variable
 				}
 			});
 
+			// Replace with variable
+			funcNode.name = "var";
+			funcNode.children = new csstree.List()
+			funcNode.children.appendData({
+				type: "Identifier",
+				loc: 0,
+				name: variable
+			});
 		}
 	}
 
@@ -81,7 +92,8 @@ class TargetCounters extends Handler {
 							psuedo += "::" + split[1];
 						}
 
-						this.styleSheet.insertRule(`[data-target-counter="${selector}"]${psuedo} { content: "${pg}"; }`, this.styleSheet.cssRules.length);
+						// this.styleSheet.insertRule(`[data-target-counter="${selector}"]${psuedo} { content: "${pg}"; }`, this.styleSheet.cssRules.length);
+						this.styleSheet.insertRule(`[data-target-counter="${selector}"]${psuedo} { ${target.variable}: "${pg}" }`, this.styleSheet.cssRules.length);
 					}
 				}
 			});

src/modules/generated-content/target-text.js

@@ -32,6 +32,8 @@ class TargetText extends Handler {
 				style = last.name;
 			}
 
+			let variable = "--" + UUID();
+
 			selector.split(",").forEach((s) => {
 				this.textTargets[s] = {
 					func: func,
@@ -39,10 +41,19 @@ class TargetText extends Handler {
 					value: value,
 					style: style || "content",
 					selector: s,
-					fullSelector: selector
+					fullSelector: selector,
+					variable: variable
 				}
 			});
 
+			// Replace with variable
+			funcNode.name = "var";
+			funcNode.children = new csstree.List()
+			funcNode.children.appendData({
+				type: "Identifier",
+				loc: 0,
+				name: variable
+			});
 		}
 	}
 
@@ -59,7 +70,6 @@ class TargetText extends Handler {
 					if (target.style === "content") {
 						let text = element.textContent;
 						let selector = UUID();
-
 						selected.setAttribute("data-target-text", selector);
 
 						let psuedo = "";
@@ -67,8 +77,18 @@ class TargetText extends Handler {
 							psuedo += "::" + split[1];
 						}
 
-						this.styleSheet.insertRule(`[data-target-text="${selector}"]${psuedo} { content: "${element.textContent}"; }`, this.styleSheet.cssRules.length);
+						let textContent = element.textContent.trim().replace(/[\"\']/g, (match) => {
+							return "\\" + match;
+						}).replace(/[\n]/g, (match) => {
+							return "\\00000A";
+						});
+
+						// this.styleSheet.insertRule(`[data-target-text="${selector}"]${psuedo} { content: "${element.textContent}" }`, this.styleSheet.cssRules.length);
+						this.styleSheet.insertRule(`[data-target-text="${selector}"]${psuedo} { ${target.variable}: "${textContent}" }`, this.styleSheet.cssRules.length);
+
 					}
+				} else {
+					console.warn("missed target", val);
 				}
 			});
 

src/polisher/polisher.js

@@ -16,6 +16,7 @@ class Polisher {
 		this.hooks.onDeclaration = new Hook(this);
 		this.hooks.onContent = new Hook(this);
 
+		this.hooks.beforeTreeParse = new Hook(this);
 		this.hooks.beforeTreeWalk = new Hook(this);
 		this.hooks.afterTreeWalk = new Hook(this);
 
@@ -60,12 +61,20 @@ class Polisher {
 		}
 
 		return await Promise.all(fetched)
-			.then((originals) => {
+			.then(async (originals) => {
 				let text = "";
 
-				originals.forEach((original, index) => {
-					let href = urls[index];
-					let sheet = new Sheet(original, href, this.hooks);
+				let original, index;
+				let href, sheet;
+
+				for (index = 0; index < originals.length; index++) {
+					original = originals[index];
+
+					href = urls[index];
+
+					sheet = new Sheet(href, this.hooks);
+
+					await sheet.parse(original);
 
 					this.sheets.push(sheet);
 
@@ -82,11 +91,11 @@ class Polisher {
 					}
 
  					text += sheet.toString();
-				})
+				}
 
 				let s = this.insert(text);
 				this.inserted.push(s);
-
+				// console.log(text);
 				return text;
 			});
 	}

src/polisher/sheet.js

@@ -3,7 +3,7 @@ import { UUID } from "../utils/utils";
 import Hook from "../utils/hook";
 
 class Sheet {
-	constructor(text, url, hooks) {
+	constructor(url, hooks) {
 
 		if (hooks) {
 			this.hooks = hooks;
@@ -16,6 +16,7 @@ class Sheet {
 			this.hooks.onDeclaration = new Hook(this);
 			this.hooks.onContent = new Hook(this);
 
+			this.hooks.beforeTreeParse = new Hook(this);
 			this.hooks.beforeTreeWalk = new Hook(this);
 			this.hooks.afterTreeWalk = new Hook(this);
 		}
@@ -25,13 +26,20 @@ class Sheet {
 		} catch (e) {
 			this.url = new URL(window.location.href);
 		}
+	}
+
 
-		// this.original = text;
 
-		// Parse the text
-		this.ast = this.parse(text);
+	// parse
+	async parse(text) {
+		this.text = text;
 
-		this.hooks.beforeTreeWalk.trigger(this.ast);
+		await this.hooks.beforeTreeParse.trigger(this.text, this);
+
+		// send to csstree
+		this.ast = csstree.parse(this._text);
+
+		await this.hooks.beforeTreeWalk.trigger(this.ast);
 
 		// Replace urls
 		this.replaceUrls(this.ast);
@@ -48,15 +56,10 @@ class Sheet {
 		this.rules(this.ast);
 		this.atrules(this.ast);
 
-		this.hooks.afterTreeWalk.trigger(this.ast, this);
-	}
+		await this.hooks.afterTreeWalk.trigger(this.ast, this);
 
-	// parse
-	parse(text) {
-		// send to csstree
-		let ast = csstree.parse(text);
 		// return ast
-		return ast;
+		return this.ast;
 	}
 
 	insertRule(rule) {
@@ -213,6 +216,14 @@ class Sheet {
 		});
 	}
 
+	set text(t) {
+		this._text = t;
+	}
+
+	get text() {
+		return this._text;
+	}
+
 	// generate string
 	toString(ast) {
 		return csstree.generate(ast || this.ast);