codex-team / codex-team/editor.js

No trigger onChange for <select> input

Open
#2,140 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
31.9k
Forks
2.2k
Avg merge
1d 1h
Merged PRs (30d)
1

Description

Hmm, I'm facing this issue rn, I had tried with text-area, and it worked, but not for select tag...
I need the onChange function triggered every time the selected value changes.

Thanks in advance!

```jsx
new Editor({
...otherProps,
onChange: handleOnChange
})
```

My code:
```jsx
export default class CodeEditor {
// This plugin allows to write code and select language
static get toolbox() {
return {
title: 'New Raw Code',
icon: ''
};
}

static get isReadOnlySupported() {
return true;
}

constructor({ data, config, api, readOnly }) {
this.api = api;
this.readOnly = readOnly;
this.data = {
language: data.language || 'javascript',
code: data.code || ''
};
}

render() {
// include a language selector and a code editor
this._element = document.createElement('div');
this._element.classList.add('code-editor');

// flex-col
this._element.style.display = 'flex';
this._element.style.flexDirection = 'column';

// language selector
this.languageSelector = document.createElement('select');
this.languageSelector.classList.add('language-selector');
this.languageSelector.style.marginBottom = '10px';
this.languageSelector.style.padding = '5px';
this.languageSelector.style.borderRadius = '5px';
this.languageSelector.style.border = '1px solid #ccc';
this.languageSelector.style.outline = 'none';
this.languageSelector.style.fontSize = '14px';
this.languageSelector.style.fontFamily = 'monospace';
this.languageSelector.style.width = '100px';

let option;
let textOption;
// add languages
supportedLanguages.map(language => {
option = document.createElement('option');
option.setAttribute('value', language);
textOption = document.createTextNode(language);
option.appendChild(textOption);
this.languageSelector.appendChild(option);
})

// if data is present, set the language
if (this.data.language) {
this.languageSelector.value = this.data.language;
}

// code editor
this._editor = document.createElement('textarea');
this._editor.classList.add('code-editor__textarea');
this._editor.style.flex = '1';
this._editor.style.borderRadius = '5px';
this._editor.style.border = '1px solid #ccc';
this._editor.style.outline = 'none';
this._editor.style.fontSize = '14px';
this._editor.style.fontFamily = 'monospace';
this._editor.style.padding = '10px';
this._editor.style.resize = 'none';

// if data is present, set the code
if (this.data.code) {
this._editor.value = this.data.code;
}

// append to element
this._element.appendChild(this.languageSelector);
this._element.appendChild(this._editor);

return this._element;
}

save(blockContent) {
return {
language: this.languageSelector.value,
code: this._editor.value
};
}

validate(savedData) {
if (!savedData.code.trim()) {
return false;
}

return true;
}

renderSettings() {
const wrapper = document.createElement('div');

// language selector
this.languageSelector = document.createElement('select');
this.languageSelector.classList.add('language-selector');
this.languageSelector.style.marginBottom = '10px';
this.languageSelector.style.padding = '5px';
this.languageSelector.style.borderRadius = '5px';
this.languageSelector.style.border = '1px solid #ccc';
this.languageSelector.style.outline = 'none';
this.languageSelector.style.fontSize = '14px';
this.languageSelector.style.fontFamily = 'monospace';
this.languageSelector.style.width = '100px';

let option;
let textOption;
// add languages
supportedLanguages.map(language => {
option = document.createElement('option');
option.setAttribute('value', language);
textOption = document.createTextNode(language);
option.appendChild(textOption);
this.languageSelector.appendChild(option);
})

wrapper.appendChild(this.languageSelector);

return wrapper;
}
}

const supportedLanguages = [
"plain",
"plaintext",
"text",
]
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.