kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3585 from sbwalker/dev

Browse Source 
add an AllowRichText parameter to the RichTextEditor component and add logic to handle JS Interop failures
This commit is contained in:
Shaun Walker 2023-12-20 16:59:06 -05:00 committed by GitHub
commit e99df58bce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 118 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
Oqtane.Client/Modules/Controls/RichTextEditor.razor
View File

@ -6,7 +6,9 @@
<div class="row" style="margin-bottom: 50px;"> <div class="row" style="margin-bottom: 50px;">
<div class="col"> <div class="col">
<TabStrip ActiveTab="@_activeTab"> <TabStrip>
@if (AllowRichText)
{
<TabPanel Name="Rich" Heading="Rich Text Editor" ResourceKey="RichTextEditor"> <TabPanel Name="Rich" Heading="Rich Text Editor" ResourceKey="RichTextEditor">
@if (_richfilemanager) @if (_richfilemanager)
{ {
@ -17,7 +19,9 @@
<div class="d-flex justify-content-center mb-2"> <div class="d-flex justify-content-center mb-2">
@if (AllowRawHtml) @if (AllowRawHtml)
{ {
<button type="button" class="btn btn-secondary" @onclick="RefreshRichText">@Localizer["SynchronizeContent"]</button>@((MarkupString)"&nbsp;&nbsp;") <button type="button" class="btn btn-secondary" @onclick="RefreshRichText">@Localizer["SynchronizeContent"]</button>
@((MarkupString)"&nbsp;&nbsp;")
} }
@if (AllowFileManagement) @if (AllowFileManagement)
{ {
@ -70,6 +74,7 @@
</div> </div>
</div> </div>
</TabPanel> </TabPanel>
}
@if (AllowRawHtml) @if (AllowRawHtml)
{ {
<TabPanel Name="Raw" Heading="Raw HTML Editor" ResourceKey="HtmlEditor"> <TabPanel Name="Raw" Heading="Raw HTML Editor" ResourceKey="HtmlEditor">
@ -106,7 +111,6 @@
</div> </div>
@code { @code {
private string _activeTab = "Rich";
private ElementReference _editorElement; private ElementReference _editorElement;
private ElementReference _toolBar; private ElementReference _toolBar;
private bool _richfilemanager = false; private bool _richfilemanager = false;
@ -130,6 +134,9 @@
[Parameter] [Parameter]
public bool AllowFileManagement { get; set; } = true; public bool AllowFileManagement { get; set; } = true;
[Parameter]
public bool AllowRichText { get; set; } = true;
[Parameter] [Parameter]
public bool AllowRawHtml { get; set; } = true; public bool AllowRawHtml { get; set; } = true;
@ -175,14 +182,11 @@
await interop.LoadEditorContent(_editorElement, _richhtml); await interop.LoadEditorContent(_editorElement, _richhtml);
if (AllowRichText)
{
// preserve a copy of the rich text content (Quill sanitizes content so we need to retrieve it from the editor) // preserve a copy of the rich text content (Quill sanitizes content so we need to retrieve it from the editor)
_originalrichhtml = await interop.GetHtml(_editorElement); _originalrichhtml = await interop.GetHtml(_editorElement);
if (_originalrichhtml != _originalrawhtml)
{
_activeTab = "Raw";
StateHasChanged();
} }
} }
} }
@ -221,11 +225,16 @@
return _rawhtml; return _rawhtml;
} }
else else
{
var richhtml = "";
if (AllowRichText)
{ {
// return rich text content if it has changed // return rich text content if it has changed
var interop = new RichTextEditorInterop(JSRuntime); var interop = new RichTextEditorInterop(JSRuntime);
var richhtml = await interop.GetHtml(_editorElement); richhtml = await interop.GetHtml(_editorElement);
if (richhtml != _originalrichhtml) }
// rich text value will only be blank if AllowRichText is disabled or the JS Interop method failed
if (richhtml != _originalrichhtml && !string.IsNullOrEmpty(richhtml) && !string.IsNullOrEmpty(_originalrichhtml))
{ {
return richhtml; return richhtml;
} }