From 971df9c45b0ae3411ea7de8b1ee20b6e035aeab2 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 20 Aug 2023 14:24:38 +0200
Subject: [PATCH] can edit raw content

---
 src/assets/icons/edit.svg                     |  6 +++
 src/components/StackedNote.vue                | 51 +++++++++++++++----
 src/hooks/useFile.hook.ts                     | 44 ++++++++--------
 src/hooks/useMarkdown.hook.ts                 |  5 +-
 .../card/hooks/useSpacedRepetitionCards.ts    |  4 +-
 5 files changed, 77 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/icons/edit.svg

diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
new file mode 100644
index 0000000..bf379b0
--- /dev/null
+++ b/src/assets/icons/edit.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
+  <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
+  <path d="M16 5l3 3" />
+</svg>
\ No newline at end of file
diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 59b2662..4177e09 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, nextTick, watch } from 'vue'
+import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue'
 
 import { useFile } from '@/hooks/useFile.hook'
 import { useImages } from '@/hooks/useImages.hook'
@@ -29,7 +29,7 @@ const repo = computed(() => props.repo)
 
 const { scrollToFocusedNote } = useRouteQueryStackedNotes()
 
-const { content } = useFile(sha)
+const { content, rawContent } = useFile(sha)
 const className = computed(() => `stacked-note-${props.index}`)
 const { listenToClick } = useLinks(className.value, sha)
 const titleClassName = computed(() => `title-${className.value}`)
@@ -41,6 +41,11 @@ const hasBacklinks = computed(() => store.userSettings?.backlink)
 const { displayNoteOverlay } = useNoteOverlay(className.value, index)
 const displayedTitle = computed(() => filenameToNoteTitle(props.title))
 
