@bendyline/squisq-editor-react 1.3.0 → 1.5.0

package/src/utils/collectInlineFontAwesomeCss.ts

@@ -0,0 +1,69 @@
+/**
+ * Collect FontAwesome `@font-face` + utility CSS rules from the host
+ * document's loaded stylesheets so we can inline them into a sandboxed
+ * iframe preview.
+ *
+ * Why: an iframe rendered via `srcDoc` cannot reliably load
+ * FontAwesome from a cross-origin CDN. Tracking prevention, stricter
+ * origin policies, and the iframe's about:srcdoc origin all conspire
+ * to silently drop font fetches. The icons end up invisible even
+ * though the `<i class="fa-…">` tags are present in the markup. The
+ * host page (editor-react ships a bundled `@import` of
+ * `@fortawesome/fontawesome-free`) already has the font loaded and its
+ * woff2 URLs resolve to same-origin assets, so we extract those rules
+ * once and pass them into the renderer as inline CSS.
+ *
+ * Returns `undefined` when no FA rules are found — typical for SSR or
+ * for hosts that don't bundle FA — in which case the renderer falls
+ * back to its cdnjs `<link>` (still works in plain standalone HTML).
+ */
+export function collectInlineFontAwesomeCss(): string | undefined {
+  if (typeof document === 'undefined') return undefined;
+
+  const collected: string[] = [];
+
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList | null = null;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      // Cross-origin stylesheets throw on `.cssRules` access. We can't
+      // read them, but they're also not where editor-react's bundled
+      // FA lives, so it's safe to skip them.
+      continue;
+    }
+    if (!rules) continue;
+
+    for (const rule of Array.from(rules)) {
+      if (isFontAwesomeRule(rule)) {
+        collected.push(rule.cssText);
+      }
+    }
+  }
+
+  return collected.length > 0 ? collected.join('\n') : undefined;
+}
+
+/**
+ * Match `@font-face` declarations whose family starts with
+ * "Font Awesome", plus the FA utility classes (the `.fa-*` rules that
+ * set `content: "\fXXX"` and font-family). The former gets the woff2
+ * loaded into the iframe, the latter wires the `<i>` markup to it.
+ */
+function isFontAwesomeRule(rule: CSSRule): boolean {
+  const text = rule.cssText;
+  // `@font-face { font-family: "Font Awesome 6 Brands"; … }`
+  if (rule.type === CSSRule.FONT_FACE_RULE) {
+    return /font-family:\s*['"]?Font Awesome/i.test(text);
+  }
+  // `.fa-github::before { content: "\f09b"; }` and the base
+  // `.fa-brands { font-family: "Font Awesome 6 Brands"; … }` rules.
+  // FA's stylesheet prefixes selectors with `.fa`, `.fas`, `.far`,
+  // `.fab`, `.fa-solid`, `.fa-regular`, `.fa-brands`. Match the
+  // family name in the declaration block to avoid false positives
+  // (e.g. someone else's `.fa-…` class that doesn't use the font).
+  if (rule.type === CSSRule.STYLE_RULE) {
+    return /Font Awesome/i.test(text) || /content:\s*["']\\[ef]/.test(text);
+  }
+  return false;
+}

package/src/utils/dropUtils.ts

@@ -33,19 +33,67 @@ export function partitionFiles(files: File[]): { media: File[]; text: File[] } {
 
 /**
  * Add media files to a MediaProvider. Returns the relative paths
- * assigned by the provider.
+ * assigned by the provider, with `null` slots where a file could not
+ * be processed — keeping the result aligned with the input array so
+ * callers can correlate indices.
+ *
+ * Two failure modes are handled defensively:
+ *
+ * 1. `file.arrayBuffer()` throws (`InvalidStateError` — "An operation
+ *    that depends on state cached in an interface object was made but
+ *    the state had changed since it was read from disk"). This happens
+ *    with virtual drag sources whose File reference goes stale before
+ *    the async read completes — Phone Link / iOS continuity / certain
+ *    screenshot tools / etc.
+ *
+ * 2. `file.arrayBuffer()` returns a 0-byte buffer. Some virtual
+ *    sources resolve the read successfully but with no payload,
+ *    leaving an empty file in the media bin. We skip those so the
+ *    bin doesn't accumulate placeholders.
+ *
+ * In both cases we warn via console rather than throwing, so a single
+ * problematic file doesn't abort a multi-file drop.
  */
 export async function processMediaFiles(
   files: File[],
   mediaProvider: MediaProvider,
-): Promise<string[]> {
-  const paths: string[] = [];
+): Promise<(string | null)[]> {
+  const paths: (string | null)[] = [];
 
   for (const file of files) {
-    const buffer = await file.arrayBuffer();
+    let buffer: ArrayBuffer;
+    try {
+      buffer = await file.arrayBuffer();
+    } catch (err: unknown) {
+      console.warn(
+        `[squisq-editor] Skipped dropped file "${file.name}" — could not read its contents.`,
+        'This is typical for drags from virtual sources (Phone Link, screenshot tools, cross-tab drags) whose File reference goes stale before the async read completes.',
+        err instanceof Error ? err.message : err,
+      );
+      paths.push(null);
+      continue;
+    }
+
+    if (buffer.byteLength === 0) {
+      console.warn(
+        `[squisq-editor] Skipped dropped file "${file.name}" — its contents read as 0 bytes. ` +
+          'The drag source likely never materialized the file (try saving it to disk first, then dragging from there).',
+      );
+      paths.push(null);
+      continue;
+    }
+
     const mimeType = file.type || 'application/octet-stream';
-    const path = await mediaProvider.addMedia(file.name, buffer, mimeType);
-    paths.push(path);
+    try {
+      const path = await mediaProvider.addMedia(file.name, buffer, mimeType);
+      paths.push(path);
+    } catch (err: unknown) {
+      console.warn(
+        `[squisq-editor] Failed to save "${file.name}" via mediaProvider:`,
+        err instanceof Error ? err.message : err,
+      );
+      paths.push(null);
+    }
   }
 
   return paths;

package/src/utils/normalizeMalformedAssetUrl.ts

@@ -0,0 +1,22 @@
+/**
+ * Detect image URLs that were malformed by an MS "Save Page As Web Page" /
+ * pandoc import: a relative path like `mikehome_files/foo.png` gets
+ * `http://` prepended somewhere upstream, so the URL parser interprets
+ * `mikehome_files` as a hostname. The browser then either fails to load
+ * the image or has it blocked by CSP.
+ *
+ * Heuristic: hostname has no dots and no port, and ends in `_files` —
+ * that's the Word-style asset-folder naming convention, not a real host.
+ *
+ * Returns the recovered relative path (e.g. `mikehome_files/foo.png`)
+ * when the shape matches, or `null` otherwise.
+ */
+export function normalizeMalformedAssetUrl(src: string | null | undefined): string | null {
+  if (!src) return null;
+  const match = src.match(/^https?:\/\/([^/?#]+)\/(.+)$/i);
+  if (!match) return null;
+  const [, host, rest] = match;
+  if (host.includes('.') || host.includes(':')) return null;
+  if (!host.toLowerCase().endsWith('_files')) return null;
+  return `${host}/${rest}`;
+}