Overview

Summary generated from the README

Adds a fullscreen mode to the Lexical rich text editor in the Payload admin. It is added as a Lexical feature in the editor configuration alongside the default features, and works with the optional fixed toolbar. Targets Payload 3.

Features

Fullscreen toggle for Lexical rich text fields
Registered as a Lexical feature via FullscreenEditorFeature
Works alongside the optional fixed toolbar feature
Includes translations

Use cases

Write long-form content in a distraction-free fullscreen editor
Give editors more room when working with large rich text fields

Installation

npm i @payload-bites/fullscreen-editor

Health Score

68/100Good

Composite score based on GitHub activity, stars, npm downloads, publish recency, dependency count, and package size.

Badge for your README

Markdown

[![Payload Directory](https://payloaddirectory.dev/badge/908347705-fullscreen-editor.svg)](https://payloaddirectory.dev/plugins/908347705-fullscreen-editor)

HTML

<a href="https://payloaddirectory.dev/plugins/908347705-fullscreen-editor"><img src="https://payloaddirectory.dev/badge/908347705-fullscreen-editor.svg" alt="Payload Directory"></a>

README

Fullscreen editor

Provides a fullscreen mode for the lexical rich text editor.

https://github.com/user-attachments/assets/22ba5cf7-6cb2-4695-8dbf-f06b37c77b66

Quick start

Install the plugin:

pnpm add @payload-bites/fullscreen-editor

Add the feature to your lexical editor in payload.config.ts:

// ...
import { FullscreenEditorFeature } from "@payload-bites/fullscreen-editor";

export default buildConfig({
  // ...
  editor: lexicalEditor({
    features: ({ defaultFeatures }) => [
      ...defaultFeatures,
      // ...
      FixedToolbarFeature(), // optional
      FullscreenEditorFeature(),
    ],
  }),
});

Caveats

If fullscreen mode is enabled and you resize your browser screen across the 768px threshold, the rich-text field remounts which causes the ".focused-editor" class to be removed, leaving you with a blank screen. To fix this you need to either refresh the browser or remove the ".focus-mode" class from the body element using your browser dev tools.

Roadmap

Focus trap around editor in fullscreen mode.
Translations.

fullscreen editor