+const mode = ref<'read' | 'edit'>('read')
+const toggleMode = () => {
+  mode.value = mode.value === 'read' ? 'edit' : 'read'
+}
+
 watch(content, () => {
   if (!content.value) {
     return
@@ -64,21 +69,33 @@ watch(content, () => {
     }"
   >
     <div class="title-stacked-note" :class="titleClassName">
-      <a @click.prevent="scrollToFocusedNote(props.sha)">{{
-        displayedTitle
-      }}</a>
+      <a @click.prevent="scrollToFocusedNote(props.sha)"
+        >{{ displayedTitle }}
+      </a>
     </div>
-    <div v-if="false" class="share">
+    <section class="text-content">
+      <button
+        class="action button is-text"
+        :class="{ 'is-link': mode === 'edit' }"
+        @click="toggleMode"
+      >
+        <img src="@/assets/icons/edit.svg" alt="edit" />
+      </button>
       <router-link
+        v-if="false"
         :to="{
           name: 'ShareNotes',
           params: { user: user, repo: repo, note: sha }
         }"
+        class="action"
       >
         <img src="@/assets/icons/share.svg" alt="share" />
       </router-link>
-    </div>
-    <section class="note-content" v-html="content"></section>
+      <div v-if="mode === 'edit'" class="edit">
+        <textarea id="" v-model="rawContent" name="raw-content"></textarea>
+      </div>
+      <div v-if="mode === 'read'" class="note-content" v-html="content"></div>
+    </section>
     <linked-notes v-if="hasBacklinks && content" :sha="sha" />
   </div>
 </template>
@@ -120,7 +137,15 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 }
 
-.share {
+.text-content {
+  flex: 1;
+
+  div {
+    height: 100%;
+  }
+}
+
+.action {
   float: right;
   margin: 0.2rem;
 
@@ -129,6 +154,14 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 }
 
+textarea {
+  width: 100%;
+  height: 100%;
+  border: none;
+  flex: 1;
+  resize: none;
+}
+
 @media screen and (max-width: 768px) {
   .stacked-note {
     padding: 0 0.5rem 1rem;
diff --git a/src/hooks/useFile.hook.ts b/src/hooks/useFile.hook.ts
index e7f9f8d..9fa8aad 100644
--- a/src/hooks/useFile.hook.ts
+++ b/src/hooks/useFile.hook.ts
@@ -6,7 +6,9 @@ import { getFileContent } from '@/modules/repo/services/repo'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 
 export const useFile = (sha: Ref<string> | string, retrieveContent = true) => {
-  const { render } = useMarkdown(toValue(sha))
+  const { render, getRawContent: getRawContentFromFile } = useMarkdown(
+    toValue(sha)
+  )
   const store = useUserRepoStore()
   const { getCachedNote, saveCacheNote } = prepareNoteCache(toValue(sha))
   const fromCache = ref(false)
@@ -14,26 +16,6 @@ export const useFile = (sha: Ref<string> | string, retrieveContent = true) => {
   const content = ref('')
   const rawContent = ref('')
 
-  const getRawContent = async () => {
-    const fileContent = await getCachedFileContent()
-    if (!fileContent) {
-      return
-    }
-    content.value = render(fileContent)
-    rawContent.value = fileContent
-    return rawContent.value
-  }
-
-  const getContent = async () => {
-    const fileContent = await getCachedFileContent()
-    if (!fileContent) {
-      return
-    }
-    content.value = render(fileContent)
-    rawContent.value = fileContent
-    return content.value
-  }
-
   const getCachedFileContent = async (): Promise<string | null> => {
     const cachedNote = await getCachedNote()
 
@@ -57,12 +39,32 @@ export const useFile = (sha: Ref<string> | string, retrieveContent = true) => {
     return contentFile
   }
 
+  const getRawContent = async () => {
+    const fileContent = await getCachedFileContent()
+    if (!fileContent) {
+      return
+    }
+    rawContent.value = getRawContentFromFile(fileContent)
+    return rawContent.value
+  }
+
+  const getContent = async () => {
+    const fileContent = await getCachedFileContent()
+    if (!fileContent) {
+      return
+    }
+    content.value = render(fileContent)
+    return content.value
+  }
+
   if (retrieveContent) {
     getContent()
+    getRawContent()
   }
 
   return {
     content,
+    rawContent,
     getRawContent,
     getContent,
     getCachedFileContent,
diff --git a/src/hooks/useMarkdown.hook.ts b/src/hooks/useMarkdown.hook.ts
index 8dfd559..114b5bf 100644
--- a/src/hooks/useMarkdown.hook.ts
+++ b/src/hooks/useMarkdown.hook.ts
@@ -40,6 +40,8 @@ const md = new MarkdownIt({
   })
 
 export const useMarkdown = (defaultPrefix?: Ref<string> | string) => {
+  const getRawContent = (content: string) => decodeBase64ToUTF8(content)
+
   return {
     toHTML: (content: string) => (content ? md.render(content) : ''),
     render: (content: string, prefix?: string) =>
@@ -47,6 +49,7 @@ export const useMarkdown = (defaultPrefix?: Ref<string> | string) => {
         ? md.render(decodeBase64ToUTF8(content), {
             docId: defaultPrefix ? toValue(defaultPrefix) : prefix ?? ''
           })
-        : ''
+        : '',
+    getRawContent
   }
 }
diff --git a/src/modules/card/hooks/useSpacedRepetitionCards.ts b/src/modules/card/hooks/useSpacedRepetitionCards.ts
index a10d653..727b93e 100644
--- a/src/modules/card/hooks/useSpacedRepetitionCards.ts
+++ b/src/modules/card/hooks/useSpacedRepetitionCards.ts
@@ -66,8 +66,8 @@ export const useSpacedRepetitionCards = () => {
           continue
         }
 
-        const { getRawContent } = useFile(cardFile.sha, false)
-        const content = (await getRawContent()) ?? ''
+        const { getContent } = useFile(cardFile.sha, false)
+        const content = (await getContent()) ?? ''
 
         const [front, back, references] =
           decodeBase64ToUTF8(content).split('___') ?? []