Skip to content

Commit 56b01da

Browse files
Kokila13081999Kokila13081999
committed
988174: Review corrections addressed
1 parent 7aa9386 commit 56b01da

File tree

15 files changed

+841
-187
lines changed

15 files changed

+841
-187
lines changed

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<p>Your promotional code expires on: <span contenteditable=""false"" class=""e-mention-chip""><span>{{ExpirationDate}}</span></span>.</p>
1111
<p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href=""mailto:{{SupportEmail}}""><span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportPhoneNumber}}</span></span>.</p>
1212
<p>Best regards,<br>The <span contenteditable=""false"" class=""e-mention-chip""><span>{{CompanyName}}</span></span> Team</p>";
13-
char mentionChar = '{';
13+
char mentionChar = '{{';
1414
var tools = new object[]
1515
{
1616
"Bold",

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<p>Your promotional code expires on: <span contenteditable=""false"" class=""e-mention-chip""><span>{{ExpirationDate}}</span></span>.</p>
77
<p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href=""mailto:{{SupportEmail}}""><span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportPhoneNumber}}</span></span>.</p>
88
<p>Best regards,<br>The <span contenteditable=""false"" class=""e-mention-chip""><span>{{CompanyName}}</span></span> Team</p>";
9-
char mentionChar = '{';
9+
char mentionChar = '{{';
1010
var tools = new object[]
1111
{
1212
"Bold",

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
List<EmployeeData> data = new EmployeeData().EmployeeList();
33

44
string value = @"<p>Hello <span contenteditable=""false"" class=""e-mention-chip""><a title=""maria@gmail.com"">@@Maria</a></span>&#8203;</p>
5-
<p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>";
5+
<p> Type <code>@@</code> followed by at least <strong>3 characters</strong> to trigger the suggestion list.</p>";
66
}
77

88
@Html.EJS().RichTextEditor("mentionIntegration").Value(value).Render()

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/tagHelper‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
List<EmployeeData> data = new EmployeeData().EmployeeList();
33

44
string value = @"<p>Hello <span contenteditable=""false"" class=""e-mention-chip""><a title=""maria@gmail.com"">@@Maria</a></span>&#8203;</p>
5-
<p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>";
5+
<p> Type <code>@@</code> followed by at least <strong>3 characters</strong> to trigger the suggestion list.</p>";
66
}
77

88
<ejs-richtexteditor id="mention_integration" placeholder="Type @@ and tag the name" value="@value"></ejs-richtexteditor>
99

10-
<ejs-mention id="mention" target="#mention_integration_rte-edit-view" dataSource="@data" minLength="3" suggestionCount="8" >
10+
<ejs-mention id="mention" target="#mention_integration_rte-edit-view" dataSource="@data" minLength="3">
1111
<e-mention-fields text="Name" Value="EmailId"></e-mention-fields>
1212
</ejs-mention>

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/razor‎

Lines changed: 2 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -2,68 +2,9 @@
22
List<EmployeeData> data = new EmployeeData().EmployeeList();
33

44
string value = @"<p>Hello <span contenteditable=""false"" class=""e-mention-chip""><a title=""maria@gmail.com"">@@Maria</a></span>&#8203;</p>
5-
<p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>";
5+
<p>The suggestion list displays only 5 items when typing the &#64; character, as the data source contains a large set of entries</p>";
66
}
77

88
@Html.EJS().RichTextEditor("mentionIntegration").Value(value).Render()
99

10-
@Html.EJS().Mention("mentionRTE").Target("#mentionIntegration_rte-edit-view").DataSource((IEnumerable<EmployeeData>)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name", Value="EmailId" }).SuggestionCount(5).Render()
11-
12-
<style>
13-
#mention-TemplateList {
14-
position: relative;
15-
display: inline-block;
16-
padding:2px;
17-
}
18-
19-
.person, .email {
20-
display: block;
21-
line-height: 20px;
22-
text-indent: 5px;
23-
}
24-
25-
.person {
26-
font-size: 16px;
27-
}
28-
29-
.mentionEmpImage {
30-
display: inline-block;
31-
width: 46px;
32-
height: 46px;
33-
padding: 3px;
34-
border-radius: 25px;
35-
}
36-
37-
#mention-TemplateList .e-badge-success {
38-
left: 76%;
39-
bottom: 4px;
40-
top: auto;
41-
}
42-
43-
#mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {
44-
line-height: 8px;
45-
}
46-
47-
#mention-TemplateList .e-badge-success {
48-
background-color: #4d841d;
49-
color: #fff;
50-
}
51-
52-
#mention-TemplateList .e-badge-success.away {
53-
background-color: #fedd2d;
54-
color: #fff;
55-
}
56-
57-
#mention-TemplateList .e-badge-success.busy {
58-
background-color: #de1a1a;
59-
color: #fff;
60-
}
61-
62-
#mention-TemplateList .e-badge.e-badge-dot {
63-
height: 10px;
64-
width: 10px;
65-
}
66-
#mentionIntegration .e-mention-chip{
67-
cursor: pointer;
68-
}
69-
</style>
10+
@Html.EJS().Mention("mentionRTE").Target("#mentionIntegration_rte-edit-view").DataSource((IEnumerable<EmployeeData>)data).suggestionCount(5).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name", Value="EmailId" }).Render()

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-suggestion-count/tagHelper‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
List<EmployeeData> data = new EmployeeData().EmployeeList();
33

