core: add support for aligning images in PDF/HTML exports (#3197)

* web: added function for aligning images

* web: removed regex and added replaceAll in loop

* Update apps/web/src/common/export.ts

Signed-off-by: Abdullah Atta <thecodrr@protonmail.com>

* core: add support for image alignment in html/pdf export

---------

Signed-off-by: Abdullah Atta <thecodrr@protonmail.com>
Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>
This commit is contained in:
Muhammad Ali
2023-09-05 15:39:59 +05:00
committed by GitHub
parent 61d0dafd21
commit 51fc4bf3e4
2 changed files with 21 additions and 4 deletions

View File

@@ -33,7 +33,8 @@ export async function exportToPDF(
return new Promise<boolean>((resolve) => { return new Promise<boolean>((resolve) => {
const iframe = document.createElement("iframe"); const iframe = document.createElement("iframe");
iframe.srcdoc = content.replaceAll(/<p(.+?)><\/p>/gm, "<p$1><br/></p>");
iframe.srcdoc = content;
iframe.style.position = "fixed"; iframe.style.position = "fixed";
iframe.style.right = "0"; iframe.style.right = "0";
iframe.style.bottom = "0"; iframe.style.bottom = "0";

View File

@@ -20,6 +20,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { parseHTML } from "../../html-parser"; import { parseHTML } from "../../html-parser";
import HTMLTemplate from "./template"; import HTMLTemplate from "./template";
const replaceableAttributes = {
'data-float="true" data-align="right"': 'align="right"',
'data-float="true" data-align="left"': 'align="left"',
'data-align="left"':
'style="margin-right:auto;margin-left:0;display: block;"',
'data-align="right"':
'style="margin-left:auto;margin-right:0;display: block;"',
'data-align="center"':
'style="margin-left:auto;margin-right:auto;display: block;"'
};
const LANGUAGE_REGEX = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i; const LANGUAGE_REGEX = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
async function buildHTML(templateData) { async function buildHTML(templateData) {
@@ -28,9 +39,14 @@ async function buildHTML(templateData) {
async function preprocessHTML(templateData) { async function preprocessHTML(templateData) {
const { content } = templateData; const { content } = templateData;
const doc = parseHTML(
content.replaceAll(/<p([^>]*)><\/p>/gm, "<p$1><br/></p>") let html = content.replaceAll(/<p([^>]*)><\/p>/gm, "<p$1><br/></p>");
); console.log(html);
for (const attribute in replaceableAttributes) {
html = html.replaceAll(attribute, replaceableAttributes[attribute]);
}
const doc = parseHTML(html);
const mathBlocks = doc.querySelectorAll(".math-block.math-node"); const mathBlocks = doc.querySelectorAll(".math-block.math-node");
const mathInlines = doc.querySelectorAll(".math-inline.math-node"); const mathInlines = doc.querySelectorAll(".math-inline.math-node");