Vue3 のアプリにmavon-editorを用いてマークダウンフォームを導入する。

mavon-editorとは

vue.jsのアプリに簡単にqiitaのようなマークダウン方式のフォームを導入できるライブラリです。

https://github.com/hinesboy/mavonEditor/blob/HEAD/README-EN.md

導入する機能

・マークダウン編集
・編集内容をFirestoreに保存。（写真はfirebase storageに保存)
・投稿した写真を投稿内容埋め込む。
※写真を投稿する場合に癖があったので、記事にまとめました。

環境

・Vue3
・compositionAPI
・mavon-editor 3.0.0-beta
・firestore v9
・firebase storage v9

導入手順

Vue3用のmavon-editorをインストールする。

npm i mavon-editor@3.0.0-beta

プラグインに追加する。

import { createApp } from "vue";
import App from "./App.vue";
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

createApp(App).use(mavonEditor).mount("#app");

編集フォームを組み込む。

<template>
  <mavon-editor :toolbars="markdownOption" @imgAdd="imgAdd" language="en" v-model="content" />
  <button @click="register">登録</button>
</template>

<script setup lang="ts">
import 'mavon-editor/dist/css/index.css';
import markdownOption from "./markdownOption";

const imgAdd = () = {};
const register = () = {};

</script>

toolbarsプロパティーでエディターに表示する機能をカスタマイズできます。
↓詳細
https://github.com/hinesboy/mavonEditor/blob/HEAD/README-EN.md#props

@imgAddプロパティーで写真を追加した際に発火する関数を登録します。

language="en" でデフォルトの言語を設定します。(enで英語)

↓その他のevent詳細
https://github.com/hinesboy/mavonEditor/blob/HEAD/README-EN.md#events

内容を保存する関数を追加します。(register)

topicコレクションに、contentというフィールドをもつドキュメントを保存します。

<template>
  <mavon-editor :toolbars="markdownOption" @imgAdd="imgAdd" language="en" v-model="content" />
  <button @click="register">登録</button>
</template>

<script setup lang="ts">
import 'mavon-editor/dist/css/index.css'
import markdownOption from "./markdownOption";
import { db } from "../firebase/config"; //追加
import {doc,setDoc,} from 'firebase/firestore'; //追加 

const content = ref("");  //追加 

const register = async () => {  //追加 
    const newTopicRef = doc(collection(db, 'topic'));
    await setDoc(newTopicRef, {content:content.value});
  }
</script>

import {
  FirebaseOptions,
  getApps,
  getApp,
  initializeApp,
  FirebaseApp,
} from "firebase/app";

const firebaseConfig: FirebaseOptions = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxx.firebaseapp.com",
  projectId: "xxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "1:xxxxxxxxxxxx:web:xxxxxxxxxxxx",
  measurementId: "xxxxxxxxxxxx",
};

const firebaseApp: FirebaseApp = !getApps().length
  ? initializeApp(firebaseConfig)
  : getApp();

import { getFirestore} from "firebase/firestore";
const db = getFirestore(firebaseApp);

export { firebaseApp ,db};

ここまでで、編集フォームからマークダウンのプレビューの確認、保存が可能となります。

問題点

マークダウン形式の文字列で保存が可能ですが、写真を保存しようとした場合問題点があります。

上記のように ![nuxt3sq.jpeg](1) という文字列で保存されます。
プレビューでは正しく表示されていますが、保存後、再度表示した場合は、単純にファイル名の文字列として認識されるため当然正しく表示されません。

写真を正しく保存するプロセス

1.フォーム上で写真を追加する。
2.追加した写真をFirebase storageにアップロードする。
3.アップロードのサーバーURLを取得する。
4.写真追加時に追加された文字列（![nuxt3sq.jpeg](1))を以下の文字列で置き換える。
<img src="アップロードサーバーのURL">

写真を追加した場合の実装を追加する。

<script setup lang="ts">
import 'mavon-editor/dist/css/index.css'
import markdownOption from "./markdownOption";
import { db } from "../firebase/config"; 
import {doc,setDoc,} from 'firebase/firestore';
import { getStorage, ref, uploadBytesResumable, getDownloadURL, deleteObject } from "firebase/storage"; //　追加
const storage = getStorage(); //追加

import { db } from "../firebase/config";
import { v4 as uuidv4 } from 'uuid'　//追加

const content = ref("");
const files=ref<FileInfo[]>([]); //追加 ※1

interface FileData { //追加
  file: File,
  content: string,
}

interface FileInfo { //追加
  id: string,
  url: string
}

const imgAdd = async (_: string, imgfile: File) => { //追加 ※2
  const fileData = {file: imgfile, content: content.value,}
  const {afterContent,afterFiles} = await uploadImg(fileData, files.value);
  content.value = afterContent;
  files.value = afterFiles;
};

const uploadImg = async(fileData: FileData, files: FileInfo[])=> { //追加　※3
    const id = uuidv4()
    const storageRef = ref(storage, `images/${id}`);
    const uploadTask = await uploadBytesResumable(storageRef, fileData.file);

    const url = await getDownloadURL(uploadTask.ref)
    const reg = new RegExp('!\\[.*\\]\\(\\d*\\)', 'g');
    const afterContent = fileData.content.replace(reg, `<img src="${url}">`);
    const afterFiles = [...files, { id, url }]
    return { afterContent, afterFiles }
  }

