smartrte-react 0.2.2 → 0.2.3

package/dist/components/ClassicEditor.js

@@ -669,6 +669,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             let fullHtml = '';
             for (let i = 1; i <= pdf.numPages; i++) {
                 const page = await pdf.getPage(i);
+                const viewport = page.getViewport({ scale: 1 });
                 const textContent = await page.getTextContent();
                 const styles = textContent.styles;
                 // 1. Group items into lines
@@ -740,8 +741,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         const width = item.width;
                         const fontName = item.fontName;
                         const fontObj = styles[fontName];
-                        const isBold = fontObj?.fontFamily?.toLowerCase().includes('bold') || false;
-                        // const isItalic = fontObj?.fontFamily?.toLowerCase().includes('italic') || false;
+                        const fontFamily = fontObj?.fontFamily?.toLowerCase() || '';
+                        const isBold = fontFamily.includes('bold') || false;
+                        const isItalic = fontFamily.includes('italic') || fontFamily.includes('oblique');
+                        const fontSize = Math.max(8, Math.round(Math.abs(item.transform[3])));
                         if (lastX > 0) {
                             const gap = x - lastX;
                             if (gap > 2) { // Minimal space threshold
@@ -760,10 +763,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             itemXs.push(x);
                         }
                         // Append text style
-                        let chunk = item.str;
-                        if (isBold)
-                            chunk = `<strong>${chunk}</strong>`;
-                        // if (isItalic) chunk = `<em>${chunk}</em>`;
+                        const chunkStyle = cssRules([
+                            ['font-size', `${fontSize}px`],
+                            ['font-weight', isBold ? '700' : ''],
+                            ['font-style', isItalic ? 'italic' : ''],
+                        ]);
+                        let chunk = `<span${styleAttr(chunkStyle)}>${escapeHtml(item.str)}</span>`;
                         lineText += item.str;
                         lineHtmlContent += chunk;
                         lastX = x + width;
@@ -834,8 +839,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             const w = item.width;
                             const txt = item.str;
                             const fontObj = styles[item.fontName];
-                            const isBold = fontObj?.fontFamily?.toLowerCase().includes('bold');
-                            const styledTxt = isBold ? `<strong>${txt}</strong>` : txt;
+                            const fontFamily = fontObj?.fontFamily?.toLowerCase() || '';
+                            const isBold = fontFamily.includes('bold');
+                            const isItalic = fontFamily.includes('italic') || fontFamily.includes('oblique');
+                            const fontSize = Math.max(8, Math.round(Math.abs(item.transform[3])));
+                            const styledTxt = `<span${styleAttr(cssRules([
+                                ['font-size', `${fontSize}px`],
+                                ['font-weight', isBold ? '700' : ''],
+                                ['font-style', isItalic ? 'italic' : ''],
+                            ]))}>${escapeHtml(txt)}</span>`;
                             // Decide which column this belongs to
                             // Find closest column to the left (or close enough)
                             let colIdx = 0;
@@ -877,10 +889,23 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             closeList();
                             if (isHeader) {
                                 const tag = maxH > medianHeight * 1.5 ? 'h2' : 'h3';
-                                html += `<${tag}>${lineHtmlContent}</${tag}>`;
+                                const firstX = line.items[0]?.transform?.[4] || 0;
+                                const lastItem = line.items[line.items.length - 1];
+                                const lastRight = lastItem ? lastItem.transform[4] + lastItem.width : firstX;
+                                const center = (firstX + lastRight) / 2;
+                                const align = Math.abs(center - viewport.width / 2) < viewport.width * 0.12 ? 'center' : firstX > viewport.width * 0.55 ? 'right' : '';
+                                html += `<${tag}${styleAttr(cssRules([['text-align', align]]))}>${lineHtmlContent}</${tag}>`;
                             }
                             else {
-                                html += `<p>${lineHtmlContent}</p>`;
+                                const firstX = line.items[0]?.transform?.[4] || 0;
+                                const lastItem = line.items[line.items.length - 1];
+                                const lastRight = lastItem ? lastItem.transform[4] + lastItem.width : firstX;
+                                const center = (firstX + lastRight) / 2;
+                                const align = Math.abs(center - viewport.width / 2) < viewport.width * 0.12 ? 'center' : firstX > viewport.width * 0.55 ? 'right' : '';
+                                html += `<p${styleAttr(cssRules([
+                                    ['text-align', align],
+                                    ['margin-left', firstX > 40 && !align ? `${Math.round(firstX)}px` : ''],
+                                ]))}>${lineHtmlContent}</p>`;
                             }
                         }
                     }
