From 6d47ca85a1348b4776e7b2be139fa1f09ca00df2 Mon Sep 17 00:00:00 2001
From: kristjanjansen <kristjan.jansen@gmail.com>
Date: Fri, 11 Feb 2022 20:08:28 +0200
Subject: [PATCH 1/3] cleanup

---
 package-lock.json       |  2 +-
 src/internal/Editor.vue | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 067b9fe..1d7ace2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "fachwerk",
-      "version": "0.0.9",
+      "version": "0.0.11",
       "license": "MIT",
       "dependencies": {
         "d3-shape": "^3.1.0",
diff --git a/src/internal/Editor.vue b/src/internal/Editor.vue
index 76a601b..0f79b1b 100644
--- a/src/internal/Editor.vue
+++ b/src/internal/Editor.vue
@@ -3,6 +3,9 @@
 import { ref, computed, onMounted } from "vue";
 import MarkdownIt from "markdown-it";
 import IconOpen from "~icons/tabler/layers-subtract";
+import { format } from "prettier";
+import parserHtml from "prettier/esm/parser-html.mjs";
+import parserMarkdown from "prettier/esm/parser-markdown.mjs";
 
 import Compiler from "./Compiler.vue";
 import { atou, utoa } from "../internal/encoding";
@@ -26,9 +29,16 @@ const md = new MarkdownIt({ linkify: true, html: true, breaks: true }).use(
   editorPlugin
 );
 
+const prettierContent = (str) => {
+  return format(content.value, {
+    parser: "html",
+    plugins: [parserHtml],
+    printWidth: 30,
+  });
+};
+
 const outputContent = computed(() => {
-  const r = md.render(content.value);
-  return r;
+  return prettierContent(md.render(content.value));
 });
 const editor = ref<HTMLTextAreaElement | null>(null);
 
@@ -77,6 +87,9 @@ const onError = (e: CompilerError[] | null) => (error.value = e);
       :class="{ '!border-red-500': error }"
     >
       <Compiler :content="outputContent" @error="onError" />
+      <button @click="() => (content = prettierContent(content))">
+        prettier
+      </button>
     </div>
   </div>
 </template>

From 260087654500fc0ce967846f347f3bc18a494d6f Mon Sep 17 00:00:00 2001
From: kristjanjansen <kristjan.jansen@gmail.com>
Date: Fri, 11 Feb 2022 20:11:55 +0200
Subject: [PATCH 2/3] cleanup

---
 src/internal/Editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/internal/Editor.vue b/src/internal/Editor.vue
index 0f79b1b..9ac70ce 100644
--- a/src/internal/Editor.vue
+++ b/src/internal/Editor.vue
@@ -33,7 +33,7 @@ const prettierContent = (str) => {
   return format(content.value, {
     parser: "html",
     plugins: [parserHtml],
-    printWidth: 30,
+    printWidth: 80,
   });
 };
 

From 23dc99d9da1e874ed44dd21f1ec3609a1d3f86d7 Mon Sep 17 00:00:00 2001
From: kristjanjansen <kristjan.jansen@gmail.com>
Date: Fri, 11 Feb 2022 22:10:53 +0200
Subject: [PATCH 3/3] cleanup

---
 src/internal/Editor.vue | 43 +++++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/internal/Editor.vue b/src/internal/Editor.vue
index 9ac70ce..38841a4 100644
--- a/src/internal/Editor.vue
+++ b/src/internal/Editor.vue
@@ -3,6 +3,7 @@
 import { ref, computed, onMounted } from "vue";
 import MarkdownIt from "markdown-it";
 import IconOpen from "~icons/tabler/layers-subtract";
+import IconPrettier from "~icons/tabler/macro";
 import { format } from "prettier";
 import parserHtml from "prettier/esm/parser-html.mjs";
 import parserMarkdown from "prettier/esm/parser-markdown.mjs";
@@ -29,17 +30,28 @@ const md = new MarkdownIt({ linkify: true, html: true, breaks: true }).use(
   editorPlugin
 );
 
-const prettierContent = (str) => {
-  return format(content.value, {
+const prettierHtml = (str: string, printWidth = 20) => {
+  return format(str, {
     parser: "html",
     plugins: [parserHtml],
-    printWidth: 80,
+    printWidth,
+  });
+};
+
+const prettierMarkdown = (str: string, printWidth = 40) => {
+  return format(str, {
+    parser: "markdown",
+    plugins: [parserMarkdown],
+    printWidth,
   });
 };
 
 const outputContent = computed(() => {
-  return prettierContent(md.render(content.value));
+  return prettierHtml(md.render(content.value));
 });
+
+const onPrettier = () => (content.value = prettierHtml(content.value));
+
 const editor = ref<HTMLTextAreaElement | null>(null);
 
 onMounted(() => {
@@ -74,22 +86,25 @@ const onError = (e: CompilerError[] | null) => (error.value = e);
         v-model="content"
         class="w-full whitespace-pre bg-gray-800 p-5 font-mono text-sm leading-6 text-gray-100 outline-none md:p-6 lg:p-8"
       />
-      <a
-        class="absolute top-1 right-1 !text-gray-600 hover:!text-gray-400 md:top-2 md:right-2"
-        :href="link"
-        target="_blank"
-      >
-        <IconOpen class="w-4 stroke-current" />
-      </a>
+      <div class="absolute top-1 right-1 flex gap-1 md:top-2 md:right-2">
+        <IconPrettier
+          @click="onPrettier"
+          class="w-4 stroke-current text-gray-600 hover:!text-gray-400"
+        />
+        <a
+          class="!text-gray-600 hover:!text-gray-400"
+          :href="link"
+          target="_blank"
+        >
+          <IconOpen class="w-4 stroke-current" />
+        </a>
+      </div>
     </div>
     <div
       class="overflow-x-auto border-l-2 border-white p-4 lg:p-6"
       :class="{ '!border-red-500': error }"
     >
       <Compiler :content="outputContent" @error="onError" />
-      <button @click="() => (content = prettierContent(content))">
-        prettier
-      </button>
     </div>
   </div>
 </template>