Skip to content

Commit d499791

Browse files
LucienMLDLucienMLD
committed
Add support for text color customization in Draftail, including blue and white text options, with corresponding CSS and JS for color dropdown functionality
1 parent 2bafaf5 commit d499791

File tree

4 files changed

+576
-42
lines changed

4 files changed

+576
-42
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,3 +149,4 @@ dmypy.json
149149
config.json
150150
cron.json
151151
temp.json
152+
.local/

‎content_manager/static/content_manager/css/text-colors-dropdown.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
.color-option:hover {
2+
background-color: #f5f5f5;
3+
}
4+
5+
.Draftail-Toolbar .color-dropdown-wrapper .Draftail-ToolbarButton {
6+
margin: 0;
7+
}
8+
9+
.cmsfr-text--blue {
10+
color: var(--bf500);
11+
}
12+
13+
.cmsfr-text--white {
14+
color: #ffffff;
15+
}
16+
17+
.public-DraftStyleDefault-block .cmsfr-text--white {
18+
background-color: var(--g800);
19+
padding: 0 2px;
20+
}
21+
22+
/* Styles pour l'éditeur Draftail */
23+
.DraftEditor-editorContainer .cmsfr-text--blue,
24+
.public-DraftEditor-content .cmsfr-text--blue,
25+
[contenteditable] .cmsfr-text--blue {
26+
color: var(--bf500) !important;
27+
}
28+
29+
.DraftEditor-editorContainer .cmsfr-text--white,
30+
.public-DraftEditor-content .cmsfr-text--white,
31+
[contenteditable] .cmsfr-text--white {
32+
color: #ffffff !important;
33+
background-color: var(--g800) !important;
34+
padding: 1px 3px !important;
35+
border-radius: 2px !important;
36+
text-shadow: none !important;
37+
}
38+
39+
/* Styles Draftail pour les inline styles */
40+
.public-DraftStyleDefault-ltr .BLUETEXT {
41+
color: var(--bf500) !important;
42+
display: inline !important;
43+
visibility: visible !important;
44+
}
45+
46+
.public-DraftStyleDefault-ltr .WHITETEXT {
47+
color: #ffffff !important;
48+
background-color: var(--g800) !important;
49+
padding: 2px 4px !important;
50+
border-radius: 3px !important;
51+
outline: 1px solid #999999 !important;
52+
outline-offset: -1px !important;
53+
display: inline !important;
54+
visibility: visible !important;
55+
}
56+
57+
58+
/* Style plus spécifique pour Draftail */
59+
.DraftEditor-root .public-DraftStyleDefault-ltr .BLUETEXT {
60+
color: var(--bf500) !important;
61+
display: inline !important;
62+
visibility: visible !important;
63+
}
64+
65+
.DraftEditor-root .public-DraftStyleDefault-ltr .WHITETEXT {
66+
color: #ffffff !important;
67+
background-color: var(--g800) !important;
68+
padding: 2px 4px !important;
69+
border-radius: 3px !important;
70+
outline: 1px solid #999999 !important;
71+
outline-offset: -1px !important;
72+
cursor: text !important;
73+
display: inline !important;
74+
visibility: visible !important;
75+
}
76+
77+
/* Améliorer la sélection du texte blanc */
78+
.DraftEditor-root .public-DraftStyleDefault-ltr .WHITETEXT::selection {
79+
background-color: #0078d4 !important;
80+
color: #ffffff !important;
81+
}
82+
83+
.DraftEditor-root .public-DraftStyleDefault-ltr .WHITETEXT::-moz-selection {
84+
background-color: #0078d4 !important;
85+
color: #ffffff !important;
86+
}
87+
88+
/* Assurer que le texte blanc reste sélectionnable */
89+
.DraftEditor-root .public-DraftStyleDefault-ltr .WHITETEXT {
90+
user-select: text !important;
91+
-webkit-user-select: text !important;
92+
-moz-user-select: text !important;
93+
-ms-user-select: text !important;
94+
}
95+
96+
/* Forcer l'affichage même avec style inline display:none */
97+
span[style*="display: none"].BLUETEXT,
98+
span[style*="display:none"].BLUETEXT,
99+
.DraftEditor-root span[style*="display: none"].BLUETEXT,
100+
.DraftEditor-root span[style*="display:none"].BLUETEXT {
101+
display: inline !important;
102+
visibility: visible !important;
103+
color: var(--bf500) !important;
104+
}
105+
106+
span[style*="display: none"].WHITETEXT,
107+
span[style*="display:none"].WHITETEXT,
108+
.DraftEditor-root span[style*="display: none"].WHITETEXT,
109+
.DraftEditor-root span[style*="display:none"].WHITETEXT {
110+
display: inline !important;
111+
visibility: visible !important;
112+
color: #ffffff !important;
113+
background-color: var(--g800) !important;
114+
padding: 2px 4px !important;
115+
border-radius: 3px !important;
116+
outline: 1px solid #999999 !important;
117+
outline-offset: -1px !important;
118+
}
119+
120+
/* Super spécifique pour surpasser tous les styles inline */
121+
.DraftEditor-root .public-DraftStyleDefault-ltr span[class~="BLUETEXT"][style] {
122+
display: inline !important;
123+
visibility: visible !important;
124+
color: var(--bf500) !important;
125+
}
126+
127+
.DraftEditor-root .public-DraftStyleDefault-ltr span[class~="WHITETEXT"][style] {
128+
display: inline !important;
129+
visibility: visible !important;
130+
color: #ffffff !important;
131+
background-color: var(--g800) !important;
132+
padding: 2px 4px !important;
133+
border-radius: 3px !important;
134+
outline: 1px solid #999999 !important;
135+
outline-offset: -1px !important;
136+
}
137+
138+
/* Encore plus spécifique pour la couleur - cibler l'élément exact */
139+
.DraftEditor-root .public-DraftStyleDefault-ltr .public-DraftStyleDefault-block .public-DraftStyleDefault-ltr span.BLUETEXT {
140+
color: var(--bf500) !important;
141+
display: inline !important;
142+
}
143+
144+
.DraftEditor-root .public-DraftStyleDefault-ltr .public-DraftStyleDefault-block .public-DraftStyleDefault-ltr span.WHITETEXT {
145+
color: #ffffff !important;
146+
background-color: var(--g800) !important;
147+
padding: 2px 4px !important;
148+
border-radius: 3px !important;
149+
display: inline !important;
150+
}
151+
152+
/* Forcer avec tous les contextes possibles */
153+
.DraftEditor-editorContainer span.BLUETEXT,
154+
.DraftEditor-editorContainer .BLUETEXT,
155+
.public-DraftEditor-content span.BLUETEXT,
156+
.public-DraftEditor-content .BLUETEXT,
157+
div[data-contents="true"] span.BLUETEXT,
158+
div[data-contents="true"] .BLUETEXT {
159+
color: var(--bf500) !important;
160+
display: inline !important;
161+
}
162+
163+
.DraftEditor-editorContainer span.WHITETEXT,
164+
.DraftEditor-editorContainer .WHITETEXT,
165+
.public-DraftEditor-content span.WHITETEXT,
166+
.public-DraftEditor-content .WHITETEXT,
167+
div[data-contents="true"] span.WHITETEXT,
168+
div[data-contents="true"] .WHITETEXT {
169+
color: #ffffff !important;
170+
background-color: var(--g800) !important;
171+
padding: 2px 4px !important;
172+
border-radius: 3px !important;
173+
display: inline !important;
174+
}
175+

0 commit comments

Comments
 (0)