fix fitToContent when cloning section

edit/edit.js

@@ -87,16 +87,19 @@ lazyInit();
 
   $('#heading').textContent = t(style.id ? 'editStyleHeading' : 'addStyleTitle');
   $('#preview-label').classList.toggle('hidden', !style.id);
-
   const toc = [];
   const elToc = $('#toc');
   elToc.onclick = e => editor.jumpToEditor([...elToc.children].indexOf(e.target));
-
-  (editor.isUsercss ? SourceEditor : SectionsEditor)();
-
+  if (editor.isUsercss) {
+    SourceEditor();
+  } else {
+    SectionsEditor();
+  }
   prefs.subscribe('editor.toc.expanded', (k, val) => val && editor.updateToc(), {now: true});
   dirty.onChange(updateDirty);
+
   await editor.ready;
+  editor.ready = true;
 
   setTimeout(() => editor.getEditors().forEach(linter.enableForEditor));
   // enabling after init to prevent flash of validation failure on an empty name

edit/sections-editor-section.js

@@ -29,7 +29,9 @@ function createSection(originalSection, genId, si) {
   const elLabel = $('.code-label', el);
   const cm = cmFactory.create(wrapper => {
     // making it tall during initial load so IntersectionObserver sees only one adjacent CM
-    wrapper.style.height = si ? si.height : '100vh';
+    if (editor.ready !== true) {
+      wrapper.style.height = si ? si.height : '100vh';
+    }
     elLabel.after(wrapper);
   }, {
     value: originalSection.code,

edit/sections-editor.js

@@ -142,7 +142,7 @@ function SectionsEditor() {
 
   /** @param {EditorSection} section */
   function fitToContent(section) {
-    const {el, cm, cm: {display: {wrapper, sizer}}} = section;
+    const {cm, cm: {display: {wrapper, sizer}}} = section;
     if (cm.display.renderedView) {
       resize();
     } else {
@@ -155,7 +155,7 @@ function SectionsEditor() {
         return;
       }
       if (headerOffset == null) {
-        headerOffset = el.getBoundingClientRect().top;
+        headerOffset = container.getBoundingClientRect().top;
       }
       contentHeight += 9; // border & resize grip
       cm.off('update', resize);
@@ -582,9 +582,10 @@ function SectionsEditor() {
     }
     const section = createSection(init, genId, si);
     const {cm} = section;
-    sections.splice(base ? sections.indexOf(base) + 1 : sections.length, 0, section);
+    const index = base ? sections.indexOf(base) + 1 : sections.length;
+    sections.splice(index, 0, section);
     container.insertBefore(section.el, base ? base.el.nextSibling : null);
-    refreshOnView(cm, forceRefresh);
+    refreshOnView(cm, base || forceRefresh);
     registerEvents(section);
     if ((!si || !si.height) && (!base || init.code)) {
       // Fit a) during startup or b) when the clone button is clicked on a section with some code
@@ -592,7 +593,7 @@ function SectionsEditor() {
     }
     if (base) {
       cm.focus();
-      setTimeout(editor.scrollToEditor, 0, cm);
+      editor.scrollToEditor(cm);
       linter.enableForEditor(cm);
     }
     updateSectionOrder();