fix: Clone of selective config causes global objects to be cloned. (#217

)

Also fixed the partials to only show the add button after the list of partials loads.

src/ts/editor/editor.ts

@@ -9,6 +9,7 @@ import {EVENT_SAVE} from './events';
 import {GrowProjectType} from '../projectType/grow/growProjectType';
 import {LiveEditorLabels} from './template';
 import {ProjectTypeComponent} from '../projectType/projectType';
+import cloneDeep from 'lodash.clonedeep';
 
 /**
  * Global configuration used by the selective editor fields.
@@ -130,3 +131,18 @@ export class LiveEditor {
     this.state.setProjectType(projectType);
   }
 }
+
+/**
+ * When using the selective configuration for different forms is uses a global
+ * configuration, but the individual selective editors may try to change the
+ * config since it is not immutable, so we need to deep copy the configuration
+ * while preserving the references to objects.
+ */
+export function cloneSelectiveConfig(
+  config: LiveEditorSelectiveEditorConfig
+): LiveEditorSelectiveEditorConfig {
+  // TODO: Clone without cloning global key?
+  const newConfig = cloneDeep(config);
+  newConfig.global = config.global;
+  return newConfig;
+}

src/ts/editor/ui/modal.ts

@@ -19,7 +19,7 @@ import {ApiError} from '../api';
 import {BaseUI} from './index';
 import {ListenersMixin} from '../../mixin/listeners';
 import {UuidMixin} from '@blinkk/selective-edit/dist/mixins/uuid';
