Live site preview component using iframe!

[Skrubbadubba]

So awhile back, right when I switched from netlify-cms, I started thinking of ways you could get a nice preview of the site, now that editorial workflow was gone. One idea was that: what if you could embed the site in the preview pane, then update its DOM in the right places with the values from the widgets.

I didn't have the know-how then, but yesterday I had nothing to do and thought it probably wouldn't be that hard.

Note: This can change innerHTML of elements to strings, change src attribute for img tags, and render markdown inside elements. That is all it can do (for now), so keep that in mind before you try using this in your own project. Oh and you also need to use bundling. Also keep in mind this is currently very simple, almost a PoC I would say.

Component:

import type { TemplatePreviewProps } from "@staticcms/core";
import { useEffect, useState, useRef, createElement } from "react";
import { createRoot } from "react-dom/client";
import { render } from "react-dom";
import ReactMarkdown from "react-markdown";
const IframeLivePreview = ({
  entry,
  fields,
  widgetFor,
  widgetsFor,
  collection: { IframePreview: options },
  document,
}) => {
  const relevantFields = fields.filter((field) => field.class);
  const elements = useRef([]);

  function defineContent() {
    const doc = document.getElementById("my-frame").contentDocument;
    const container = doc.getElementById(entry.data[options.container]);
    relevantFields.map((field, index) => {
      const element = container?.getElementsByClassName(field.class)[0];
      if ((element && field.widget === "markdown") || field.render === true) {
        elements.current[index] = createRoot(element);
      } else elements.current[index] = element;
    });
  }

  function appendContent(iframe) {}

  relevantFields.map((field, index) => {
    useEffect(() => {
      const element = elements.current[index];
      if (!element) return;
      if (element._internalRoot) {
        element.render(widgetFor(field.name));
      } else if (element.getAttribute("src")) {
        element.setAttribute("src", entry.data[field.name]);
      } else {
        element.innerHTML = entry.data[field.name];
      }
    }, [entry.data[field.name]]);
  });
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
      }}
    >
      <iframe
        style={{
          width: "100%",
          height: "100%",
        }}
        id="my-frame"
        src={
          options.baseSrc +
          entry.data[options.fieldSrc]?.toLowerCase() +
          "#" +
          entry.data[options.container]
        }
        onLoad={() =>
          setTimeout(() => {
            defineContent();
          }, 500)
        }
      ></iframe>
    </div>
  );
};
export default IframeLivePreview;

Setup and Usage

The component will load your page in an iframe, then try to manipulate its DOM. You will have to specify a URL for each collection (relative URL is easiest, as it will then work both in localhost and on deploy.).

For each collection object this is used, the component will try to read from a special IframePreview object, which contains settings. The object takes 3 attributes baseSrc: <string>, fieldSrc: <string>, and container: <string>. baseSrc represents the beginning of the resulting URL string. This is static. fieldSrc should be the name of a field. The value of that field will be appended to the URL the iframe loads. container should also be the name of a field. The value of that field should correspond to the id of the outermost containing element that will be edited.

Each field that you wish to have edit a part of your site in the preview, must also have a class: <string>. This is the class of the element that that particular field will edit. The component assumes there is only one element with that class inside the container.

You may have noticed that a specific DOM structure is required. I'll go over it again briefly from a markup point of view.

• Each entry may or may not be on a unique URL (both are supported via fieldSrc).
• For each entry, there should be a unique id corresponding to an element that contains all the editable fields of that entry. This id needs to be dynamically set to a field from the entry (logically it would be the title field).
• Inside the container, there should be unique elements with classes corresponding to those set for the editable fields.

Example

Collection configuration

Looping through collection entries, and outputting a card component for each

The card component, showing how its id is set to "namn", which is my identifier_field for that collection. You can also see the classes "namn" and "content", which is what is set for those fields in the config.

Hopefully not too confusing

Showcase

showcase.mp4

Things I plan to add

As you can see there are major limitations, for one, you have to have a build phase for react components. I'm positive this can be done without useRef(). If someone with more react knowledge wants to have a go at it, that would be greatly appreciated.

Any fields that control something with the build process, obviously can't be previewed.

Currently, it only has a use case for editing existing entries. I plan on making it so you could also see new entries. The idea is that if it doesn't find the container, it instead looks for an element with a specified class, copies that element, clears all its content, and appends it to the parent. Thereafter the newly created element would be what is being edited. Perhaps there could also be an option to clear and start editing the first element it finds, instead of copying and appending it.

I also plan on adding the ability to specify if fields should edit an element's style, instead of innerHTML. That way we could edit colors, flex-directions and such.

[leomp12]

Have you seen this approach decaporg/decap-cms#2183 (comment) ?