[Summary view] [Print] [Text view]

   1  // packages/block-editor/build-module/utils/fit-text-frontend.mjs
   2  import { store, getElement, getContext } from "@wordpress/interactivity";
   3  
   4  // packages/block-editor/build-module/utils/fit-text-utils.mjs
   5  function findOptimalFontSize(textElement, applyFontSize) {
   6    const alreadyHasScrollableHeight = textElement.scrollHeight > textElement.clientHeight;
   7    let minSize = 0;
   8    let maxSize = 2400;
   9    let bestSize = minSize;
  10    const computedStyle = window.getComputedStyle(textElement);
  11    let paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
  12    let paddingRight = parseFloat(computedStyle.paddingRight) || 0;
  13    const range = document.createRange();
  14    range.selectNodeContents(textElement);
  15    let referenceElement = textElement;
  16    const parentElement = textElement.parentElement;
  17    if (parentElement) {
  18      const parentElementComputedStyle = window.getComputedStyle(parentElement);
  19      if (parentElementComputedStyle?.display === "flex") {
  20        referenceElement = parentElement;
  21        paddingLeft += parseFloat(parentElementComputedStyle.paddingLeft) || 0;
  22        paddingRight += parseFloat(parentElementComputedStyle.paddingRight) || 0;
  23      }
  24    }
  25    let maxclientHeight = referenceElement.clientHeight;
  26    while (minSize <= maxSize) {
  27      const midSize = Math.floor((minSize + maxSize) / 2);
  28      applyFontSize(midSize);
  29      const rect = range.getBoundingClientRect();
  30      const textWidth = rect.width;
  31      const fitsWidth = textElement.scrollWidth <= referenceElement.clientWidth && textWidth <= referenceElement.clientWidth - paddingLeft - paddingRight;
  32      const fitsHeight = alreadyHasScrollableHeight || textElement.scrollHeight <= referenceElement.clientHeight || textElement.scrollHeight <= maxclientHeight;
  33      if (referenceElement.clientHeight > maxclientHeight) {
  34        maxclientHeight = referenceElement.clientHeight;
  35      }
  36      if (fitsWidth && fitsHeight) {
  37        bestSize = midSize;
  38        minSize = midSize + 1;
  39      } else {
  40        maxSize = midSize - 1;
  41      }
  42    }
  43    range.detach();
  44    return bestSize;
  45  }
  46  function optimizeFitText(textElement, applyFontSize) {
  47    if (!textElement) {
  48      return;
  49    }
  50    applyFontSize(0);
  51    const optimalSize = findOptimalFontSize(textElement, applyFontSize);
  52    applyFontSize(optimalSize);
  53    return optimalSize;
  54  }
  55  
  56  // packages/block-editor/build-module/utils/fit-text-frontend.mjs
  57  store("core/fit-text", {
  58    callbacks: {
  59      init() {
  60        const context = getContext();
  61        const { ref } = getElement();
  62        const applyFontSize = (fontSize) => {
  63          if (fontSize === 0) {
  64            ref.style.fontSize = "";
  65          } else {
  66            ref.style.fontSize = `$fontSize}px`;
  67          }
  68        };
  69        context.fontSize = optimizeFitText(ref, applyFontSize);
  70        if (window.ResizeObserver && ref.parentElement) {
  71          const resizeObserver = new window.ResizeObserver(() => {
  72            context.fontSize = optimizeFitText(ref, applyFontSize);
  73          });
  74          resizeObserver.observe(ref.parentElement);
  75          resizeObserver.observe(ref);
  76          return () => {
  77            if (resizeObserver) {
  78              resizeObserver.disconnect();
  79            }
  80          };
  81        }
  82      }
  83    }
  84  });