From f7c824743f03badc621cb662cf2a5e34c628fbf6 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Thu, 4 Nov 2021 13:44:10 -0600
Subject: [PATCH] ui(editor): prevent initialContent being duplicated

---
 .../scripts/components/elements/Editor.tsx    | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/resources/scripts/components/elements/Editor.tsx b/resources/scripts/components/elements/Editor.tsx
index 6666ac8e4..c3a77b9c6 100644
--- a/resources/scripts/components/elements/Editor.tsx
+++ b/resources/scripts/components/elements/Editor.tsx
@@ -203,25 +203,28 @@ export interface Props {
 export default ({ className, style, overrides, initialContent, extensions, mode, filename, onModeChanged, fetchContent, onContentSaved }: Props) => {
     const [ languageConfig ] = useState<Compartment>(new Compartment());
     const [ keybinds ] = useState<Compartment>(new Compartment());
-    const [ state ] = useState<EditorState>(EditorState.create({
-        doc: initialContent,
-        extensions: [
-            ...defaultExtensions,
-            ...(extensions !== undefined ? extensions : []),
-
-            languageConfig.of(mode !== undefined ? modeToExtension(mode) : findLanguageExtensionByMode(findModeByFilename(filename || ''))),
-            keybinds.of([]),
-        ],
-    }));
     const [ view, setView ] = useState<EditorView>();
 
+    const createEditorState = () => {
+        return EditorState.create({
+            doc: initialContent,
+            extensions: [
+                ...defaultExtensions,
+                ...(extensions !== undefined ? extensions : []),
+
+                languageConfig.of(mode !== undefined ? modeToExtension(mode) : findLanguageExtensionByMode(findModeByFilename(filename || ''))),
+                keybinds.of([]),
+            ],
+        });
+    };
+
     const ref = useCallback((node) => {
         if (!node) {
             return;
         }
 
         const view = new EditorView({
-            state: state,
+            state: createEditorState(),
             parent: node,
         });
         setView(view);
@@ -277,9 +280,9 @@ export default ({ className, style, overrides, initialContent, extensions, mode,
             return;
         }
 
-        view.dispatch({
-            changes: { from: 0, insert: initialContent },
-        });
+        // We could dispatch a view update to replace the content, but this would keep the edit history,
+        // and previously would duplicate the content of the editor.
+        view.setState(createEditorState());
     }, [ initialContent ]);
 
     useEffect(() => {