yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-03 11:25:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle Tab key command with event listener

Browse Source 
I have to force the tab key event since it is not working with the Editor handleKeyCommand handler
This commit is contained in:
cyril lopez 2018-03-15 18:10:19 +01:00
parent a54db55d0c
commit eb3b07c592
3 changed files with 41 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/strapi-helper-plugin/lib/src/components/Wysiwyg/constants.js
View File

@ -1,26 +1,11 @@
export const SELECT_OPTIONS = [
{ id: 'Add a title', value: '' },
{ id: 'Title H1', value: '# innerText.H1' },
{ id: 'Title H2', value: '## innerText.H2' },
{ id: 'Title H3', value: '### innerText.H3' },
{ id: 'Title H4', value: '#### innerText.H4'},
{ id: 'Title H5', value: '##### innerText.H5' },
{ id: 'Title H6', value: '###### innerText.H6' },
];
// NOTE: I leave that as a reminder
export const CONTROLS = [
[
{label: 'B', style: 'BOLD', handler: 'toggleInlineStyle' },
{label: 'I', style: 'ITALIC', className: 'styleButtonItalic', handler: 'toggleInlineStyle' },
{label: 'U', style: 'UNDERLINE', handler: 'toggleInlineStyle' },
{label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hideLabel: true, handler: 'toggleBlockType' },
{label: 'OL', style: 'ordered-list-item', className: 'styleButtonOL', hideLabel: true, handler: 'toggleBlockType' },
],
[
{label: '<>', style: 'code-block', handler: 'toggleBlockType' },
{label: 'quotes', style: 'blockquote', className: 'styleButtonBlockQuote', hideLabel: true, handler: 'toggleBlockType' },
],
{ id: 'Title H1', value: '#' },
{ id: 'Title H2', value: '##' },
{ id: 'Title H3', value: '###' },
{ id: 'Title H4', value: '####'},
{ id: 'Title H5', value: '#####' },
{ id: 'Title H6', value: '######' },
];
export const NEW_CONTROLS = [

18
packages/strapi-helper-plugin/lib/src/components/Wysiwyg/helpers.js
View File

@ -29,24 +29,6 @@ export function getInnerText(style) {
case 'UNDERLINE':
innerText = '__text underlined__';
break;
case 'H1':
innerText = '# ';
break;
case 'H2':
innerText = '## ';
break;
case 'H3':
innerText = '### ';
break;
case 'H4':
innerText = '#### ';
break;
case 'H5':
innerText = '##### ';
break;
case 'H6':
innerText = '###### ';
break;
case 'code-block':
innerText = '```code block```';
break;

48
packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js
View File

@ -57,6 +57,7 @@ class Wysiwyg extends React.Component {
if (!isEmpty(this.props.value)) {
this.setInitialValue(this.props);
}
document.addEventListener('keydown', this.handleTabKey);
}
componentWillReceiveProps(nextProps) {
@ -70,8 +71,13 @@ class Wysiwyg extends React.Component {
}
}
componentWillUnmount() {
document.removeEventListener('keydown', this.handleTabKey);
}
onChange = (editorState) => {
this.setState({ editorState });
// Update the state and force the focus
this.setState({ editorState }, () => { this.focus(); });
this.props.onChange({ target: {
value: editorState.getCurrentContent().getPlainText(),
name: this.props.name,
@ -108,8 +114,13 @@ class Wysiwyg extends React.Component {
handleChangeSelect = ({ target }) => {
this.setState({ headerValue: target.value });
const splitData = target.value.split('.');
this.addEntity(splitData[0], splitData[1]);
const selectedText = this.getSelectedText();
const title = selectedText === '' ? `${target.value} ` : `${target.value} ${selectedText}`;
const newBlock = this.createNewBlock(title, 'block-ul');
const newContentState = this.createNewContentStateFromBlock(newBlock);
const newEditorState = this.createNewEditorState(newContentState, title);
return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState), headerValue: '' });
}
handleDragEnter = (e) => {
@ -172,6 +183,17 @@ class Wysiwyg extends React.Component {
return false;
}
handleTabKey = (e) => {
if (e.keyCode === 9 /* TAB */ && this.state.isFocused) {
e.preventDefault();
const textWithEntity = Modifier.replaceText(this.getEditorState().getCurrentContent(), this.getSelection(), ' ');
const newEditorState = EditorState.push(this.getEditorState(), textWithEntity, 'insert-characters');
return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
}
}
mapKeyToEditorCommand = (e) => {
if (e.keyCode === 9 /* TAB */) {
const newEditorState = RichUtils.onTab(
@ -278,16 +300,6 @@ class Wysiwyg extends React.Component {
});
}
addUlBlock = () => {
const selectedText = this.getSelectedText();
const li = selectedText === '' ? '- ' : `- ${selectedText}`;
const newBlock = this.createNewBlock(li, 'block-ul');
const newContentState = this.createNewContentStateFromBlock(newBlock);
const newEditorState = this.createNewEditorState(newContentState, li);
return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
}
addOlBlock = () => {
const previousBlockKey = last(Object.keys(this.getCurrentBlockMap()));
const previousContent = this.getEditorState().getCurrentContent().getBlockForKey(previousBlockKey).getText();
@ -302,6 +314,16 @@ class Wysiwyg extends React.Component {
return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
}
addUlBlock = () => {
const selectedText = this.getSelectedText();
const li = selectedText === '' ? '- ' : `- ${selectedText}`;
const newBlock = this.createNewBlock(li, 'block-ul');
const newContentState = this.createNewContentStateFromBlock(newBlock);
const newEditorState = this.createNewEditorState(newContentState, li);
return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
}
toggleFullScreen = (e) => {
e.preventDefault();
this.setState({