44
string value = @"<p>Hello <span contenteditable=""false"" class=""e-mention-chip""><a title=""maria@gmail.com"">@@Maria</a></span>&#8203;</p>
5-
<p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>";
5+
<p>The suggestion list displays only 5 items when typing the &#64; character, as the data source contains a large set of entries</p>";
66
}
77

88
<ejs-richtexteditor id="mention_integration" placeholder="Type @@ and tag the name" value="@value"></ejs-richtexteditor>

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,49 @@
2424
const realLength = panel.firstChild.firstChild.textContent.length;
2525
rangeObj.max = realLength;
2626
rangeObj.dataBind();
27+
// Focus the editor to activate selection
28+
panel.focus();
29+
30+
// Apply initial selection
31+
onChange({ value: rangeObj.value });
2732
});
2833
});
2934

3035
function onChange(args) {
3136
const [start, end] = args.value;
3237
const panel = editorObj.contentModule.getEditPanel();
33-
const textNode = panel.firstChild.firstChild;
34-
const maxLength = textNode.length;
38+
const maxLength = panel.textContent.length;
3539

40+
// Ensure start and end are within valid bounds
3641
const safeStart = Math.min(start, maxLength);
3742
const safeEnd = Math.min(end, maxLength);
3843

39-
const range = document.createRange();
40-
range.setStart(textNode, safeStart);
41-
range.setEnd(textNode, safeEnd);
42-
window.getSelection().removeAllRanges();
43-
window.getSelection().addRange(range);
44+
// Find the text node and relative offset for both start and end
45+
const startInfo = getTextNodeAtOffset(panel, safeStart);
46+
const endInfo = getTextNodeAtOffset(panel, safeEnd);
47+
48+
if (startInfo && endInfo) {
49+
const range = document.createRange();
50+
range.setStart(startInfo.node, startInfo.offset);
51+
range.setEnd(endInfo.node, endInfo.offset);
52+
const selection = window.getSelection();
53+
selection.removeAllRanges();
54+
selection.addRange(range);
55+
}
4456
}
57+
58+
function getTextNodeAtOffset(root: Node, offset: number): { node: Text; offset: number } | null {
59+
let currentOffset = 0;
60+
const walker: TreeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
61+
while (walker.nextNode()) {
62+
const node = walker.currentNode as Text;
63+
const nodeLength = node.textContent.length;
64+
if (currentOffset + nodeLength >= offset) {
65+
return { node, offset: offset - currentOffset };
66+
}
67+
currentOffset += nodeLength;
68+
}
69+
return null;
70+
}
71+
4572
</script>

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,22 +30,48 @@ var sliderValue = new int[] { 0, 50 };
3030
const realLength = panel.firstChild.firstChild.textContent.length;
3131
rangeObj.max = realLength;
3232
rangeObj.dataBind();
33+
// Focus the editor to activate selection
34+
panel.focus();
35+
36+
// Apply initial selection
37+
onChange({ value: rangeObj.value });
3338
});
3439
});
3540

3641
function onChange(args) {
3742
const [start, end] = args.value;
3843
const panel = editorObj.contentModule.getEditPanel();
39-
const textNode = panel.firstChild.firstChild;
40-
const maxLength = textNode.length;
44+
const maxLength = panel.textContent.length;
4145

46+
// Ensure start and end are within valid bounds
4247
const safeStart = Math.min(start, maxLength);
4348
const safeEnd = Math.min(end, maxLength);
4449

45-
const range = document.createRange();
46-
range.setStart(textNode, safeStart);
47-
range.setEnd(textNode, safeEnd);
48-
window.getSelection().removeAllRanges();
49-
window.getSelection().addRange(range);
50+
// Find the text node and relative offset for both start and end
51+
const startInfo = getTextNodeAtOffset(panel, safeStart);
52+
const endInfo = getTextNodeAtOffset(panel, safeEnd);
53+
54+
if (startInfo && endInfo) {
55+
const range = document.createRange();
56+
range.setStart(startInfo.node, startInfo.offset);
57+
range.setEnd(endInfo.node, endInfo.offset);
58+
const selection = window.getSelection();
59+
selection.removeAllRanges();
60+
selection.addRange(range);
61+
}
62+
}
63+
64+
function getTextNodeAtOffset(root: Node, offset: number): { node: Text; offset: number } | null {
65+
let currentOffset = 0;
66+
const walker: TreeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
67+
while (walker.nextNode()) {
68+
const node = walker.currentNode as Text;
69+
const nodeLength = node.textContent.length;
70+
if (currentOffset + nodeLength >= offset) {
71+
return { node, offset: offset - currentOffset };
72+
}
73+
currentOffset += nodeLength;
74+
}
75+
return null;
5076
}
5177
</script>

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/controller.cs‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/razor‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

Comments
 (0)