Merge pull request #40 from Kholid060/dev

Add HTML Section

Author: Kholid060

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inspect-css",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "scripts": {
     "build": "vue-tsc --noEmit && vite build",
@@ -27,6 +27,7 @@
     "@codemirror/autocomplete": "^6.12.0",
     "@codemirror/commands": "^6.3.3",
     "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/lang-html": "^6.4.8",
     "@codemirror/language": "^6.10.0",
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.23.0",

src/pages/components/ui/UiPopover.vue

@@ -0,0 +1,29 @@
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <PopoverTrigger as-child>
+      <slot name="trigger" />
+    </PopoverTrigger>
+    <PopoverContent
+      :class="[
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      ]"
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverRoot>
+</template>
+<script setup lang="ts">
+import {
+  PopoverRoot,
+  useForwardPropsEmits,
+  PopoverTrigger,
+  PopoverContent,
+} from 'radix-vue';
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue';
+
+const props = defineProps<PopoverRootProps & { class?: string }>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>

src/pages/content/ui/app/AppElementDetail.vue

@@ -5,19 +5,13 @@
     class="fixed top-0 left-0 bg-background rounded-xl text-foreground border"
     :style="{ zIndex: CONTENT_ZINDEX.content, width: CONTAINER_WIDTH + 'px' }"
   >
-    <div
-      class="text-center py-1 bg-muted/25 cursor-move text-muted-foreground px-4 flex items-center transition-colors w-full rounded-t-lg border-b"
-      @pointerdown.self="startDragging"
-    >
-      <GripHorizontalIcon class="h-5 w-5 text-muted-foreground opacity-50" />
-      <div class="flex-grow"></div>
-      <button
-        class="hover p-1 rounded-sm hover:bg-muted/50 hover:text-foreground transition"
-        @click="closeWindow"
-      >
-        <XIcon class="h-5 w-5" />
-      </button>
-    </div>
+    <DetailHeader
+      :container-el="containerRef"
+      :last-position="lastPosition"
+      :selected-el="selectedEl"
+      @close-window="closeWindow"
+      @update-window-pos="updateWindowPosition"
+    />
     <div class="px-4 pt-4">
       <UiElementSelector :selector="elProperties.selector" />
       <div class="flex items-center mt-0.5 gap-1 text-sm">
@@ -47,7 +41,7 @@
       </button>
     </div>
     <div style="max-height: calc(100vh - 200px)" class="overflow-auto p-4">
-      <KeepAlive>
+      <KeepAlive include="detail-style,DetailStyle">
         <DetailStyle
           v-if="state.activeTab === 'style' && elStyleData"
           :el-selector="elSelector"
@@ -60,6 +54,10 @@
           v-else-if="state.activeTab === 'attributes' && selectedEl"
           :element="selectedEl"
         />
+        <DetailElementHTML
+          v-else-if="state.activeTab === 'html' && selectedEl"
+          :element="selectedEl"
+        />
       </KeepAlive>
     </div>
   </div>
@@ -82,20 +80,17 @@ import {
   BrushIcon,
   CaseSensitiveIcon,
   PencilRuler,
-  XIcon,
-  GripHorizontalIcon,
+  Code2Icon,
 } from 'lucide-vue-next';
-import {
-  CONTENT_ZINDEX,
-  EL_ATTR_NAME,
-  SESSION_STORAGE_KEY,
-} from '@src/utils/constant';
+import { CONTENT_ZINDEX, SESSION_STORAGE_KEY } from '@src/utils/constant';
 import getElProperties, {
   ElementProperties,
 } from '@root/src/utils/getElProperties';
 import DetailStyle from './detail/DetailStyle.vue';
+import DetailElementHTML from './detail/DetailElementHTML.vue';
 import UiElementSelector from '@root/src/pages/components/ui/UiElementSelector.vue';
 import { finder } from '@medv/finder';
+import DetailHeader from './detail/DetailHeader.vue';
 import DetailAttributes from './detail/DetailAttributes.vue';
 import { debounce, parseJSON } from '@root/src/utils/helper';
 import { StyleDataItem, useAppProvider } from '../app-plugin';
@@ -117,6 +112,7 @@ const cssRulesUtils = new CSSRulesUtils();
 const tabItems = [
   { name: 'Style', id: 'style', icon: BrushIcon },
   { name: 'Attributes', id: 'attributes', icon: PencilRuler },
+  { name: 'HTML', id: 'html', icon: Code2Icon },
 ];
 
 const appProvider = useAppProvider();
@@ -177,45 +173,6 @@ function updateWindowPosition(x: number, y: number) {
   lastPosition = { x, y };
   containerRef.value.style.transform = `translate(${x}px, ${y}px)`;
 }
