diff --git a/example/App.tsx b/example/App.tsx index e38ac98..08a4768 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -38,7 +38,7 @@ function makeSpeechEngine(): SpeechEngine { const speechEngine = makeSpeechEngine(); const REMOTE_URL = - 'https://firebasestorage.googleapis.com/v0/b/cpeum-294e1.appspot.com/o/test%2Fshowcase.md?alt=media&token=72c4432e-06db-4a60-9e22-aef5db8f9e07'; + 'https://raw.githubusercontent.com/acertijosapps/react-native-md-document/main/example/assets/showcase.md'; const LOCAL_URI = `${FileSystem.documentDirectory}showcase.md`; @@ -63,13 +63,13 @@ async function readUri(uri: string, headers?: Record): Promise = { project: 'Proyecto', url: 'URL', local: 'Local' }; +const ORIGIN_LABEL: Record = { project: 'Project', url: 'URL', local: 'Local' }; const SCHEME_CYCLE: DocColorScheme[] = ['auto', 'light', 'dark']; const SCHEME_LABEL: Record = { auto: 'Auto', - light: 'Claro', - dark: 'Oscuro', + light: 'Light', + dark: 'Dark', }; function sourceFor(origin: Origin): DocumentSource { @@ -111,7 +111,13 @@ export default function App(): React.JSX.Element { } }; const speechLabel = - tts.status === 'speaking' ? 'Pausa' : tts.status === 'paused' ? 'Reanudar' : 'Leer'; + tts.status === 'speaking' ? 'Pause' : tts.status === 'paused' ? 'Resume' : 'Read'; + + const isSpread = page.perView > 1 && page.index + 2 <= page.count; + const pageLabel = + page.count > 0 + ? `${isSpread ? 'Pages' : 'Page'} ${page.index + 1}${isSpread ? `-${page.index + 2}` : ''}/${page.count}` + : ''; const system = useColorScheme(); const mode = scheme === 'auto' ? (system ?? 'light') : scheme; @@ -133,14 +139,17 @@ export default function App(): React.JSX.Element { react-native-md-document - - - {SCHEME_LABEL[scheme]} - - + + {pageLabel} + + + {SCHEME_LABEL[scheme]} + + + @@ -174,15 +183,6 @@ export default function App(): React.JSX.Element { })} - - {page.count > 0 - ? `Pág. ${page.index + 1}${ - page.perView > 1 && page.index + 2 <= page.count - ? `-${page.index + 2}` - : '' - }/${page.count}` - : ''} - - Libro + Book {document ? ( @@ -240,7 +240,7 @@ export default function App(): React.JSX.Element { ) : ( - {isLoading ? 'Cargando…' : (error?.message ?? 'Sin documento')} + {isLoading ? 'Loading…' : (error?.message ?? 'No document')} {error ? ( - Reintentar + Retry ) : null} @@ -299,6 +299,11 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', alignItems: 'center', }, + headerEnd: { + flexDirection: 'row', + alignItems: 'center', + gap: 10, + }, segment: { flexDirection: 'row', gap: 6, diff --git a/example/assets/showcase.md b/example/assets/showcase.md index ab7a4da..ccffaea 100644 --- a/example/assets/showcase.md +++ b/example/assets/showcase.md @@ -1,33 +1,33 @@
-
react-native-document
+
react-native-md-document
-

Documento de demostración · Markdown como PDF

+

Demo document · Markdown as PDF

-

1. Qué muestra este documento

+

1. What this document shows

-

Este archivo ejercita cada capacidad del visor en una sola página fuente. El contenido es inmutable: no se edita, solo se lee, se pagina y se navega con gesto de page-flip. Toca cualquier palabra para resaltarla; el subrayado persiste entre sesiones porque se guarda por offset estable.

+

This file exercises every capability of the viewer in a single source page. The content is immutable: it is not edited, only read, paginated and navigated with a page-flip gesture. Tap any word to highlight it; the highlight persists across sessions because it is stored by stable offset.

-

Usa Leer para escuchar el texto con voz nativa del sistema: la palabra activa se resalta y la página avanza sola para seguir el marcador. Pausa conserva la posición y Reanudar continúa donde se detuvo.

+

Use Read to listen to the text with the system's native voice: the active word is highlighted and the page advances by itself to follow the marker. Pause keeps the position and Resume continues where it stopped.

-

2. Estilos de texto inline

+

2. Inline text styles

-

El visor entiende negrita, cursiva, subrayado, tachado, código monoespaciado y enlaces. También color por token de marca: este fragmento va en color de acento. Y resaltado de fondo: texto sobre el color de resaltado del tema.

+

The viewer understands bold, italic, underline, strikethrough, monospaced code and links. It also supports brand-token color: this fragment is in the accent color. And background highlighting: text over the theme's highlight color.

-

Los estilos se combinan: negrita en cursiva, o negrita con código dentro. Cada palabra conserva su offset en el texto plano, así el resaltado manual y el marcador de lectura comparten el mismo espacio de coordenadas.

+

Styles combine: bold italic, or bold with code inside. Every word keeps its offset in the plain text, so manual highlights and the reading marker share the same coordinate space.

-

3. Tabla con celdas de color

+

3. Table with colored cells

@@ -36,18 +36,18 @@ @@ -55,47 +55,47 @@

Zoom

-

Capacidad

+

Capability

 -

Detalle

+

Detail
-

Paginación

+

Pagination

 -

Medición real de alturas y empaquetado en páginas; se recalcula al cambiar de tamaño u orientación.

+

Real height measurement and packing into pages; recalculated when the size or orientation changes.
-

Pellizco para acercar y arrastre para desplazar; el gesto de cambio de página se bloquea mientras hay zoom.

+

Pinch to zoom in and drag to pan; the page-turning gesture is locked while zoomed.
-

Tema

+

Theme

 -

Claro, oscuro o automático. Los colores del documento son tokens que el visor resuelve por tema.

+

Light, dark or automatic. The document's colors are tokens that the viewer resolves per theme.
-

4. Cita y separador

+

4. Quote and divider

-

La fidelidad de un PDF sin dejar de ser texto vivo: seleccionable, legible por voz y adaptable al tema.

+

The fidelity of a PDF while remaining live text: selectable, readable aloud and adaptable to the theme.

-

5. Muestra de código

+

5. Code sample

-

El texto puede incluir código monoespaciado embebido, por ejemplo el punto de entrada del visor:

+

The text can include embedded monospaced code, for example the viewer's entry point:

useDocumentSource({ markdown: SHOWCASE_MD })

-

6. Contenido largo para paginar

+

6. Long content to paginate

-

A partir de aquí el texto es suficiente para llenar varias páginas y así probar el cambio de página, el auto-avance durante la lectura y el resaltado que se conserva al volver. Cada párrafo mantiene su posición en el texto plano; al paginar no se pierde ni el marcador de lectura ni los subrayados guardados.

+

From here on there is enough text to fill several pages, so you can try turning pages, the auto-advance while reading and the highlight that is kept when you come back. Every paragraph keeps its position in the plain text; paginating loses neither the reading marker nor the saved highlights.

-

Un documento se trata como una fuente inmutable. Esa inmutabilidad da un espacio de offsets estable: el resaltado que guardas hoy sigue apuntando a las mismas palabras mañana, aunque cambie el tamaño de la pantalla, la orientación o el tema. La paginación es una vista sobre ese texto, no una modificación de él.

+

A document is treated as an immutable source. That immutability gives a stable offset space: the highlight you save today still points at the same words tomorrow, even if the screen size, the orientation or the theme changes. Pagination is a view over that text, not a modification of it.

-

La lectura por voz usa el motor del sistema operativo a través de un módulo nativo propio, sin dependencias de terceros. Mientras habla, informa el rango de la palabra en curso; el visor traduce ese rango a la palabra y a la página correspondiente, resalta la palabra y, si está en otra página, avanza para seguirla.

+

Reading aloud uses the operating system's engine through its own native module, with no third-party dependencies. While it speaks, it reports the range of the current word; the viewer maps that range to the word and its page, highlights the word and, if it is on another page, advances to follow it.

-

Los gestos se componen: un toque resalta una palabra, un arrastre horizontal cambia de página con animación de volteo, y el pellizco hace zoom. Cuando hay zoom activo, el arrastre desplaza el contenido en lugar de cambiar de página, para que el acercamiento sea utilizable.

+

Gestures compose: a tap highlights a word, a horizontal drag turns the page with a flip animation, and a pinch zooms. While zoomed in, dragging pans the content instead of turning the page, so that zooming stays usable.

-

Todo lo visual descansa sobre dos dependencias: Reanimated y Gesture Handler. El almacenamiento, la fuente del documento y el motor de voz son puertos inyectables: puedes conectar el que prefieras o usar los que trae la librería.

+

Everything visual rests on two dependencies: Reanimated and Gesture Handler. The storage, the document source and the speech engine are injectable ports: you can plug in whichever you prefer or use the ones the library ships.

-
Documento de demostración · Página generada por el visor
+
Demo document · Page generated by the viewer
diff --git a/example/showcase.ts b/example/showcase.ts index 1e96afd..66b0856 100644 --- a/example/showcase.ts +++ b/example/showcase.ts @@ -1,33 +1,33 @@ export const SHOWCASE_MD = `
-
react-native-document
+
react-native-md-document
-

Documento de demostración · Markdown como PDF

+

Demo document · Markdown as PDF

-

1. Qué muestra este documento

+

1. What this document shows

-

Este archivo ejercita cada capacidad del visor en una sola página fuente. El contenido es inmutable: no se edita, solo se lee, se pagina y se navega con gesto de page-flip. Toca cualquier palabra para resaltarla; el subrayado persiste entre sesiones porque se guarda por offset estable.

+

This file exercises every capability of the viewer in a single source page. The content is immutable: it is not edited, only read, paginated and navigated with a page-flip gesture. Tap any word to highlight it; the highlight persists across sessions because it is stored by stable offset.

-

Usa Leer para escuchar el texto con voz nativa del sistema: la palabra activa se resalta y la página avanza sola para seguir el marcador. Pausa conserva la posición y Reanudar continúa donde se detuvo.

+

Use Read to listen to the text with the system's native voice: the active word is highlighted and the page advances by itself to follow the marker. Pause keeps the position and Resume continues where it stopped.

-

2. Estilos de texto inline

+

2. Inline text styles

-

El visor entiende negrita, cursiva, subrayado, tachado, código monoespaciado y enlaces. También color por token de marca: este fragmento va en color de acento. Y resaltado de fondo: texto sobre el color de resaltado del tema.

+

The viewer understands bold, italic, underline, strikethrough, monospaced code and links. It also supports brand-token color: this fragment is in the accent color. And background highlighting: text over the theme's highlight color.

-

Los estilos se combinan: negrita en cursiva, o negrita con código dentro. Cada palabra conserva su offset en el texto plano, así el resaltado manual y el marcador de lectura comparten el mismo espacio de coordenadas.

+

Styles combine: bold italic, or bold with code inside. Every word keeps its offset in the plain text, so manual highlights and the reading marker share the same coordinate space.

-

3. Tabla con celdas de color

+

3. Table with colored cells

@@ -36,18 +36,18 @@ export const SHOWCASE_MD = `