LINEUP para

We show the paragraphs from a "SOURCE paragraph" frame, for example from the Parse Page Paragraphs page.

//wiki.ralfbarkow.ch/assets/pages/snippet-template/esm.html HEIGHT 111 LINEUP paragraph

We need a function that can handle a paragraph.

async function handleParaStream(message) { const paragraph = message.paragraph; renderPara(paragraph); }

We need a function that displays the paragraph.

// Function to emit HTML content for the para container export async function emit(el) { el.innerHTML = ` <div id="para-container"></div> <style>#para-container {border: 1px solid black;}</style>`; }

// Function to render the para in the para container async function renderPara(paragraph) { // Select the graph container element const paraContainer = document.getElementById('para-container'); // Render the para in the para container, each paragraph starts on a new line paraContainer.innerHTML += `<div><strong style="color:black;">${paragraph.id}</strong> <span style="color:gray;">${paragraph.text}</span></div>`; }

// Event listener to handle messages sent from "SOURCE paragraph" frame window.addEventListener('message', function(event) { const message = event.data; // Check if the message is intended for this frame and contains para data if (message.action === 'paragraphStream') { // Handle the para data handleParaStream(message); } });

⇒ LINEUP graph