Help us understand the problem. What is going on with this article?

MarkdownEditorを作る

More than 3 years have 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
  };
}

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away