Editor.Shell
The default resizable app-shell - a top bar over a three-pane workspace (rail · canvas · inspector) that goes touch-first on mobile.
Editor.Shell is the default layout <Editor.Root /> renders when given no children: a top bar over a resizable three-pane workspace - the left rail (tool palette · Pages · Layers), the canvas, and the inspector. Below 1024px it hands off to a touch-first shell (full-bleed canvas plus slide-up bottom sheets). It is also exported as EditorShell.
You rarely mount it directly - Editor.Root mounts it for you and forwards its display toggles. Reach for Editor.Shell only when you wire the editor contexts yourself.
Usage
The default editor is the shell - configure it through Editor.Root:
import { Editor } from '@docmosaic/react';
// Full editor (shell mounted automatically):
<Editor.Root showRuler showMinimap />
// Display toggles flow straight through to the shell:
<Editor.Root showInspector={false} showLeftRail />;API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| themeToggle | ReactNode | - | Host-injected theme toggle node rendered in the top-bar right group. |
| showLeftRail | boolean | undefined | true | Show the left rail (tool palette + Pages + Layers). Defaults to |
| showToolPalette | boolean | undefined | true | Show the tool palette inside the left rail. Defaults to |
| showPages | boolean | undefined | true | Show the "Pages" section inside the left rail. Defaults to |
| showLayers | boolean | undefined | true | Show the "Layers" section inside the left rail. Defaults to |
| showInspector | boolean | undefined | true | Show the right inspector panel. Defaults to |
| children | ReactNode | - | Extra nodes rendered after the shell
|
Related
- Editor.Root - mounts the shell by default
- Mobile & touch support - the responsive shell below 1024px
- Editor.Canvas - the workspace at the center of the shell