Add feature to export a note

Author: Kévin Commaille

package.json

@@ -29,6 +29,7 @@
     "expo-updates": "~0.3.2",
     "file-saver": "^2.0.5",
     "immutable": "^4.0.0-rc.12",
+    "js-yaml": "^4.0.0",
     "localforage": "^1.9.0",
     "moment": "^2.29.0",
     "react": "16.13.1",
@@ -62,6 +63,7 @@
     "@babel/core": "~7.9.0",
     "@expo/webpack-config": "^0.12.53",
     "@types/file-saver": "^2.0.1",
+    "@types/js-yaml": "^4.0.0",
     "@types/markdown-it": "^12.0.0",
     "@types/react": "~16.9.35",
     "@types/react-dom": "~16.9.8",

src/import-export/export.android.ts

@@ -8,15 +8,13 @@ export function canExport() {
 }
 
 export async function exportItem(item: Etebase.Item) {
-  const { name, content } = await getItemData(item);
+  const { name, content } = await getItemData(item, "export");
   const result = await IntentLauncher.startActivityAsync("android.intent.action.CREATE_DOCUMENT", {
     type: "text/markdown",
     category: "android.intent.category.OPENABLE",
     extra: { "android.intent.extra.TITLE": `${name}.md` },
   });
-  console.log("Export Item Result", result);
-  if (result.resultCode === -1 && result?.data) {
-    console.log("Content to write", content);
+  if (result.resultCode === IntentLauncher.ResultCode.Success && result?.data) {
     await RNFS.writeFile(result.data, content);
   }
 }

src/import-export/export.ios.ts

@@ -1,10 +1,16 @@
 import * as Etebase from "etebase";
+import { Share } from "react-native";
+import { getItemData } from "./utils";
 
 export function canExport() {
-  return false;
+  return true;
 }
 
 export async function exportItem(item: Etebase.Item) {
-  const { name } = item.getMeta();
-  throw Error(`Cannot export item "${name}". Exporting is not implemented on this Platform`);
+  const { name, content } = await getItemData(item, "export");
+
+  await Share.share({
+    message: content,
+    title: name,
+  });
 }

src/import-export/export.web.ts

@@ -12,7 +12,7 @@ export function canExport() {
 }
 
 export async function exportItem(item: Etebase.Item) {
-  const { name, content } = await getItemData(item);
+  const { name, content } = await getItemData(item, "export");
   const blob = new Blob([content], { type: "text/markdown;charset=utf-8" });
   FileSaver.saveAs(blob, `${name}.md`);
 }

src/import-export/index.ts

@@ -1 +1,2 @@
+export * from "./export";
 export * from "./share";

src/import-export/share.native.ts

@@ -9,11 +9,9 @@ export function canShare() {
 
 export async function shareItem(item: Etebase.Item) {
   const { name, content } = await getItemData(item);
-  
-  // Adding the name as a title at the beginning of the content because it is not shared otherwise
-  const message = `# ${name}\n\n${content}`;
+
   await Share.share({
-    message,
+    message: content,
     title: name,
   });
 }

src/import-export/utils.ts

@@ -1,10 +1,22 @@
 import * as Etebase from "etebase";
+import YAML from "js-yaml";
 
-export async function getItemData(item: Etebase.Item) {
-  const { name } = item.getMeta();
-  const content = await item.getContent(Etebase.OutputFormat.String);
-  return {
-    name,
-    content,
+export async function getItemData(item: Etebase.Item, format = "") {
+  const data = {
+    name: item.getMeta().name,
+    content: "",
   };
+  const content = await item.getContent(Etebase.OutputFormat.String);
+
+  switch (format) {
+    case "export": {
+      const frontmatter = YAML.dump({ title: data.name });
+      data.content = `---\n${frontmatter}---\n\n${content}`;
+      break;
+    }
+    default: {
+      data.content = `# ${data.name}\n\n${content}`;
+    }
+  }
+  return data;
 }

src/screens/NoteEditScreen.tsx

@@ -24,7 +24,7 @@ import ConfirmationDialog from "../widgets/ConfirmationDialog";
 import NotFound from "../widgets/NotFound";
 import { fontFamilies } from "../helpers";
 import { RootStackParamList } from "../RootStackParamList";
-import { canShare, shareItem } from "../import-export";
+import { canExport, exportItem, canShare, shareItem } from "../import-export";
 
 type NavigationProp = StackNavigationProp<RootStackParamList, "NoteEdit">;
 
@@ -88,6 +88,7 @@ export default function NoteEditScreen(props: PropsType) {
           onEdit={() => navigation.navigate("NoteProps", { colUid, itemUid })}
           onDelete={() => setNoteDeleteDialogShow(true)}
           onShare={onShare}
+          onExport={() => onShare(false)}
           changed={changed}
         />
       ),
@@ -171,13 +172,17 @@ export default function NoteEditScreen(props: PropsType) {
     }));
   }
 
-  function onShare() {
+  function onShare(share = true) {
     (async () => {
       const colMgr = etebase.getCollectionManager();
       const col = colMgr.cacheLoad(cacheCollections.get(colUid)!.cache);
       const itemMgr = colMgr.getItemManager(col);
       const item = itemMgr.cacheLoad(cacheItem!.cache);
-      await shareItem(item);
+      if (share) {
+        await shareItem(item);
+      } else {
+        await exportItem(item);
+      }
     })();
   }
 
@@ -246,9 +251,10 @@ interface RightActionViewProps {
   onSave: () => void;
   onDelete: () => void;
   onShare: () => void;
+  onExport: () => void;
 }
 
-function RightAction({ viewMode, setViewMode, onSave, onEdit, onDelete, onShare, changed }: RightActionViewProps) {
+function RightAction({ viewMode, setViewMode, onSave, onEdit, onDelete, onShare, onExport, changed }: RightActionViewProps) {
   const [showMenu, setShowMenu] = React.useState(false);
 
   return (
@@ -290,6 +296,14 @@ function RightAction({ viewMode, setViewMode, onSave, onEdit, onDelete, onShare,
             }}
           />
         ) : null}
+        {(canExport()) ? (
+          <Menu.Item icon="export" title="Export"
+            onPress={() => {
+              setShowMenu(false);
+              onExport();
+            }}
+          />
+        ) : null}
       </Menu>
     </View>
   );

yarn.lock

@@ -2892,6 +2892,11 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/js-yaml@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.0.tgz#d1a11688112091f2c711674df3a65ea2f47b5dfb"
+  integrity sha512-4vlpCM5KPCL5CfGmTbpjwVKbISRYhduEJvvUWsH5EB7QInhEj94XPZ3ts/9FPiLZFqYO0xoW4ZL8z2AabTGgJA==
+
 "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
@@ -3573,6 +3578,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 arr-diff@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
@@ -8218,6 +8228,13 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.0.0.tgz#f426bc0ff4b4051926cd588c71113183409a121f"
+  integrity sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==
+  dependencies:
+    argparse "^2.0.1"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"