-function startDragging(pointerDownEvent: PointerEvent) {
-  if (!containerRef.value) return;
-
-  const containerRect = containerRef.value.getBoundingClientRect();
-
-  const offsetY = pointerDownEvent.clientY - containerRect.top;
-  const offsetX = pointerDownEvent.clientX - containerRect.left;
-
-  document.body.setAttribute(EL_ATTR_NAME.dragging, '');
-
-  function pointerMoveHandler({ clientX, clientY }: PointerEvent) {
-    let x = clientX - offsetX;
-    let y = clientY - offsetY;
-
-    if (x < 0) x = 0;
-    else if (x + containerRect.width > window.innerWidth)
-      x = window.innerWidth - containerRect.width;
-
-    if (y < 0) y = 0;
-    else if (y + containerRect.height > window.innerHeight)
-      y = window.innerHeight - containerRect.height;
-
-    updateWindowPosition(x, y);
-  }
-
-  document.addEventListener('pointermove', pointerMoveHandler);
-  document.addEventListener(
-    'pointerup',
-    () => {
-      sessionStorage.setItem(
-        SESSION_STORAGE_KEY.elPropsPosition,
-        JSON.stringify(lastPosition),
-      );
-      document.body.removeAttribute(EL_ATTR_NAME.dragging);
-      document.removeEventListener('pointermove', pointerMoveHandler);
-    },
-    { once: true },
-  );
-}
 function onSelectElement({
   el,
   properties,

src/pages/content/ui/app/detail/DetailAttributes.vue

@@ -13,7 +13,7 @@
     <div
       v-for="(attr, index) in attrs"
       :key="index"
-      class="bg-input/30 rounded-md text-sm focus-within:ring-primary focus-within:ring-2 highlight-white/5 relative"
+      class="bg-input/30 rounded-md text-sm border focus-within:ring-primary focus-within:ring-2 highlight-white/5 relative"
     >
       <div
         class="bg-input/50 rounded-t-md border-b flex items-center gap-2 pr-3"
@@ -41,6 +41,9 @@
             <FolderOpenIcon class="h-5 w-5" />
           </UiButton>
         </UiTooltip>
+        <UiTooltip v-if="attr.isInvalid" label="Invalid attribute name">
+          <AlertTriangleIcon class="h-5 w-5 text-red-400 mr-1" />
+        </UiTooltip>
         <button class="text-muted-foreground" @click="deleteAttribute(index)">
           <TrashIcon class="h-5 w-5" />
         </button>
@@ -72,12 +75,18 @@ import UiButton from '@root/src/pages/components/ui/UiButton.vue';
 import UiTooltip from '@root/src/pages/components/ui/UiTooltip.vue';
 import { EL_ATTR_NAME } from '@root/src/utils/constant';
 import { debounce } from '@root/src/utils/helper';
-import { PlusIcon, TrashIcon, FolderOpenIcon } from 'lucide-vue-next';
+import {
+  PlusIcon,
+  TrashIcon,
+  FolderOpenIcon,
+  AlertTriangleIcon,
+} from 'lucide-vue-next';
 import { ref, shallowRef, triggerRef, watch } from 'vue';
 
 interface AttrItem {
   name: string;
   value: string;
+  isInvalid: boolean;
 }
 
 const props = defineProps<{
@@ -106,30 +115,42 @@ const updateAttribute = debounce(
     const attr = attrs.value[index];
     if (!attr) return;
 
-    if (type === 'name') {
-      if (!value.trim()) return;
-
-      props.element.removeAttribute(attr.name);
-      props.element.setAttribute(value, attr.value);
-    } else {
-      props.element.setAttribute(attr.name, value);
+    try {
+      attr[type] = value;
+
+      if (type === 'name') {
+        if (!value.trim()) return;
+
+        props.element.removeAttribute(attr.name);
+        props.element.setAttribute(value, attr.value);
+      } else {
+        props.element.setAttribute(attr.name, value);
+      }
+
+      if (attr.isInvalid) {
+        trigger = true;
+        attr.isInvalid = false;
+      }
+    } catch (error) {
+      trigger = true;
+      attr.isInvalid = true;
+    } finally {
+      if (trigger) triggerRef(attrs);
     }
-
-    attr[type] = value;
-
-    if (trigger) triggerRef(attrs);
   },
   200,
 );
 function addAttribute() {
-  attrs.value.push({ name: '', value: '' });
+  attrs.value.push({ name: '', value: '', isInvalid: false });
+  triggerRef(attrs);
 }
 function deleteAttribute(index: number) {
   const attr = attrs.value[index];
   if (!attr) return;
 
   attrs.value.splice(index, 1);
   props.element.removeAttribute(attr.name);
+  triggerRef(attrs);
 }
 function updateImgSrc() {
   const file = inputFile.value?.files?.item(0);
@@ -160,6 +181,7 @@ watch(
 
         acc.push({
           name: curr.name,
+          isInvalid: false,
           value: curr.value,
         });
 

src/pages/content/ui/app/detail/DetailElementHTML.vue

@@ -0,0 +1,47 @@
+<template>
+  <p class="font-semibold">HTML</p>
+  <div class="mt-2 rounded-md bg-muted/50 highlight-white/5">
+    <UiCodemirror
+      :key="editorKey"
+      :extensions="[html(), EditorView.lineWrapping]"
+      :model-value="innerHTML"
+      :theme-options="{
+        settings: {
+          background: 'transparent',
+          gutterBackground: 'transparent',
+        },
+      }"
+      placeholder="HTML here"
+      class="text-sm p-2"
+      @change="updateInnerHTML"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { watch, shallowRef } from 'vue';
+import { html } from '@codemirror/lang-html';
+import UiCodemirror from '@root/src/pages/components/ui/UiCodemirror.vue';
+import { EditorView } from '@codemirror/view';
+
+const props = defineProps<{
+  element: Element;
+}>();
+
+const innerHTML = shallowRef('');
+const editorKey = shallowRef(0);
+
+function updateInnerHTML(html: string) {
+  innerHTML.value = html;
+  // eslint-disable-next-line vue/no-mutating-props
+  props.element.innerHTML = html;
+}
+
+watch(
+  () => props.element,
+  () => {
+    innerHTML.value = props.element.innerHTML.trim();
+    editorKey.value += 1;
+  },
+  { immediate: true },
+);
+</script>