From 269a6d8df8ff6ae9402beab2db8c82b4a3086f6f Mon Sep 17 00:00:00 2001 From: Atsushi Nagase Date: Thu, 8 Dec 2016 10:40:11 +0900 Subject: [PATCH] draft-js-code plugin --- demo/client/components/DemoEditor/index.js | 3 ++ demo/client/plugins/code.js | 43 ++++++++++++++++++++++ package.json | 1 + 3 files changed, 47 insertions(+) create mode 100644 demo/client/plugins/code.js diff --git a/demo/client/components/DemoEditor/index.js b/demo/client/components/DemoEditor/index.js index eb0b71a..4b58ede 100755 --- a/demo/client/components/DemoEditor/index.js +++ b/demo/client/components/DemoEditor/index.js @@ -8,12 +8,15 @@ import Draft, { ContentState, EditorState, } from 'draft-js'; + import styles from './styles.css'; import prismPlugin from '../../plugins/prism'; +import codePlugin from '../../plugins/code'; window.Draft = Draft; const plugins = [ + codePlugin, prismPlugin, createMarkdownShortcutsPlugin() ]; diff --git a/demo/client/plugins/code.js b/demo/client/plugins/code.js new file mode 100644 index 0000000..2c898aa --- /dev/null +++ b/demo/client/plugins/code.js @@ -0,0 +1,43 @@ +import CodeUtils from 'draft-js-code'; + +const codePlugin = { + handleKeyCommand(command, { getEditorState, setEditorState }) { + const editorState = getEditorState(); + let newEditorState = editorState; + if (CodeUtils.hasSelectionInBlock(editorState)) { + newEditorState = CodeUtils.handleKeyCommand(editorState, command); + } + if (newEditorState && newEditorState !== editorState) { + setEditorState(newEditorState); + return 'handled'; + } + return 'not-handled'; + }, + keyBindingFn(e, { getEditorState }) { + const editorState = getEditorState(); + if (CodeUtils.hasSelectionInBlock(editorState)) { + return CodeUtils.getKeyBinding(e); + } + return null; + }, + handleReturn(e, { getEditorState, setEditorState }) { + const editorState = getEditorState(); + console.info(CodeUtils.hasSelectionInBlock(editorState)); + // if (CodeUtils.hasSelectionInBlock(editorState)) { + // setEditorState(CodeUtils.handleReturn(e, editorState)); + // return 'handled'; + // } + return 'not-handled'; + }, + handleTab(e, { getEditorState, setEditorState }) { + const editorState = getEditorState(); + console.info(CodeUtils.hasSelectionInBlock(editorState)); + // if (CodeUtils.hasSelectionInBlock(editorState)) { + // setEditorState(CodeUtils.handleTab(e, editorState)); + // return 'handled'; + // } + return 'not-handled'; + } +}; + +export default codePlugin; diff --git a/package.json b/package.json index 8294766..00f19e5 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "css-loader": "^0.26.0", "css-modules-require-hook": "^4.0.5", "dirty-chai": "^1.2.2", + "draft-js-code": "^0.2.0", "draft-js-plugins-editor": "2.0.0-beta7", "draft-js-prism": "ngs/draft-js-prism#6edb31c3805dd1de3fb897cc27fced6bac1bafbb", "enzyme": "^2.6.0",