add open source

+module.exports = {
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 7,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  extends: ['tui/es6', 'plugin:react/recommended', 'plugin:prettier/recommended'],
+  plugins: ['react', 'prettier'],
+  rules: {
+    'react/prop-types': 0
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+};
\ No newline at end of file

+node_modules
+.DS_Store
+Thumbs.db
+Desktop.ini
+dist
+.idea
+storybook-static
\ No newline at end of file

+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "arrowParens": "always"
+}
\ No newline at end of file

+import {configure} from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

+module.exports = {
+  plugins: [],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader']
+      }
+    ]
+  }
+};

+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+education, socio-economic status, nationality, personal appearance, race,
+religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at dl_javascript@nhn.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
\ No newline at end of file

+# Contributing to TOAST UI
+
+First off, thanks for taking the time to contribute! 🎉 😘 ✨
+
+The following is a set of guidelines for contributing to TOAST UI. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
+
+## Reporting Bugs
+Bugs are tracked as GitHub issues. Search the list and try reproduce on [demo][demo] before you create an issue. When you create an issue, please provide the following information by filling in the template.
+
+Explain the problem and include additional details to help maintainers reproduce the problem:
+
+* **Use a clear and descriptive title** for the issue to identify the problem.
+* **Describe the exact steps which reproduce the problem** in as many details as possible. Don't just say what you did, but explain how you did it. For example, if you moved the cursor to the end of a line, explain if you used a mouse or a keyboard.
+* **Provide specific examples to demonstrate the steps.** Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets on the issue, use Markdown code blocks.
+* **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior.
+* **Explain which behavior you expected to see instead and why.**
+* **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem.
+
+## Suggesting Enhancements
+In case you want to suggest for TOAST UI ImageEditor, please follow this guideline to help maintainers and the community understand your suggestion.
+Before creating suggestions, please check [issue list](../../labels/feature%20request) if there's already a request.
+
+Create an issue and provide the following information:
+
+* **Use a clear and descriptive title** for the issue to identify the suggestion.
+* **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
+* **Provide specific examples to demonstrate the steps.** Include copy/pasteable snippets which you use in those examples, as Markdown code blocks.
+* **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of TOAST UI ImageEditor which the suggestion is related to.
+* **Explain why this enhancement would be useful** to most TOAST UI users.
+* **List some other image editors or applications where this enhancement exists.**
+
+## First Code Contribution
+
+Unsure where to begin contributing to TOAST UI? You can start by looking through these `document`, `good first issue` and `help wanted` issues:
+
+* **document issues**: issues which should be reviewed or improved.
+* **good first issues**: issues which should only require a few lines of code, and a test or two.
+* **help wanted issues**: issues which should be a bit more involved than beginner issues.
+
+## Pull Requests
+
+### Development WorkFlow
+- Set up your development environment
+- Make change from a right branch
+- Be sure the code passes `npm run lint`, `npm run test`
+- Make a pull request
+
+### Development environment
+- Prepare your machine node and it's packages installed.
+- Checkout our repository
+- Install dependencies by `npm install && bower install`
+- Start webpack-dev-server by `npm run serve`
+
+### Make changes
+#### Checkout a branch
+- **develop**: PR base branch. merge features, updates for next minor or major release
+- **master**: bug fix or document update for next patch release. develop branch will rebase every time master branch update. so keep code change to a minimum.
+- **production**: lastest release branch with distribution files. never make a PR on this
+- **gh-pages**: API docs, examples and demo
+
+#### Check Code Style
+Run `npm run eslint` and make sure all the tests pass.
+
+#### Test
+Run `npm run test` and verify all the tests pass.
+If you are adding new commands or features, they must include tests.
+If you are changing functionality, update the tests if you need to.
+
+#### Commit
+Follow our [commit message conventions](./docs/COMMIT_MESSAGE_CONVENTION.md).
+
+### Yes! Pull request
+Make your pull request, then describe your changes.
+#### Title
+Follow other PR title format on below.
+```
+    <Type>: Short Description (fix #111)
+    <Type>: Short Description (fix #123, #111, #122)
+    <Type>: Short Description (ref #111)
+```
+* capitalize first letter of Type
+* use present tense: 'change' not 'changed' or 'changes'
+
+#### Description
+If it has related to issues, add links to the issues(like `#123`) in the description.
+Fill in the [Pull Request Template](./docs/PULL_REQUEST_TEMPLATE.md) by check your case.
+
+## Code of Conduct
+This project and everyone participating in it is governed by the [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to dl_javascript@nhn.com.
+
+> This Guide is base on [atom contributing guide](https://github.com/atom/atom/blob/master/CONTRIBUTING.md), [CocoaPods](http://guides.cocoapods.org/contributing/contribute-to-cocoapods.html) and [ESLint](http://eslint.org/docs/developer-guide/contributing/pull-requests)

+MIT License
+
+Copyright (c) 2019 NHN Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
\ No newline at end of file

+# TOAST UI Image Editor for React
+
+> This is a React component wrapping [TOAST UI Image Editor](https://github.com/nhn/tui.image-editor).
+
+ [![github version](https://img.shields.io/github/release/nhn/toast-ui.react-image-editor.svg)](https://github.com/nhn/toast-ui.react-image-editor/releases/latest)
+[![npm version](https://img.shields.io/npm/v/@toast-ui/react-image-editor.svg)](https://www.npmjs.com/package/@toast-ui/react-image-editor)
+[![license](https://img.shields.io/github/license/nhn/toast-ui.vue-image-editor.svg)](https://github.com/nhn/toast-ui.react-image-editor/blob/master/LICENSE)
+[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/toast-ui.react-image-editor/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)
+[![code with hearth by NHN](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN-ff1414.svg)](https://github.com/nhn)
+
+## 🚩 Table of Contents
+* [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)
+* [Install](#-install)
+    * [Using npm](#using-npm)
+* [Usage](#-usage)
+    * [Import](#Import)
+    * [Props](#props)
+    * [Instance Methods](#Instance-Methods)
+    * [Getting the root element](#Getting-the-root-element)
+    * [Event](#event)
+* [Pull Request Steps](#-pull-request-steps)
+* [Documents](#-documents)
+* [Contributing](#-contributing)
+* [License](#-license)
+
+## Collect statistics on the use of open source
+
+React Wrapper of TOAST UI Image Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Image Editor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the `usageStatistics` props like the example below.
+
+```js
+<ImageEditor
+  usageStatistics={false}
+/>
+```
+
+Or, include `tui-code-snippet.js` (**v1.4.0** or **later**) and then immediately write the options as follows:
+
+```js
+tui.usageStatistics = false;
+```
+
+## 💾 Install
+
+### Using npm
+
+```sh
+npm install --save @toast-ui/react-image-editor
+```
+
+## 📊 Usage
+
+### Import
+
+You can use Toast UI Image Editor for React as a ECMAScript module or a CommonJS module. As this module does not contain CSS files, you should import `tui-image-editor.css` from `tui-image-editor/dist` manually.
+
+* Using ECMAScript module
+
+```js
+import 'tui-image-editor/dist/tui-image-editor.css'
+import ImageEditor from '@toast-ui/react-image-editor'
+```
+
+* Using CommonJS module
+
+```js
+require('tui-image-editor/dist/tui-image-editor.css');
+var ImageEditor = require('@toast-ui/react-image-editor');
+```
+
+### Props
+
+[All the options of the TOAST UI Image Editor](http://nhn.github.io/tui.image-editor/latest/ImageEditor) are supported in the form of props.
+
+```js
+const myTheme = {
+  // Theme object to extends default dark theme.
+};
+
+const MyComponent = () => (
+  <ImageEditor
+    includeUI={{
+      loadImage: {
+        path: 'img/sampleImage.jpg',
+        name: 'SampleImage'
+      },
+      theme: myTheme,
+      menu: ['shape', 'filter'],
+      initMenu: 'filter',
+      uiSize: {
+        width: '1000px',
+        height: '700px'
+      },
+      menuBarPosition: 'bottom'
+    }}
+    cssMaxHeight={500}
+    cssMaxWidth={700}
+    selectionStyle={{
+      cornerSize: 20,
+      rotatingPointOffset: 70
+    }}
+    usageStatistics={true}
+  />
+);
+```
+
+#### Theme
+Importing `black/white-theme.js` file is not working directly import yet. You want to use white theme, please write own theme object by copy and paste.
+
+### Instance Methods
+
+For using [instance methods of TOAST UI Image Editor](https://nhn.github.io/tui.date-picker/latest/DatePicker#createCalendar), first thing to do is creating Refs of wrapper component using [`createRef()`](https://reactjs.org/docs/refs-and-the-dom#creating-refs). But the wrapper component does not provide a way to call instance methods of TOAST UI Image Editor directly. Instead, you can call `getInstance()` method of the wrapper component to get the instance, and call the methods on it.
+
+```js
+const imageEditorOptions = {
+  // sort of option properties.
+};
+
+class MyComponent extends React.Component {
+  editorRef = React.createRef();
+  
+  handleClickButton = () => {
+    const editorInstance = this.editorRef.current.getInstance();
+
+    editorInstance.flipX();
+  };
+
+  render() {
+    return (
+      <>
+        <ImageEditor 
+          ref={this.editorRef}
+          {...imageEditorOptions}
+        />
+        <button onClick={this.handleClickButton}>Flip image by X Axis!</button>
+      </>
+    );
+  }
+}
+```
+
+### Getting the root element
+
+An instance of the wrapper component also provides a handy method for getting the root element. If you want to manipulate the root element directly, you can call `getRootElement` to get the element.
+
+```js
+class MyComponent extends React.Component {
+  editorRef = React.createRef();
+  
+  handleClickButton = () => {
+    this.editorRef.current.getRootElement().classList.add('image-editor-root');
+  };
+
+  render() {
+    return (
+      <>
+        <ImageEditor 
+          ref={this.editorRef}
+          {...imageEditorOptions} 
+        />
+        <button onClick={this.handleClickButton}>Click!</button>
+      </>
+    );
+  }
+}
+```
+
+### Event
+
+[All the events of TOAST UI Image Editor](https://nhn.github.io/tui.image-editor/latest/ImageEditor#event:addText) are supported in the form of `on[EventName]` props. The first letter of each event name should be capitalized. For example, for using `mousedown` event you can use `onMousedown` prop like the example below.
+
+```js
+class MyComponent extends React.Component {
+  handleMousedown = () => {
+    console.log('Mouse button is downed!');
+  };
+
+  render() {
+    return (
+      <ImageEditor 
+        onMousedown={this.handleMousedown}
+      />
+    );
+  }
+}
+```
+
+## 🔧 Pull Request Steps
+
+TOAST UI products are open source, so you can create a pull request(PR) after you fix issues.
+Run npm scripts and develop yourself with the following process.
+
+### Setup
+
+Fork `develop` branch into your personal repository.
+Clone it to local computer. Install node modules.
+Before starting development, you should check to haveany errors.
+
+``` sh
+$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
+$ cd [[repo name]]
+$ npm install
+```
+
+### Develop
+
+Let's start development!
+
+### Pull Request
+
+Before PR, check to test lastly and then check any errors.
+If it has no error, commit and then push it!
+
+For more information on PR's step, please see links of Contributing section.
+
+## 📙 Documents
+* [Getting Started](https://github.com/nhn/toast-ui.react-image-editor/blob/master/docs/getting-started.md)
+
+## 💬 Contributing
+* [Code of Conduct](https://github.com/nhn/toast-ui.react-image-editor/blob/master/CODE_OF_CONDUCT.md)
+* [Contributing guideline](https://github.com/nhn/toast-ui.react-image-editor/blob/master/CONTRIBUTING.md)
+* [Commit convention](https://github.com/nhn/toast-ui.react-image-editor/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md)
+
+## 📜 License
+This software is licensed under the [MIT](./LICENSE) © [NHN.](https://github.com/nhn)

+module.exports = (api) => {
+  api.cache(true);
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          modules: false,
+          useBuiltIns: 'entry'
+        }
+      ],
+      '@babel/preset-react'
+    ],
+    plugins: [
+      '@babel/plugin-proposal-class-properties',
+      '@babel/plugin-proposal-object-rest-spread'
+    ]
+  };
+};
\ No newline at end of file

+{
+  "name": "@toast-ui/react-image-editor",
+  "version": "1.3.0",
+  "description": "React wrapper component for tui.imageEditor",
+  "main": "dist/toastui-react-image-editor.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build:dev": "webpack --mode development",
+    "build": "webpack --mode production",
+    "serve": "webpack-dev-server",
+    "storybook": "start-storybook -s ./node_modules/tui-image-editor/dist/svg,.storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "homepage": "https://github.com/nhn/toast-ui.react-image-editor",
+  "bugs": "https://github.com/nhn/toast-ui.react-image-editor/issues",
+  "author": "NHN. FE Development Lab <dl_javascript@nhn.com>",
+  "repository": "https://github.com/nhn/toast-ui.react-image-editor.git",
+  "license": "MIT",
+  "browserslist": "last 2 versions, ie 9",
+  "peerDependencies": {
+    "react": "^16.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
+    "@storybook/addon-actions": "^4.1.7",
+    "@storybook/addon-knobs": "^4.1.7",
+    "@storybook/addon-links": "^4.1.7",
+    "@storybook/addons": "^4.1.7",
+    "@storybook/react": "^4.1.7",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "eslint": "^5.12.1",
+    "eslint-config-prettier": "^3.6.0",
+    "eslint-config-tui": "^2.1.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "jquery-mockjax": "^2.5.0",
+    "prettier": "^1.16.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "storybook": "^5.3.13",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "dependencies": {
+    "fabric": "4.2.0",
+    "tui-image-editor": "^3.11.0"
+  }
+}

+/**
+ * @fileoverview TOAST UI Image-Editor React wrapper component
+ * @author NHN. FE Development Lab <dl_javascript@nhn.com>
+ */
+import React from 'react';
+import TuiImageEditor from 'tui-image-editor';
+
+export default class ImageEditor extends React.Component {
+  rootEl = React.createRef();
+
+  imageEditorInst = null;
+
+  componentDidMount() {
+    this.imageEditorInst = new TuiImageEditor(this.rootEl.current, {
+      ...this.props
+    });
+
+    this.bindEventHandlers(this.props);
+  }
+
+  componentWillUnmount() {
+    this.unbindEventHandlers();
+
+    this.imageEditorInst.destroy();
+
+    this.imageEditorInst = null;
+  }
+
+  shouldComponentUpdate(nextProps) {
+    this.bindEventHandlers(this.props, nextProps);
+
+    return false;
+  }
+
+  getInstance() {
+    return this.imageEditorInst;
+  }
+
+  getRootElement() {
+    return this.rootEl.current;
+  }
+
+  bindEventHandlers(props, prevProps) {
+    Object.keys(props)
+      .filter(this.isEventHandlerKeys)
+      .forEach((key) => {
+        const eventName = key[2].toLowerCase() + key.slice(3);
+        // For <ImageEditor onFocus={condition ? onFocus1 : onFocus2} />
+        if (prevProps && prevProps[key] !== props[key]) {
+          this.imageEditorInst.off(eventName);
+        }
+        this.imageEditorInst.on(eventName, props[key]);
+      });
+  }
+
+  unbindEventHandlers() {
+    Object.keys(this.props)
+      .filter(this.isEventHandlerKeys)
+      .forEach((key) => {
+        const eventName = key[2].toLowerCase() + key.slice(3);
+        this.imageEditorInst.off(eventName);
+      });
+  }
+
+  isEventHandlerKeys(key) {
+    return /on[A-Z][a-zA-Z]+/.test(key);
+  }
+
+  render() {
+    return <div ref={this.rootEl} />;
+  }
+}

+import React from 'react';
+import {storiesOf} from '@storybook/react';
+
+import 'tui-image-editor/dist/tui-image-editor.css';
+import 'tui-color-picker/dist/tui-color-picker.css';
+
+import ImageEditor from '../src/index';
+
+const stories = storiesOf('Toast UI ImageEditor', module);
+
+const props = {
+  includeUI: {
+    loadImage: {
+      path: 'img/sampleImage2.png',
+      name: 'sampleImage2'
+    },
+    initMenu: 'shape',
+    uiSize: {
+      height: '700px',
+      width: '1000px'
+    }
+  },
+  cssMaxWidth: 700,
+  cssMaxHeight: 500
+};
+
+stories.add('Include default UI', () => <ImageEditor {...props} />);
+
+stories.add('Using Method', () => {
+  class Story extends React.Component {
+    ref = React.createRef();
+
+    imageEditor = null;
+
+    componentDidMount() {
+      this.imageEditor = this.ref.current.getInstance();
+    }
+
+    flipImageByAxis(isXAxis) {
+      this.imageEditor[isXAxis ? 'flipX' : 'flipY']()
+        .then((status) => {
+          console.log('flipX: ', status.flipX);
+          console.log('flipY: ', status.flipY);
+          console.log('angle: ', status.angle);
+        })
+        ['catch']((message) => {
+          console.log('error: ', message);
+        });
+    }
+
+    render() {
+      return (
+        <>
+          <ImageEditor ref={this.ref} {...props} />
+          <button
+            onClick={() => {
+              this.flipImageByAxis(true);
+            }}
+          >
+            Flip-X!
+          </button>
+          <button
+            onClick={() => {
+              this.flipImageByAxis(false);
+            }}
+          >
+            Flip-Y!
+          </button>
+        </>
+      );
+    }
+  }
+
+  return <Story />;
+});
+
+stories.add('Events', () => {
+  class Story2 extends React.Component {
+    ref = React.createRef();
+
+    imageEditor = null;
+
+    componentDidMount() {
+      this.imageEditor = this.ref.current.getInstance();
+    }
+
+    render() {
+      return (
+        <ImageEditor
+          ref={this.ref}
+          {...props}
+          onMousedown={(event, originPointer) => {
+            console.log(event);
+            console.log(originPointer);
+          }}
+          onAddText={(pos) => {
+            const {x: ox, y: oy} = pos.originPosition;
+            const {x: cx, y: cy} = pos.clientPosition;
+            console.log(`text position on canvas(x, y): ${ox}px, ${oy}px`);
+            console.log(`text position on brwoser(x, y): ${cx}px, ${cy}px`);
+          }}
+        />
+      );
+    }
+  }
+
+  return <Story2 />;
+});

+const path = require('path');
+
+const config = {
+  entry: './src/index.js',
+  output: {
+    filename: 'toastui-react-image-editor.js',
+    path: path.resolve(__dirname, 'dist'),
+    libraryTarget: 'commonjs2'
+  },
+  externals: {
+    'tui-image-editor': {
+      commonjs: 'tui-image-editor',
+      commonjs2: 'tui-image-editor'
+    },
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: [path.resolve(__dirname, 'src')],
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ]
+  }
+};
+
+module.exports = () => config;