Skip to content

Merge dimodi-patch-1-editor-3036 into production #3038

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 16, 2025
Merged

Merge dimodi-patch-1-editor-3036 into production #3038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d0c7eb
docs(Editor): Improve schema overview
dimodi Jun 16, 2025
3c62c91
Update overview.md
dimodi Jun 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/editor/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ The Blazor HTML Editor has a `Value` parameter, similar to other input component

An empty string is a valid initial Editor `Value`, but after the user interacts with the component, the minimal component `Value` is at least an empty element (usually `"<p></p>"`). Note that [the Editor and the browser treat empty paragraphs differently](slug:editor-kb-missing-br-tags-in-value).

The Editor manages its content and `Value` depending on a [customizable schema](#prosemirror-schema-and-plugins), which defines the allowed HTML tags and attributes. The component strips all other tags and attributes for compliance and security reasons.
The Editor manages its content and `Value` depending on a [customizable schema](#prosemirror-schema-and-plugins). The component strips all other tags and attributes for compliance and security reasons.


## Security
Expand Down Expand Up @@ -90,7 +90,7 @@ The Telerik UI for [Blazor Editor](https://www.telerik.com/blazor-ui/editor) use

## ProseMirror Schema and Plugins

The Editor uses a built-in <a href="https://prosemirror.net/docs/guide/#schema" target="_blank">ProseMirror Schema</a> containing some of the most common HTML tags and a set of predefined <a href="https://prosemirror.net/docs/ref/#state.Plugin_System" target="_blank">ProseMirror Plugins</a> for its basic functionalities. You can customize the default ProseMirror [Schema](slug:editor-prosemirror-schema-overview) and [Plugins](slug:editor-prosemirror-plugins) to achieve the desired functionality in the Editor for Blazor.
The Editor uses a built-in [ProseMirror Schema](https://prosemirror.net/docs/guide/#schema) that includes most of the common HTML tags and a set of predefined [ProseMirror Plugins](https://prosemirror.net/docs/ref/#state.Plugin_System) for its basic functionalities. Find out how to customize the default ProseMirror [Schema](slug:editor-prosemirror-schema-overview) and [Plugins](slug:editor-prosemirror-plugins) to achieve the desired functionality in the Editor for Blazor.

## Editor Parameters

Expand Down
17 changes: 12 additions & 5 deletions components/editor/prosemirror-schema/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,24 @@ position: 0

# ProseMirror Schema Overview

The Telerik UI for Blazor Editor component is based on the <a href="https://prosemirror.net/" target="_blank">ProseMirror library</a>. ProseMirror provides a set of tools and concepts for building rich textual editors, using user interface inspired by the What-You-See-Is-What-You-Get (WYSIWYG).
The Telerik UI for Blazor Editor component is based on the [ProseMirror library](https://prosemirror.net/). ProseMirror provides a set of tools and concepts for building rich textual editors, using user interface inspired by the What-You-See-Is-What-You-Get (WYSIWYG).

## Schema Concept

ProseMirror defines its own data structure, the <a href="https://prosemirror.net/docs/ref/#model.Node" target="_blank">`Node`</a>, to represent content documents. The <a href="https://prosemirror.net/docs/guide/#doc" target="_blank">ProseMirror document</a> is a tree-like structure comprised of nodes. A document is an instance of `Node` with children that are also instances of `Node`.
ProseMirror defines its own data structure, the [`Node`](https://prosemirror.net/docs/ref/#model.Node), to represent content documents. The [ProseMirror document](https://prosemirror.net/docs/guide/#doc) is a tree-like structure comprised of nodes. A document is an instance of `Node` with children that are also instances of `Node`.

Each ProseMirror `document` conforms to a specific <a href="https://prosemirror.net/docs/guide/#schema" target="_blank">schema</a>. Document schemas allow you to edit documents with a custom structure without writing your own editor from scratch.
Each ProseMirror `document` conforms to a specific [schema](https://prosemirror.net/docs/guide/#schema). Document schemas allow you to edit documents with a custom structure without writing your own editor from scratch.

The schema describes all nodes that may occur in the document, the way they are nested, and any marks applied to them. A mark is a piece of information that can be attached to a node. For example, emphasized text, text in code block or a link. It has a type and optionally a set of attributes that provide further information (such as the target of the link).
The Prosemirror schema describes:

For more details, refer to the <a href="https://prosemirror.net/docs/guide/#schema" target="_blank">ProseMirror schema guide</a>.
* All HTML elements and attributes that may occur in the document.
* What tag nesting is allowed.
* What is the order or the HTML attributes.
* What marks can be applied to a HTML node. A mark is a piece of information that can be attached to a node. For example, emphasized text, text in code block or a link. It has a type and optionally a set of attributes that provide further information (such as the target of the link).

As a result, the Editor may automatically modify its initial `Value` on first user interaction.

For more details, refer to the [ProseMirror schema guide](https://prosemirror.net/docs/guide/#schema).

## Editor Schema

Expand Down