Refactor editor panels (#245)

* Refactor editor panels * EditorOptionsPanel icon fixes * manage editor panel open/close --------- Co-authored-by: Julien Nahum <[email protected]>
JhumanJ · Nov 28, 2023 · 730bdd1 · 730bdd1
1 parent d65c1be
commit 730bdd1
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 145 deletions.
diff --git a/resources/js/components/open/editors/EditorOptionsPanel.vue b/resources/js/components/open/editors/EditorOptionsPanel.vue
@@ -0,0 +1,46 @@
+<template>
+  <collapse class="p-4 w-full border-b" v-model="show">
+    <template #title>
+      <div class="flex items-center pr-8">
+        <div class="mr-3" :class="{'text-blue-600':show, 'text-gray-500':!show}">
+          <slot name="icon" />
+        </div>
+        <h3 id="v-step-2" class="font-semibold flex-grow">
+          {{ name }}
+        </h3>
+        <pro-tag v-if="hasProTag" />
+      </div>
+    </template>
+
+    <slot />
+  </collapse>
+</template>
+
+<script>
+import Collapse from '../../common/Collapse.vue'
+import ProTag from '../../common/ProTag.vue'
+
+export default {
+  name: 'EditorOptionsPanel',
+  components: { Collapse, ProTag },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    hasProTag: {
+      type: Boolean,
+      default: false
+    },
+    alreadyOpened: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      show: this.alreadyOpened
+    }
+  }
+}
+</script>
diff --git a/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue b/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
@@ -1,17 +1,11 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 class="font-semibold text-lg relative">
-        <svg
-          class="h-5 w-5 inline mr-2 -mt-0.5 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
-          viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
-            stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-
-        About Submissions
-      </h3>
+  <editor-options-panel name="About Submissions" :already-opened="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
+          stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
 
     <text-input name="submit_button_text" class="mt-4"
