refactor: remove static v-html sinks (#14583)

## Summary

Removes the three `v-html` sinks that render repository-owned static
markup:

- replaces the mask editor's HTML-string SVG map with a typed Vue icon
component
- renders the two pricing arrows as normal template text
- deletes the now-unused `iconsHtml` constant

## Security rationale

These values are currently hard-coded and therefore not directly
exploitable. Removing the raw HTML sinks still narrows the XSS attack
surface and prevents a future data-flow change from silently turning
them into unsafe DOM injection points.

## Verification

Local verification on commit `3354fdff0`:

- `pnpm test:unit src/components/maskeditor/ToolPanel.test.ts
src/platform/cloud/subscription/components/PricingTable.test.ts
src/platform/workspace/components/PricingTableWorkspace.test.ts` — 2
files passed, 22 tests passed
- `pnpm typecheck` — passed
- targeted ESLint, Stylelint, and `oxfmt --check` — passed
- scoped `rg` check finds no remaining `v-html` or `iconsHtml`
references in the changed code paths

The mask-editor test verifies every tool still renders its SVG icon.

## PR split / overlap check

This PR is intentionally limited to static application markup. It does
**not** modify node search.

Live file list for #14574:

- `packages/shared-frontend-utils/src/formatUtil.test.ts`
- `packages/shared-frontend-utils/src/formatUtil.ts`
- `src/components/searchbox/v2/NodeSearchListItem.test.ts`

Intersection with this PR: **none**.

Related: #14574

## Split series

- #14583 — static repository-owned markup
- #14584 — application rich-content boundary
- #14585 — website rich-text boundary
- #14574 — node-search escaping (owned by the existing PR; excluded
here)

Co-authored-by: ShihChi Huang <shh@theonlyperson.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>

Author: 3 people

src/components/maskeditor/MaskEditorToolIcon.vue

@@ -0,0 +1,92 @@
+<template>
+  <svg
+    v-if="tool === Tools.MaskPen"
+    :data-testid="`icon-${tool}`"
+    viewBox="0 0 44 44"
+    fill="currentColor"
+  >
+    <path
+      class="cls-1"
+      d="M10.97,15.98v14.04c0,.825.675,1.5,1.5,1.5h23.07c.825,0,1.5-.675,1.5-1.5V15.98c0-.825-.675-1.5-1.5-1.5H12.47c-.825,0-1.5.675-1.5,1.5ZM25.79,28.16c-4.365,1.41-8.355-2.58-6.945-6.945.51-1.575,1.785-2.85,3.36-3.36,4.365-1.41,8.355,2.58,6.945,6.945-.51,1.575-1.785,2.85-3.36,3.36Z"
+    />
+  </svg>
+  <svg
+    v-else-if="tool === Tools.Eraser"
+    :data-testid="`icon-${tool}`"
+    viewBox="0 0 44 44"
+    fill="currentColor"
+  >
+    <g>
+      <rect
+        class="cls-2"
+        x="16.68"
+        y="10"
+        width="10.63"
+        height="24"
+        rx="1.16"
+        ry="1.16"
+        transform="translate(22 -9.11) rotate(45)"
+      />
+      <path
+        class="cls-1"
+        d="M17.27,34.27c-.42,0-.85-.16-1.17-.48l-5.88-5.88c-.31-.31-.48-.73-.48-1.17s.17-.86.48-1.17l15.34-15.34c.62-.62,1.72-.62,2.34,0l5.88,5.88c.65.65.65,1.7,0,2.34l-15.34,15.34c-.32.32-.75.48-1.17.48ZM26.73,10.73c-.18,0-.34.07-.46.19l-15.34,15.34c-.12.12-.19.29-.19.46s.07.34.19.46l5.88,5.88c.26.26.67.26.93,0l15.34-15.34c.26-.26.26-.67,0-.93l-5.88-5.88c-.12-.12-.29-.19-.46-.19Z"
+      />
+    </g>
+    <path
+      class="cls-3"
+      d="M20.33,11.03h8.32c.64,0,1.16.52,1.16,1.16v15.79h-10.63v-15.79c0-.64.52-1.16,1.16-1.16Z"
+      transform="translate(20.97 -11.61) rotate(45)"
+    />
+  </svg>
+  <svg
+    v-else-if="tool === Tools.MaskBucket"
+    :data-testid="`icon-${tool}`"
+    viewBox="0 0 44 44"
+    fill="currentColor"
+  >
+    <path
+      class="cls-1"
+      d="M33.4,21.76l-11.42,11.41-.04.05c-.61.61-1.6.61-2.21,0l-8.91-8.91c-.61-.61-.61-1.6,0-2.21l.04-.05.3-.29h22.24Z"
+    />
+    <path
+      class="cls-1"
+      d="M20.83,34.17c-.55,0-1.07-.21-1.46-.6l-8.91-8.91c-.8-.8-.8-2.11,0-2.92l11.31-11.31c.8-.8,2.11-.8,2.92,0l8.91,8.91c.39.39.6.91.6,1.46s-.21,1.07-.6,1.46l-11.31,11.31c-.39.39-.91.6-1.46.6ZM23.24,10.83c-.27,0-.54.1-.75.31l-11.31,11.31c-.41.41-.41,1.09,0,1.5l8.91,8.91c.4.4,1.1.4,1.5,0l11.31-11.31c.2-.2.31-.47.31-.75s-.11-.55-.31-.75l-8.91-8.91c-.21-.21-.48-.31-.75-.31Z"
+    />
+    <path
+      class="cls-1"
+      d="M34.28,26.85c0,.84-.68,1.52-1.52,1.52s-1.52-.68-1.52-1.52,1.52-2.86,1.52-2.86c0,0,1.52,2.02,1.52,2.86Z"
+    />
+  </svg>
+  <svg
+    v-else-if="tool === Tools.MaskColorFill"
+    :data-testid="`icon-${tool}`"
+    viewBox="0 0 44 44"
+    fill="currentColor"
+  >
+    <path
+      class="cls-1"
+      d="M30.29,13.72c-1.09-1.1-2.85-1.09-3.94,0l-2.88,2.88-.75-.75c-.2-.19-.51-.19-.71,0-.19.2-.19.51,0,.71l1.4,1.4-9.59,9.59c-.35.36-.54.82-.54,1.32,0,.14,0,.28.05.41-.05.04-.1.08-.15.13-.39.39-.39,1.01,0,1.4.38.39,1.01.39,1.4,0,.04-.04.08-.09.11-.13.14.04.3.06.45.06.5,0,.97-.19,1.32-.55l9.59-9.59,1.38,1.38c.1.09.22.14.35.14s.26-.05.35-.14c.2-.2.2-.52,0-.71l-.71-.72,2.88-2.89c1.08-1.08,1.08-2.85-.01-3.94ZM19.43,25.82h-2.46l7.15-7.15,1.23,1.23-5.92,5.92Z"
+    />
+  </svg>
+  <svg
+    v-else-if="tool === Tools.PaintPen"
+    :data-testid="`icon-${tool}`"
+    viewBox="0 0 44 44"
+    fill="currentColor"
+  >
+    <path
+      class="cls-1"
+      d="M34,13.93c0,.47-.19.94-.55,1.31l-13.02,13.04c-.09.07-.18.15-.27.22-.07-1.39-1.21-2.48-2.61-2.49.07-.12.16-.24.27-.34l13.04-13.04c.72-.72,1.89-.72,2.6,0,.35.35.55.83.55,1.3Z"
+    />
+    <path
+      class="cls-1"
+      d="M19.64,29.03c0,4.46-6.46,3.18-9.64,0,3.3-.47,4.75-2.58,7.06-2.58,1.43,0,2.58,1.16,2.58,2.58Z"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { Tools } from '@/extensions/core/maskeditor/types'
+
+defineProps<{ tool: Tools }>()
+</script>

