From 797fb32a37d168f02920e7e32ee59caad825f20a Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Wed, 25 Feb 2026 12:49:38 -0500
Subject: [PATCH] Add PDF/Text tab switcher to template builder for sighted
 users
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create pdf_text_to_html.js: JS port of the Ruby heuristic parser
  (ALL_CAPS→h2, numbered headings→h3, bullets→ul/li, body→p dir=auto)
- Add pdf_view, text_view, document_view_options keys to i18n.js (en)
- Update document.vue: tab switcher shown when all pages have extracted
  text; PDF View renders the existing page images; Text View renders
  heuristic HTML in a prose container with per-page sections
- ArrowLeft/ArrowRight keyboard navigation between tabs with focus management
- Tab is hidden entirely for scanned/image-only PDFs (hasFullText gate)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/template_builder/document.vue  | 147 +++++++++++++-----
 app/javascript/template_builder/i18n.js       |   3 +
 .../template_builder/pdf_text_to_html.js      |  53 +++++++
 3 files changed, 163 insertions(+), 40 deletions(-)
 create mode 100644 app/javascript/template_builder/pdf_text_to_html.js

diff --git a/app/javascript/template_builder/document.vue b/app/javascript/template_builder/document.vue
index 022976c5..fd82799e 100644
--- a/app/javascript/template_builder/document.vue
+++ b/app/javascript/template_builder/document.vue
@@ -1,55 +1,102 @@
 <template>
   <div>
-    <Page
-      v-for="(image, index) in sortedPreviewImages"
-      :key="image.id"
-      :ref="setPageRefs"
-      :input-mode="inputMode"
-      :number="index"
-      :editable="editable"
-      :data-page="index"
-      :areas="areasIndex[index]"
-      :allow-draw="allowDraw"
-      :with-signature-id="withSignatureId"
-      :with-prefillable="withPrefillable"
-      :is-drag="isDrag"
-      :is-mobile="isMobile"
-      :with-field-placeholder="withFieldPlaceholder"
-      :default-fields="defaultFields"
-      :drag-field-placeholder="dragFieldPlaceholder"
-      :default-submitters="defaultSubmitters"
-      :draw-field="drawField"
-      :draw-field-type="drawFieldType"
-      :draw-custom-field="drawCustomField"
-      :selected-submitter="selectedSubmitter"
-      :total-pages="sortedPreviewImages.length"
-      :image="image"
-      :attachment-uuid="document.uuid"
-      :with-fields-detection="withFieldsDetection"
-      :page-text="pagesText[String(index)]"
-      @drop-field="$emit('drop-field', { ...$event, attachment_uuid: document.uuid })"
-      @remove-area="$emit('remove-area', $event)"
-      @copy-field="$emit('copy-field', $event)"
-      @paste-field="$emit('paste-field', { ...$event, attachment_uuid: document.uuid })"
-      @add-custom-field="$emit('add-custom-field', $event)"
-      @set-draw="$emit('set-draw', $event)"
-      @copy-selected-areas="$emit('copy-selected-areas')"
-      @delete-selected-areas="$emit('delete-selected-areas')"
-      @autodetect-fields="$emit('autodetect-fields', $event)"
-      @scroll-to="scrollToArea"
-      @draw="$emit('draw', { area: {...$event.area, attachment_uuid: document.uuid }, isTooSmall: $event.isTooSmall })"
-    />
+    <div
+      v-if="hasFullText"
+      role="tablist"
+      :aria-label="t('document_view_options')"
+      class="flex border-b border-base-300 mb-2"
+    >
+      <button
+        role="tab"
+        type="button"
+        :aria-selected="!textViewActive ? 'true' : 'false'"
+        :tabindex="!textViewActive ? 0 : -1"
+        :class="['px-4 py-2 text-sm font-medium border-b-2 -mb-px focus:outline-none', !textViewActive ? 'border-primary text-primary' : 'border-transparent text-base-content/60 hover:text-base-content']"
+        @click="textViewActive = false"
+        @keydown="onTabKeydown($event, false)"
+      >
+        {{ t('pdf_view') }}
+      </button>
+      <button
+        role="tab"
+        type="button"
+        :aria-selected="textViewActive ? 'true' : 'false'"
+        :tabindex="textViewActive ? 0 : -1"
+        :class="['px-4 py-2 text-sm font-medium border-b-2 -mb-px focus:outline-none', textViewActive ? 'border-primary text-primary' : 'border-transparent text-base-content/60 hover:text-base-content']"
+        @click="textViewActive = true"
+        @keydown="onTabKeydown($event, true)"
+      >
+        {{ t('text_view') }}
+      </button>
+    </div>
+    <template v-if="!textViewActive">
+      <Page
+        v-for="(image, index) in sortedPreviewImages"
+        :key="image.id"
+        :ref="setPageRefs"
+        :input-mode="inputMode"
+        :number="index"
+        :editable="editable"
+        :data-page="index"
+        :areas="areasIndex[index]"
+        :allow-draw="allowDraw"
+        :with-signature-id="withSignatureId"
+        :with-prefillable="withPrefillable"
+        :is-drag="isDrag"
+        :is-mobile="isMobile"
+        :with-field-placeholder="withFieldPlaceholder"
+        :default-fields="defaultFields"
+        :drag-field-placeholder="dragFieldPlaceholder"
+        :default-submitters="defaultSubmitters"
+        :draw-field="drawField"
+        :draw-field-type="drawFieldType"
+        :draw-custom-field="drawCustomField"
+        :selected-submitter="selectedSubmitter"
+        :total-pages="sortedPreviewImages.length"
+        :image="image"
+        :attachment-uuid="document.uuid"
+        :with-fields-detection="withFieldsDetection"
+        :page-text="pagesText[String(index)]"
+        @drop-field="$emit('drop-field', { ...$event, attachment_uuid: document.uuid })"
+        @remove-area="$emit('remove-area', $event)"
+        @copy-field="$emit('copy-field', $event)"
+        @paste-field="$emit('paste-field', { ...$event, attachment_uuid: document.uuid })"
+        @add-custom-field="$emit('add-custom-field', $event)"
+        @set-draw="$emit('set-draw', $event)"
+        @copy-selected-areas="$emit('copy-selected-areas')"
+        @delete-selected-areas="$emit('delete-selected-areas')"
+        @autodetect-fields="$emit('autodetect-fields', $event)"
+        @scroll-to="scrollToArea"
+        @draw="$emit('draw', { area: {...$event.area, attachment_uuid: document.uuid }, isTooSmall: $event.isTooSmall })"
+      />
+    </template>
+    <div
+      v-else
+      role="tabpanel"
+      class="prose max-w-none px-2 py-1"
+    >
+      <section
+        v-for="[pageIndex, pageTextContent] in pagesTextEntries"
+        :key="pageIndex"
+        :aria-label="`${t('page')} ${Number(pageIndex) + 1}`"
+      >
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-html="pdfTextToHtml(pageTextContent)" />
+      </section>
+    </div>
   </div>
 </template>
 <script>
 import Page from './page'
 import { reactive } from 'vue'
