Posted at

MarkdownEditorを作る

More than 1 year has passed since last update.


MarkdownEditorをつくる

既存のMarkdownEditorは拡張機能を持たせるのがきつそうだったので、EditorとMarkdownを表示させるコンポーネントを組み合わせて作りました。

その時のやり方を自分の頭整理するためにもざっと書きます。


使ったコンポーネント


View

onChangeCode = newValue =>

this.props.onChageCode(newValue);
//newValueという値にすることで、AceEditorが新しいvalueを受け取ってくれるので、ここでevent.target.valueとする必要はないです
//後者のonChageCodeはActionからきてます

const { code } = this.props.createProblemPage;
//このcreateProblemPageは下のReducerからきてます

<AceEditor
mode="markdown"
theme="monokai"
fontSize=16
value={ code }
onChange={ this.onChangeCode }
/>

<ReactMarkdown
source={ code }
onChange={ this.onChangeCode }
/>


Reducer

const initialState = {

code: ''
};

function whenChangeCode(state, code) {
return {
...state,
code
};
}

export default function createProblemPage(state = initialState, action) {
switch (action.type) {
case CREATE_PROBLEM_PAGE.CHANGE_CODE_CREATE_PROBLEM:
return whenChangeCode(state, action.nextValue);
default:
return state;
}
}
//この辺のactionTypeのところははだいぶはしょってます


Action

export function onChangeCode(nextValue) {

return {
type: CREATE_PROBLEM_PAGE.CHANGE_CODE_CREATE_PROBLEM,
nextValue
};
}

とりあえず主な部分はこんな感じです。こんな感じになります。

Qiitaでどの辺まで書いたらいいのか微妙なところがあって、Viewのところのdispatchさせるとことかほかにもいろいろ省いてるのでもっと”もっとここも書けよ!!”ってのあったらどんどんお願いします!!