Prevent undo from erasing docs after page load

Author: davidmyersdev

components/DocEditor.vue

@@ -170,6 +170,7 @@ export default defineComponent({
       <CoreEditor
         v-if="isMounted"
         ref="coreEditor"
+        :key="doc?.id"
         v-model="text"
         :max-width-in-chars="maxWidthInChars"
         :options="options"

pages/docs/[docId]/index.vue

@@ -31,14 +31,21 @@ export default defineComponent({
     const header = computed(() => doc.value.headers[0])
     const { public: { appTitle } } = useConfig()
 
+    watch(docId, () => {
+      // If we don't create a new placeholder, then the same placeholder id
+      // will be used when creating multiple docs back-to-back. This only
+      // happens when the editor is not unmounted between new doc creations.
+      placeholder.value = new Doc({ text: formatTags(store.state.context.tags, ' ') })
+    })
+
     const onInput = async (text: string) => {
       // Todo: Load a new doc before leaving the route so that Ink does not
       // send a new input event (or figure out how to prevent it from sending
       // an input event when data is pushed to the editor from the store).
       if (text && (!docId.value || docId.value === 'new')) {
         // When we receive input without an active doc, we should always create
         // a new doc with a unique id.
-        const newDoc = new Doc({ text })
+        const newDoc = new Doc({ id: placeholder.value.id, text })
 
         store.commit(EDIT_DOCUMENT, newDoc)
 

test/e2e/editor.spec.ts

@@ -160,4 +160,25 @@ test.describe('editor', () => {
 
     await expect(page.getByTestId('doc-backlinks').getByRole('link')).toHaveText('Test 2')
   })
+
+  test('does not undo initial doc load', async ({ page }) => {
+    await page.goto('/docs/new')
+    await page.waitForSelector('[data-is-mounted="true"]')
+
+    await page.keyboard.type('# My Test Doc')
+
+    // Wait for the data to be persisted.
+    await page.waitForTimeout(200)
+
+    await page.reload()
+    await page.waitForSelector('[data-is-mounted="true"]')
+
+    await expect(page.locator('.ink-mde-editor-content')).toHaveText('# My Test Doc')
+
+    await page.keyboard.down('Meta')
+    await page.keyboard.press('z')
+    await page.keyboard.up('Meta')
+
+    await expect(page.locator('.ink-mde-editor-content')).toHaveText('# My Test Doc')
+  })
 })