Skip to content

Commit 07cef5e

Browse files
fe-lix-fe-lix-
authored
Merge pull request #57 from lukem235/rte-like-original
improvments for RTE
2 parents 35c68c7 + 98e38f5 commit 07cef5e

2 files changed

Lines changed: 116 additions & 39 deletions

File tree

‎cf-editor-custom-rte-field-like-original/src/aem-cf-editor-1/web-src/src/components/CustomTinymceField.js‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -75,21 +75,19 @@ import contentUiCss from "tinymce/skins/ui/oxide/content.min.css";
7575

7676
const plugins = [
7777
"advlist autolink lists link image charmap preview anchor",
78-
"searchreplace visualblocks code",
78+
"searchreplace visualblocks code directionality",
7979
"insertdatetime media table fullscreen",
8080
].join(" ");
8181

8282
const toolbar = [
83-
"undo redo pastetext copy",
84-
"blocks table",
85-
"bold italic underline strikethrough backcolor subscript superscript",
83+
"undo redo pastetext copy blocks table bold italic underline",
84+
"backcolor subscript superscript",
8685
"alignleft aligncenter alignright alignjustify",
8786
"bullist numlist outdent indent",
8887
"removeformat",
8988
"link unlink",
90-
"charmap",
91-
// "fullscreen",
92-
].join(" | ");
89+
"ltr rtl charmap addBg",
90+
].join(" ");
9391

9492
export const RTE_URL =
9593
"https://exc-unifiedcontent.experience.adobe.net/solutions/CQ-aem-headless-rte/assets/tinymce-592/js/tinymce/tinymce.min.js";
@@ -151,42 +149,10 @@ const CustomTinymceField = () => {
151149
init().catch(console.error);
152150
}, []);
153151

154-
const setToLimit = (value, limit, charactersQty) => {
155-
const body = (new DOMParser()).parseFromString(value, "text/html").body;
156-
const r = (node, toRemoveLimit) => {
157-
for (let i = node.childNodes.length-1; i >= 0; i--) {
158-
if (toRemoveLimit <= 0) {
159-
return { node, toRemoveLimit }
160-
}
161-
162-
if (node.childNodes[i].nodeType === Node.TEXT_NODE) {
163-
const contentLength = node.childNodes[i].textContent.length;
164-
if (contentLength > toRemoveLimit) {
165-
node.childNodes[i].textContent = node.childNodes[i].textContent.substring(0, contentLength-toRemoveLimit);
166-
return { node, toRemoveLimit: 0 }
167-
}
168-
node.childNodes[i].remove();
169-
toRemoveLimit -= contentLength;
170-
} else {
171-
const childNodeResult = r(node.childNodes[i], toRemoveLimit);
172-
node.childNodes[i] = childNodeResult.node
173-
toRemoveLimit = childNodeResult.toRemoveLimit
174-
}
175-
}
176-
if (!node.childNodes.length) {
177-
node.remove()
178-
}
179-
return { node, toRemoveLimit }
180-
}
181-
r(body, charactersQty - limit );
182-
return body.innerHTML;
183-
}
184-
185152
const onEditorChangeHandler = (newValue, editor) => {
186153
let currentLength = editor.getContent({ format: "text" }).length;
187154
let value = newValue;
188155
if (characterLimitEnforcement && characterLimit && currentLength > characterLimit) {
189-
value = setToLimit(newValue, characterLimit, currentLength);
190156
currentLength = characterLimit;
191157
}
192158
guestConnection.host.field.onChange(value);
@@ -219,6 +185,37 @@ const CustomTinymceField = () => {
219185
skin: false,
220186
content_css: false,
221187
content_style: [contentCss, contentUiCss].join("\n"),
188+
setup: (editor) => {
189+
editor.ui.registry.addToggleButton('addBg', {
190+
text: 'Add background',
191+
onAction: (api) => {
192+
editor.formatter.toggle('customHighlight');
193+
api.setActive(editor.formatter.match('customHighlight'));
194+
},
195+
onSetup: (api) => {
196+
api.setActive(editor.formatter.match('customHighlight'));
197+
const changed = editor.formatter.formatChanged('customHighlight', (state) => api.setActive(state));
198+
return () => changed.unbind();
199+
}
200+
});
201+
202+
editor.ui.registry.addToggleButton('customToggleStrikethrough', {
203+
icon: 'highlight-bg-color',
204+
tooltip: 'Yellow highlight',
205+
onAction: (_) => editor.formatter.toggle('customHighlight'),
206+
onSetup: (api) => {
207+
api.setActive(editor.formatter.match('customHighlight'));
208+
const changed = editor.formatter.formatChanged('customHighlight', (state) => api.setActive(state));
209+
return () => changed.unbind();
210+
}
211+
});
212+
editor.on('init', (e) => {
213+
editor.formatter.register('customHighlight', {
214+
inline: 'span',
215+
styles: { backgroundColor: '#ffff00' }
216+
});
217+
});
218+
},
222219
}}
223220
value={currentValue}
224221
onInit={onInit}

