Skip to content

chore(Editor): fix examples #2646

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
Dec 19, 2024
Merged

chore(Editor): fix examples #2646

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
242ec25
chore(Editor): fix examples
ntacheva Dec 16, 2024
608951e
Update editor-add-icons.md
dimodi Dec 19, 2024
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
21 changes: 13 additions & 8 deletions knowledge-base/editor-add-icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,14 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
@inject IJSRuntime js

<TelerikEditor @bind-Value="@EditorValue"
Tools="@EditorTools"
Tools="@EditorToolSets.All"
Schema="schemaProvider"
Height="300px">
</TelerikEditor>

@code {
private string EditorValue { get; set; } = @"<p>Here is an example icon in the Editor content <i class='fa fa-info-circle'></i></p>";

private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() { new ViewHtml() };

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
Expand Down Expand Up @@ -103,9 +101,13 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
const schema = args.getSchema();
const Schema = args.ProseMirror.Schema

// remove the default i mark that does not support the class attribute
let marks = schema.spec.marks.remove("i");

// add the modified i as a node
let nodes = schema.spec.nodes.addToEnd("i", iconNode);

const newSchema = new Schema({ nodes });
const newSchema = new Schema({ nodes, marks });
return newSchema;
}

Expand Down Expand Up @@ -155,7 +157,7 @@ Make sure to use the correct way and resources for your actual project *@
@code {
private string EditorValue { get; set; } = @"Here is an example icon in the Editor content <i class='fa fa-info-circle'></i>";

private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() { new ViewHtml() };
private List<IEditorTool> EditorTools { get; set; } = EditorToolSets.All;
}

@* Move JavaScript code to a separate JS file in production *@
Expand Down Expand Up @@ -185,16 +187,19 @@ Make sure to use the correct way and resources for your actual project *@
return ["i", attrs];
},
};
debugger

//add the icon node to the Editor ProseMirror schema
window.schemaProvider = (args) => {
const schema = args.getSchema();
const Schema = args.ProseMirror.Schema

// remove the default i mark that does not support the class attribute
let marks = schema.spec.marks.remove("i");

// add the modified i as a node
let nodes = schema.spec.nodes.addToEnd("i", iconNode);

const newSchema = new Schema({ nodes });
const newSchema = new Schema({ nodes, marks });
return newSchema;
}

Expand All @@ -204,4 +209,4 @@ Make sure to use the correct way and resources for your actual project *@
## See Also

* [Custom Editor Tools]({%slug editor-custom-tools%})
* [Modify the ProseMirror Schema]({%slug editor-modify-default-schema%})
* [Modify the ProseMirror Schema]({%slug editor-modify-default-schema%})
Loading