@@ -130,21 +124,20 @@
                             :required="false"
       />
     </template>
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import ProTag from '../../../../common/ProTag.vue'
 import VTransition from '../../../../common/transitions/VTransition.vue'
 
 export default {
-  components: {Collapse, ProTag, VTransition},
+  components: {EditorOptionsPanel, ProTag, VTransition},
   props: {},
   data() {
     return {
-      submissionOptions: {},
-      isCollapseOpen: true,
+      submissionOptions: {}
     }
   },
 

diff --git a/resources/js/components/open/forms/components/form-components/FormAccess.vue b/resources/js/components/open/forms/components/form-components/FormAccess.vue
@@ -1,18 +1,12 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 transition-colors" 
-            :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
-          />
-        </svg>
-        Form Access
-      </h3>
+  <editor-options-panel name="Form Access" :already-opened="false">
+    <template #icon>
+      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round"
+              d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+        />
+      </svg>
     </template>
-    <pro-tag class="float-right" />
     <text-input name="password" :form="form" class="mt-4"
                 label="Form Password" help="Leave empty to disable password"
     />
@@ -40,19 +34,17 @@
                           help="This message will be shown when the form will have the maximum number of submissions"
                           :required="false"
     />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 
 export default {
-  components: { Collapse, ProTag },
+  components: { EditorOptionsPanel },
   props: {},
   data () {
     return {
-      isCollapseOpen: false
     }
   },
   computed: {

diff --git a/resources/js/components/open/forms/components/form-components/FormCustomCode.vue b/resources/js/components/open/forms/components/form-components/FormCustomCode.vue
@@ -1,15 +1,9 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors"
-             :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-
-        Custom Code
-        <pro-tag />
-      </h3>
+  <editor-options-panel name="Custom Code" :already-opened="false" :has-pro-tag="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
     <p class="mt-4">
       The code will be injected in the <span class="font-semibold">head</span> section of your form page.
@@ -19,21 +13,19 @@
                      your actual form page (save changes beforehand)."
                 label="Custom Code"
     />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import CodeInput from '../../../../forms/CodeInput.vue'
 
 export default {
-  components: { Collapse, ProTag, CodeInput },
+  components: { EditorOptionsPanel, CodeInput },
   props: {
   },
   data () {
     return {
-      isCollapseOpen: false
     }
   },
 

diff --git a/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue b/resources/js/components/open/forms/components/form-components/FormCustomSeo.vue
@@ -1,18 +1,11 @@
 <template>
-  <collapse class="p-5 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 id="v-step-2" class="font-semibold text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-             class="h-5 w-5 inline -ml-1 mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-          />
-        </svg>
-
-        Link Settings - SEO
-        <pro-tag />
-      </h3>
+  <editor-options-panel name="Link Settings - SEO" :already-opened="false" :has-pro-tag="true">
+    <template #icon>
+      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round"
+              d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+        />
+      </svg>
     </template>
     <p class="mt-4 text-gray-500 text-sm">
       Customize the image and text that appear when you share your form on other sites (Open Graph).
@@ -26,19 +19,17 @@
     <image-input v-model="form.seo_meta.page_thumbnail" name="page_thumbnail" class="mt-4"
                  label="Page Thumbnail Image" help="Also know as og:image - 1200 X 630"
     />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 
 export default {
-  components: { Collapse, ProTag },
+  components: { EditorOptionsPanel },
   props: {},
   data () {
     return {
-      isCollapseOpen: false
     }
   },
   computed: {

diff --git a/resources/js/components/open/forms/components/form-components/FormCustomization.vue b/resources/js/components/open/forms/components/form-components/FormCustomization.vue
@@ -1,16 +1,12 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-
-        Customization
-      </h3>
+  <editor-options-panel name="Customization" :already-opened="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
 
     <select-input name="theme" class="mt-4"
@@ -81,21 +77,20 @@
                          label="Auto save form response"
                          help="Will save data in browser, if user not submit the form then next time will auto prefill last entered data"
     />
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import ProTag from '../../../../common/ProTag.vue'
 
 export default {
-  components: { Collapse, ProTag },
+  components: { EditorOptionsPanel, ProTag },
   props: {
   },
   data () {
     return {
-      isMounted: false,
-      isCollapseOpen: true
+      isMounted: false
     }
   },
 

diff --git a/resources/js/components/open/forms/components/form-components/FormInformation.vue b/resources/js/components/open/forms/components/form-components/FormInformation.vue
@@ -1,13 +1,9 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
-    <template #title>
-      <h3 id="v-step-0" class="font-semibold text-lg">
-        <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M10 13.3332V9.99984M10 6.6665H10.0083M18.3333 9.99984C18.3333 14.6022 14.6024 18.3332 10 18.3332C5.39763 18.3332 1.66667 14.6022 1.66667 9.99984C1.66667 5.39746 5.39763 1.6665 10 1.6665C14.6024 1.6665 18.3333 5.39746 18.3333 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-
-        Information
-      </h3>
+  <editor-options-panel name="Information" :already-opened="true">
+    <template #icon>
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10 13.3332V9.99984M10 6.6665H10.0083M18.3333 9.99984C18.3333 14.6022 14.6024 18.3332 10 18.3332C5.39763 18.3332 1.66667 14.6022 1.66667 9.99984C1.66667 5.39746 5.39763 1.6665 10 1.6665C14.6024 1.6665 18.3333 5.39746 18.3333 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </template>
     <text-input name="title" class="mt-4"
                 :form="form"
@@ -66,17 +62,17 @@
         </div>
       </div>
     </modal>
-  </collapse>
+  </editor-options-panel>
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse.vue'
+import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import SelectInput from '../../../../forms/SelectInput.vue'
 import { mapState } from 'vuex'
 import clonedeep from 'clone-deep'
 
 export default {
-  components: { SelectInput, Collapse },
+  components: { SelectInput, EditorOptionsPanel },
   props: {},
   data () {
     return {
@@ -95,8 +91,7 @@ export default {
           name: "Closed - won\'t accept new submissions",
           value: "closed"
         }
-      ],
-      isCollapseOpen: true
+      ]
     }
   },