src/components/maskeditor/ToolPanel.test.ts

@@ -11,16 +11,6 @@ import { Tools, allTools } from '@/extensions/core/maskeditor/types'
 
 type ToolManager = ReturnType<typeof useToolManager>
 
-vi.mock('@/extensions/core/maskeditor/constants', () => ({
-  iconsHtml: {
-    pen: '<svg data-testid="icon-pen" />',
-    rgbPaint: '<svg data-testid="icon-rgbPaint" />',
-    eraser: '<svg data-testid="icon-eraser" />',
-    paintBucket: '<svg data-testid="icon-paintBucket" />',
-    colorSelect: '<svg data-testid="icon-colorSelect" />'
-  }
-}))
-
 const initialMock = () =>
   reactive({
     currentTool: Tools.MaskPen as Tools,
@@ -75,7 +65,7 @@ describe('ToolPanel', () => {
       expect(screen.getAllByTestId('tool-button')).toHaveLength(allTools.length)
     })
 
-    it('should render the icon HTML for each tool', () => {
+    it('should render an SVG icon for each tool', () => {
       renderPanel()
       for (const tool of allTools) {
         expect(screen.getByTestId(`icon-${tool}`)).toBeInTheDocument()

src/components/maskeditor/ToolPanel.vue

@@ -14,10 +14,9 @@
         "
         @click="onToolSelect(tool)"
       >
-        <div
-          class="flex items-center justify-center"
-          v-html="iconsHtml[tool]"
-        ></div>
+        <div class="flex items-center justify-center">
+          <MaskEditorToolIcon :tool="tool" />
+        </div>
         <div class="maskEditor_toolPanelIndicator"></div>
       </div>
     </div>
@@ -43,8 +42,8 @@ import { useI18n } from 'vue-i18n'
 
 import { cn } from '@comfyorg/tailwind-utils'
 
+import MaskEditorToolIcon from '@/components/maskeditor/MaskEditorToolIcon.vue'
 import type { useToolManager } from '@/composables/maskeditor/useToolManager'
-import { iconsHtml } from '@/extensions/core/maskeditor/constants'
 import type { Tools } from '@/extensions/core/maskeditor/types'
 import { allTools } from '@/extensions/core/maskeditor/types'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'