@aprovan/bobbin 0.1.0-dev.6bd527d

package/src/utils/dom.ts

@@ -0,0 +1,36 @@
+export function applyStyleToElement(
+  el: HTMLElement,
+  property: string,
+  value: string,
+): void {
+  el.style.setProperty(property, value);
+}
+
+export function enableContentEditable(el: HTMLElement, enabled: boolean): void {
+  if (enabled) {
+    el.contentEditable = 'true';
+    // Recursively enable for text nodes
+    const textElements = el.querySelectorAll(
+      'p, span, h1, h2, h3, h4, h5, h6, a, li, td, th, label, div',
+    );
+    textElements.forEach((child) => {
+      if (child instanceof HTMLElement && child.childNodes.length > 0) {
+        // Only make editable if it has direct text content
+        for (const node of child.childNodes) {
+          if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+            child.contentEditable = 'true';
+            break;
+          }
+        }
+      }
+    });
+  } else {
+    el.contentEditable = 'false';
+    const textElements = el.querySelectorAll('[contenteditable="true"]');
+    textElements.forEach((child) => {
+      if (child instanceof HTMLElement) {
+        child.contentEditable = 'false';
+      }
+    });
+  }
+}

package/src/utils/selectors.ts

@@ -0,0 +1,76 @@
+export function generateId(): string {
+  return Math.random().toString(36).substring(2, 15);
+}
+
+export function getElementPath(el: HTMLElement): string {
+  const path: string[] = [];
+  let current: HTMLElement | null = el;
+
+  while (current && current !== document.body) {
+    let selector = current.tagName.toLowerCase();
+
+    if (current.id) {
+      selector = `#${current.id}`;
+      path.unshift(selector);
+      break;
+    }
+
+    // Add nth-child for uniqueness
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (c) => c.tagName === current!.tagName,
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        selector += `:nth-of-type(${index})`;
+      }
+    }
+
+    path.unshift(selector);
+    current = current.parentElement;
+  }
+
+  return path.join(' > ');
+}
+
+export function getElementXPath(el: HTMLElement): string {
+  const parts: string[] = [];
+  let current: HTMLElement | null = el;
+
+  while (
+    current &&
+    current !== document.body &&
+    current !== document.documentElement
+  ) {
+    let part = current.tagName.toLowerCase();
+
+    // If element has an id, use it as anchor
+    if (current.id) {
+      parts.unshift(`//*[@id="${current.id}"]`);
+      break;
+    }
+
+    // Calculate position among siblings of same tag
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (c) => c.tagName === current!.tagName,
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        part += `[${index}]`;
+      }
+    }
+
+    parts.unshift(part);
+    current = current.parentElement;
+  }
+
+  // If we didn't find an id anchor, start from root
+  if (!parts[0]?.startsWith('//*[@id')) {
+    parts.unshift('');
+  }
+
+  return parts.join('/') || '//' + el.tagName.toLowerCase();
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm'],
+  dts: true,
+  clean: true,
+  external: ['react', 'react-dom'],
+  treeshake: true,
+});