feat: emit events

sandbox/App.vue

@@ -5,6 +5,8 @@
         v-model="content"
         :editable="editable"
         mode="edit"
+        @cancel="cancelEdit"
+        @edit="beginEditing"
         @save="contentSaved"
         @update:model-value="contentUpdated"
       />
@@ -23,7 +25,18 @@ const contentUpdated = (markdown: string) => {
   console.log('content updated: %o', markdown)
 }
 
+const beginEditing = () => {
+  originalContent.value = content.value
+  console.log('begin editing')
+}
+
+const cancelEdit = () => {
+  content.value = originalContent.value
+  console.log('canceled')
+}
+
 const contentSaved = (markdown: string) => {
+  originalContent.value = content.value
   console.log('saved! %o', markdown)
 }
 
@@ -33,12 +46,16 @@ const mockMarkdownResponse = async (): Promise<Record<string, any>> => {
   return mockResponse
 }
 
+const originalContent = ref<string>('')
 const content = ref<string>('')
 
 onBeforeMount(async () => {
   // Simulate fetching the document
   const { content: markdownContent } = await mockMarkdownResponse()
 
-  content.value = markdownContent
+  // Store the original content in case the user cancels
+  originalContent.value = markdownContent
+  // Copy the content for editing
+  content.value = originalContent.value
 })
 </script>

src/components/MarkdownToolbar.vue

@@ -50,7 +50,7 @@
       >
         <button
           data-testid="cancel"
-          @click="toggleEditMode"
+          @click="cancelEdit"
         >
           Cancel
         </button>
@@ -81,6 +81,7 @@ const emit = defineEmits<{
   (e: 'insert-template', format: MarkdownTemplate): void
   (e: 'toggle-editing', editing: boolean): void
   (e: 'toggle-html-preview'): void
+  (e: 'cancel'): void
   (e: 'save'): void
 }>()
 
@@ -92,6 +93,11 @@ const toggleEditMode = (): void => {
   emit('toggle-editing', mode.value !== 'edit')
 }
 
+const cancelEdit = (): void => {
+  emit('cancel')
+  toggleEditMode()
+}
+
 const saveChanges = (): void => {
   emit('save')
   toggleEditMode()

src/components/MarkdownUi.vue

@@ -5,6 +5,7 @@
     class="kong-ui-public-markdown-ui"
   >
     <MarkdownToolbar
+      @cancel="cancelChanges"
       @format-selection="formatSelection"
       @insert-template="insertTemplate"
       @save="saveChanges"
@@ -107,7 +108,9 @@ const props = defineProps({
 
 const emit = defineEmits<{
   (e: 'update:modelValue', rawMarkdown: string): void
+  (e: 'edit'): void
   (e: 'save', rawMarkdown: string): void
+  (e: 'cancel'): void
 }>()
 
 const { init: initMarkdownIt, md } = composables.useMarkdownIt(props.theme)
@@ -170,6 +173,9 @@ const onShiftTab = (): void => {
 // Toggle the current mode
 const toggleEditing = (isEditing: boolean): void => {
   currentMode.value = isEditing ? 'edit' : 'view'
+  if (isEditing) {
+    emit('edit')
+  }
 }
 
 /** When true, show the HTML preview instead of the rendered markdown preview */
@@ -245,8 +251,13 @@ const toggleHtmlPreview = (): void => {
   emulateInputEvent()
 }
 
+// Handle the user clicking the `cancel` button
+const cancelChanges = (): void => {
+  emit('cancel')
+}
+
 // Handle the user clicking the `save` button
-const saveChanges = async (): Promise<void> => {
+const saveChanges = (): void => {
   emit('save', rawMarkdown.value)
 }