tluyben · October 22, 2024 14:02 · tluyben · Oct 22, 2024
diff --git a/claude-to-pdf.js b/claude-to-pdf.js
 // Function to close any open code blocks
 function closeCodeBlocks() {
  const closeButtons = document.querySelectorAll('button');
  closeButtons.forEach((button) => {
    const svgPath = button.querySelector('svg > path');
    if (svgPath && svgPath.getAttribute('d').includes('M205.66')) {
      // This path corresponds to the close icon (adjust if necessary)
      button.click();
    }
  });
 }

 // Function to find a code element whose ancestor has style.width == '0px'
 function findInvisibleParent() {
  // Get all code elements with a language class
  const codeElements = document.querySelectorAll('code[class*="language-"]');
  
  // Iterate through each code element
  for (const codeElement of codeElements) {
    let currentElement = codeElement;
    
    // Traverse up the DOM tree until we hit <html> or find the target div
    while (currentElement && currentElement.tagName !== 'HTML') {
      // Check if current element is a div
      if (currentElement.tagName === 'DIV') {
        // Check if it has the specific width style
        const computedStyle = window.getComputedStyle(currentElement);
        const elementStyle = currentElement.style.width;
        
        // Check both inline style and computed style for width: 0px
        if (elementStyle === '0px' || computedStyle.width === '0px') {
          return codeElement; // Return the code element with an invisible parent
        }
      }
      
      // Move up to parent element
      currentElement = currentElement.parentElement;
    }
  }
  
  // If we didn't find any matching elements
  return undefined;
 }

 // Main function to replace code previews
 async function replaceCodePreviews() {
  // Close any open code blocks
  closeCodeBlocks();

  // Try to find the container with an invisible parent
  let container = findInvisibleParent();

  // If the container is not found, open a code block to initialize the container
  if (!container) {
    // Get existing code elements before clicking any button
    const codeElements = document.querySelectorAll('code[class*="language-"]');
    const previewTexts = document.querySelectorAll(
      'button .text-text-400.line-clamp-1.text-xs.min-h-4'
    );
    if (previewTexts.length > 0) {
      const previewText = previewTexts[0];
      const button = previewText.closest('button');
      if (button) {
        button.click();
 				
 				
        // Wait for the new code element to appear
        await new Promise((resolve, reject) => {
          const timeout = 5000;
          const startTime = Date.now();
          const checkForNewCodeElement = () => {
            const currentCodeElements = document.querySelectorAll('code[class*="language-"]');
            // Find code elements not in codeElements
            const newCodeElements = Array.from(currentCodeElements).filter(
              (el) => !Array.from(codeElements).includes(el)
            );
 						
            if (newCodeElements.length > 0) {
              resolve();
              return;
            }
            if (Date.now() - startTime >= timeout) {
              reject(new Error('Timeout waiting for new code element'));
              return;
            }
            requestAnimationFrame(checkForNewCodeElement);
          };
          checkForNewCodeElement();
        });

        // Close code blocks after the new code element appears
        closeCodeBlocks();

        // Find the container again
        container = findInvisibleParent();
      }
    }
  }

  // If we still don't have the container, we cannot proceed
  if (!container) {
    console.error('Unable to find the correct code container.');
    return;
  }
  
  console.log('found container', container);

  // Now proceed to process each preview button
  const previewTexts = document.querySelectorAll(
    'button .text-text-400.line-clamp-1.text-xs.min-h-4'
  );

  for (const previewText of previewTexts) {
    try {
      const button = previewText.closest('button');
      if (!button) continue;

      const buttonParent = button.parentElement;
      if (!buttonParent) continue;

      // Click the button to open the code block
      button.click();
 			await new Promise((resolve) => setTimeout(resolve, 1000));
 			
      // Create a wrapper div with desired styles
      const wrapper = document.createElement('div');
      wrapper.style.cssText = `
        background-color: rgb(40, 44, 52);
        padding: 20px;
        border-radius: 8px;
        margin: 10px 0;
      `;

      // Clone the code content and append it to the wrapper
      const codeContent = container.cloneNode(true);
      wrapper.appendChild(codeContent);

      // Replace the button with the wrapped code content
      buttonParent.replaceChild(wrapper, button);

      // Close the code block to reset for the next iteration
      closeCodeBlocks();

      // Small delay before processing the next item
      await new Promise((resolve) => setTimeout(resolve, 500));

    } catch (error) {
      console.error('Error processing preview:', error);
    }
  }
 }

 // Run the main function
 replaceCodePreviews();
	// Function to close any open code blocks
	function closeCodeBlocks() {
	const closeButtons = document.querySelectorAll('button');
	closeButtons.forEach((button) => {
	const svgPath = button.querySelector('svg > path');
	if (svgPath && svgPath.getAttribute('d').includes('M205.66')) {
	// This path corresponds to the close icon (adjust if necessary)
	button.click();
	}
	});
	}

	// Function to find a code element whose ancestor has style.width == '0px'
	function findInvisibleParent() {
	// Get all code elements with a language class
	const codeElements = document.querySelectorAll('code[class*="language-"]');

	// Iterate through each code element
	for (const codeElement of codeElements) {
	let currentElement = codeElement;

	// Traverse up the DOM tree until we hit <html> or find the target div
	while (currentElement && currentElement.tagName !== 'HTML') {
	// Check if current element is a div
	if (currentElement.tagName === 'DIV') {
	// Check if it has the specific width style
	const computedStyle = window.getComputedStyle(currentElement);
	const elementStyle = currentElement.style.width;

	// Check both inline style and computed style for width: 0px
	if (elementStyle === '0px' \|\| computedStyle.width === '0px') {
	return codeElement; // Return the code element with an invisible parent
	}
	}

	// Move up to parent element
	currentElement = currentElement.parentElement;
	}
	}

	// If we didn't find any matching elements
	return undefined;
	}

	// Main function to replace code previews
	async function replaceCodePreviews() {
	// Close any open code blocks
	closeCodeBlocks();

	// Try to find the container with an invisible parent
	let container = findInvisibleParent();

	// If the container is not found, open a code block to initialize the container
	if (!container) {
	// Get existing code elements before clicking any button
	const codeElements = document.querySelectorAll('code[class*="language-"]');
	const previewTexts = document.querySelectorAll(
	'button .text-text-400.line-clamp-1.text-xs.min-h-4'
	);
	if (previewTexts.length > 0) {
	const previewText = previewTexts[0];
	const button = previewText.closest('button');
	if (button) {
	button.click();


	// Wait for the new code element to appear
	await new Promise((resolve, reject) => {
	const timeout = 5000;
	const startTime = Date.now();
	const checkForNewCodeElement = () => {
	const currentCodeElements = document.querySelectorAll('code[class*="language-"]');
	// Find code elements not in codeElements
	const newCodeElements = Array.from(currentCodeElements).filter(
	(el) => !Array.from(codeElements).includes(el)
	);

	if (newCodeElements.length > 0) {
	resolve();
	return;
	}
	if (Date.now() - startTime >= timeout) {
	reject(new Error('Timeout waiting for new code element'));
	return;
	}
	requestAnimationFrame(checkForNewCodeElement);
	};
	checkForNewCodeElement();
	});

	// Close code blocks after the new code element appears
	closeCodeBlocks();

	// Find the container again
	container = findInvisibleParent();
	}
	}
	}

	// If we still don't have the container, we cannot proceed
	if (!container) {
	console.error('Unable to find the correct code container.');
	return;
	}

	console.log('found container', container);

	// Now proceed to process each preview button
	const previewTexts = document.querySelectorAll(
	'button .text-text-400.line-clamp-1.text-xs.min-h-4'
	);

	for (const previewText of previewTexts) {
	try {
	const button = previewText.closest('button');
	if (!button) continue;

	const buttonParent = button.parentElement;
	if (!buttonParent) continue;

	// Click the button to open the code block
	button.click();
	await new Promise((resolve) => setTimeout(resolve, 1000));

	// Create a wrapper div with desired styles
	const wrapper = document.createElement('div');
	wrapper.style.cssText = `
	background-color: rgb(40, 44, 52);
	padding: 20px;
	border-radius: 8px;
	margin: 10px 0;
	`;

	// Clone the code content and append it to the wrapper
	const codeContent = container.cloneNode(true);
	wrapper.appendChild(codeContent);

	// Replace the button with the wrapped code content
	buttonParent.replaceChild(wrapper, button);

	// Close the code block to reset for the next iteration
	closeCodeBlocks();

	// Small delay before processing the next item
	await new Promise((resolve) => setTimeout(resolve, 500));

	} catch (error) {
	console.error('Error processing preview:', error);
	}
	}
	}

	// Run the main function
	replaceCodePreviews();