@@ -889,7 +914,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 closeTable();
                 fullHtml += html;
             }
-            insertImportedHtml(fullHtml, mode);
+            insertImportedHtml(fullHtml, mode, { preserveColors: true, preserveDocumentLayout: true });
         }
         catch (error) {
             console.error('Error reading PDF:', error);
@@ -1146,63 +1171,163 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
+    const escapeHtmlAttribute = (value) => escapeHtml(value).replace(/"/g, "&quot;");
     const markdownToHtml = (markdown) => {
         const lines = markdown.replace(/\r\n/g, "\n").split("\n");
         let html = "";
         let listType = null;
+        let paragraph = [];
+        let codeFence = null;
         const closeList = () => {
             if (listType) {
                 html += `</${listType}>`;
                 listType = null;
             }
         };
-        const inline = (text) => escapeHtml(text)
-            .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
-            .replace(/\*([^*]+)\*/g, "<em>$1</em>")
-            .replace(/`([^`]+)`/g, "<code>$1</code>");
-        lines.forEach((line) => {
+        const inline = (text) => {
+            const codeTokens = [];
+            let value = text.replace(/`([^`]+)`/g, (_match, code) => {
+                const token = `@@SRTE_CODE_${codeTokens.length}@@`;
+                codeTokens.push(`<code>${escapeHtml(code)}</code>`);
+                return token;
+            });
+            value = escapeHtml(value)
+                .replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, (_match, alt, src, title) => {
+                const titleAttr = title ? ` title="${escapeHtmlAttribute(title)}"` : "";
+                return `<img src="${escapeHtmlAttribute(src)}" alt="${escapeHtmlAttribute(alt)}"${titleAttr}>`;
+            })
+                .replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, (_match, label, href, title) => {
+                const titleAttr = title ? ` title="${escapeHtmlAttribute(title)}"` : "";
+                return `<a href="${escapeHtmlAttribute(href)}"${titleAttr}>${label}</a>`;
+            })
+                .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+                .replace(/__([^_]+)__/g, "<strong>$1</strong>")
+                .replace(/~~([^~]+)~~/g, "<s>$1</s>")
+                .replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>")
+                .replace(/(^|[^_])_([^_\n]+)_/g, "$1<em>$2</em>");
+            codeTokens.forEach((replacement, index) => {
+                value = value.replace(`@@SRTE_CODE_${index}@@`, replacement);
+            });
+            return value;
+        };
+        const closeParagraph = () => {
+            if (!paragraph.length)
+                return;
+            html += `<p>${inline(paragraph.join(" "))}</p>`;
+            paragraph = [];
+        };
+        const isTableSeparator = (line) => /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(line);
+        const parseTableRow = (line) => {
+            let value = line.trim();
+            if (value.startsWith("|"))
+                value = value.slice(1);
+            if (value.endsWith("|"))
+                value = value.slice(0, -1);
+            return value.split("|").map((cell) => cell.trim());
+        };
+        const renderTable = (startIndex) => {
+            const header = parseTableRow(lines[startIndex]);
+            let index = startIndex + 2;
+            const rows = [];
+            while (index < lines.length && lines[index].includes("|") && lines[index].trim()) {
+                rows.push(parseTableRow(lines[index]));
+                index += 1;
+            }
+            const headHtml = `<thead><tr>${header.map((cell) => `<th>${inline(cell)}</th>`).join("")}</tr></thead>`;
+            const bodyHtml = rows.length
+                ? `<tbody>${rows.map((row) => `<tr>${header.map((_cell, cellIndex) => `<td>${inline(row[cellIndex] || "")}</td>`).join("")}</tr>`).join("")}</tbody>`
+                : "";
+            html += `<table style="border-collapse: collapse; width: 100%; margin: 12px 0;">${headHtml}${bodyHtml}</table>`;
+            return index;
+        };
+        for (let i = 0; i < lines.length; i += 1) {
+            const line = lines[i];
             const trimmed = line.trim();
+            const fence = /^```([A-Za-z0-9_-]+)?\s*$/.exec(trimmed);
+            if (fence) {
+                closeParagraph();
+                closeList();
+                if (codeFence) {
+                    const langClass = codeFence.lang ? ` class="language-${escapeHtmlAttribute(codeFence.lang)}"` : "";
+                    html += `<pre><code${langClass}>${escapeHtml(codeFence.lines.join("\n"))}</code></pre>`;
+                    codeFence = null;
+                }
+                else {
+                    codeFence = { lang: fence[1] || "", lines: [] };
+                }
+                continue;
+            }
+            if (codeFence) {
+                codeFence.lines.push(line);
+                continue;
+            }
             if (!trimmed) {
+                closeParagraph();
                 closeList();
-                return;
+                continue;
+            }
+            if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
+                closeParagraph();
+                closeList();
+                html += "<hr>";
+                continue;
+            }
+            if (i + 1 < lines.length && trimmed.includes("|") && isTableSeparator(lines[i + 1])) {
+                closeParagraph();
+                closeList();
+                i = renderTable(i) - 1;
+                continue;
             }
             const heading = /^(#{1,6})\s+(.+)$/.exec(trimmed);
             if (heading) {
+                closeParagraph();
                 closeList();
                 const level = heading[1].length;
                 html += `<h${level}>${inline(heading[2])}</h${level}>`;
-                return;
+                continue;
             }
-            const bullet = /^[-*]\s+(.+)$/.exec(trimmed);
+            const bullet = /^[-*+]\s+(.+)$/.exec(trimmed);
             if (bullet) {
+                closeParagraph();
                 if (listType !== "ul") {
                     closeList();
                     html += "<ul>";
                     listType = "ul";
                 }
                 html += `<li>${inline(bullet[1])}</li>`;
-                return;
+                continue;
             }
             const numbered = /^\d+[.)]\s+(.+)$/.exec(trimmed);
             if (numbered) {
+                closeParagraph();
                 if (listType !== "ol") {
                     closeList();
                     html += "<ol>";
                     listType = "ol";
                 }
                 html += `<li>${inline(numbered[1])}</li>`;
-                return;
+                continue;
             }
-            if (trimmed.startsWith("> ")) {
+            const quote = /^>\s?(.*)$/.exec(trimmed);
+            if (quote) {
+                closeParagraph();
                 closeList();
-                html += `<blockquote>${inline(trimmed.slice(2))}</blockquote>`;
-                return;
+                html += `<blockquote>${inline(quote[1]) || "<br>"}</blockquote>`;
+                continue;
             }
             closeList();
-            html += `<p>${inline(trimmed)}</p>`;
-        });
+            paragraph.push(trimmed);
+        }
+        if (codeFence) {
+            const langClass = codeFence.lang ? ` class="language-${escapeHtmlAttribute(codeFence.lang)}"` : "";
+            html += `<pre><code${langClass}>${escapeHtml(codeFence.lines.join("\n"))}</code></pre>`;
+        }
+        closeParagraph();
         closeList();
-        return html;
+        const root = document.createElement("div");
+        root.innerHTML = html;
+        enhanceImportedTables(root);
+        return root.innerHTML;
     };
     const htmlToMarkdown = (html) => {
         const root = document.createElement("div");
@@ -1250,7 +1375,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const html = type === "html" ? text : markdownToHtml(text);
         const el = editableRef.current;
         const hasContent = el && el.textContent && el.textContent.trim().length > 0;
-        insertImportedHtml(html, hasContent ? "append" : "replace");
+        insertImportedHtml(html, hasContent ? "append" : "replace", {
+            preserveColors: true,
+            preserveDocumentLayout: true,
+        });
     };
     const downloadText = (filename, content, mimeType) => {
         const blob = new Blob([content], { type: mimeType });
@@ -1271,6 +1399,140 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const html = editableRef.current?.innerHTML || "";
         downloadText("smart-rte-export.md", htmlToMarkdown(html), "text/markdown");
     };
+    const htmlToDocxXml = (html) => {
+        const root = document.createElement("div");
+        root.innerHTML = html;
+        const xmlEscape = (value) => value
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;");
+        const colorValue = (value) => {
+            const hex = /^#([0-9a-f]{6})$/i.exec(value.trim());
+            if (hex)
+                return hex[1].toUpperCase();
+            const rgb = /^rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/i.exec(value.trim());
+            if (!rgb)
+                return "";
+            return [rgb[1], rgb[2], rgb[3]]
+                .map((part) => Math.max(0, Math.min(255, Number(part))).toString(16).padStart(2, "0"))
+                .join("")
+                .toUpperCase();
+        };
+        const sizeToHalfPoints = (value) => {
+            const trimmed = value.trim();
+            const match = /^([\d.]+)(px|pt)$/i.exec(trimmed);
+            if (!match)
+                return "";
+            const raw = Number(match[1]);
+            const pt = match[2].toLowerCase() === "px" ? raw * 0.75 : raw;
+            return String(Math.max(2, Math.round(pt * 2)));
+        };
+        const runProperties = (el) => {
+            const style = el.style;
+            const color = colorValue(style.color);
+            const size = sizeToHalfPoints(style.fontSize);
+            const isBold = el.tagName === "B" || el.tagName === "STRONG" || /bold|700|800|900/.test(style.fontWeight);
+            const isItalic = el.tagName === "I" || el.tagName === "EM" || style.fontStyle === "italic";
+            const isUnderline = el.tagName === "U" || style.textDecoration.includes("underline");
+            return [
+                isBold ? "<w:b/>" : "",
+                isItalic ? "<w:i/>" : "",
+                isUnderline ? '<w:u w:val="single"/>' : "",
+                color ? `<w:color w:val="${color}"/>` : "",
+                size ? `<w:sz w:val="${size}"/>` : "",
+            ].join("");
+        };
+        const runs = (node, inheritedProps = "") => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent || "";
+                return text ? `<w:r>${inheritedProps ? `<w:rPr>${inheritedProps}</w:rPr>` : ""}<w:t xml:space="preserve">${xmlEscape(text)}</w:t></w:r>` : "";
+            }
+            if (!(node instanceof HTMLElement))
+                return "";
+            if (node.tagName === "BR")
+                return "<w:r><w:br/></w:r>";
+            if (node.tagName === "IMG") {
+                const alt = node.getAttribute("alt") || node.getAttribute("title") || "Image";
+                return `<w:r><w:t>[Image: ${xmlEscape(alt)}]</w:t></w:r>`;
+            }
+            const props = `${inheritedProps}${runProperties(node)}`;
+            return Array.from(node.childNodes).map((child) => runs(child, props)).join("");
+        };
+        const paragraph = (el, fallbackTag = "p") => {
+            const tag = el.tagName.toLowerCase();
+            const headingMatch = /^h([1-6])$/.exec(tag);
+            const style = el.style;
+            const align = style.textAlign ? `<w:jc w:val="${xmlEscape(style.textAlign)}"/>` : "";
+            const headingSize = headingMatch ? `<w:rPr><w:b/><w:sz w:val="${Math.max(24, 40 - Number(headingMatch[1]) * 4)}"/></w:rPr>` : "";
+            const body = runs(el);
+            return `<w:p><w:pPr>${align}${headingSize}</w:pPr>${body || "<w:r><w:t></w:t></w:r>"}</w:p>`;
+        };
+        const tableCell = (cell) => {
+            const fill = colorValue(cell.style.backgroundColor);
+            const shading = fill ? `<w:shd w:val="clear" w:color="auto" w:fill="${fill}"/>` : "";
+            const cellContent = Array.from(cell.childNodes)
+                .map((child) => child instanceof HTMLElement && ["P", "DIV", "H1", "H2", "H3", "H4", "H5", "H6"].includes(child.tagName)
+                ? paragraph(child)
+                : `<w:p>${runs(child)}</w:p>`)
+                .join("");
+            return `<w:tc><w:tcPr>${shading}<w:tcBorders><w:top w:val="single" w:sz="4" w:color="D1D5DB"/><w:left w:val="single" w:sz="4" w:color="D1D5DB"/><w:bottom w:val="single" w:sz="4" w:color="D1D5DB"/><w:right w:val="single" w:sz="4" w:color="D1D5DB"/></w:tcBorders></w:tcPr>${cellContent || "<w:p/>"}</w:tc>`;
+        };
+        const tableXml = (table) => {
+            const rows = Array.from(table.querySelectorAll("tr"));
+            return `<w:tbl><w:tblPr><w:tblW w:w="0" w:type="auto"/><w:tblBorders><w:top w:val="single" w:sz="4" w:color="D1D5DB"/><w:left w:val="single" w:sz="4" w:color="D1D5DB"/><w:bottom w:val="single" w:sz="4" w:color="D1D5DB"/><w:right w:val="single" w:sz="4" w:color="D1D5DB"/><w:insideH w:val="single" w:sz="4" w:color="D1D5DB"/><w:insideV w:val="single" w:sz="4" w:color="D1D5DB"/></w:tblBorders></w:tblPr>${rows.map((row) => `<w:tr>${Array.from(row.children).map((cell) => tableCell(cell)).join("")}</w:tr>`).join("")}</w:tbl>`;
+        };
+        const blockXml = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent?.trim();
+                return text ? `<w:p>${runs(node)}</w:p>` : "";
+            }
+            if (!(node instanceof HTMLElement))
+                return "";
+            if (node.tagName === "TABLE")
+                return tableXml(node);
+            if (node.tagName === "UL" || node.tagName === "OL") {
+                return Array.from(node.children).map((li) => `<w:p><w:r><w:t>• </w:t></w:r>${runs(li)}</w:p>`).join("");
+            }
+            if (node.tagName === "BLOCKQUOTE") {
+                return `<w:p><w:pPr><w:ind w:left="720"/></w:pPr>${runs(node)}</w:p>`;
+            }
+            if (node.tagName === "HR")
+                return '<w:p><w:pPr><w:pBdr><w:bottom w:val="single" w:sz="6" w:color="D1D5DB"/></w:pBdr></w:pPr></w:p>';
+            if (["P", "DIV", "PRE", "H1", "H2", "H3", "H4", "H5", "H6"].includes(node.tagName))
+                return paragraph(node);
+            return Array.from(node.childNodes).map(blockXml).join("");
+        };
+        const body = Array.from(root.childNodes).map(blockXml).join("");
+        return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"><w:body>${body}<w:sectPr><w:pgSz w:w="12240" w:h="15840"/><w:pgMar w:top="720" w:right="720" w:bottom="720" w:left="720"/></w:sectPr></w:body></w:document>`;
+    };
+    const exportDocx = async () => {
+        const html = editableRef.current?.innerHTML || "";
+        const zip = new JSZip();
+        zip.file("[Content_Types].xml", `<?xml version="1.0" encoding="UTF-8"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/></Types>`);
+        zip.folder("_rels")?.file(".rels", `<?xml version="1.0" encoding="UTF-8"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/></Relationships>`);
+        zip.folder("word")?.file("document.xml", htmlToDocxXml(html));
+        zip.folder("word")?.folder("_rels")?.file("document.xml.rels", `<?xml version="1.0" encoding="UTF-8"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"></Relationships>`);
+        const blob = await zip.generateAsync({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "smart-rte-export.docx";
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(url);
+    };
+    const exportPdf = () => {
+        const html = editableRef.current?.innerHTML || "";
+        const printWindow = window.open("", "_blank", "noopener,noreferrer,width=900,height=700");
+        if (!printWindow)
+            return;
+        printWindow.document.write(`<!doctype html><html><head><title>Export PDF</title><style>body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;padding:32px;color:#111}table{border-collapse:collapse;width:100%;margin:12px 0}td,th{border:1px solid #d1d5db;padding:8px;vertical-align:top}img{max-width:100%;height:auto}blockquote{border-left:4px solid #d1d5db;padding-left:12px;color:#374151}pre,code{background:#f3f4f6}pre{padding:12px;white-space:pre-wrap}@media print{body{padding:0}}</style></head><body>${html}</body></html>`);
+        printWindow.document.close();
+        printWindow.focus();
+        setTimeout(() => printWindow.print(), 250);
+    };
     const fixNegativeMargins = (root) => {
         try {
             const nodes = root.querySelectorAll('*');
@@ -1438,10 +1700,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     const wrapper = document.createElement('div');
                     wrapper.setAttribute('data-table-wrapper', 'true');
                     wrapper.style.overflowX = 'auto';
+                    wrapper.style.overflowY = 'visible';
                     wrapper.style.webkitOverflowScrolling = 'touch';
                     wrapper.style.width = '100%';
                     wrapper.style.maxWidth = '100%';
                     wrapper.style.display = 'block';
+                    wrapper.style.paddingBottom = '8px';
                     // Use insertBefore + appendChild to move element without losing too much state
                     // simpler than replaceChild for wrapping
                     parent.insertBefore(wrapper, table);
@@ -2024,7 +2288,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             borderRadius: 6,
             width: "100%",
             maxWidth: "100vw",
-            overflow: "hidden",
+            overflow: "visible",
             display: "flex",
             flexDirection: "column",
             background: "var(--srte-bg)",
@@ -2323,7 +2587,21 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     borderRadius: 6,
                                     background: "var(--srte-input-bg)",
                                     color: "var(--srte-input-text)",
-                                }, children: "Export MD" }), _jsxs("div", { style: {
+                                }, children: "Export MD" }), _jsx("button", { title: "Export DOCX", onClick: exportDocx, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "Export DOCX" }), _jsx("button", { title: "Export PDF", onClick: exportPdf, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "Export PDF" }), _jsxs("div", { style: {
                                     display: "inline-flex",
                                     gap: 4,
                                     alignItems: "center",
@@ -2716,12 +2994,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     width: "100%",
                     maxWidth: "100%",
                     flex: "1 1 auto",
+                    minWidth: 0,
                     minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
                     maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
                     overflowY: "auto",
-                    overflowX: "hidden",
+                    overflowX: "auto",
+                    overscrollBehavior: "contain",
                     boxSizing: "border-box",
                     position: "relative",
+                    scrollPaddingBottom: 24,
                 }, children: _jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
                         isComposingRef.current = false;
                         handleInput();
@@ -2860,10 +3141,11 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     }, onDragEnd: () => {
                         draggedImageRef.current = null;
                     }, style: {
-                        minHeight: "100%",
+                        minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
                         maxWidth: "100%",
-                        overflowX: "hidden",
+                        overflowX: "visible",
                         padding: "16px",
+                        paddingBottom: "32px",
                         outline: "none",
                         lineHeight: 1.6,
                         boxSizing: "border-box",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
   "type": "module",
   "main": "dist/index.js",