added description to services

app/javascript/controllers/markdown_editor_controller.js

@@ -0,0 +1,36 @@
+import { default as MarkdownIt } from "markdown-it"
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["markdownTextarea", "previewContainer", "toggleButton"]
+
+  connect() {
+    console.log("markdown editor connected")
+    // Sync the preview container with the markdown container
+    this.updatePreview()
+    this.toggleButtonTarget.innerHTML = "Edit"
+  }
+
+  updatePreview() {
+    const markdown = this.markdownTextareaTarget.value
+    const html = MarkdownIt().render(markdown)
+    if (html.length) {
+      this.previewContainerTarget.innerHTML = html
+    } else {
+      this.previewContainerTarget.innerHTML = "<i class='text-gray-500'>Nothing here yet</i>"
+    }
+  }
+
+  // Add this method to handle input events
+  preview() {
+    this.updatePreview()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    this.markdownTextareaTarget.classList.toggle("hidden")
+    this.previewContainerTarget.classList.toggle("hidden")
+    this.toggleButtonTarget.innerHTML = this.toggleButtonTarget.innerHTML === "Edit" ? "Preview" : "Edit"
+    this.markdownTextareaTarget.focus()
+  }
+}