@myissue/vue-website-page-builder 3.0.1

package/src/Components/TipTap/TipTapInput.vue

@@ -0,0 +1,325 @@
+<script setup>
+import { Editor, useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import { computed, onBeforeMount, onMounted, ref, watch } from 'vue'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import Link from '@tiptap/extension-link'
+import DynamicModal from '@/Components/Modals/DynamicModal.vue'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+import { useMediaLibraryStore } from '@/stores/media-library'
+
+const mediaLibraryStore = useMediaLibraryStore()
+const pageBuilderStateStore = usePageBuilderStateStore()
+const showModalUrl = ref(false)
+
+// use dynamic model
+const typeModal = ref('')
+const gridColumnModal = ref(Number(1))
+const titleModal = ref('')
+const descriptionModal = ref('')
+const firstButtonModal = ref('')
+const secondButtonModal = ref(null)
+const thirdButtonModal = ref(null)
+// set dynamic modal handle functions
+const firstModalButtonFunction = ref(null)
+const secondModalButtonFunction = ref(null)
+const thirdModalButtonFunction = ref(null)
+
+const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+
+const getElement = computed(() => {
+  return pageBuilderStateStore.getElement
+})
+const textContentVueModel = ref('')
+
+const textContent = computed(() => {
+  if (editor.value) {
+    return editor.value.getHTML()
+  }
+})
+
+const getElementtextContentLength = ref(0)
+
+watch(getElement, (newVal) => {
+  const tempContainer = document.createElement('div')
+
+  if (newVal) {
+    tempContainer.innerHTML = newVal
+    const textContent = tempContainer.textContent
+    getElementtextContentLength.value = textContent.length
+  }
+})
+
+// Check if any of the child elements have the tagName "IMG"
+
+const editor = useEditor({
+  content: '',
+  extensions: [
+    StarterKit,
+    Link.configure({
+      openOnClick: false,
+    }),
+  ],
+  editorProps: {
+    attributes: {
+      class: 'prose-sm sm:prose-sm lg:prose-sm focus:outline-none',
+    },
+  },
+})
+
+// watch for changes in textContent and update store and textContentVueModel
+watch(textContent, (newValue) => {
+  if (!pageBuilder.selectedElementIsValidText()) return
+
+  if (getElement.value) {
+    pageBuilderStateStore.setTextAreaVueModel(newValue)
+
+    if (typeof newValue === 'string' && newValue !== textContentVueModel.value) {
+      pageBuilder.handleTextInput(newValue)
+    }
+  }
+})
+
+// pageBuilder.selectedElementIsValidText(newValue);
+
+const TipTapSetContent = function () {
+  if (!pageBuilder.selectedElementIsValidText()) return
+
+  if (editor.value) {
+    editor.value.commands.setContent(getElement.value.innerHTML)
+  }
+}
+
+watch(getElement, () => {
+  TipTapSetContent()
+})
+
+// Manage URL
+const urlEnteret = ref('')
+const newUpdatedExistingURL = ref('')
+const urlError = ref(null)
+
+watch(urlEnteret, (newVal) => {
+  newUpdatedExistingURL.value = newVal
+})
+const handleURL = function () {
+  urlEnteret.value = editor.value.getAttributes('link').href
+
+  showModalUrl.value = true
+  typeModal.value = 'success'
+  gridColumnModal.value = 2
+  titleModal.value = 'Enter URL'
+  descriptionModal.value = null
+  firstButtonModal.value = 'Close'
+  secondButtonModal.value = urlEnteret.value ? 'Remove url' : null
+  thirdButtonModal.value = 'Save'
+
+  // handle click
+  firstModalButtonFunction.value = function () {
+    showModalUrl.value = false
+    urlError.value = null
+  }
+
+  // handle click
+  secondModalButtonFunction.value = function () {
+    editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
+    showModalUrl.value = false
+  }
+
+  // handle click
+  thirdModalButtonFunction.value = function () {
+    const isNotValidated = validateURL()
+    if (isNotValidated) {
+      return
+    }
+    if (!isNotValidated) {
+      setEnteretURL()
+    }
+    showModalUrl.value = false
+  }
+  // end modal
+}
+
+//
+//
+const validateURL = function () {
+  // initial value
+  urlError.value = null
+
+  // url validation
+  const urlRegex = /^https?:\/\//
+  const isValidURL = ref(true)
+  isValidURL.value = urlRegex.test(newUpdatedExistingURL.value)
+
+  // cancelled
+  if (isValidURL.value === false) {
+    urlError.value =
+      "The provided URL is invalid. Please ensure that it begins with 'https://' for proper formatting and security."
+    return true
+  }
+
+  return false
+}
+const setEnteretURL = function () {
+  // update link
+  editor.value
+    .chain()
+    .focus()
+    .extendMarkRange('link')
+    .setLink({ href: newUpdatedExistingURL.value })
+    .run()
+}
+
+onBeforeMount(() => {
+  editor.value?.destroy()
+})
+
+onMounted(() => {
+  TipTapSetContent()
+})
+</script>
+<template>
+  <DynamicModal
+    :show="showModalUrl"
+    :type="typeModal"
+    :gridColumnAmount="gridColumnModal"
+    :title="titleModal"
+    :description="descriptionModal"
+    :firstButtonText="firstButtonModal"
+    :secondButtonText="secondButtonModal"
+    :thirdButtonText="thirdButtonModal"
+    @firstModalButtonFunction="firstModalButtonFunction"
+    @secondModalButtonFunction="secondModalButtonFunction"
+    @thirdModalButtonFunction="thirdModalButtonFunction"
+  >
+    <header></header>
+    <main>
+      <div class="myInputGroup">
+        <label class="myPrimaryInputLabel" for="roles"><span>Enter URL</span></label
+        ><input v-model="urlEnteret" class="myPrimaryInput mt-1" type="url" placeholder="url" />
+        <div v-if="urlError" class="min-h-[2.5rem] flex items-center justify-start">
+          <p class="myPrimaryInputError mt-2 mb-0 py-0 self-start">
+            {{ urlError }}
+          </p>
+        </div>
+      </div>
+    </main>
+  </DynamicModal>
+
+  <div class="blockease-linear duration-200 block ease-linear">
+    <div v-if="pageBuilder.selectedElementIsValidText() && editor">
+      <div class="relative rounded-lg">
+        <div
+          class="flex justify-between myPrimaryGap items-center divide-x divide-gray-200 py-4 px-4 overflow-x-auto border-b border-gray-20"
+        >
+          <div class="flex items-center 0 divide-x divide-gray-200">
+            <div class="px-2 flex items-center justify-start gap-2">
+              <button
+                @click="editor.chain().focus().setHardBreak().run()"
+                type="button"
+                class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+              >
+                <span class="material-symbols-outlined"> keyboard_return </span>
+                <span>Line break</span>
+              </button>
+            </div>
+
+            <div class="px-2 flex items-center justify-start gap-2">
+              <button
+                @click="editor.chain().focus().toggleBold().run()"
+                type="button"
+                class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                :class="{
+                  'bg-myPrimaryLinkColor text-white': editor.isActive('bold'),
+                }"
+              >
+                <span class="material-symbols-outlined"> format_bold </span>
+                <span>Bold</span>
+              </button>
+            </div>
+
+            <div class="px-2 flex items-center justify-start gap-2">
+              <button
+                @click="handleURL"
+                type="button"
+                class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                :class="{
+                  'bg-myPrimaryLinkColor text-white': editor.isActive('link'),
+                }"
+              >
+                <span class="material-symbols-outlined"> link </span>
+                <span>Link</span>
+              </button>
+            </div>
+
+            <div class="px-2 flex items-center justify-start gap-2">
+              <button
+                @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+                type="button"
+                class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                :class="{
+                  'bg-myPrimaryLinkColor text-white': editor.isActive('heading', {
+                    level: 2,
+                  }),
+                }"
+              >
+                <span class="material-symbols-outlined"> titlecase </span>
+                <span>Header 2</span>
+              </button>
+            </div>
+
+            <div class="px-2 flex items-center justify-start gap-2">
+              <button
+                @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+                type="button"
+                class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                :class="{
+                  'bg-myPrimaryLinkColor text-white': editor.isActive('heading', {
+                    level: 3,
+                  }),
+                }"
+              >
+                <span class="material-symbols-outlined"> titlecase </span>
+                <span>Header 3</span>
+              </button>
+            </div>
+
+            <div class="px-2 flex items-center justify-start gap-2">
+              <button
+                @click="editor.chain().focus().toggleBulletList().run()"
+                type="button"
+                class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                :class="{
+                  'bg-myPrimaryLinkColor text-white': editor.isActive('bulletList'),
+                }"
+              >
+                <span class="material-symbols-outlined"> list </span>
+                <span>List</span>
+              </button>
+            </div>
+          </div>
+          <div>
+            <div>
+              <div class="px-2 flex items-center justify-start gap-2">
+                <button
+                  @click="pageBuilderStateStore.setShowModalTipTap(false)"
+                  type="button"
+                  class="text-[12.5px] gap-2 text-nowrap pl-2 pr-3 w-full h-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                >
+                  <span class="material-symbols-outlined"> Save </span>
+                  <span>Save</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <editor-content
+          id="page-builder-editor"
+          :editor="editor"
+          class="px-4 pt-6 pb-12 bg-white rounded-lg lg:min-h-[20rem] lg:max-h-[30rem] md:min-h-[20rem] md:max-h-[20rem] min-h-[20rem] max-h-[20rem] overflow-y-auto"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/src/PageBuilder/PageBuilder.vue

