@sanity/visual-editing - npm Package Compare versions

Comparing version 1.8.1 to 1.8.2

CHANGELOG.md

 # Changelog
 
+## [1.8.2](https://github.com/sanity-io/visual-editing/compare/visual-editing-v1.8.1...visual-editing-v1.8.2) (2024-03-18)
+
+
+### Bug Fixes
+
+* support `aria-label` on `<svg>` elements ([#1161](https://github.com/sanity-io/visual-editing/issues/1161)) ([f8f28b7](https://github.com/sanity-io/visual-editing/commit/f8f28b70f9d76e8c1781e87e6cea5ec34a8d25bf))
+
 ## [1.8.1](https://github.com/sanity-io/visual-editing/compare/visual-editing-v1.8.0...visual-editing-v1.8.1) (2024-03-15)
@@ -4,0 +11,0 @@

dist/create-data-attribute/index.js

@@ -1,1 +0,1 @@
-import{o as t}from"../_chunks/create-data-attribute.js";export{t as createDataAttribute};//# sourceMappingURL=index.js.map
+import{o as t}from"../_chunks-es/create-data-attribute.js";export{t as createDataAttribute};//# sourceMappingURL=index.js.map

dist/index.js

@@ -1,1 +0,1 @@
-import{c as t}from"./_chunks/index.js";import{e as a}from"./_chunks/enableVisualEditing.js";import{o as e}from"./_chunks/create-data-attribute.js";export{e as createDataAttribute,t as createOverlayController,a as enableVisualEditing};//# sourceMappingURL=index.js.map
+import{c as e}from"./_chunks-es/index.js";import{e as t}from"./_chunks-es/enableVisualEditing.js";import{o as a}from"./_chunks-es/create-data-attribute.js";export{a as createDataAttribute,e as createOverlayController,t as enableVisualEditing};//# sourceMappingURL=index.js.map

dist/next-pages-router/index.js

@@ -1,1 +0,1 @@
-import{jsx as t}from"react/jsx-runtime";import{lazy as r,Suspense as a}from"react";import{o as e}from"../_chunks/create-data-attribute.js";const i=r((()=>import("../_chunks/VisualEditingComponent.js")));function n(r){return t(a,{fallback:null,children:t(i,{...r})})}export{n as VisualEditing,e as createDataAttribute};//# sourceMappingURL=index.js.map
+import{jsx as t}from"react/jsx-runtime";import{lazy as r,Suspense as e}from"react";import{o as a}from"../_chunks-es/create-data-attribute.js";const i=r((()=>import("../_chunks-es/VisualEditingComponent.js")));function n(r){return t(e,{fallback:null,children:t(i,{...r})})}export{n as VisualEditing,a as createDataAttribute};//# sourceMappingURL=index.js.map

dist/remix/index.js

@@ -1,1 +0,1 @@
-import{jsx as t}from"react/jsx-runtime";import{lazy as r,useSyncExternalStore as a,Suspense as e}from"react";import{o as n}from"../_chunks/create-data-attribute.js";const i=r((()=>import("../_chunks/VisualEditingComponent2.js"))),o=()=>()=>{};function c(r){return a(o,(()=>!0),(()=>!1))?t(e,{fallback:null,children:t(i,{...r})}):null}export{c as VisualEditing,n as createDataAttribute};//# sourceMappingURL=index.js.map
+import{jsx as t}from"react/jsx-runtime";import{lazy as r,useSyncExternalStore as e,Suspense as a}from"react";import{o as n}from"../_chunks-es/create-data-attribute.js";const i=r((()=>import("../_chunks-es/VisualEditingComponent2.js"))),o=()=>()=>{};function c(r){return e(o,(()=>!0),(()=>!1))?t(a,{fallback:null,children:t(i,{...r})}):null}export{c as VisualEditing,n as createDataAttribute};//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@sanity/visual-editing",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "keywords": [
@@ -162,3 +162,3 @@ "sanity.io",
     "@sanity/client": "6.15.5",
-    "@sanity/pkg-utils": "^5.0.2",
+    "@sanity/pkg-utils": "^5.0.4",
     "@sanity/ui": "2.0.10",
@@ -169,13 +169,13 @@ "@sanity/visual-editing-helpers": "0.6.1",
     "@sveltejs/package": "^2.3.0",
-    "@types/react": "^18.2.66",
+    "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.0",
+    "@typescript-eslint/parser": "^7.3.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
-    "happy-dom": "^13.8.6",
+    "happy-dom": "^13.10.1",
     "ls-engines": "^0.9.1",
@@ -182,0 +182,0 @@ "rimraf": "^5.0.5",

src/controller.ts

 import { v4 as uuid } from 'uuid'
 
 import type {
-  _EventHandlers,
-  _OverlayElement,
-  _ResolvedElement,
+  ElementNode,
+  EventHandlers,
   OverlayController,
+  OverlayElement,
   OverlayOptions,
+  ResolvedElement,
 } from './types'
@@ -13,2 +14,6 @@ import { findSanityNodes } from './util/findSanityNodes'
 
+const isElementNode = (target: EventTarget | null): target is ElementNode => {
+  return target instanceof HTMLElement || target instanceof SVGElement
+}
+
 /**
@@ -28,9 +33,9 @@ * Creates a controller which dispatches overlay related events
   // Map for getting element by ID
-  const elementIdMap = new Map<string, HTMLElement>()
+  const elementIdMap = new Map<string, ElementNode>()
   // WeakMap for getting data by element
-  const elementsMap = new WeakMap<HTMLElement, _OverlayElement>()
+  const elementsMap = new WeakMap<ElementNode, OverlayElement>()
   // Set for iterating over elements
-  const elementSet = new Set<HTMLElement>()
+  const elementSet = new Set<ElementNode>()
   // Weakmap keyed by measureElement to find associated element
-  const measureElements = new WeakMap<HTMLElement, HTMLElement>()
+  const measureElements = new WeakMap<ElementNode, ElementNode>()
 
@@ -51,7 +56,7 @@ let ro: ResizeObserver
   // stack. Since JavaScript does not have a Stack type, we use an array and take the last element.
-  let hoverStack: HTMLElement[] = []
+  let hoverStack: Array<ElementNode> = []
   const getHoveredElement = () =>
-    hoverStack[hoverStack.length - 1] as HTMLElement | undefined
+    hoverStack[hoverStack.length - 1] as ElementNode | undefined
 
-  function addEventHandlers(el: HTMLElement, handlers: _EventHandlers) {
+  function addEventHandlers(el: ElementNode, handlers: EventHandlers) {
     el.addEventListener('click', handlers.click, {
@@ -72,3 +77,3 @@ capture: true,
 
-  function removeEventHandlers(el: HTMLElement, handlers: _EventHandlers) {
+  function removeEventHandlers(el: ElementNode, handlers: EventHandlers) {
     el.removeEventListener('click', handlers.click, {
@@ -91,8 +96,3 @@ capture: true,
    */
-  function activateElement({
-    id,
-    elements,
-    handlers,
-    sanity,
-  }: _OverlayElement) {
+  function activateElement({ id, elements, handlers, sanity }: OverlayElement) {
     const { element, measureElement } = elements
@@ -113,3 +113,3 @@ addEventHandlers(element, handlers)
    */
-  function deactivateElement({ id, elements, handlers }: _OverlayElement) {
+  function deactivateElement({ id, elements, handlers }: OverlayElement) {
     const { element, measureElement } = elements
@@ -129,8 +129,8 @@ removeEventHandlers(element, handlers)
    */
-  function registerElement({ elements, sanity }: _ResolvedElement) {
+  function registerElement({ elements, sanity }: ResolvedElement) {
     const { element, measureElement } = elements
 
-    const eventHandlers: _EventHandlers = {
+    const eventHandlers: EventHandlers = {
       click(event) {
-        const target = event.target as HTMLElement | null
+        const target = event.target as ElementNode | null
         if (element === getHoveredElement() && element.contains(target)) {
@@ -154,3 +154,3 @@ if (preventDefault) {
         eventHandlers.mouseenter(event)
-        const el = event.currentTarget as HTMLElement | null
+        const el = event.currentTarget as ElementNode | null
         if (el) {
@@ -203,6 +203,5 @@ el.addEventListener('mouseenter', eventHandlers.mouseenter)
          */
-        const { relatedTarget } = e
+        const { relatedTarget } = e as MouseEvent
         const isInteractiveOverlayElement =
-          relatedTarget instanceof HTMLElement &&
-          overlayElement.contains(relatedTarget)
+          isElementNode(relatedTarget) && overlayElement.contains(relatedTarget)
 
@@ -247,7 +246,7 @@ if (isInteractiveOverlayElement) {
 
-  function registerElements(node: HTMLElement | { childNodes: HTMLElement[] }) {
+  function registerElements(node: ElementNode | { childNodes: ElementNode[] }) {
     const sanityNodes = findSanityNodes(node)
     for (const sanityNode of sanityNodes) {
       if (
-        sanityNode.elements.element instanceof HTMLElement &&
+        isElementNode(sanityNode.elements.element) &&
         !elementsMap.has(sanityNode.elements.element)
@@ -260,3 +259,3 @@ ) {
 
-  function unregisterElement(element: HTMLElement) {
+  function unregisterElement(element: ElementNode) {
     const overlayElement = elementsMap.get(element)
@@ -287,3 +286,3 @@ if (overlayElement) {
 
-      if (node instanceof HTMLElement) {
+      if (isElementNode(node)) {
         // @todo - We need to handle cases where `data-sanity` attributes may
@@ -318,3 +317,3 @@ // have changed, so it's not enough to ignore previously registered
    */
-  function updateRect(el: HTMLElement) {
+  function updateRect(el: ElementNode) {
     const overlayElement = elementsMap.get(el)
@@ -334,3 +333,3 @@ if (overlayElement) {
 
-      if (target instanceof HTMLElement) {
+      if (isElementNode(target)) {
         const element = measureElements.get(target)
@@ -346,3 +345,3 @@ if (!element) return
       const { target } = entry
-      const match = target instanceof HTMLElement && elementsMap.get(target)
+      const match = isElementNode(target) && elementsMap.get(target)
       if (!match) continue
@@ -373,3 +372,3 @@ if (entry.isIntersecting) {
 
-    if (target === window.document || !(target instanceof HTMLElement)) {
+    if (target === window.document || !isElementNode(target)) {
       return
@@ -376,0 +375,0 @@ }

src/types.d.ts

@@ -117,8 +117,13 @@ import type { ChannelsNode } from '@sanity/channels';
 /**
+ * An element that is safe to parse
+ * @internal
+ */
+export type ElementNode = HTMLElement | SVGElement;
+/**
  * Object returned by node traversal
  * @internal
  */
-export interface _SanityNodeElements {
-    element: HTMLElement;
-    measureElement: HTMLElement;
+export interface SanityNodeElements {
+    element: ElementNode;
+    measureElement: ElementNode;
 }
@@ -129,4 +134,4 @@ /**
  */
-export interface _ResolvedElement {
-    elements: _SanityNodeElements;
+export interface ResolvedElement {
+    elements: SanityNodeElements;
     sanity: SanityNode | SanityStegaNode;
@@ -138,6 +143,6 @@ }
  */
-export interface _OverlayElement {
+export interface OverlayElement {
     id: string;
-    elements: _SanityNodeElements;
-    handlers: _EventHandlers;
+    elements: SanityNodeElements;
+    handlers: EventHandlers;
     sanity: SanityNode | SanityStegaNode;
@@ -149,8 +154,8 @@ }
  */
-export interface _EventHandlers {
-    click: (event: MouseEvent) => void;
-    mousedown: (event: MouseEvent) => void;
-    mouseenter: (event: MouseEvent) => void;
-    mouseleave: (event: MouseEvent) => void;
-    mousemove: (event: MouseEvent) => void;
+export interface EventHandlers {
+    click: (event: Event) => void;
+    mousedown: (event: Event) => void;
+    mouseenter: (event: Event) => void;
+    mouseleave: (event: Event) => void;
+    mousemove: (event: Event) => void;
 }
@@ -157,0 +162,0 @@ /**

src/types.ts

@@ -166,8 +166,14 @@ import type { ChannelsNode } from '@sanity/channels'
 /**
+ * An element that is safe to parse
+ * @internal
+ */
+export type ElementNode = HTMLElement | SVGElement
+
+/**
  * Object returned by node traversal
  * @internal
  */
-export interface _SanityNodeElements {
-  element: HTMLElement
-  measureElement: HTMLElement
+export interface SanityNodeElements {
+  element: ElementNode
+  measureElement: ElementNode
 }
@@ -178,4 +184,4 @@ /**
  */
-export interface _ResolvedElement {
-  elements: _SanityNodeElements
+export interface ResolvedElement {
+  elements: SanityNodeElements
   sanity: SanityNode | SanityStegaNode
@@ -188,6 +194,6 @@ }
  */
-export interface _OverlayElement {
+export interface OverlayElement {
   id: string
-  elements: _SanityNodeElements
-  handlers: _EventHandlers
+  elements: SanityNodeElements
+  handlers: EventHandlers
   sanity: SanityNode | SanityStegaNode
@@ -200,8 +206,8 @@ }
  */
-export interface _EventHandlers {
-  click: (event: MouseEvent) => void
-  mousedown: (event: MouseEvent) => void
-  mouseenter: (event: MouseEvent) => void
-  mouseleave: (event: MouseEvent) => void
-  mousemove: (event: MouseEvent) => void
+export interface EventHandlers {
+  click: (event: Event) => void
+  mousedown: (event: Event) => void
+  mouseenter: (event: Event) => void
+  mouseleave: (event: Event) => void
+  mousemove: (event: Event) => void
 }
@@ -208,0 +214,0 @@

src/util/findNonInlineElement.ts

@@ -1,2 +0,4 @@
-export function findNonInlineElement(element: HTMLElement): HTMLElement | null {
+export function findNonInlineElement(
+  element: HTMLElement | SVGElement,
+): HTMLElement | SVGElement | null {
   const { display } = window.getComputedStyle(element)
@@ -3,0 +5,0 @@

src/util/findSanityNodes.ts

 import { decodeSanityNodeData } from '@sanity/visual-editing-helpers/csm'
 
 import { OVERLAY_ID } from '../constants'
-import { _ResolvedElement, SanityNode, SanityStegaNode } from '../types'
+import type { ResolvedElement, SanityNode, SanityStegaNode } from '../types'
 import { findNonInlineElement } from './findNonInlineElement'
 import { testAndDecodeStega } from './stega'
 
-const isElementNode = (node: ChildNode): node is HTMLElement =>
+const isElementNode = (node: ChildNode): node is HTMLElement | SVGElement =>
   node.nodeType === Node.ELEMENT_NODE
 
-const isImgElement = (el: HTMLElement): el is HTMLImageElement =>
+const isImgElement = (el: HTMLElement | SVGElement): el is HTMLImageElement =>
   el.tagName === 'IMG'
 
-const isTimeElement = (el: HTMLElement): el is HTMLTimeElement =>
+const isTimeElement = (el: HTMLElement | SVGElement): el is HTMLTimeElement =>
   el.tagName === 'TIME'
 
+const isSvgRootElement = (el: HTMLElement | SVGElement): el is SVGSVGElement =>
+  el.tagName.toUpperCase() === 'SVG'
+
 function isSanityNode(node: SanityNode | SanityStegaNode): node is SanityNode {
@@ -94,7 +97,14 @@ return 'path' in node
 export function findSanityNodes(
-  el: HTMLElement | ChildNode | { childNodes: HTMLElement[] },
-): _ResolvedElement[] {
-  const elements: _ResolvedElement[] = []
+  el:
+    | HTMLElement
+    | SVGElement
+    | ChildNode
+    | { childNodes: Array<HTMLElement | SVGElement> },
+): ResolvedElement[] {
+  const elements: ResolvedElement[] = []
 
-  function addElement(element: HTMLElement, data: SanityStegaNode | string) {
+  function addElement(
+    element: HTMLElement | SVGElement,
+    data: SanityStegaNode | string,
+  ) {
     const sanity = decodeSanityNodeData(data)
@@ -177,2 +187,7 @@ if (!sanity) {
           addElement(node, data)
+        } else if (isSvgRootElement(node)) {
+          if (!node.ariaLabel) continue
+          const data = testAndDecodeStega(node.ariaLabel, true)
+          if (!data) continue
+          addElement(node, data)
         }
@@ -179,0 +194,0 @@

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3534985

increased by0.08%

Lines of code

5548

increased by0.47%

No dependency changes