Skip to content

Commit 5fc88d6

Browse files
ReneSchwarzerReneSchwarzer
committed
feat: switch to project-specific WYSIWYG editor
1 parent 5a413d7 commit 5fc88d6

20 files changed

Lines changed: 1534 additions & 52 deletions

‎src/WebExpress.WebUI.Test/WebControl/UnitTestControlFormItemInputTextBox.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ public void Name(string name, string expected)
8686
[Theory]
8787
[InlineData(TypeEditTextFormat.Default, @"<input type=""text"" class=""form-control"">")]
8888
[InlineData(TypeEditTextFormat.Multiline, @"<textarea class=""form-control"" rows=""8""></textarea>")]
89-
[InlineData(TypeEditTextFormat.Wysiwyg, @"<textarea id=""*"" class=""form-control"" rows=""8""></textarea>")]
89+
[InlineData(TypeEditTextFormat.Wysiwyg, @"<div class=""wx-webui-editor form-control""></div>")]
9090
public void Format(TypeEditTextFormat format, string expected)
9191
{
9292
// preconditions

‎src/WebExpress.WebUI/Assets/css/summernote-bs5.min.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/WebExpress.WebUI/Assets/css/webexpress.webui.editor.css‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
.wx-editor {
2+
background-color: var(--bs-body-bg);
3+
color: var(--bs-body-color);
4+
}
5+
6+
.wx-editor-toolbar {
7+
border-bottom: 1px solid var(--bs-border-color);
8+
}
9+
10+
.wx-editor-content {
11+
min-height: 200px;
12+
padding: 5px;
13+
white-space: normal;
14+
overflow: auto;
15+
}
16+
17+
.wx-editor-content:focus {
18+
outline: none;
19+
}
20+
21+
.wx-editor-format-dropdown {
22+
background: transparent;
23+
border: none;
24+
padding: 0.5em;
25+
font-size: 16px;
26+
color: var(--bs-body-color);
27+
transition: all 0.3s ease-in-out;
28+
cursor: pointer;
29+
}
30+
31+
.wx-editor-format-dropdown:hover {
32+
background-color: var(--bs-secondary-bg);
33+
border-radius: 4px;
34+
}
35+
36+
.wx-editor-format-dropdown:focus {
37+
outline: none;
38+
background-color: var(--bs-secondary-bg);
39+
}
40+
41+
.wx-editor-btn-group {
42+
display: inline-flex;
43+
align-items: center;
44+
gap: 6px;
45+
}
46+
47+
.wx-editor-btn {
48+
background: transparent;
49+
border: none;
50+
padding: 0.5em;
51+
color: var(--bs-body-color);
52+
transition: all 0.3s ease-in-out;
53+
display: inline-flex;
54+
align-items: center;
55+
justify-content: center;
56+
}
57+
58+
.wx-editor-btn i {
59+
margin-right: 4px;
60+
}
61+
62+
.wx-editor-btn:hover {
63+
background-color: var(--bs-secondary-bg);
64+
border-radius: 4px;
65+
}
66+
67+
.wx-editor-btn.active {
68+
background-color: var(--bs-primary);
69+
color: #ffffff; /* White text for better contrast */
70+
border-radius: 4px;
71+
font-weight: bold;
72+
}
73+
74+
.wx-editor-color-picker {
75+
display: grid;
76+
grid-template-columns: repeat(5, 24px);
77+
gap: 5px;
78+
padding-left: 0.5em;
79+
padding-right: 0.5em;
80+
list-style: none;
81+
margin: 0;
82+
}
83+
84+
.wx-editor-color-picker button {
85+
width: 24px;
86+
height: 24px;
87+
border: none;
88+
cursor: pointer;
89+
display: inline-block;
90+
border-radius: 4px;
91+
}
92+
93+
.wx-editor-color-picker button:hover {
94+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
95+
}
96+
97+
.wx-editor-insertable-grid {
98+
display: grid;
99+
grid-template-columns: repeat(5, 24px);
100+
grid-template-rows: repeat(5, 24px);
101+
gap: 2px;
102+
margin-bottom: 6px;
103+
}
104+
105+
.wx-editor-insertable-cell {
106+
width: 24px;
107+
height: 24px;
108+
border: 1px solid var(--bs-border-color, #dee2e6);
109+
background: var(--bs-body-bg, #fff);
110+
cursor: pointer;
111+
box-sizing: border-box;
112+
transition: background 0.1s, border-color 0.1s;
113+
}
114+
115+
.wx-editor-insertable-cell.selected {
116+
background: var(--bs-info, #337ab7);
117+
border-color: var(--bs-info-border-subtle, #23527c);
118+
}
119+
120+
.wx-editor-table-size-display {
121+
margin-top: 8px;
122+
font-size: smaller;
123+
text-align: center;
124+
color: var(--bs-secondary-color, #495057);
125+
}
126+
127+
.wx-editor-separator {
128+
display: inline-block;
129+
width: 1px;
130+
height: 1em;
131+
background-color: var(--bs-border-color);
132+
margin: 0 0.5em;
133+
}
134+
135+
.wx-editor-table,
136+
.wx-editor-table th,
137+
.wx-editor-table td {
138+
border: 1px solid var(--bs-border-color, #dee2e6);
139+
border-collapse: collapse;
140+
}
141+
142+
.wx-editor-table {
143+
width: 80%;
144+
margin-bottom: 1rem;
145+
}
146+
147+
.wx-editor-table th {
148+
background-color: var(--bs-secondary-bg, #e9ecef);
149+
color: var(--bs-secondary-color, #495057);
150+
font-weight: bold;
151+
text-align: left;
152+
padding: 0.5rem;
153+
min-height: 1em;
154+
}
155+
156+
.wx-editor-table td {
157+
padding: 0.5rem;
158+
background-color: var(--bs-table-bg, #fff);
159+
min-height: 1em;
160+
}
161+
162+
.wx-icon {
163+
display: flex;
164+
align-items: center;
165+
justify-content: center;
166+
}
167+
168+
.wx-icon.add-row-above::before {
169+
content: url('data:image/svg+xml;utf8,<svg width="18" viewBox="0 0 21 16" xmlns="http://www.w3.org/2000/svg"><path d="M 4.3417969 1.3925781 C 4.1201969 1.3925781 3.9414062 1.5713687 3.9414062 1.7929688 L 3.9414062 3.7871094 L 1.9472656 3.7773438 C 1.7256681 3.7762837 1.5479308 3.9522306 1.546875 4.1738281 L 1.5390625 5.5117188 C 1.5380025 5.7333158 1.7159025 5.9110544 1.9375 5.9121094 L 3.9414062 5.921875 L 3.9414062 7.9257812 C 3.9414062 8.1473813 4.1201969 8.3261719 4.3417969 8.3261719 L 5.6777344 8.3261719 C 5.8993344 8.3261719 6.078125 8.1473812 6.078125 7.9257812 L 6.078125 5.9316406 L 8.0722656 5.9414062 C 8.2938626 5.9424662 8.4716003 5.7665189 8.4726562 5.5449219 L 8.4804688 4.2070312 C 8.4815687 3.9854339 8.3036282 3.8076964 8.0820312 3.8066406 L 6.078125 3.796875 L 6.078125 1.7929688 C 6.078125 1.5713686 5.8993344 1.3925781 5.6777344 1.3925781 L 4.3417969 1.3925781 z M 10.037109 5.8847656 L 10.037109 7.71875 L 17.511719 7.71875 C 17.759429 7.71875 17.957031 7.9183062 17.957031 8.1660156 L 17.957031 12.833984 C 17.957031 13.081694 17.759429 13.28125 17.511719 13.28125 L 3.4882812 13.28125 C 3.2405715 13.28125 3.0429685 13.081694 3.0429688 12.833984 L 3.0429688 10.037109 L 1.0058594 10.037109 L 1.0058594 14.716797 C 1.0058594 14.938397 1.18465 15.115234 1.40625 15.115234 L 19.59375 15.115234 C 19.81535 15.115234 19.994141 14.938398 19.994141 14.716797 L 19.994141 6.2832031 C 19.994141 6.0616031 19.81535 5.8847656 19.59375 5.8847656 L 10.037109 5.8847656 z"/></svg>');
170+
}
171+
172+
.wx-icon.add-row-below::before {
173+
content: url('data:image/svg+xml;utf8,<svg width="18" viewBox="0 0 18 15" xmlns="http://www.w3.org/2000/svg"><path d="M 0.4003906,0 C 0.1787906,0 0,0.1768375 0,0.3984375 V 5.0781254 H 2.0371094 V 2.28125 c -2e-7,-0.24771 0.1976027,-0.4472656 0.4453124,-0.4472656 H 16.50586 c 0.24771,0 0.445312,0.1995556 0.445312,0.4472656 v 4.6679684 c 0,0.247709 -0.197602,0.447266 -0.445312,0.447266 H 9.0312496 v 1.833984 h 9.5566414 c 0.2216,0 0.400391,-0.176836 0.400391,-0.398437 V 0.3984375 C 18.988282,0.1768365 18.809491,0 18.587891,0 Z m 2.9355469,7.5078124 c -0.2216,0 -0.4003907,0.17879 -0.4003907,0.400391 v 1.99414 l -1.9941406,-0.0098 C 0.7198087,9.8914784 0.5420714,10.067464 0.5410156,10.289062 l -0.00781,1.337891 c -0.00106,0.221597 0.17684,0.399336 0.3984375,0.40039 l 2.0039062,0.0098 v 2.003906 c 0,0.2216 0.1787907,0.400391 0.4003907,0.400391 h 1.3359375 c 0.2216,0 0.4003906,-0.178791 0.4003906,-0.400391 v -1.99414 l 1.9941406,0.0098 c 0.221597,0.0011 0.3993347,-0.174888 0.4003906,-0.396484 l 0.00781,-1.337891 C 7.4757093,10.100736 7.2977687,9.9230004 7.0761717,9.9219444 l -2.0039062,-0.0098 v -2.003906 c 0,-0.2216 -0.1787906,-0.400391 -0.4003906,-0.400391 z"/></svg>');
174+
}

‎src/WebExpress.WebUI/Assets/js/summernote-bs5.min.js‎

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

‎src/WebExpress.WebUI/Assets/js/webexpress.webui.button.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ webexpress.webui.ButtonCtrl = class extends webexpress.webui.Ctrl {
3030
// Attach the click event listener
3131
$(element).click(() => {
3232
$(document).trigger(webexpress.webui.Event.CLICK_EVENT, {
33+
sender: this._element,
3334
id: $(this._element).attr("id") || null
3435
});
3536
});

‎src/WebExpress.WebUI/Assets/js/webexpress.webui.dropdownbutton.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,14 +95,15 @@ webexpress.webui.DropdownButtonCtrl = class extends webexpress.webui.Ctrl {
9595
if (!item.disabled) {
9696
const link = $("<a class='link dropdown-item'/>")
9797
.addClass(item.color)
98-
.attr("href", "#");
98+
.attr("href", "javascript:void(0);");
9999

100100
if (item.image) link.append($("<img/>").attr("src", item.image).attr("alt", item.content));
101101
if (item.icon) link.append($("<i/>").addClass(item.icon));
102102
link.append($("<span/>").text(item.content));
103103

104104
link.click(() => {
105105
$(document).trigger(webexpress.webui.Event.CLICK_EVENT, {
106+
sender: this._element,
106107
id: $(this._element).attr("id") || null,
107108
item: item
108109
});

0 commit comments

Comments
 (0)