-import cloneDeep from 'lodash.clonedeep';
+import {LiveEditorSelectiveEditorConfig, cloneSelectiveConfig} from '../editor';
 import {templateApiError} from './error';
 
 /**
@@ -357,9 +357,12 @@ export class FormDialogModal extends DialogModal {
     super(config);
     this.config = config;
     this.data = new DeepObject({});
+
+    // Clone to prevent shared values if editor changes config.
     this.selective = new SelectiveEditor(
-      // Clone to prevent shared values if editor changes config.
-      cloneDeep(this.config.selectiveConfig)
+      cloneSelectiveConfig(
+        this.config.selectiveConfig as LiveEditorSelectiveEditorConfig
+      )
     );
 
     // When the project type is updated the selective editor changes.

src/ts/editor/ui/parts/content/section.ts

@@ -7,14 +7,17 @@ import {
   html,
 } from '@blinkk/selective-edit';
 import {EditorState, StatePromiseKeys} from '../../../../editor/state';
+import {
+  LiveEditorSelectiveEditorConfig,
+  cloneSelectiveConfig,
+} from '../../../editor';
 import {
   ProjectTypeComponent,
   updateSelectiveForProjectType,
 } from '../../../../projectType/projectType';
 
 import {DataStorage} from '../../../../utility/dataStorage';
 import {LiveEditorAutoFields} from '../../../autoFields';
-import cloneDeep from 'lodash.clonedeep';
 
 export const STORAGE_CONTENT_SECTION = 'live.content.section';
 
@@ -48,7 +51,9 @@ export class ContentSectionPart extends BasePart implements UiPartComponent {
     this.config = config;
     this.selective = new SelectiveEditor(
       // Clone to prevent shared values if editor changes config.
-      cloneDeep(this.config.selectiveConfig)
+      cloneSelectiveConfig(
+        this.config.selectiveConfig as LiveEditorSelectiveEditorConfig
+      )
     );
 
     // Override the autofields class.

src/ts/editor/ui/parts/menu/site.ts

@@ -10,14 +10,17 @@ import {
   IncludeExcludeFilter,
   IncludeExcludeFilterConfig,
 } from '../../../../utility/filter';
+import {
+  LiveEditor,
+  LiveEditorSelectiveEditorConfig,
+  cloneSelectiveConfig,
+} from '../../../editor';
 import {MenuSectionPart, MenuSectionPartConfig} from './index';
 
 import {DataStorage} from '../../../../utility/dataStorage';
 import {EVENT_FILE_LOAD} from '../../../events';
-import {LiveEditor} from '../../../editor';
 import {RuleConfig} from '@blinkk/selective-edit/dist/selective/validationRules';
 import {StatePromiseKeys} from '../../../state';
-import cloneDeep from 'lodash.clonedeep';
 import {repeat} from '@blinkk/selective-edit';
 import {templateLoading} from '../../../template';
 
@@ -62,8 +65,9 @@ export class SitePart extends MenuSectionPart {
   protected getOrCreateModalCopy(): FormDialogModal {
     if (!this.config.editor.ui.partModals.modals[MODAL_KEY_COPY]) {
       // Clone to prevent shared values if editor changes config.
-      const selectiveConfig = cloneDeep(
-        this.config.editor.config.selectiveConfig
+      const selectiveConfig = cloneSelectiveConfig(
+        this.config.editor.config
+          .selectiveConfig as LiveEditorSelectiveEditorConfig
       );
       const modal = new FormDialogModal({
         title: 'Copy file',
@@ -121,8 +125,9 @@ export class SitePart extends MenuSectionPart {
   protected getOrCreateModalDelete(): FormDialogModal {
     if (!this.config.editor.ui.partModals.modals[MODAL_KEY_DELETE]) {
       // Clone to prevent shared values if editor changes config.
-      const selectiveConfig = cloneDeep(
-        this.config.editor.config.selectiveConfig
+      const selectiveConfig = cloneSelectiveConfig(
+        this.config.editor.config
+          .selectiveConfig as LiveEditorSelectiveEditorConfig
       );
       const modal = new FormDialogModal({
         title: 'Delete file',
@@ -172,8 +177,9 @@ export class SitePart extends MenuSectionPart {
   protected getOrCreateModalNew(): FormDialogModal {
     if (!this.config.editor.ui.partModals.modals[MODAL_KEY_NEW]) {
       // Clone to prevent shared values if editor changes config.
-      const selectiveConfig = cloneDeep(
-        this.config.editor.config.selectiveConfig
+      const selectiveConfig = cloneSelectiveConfig(
+        this.config.editor.config
+          .selectiveConfig as LiveEditorSelectiveEditorConfig
       );
       const modal = new FormDialogModal({
         title: 'New file',

src/ts/editor/ui/parts/menu/workspaces.ts

@@ -6,10 +6,14 @@ import {
   html,
 } from '@blinkk/selective-edit';
 import {DialogActionLevel, FormDialogModal} from '../../modal';
+import {
+  LiveEditorSelectiveEditorConfig,
+  cloneSelectiveConfig,
+} from '../../../editor';
 import {MenuSectionPart, MenuSectionPartConfig} from './index';
+
 import {EVENT_WORKSPACE_LOAD} from '../../../events';
 import {FeatureFlags} from '../../../features';
-import cloneDeep from 'lodash.clonedeep';
 import merge from 'lodash.merge';
 import {repeat} from '@blinkk/selective-edit';
 import {templateLoading} from '../../../template';
@@ -60,7 +64,10 @@ export class WorkspacesPart extends MenuSectionPart {
       const selectiveConfig = merge(
         {},
         // Clone to prevent shared values if editor changes config.
-        cloneDeep(this.config.editor.config.selectiveConfig),
+        cloneSelectiveConfig(
+          this.config.editor.config
+            .selectiveConfig as LiveEditorSelectiveEditorConfig
+        ),
         {
           fields: [
             {

src/ts/editor/ui/parts/overview.ts

@@ -9,14 +9,17 @@ import {
   repeat,
 } from '@blinkk/selective-edit';
 import {DialogActionLevel, FormDialogModal} from '../modal';
+import {
+  LiveEditorSelectiveEditorConfig,
+  cloneSelectiveConfig,
+} from '../../editor';
 import {exampleIcon, githubIcon, localIcon} from '../icons';
 
 import {EVENT_WORKSPACE_LOAD} from '../../events';
 import {EditorState} from '../../state';
 import {FieldConfig} from '@blinkk/selective-edit/dist/selective/field';
 import {NotificationAction} from './notifications';
 import TimeAgo from 'javascript-time-ago';
-import cloneDeep from 'lodash.clonedeep';
 import merge from 'lodash.merge';
 
 const MODAL_KEY_PUBLISH = 'overview_publish';
@@ -53,7 +56,10 @@ export class OverviewPart extends BasePart implements UiPartComponent {
       const selectiveConfig = merge(
         {},
         // Clone to prevent shared values if editor changes config.
-        cloneDeep(this.config.editor.config.selectiveConfig),
+        cloneSelectiveConfig(
+          this.config.editor.config
+            .selectiveConfig as LiveEditorSelectiveEditorConfig
+        ),
         {
           fields: fields,
         }

src/ts/projectType/generic/field/partials.ts

@@ -279,6 +279,14 @@ export class GenericPartialsField
     throw new Error('Not implemented.');
   }
 
+  templateFooter(editor: SelectiveEditor, data: DeepObject): TemplateResult {
+    if (!this.partials) {
+      return html``;
+    }
+
+    return super.templateFooter(editor, data);
+  }
+
   templateInput(editor: SelectiveEditor, data: DeepObject): TemplateResult {
     // While waiting for the partials config show the loading indicator.
     if (!this.partials) {