Flow Layout

layout: "flow" mounts the regular editor as one full-width block flow, for embedding Stesura blocks in a host UI. There are no pages: width comes from the container, height grows with the content, and the host page scrolls. The schema is unchanged, so a flow document is a page document and the two kinds of mount can collaborate on it.

Setup

"use client";
 
import { EditorLoadingState, flowPluginOptions, useLocalEditor } from "@stesura/editor-react";
import dynamic from "next/dynamic";
 
const FlowEditor = dynamic(
  () => import("@stesura/editor-react").then((m) => m.FlowEditor),
  { ssr: false, loading: () => <EditorLoadingState /> }
);
 
export function BlockEditor() {
  const { editorState, dispatch, pluginFactory, schema } = useLocalEditor({
    configuration: { config: { layout: "flow" } },
    pluginOptions: flowPluginOptions,
  });
 
  return (
    <FlowEditor
      state={editorState}
      dispatchTransaction={dispatch}
      schema={schema}
      pluginFactory={pluginFactory}
    />
  );
}

Flow layout

The root exports FlowEditor (layout="flow", compact ribbon, no default panels) and flowPluginOptions. The mount must also set configuration: { config: { layout: "flow" } }, which arms the flow guard and makes break and section commands refuse. No pagination (dev warns).

FlowEditor takes every StesuraEditor prop except layout and printMode. Plain StesuraEditor works too: pass layout="flow" and set the same config. The layout config is read at mount and never changes on a live editor.

What flow renders

• No page box, size, margins, shadow, ruler, zoom, status bar, headers/footers, watermark, page borders, columns, line numbers or document background color.
• Indents, lists, tables, images and automation nodes work as in a page. A negative indent stops at the container edge.
• Tables and images wider than the container are drawn scaled down to fit; their stored sizes are kept. New tables and images are sized to the measured width.
• The toolbar hides the Page, Header & Footer and View tabs and the page-break group. Side panels open as drawers. The comment rail sits beside the flow and narrows it.

Page data is kept, hidden and locked

Sections, section attributes, headers/footers and page or column breaks stay in the document, invisible. Local transactions may not:

• add a section, or a page or column break (pasted breaks are dropped);
• change section attributes or the page-only document attributes (FLOW_LOCKED_DOC_ATTRS: docBgColor, pageBordersSurroundHeader, pageBordersSurroundFooter);
• edit header/footer content (reverted, even with enableHeaderFooterEdits).

Remote (collab$), undo/redo and systemEdit transactions pass: a page-layout collaborator may add a section at any time, and flow renders it as part of the flow. Removing a section is allowed: Backspace at the start of a hidden section joins it to the one before, as the text suggests. In a shared document that also drops the merged section’s page setup for page-layout collaborators. Refused edits raise a flowLayoutLocked toast.

Width

The editor measures the content box with a ResizeObserver and publishes it to the contentWidth editor store. Core reads it through getContentWidth(state, pos) and getFlowContentWidth(state) (@stesura/core/helpers); before the first measurement they fall back to a default page’s content width.

Not yet decided

• Footnotes and endnotes have no page to sit on. Their insertion is not disabled yet.
• DOCX and PDF export of a flow mount still use the document’s page setup.