getgrav / getgrav/grav-plugin-admin
If blueprint type: list CodeMirror is not loading content until clicked inside
- Dominant language
- PHP
- Stars
- 377
- Forks
- 225
- Avg merge
- 11h 51m
- Merged PRs (30d)
- 4
Description
When using the editor in blueprints with "type: list" where elements are nested, the content of the editor doesn't load until clicking inside. Than the content appears. I want the editor to show the content of itself without it having to be clicked.
Editor works fine in "normal" fields.
On another forum I found the hint that CodeMirror won't update DOM content when it's DOM Node is unvisible, e.g. when the CodeMirror's Dom is setted style to 'display: none'.
The way to fix they said is when CodeMirrors Dom is visible the refresh() method has to be executed.
[](url)
Is it possible to fix this problem in grav admin panel?
I think adding an codemirror.refresh() in "_user/plugins/admin/themes/grav/js/admin.min.js_" in following lines is helping:
```
`key: "expandItem",
value: function expandItem(event) {
var button = external_jQuery_default()(event.currentTarget);
var item = button.closest('[data-collection-item]');
button.attr('data-action', 'collapse').removeClass('fa-chevron-circle-right').addClass('fa-chevron-circle-down');
item.removeClass('collection-collapsed');
// ---- add refresh -----
editor_Instance.editors.each(function (index, editor) {
var codemirror = external_jQuery_default()(editor).data('codemirror');
if (!codemirror) {
return;
}
if (codemirror.display.lastWrapWidth === 0) {
codemirror.refresh();
}
});`
}
```
Origin file must therfore be _user/plugins/admin/themes/grav/app/forms/fields/collections.js_ where following lines must refresh Codemirror like:
```
//add on top of file
import { Instance as Editors } from '../forms/fields/editor';
```
```
expandItem(event) {
let button = $(event.currentTarget);
let item = button.closest('[data-collection-item]');
button.attr('data-action', 'collapse').removeClass('fa-chevron-circle-right').addClass('fa-chevron-circle-down');
item.removeClass('collection-collapsed');
// ---- add refresh -----
Editors.editors.each((index, editor) => {
let codemirror = $(editor).data('codemirror');
if (!codemirror) { return; }
if (codemirror.display.lastWrapWidth === 0) {
codemirror.refresh();
}
});
}
```
I would be happy about help!
Contributor guide
Assessment
This issue has not been assessed yet.