const register = async (content: string,) => {  //追加 
    const newTopicRef = doc(collection(db, 'topic'));
    await setDoc(newTopicRef, {content});
  }
</script>

解説

※1 画像ファイルのidとurlを格納するための配列。
※2 画像が追加された場合に発火する関数。
※3 実際に写真をアップロードする関数。
uploadBytesResumable関数でstorageに保存する。
getDownloadURLでサーバーURLを取得する。
下記記述で、写真追加時に書き込まれた文字列を、置き換えます。

const reg = new RegExp('!\\[.*\\]\\(\\d*\\)', 'g');
const afterContent = fileData.content.replace(reg, `<img src="${url}">`);

これで、サーバーURLを文字列で保存することにより、再度表示した場合に正しく表示されるようになりました。

改善点

このままでも良いのですが現状、写真を追加した時点で、storageに写真が保存されるため、その後の編集で結局写真のURLを削除した場合でもstorageに余計な写真ファイルが残ってしまします。
そこで、投稿登録時に写真を削除していた場合は、該当の写真ファイルをstorageから削除する実装を行います。

storageから不要なファイルを削除するプロセス。

1.現状、追加されたファイルは以下のような型でfilesに格納されている。

[
 {id:保存時のファイル名,url:保存サーバーのURL},
 {id:保存時のファイル名,url:保存サーバーのURL}
]

2.登録ボタンが押された場合に、filesの各オブジェクトのurlが投稿の文字列に含まれているかチェック。
3.投稿内容の文字列にurlが含まれていない場合は、storageから削除

const _deleteImgFromStorage = (deletedFiles: FileInfo[]) => { //追加 ※2
  deletedFiles.forEach(file => {
    const deleteRef = ref(storage, `images/${file.id}`);
    deleteObject(deleteRef).then(() => {
    }).catch((error) => {
      console.log(error);
    });
  });
}

const _splitFiles = (files: FileInfo[], content: string) => { //追加 ※1 
  const existFiles: FileInfo[] = [];
  const deleteFiles: FileInfo[] = [];
  for (let i = 0; i < files.length; i++) {
    if (content.includes(files[i].url)) {
      existFiles.push(files[i])
    } else {
      deleteFiles.push(files[i])
    }
  }
  return { existFiles, deleteFiles }
};
const register = async () => { 
    const { existFiles, deleteFiles } = _splitFiles(files.value, content.value); //追加
    _deleteImgFromStorage(deleteFiles);
    const newTopicRef = doc(collection(db, 'topic'));
    await setDoc(newTopicRef, {content:content.value, files:existFiles});
  }

解説

※1 投稿内容の文字列にurlが含まれているかチェックする関数。
※2 storageから削除する関数。

以上です。

<template>
  <mavon-editor :toolbars="markdownOption" @imgAdd="imgAdd" language="en" v-model="content" />
  <button @click="register">登録</button>
</template>

<script setup lang="ts">
import 'mavon-editor/dist/css/index.css'
import markdownOption from "./markdownOption";
import { db } from "../firebase/config"; 
import {doc,setDoc,} from 'firebase/firestore';
import { getStorage, ref, uploadBytesResumable, getDownloadURL, deleteObject } from "firebase/storage"; 
const storage = getStorage(); 

import { db } from "../firebase/config";
import { v4 as uuidv4 } from 'uuid'　

const content = ref("");
const files=ref<FileInfo[]>([]); 

interface FileData { 
  file: File,
  content: string,
}

interface FileInfo { 
  id: string,
  url: string
}

const imgAdd = async (_: string, imgfile: File) => { 
  const fileData = {file: imgfile, content: content.value,}
  const {afterContent,afterFiles} = await uploadImg(fileData, files.value);
  content.value = afterContent;
  files.value = afterFiles;
};

const uploadImg = async(fileData: FileData, files: FileInfo[])=> { 
    const id = uuidv4()
    const storageRef = ref(storage, `images/${id}`);
    const uploadTask = await uploadBytesResumable(storageRef, fileData.file);

    const url = await getDownloadURL(uploadTask.ref)
    const reg = new RegExp('!\\[.*\\]\\(\\d*\\)', 'g');
    const afterContent = fileData.content.replace(reg, `<img src="${url}">`);
    const afterFiles = [...files, { id, url }]
    return { afterContent, afterFiles }
  }

const _deleteImgFromStorage = (deletedFiles: FileInfo[]) => { 
  deletedFiles.forEach(file => {
    const deleteRef = ref(storage, `images/${file.id}`);
    deleteObject(deleteRef).then(() => {
    }).catch((error) => {
      console.log(error);
    });
  });
}

const _splitFiles = (files: FileInfo[], content: string) => { 
  const existFiles: FileInfo[] = [];
  const deleteFiles: FileInfo[] = [];
  for (let i = 0; i < files.length; i++) {
    if (content.includes(files[i].url)) {
      existFiles.push(files[i])
    } else {
      deleteFiles.push(files[i])
    }
  }
  return { existFiles, deleteFiles }
};

const register = async () => { 
    const { existFiles, deleteFiles } = _splitFiles(files.value, content.value); 
    _deleteImgFromStorage(deleteFiles);
    const newTopicRef = doc(collection(db, 'topic'));
    await setDoc(newTopicRef, {content:content.value, files:existFiles});
  }
</script>