‎cf-editor-custom-rte-field-like-original/src/aem-cf-editor-1/web-src/src/components/rte.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,86 @@
110110
visibility: hidden;
111111
}
112112

113+
[title=Subscript] span.tox-icon svg {
114+
visibility: hidden;
115+
}
116+
117+
[title=Subscript] span.tox-icon {
118+
background: var(--spectrum-global-color-gray-700);
119+
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 48 48" width="18" focusable="false"%3E%3Cpath d="M38 6H8a2 2 0 0 0-2 2v7a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-5h10v28h-3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-3V10h10v5a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8a2 2 0 0 0-2-2Zm2.3 38.8c-.2 0-.2 0-.2-.2v-10a6.1 6.1 0 0 1-2.6 1c-.2 0-.3 0-.3-.2V33c0-.2 0-.2.2-.2a8.5 8.5 0 0 0 3.7-1.8 1 1 0 0 1 .5-.1h2.2l.2.1v13.6c0 .2 0 .2-.2.2Z"%3E%3C/path%3E%3C/svg%3E');
120+
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 48 48" width="18" focusable="false"%3E%3Cpath d="M38 6H8a2 2 0 0 0-2 2v7a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-5h10v28h-3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-3V10h10v5a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8a2 2 0 0 0-2-2Zm2.3 38.8c-.2 0-.2 0-.2-.2v-10a6.1 6.1 0 0 1-2.6 1c-.2 0-.3 0-.3-.2V33c0-.2 0-.2.2-.2a8.5 8.5 0 0 0 3.7-1.8 1 1 0 0 1 .5-.1h2.2l.2.1v13.6c0 .2 0 .2-.2.2Z"%3E%3C/path%3E%3C/svg%3E');
121+
-webkit-mask-position: center;
122+
mask-position: center;
123+
-webkit-mask-size: 18px 18px;
124+
mask-size: 18px 18px;
125+
-webkit-mask-repeat: no-repeat;
126+
mask-repeat: no-repeat;
127+
}
128+
129+
[title=Superscript] span.tox-icon svg {
130+
visibility: hidden;
131+
}
132+
133+
[title=Superscript] span.tox-icon {
134+
background: var(--spectrum-global-color-gray-700);
135+
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 48 48" width="18" focusable="false"%3E%3Cpath d="M34 6H4a2 2 0 0 0-2 2v7a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-5h10v28h-3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-3V10h10v5a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8a2 2 0 0 0-2-2Zm8.3 10c-.2 0-.2 0-.2-.2v-10a6.1 6.1 0 0 1-2.6 1c-.2 0-.3 0-.3-.2V4.1l.2-.1A8.5 8.5 0 0 0 43.1 2a1 1 0 0 1 .5 0h2.2l.2.1v13.6c0 .2 0 .2-.2.2Z"%3E%3C/path%3E%3C/svg%3E');
136+
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 48 48" width="18" focusable="false"%3E%3Cpath d="M34 6H4a2 2 0 0 0-2 2v7a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-5h10v28h-3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-3V10h10v5a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8a2 2 0 0 0-2-2Zm8.3 10c-.2 0-.2 0-.2-.2v-10a6.1 6.1 0 0 1-2.6 1c-.2 0-.3 0-.3-.2V4.1l.2-.1A8.5 8.5 0 0 0 43.1 2a1 1 0 0 1 .5 0h2.2l.2.1v13.6c0 .2 0 .2-.2.2Z"%3E%3C/path%3E%3C/svg%3E');
137+
-webkit-mask-position: center;
138+
mask-position: center;
139+
-webkit-mask-size: 18px 18px;
140+
mask-size: 18px 18px;
141+
-webkit-mask-repeat: no-repeat;
142+
mask-repeat: no-repeat;
143+
}
144+
145+
[title="Clear formatting"] span.tox-icon svg {
146+
visibility: hidden;
147+
}
148+
149+
[title="Clear formatting"] span.tox-icon {
150+
background: var(--spectrum-global-color-gray-700);
151+
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 48 48" width="18" focusable="false"%3E%3Cpath d="M20 38V10h10v5a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v7a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-5h10v28h-3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a8.3 8.3 0 0 1-1-4Z"%3E%3C/path%3E%3Cpath d="M36 24.1A11.9 11.9 0 1 0 47.9 36 11.9 11.9 0 0 0 36 24.1ZM45 36a8.9 8.9 0 0 1-1.7 5.2L30.8 28.7A8.9 8.9 0 0 1 45 36Zm-18 0a8.9 8.9 0 0 1 1.7-5.2l12.5 12.5A8.9 8.9 0 0 1 27 36Z"%3E%3C/path%3E%3C/svg%3E');
152+
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 48 48" width="18" focusable="false"%3E%3Cpath d="M20 38V10h10v5a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v7a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-5h10v28h-3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a8.3 8.3 0 0 1-1-4Z"%3E%3C/path%3E%3Cpath d="M36 24.1A11.9 11.9 0 1 0 47.9 36 11.9 11.9 0 0 0 36 24.1ZM45 36a8.9 8.9 0 0 1-1.7 5.2L30.8 28.7A8.9 8.9 0 0 1 45 36Zm-18 0a8.9 8.9 0 0 1 1.7-5.2l12.5 12.5A8.9 8.9 0 0 1 27 36Z"%3E%3C/path%3E%3C/svg%3E');
153+
-webkit-mask-position: center;
154+
mask-position: center;
155+
-webkit-mask-size: 18px 18px;
156+
mask-size: 18px 18px;
157+
-webkit-mask-repeat: no-repeat;
158+
mask-repeat: no-repeat;
159+
}
160+
161+
[title="Paste as text"] span.tox-icon svg {
162+
visibility: hidden;
163+
}
164+
165+
[title="Paste as text"] span.tox-icon {
166+
background: var(--spectrum-global-color-gray-700);
167+
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false"%3E%3Cpath d="M18 9V5h-2v1c0 .6-.4 1-1 1H9a1 1 0 0 1-1-1V5H6v13h3V9h9ZM9 20H6a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.2A3 3 0 0 1 12 1a3 3 0 0 1 2.8 2H18a2 2 0 0 1 2 2v4h1v12H9v-1Zm1.5-9.5v9h9v-9h-9ZM12 3a1 1 0 0 0-1 1c0 .5.4 1 1 1s1-.5 1-1-.4-1-1-1Zm0 9h6v2h-.5l-.5-1h-1v4h.8v1h-3.6v-1h.8v-4h-1l-.5 1H12v-2Z" fill-rule="nonzero"%3E%3C/path%3E%3C/svg%3E');
168+
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false"%3E%3Cpath d="M18 9V5h-2v1c0 .6-.4 1-1 1H9a1 1 0 0 1-1-1V5H6v13h3V9h9ZM9 20H6a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.2A3 3 0 0 1 12 1a3 3 0 0 1 2.8 2H18a2 2 0 0 1 2 2v4h1v12H9v-1Zm1.5-9.5v9h9v-9h-9ZM12 3a1 1 0 0 0-1 1c0 .5.4 1 1 1s1-.5 1-1-.4-1-1-1Zm0 9h6v2h-.5l-.5-1h-1v4h.8v1h-3.6v-1h.8v-4h-1l-.5 1H12v-2Z" fill-rule="nonzero"%3E%3C/path%3E%3C/svg%3E');
169+
-webkit-mask-position: center;
170+
mask-position: center;
171+
-webkit-mask-size: 18px 18px;
172+
mask-size: 18px 18px;
173+
-webkit-mask-repeat: no-repeat;
174+
mask-repeat: no-repeat;
175+
}
176+
177+
[title="Copy"] span.tox-icon svg {
178+
visibility: hidden;
179+
}
180+
181+
[title="Copy"] span.tox-icon {
182+
background: var(--spectrum-global-color-gray-700);
183+
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 48 48" width="18" focusable="false"%3E%3Cpath d="M14 30V14H4a2 2 0 0 0-2 2v26a2 2 0 0 0 2 2h26a2 2 0 0 0 2-2V32H16a2 2 0 0 1-2-2Z"%3E%3C/path%3E%3Crect height="4" rx="1" ry="1" width="4" x="18" y="24"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="26" y="24"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="34" y="24"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="42" y="24"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="42" y="16"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="42" y="8"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="42"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="34"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="26"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="18"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="18" y="8"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="18" y="16"%3E%3C/rect%3E%3C/svg%3E');;
184+
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 48 48" width="18" focusable="false"%3E%3Cpath d="M14 30V14H4a2 2 0 0 0-2 2v26a2 2 0 0 0 2 2h26a2 2 0 0 0 2-2V32H16a2 2 0 0 1-2-2Z"%3E%3C/path%3E%3Crect height="4" rx="1" ry="1" width="4" x="18" y="24"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="26" y="24"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="34" y="24"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="42" y="24"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="42" y="16"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="42" y="8"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="42"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="34"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="26"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="18"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="18" y="8"%3E%3C/rect%3E%3Crect height="4" rx="1" ry="1" width="4" x="18" y="16"%3E%3C/rect%3E%3C/svg%3E');;
185+
-webkit-mask-position: center;
186+
mask-position: center;
187+
-webkit-mask-size: 18px 18px;
188+
mask-size: 18px 18px;
189+
-webkit-mask-repeat: no-repeat;
190+
mask-repeat: no-repeat;
191+
}
192+
113193
[title=Underline] span.tox-icon {
114194
background: var(--spectrum-global-color-gray-700);
115195
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cdefs%3E%3Cstyle%3E.fill %7B fill: %23464646; %7D%3C/style%3E%3C/defs%3E%3Ctitle%3ES TextUnderline 18 N%3C/title%3E%3Crect id='Canvas' fill='%23ff13dc' opacity='0' width='18' height='18' /%3E%3Crect class='fill' height='1' rx='0.25' width='14' x='2' y='16' /%3E%3Cpath class='fill' d='M2.5,2a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h1A.5.5,0,0,0,4,5.5V4H8v9H6.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h5a.5.5,0,0,0,.5-.5v-1a.5.5,0,0,0-.5-.5H10V4h4V5.5a.5.5,0,0,0,.5.5h1a.5.5,0,0,0,.5-.5v-3a.5.5,0,0,0-.5-.5Z' /%3E%3C/svg%3E%0A");

0 commit comments

Comments
 (0)