🐛Some emoji make the export failing

[AntoLC]

Bug Report

Some emoji in the editor make the "Export to PDF" failing.
This one by example: 🙋‍♀️

[rvveber]

A possible solution to this would be to render emojis locally.

At openDesk i patched it like this:

const exporter = new PDFExporter(editor.schema, pdfDocsSchemaMappings, {
  resolveFileUrl: ...
  emojiSource: createNativeEmojiSource(),
});

/**
 * Native emoji source for client-side PDF export — fully offline.
 * Renders emoji via Canvas to PNG data URL (HiDPI-aware, cached)
 */
export const createNativeEmojiSource = (baseSize = 72) => {
  const cache = new Map<string, string>();
  const DPR = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
  const DEBUG_BORDER = false;

  const isHexSeq = (s: string) => /^[0-9a-fA-F\-]+$/.test(s);
  const hexToEmoji = (hex: string) =>
    hex
      .split('-')
      .map((h) => String.fromCodePoint(parseInt(h, 16)))
      .join('');
  const stripVS16 = (s: string) => s.replace(/\uFE0F/g, '');
  const toEmojiString = (code: string) =>
    isHexSeq(code) ? hexToEmoji(code.toLowerCase()) : String(code);

  const tinyPNG =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAuMBg4Qh8d8AAAAASUVORK5CYII=';

  const renderToPngDataUrl = (emojiString: string, cssSize: number) => {
    if (typeof document === 'undefined') {
      return '';
    }

    const px = Math.max(1, Math.ceil(cssSize * DPR));
    const key = `${emojiString}@${cssSize}@${DPR}@tight`;
    if (cache.has(key)) {
      return cache.get(key);
    }

    const canvas = document.createElement('canvas');
    canvas.width = px;
    canvas.height = px;
    const ctx = canvas.getContext('2d');
    if (!ctx) {
      return '';
    }

    ctx.clearRect(0, 0, px, px);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'alphabetic';

    // 1) start big, then scale to fit a+d into px with a small safety margin
    const initialFont = Math.floor(px * 0.98);
    ctx.font = `${initialFont}px "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif`;

    const glyph = stripVS16(emojiString);
    let m = ctx.measureText(glyph);
    let ascent = m.actualBoundingBoxAscent || initialFont * 0.8;
    let descent = m.actualBoundingBoxDescent || initialFont * 0.2;
    const total = ascent + descent || initialFont;

    // scale so total height fits (slightly under to avoid clipping)
    const scale = Math.min(1, (px / total) * 0.98);
    const finalFont = Math.max(1, Math.floor(initialFont * scale));
    ctx.font = `${finalFont}px "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif`;

    // re-measure with final font
    m = ctx.measureText(glyph);
    ascent = m.actualBoundingBoxAscent || finalFont * 0.8;
    descent = m.actualBoundingBoxDescent || finalFont * 0.2;

    // 2) perfectly center: top = y - ascent, bottom = y + descent
    //    center y so (top + bottom)/2 == px/2  => y = px/2 + (ascent - descent)/2
    const y = px / 2 + (ascent - descent) / 2;

    // optional debug border (1px stroke that stays inside the bitmap)
    if (DEBUG_BORDER) {
      ctx.strokeStyle = 'rgba(100,160,200,0.9)';
      ctx.lineWidth = 1;
      ctx.strokeRect(0.5, 0.5, px - 1, px - 1);
    }

    // draw the emoji
    ctx.fillStyle = '#000';
    ctx.fillText(glyph, px / 2, Math.round(y));

    const url = canvas.toDataURL('image/png');
    cache.set(key, url);
    return url;
  };

  return {
    builder: (code: string, options?: { size?: string }) => {
      const sizeStr = options?.size ?? `${baseSize}x${baseSize}`;
      const size = Number(String(sizeStr).split('x')[0]) || baseSize;

      const emoji = toEmojiString(code);
      const png = renderToPngDataUrl(emoji, size);
      return png || tinyPNG; // always a PNG
    },
    withVariationSelectors: false,
  };
};