Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

MarkdownEditorを作る

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
6
Help us understand the problem. What are the problem?