@myissue/vue-website-page-builder 3.3.98 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.98",
+  "version": "3.4.1",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue

@@ -46,11 +46,11 @@ watch(
       >
         <ListboxButton
           v-if="globalPageLayout"
-          class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor"
+          class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor pbx-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium"
         >
           <div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
             <div
-              class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-800 pbx-rounded-sm"
+              class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-600 pbx-rounded-sm pbx-bg-none pbx-border-solid"
               :class="`pbx-bg-${backgroundColor?.replace('pbx-bg-', '')}`"
             ></div>
             <div>{{ translate('Background Color') }}</div>
@@ -61,7 +61,7 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">
@@ -83,7 +83,7 @@ watch(
         leave-to-class="pbx-opacity-0"
       >
         <ListboxOptions
-          class="pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
+          class="pbx-headless-dropdown pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
         >
           <ListboxOption
             as="template"

package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue

@@ -268,7 +268,7 @@ const handleModalIframeSrc = function () {
           <button
             @click="handleModalIframeSrc"
             type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
           >
             <span class="material-symbols-outlined"> play_circle </span>
           </button>
@@ -285,7 +285,7 @@ const handleModalIframeSrc = function () {
           <button
             @click="handleModalPreviewTiptap"
             type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
           >
             <span class="material-symbols-outlined"> edit </span>
           </button>
@@ -305,7 +305,7 @@ const handleModalIframeSrc = function () {
           <button
             @click="handleAddImage"
             type="button"
-            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+            class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
           >
             <span class="material-symbols-outlined"> add_photo_alternate </span>
           </button>
@@ -327,7 +327,7 @@ const handleModalIframeSrc = function () {
         <button
           @click="pageBuilderService.deleteElementFromDOM"
           type="button"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
         >
           <span class="material-symbols-outlined"> delete </span>
         </button>
@@ -335,7 +335,7 @@ const handleModalIframeSrc = function () {
 
       <div
         v-if="getElement && getComponent"
-        class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+        class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
         @click="pageBuilderService.clearHtmlSelection()"
       >
         <span class="material-symbols-outlined"> close</span>

package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue

@@ -46,11 +46,11 @@ watch(
       >
         <ListboxButton
           v-if="globalPageLayout"
-          class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor"
+          class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor pbx-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium"
         >
           <div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
             <div
-              class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-800 pbx-rounded-sm"
+              class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-600 pbx-rounded-sm pbx-bg-none pbx-border-solid"
               :class="`pbx-bg-${textColor?.replace('pbx-text-', '')}`"
             ></div>
             <div>
@@ -63,7 +63,7 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">
@@ -85,7 +85,7 @@ watch(
         leave-to-class="pbx-opacity-0"
       >
         <ListboxOptions
-          class="pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
+          class="pbx-headless-dropdown pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
         >
           <ListboxOption
             as="template"

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -73,13 +73,68 @@ function onScroll() {
   }
 }
 
-// generate HTML
 const generateHTML = function (filename, HTML) {
+  // Extract existing styles from the page
+  const existingStyles = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
+    .map((style) => {
+      if (style.tagName === 'STYLE') {
+        return style.outerHTML // Inline styles
+      } else if (style.tagName === 'LINK') {
+        return `<link rel="stylesheet" href="${style.href}">` // External stylesheets
+      }
+      return ''
+    })
+    .join('\n')
+
+  // Add your custom CSS
+  const customCSS = `
+      <style>
+        #pagebuilder blockquote,
+        #pagebuilder dl,
+        #pagebuilder dd,
+        #pagebuilder pre,
+        #pagebuilder hr,
+        #pagebuilder figure,
+        #pagebuilder p,
+        #pagebuilder h1,
+        #pagebuilder h2,
+        #pagebuilder h3,
+        #pagebuilder h4,
+        #pagebuilder h5,
+        #pagebuilder h6,
+        #pagebuilder ul,
+        #pagebuilder ol,
+        #pagebuilder li {
+          margin: 0;
+          padding: 0; /* Often useful for ul/ol too */
+        }
+      </style>
+    `
+
+  // Combine existing styles and custom CSS
+  const css = `${existingStyles}\n${customCSS}`
+
+  // Generate the full HTML
+  const fullHTML = `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Downloaded HTML</title>
+            ${css}
+        </head>
+        <body>
+            <div id="pagebuilder" class="pbx-font-sans pbx-text-black">
+                ${HTML}
+            </div>
+        </body>
+        </html>
+    `
+
+  // Create and trigger the download
   const element = document.createElement('a')
-  element.setAttribute(
-    'href',
-    'data:text/html;charset=utf-8,' + encodeURIComponent(fullHTMLContent(HTML)),
-  )
+  element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(fullHTML))
   element.setAttribute('download', filename)
 
   element.style.display = 'none'
@@ -96,7 +151,21 @@ const handleDownloadHTML = function () {
     return
   }
 
-  const html = extractCleanHTMLFromPageBuilder(pagebuilder)
+  // Extract clean HTML
+  let html = extractCleanHTMLFromPageBuilder(pagebuilder)
+
+  // Create a temporary DOM element to manipulate the HTML
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = html
+
+  // Remove 'hovered' and 'selected' attributes
+  tempDiv.querySelectorAll('[hovered], [selected]').forEach((el) => {
+    el.removeAttribute('hovered')
+    el.removeAttribute('selected')
+  })
+
+  // Get the cleaned HTML back
+  html = tempDiv.innerHTML
 
   generateHTML('downloaded_html.html', html)
 }

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -97,7 +97,7 @@ const openHTMLSettings = function () {
       <div class="pbx-mr-2">
         <!-- User No image Start-->
         <div
-          class="pbx-flex pbx-items-center pbx-myPrimaryTag pbx-whitespace-nowrap pbx-py-0"
+          class="pbx-flex pbx-items-center pbx-myPrimaryTag pbx-whitespace-nowrap pbx-py-0 pbx-gap-2"
           v-if="
             getPageBuilderConfig &&
             getPageBuilderConfig.userForPageBuilder &&

package/src/Components/PageBuilder/UndoRedo/UndoRedo.vue

@@ -51,18 +51,20 @@ const handleRedo = async function () {
     class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-w-full gap-1"
   >
     <!-- Undo Start -->
-    <button @click="handleUndo" type="button" :disabled="!canUndo">
-      <div
-        class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
-        :class="[
-          canUndo
-            ? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
-            : 'pbx-cursor-not-allowed pbx-bg-opacity-20  hover:pbx-bg-gray-200',
-        ]"
-      >
-        <span class="material-symbols-outlined"> undo </span>
-      </div>
-    </button>
+
+    <div
+      @click="handleUndo"
+      type="button"
+      class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
+      :class="[
+        canUndo
+          ? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
+          : 'pbx-cursor-not-allowed pbx-bg-opacity-20  hover:pbx-bg-gray-200',
+      ]"
+    >
+      <span class="material-symbols-outlined"> undo </span>
+    </div>
+
     <!-- Undo End -->
     <div
       class="pbx-text-xs pbx-text-gray-600 pbx-mx-2 pbx-py-3 pbx-px-2 pbx-border-solid pbx-border pbx-border-gray-200 pbx-rounded-full"
@@ -70,18 +72,19 @@ const handleRedo = async function () {
       {{ historyIndex + 1 }}/{{ historyLength }}
     </div>
     <!-- Redo Start -->
-    <button @click="handleRedo" type="button" :disabled="!canRedo">
-      <div
-        class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
-        :class="[
-          canRedo
-            ? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
-            : 'pbx-cursor-not-allowed pbx-bg-opacity-20  hover:pbx-bg-gray-200',
-        ]"
-      >
-        <span class="material-symbols-outlined"> redo </span>
-      </div>
-    </button>
+
+    <div
+      @click="handleRedo"
+      class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
+      :class="[
+        canRedo
+          ? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
+          : 'pbx-cursor-not-allowed pbx-bg-opacity-20  hover:pbx-bg-gray-200',
+      ]"
+    >
+      <span class="material-symbols-outlined"> redo </span>
+    </div>
+
     <!-- Redo End -->
   </div>
 </template>

package/src/Components/TipTap/TipTapInput.vue

@@ -224,7 +224,7 @@ onMounted(() => {
       <div v-if="pageBuilderService.isSelectedElementValidText() && editor">
         <div class="pbx-relative pbx-rounded-lg">
           <div
-            class="pbx-flex pbx-justify-between pbx-myPrimaryGap pbx-items-center pbx-py-4 pbx-px-4 pbx-overflow-x-auto pbx-border-solid pbx-border-b pbx-border-gray-200"
+            class="pbx-flex pbx-justify-between pbx-myPrimaryGap pbx-items-center pbx-pb-2 pbx-mb-2 pbx-px-4 pbx-overflow-x-auto pbx-border-0 pbx-border-b pbx-border-solid pbx-border-gray-200"
           >
             <div>
               <div>

package/src/PageBuilder/PageBuilder.vue

@@ -761,7 +761,7 @@ onMounted(async () => {
             >
               <select
                 id="pbx-lang"
-                class="pbx-myPrimarySelect pbx-min-w-20 pbx-max-w-2pbx-min-w-20 pbx-w-max"
+                class="pbx-myPrimarySelect pbx-min-w-24"
                 v-model="languageSelction"
               >
                 <template
@@ -879,11 +879,11 @@ onMounted(async () => {
 
         <div id="pagebuilder" class="pbx-text-black pbx-font-sans">
           <template v-for="component in getComponents" :key="component.id">
-            <section
+            <div
               v-if="component.html_code"
               v-html="component.html_code"
               @mouseup="handleSelectComponent(component)"
-            ></section>
+            ></div>
           </template>
         </div>
       </main>
@@ -1003,7 +1003,7 @@ onMounted(async () => {
   box-shadow: none !important;
   background: #fff;
   min-height: 25rem;
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid #f1f1f1;
   padding: 0px 0px 10px 16px;
   margin-bottom: 20px;
   padding-bottom: 100px;

package/src/css/style.css

@@ -314,11 +314,8 @@
     @apply pbx-my-0 pbx-block pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor pbx-text-left pbx-mb-2;
   }
 
-  .pbx-myPrimaryFormFocus {
-    @apply focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-ring-offset-2 focus:pbx-border focus:pbx-border-gray-200;
-  }
   .pbx-myPrimaryInput {
-    @apply pbx-block pbx-pr-8 pbx-text-left pbx-bg-white pbx-w-auto sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-300 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none pbx-myPrimaryFormFocus pbx-h-full pbx-border-solid;
+    @apply pbx-block pbx-pr-8 pbx-text-left pbx-bg-white pbx-w-auto sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-300 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none pbx-h-full pbx-border-solid pbx-font-sans;
   }
   .pbx-myPrimaryInputNoBorder {
     @apply pbx-myPrimaryInput placeholder:pbx-accent-gray-300 focus:pbx-bg-none pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border-none focus:pbx-outline-none focus:pbx-ring-0 focus:pbx-ring-offset-0 focus:pbx-border-none pbx-shadow-none;
@@ -358,20 +355,6 @@
   }
 }
 
-#page-builder-editor ol,
-#page-builder-editor-editable-area ol,
-#page-builder-editor ul,
-#page-builder-editor-editable-area ul {
-  list-style: disc !important;
-  padding: 0 0 0 1rem;
-}
-
-#page-builder-editor li,
-#page-builder-editor-editable-area li {
-  line-height: 1.2;
-  margin-left: 1em; /* Adjust this value as needed */
-}
-
 #pbxEditToolbar {
   opacity: 0;
   pointer-events: none;
@@ -471,14 +454,6 @@
   font-weight: 500;
 }
 
-#page-builder-editor ol,
-#pagebuilder ol,
-#page-builder-editor ul,
-#pagebuilder ul {
-  list-style: disc !important;
-  padding: 0rem;
-}
-
 .pbx-reorder-highlight {
   animation: pbx-reorder-flash 0.4s ease-in-out;
 }
@@ -500,3 +475,74 @@
 
 .pbx-sibling-highlight {
 }
+
+.pbx-myPrimaryInput,
+.pbx-myPrimarySelect {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  padding-right: 1rem;
+}
+
+.pbx-myPrimaryInput:focus,
+.pbx-myPrimarySelect:focus {
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  /* Use the hex color with opacity variable */
+  --tw-ring-color: rgba(22, 163, 74, var(--tw-ring-opacity, 1));
+
+  --tw-ring-shadow: 0 0 0 4px var(--tw-ring-color);
+
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: white;
+  --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
+  border: 1px #dee6f0 solid;
+}
+
+#pagebuilder blockquote,
+#pagebuilder dl,
+#pagebuilder dd,
+#pagebuilder pre,
+#pagebuilder hr,
+#pagebuilder figure,
+#pagebuilder p,
+#pagebuilder h1,
+#pagebuilder h2,
+#pagebuilder h3,
+#pagebuilder h4,
+#pagebuilder h5,
+#pagebuilder h6,
+#pagebuilder ul,
+#pagebuilder ol,
+#pagebuilder li {
+  margin: 0;
+}
+
+#page-builder-editor ol,
+#pagebuilder ol,
+#page-builder-editor ul,
+#pagebuilder ul {
+  list-style: disc !important;
+  padding: 1rem 0 0 1rem;
+  margin-left: 1em;
+  line-height: 1.2;
+}
+
+#page-builder-editor ol,
+#page-builder-editor-editable-area ol,
+#page-builder-editor ul,
+#page-builder-editor-editable-area ul {
+  list-style: disc !important;
+  padding: 1rem 0 0 1rem;
+  line-height: 1.2;
+}
+
+.pbx-headless-dropdown {
+  list-style: none;
+  padding: 0;
+}

package/src/tests/DefaultComponents/DefaultBuilderComponents.vue

@@ -163,7 +163,7 @@ const getSvgPreview = (title: string) => {
             @click="handleDropComponent(convertToComponentObject(comp))"
           >
             <div
-              class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+              class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
             >
               <!-- Use SVG preview instead of external images -->
               <div