@@ -0,0 +1,347 @@
+<script setup>
+import { onMounted, computed, ref, watch, provide } from 'vue'
+import { createPinia } from 'pinia'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import PageBuilderPreviewModal from '@/Components/Modals/PageBuilderPreviewModal.vue'
+import Preview from '@/PageBuilder/Preview.vue'
+import ComponentTopMenu from '@/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue'
+import EditGetElement from '@/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue'
+import SearchComponents from '@/Components/Search/SearchComponents.vue'
+import OptionsDropdown from '@/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue'
+import RightSidebarEditor from '@/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+import { useMediaLibraryStore } from '@/stores/media-library'
+
+// Create internal Pinia instance for this component if none exists
+let internalPinia = null
+let mediaLibraryStore = null
+let pageBuilderStateStore = null
+let pageBuilder = null
+
+try {
+  // Try to use existing Pinia first
+  mediaLibraryStore = useMediaLibraryStore()
+  pageBuilderStateStore = usePageBuilderStateStore()
+} catch (error) {
+  // If no Pinia exists, create our own internal instance
+  internalPinia = createPinia()
+  mediaLibraryStore = useMediaLibraryStore(internalPinia)
+  pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
+}
+
+// Initialize PageBuilder with stores
+pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+
+// Provide the stores for child components if using internal Pinia
+if (internalPinia) {
+  provide('pageBuilderStateStore', pageBuilderStateStore)
+  provide('mediaLibraryStore', mediaLibraryStore)
+}
+
+const getMenuRight = computed(() => {
+  return pageBuilderStateStore.getMenuRight
+})
+const previewCurrentDesign = function () {
+  pageBuilder.previewCurrentDesign()
+}
+const openPageBuilderPreviewModal = ref(false)
+const firstPageBuilderPreviewModalButton = ref(null)
+
+const handlePageBuilderPreview = function () {
+  previewCurrentDesign()
+
+  openPageBuilderPreviewModal.value = true
+  // handle click
+  firstPageBuilderPreviewModalButton.value = function () {
+    openPageBuilderPreviewModal.value = false
+  }
+  // end modal
+}
+
+const showModalAddComponent = ref(false)
+const titleModalAddComponent = ref('')
+const firstButtonTextSearchComponents = ref('')
+const firstModalButtonSearchComponentsFunction = ref(null)
+
+const handleAddComponent = function () {
+  pageBuilderStateStore.setComponent(null)
+
+  //
+  titleModalAddComponent.value = 'Add Components to Page'
+  firstButtonTextSearchComponents.value = 'Close'
+  showModalAddComponent.value = true
+
+  firstModalButtonSearchComponentsFunction.value = function () {
+    // handle show modal for unique content
+    showModalAddComponent.value = false
+  }
+
+  // end modal
+}
+
+const getComponents = computed(() => {
+  return pageBuilderStateStore.getComponents
+})
+const getComponent = computed(() => {
+  return pageBuilderStateStore.getComponent
+})
+
+const getElement = computed(() => {
+  return pageBuilderStateStore.getElement
+})
+
+const getElementAttributes = computed(() => {
+  if (!getElement.value || !(getElement.value instanceof HTMLElement)) {
+    return new Object()
+  }
+
+  // Extract the attributes you want to watch
+  const attributesToWatch = {
+    src: getElement.value.getAttribute('src'),
+    href: getElement.value.getAttribute('href'),
+    style: getElement.value.getAttribute('style'),
+    class: getElement.value.getAttribute('class'),
+    dataImage: getElement.value.getAttribute('data-image'),
+  }
+
+  return attributesToWatch
+})
+
+watch(getElementAttributes, (newAttributes, oldAttributes) => {
+  // Check if any of the specified attributes have changed
+  if (
+    newAttributes?.src !== oldAttributes?.src ||
+    newAttributes?.href !== oldAttributes?.href ||
+    newAttributes?.style !== oldAttributes?.style ||
+    newAttributes?.class !== oldAttributes?.class ||
+    newAttributes?.dataImage !== oldAttributes?.dataImage
+  ) {
+    // Trigger your method when any of the specified attributes change
+    pageBuilder.handlePageBuilderMethods()
+    pageBuilder.setEventListenersForElements()
+  }
+})
+
+const handleSelectComponent = function (componentObject) {
+  pageBuilderStateStore.setComponent(componentObject)
+}
+
+const draggableZone = ref(null)
+
+onMounted(async () => {
+  pageBuilder.setEventListenersForElements()
+})
+</script>
+
+<template>
+  <div>
+    <SearchComponents
+      v-if="showModalAddComponent"
+      :show="showModalAddComponent"
+      :firstButtonText="firstButtonTextSearchComponents"
+      :title="titleModalAddComponent"
+      @firstModalButtonSearchComponentsFunction="firstModalButtonSearchComponentsFunction"
+    ></SearchComponents>
+    <PageBuilderPreviewModal
+      :show="openPageBuilderPreviewModal"
+      @firstPageBuilderPreviewModalButton="firstPageBuilderPreviewModalButton"
+    >
+      <Preview></Preview>
+    </PageBuilderPreviewModal>
+
+    <div class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2">
+      <div class="relative h-full flex">
+        <div
+          @click.self="pageBuilderStateStore.setComponent(null)"
+          class="min-w-[3.5rem] pt-6 pb-2 my-2 mx-2 bg-myPrimaryLightGrayColor rounded-full shadow"
+        >
+          <div class="mx-2 flex flex-col myPrimaryGap">
+            <div class="flex gap-2 items-center justify-center">
+              <button
+                type="button"
+                @click="
+                  () => {
+                    pageBuilderStateStore.setComponentArrayAddMethod('unshift')
+                    handleAddComponent()
+                  }
+                "
+                class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+              >
+                <span class="myMediumIcon material-symbols-outlined"> add </span>
+              </button>
+            </div>
+            <div @click.self="pageBuilderStateStore.setComponent(null)">
+              <ComponentTopMenu v-if="getElement"></ComponentTopMenu>
+            </div>
+          </div>
+        </div>
+        <main class="flex flex-col h-full grow rounded-2xl duration-300 shadow-2xl">
+          <div
+            class="flex items-center justify-between primary-gap rounded-t-2xl bg-myPrimaryLightGrayColor"
+          >
+            <div
+              @click.self="pageBuilderStateStore.setComponent(null)"
+              class="w-4/12 flex justify-start items-center py-2 pl-2 h-full"
+            >
+              <div class="flex gap-2">
+                <span class="w-2 h-2 rounded-full bg-red-400"></span>
+                <span class="w-2 h-2 rounded-full bg-yellow-400"></span>
+                <span class="w-2 h-2 rounded-full bg-green-400"></span>
+              </div>
+            </div>
+
+            <div
+              @click.self="pageBuilderStateStore.setComponent(null)"
+              class="w-4/12 flex justify-center py-2"
+            >
+              <OptionsDropdown @previewCurrentDesign="previewCurrentDesign"></OptionsDropdown>
+            </div>
+
+            <div
+              @click.self="pageBuilderStateStore.setComponent(null)"
+              class="w-4/12 flex justify-end py-2 pr-2"
+            >
+              <div class="flex items-center justify-center gap-4">
+                <button
+                  type="button"
+                  @click="
+                    () => {
+                      pageBuilderStateStore.setComponentArrayAddMethod('unshift')
+                      handleAddComponent()
+                    }
+                  "
+                >
+                  <div class="flex items-center justify-center gap-2">
+                    <span class="lg:block hidden"> Add new Component - v.1.0.6 </span>
+
+                    <span
+                      class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                    >
+                      <span class="myMediumIcon material-symbols-outlined"> add </span>
+                    </span>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  @click="
+                    () => {
+                      pageBuilderStateStore.setMenuRight(false)
+                      pageBuilderStateStore.setElement(null)
+                      pageBuilderStateStore.setComponent(null)
+                      handlePageBuilderPreview()
+                    }
+                  "
+                  class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                >
+                  <span class="material-symbols-outlined"> visibility </span>
+                </button>
+
+                <button
+                  type="button"
+                  v-if="getMenuRight === false"
+                  @click="pageBuilderStateStore.setMenuRight(true)"
+                  class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                >
+                  <span class="material-symbols-outlined"> gesture </span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <EditGetElement></EditGetElement>
+          <div
+            @click="pageBuilderStateStore.setComponent(null)"
+            id="contains-pagebuilder"
+            class="pl-4 pr-4 pb-4 overflow-y-auto h-screen pt-1"
+          >
+            <div id="pagebuilder">
+              <div ref="draggableZone">
+                <!-- Added Components to DOM # start -->
+                <div
+                  v-for="component in Array.isArray(getComponents) && getComponents"
+                  :key="component"
+                  id="page-builder-editor-editable-area"
+                  class="bg-white grow"
+                >
+                  <div @mouseup="handleSelectComponent(component)" class="relative group">
+                    <div v-html="component.html_code"></div>
+                  </div>
+                </div>
+              </div>
+              <!-- Added Components to DOM # end -->
+
+              <!-- Add Component # start -->
+              <div
+                class="rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 my-12 mx-8"
+              >
+                <h3 class="mt-2 text-sm font-medium text-gray-900">Add Components</h3>
+                <p class="mt-1 text-sm text-gray-500">
+                  Get started by adding components using the drag & drop Page Builder.
+                </p>
+                <div class="mt-6 flex items-center gap-2 justify-center">
+                  <button
+                    @click="
+                      () => {
+                        pageBuilderStateStore.setComponentArrayAddMethod('push')
+                        handleAddComponent()
+                      }
+                    "
+                    type="button"
+                    class="myPrimaryButton flex items-center gap-2 justify-center"
+                  >
+                    <span class="myMediumIcon material-symbols-outlined"> add </span>
+                    Add component
+                  </button>
+                </div>
+              </div>
+              <!-- Add Component # end -->
+            </div>
+          </div>
+          <!-- Add Component # end -->
+        </main>
+
+        <aside
+          aria-label="Menu"
+          :class="{ 'w-0': !getMenuRight, 'w-80 ml-4': getMenuRight }"
+          class="h-full duration-300 z-20 flex-shrink-0 overflow-hidden shadow-2xl rounded-l-2xl bg-white"
+        >
+          <RightSidebarEditor @closeEditor="pageBuilderStateStore.setMenuRight(false)">
+          </RightSidebarEditor>
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+#pagebuilder a {
+  cursor: default;
+}
+
+#pagebuilder [element] {
+  outline: rgba(255, 255, 255, 0) dashed 3px !important;
+  outline-offset: -3px !important;
+}
+#pagebuilder [hovered] {
+  outline: rgb(0, 140, 14, 1) dashed 3px !important;
+  outline-offset: -3px !important;
+}
+
+#pagebuilder [selected] {
+  position: relative;
+
+  outline: rgb(185, 16, 16) dashed 3px !important;
+  outline-offset: -3px !important;
+}
+
+/* sortable */
+
+.sortable-ghost {
+  display: flex;
+  justify-content: center;
+}
+
+.sortable-ghost > * {
+  width: 100%;
+}
+</style>

package/src/PageBuilder/Preview.vue

@@ -0,0 +1,24 @@
+<template>
+    <div
+        class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2"
+    >
+        <div id="page-builder-editor">
+            <div class="" v-html="htmlPage"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+// router
+// const router = useRouter();
+// preview content
+const htmlPage = ref("");
+// get preview item from local storage
+htmlPage.value = localStorage.getItem("preview");
+// parse
+htmlPage.value = JSON.parse(htmlPage.value);
+// join
+htmlPage.value = htmlPage.value.join("");
+</script>