Server-Side
Server-side rendering.
Using Plate in a Server Environment
Plate can be utilized in server-side environments, enabling operations like content manipulation without a browser. This is particularly useful for scenarios such as generating static content, processing editor content on the server, or working with React Server Components.
Creating a Server-Side Editor
To use Plate on the server, you can leverage the createSlateEditorfunction. This allows you to create and manipulate Slate documents without a DOM environment.
Example: Generating Markdown in a React Server Component
Here's the output of Plate generating Markdown from a Slate value within a React Server Component:
Heading 1
This is a top-level heading, typically used for main titles and major section headers.
Heading 2
Secondary headings help organize content into clear sections and subsections.
Heading 3
Third-level headings provide further content structure and hierarchy.
"Blockquotes are perfect for highlighting important information, quotes from external sources, or emphasizing key points in your content."
Use headings to create a clear document structure that helps readers navigate your content effectively. Combine them with blockquotes to emphasize important information.
Horizontal rules help visually separate different sections of your content, creating clear breaks between topics or ideas.
Text Formatting
Add style and emphasis to your text using various formatting options.
Make text bold, italic, <u>underlined</u>, or apply a <u>combination</u> of these styles for emphasis.
Add strikethrough to indicate deleted content, use inline code for technical terms, or <mark>highlight</mark> important information.
Format mathematical expressions with <sub>subscript</sub> and <sup>superscript</sup> text.
Show keyboard shortcuts like <kbd>⌘ + B</kbd> for bold or <kbd>⌘ + I</kbd> for italic formatting.