getgrav / getgrav/grav-plugin-admin

If blueprint type: list CodeMirror is not loading content until clicked inside

Open
#2,158 0 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.