From 67c703706e9ca13b695473a41fafeb69e198aa68 Mon Sep 17 00:00:00 2001
From: Sjoerd Beentjes <11621275+sjoerdbeentjes@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:36:02 +0100
Subject: [PATCH] format acknowledgments (#143)

* Add migration to update "Acknowledgments" field in "Menu" model to use markdown editor

* Enhance AcknowledgmentsDialog styling and image handling

- Added 'markdown-body' class to the vue-markdown component for improved styling.
- Introduced CSS rules to ensure images within the markdown are responsive, with a maximum width of 500px.
---
 migrations/1733825239_colophonPresentation.ts | 33 +++++++++++++++++++
 .../AcknowledgmentsDialog.vue                 |  8 ++++-
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 migrations/1733825239_colophonPresentation.ts

diff --git a/migrations/1733825239_colophonPresentation.ts b/migrations/1733825239_colophonPresentation.ts
new file mode 100644
index 00000000..89b2d1a8
--- /dev/null
+++ b/migrations/1733825239_colophonPresentation.ts
@@ -0,0 +1,33 @@
+import { Client } from "@datocms/cli/lib/cma-client-node";
+
+export default async function (client: Client) {
+  console.log("Update existing fields/fieldsets");
+
+  const currentField = await client.fields.find("H7cTIWERTG-z24IE8ILCUw");
+
+  console.log(
+    'Update Multiple-paragraph text field "Acknowledgments" (`acknowledgments`) in model "Menu" (`menu`)'
+  );
+  await client.fields.update("H7cTIWERTG-z24IE8ILCUw", {
+    appearance: {
+      addons: currentField.appearance.addons,
+      editor: "markdown",
+      parameters: {
+        toolbar: [
+          "heading",
+          "bold",
+          "italic",
+          "strikethrough",
+          "code",
+          "unordered_list",
+          "ordered_list",
+          "quote",
+          "link",
+          "image",
+          "fullscreen",
+        ],
+      },
+      type: "markdown",
+    },
+  });
+}
diff --git a/src/components/AcknowledgmentsDialog/AcknowledgmentsDialog.vue b/src/components/AcknowledgmentsDialog/AcknowledgmentsDialog.vue
index 2d0e3e0c..88f1c30c 100644
--- a/src/components/AcknowledgmentsDialog/AcknowledgmentsDialog.vue
+++ b/src/components/AcknowledgmentsDialog/AcknowledgmentsDialog.vue
@@ -17,7 +17,7 @@
       </v-app-bar>
 
       <v-divider />
-      <vue-markdown class="px-4 py-5 flex-grow-1 overflow-y-auto justify-center" :source="acknowledgments" />
+      <vue-markdown class="px-4 py-5 flex-grow-1 overflow-y-auto justify-center markdown-body" :source="acknowledgments" />
       <!-- <div class="px-4 py-5 flex-grow-1 overflow-y-auto justify-center" v-html="acknowledgments" /> -->
     </v-card>
   </v-dialog>
@@ -57,4 +57,10 @@
 </script>
 
 <style>
+/* make image max 300 width */
+.markdown-body img {
+  width: 100%;
+  max-width: 500px;
+}
 </style>
+