webmarker-js 0.5.0 → 0.7.0

package/src/index.ts

@@ -91,7 +91,7 @@ let cleanupFns: (() => void)[] = [];
 function mark(options: MarkOptions = {}): Record<string, MarkedElement> {
   try {
     const {
-      selector = "button, input, a, select, textarea",
+      selector = 'a[href], button, input:not([type="hidden"]), select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])',
       getLabel = (_, index) => index.toString(),
       markAttribute = "data-mark-label",
       markPlacement = "top-start",
@@ -138,7 +138,7 @@ function mark(options: MarkOptions = {}): Record<string, MarkedElement> {
       fragment.appendChild(markElement);
 
       const boundingBoxElement = showBoundingBoxes
-        ? createBoundingBox(element, boundingBoxStyle, label, boundingBoxClass)
+        ? createBoundingBox(element, index, boundingBoxStyle, label, boundingBoxClass)
         : undefined;
       if (boundingBoxElement) {
         fragment.appendChild(boundingBoxElement);
@@ -190,6 +190,7 @@ function createMark(
 
 function createBoundingBox(
   element: Element,
+  index: number,
   style: StyleObject | StyleFunction,
   label: string,
   boundingBoxClass: string
@@ -215,7 +216,7 @@ function createBoundingBox(
       position: "absolute",
       pointerEvents: "none",
     },
-    typeof style === "function" ? style(element, parseInt(label)) : style
+    typeof style === "function" ? style(element, index) : style
   );
   return boundingBoxElement;
 }

package/chrome-extension/dist/index.d.ts

@@ -1,72 +0,0 @@
-type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
-type StyleFunction = (element: Element, index: number) => Partial<CSSStyleDeclaration>;
-type StyleObject = Partial<CSSStyleDeclaration>;
-interface MarkOptions {
-    /**
-     * A CSS selector to query the elements to be marked.
-     */
-    selector?: string;
-    /**
-     * Provide a function for generating labels.
-     * By default, labels are generated as numbers starting from 0.
-     */
-    getLabel?: (element: Element, index: number) => string;
-    /**
-     * Name for the attribute added to the marked elements to store the mark label.
-     *
-     * @default 'data-mark-label'
-     */
-    markAttribute?: string;
-    /**
-     * The placement of the mark relative to the element.
-     *
-     * @default 'top-start'
-     */
-    markPlacement?: Placement;
-    /**
-     * A CSS style to apply to the label element.
-     * You can also specify a function that returns a CSS style object.
-     */
-    markStyle?: StyleObject | StyleFunction;
-    /**
-     * A CSS style to apply to the bounding box element.
-     * You can also specify a function that returns a CSS style object.
-     * Bounding boxes are only shown if `showBoundingBoxes` is `true`.
-     */
-    boundingBoxStyle?: StyleObject | StyleFunction;
-    /**
-     * Whether or not to show bounding boxes around the elements.
-     *
-     * @default true
-     */
-    showBoundingBoxes?: boolean;
-    /**
-     * Provide a container element to query the elements to be marked.
-     * By default, the container element is `document.body`.
-     */
-    containerElement?: Element;
-    /**
-     * Only mark elements that are visible in the current viewport
-     *
-     * @default false
-     */
-    viewPortOnly?: boolean;
-    /**
-     * Additional class to apply to the mark elements.
-     */
-    markClass?: string;
-    /**
-     * Additional class to apply to the bounding box elements.
-     */
-    boundingBoxClass?: string;
-}
-interface MarkedElement {
-    element: Element;
-    markElement: HTMLElement;
-    boundingBoxElement?: HTMLElement;
-}
-declare function mark(options?: MarkOptions): Record<string, MarkedElement>;
-declare function unmark(): void;
-declare function isMarked(): boolean;
-export { mark, unmark, isMarked };
-export type { MarkOptions, MarkedElement, Placement };