Share Text from TextSelectionToolbar (#376)

Author: chrisvire

src/lib/components/TextSelectionToolbar.svelte

@@ -39,6 +39,9 @@ TODO:
     import toast, { Toaster } from 'svelte-french-toast';
     import { addBookmark, findBookmark, removeBookmark } from '$lib/data/bookmarks';
     import { addHighlights, removeHighlights } from '$lib/data/highlights';
+    import { shareText, shareImage } from '$lib/data/share';
+    import { base } from '$app/paths';
+
     const isAudioPlayable = config?.mainFeatures['text-select-play-audio'];
     const isRepeatableAudio = config?.mainFeatures['audio-repeat-selection-button'];
     const isTextOnImageEnabled = config?.mainFeatures['text-on-image'];
@@ -109,6 +112,13 @@ TODO:
         });
         selectedVerses.reset();
     }
+    async function shareSelectedText() {
+        const book = $selectedVerses[0].book;
+        const reference = selectedVerses.getCompositeReference();
+        const text = await selectedVerses.getCompositeText();
+
+        shareText(config.name, config.name + '\n\n' + text + '\n' + reference, book + '.txt');
+    }
 
     $: barBackgroundColor = $s['ui.bar.text-select']['background-color'];
     $: barIconColor = $s['ui.bar.text-select.icon']['color'];
@@ -216,7 +226,7 @@ TODO:
                     </button>
                 {/if}
                 {#if isShareEnabled}
-                    <button class="dy-btn-sm dy-btn-ghost">
+                    <button class="dy-btn-sm dy-btn-ghost" on:click={shareSelectedText}>
                         <ShareIcon color={barIconColor} />
                     </button>
                 {/if}

src/lib/data/annotation-share.ts

@@ -1,39 +1,10 @@
 import config from '$lib/data/config';
+import { shareText } from '$lib/data/share';
 
 const SHARE_FILE_NAME = 'annotations.txt';
 
-function createShareFile(text: string) {
-    return new File([text], SHARE_FILE_NAME, { type: 'text/plain' });
-}
-
-async function shareText(title: string, text: string, file: File = undefined) {
-    try {
-        if (navigator.share) {
-            let shareData: ShareData = { title, text };
-            let files = [file];
-            if (file && navigator.canShare && navigator.canShare({ files })) {
-                shareData = { ...shareData, text: '', files };
-            }
-
-            await navigator.share(shareData);
-        } else {
-            const shareFile = file ? file : createShareFile(text);
-            const url = URL.createObjectURL(shareFile);
-
-            const anchor = document.createElement('a');
-            anchor.href = url;
-            anchor.download = SHARE_FILE_NAME;
-            anchor.click();
-
-            URL.revokeObjectURL(url);
-        }
-    } catch (error) {
-        console.error('Error sharing: ', error);
-    }
-}
-
 export async function shareAnnotation(annotation: any) {
-    await shareText(config.name, annotation.reference + '\n' + annotation.text);
+    await shareText(config.name, annotation.reference + '\n' + annotation.text, SHARE_FILE_NAME);
 }
 
 export async function shareAnnotations(annotations: any) {
@@ -42,5 +13,5 @@ export async function shareAnnotations(annotations: any) {
         '\n\n' +
         annotations.map((item) => `${item.reference}\n${item.text}`).join('\n\n');
 
-    await shareText(config.name, text, createShareFile(text));
+    await shareText(config.name, text, SHARE_FILE_NAME, true);
 }

src/lib/data/share.ts

@@ -0,0 +1,64 @@
+function createShareFile(text: string, filename: string) {
+    return new File([text], filename, { type: 'text/plain' });
+}
+
+export async function shareText(
+    title: string,
+    text: string,
+    filename: string,
+    preferShareFile: boolean = false
+) {
+    let file;
+    try {
+        if (navigator.share) {
+            let shareData: ShareData = { title, text };
+            if (preferShareFile) {
+                file = createShareFile(text, filename);
+                const files = [file];
+                if (navigator.canShare && navigator.canShare({ files })) {
+                    shareData = { ...shareData, text: '', files };
+                }
+            }
+
+            await navigator.share(shareData);
+            return;
+        }
+    } catch (error) {
+        console.error('Error sharing: ', error);
+    }
+
+    // if we're here, we failed to share, so we'll try to use the download link
+    const shareFile = file ? file : createShareFile(text, filename);
+    const url = URL.createObjectURL(shareFile);
+
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.click();
+
+    URL.revokeObjectURL(url);
+}
+
+export async function shareImage(title: string, text: string, filename: string, image: Blob) {
+    const file = new File([image], filename, { type: 'image/png' });
+    try {
+        if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
+            const shareData: ShareData = { title, text, files: [file] };
+
+            await navigator.share(shareData);
+            return;
+        }
+    } catch (error) {
+        console.error('Error sharing: ', error);
+    }
+
+    // if we're here, we failed to share, so we'll try to use the download link
+    const url = URL.createObjectURL(file);
+
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.click();
+
+    URL.revokeObjectURL(url);
+}

src/lib/data/stores/scripture.js

@@ -204,16 +204,17 @@ function createSelectedVerses() {
                 const verseListSeparator = config.bookCollections.find(
                     (x) => x.id === selectionStart.collection
                 ).features['ref-verse-list-separator'];
-                var reference =
-                    selectionStart.book +
-                    ' ' +
-                    selectionStart.chapter +
-                    verseSeparator +
-                    selectionStart.verse;
-                var wasConsecutive = false;
-                var lastVerse = selectionStart.verse;
-                var currVerse = selectionStart.verse;
-                for (var i = 1; i < selections.length; i++) {
+                const bookName =
+                    config.bookCollections
+                        .find((x) => x.id === selectionStart.collection)
+                        .books.find((x) => x.id === selectionStart.book)?.name ||
+                    selectionStart.book;
+                let reference =
+                    bookName + ' ' + selectionStart.chapter + verseSeparator + selectionStart.verse;
+                let wasConsecutive = false;
+                let lastVerse = selectionStart.verse;
+                let currVerse = selectionStart.verse;
+                for (let i = 1; i < selections.length; i++) {
                     lastVerse = currVerse;
                     currVerse = selections[i].verse;
                     if (currVerse - lastVerse > 1) {