Skip to content

Commit a2262d4

Browse files
fsbraunfsbraun
authored
fix: Correctly initialize rich text inline fields (#69)
1 parent 57dc980 commit a2262d4

File tree

5 files changed

+48
-45
lines changed

5 files changed

+48
-45
lines changed

‎CHANGELOG.rst

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
Changelog
33
=========
44

5+
0.8.3 (27-03-2025)
6+
==================
7+
8+
* fix: Redraw errors with django CMS 5
9+
510
0.8.2 (26-03-2025)
611
==================
712

‎README.rst

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,7 @@ Acknowledgments
360360
:target: https://www.djangoproject.com/
361361
.. |djangocms| image:: https://img.shields.io/badge/django%20CMS-3.11%2B-blue.svg
362362
:target: https://www.django-cms.org/
363-
.. |djangocms4| image:: https://img.shields.io/badge/django%20CMS-4-blue.svg
363+
.. |djangocms4| image:: https://img.shields.io/badge/django%20CMS-4%2F5-blue.svg
364364
:target: https://www.django-cms.org/
365365
.. |precommit| image:: https://results.pre-commit.ci/badge/github/django-cms/djangocms-text/main.svg
366366
:target: https://results.pre-commit.ci/latest/github/django-cms/djangocms-text/main

‎djangocms_text/__init__.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@
1616
10. Github actions will publish the new package to pypi
1717
"""
1818

19-
__version__ = "0.8.2"
19+
__version__ = "0.8.3"

‎private/css/cms.toolbar.css

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
.ProseMirror-focused [role="menubar"] {
33
/* show toolbar if editor is focused */
44
visibility: visible;
5-
transition: visibility 150ms;
5+
transition: visibility 500ms ease;
66
[role="button"].show {
77
z-index: 10;
88
> .dropdown-content {
99
visibility: visible;
10-
transition: visibility 150ms;
10+
transition: visibility 500ms ease;
1111
height: auto;
1212
}
1313
}
@@ -27,7 +27,7 @@
2727
font-size: 1rem;
2828
font-weight: normal;
2929
visibility: hidden;
30-
transition: visibility 150ms;
30+
transition: visibility 500ms ease;
3131
position: absolute;
3232
pointer-events: all;
3333
display: flex;
@@ -50,7 +50,7 @@
5050
display: block;
5151
top: 0;
5252
visibility: visible;
53-
transition: visibility 150ms;
53+
transition: visibility 500ms ease;
5454
[role="button"].show {
5555
z-index: 10;
5656
> .dropdown-content {
@@ -199,7 +199,7 @@
199199
color: var(--dca-black, var(--body-fg));
200200
border-radius: 0;
201201
visibility: hidden;
202-
transition: visibility 150ms;
202+
transition: visibility 500ms ease;
203203
height: 0;
204204
overflow-y: hidden;
205205
position: absolute;
@@ -273,18 +273,18 @@
273273
.ProseMirror-focused .cms-block-toolbar, &:has(dialog.cms-form-dialog) .cms-block-toolbar {
274274
/* show toolbar if editor is focused or form dialog is open */
275275
visibility: visible;
276-
transition: visibility 150ms;
276+
transition: visibility 500ms ease;
277277
&.show .cms-block-dropdown {
278278
visibility: visible;
279-
transition: visibility 150ms;
279+
transition: visibility 500ms ease;
280280
}
281281
}
282282

283283
.cms-block-toolbar {
284284
--size: 1rem;
285285
position: absolute;
286286
visibility: hidden;
287-
transition: visibility 150ms;
287+
transition: visibility 500ms ease;
288288
box-sizing: border-box;
289289
border-width: 0;
290290
border-style: solid;
@@ -328,7 +328,7 @@
328328
box-shadow: 0 1.5px 1.5px rgba(var(--dca-shadow),.4);
329329
border: 1px solid var(--dca-gray-light);
330330
visibility: hidden;
331-
transition: visibility 150ms;
331+
transition: visibility 500ms ease;
332332
display: flex;
333333
svg {
334334
width: calc(1.2 * var(--size));

‎private/js/cms.editor.js

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@ class CMSEditor {
8888
// CMS Editor: init
8989
// Initialize a single editor
9090
init (el) {
91-
9291
if (!el.id) {
9392
el.id = "cms-edit-" + Math.random().toString(36).slice(2, 9);
9493
}
@@ -158,7 +157,7 @@ class CMSEditor {
158157
const search_key = `${generic_class[2]}-${generic_class[3]}-${edit_fields}`;
159158
if (generic_inline_fields[search_key]) {
160159
// Inline editable?
161-
wrapper = this._initInlineRichText(document.getElementsByClassName(plugin[0]), url, plugin[0]);
160+
wrapper = this._initInlineRichText(document.querySelectorAll(`.${plugin[0]}`), url, plugin[0]);
162161
if (wrapper) {
163162
wrapper.dataset.cmsCsrfToken = this.CMS.config.csrf;
164163
wrapper.dataset.cmsField = edit_fields;
@@ -208,31 +207,6 @@ class CMSEditor {
208207
});
209208
}
210209

211-
_initInlineRichText(elements, url, cls) {
212-
let wrapper;
213-
214-
if (elements.length > 0) {
215-
if (elements.length === 1 && (
216-
elements[0].tagName === 'DIV' || // Single wrapping div
217-
elements[0].tagName === 'CMS-PLUGIN' || // Single wrapping cms-plugin tag
218-
elements[0].classList.contains('cms-editor-inline-wrapper') // already wrapped
219-
)) {
220-
// already wrapped?
221-
wrapper = elements[0];
222-
wrapper.classList.add('cms-editor-inline-wrapper');
223-
} else { // no, wrap now!
224-
wrapper = document.createElement('div');
225-
wrapper.classList.add('cms-editor-inline-wrapper', 'wrapped');
226-
wrapper.classList.add('cms-plugin', cls, 'cms-plugin-start', 'cms-plugin-end');
227-
wrapper = this._wrapAll(elements, wrapper);
228-
}
229-
wrapper.dataset.cmsEditUrl = url;
230-
return wrapper;
231-
}
232-
// No elements found
233-
return undefined;
234-
}
235-
236210
_createRTE(el) {
237211
const settings = this.getSettings(el);
238212
// Element options overwrite
@@ -673,20 +647,44 @@ class CMSEditor {
673647
}
674648
}
675649

650+
_initInlineRichText(elements, url, cls) {
651+
let wrapper;
652+
653+
if (elements.length > 0) {
654+
if (elements.length === 1 && (
655+
elements[0].tagName === 'DIV' || // Single wrapping div
656+
elements[0].tagName === 'CMS-PLUGIN' || // Single wrapping cms-plugin tag
657+
elements[0].classList.contains('cms-editor-inline-wrapper') // already wrapped
658+
)) {
659+
// already wrapped?
660+
wrapper = elements[0];
661+
wrapper.classList.add('cms-editor-inline-wrapper');
662+
} else { // no, wrap now!
663+
wrapper = document.createElement('div');
664+
wrapper.classList.add('cms-editor-inline-wrapper', 'wrapped');
665+
wrapper.classList.add('cms-plugin', cls, 'cms-plugin-start', 'cms-plugin-end');
666+
wrapper = this._wrapAll(elements, wrapper, cls);
667+
}
668+
wrapper.dataset.cmsEditUrl = url;
669+
return wrapper;
670+
}
671+
// No elements found
672+
return undefined;
673+
}
674+
676675
// Wrap wrapper around nodes
677676
// Just pass a collection of nodes, and a wrapper element
678-
_wrapAll (nodes, wrapper) {
677+
_wrapAll (nodes, wrapper, cls) {
679678
// Cache the current parent and previous sibling of the first node.
680679
const parent = nodes[0].parentNode;
681680
const previousSibling = nodes[0].previousSibling;
682681

683682
// Place each node in wrapper.
684-
// - If nodes is an array, we must increment the index we grab from
685-
// after each loop.
686-
// - If nodes is a NodeList, each node is automatically removed from
687-
// the NodeList when it is removed from its parent with appendChild.
688-
for (let i = 0; nodes.length - i; wrapper.firstChild === nodes[0] && i++) {
689-
wrapper.appendChild(nodes[i]);
683+
for (const node of nodes) {
684+
// Remove class markers
685+
node.classList.remove('cms-plugin', cls, 'cms-plugin-start', 'cms-plugin-end');
686+
// ... and add to wrapper
687+
wrapper.appendChild(node);
690688
}
691689

692690
// Place the wrapper just after the cached previousSibling,

0 commit comments

Comments
 (0)