chore(deps): update dependency prettier to v3 (#564)

* chore(deps): update dependency prettier to v3

* chore(deps): updated prettier

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

package.json

@@ -98,7 +98,6 @@
     "@types/netmask": "^2.0.0",
     "@types/node": "^18.0.0",
     "@types/node-forge": "^1.3.2",
-    "@types/prettier": "^2.7.2",
     "@types/qrcode": "^1.5.0",
     "@types/randombytes": "^2.0.0",
     "@types/ua-parser-js": "^0.7.36",
@@ -115,7 +114,7 @@
     "eslint": "^8.38.0",
     "jsdom": "^22.0.0",
     "less": "^4.1.3",
-    "prettier": "^2.8.7",
+    "prettier": "^3.0.0",
     "typescript": "~4.9.0",
     "unocss": "^0.55.0",
     "unocss-preset-scrollbar": "^0.2.1",

src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { format } from 'prettier';
-import htmlParser from 'prettier/parser-html';
+import htmlParser from 'prettier/plugins/html';
 import { useStorage } from '@vueuse/core';
 import Editor from './editor/editor.vue';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 
 const html = useStorage('html-wysiwyg-editor--html', '<h1>Hey!</h1><p>Welcome to this html wysiwyg editor</p>');
+
+const formattedHtml = asyncComputed(() => format(html.value, { parser: 'html', plugins: [htmlParser] }), '');
 </script>
 
 <template>
   <Editor v-model:html="html" />
-  <TextareaCopyable :value="format(html, { parser: 'html', plugins: [htmlParser] })" language="html" />
+  <TextareaCopyable :value="formattedHtml" language="html" />
 </template>