Edit Arabic text and keep it readable after saving

THIRD_PARTY_NOTICES.md

@@ -8,6 +8,7 @@ they cover, and Electron's and Chromium's licenses are in the app's installation
 | Component | License | Source |
 | --- | --- | --- |
 | [pdf.js](https://github.com/mozilla/pdf.js) (`pdfjs-dist`) | Apache-2.0 | Mozilla Foundation |
+| [DejaVu Sans](https://dejavu-fonts.github.io/), [fontkit](https://github.com/Hopding/fontkit) and [bidi-js](https://github.com/lojjic/bidi-js) (Arabic editing) | Bitstream Vera and Arev font licenses, MIT libraries | DejaVu, fontkit and bidi-js contributors |
 | [EmbedPDF PDFium](https://github.com/embedpdf/embed-pdf-viewer/tree/main/packages/pdfium) and [pdf-lib](https://github.com/Hopding/pdf-lib) (content editing) | MIT wrappers, PDFium and bundled dependency notices in `pdfjs/editor-licenses/` | EmbedPDF, PDFium and pdf-lib contributors |
 | [Tesseract.js](https://github.com/naptha/tesseract.js), its WebAssembly core and [recognition models](https://github.com/naptha/tessdata) | Apache-2.0, worker dependency notices in `ocr/worker.min.js.LICENSE.txt` | Tesseract.js and Tesseract OCR contributors |
 | pdf.js JBIG2 decoder (from PDFium) | BSD-3-Clause | The PDFium Authors |
@@ -53,3 +54,27 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+## fontkit
+
+MIT License
+
+Copyright (c) 2014-present Devon Govett
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -28,13 +28,16 @@
   },
   "devDependencies": {
     "@embedpdf/pdfium": "2.15.1",
+    "@pdf-lib/fontkit": "1.1.1",
     "@tesseract.js-data/deu": "^1.0.0",
     "@tesseract.js-data/eng": "^1.0.0",
     "@tesseract.js-data/spa": "^1.0.0",
     "@types/emscripten": "^1.41.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
+    "bidi-js": "1.1.0",
+    "dejavu-fonts-ttf": "2.37.3",
     "electron": "^45.2.1",
     "electron-builder": "^26.18.0",
     "fake-indexeddb": "^6.2.7",

scripts/copy-pdfjs-assets.mjs

@@ -16,5 +16,6 @@ for (const dir of ["cmaps", "standard_fonts", "wasm", "iccs"]) {
 // Worker-only packages aren't included in Vite's renderer license report.
 for (const [pkg, license] of [
   ["@embedpdf/pdfium", "LICENSE"], ["@embedpdf/pdfium", "LICENSE.pdfium"], ["pdf-lib", "LICENSE.md"],
+  ["dejavu-fonts-ttf", "LICENSE"], ["bidi-js", "LICENSE.txt"],
   ["@pdf-lib/standard-fonts", "LICENSE.md"], ["@pdf-lib/upng", "LICENSE"], ["pako", "LICENSE"], ["tslib", "LICENSE.txt"],
 ]) cpSync(resolve(root, "node_modules", pkg, license), resolve(dest, "editor-licenses", pkg, license));

scripts/smoke-reader-tools.mjs

@@ -541,7 +541,61 @@ async function checkRightToLeftEditing(app, page, shots) {
   await page.getByRole("button", { name: "Exit edit mode" }).click();
   await page.getByRole("button", { name: "Edit mode", exact: true }).waitFor();
   assert.equal(await page.getByRole("dialog").count(), 0);
-  console.log("ok  right-to-left text is read-only in Edit mode and can't be typed into other text");
+  console.log("ok  Hebrew text remains protected in Edit mode");
+}
+
+async function checkArabicEditing(app, page, folder, shots) {
+  // This synthetic PDF has subset fonts, Arabic ligatures, and separately positioned glyphs.
+  const source = readFileSync(path.join(import.meta.dirname, "fixtures", "arabic-editing.pdf"));
+  const open = (name, bytes) => app.evaluate(({ BrowserWindow }, { name, bytes }) =>
+    BrowserWindow.getAllWindows()[0].webContents.send("folio:open-file", { name, data: Buffer.from(bytes) }),
+    { name, bytes: Array.from(bytes) });
+  await open("Arabic editing.pdf", source);
+  await page.window.waitForFunction(() => document.title.startsWith("Arabic editing.pdf"));
+  const edit = page.getByRole("button", { name: "Edit mode", exact: true });
+  await edit.click();
+  const sheet = page.locator('.page[data-page-number="1"]');
+  const text = label => sheet.getByRole("button", { name: label, exact: true });
+  const input = sheet.getByRole("textbox", { name: "Edit text on page" });
+  await text("مراد ناصر").click();
+  assert.equal(await input.inputValue(), "مراد ناصر");
+  assert.equal(await input.evaluate(el => getComputedStyle(el).direction), "rtl");
+  const greeting = "مَرْحَبًا 2026";
+  await input.fill(greeting);
+  await page.screenshot({ path: path.join(shots, "arabic-edit-after.png") });
+  // Switching directly to another run commits the first edit and selects the second.
+  await text("شركة الخطوط يويو").click();
+  await page.waitForFunction(() => document.querySelector(".folio-inline-text")?.value === "شركة الخطوط يويو");
+  await input.fill("شركة الخطوط");
+  await sheet.click({ position: { x: 5, y: 5 } });
+  await text("شركة الخطوط").waitFor();
+  await text(greeting).waitFor();
+  const file = path.join(folder, "arabic-copy.pdf");
+  await captureDownload(app, file);
+  await page.getByRole("button", { name: "Save copy", exact: true }).click();
+  assert.equal(await app.evaluate(() => globalThis.folioReordered), "completed");
+  const bytes = readFileSync(file);
+  const extracted = await page.evaluate(async bytes => {
+    const task = pdfjsLib.getDocument({ data: Uint8Array.from(bytes) });
+    try {
+      const content = await (await (await task.promise).getPage(1)).getTextContent();
+      return content.items.map(item => item.str || "").join(" ").normalize("NFKC");
+    } finally { await task.destroy(); }
+  }, Array.from(bytes));
+  assert.ok(extracted.includes("شركة الخطوط"), extracted);
+  assert.ok(extracted.includes(greeting) && !extracted.includes("يويو"), extracted);
+  await open("Reopened Arabic.pdf", bytes);
+  await page.window.waitForFunction(() => document.title.startsWith("Reopened Arabic.pdf"));
+  await edit.click();
+  await text(greeting).click();
+  assert.equal(await input.inputValue(), greeting);
+  await input.fill("أهلا");
+  await input.press("Enter");
+  await text("أهلا").waitFor();
+  await captureDownload(app, path.join(folder, "arabic-edited-again.pdf"));
+  await page.getByRole("button", { name: "Save copy", exact: true }).click();
+  assert.equal(await app.evaluate(() => globalThis.folioReordered), "completed");
+  console.log("ok  Arabic ligatures, diacritics, and numbers survive editing, saving, and reopening");
 }
 
 export function linkHistoryPdf() {
@@ -1004,6 +1058,7 @@ export async function checkReaderTools(app, page, folder, shots) {
   await checkScanSelection(app, page);
   await checkContentEditing(app, page, folder, shots);
   await checkRightToLeftEditing(app, page, shots);
+  await checkArabicEditing(app, page, folder, shots);
   await checkLinkHistory(app, page, shots);
   await checkPageExport(app, page, folder, shots);
   await checkPenDrawing(app, page, folder, shots);

scripts/test-text-direction.mjs

@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import { test } from "node:test";
-import { hasRightToLeft, RIGHT_TO_LEFT_MESSAGE } from "../src/textDirection.ts";
+import { hasRightToLeft, unsupportedDirection, RIGHT_TO_LEFT_MESSAGE } from "../src/textDirection.ts";
 
 const at = (...points) => String.fromCodePoint(...points);
 
@@ -32,3 +32,8 @@ test("left-to-right text is left alone", () => {
 test("the message says what can't be edited", () => {
   assert.match(RIGHT_TO_LEFT_MESSAGE, /right-to-left/);
 });
+
+test("Arabic editing accepts Arabic and mixed Latin lines and preserves the protection for other RTL scripts", () => {
+  for (const text of ["مَرْحَبًا 2026", "PDF (العربية)", "Original"]) assert.equal(unsupportedDirection(text), false);
+  for (const text of ["שלום", "العربية שלום", "ܫܠܡܐ"]) assert.equal(unsupportedDirection(text), true);
+});

src/ContentEditor.tsx

@@ -5,7 +5,7 @@ import type { PDFDocumentProxy } from "./pdf";
 import type { EventBus, PDFViewer } from "./viewer";
 import type { Change, EditorReply, EditorRequest, EditTarget } from "./contentEditor.worker";
 import type { PdfChange } from "./versionHistory";
-import { hasRightToLeft, RIGHT_TO_LEFT_MESSAGE } from "./textDirection";
+import { isArabicText, unsupportedDirection, RIGHT_TO_LEFT_MESSAGE } from "./textDirection";
 
 export interface ContentEditorHandle { finish: () => Promise<boolean>; deselect: () => boolean }
 interface Surface { page: number; host: HTMLDivElement; viewport: PageViewport }
@@ -37,10 +37,11 @@ function inputStyle(t: EditTarget, v: PageViewport, paper: string): CSSPropertie
   const size = Math.max(1, Math.hypot(ux-ox,uy-oy));
   const angle = Math.atan2(ey-oy,ex-ox), box = rectangle(t,v);
   const width = Math.abs(Math.cos(angle))*box.width + Math.abs(Math.sin(angle))*box.height;
-  return { left: ox, top: oy, minWidth: Math.max(width+4, size), fontSize: size,
+  const anchor = s.anchor ? v.convertToViewportPoint(s.anchor[0], s.anchor[1]) : [ox,oy];
+  return { left: anchor[0], top: anchor[1], minWidth: Math.max(width+4, size), fontSize: size,
     fontFamily: s.flags & 1 ? "monospace" : s.flags & 2 ? "serif" : "sans-serif",
     fontWeight: s.bold ? 700 : 400, fontStyle: s.flags & 64 ? "italic" : "normal", color: s.color, background: paper,
-    transform: 'rotate(' + angle + 'rad) translateY(-0.88em)' };
+    transform: 'rotate(' + angle + 'rad) ' + (s.anchor ? 'translate(-100%, -0.88em)' : 'translateY(-0.88em)') };
 }
 
 export function ContentEditor({ ref, nextSelection, pdf, viewer, bus, snapshot, apply, onDirty }: {
@@ -159,13 +160,12 @@ export function ContentEditor({ ref, nextSelection, pdf, viewer, bus, snapshot,
 
   const pick = (s: Surface, target: EditTarget) => {
     if (pending.current) return;
-    // Opening right-to-left text in the editor would show it reversed and then refuse every change.
-    if (target.kind === "text" && hasRightToLeft(target.label)) {
+    if (target.kind === "text" && unsupportedDirection(target.label)) {
       selectedRef.current = null; setSelected(null); setError(RIGHT_TO_LEFT_MESSAGE);
       return;
     }
     setError(""); setValue(target.label); setSelected({ page: s.page, target, paper: target.style ? paperColor(s,target) : "" });
-    if (!target.style) return;
+    if (!target.style || target.fitted || isArabicText(target.label)) return;
     // Use the same embedded or system font as the page renderer while the caret is visible.
     const origin = target.style.origin;
     void pdf.getPage(s.page).then(async page => {
@@ -211,7 +211,7 @@ export function ContentEditor({ ref, nextSelection, pdf, viewer, bus, snapshot,
   return <>
     {surfaces.map(s => createPortal(<>
       {(targets.get(s.page) ?? []).map(t => <button key={t.index} type="button" className="folio-content-target"
-        data-kind={t.kind} data-locked={t.kind === "text" && hasRightToLeft(t.label) ? "" : undefined}
+        data-kind={t.kind} data-locked={t.kind === "text" && unsupportedDirection(t.label) ? "" : undefined}
         aria-label={t.label} aria-pressed={selected?.page === s.page && selected.target === t}
         disabled={busy} style={rectangle(t,s.viewport)} onClick={() => pick(s,t)}
         onPointerDown={e => {
@@ -222,9 +222,10 @@ export function ContentEditor({ ref, nextSelection, pdf, viewer, bus, snapshot,
         }} />)}
       {selected?.page === s.page && (selected.target.kind === "text" ? <>
         <div className="folio-old-text" style={{ ...rectangle(selected.target,s.viewport), background: selected.paper }} />
-        <input ref={input} className="folio-inline-text" aria-label="Edit text on page" maxLength={32767}
+        <input ref={input} className="folio-inline-text" dir="auto" aria-label="Edit text on page" maxLength={32767}
           style={{ ...inputStyle(selected.target,s.viewport,selected.paper),
-            ...(face?.target === selected.target ? { fontFamily: face.family } : {}) }} value={value} readOnly={busy}
+            ...(selected.target.fitted || isArabicText(selected.target.label) || isArabicText(value)
+              ? { fontFamily: "FolioArabic, sans-serif" } : face?.target === selected.target ? { fontFamily: face.family } : {}) }} value={value} readOnly={busy}
           onChange={e => { setValue(e.target.value); setError(""); }}
           onKeyDown={e => {
             if (e.nativeEvent.isComposing) return;

src/arabicLayout.ts

@@ -0,0 +1,67 @@
+import fontkit from "@pdf-lib/fontkit";
+import bidiFactory from "bidi-js";
+import { beginText, endText, PDFDocument, PDFHexString, setFontAndSize, setFillingRgbColor, setTextMatrix, showText } from "pdf-lib/es";
+import regular from "dejavu-fonts-ttf/ttf/DejaVuSans.ttf?url";
+import boldFont from "dejavu-fonts-ttf/ttf/DejaVuSans-Bold.ttf?url";
+
+const bidi = bidiFactory();
+const fonts = new Map<string, Promise<Uint8Array>>();
+
+function fontBytes(url: string) {
+  let promise = fonts.get(url);
+  if (!promise) {
+    promise = fetch(url).then(async response => {
+      if (!response.ok) throw new Error("Couldn't load the font for Arabic editing.");
+      return new Uint8Array(await response.arrayBuffer());
+    }).catch(error => { fonts.delete(url); throw error; });
+    fonts.set(url, promise);
+  }
+  return promise;
+}
+
+// Resolve the paragraph's directional runs before shaping each run in its own reading order.
+// This keeps a number or Latin word together inside an Arabic sentence.
+function visualRuns(text: string) {
+  const levels = bidi.getEmbeddingLevels(text);
+  const starts = new Int32Array(text.length);
+  const runs: string[] = [];
+  for (let start = 0; start < text.length;) {
+    let end = start + 1;
+    while (end < text.length && levels.levels[end] === levels.levels[start]) end++;
+    starts.fill(runs.length, start, end);
+    runs.push(text.slice(start, end));
+    start = end;
+  }
+  const order = new Set(bidi.getReorderedIndices(text, levels).map(index => starts[index]));
+  return Array.from(order, index => runs[index]);
+}
+
+export async function arabicLine(text: string, size: number, bold: boolean, color: number[]) {
+  const data = await fontBytes(bold ? boldFont : regular);
+  const face = fontkit.create(data);
+  const pdf = await PDFDocument.create();
+  pdf.registerFontkit(fontkit);
+  const embedded = await pdf.embedFont(data, { subset: true });
+  const scale = size / face.unitsPerEm;
+  const baseline = -face.descent * scale;
+  const height = (face.ascent - face.descent) * scale;
+  const page = pdf.addPage([1, height]);
+  const resource = page.node.newFontDictionary("Arabic", embedded.ref);
+  page.pushOperators(beginText(), setFontAndSize(resource, size), setFillingRgbColor(color[0]/255, color[1]/255, color[2]/255));
+  let x = 0;
+  for (const run of visualRuns(text)) {
+    const layout = face.layout(run);
+    const encoded = embedded.encodeText(run).asString();
+    for (let i = 0; i < layout.glyphs.length; i++) {
+      if (layout.glyphs[i].id === 0) throw new Error("This font can't display all of those characters.");
+      const p = layout.positions[i];
+      page.pushOperators(setTextMatrix(1, 0, 0, 1, x + p.xOffset*scale, baseline + p.yOffset*scale),
+        showText(PDFHexString.of(encoded.slice(i*4, i*4+4))));
+      x += p.xAdvance * scale;
+    }
+  }
+  page.pushOperators(endText());
+  const width = Math.max(x, 0.1);
+  page.setSize(width, height);
+  return { bytes: await pdf.save({ useObjectStreams: false }), width, baseline };
+}

src/bidi-js.d.ts

@@ -0,0 +1,7 @@
+declare module "bidi-js" {
+  interface Levels { levels: Uint8Array }
+  export default function bidiFactory(): {
+    getEmbeddingLevels(text: string): Levels;
+    getReorderedIndices(text: string, levels: Levels): number[];
+  };
+}