refactor: broken image glyph css var

Author: hejsztynx

src/web/EnrichedText.css

@@ -328,7 +328,3 @@
   -webkit-mask: var(--et-broken-image-glyph) no-repeat center / contain;
   mask: var(--et-broken-image-glyph) no-repeat center / contain;
 }
-
-.et-view {
-  --et-broken-image-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'%3E%3Cpath d='M200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM240,503L400,343L560,503L720,343L760,383L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,463L240,503ZM200,760L760,760Q760,760 760,760Q760,760 760,760L760,496L720,456L560,616L400,456L240,616L200,576L200,760Q200,760 200,760Q200,760 200,760ZM200,760L200,760Q200,760 200,760Q200,760 200,760L200,496L200,576L200,463L200,383L200,200Q200,200 200,200Q200,200 200,200L200,200Q200,200 200,200Q200,200 200,200L200,463L200,463L200,576L200,576L200,760Q200,760 200,760Q200,760 200,760Z'/%3E%3C/svg%3E");
-}

src/web/EnrichedText.tsx

@@ -8,6 +8,7 @@ import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedI
 import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
 import { sanitizeHtml } from './sanitization/htmlSanitizer';
 import { prepareHtmlForWeb } from './normalization/prepareHtmlForWeb';
+import { BROKEN_IMAGE_GLYPH_MASK } from './constants/brokenImageGlyph';
 
 export const EnrichedText = memo(
   ({ children, htmlStyle, style, selectionColor }: EnrichedTextProps) => {
@@ -26,7 +27,10 @@ export const EnrichedText = memo(
     );
 
     const cssVars = useMemo(
-      () => htmlStyleToCSSVariables(htmlStyle),
+      () => ({
+        ...htmlStyleToCSSVariables(htmlStyle),
+        '--et-broken-image-glyph': BROKEN_IMAGE_GLYPH_MASK,
+      }),
       [htmlStyle]
     );
 
@@ -41,7 +45,12 @@ export const EnrichedText = memo(
     );
 
     const finalStyle = useMemo(
-      () => ({ ...textStyle, ...themingStyle, ...cssVars }),
+      () =>
+        ({
+          ...textStyle,
+          ...themingStyle,
+          ...cssVars,
+        }) as CSSProperties,
       [textStyle, themingStyle, cssVars]
     );
 

src/web/constants/brokenImageGlyph.ts

@@ -0,0 +1,8 @@
+// SVG path of the broken-image glyph, shared between the editor's image
+// node view (rendered as an inline <svg>).
+export const BROKEN_IMAGE_PATH_D =
+  'M200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM240,503L400,343L560,503L720,343L760,383L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,463L240,503ZM200,760L760,760Q760,760 760,760Q760,760 760,760L760,496L720,456L560,616L400,456L240,616L200,576L200,760Q200,760 200,760Q200,760 200,760ZM200,760L200,760Q200,760 200,760Q200,760 200,760L200,496L200,576L200,463L200,383L200,200Q200,200 200,200Q200,200 200,200L200,200Q200,200 200,200Q200,200 200,200L200,463L200,463L200,576L200,576L200,760Q200,760 200,760Q200,760 200,760Z';
+
+// Glyph as a `mask`-ready data URI, consumed via the
+// `--et-broken-image-glyph` custom property in EnrichedText.css.
+export const BROKEN_IMAGE_GLYPH_MASK = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'%3E%3Cpath d='${BROKEN_IMAGE_PATH_D}'/%3E%3C/svg%3E")`;

src/web/formats/EnrichedImageNodeView.tsx

@@ -1,12 +1,10 @@
 import { NodeViewWrapper, type ReactNodeViewProps } from '@tiptap/react';
 import type { CSSProperties } from 'react';
 import { useState } from 'react';
+import { BROKEN_IMAGE_PATH_D } from '../constants/brokenImageGlyph';
 
 const IMAGE_FALLBACK_SIZE = 80;
 
-const BROKEN_IMAGE_PATH_D =
-  'M200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM240,503L400,343L560,503L720,343L760,383L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,463L240,503ZM200,760L760,760Q760,760 760,760Q760,760 760,760L760,496L720,456L560,616L400,456L240,616L200,576L200,760Q200,760 200,760Q200,760 200,760ZM200,760L200,760Q200,760 200,760Q200,760 200,760L200,496L200,576L200,463L200,383L200,200Q200,200 200,200Q200,200 200,200L200,200Q200,200 200,200Q200,200 200,200L200,463L200,463L200,576L200,576L200,760Q200,760 200,760Q200,760 200,760Z';
-
 function BrokenImageGlyph() {
   return (
     <svg