Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

[Feat] : Placeholder for Console added (Supports all langs) #2815

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 61 additions & 83 deletions client/modules/IDE/components/ConsoleInput.jsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,35 @@
import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import React from 'react';
import CodeMirror from 'codemirror';
import { Encode } from 'console-feed';

import CodeMirror from 'codemirror';
import { useTranslation } from 'react-i18next';
import RightArrowIcon from '../../../images/right-arrow.svg';
import { dispatchMessage, MessageTypes } from '../../../utils/dispatcher';
// eslint-disable-next-line import/first
import 'codemirror/addon/display/placeholder';

// heavily inspired by
// https://github.com/codesandbox/codesandbox-client/blob/92a1131f4ded6f7d9c16945dc7c18aa97c8ada27/packages/app/src/app/components/Preview/DevTools/Console/Input/index.tsx

class ConsoleInput extends React.Component {
constructor(props) {
super(props);
this.state = {
commandHistory: [],
commandCursor: -1
};
}
const ConsoleInput = ({ theme, dispatchConsoleEvent, fontSize }) => {
const [commandHistory, setCommandHistory] = useState([]);
const { t } = useTranslation();
const codemirrorContainerRef = useRef(null);
const cmRef = useRef(null);

componentDidMount() {
this._cm = CodeMirror(this.codemirrorContainer, {
// eslint-disable-line
theme: `p5-${this.props.theme}`,
useEffect(() => {
cmRef.current = CodeMirror(codemirrorContainerRef.current, {
theme: `p5-${theme}`,
scrollbarStyle: null,
keymap: 'sublime',
mode: 'javascript',
inputStyle: 'contenteditable'
inputStyle: 'contenteditable',
placeholder: t('Console.Placeholder')
});

this._cm.on('keydown', (cm, e) => {
const handleKeyDown = (cm, e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
e.stopPropagation();
const value = cm.getValue();
if (value.trim(' ') === '') {
if (value.trim() === '') {
return false;
}
const messages = [
Expand All @@ -47,92 +43,74 @@ class ConsoleInput extends React.Component {
messages
}
});
this.props.dispatchConsoleEvent(consoleEvent);
dispatchConsoleEvent(consoleEvent);
cm.setValue('');
this.setState((state) => ({
commandCursor: -1,
commandHistory: [value, ...state.commandHistory]
}));
setCommandHistory((prevHistory) => [value, ...prevHistory]);
} else if (e.key === 'ArrowUp') {
const lineNumber = this._cm.getDoc().getCursor().line;
const lineNumber = cm.getDoc().getCursor().line;
if (lineNumber !== 0) {
return false;
}

this.setState((state) => {
setCommandHistory((prevHistory) => {
const newCursor = Math.min(
state.commandCursor + 1,
state.commandHistory.length - 1
commandHistory.length - 1,
commandHistory.length - 1
);
this._cm.getDoc().setValue(state.commandHistory[newCursor] || '');
const cursorPos = this._cm.getDoc().getLine(0).length - 1;
this._cm.getDoc().setCursor({ line: 0, ch: cursorPos });
return { commandCursor: newCursor };
cm.getDoc().setValue(commandHistory[newCursor] || '');
const cursorPos = cm.getDoc().getLine(0).length - 1;
cm.getDoc().setCursor({ line: 0, ch: cursorPos });
return newCursor;
});
} else if (e.key === 'ArrowDown') {
const lineNumber = this._cm.getDoc().getCursor().line;
const lineCount = this._cm.getValue().split('\n').length;
const lineNumber = cm.getDoc().getCursor().line;
const lineCount = cm.getValue().split('\n').length;
if (lineNumber + 1 !== lineCount) {
return false;
}

this.setState((state) => {
const newCursor = Math.max(state.commandCursor - 1, -1);
this._cm.getDoc().setValue(state.commandHistory[newCursor] || '');
const newLineCount = this._cm.getValue().split('\n').length;
const newLine = this._cm.getDoc().getLine(newLineCount);
setCommandHistory((prevHistory) => {
const newCursor = Math.max(prevHistory - 1, -1);
cm.getDoc().setValue(commandHistory[newCursor] || '');
const newLineCount = cm.getValue().split('\n').length;
const newLine = cm.getDoc().getLine(newLineCount);
const cursorPos = newLine ? newLine.length - 1 : 1;
this._cm.getDoc().setCursor({ line: lineCount, ch: cursorPos });
return { commandCursor: newCursor };
cm.getDoc().setCursor({ line: lineCount, ch: cursorPos });
return newCursor;
});
}
return true;
});

this._cm.getWrapperElement().style[
'font-size'
] = `${this.props.fontSize}px`;
}
};
cmRef.current.on('keydown', handleKeyDown);

componentDidUpdate(prevProps) {
this._cm.setOption('theme', `p5-${this.props.theme}`);
this._cm.getWrapperElement().style[
'font-size'
] = `${this.props.fontSize}px`;
this._cm.refresh();
}
cmRef.current.getWrapperElement().style['font-size'] = `${fontSize}px`;

componentWillUnmount() {
this._cm = null;
}
return () => {
cmRef.current.off('keydown', handleKeyDown);
cmRef.current.getWrapperElement().remove();
};
}, [theme, t, dispatchConsoleEvent, fontSize]);

render() {
return (
<div className="console__input">
<div
className="console-active__arrow-container"
style={{ height: `${this.props.fontSize * 1.3333}px` }}
>
<RightArrowIcon
className="console-active__arrow"
focusable="false"
aria-hidden="true"
style={{
width: `${this.props.fontSize}px`,
height: `${this.props.fontSize * 0.57}px`
}}
/>
</div>
<div
ref={(element) => {
this.codemirrorContainer = element;
return (
<div className="console__input">
<div
className="console-active__arrow-container"
style={{ height: `${fontSize * 1.3333}px` }}
>
<RightArrowIcon
className="console-active__arrow"
focusable="false"
aria-hidden="true"
style={{
width: `${fontSize}px`,
height: `${fontSize * 0.57}px`
}}
className="console__editor"
/>
</div>
);
}
}
<div ref={codemirrorContainerRef} className="console__editor" />
</div>
);
};

ConsoleInput.propTypes = {
theme: PropTypes.string.isRequired,
Expand Down
3 changes: 2 additions & 1 deletion client/modules/IDE/components/QuickAddList/QuickAddList.jsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ const Item = ({ isAdded, onSelect, name, url }) => {
? t('QuickAddList.ButtonRemoveARIA')
: t('QuickAddList.ButtonAddToCollectionARIA');
return (
<li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
<li className="quick-add__item" onClick={onSelect}>
<button
className="quick-add__item-toggle"
onClick={onSelect}
Expand Down
2 changes: 2 additions & 0 deletions client/styles/components/_console-input.scss
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
.console__editor .CodeMirror {
border: none;
font-family: Inconsolata,monospace;


@include themify() {
background-color: getThemifyVariable('console-input-background-color');
}
Expand Down
Empty file.
3 changes: 2 additions & 1 deletion translations/locales/be/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@
"Close": "বন্ধ",
"CloseARIA": "কনসোল বন্ধ করুন",
"Open": "খোলা",
"OpenARIA": "কনসোল খোলুন"
"OpenARIA": "কনসোল খোলুন",
"Placeholder" : "কমান্ড ইনপুট এখানে..."
},
"Preferences": {
"Settings": "সেটিংস",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/de/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@
"Close": "Schließen",
"CloseARIA": "Konsole schließen",
"Open": "Öffnen",
"OpenARIA": "Konsole öffnen"
"OpenARIA": "Konsole öffnen",
"Placeholder" : "Commando-invoer hier..."
},
"Preferences": {
"Settings": "Einstellungen",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/en-US/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@
"Close": "Close",
"CloseARIA": "Close console",
"Open": "Open",
"OpenARIA": "Open console"
"OpenARIA": "Open console",
"Placeholder" : "Command input here..."
},
"Preferences": {
"Settings": "Settings",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/es-419/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@
"Close": "Cerrar",
"CloseARIA": "cerrar consola",
"Open": "Abrir",
"OpenARIA": "Abrir consola"
"OpenARIA": "Abrir consola",
"Placeholder" : "Entrada de comando aquí..."
},
"Preferences": {
"Settings": "Configuración",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/fr-CA/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,8 @@
"Close": "Fermer",
"CloseARIA": "Fermer la console",
"Open": "Ouvrir",
"OpenARIA": "Ouvrir la console"
"OpenARIA": "Ouvrir la console",
"Placeholder" : "Entrée de commande ici..."
},
"Preferences": {
"Settings": "Paramètres",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/hi/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@
"Close": "बंद करें",
"CloseARIA": "कंसोल बंद करें",
"Open": "खोलें",
"OpenARIA": "कंसोल खोलें"
"OpenARIA": "कंसोल खोलें",
"Placeholder": "यहां कमांड इनपुट करें..."
},
"Preferences": {
"Settings": "सेटिंग्स",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/it/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,8 @@
"Close": "Chiudi",
"CloseARIA": "Chiudi terminale",
"Open": "Apri",
"OpenARIA": "Apri terminale"
"OpenARIA": "Apri terminale",
"Placeholder" : "Inserisci il comando qui..."
},
"Preferences": {
"Settings": "Impostazioni",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/ja/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@
"Close": "閉じる",
"CloseARIA": "コンソールを閉じる",
"Open": "開く",
"OpenARIA": "コンソールを開く"
"OpenARIA": "コンソールを開く",
"Placeholder" : "ここにコマンド入力..."
},
"Preferences": {
"Settings": "設定",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/ko/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,8 @@
"Close": "닫기",
"CloseARIA": "콘솔 닫기",
"Open": "열기",
"OpenARIA": "콘솔 열기"
"OpenARIA": "콘솔 열기",
"Placeholder" : "여기에 명령 입력..."
},
"Preferences": {
"Settings": "설정",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/pt-BR/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@
"Close": "Fechar",
"CloseARIA": "Fechar terminal",
"Open": "Abrir",
"OpenARIA": "Abrir terminal"
"OpenARIA": "Abrir terminal",
"Placeholder" : "Entrada de comando aqui..."
},
"Preferences": {
"Settings": "Configurações",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/sv/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,8 @@
"Close": "Stäng",
"CloseARIA": "Stäng konsoll",
"Open": "Öppna",
"OpenARIA": "Öppna konsoll"
"OpenARIA": "Öppna konsoll",
"Placeholder" : "Kommandoinmatning här..."
},
"Preferences": {
"Settings": "Inställningar",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/tr/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,8 @@
"Close": "Kapat",
"CloseARIA": "Konsolu Kapat",
"Open": "Aç",
"OpenARIA": "Konsolu Aç"
"OpenARIA": "Konsolu Aç",
"Placeholder": "Buraya komut girişi..."
},
"Preferences": {
"Settings": "Ayarlar",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/uk-UA/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@
"Close": "Закрити",
"CloseARIA": "Закрити консоль",
"Open": "Вікдрити",
"OpenARIA": "Відкрити консоль"
"OpenARIA": "Відкрити консоль",
"Placeholder" : "Введіть команду тут..."
},
"Preferences": {
"Settings": "Налаштування",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/zh-CN/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@
"Close": "关闭",
"CloseARIA": "关闭控制台",
"Open": "打开",
"OpenARIA": "打开控制台"
"OpenARIA": "打开控制台",
"Placeholder" : "此处输入命令..."
},
"Preferences": {
"Settings": "设置",
Expand Down
3 changes: 2 additions & 1 deletion translations/locales/zh-TW/translations.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@
"Close": "關閉",
"CloseARIA": "關閉主控台",
"Open": "Open",
"OpenARIA": "Open console"
"OpenARIA": "Open console",
"Placeholder" : "此處輸入命令..."
},
"Preferences": {
"Settings": "設定",
Expand Down

AltStyle によって変換されたページ (->オリジナル) /