+import { pdfTextToHtml } from './pdf_text_to_html'
 
 export default {
   name: 'TemplateDocument',
   components: {
     Page
   },
+  inject: ['t'],
   props: {
     document: {
       type: Object,
@@ -148,7 +195,8 @@ export default {
   emits: ['draw', 'drop-field', 'remove-area', 'paste-field', 'copy-field', 'copy-selected-areas', 'delete-selected-areas', 'autodetect-fields', 'add-custom-field', 'set-draw'],
   data () {
     return {
-      pageRefs: []
+      pageRefs: [],
+      textViewActive: false
     }
   },
   computed: {
@@ -182,12 +230,31 @@ export default {
     },
     pagesText () {
       return this.document.metadata?.pdf?.pages_text || {}
+    },
+    hasFullText () {
+      const nPages = this.numberOfPages
+      return nPages > 0 && Object.keys(this.pagesText).length >= nPages
+    },
+    pagesTextEntries () {
+      return Object.entries(this.pagesText).sort((a, b) => Number(a[0]) - Number(b[0]))
     }
   },
   beforeUpdate () {
     this.pageRefs = []
   },
   methods: {
+    pdfTextToHtml,
+    onTabKeydown (e, currentIsTextView) {
+      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+        e.preventDefault()
+        this.textViewActive = !currentIsTextView
+        this.$nextTick(() => {
+          const tabs = this.$el.querySelectorAll('[role="tab"]')
+          const activeTab = Array.from(tabs).find((t) => t.getAttribute('aria-selected') === 'true')
+          activeTab?.focus()
+        })
+      }
+    },
     scrollToArea (area) {
       this.$nextTick(() => {
         const pageRef = this.pageRefs[area.page]
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index aea33d4b..eb90e989 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -97,6 +97,9 @@ const en = {
   format: 'Format',
   read_only: 'Read-only',
   page: 'Page',
+  pdf_view: 'PDF View',
+  text_view: 'Text View',
+  document_view_options: 'Document view options',
   draw_new_area: 'Draw new area',
   copy_to_all_pages: 'Copy to all pages',
   more: 'More',
diff --git a/app/javascript/template_builder/pdf_text_to_html.js b/app/javascript/template_builder/pdf_text_to_html.js
new file mode 100644
index 00000000..f0aec5ad
--- /dev/null
+++ b/app/javascript/template_builder/pdf_text_to_html.js
@@ -0,0 +1,53 @@
+function escapeHtml (str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+function isNumberedHeading (line) {
+  return line.length <= 80 && /^\d+\.\s+[A-Z]/.test(line) && !/[.!?,;]$/.test(line)
+}
+
+function isAllCapsHeading (line) {
+  return line.length >= 3 && !/[.!?,;]$/.test(line) && line === line.toUpperCase() && /[A-Z]/.test(line)
+}
+
+export function pdfTextToHtml (pageText) {
+  if (!pageText) return ''
+
+  const lines = pageText.split(/\r?\n/)
+  let output = ''
+  let inList = false
+
+  for (const line of lines) {
+    const stripped = line.trim()
+
+    if (!stripped) {
+      if (inList) { output += '</ul>'; inList = false }
+      continue
+    }
+
+    if (isNumberedHeading(stripped)) {
+      if (inList) { output += '</ul>'; inList = false }
+      output += `<h3>${escapeHtml(stripped)}</h3>`
+    } else if (isAllCapsHeading(stripped)) {
+      if (inList) { output += '</ul>'; inList = false }
+      output += `<h2>${escapeHtml(stripped)}</h2>`
+    } else {
+      const match = stripped.match(/^[•*-]\s+(.+)/)
+      if (match) {
+        if (!inList) { output += '<ul>'; inList = true }
+        output += `<li>${escapeHtml(match[1])}</li>`
+      } else {
+        if (inList) { output += '</ul>'; inList = false }
+        output += `<p dir="auto">${escapeHtml(stripped)}</p>`
+      }
+    }
+  }
+
+  if (inList) output += '</ul>'
+  return output
+}