diff --git a/README.md b/README.md index 5d7cce68..d5e0aafc 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ Official [CKEditor 5](https://ckeditor.com/ckeditor-5/) React component. ## Quick start: Using CKEditor 5 builds -The easiest way to use CKEditor 5 in your React application is by choosing one of the [editor builds](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/overview.html). There are four official builds which you can choose from: +The easiest way to use CKEditor 5 in your React application is by choosing one of the [editor builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html). There are four official builds which you can choose from: * [CKEditor 5 classic editor build](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic) * [CKEditor 5 inline editor build](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-inline) @@ -75,27 +75,27 @@ export default App; The `` component supports the following properties: -* `editor` (required) – The [`Editor`](https://docs.ckeditor.com/ckeditor5/latest/api/module_core_editor_editor-Editor.html) constructor to use. -* `data` – The initial data for the created editor. See the [`DataApi#setData()`](https://docs.ckeditor.com/ckeditor5/latest/api/module_core_editor_utils_dataapimixin-DataApi.html#function-setData) method. -* `config` – The editor configuration. See the [Configuration](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html) guide. -* `onChange` – A function called when the editor's data changed. See the [`model.Document#change:data`](https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_model_document-Document.html#event-change:data) event. +* `editor` (required) – The [`Editor`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html) constructor to use. +* `data` – The initial data for the created editor. See the [`DataApi#setData()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_utils_dataapimixin-DataApi.html#function-setData) method. +* `config` – The editor configuration. See the [Configuration](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html) guide. +* `onChange` – A function called when the editor's data changed. See the [`model.Document#change:data`](https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_model_document-Document.html#event-change:data) event. The callback receives two parameters: - 1. an [`EventInfo`](https://docs.ckeditor.com/ckeditor5/latest/api/module_utils_eventinfo-EventInfo.html) object, - 2. an [`Editor`](https://docs.ckeditor.com/ckeditor5/latest/api/module_core_editor_editor-Editor.html) instance. -* `onInit` – A function called when the editor was initialized. It receives the initialized [`editor`](https://docs.ckeditor.com/ckeditor5/latest/api/module_core_editor_editor-Editor.html) as a parameter. + 1. an [`EventInfo`](https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_eventinfo-EventInfo.html) object, + 2. an [`Editor`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html) instance. +* `onInit` – A function called when the editor was initialized. It receives the initialized [`editor`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html) as a parameter. ### Customizing the builds -[CKEditor 5 builds](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/overview.htm) come ready to use, with a set of built-in plugins and a predefined configuration. While you can change the configuration easily by using the `config` property of the `` component which allows you to change the [toolbar](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html#toolbar-setup) or [remove some plugins](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html#removing-features), in order to add plugins you need to rebuild the editor. +[CKEditor 5 builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.htm) come ready to use, with a set of built-in plugins and a predefined configuration. While you can change the configuration easily by using the `config` property of the `` component which allows you to change the [toolbar](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html#toolbar-setup) or [remove some plugins](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html#removing-features), in order to add plugins you need to rebuild the editor. There are two main ways to do that. -* [Customize one of the existing builds](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/development/custom-builds.html). +* [Customize one of the existing builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html). - This option does not require any changes in your project's configuration. You will create a new build somewhere next to your project and include it like you included one of the existing builds. Therefore, it is the easiest way to add missing features. Read more about this method in [Installing plugins](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/installing-plugins.html). -* [Integrate the editor from source](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/advanced-setup.html). + This option does not require any changes in your project's configuration. You will create a new build somewhere next to your project and include it like you included one of the existing builds. Therefore, it is the easiest way to add missing features. Read more about this method in [Installing plugins](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html). +* [Integrate the editor from source](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html). In this approach you will include CKEditor 5 from source — so you will choose the editor creator you want and the list of plugins, etc. It is more powerful and creates a tighter integration between your application and CKEditor 5, however, it requires adjusting your `webpack.config.js` to CKEditor 5 needs. @@ -117,7 +117,7 @@ Then, you can customize `UglifyJsPlugin` options in the webpack configuration. R ### Note: Using the document editor build -If you use the [Document editor](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/ui/document-editor.html), [you need to add the toolbar to the DOM manually](https://docs.ckeditor.com/ckeditor5/latest/api/module_editor-decoupled_decouplededitor-DecoupledEditor.html#static-function-create): +If you use the [Document editor](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/ui/document-editor.html), [you need to add the toolbar to the DOM manually](https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-decoupled_decouplededitor-DecoupledEditor.html#static-function-create): ```jsx import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'; @@ -151,9 +151,9 @@ export default App; ## Integrating CKEditor 5 from source -Integrating the editor from source allows you to use the full power of the [CKEditor 5 Framework](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/overview.html). +Integrating the editor from source allows you to use the full power of the [CKEditor 5 Framework](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html). -This guide assumes that you are using [Create React App CLI](https://github.com/facebook/create-react-app) as your boilerplate and it goes through adjusting it to fit CKEditor 5's needs. If you use your custom webpack setup, please read more about [including CKEditor 5 from source](https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-2-building-from-source). +This guide assumes that you are using [Create React App CLI](https://github.com/facebook/create-react-app) as your boilerplate and it goes through adjusting it to fit CKEditor 5's needs. If you use your custom webpack setup, please read more about [including CKEditor 5 from source](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-2-building-from-source). Install React CLI: @@ -332,7 +332,7 @@ npm install --save \ @ckeditor/ckeditor5-paragraph ``` -### Use the CKEditor component together with [CKEditor 5 Framework](https://docs.ckeditor.com/ckeditor5/latest/framework/): +### Use the CKEditor component together with [CKEditor 5 Framework](https://ckeditor.com/docs/ckeditor5/latest/framework/): ```jsx import React, { Component } from 'react'; diff --git a/dist/ckeditor.js.map b/dist/ckeditor.js.map index bbb67563..6bf07a88 100644 --- a/dist/ckeditor.js.map +++ b/dist/ckeditor.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack://CKEditor/webpack/universalModuleDefinition","webpack://CKEditor/webpack/bootstrap","webpack://CKEditor/./src/ckeditor.jsx","webpack://CKEditor/external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}","webpack://CKEditor/./node_modules/prop-types/index.js","webpack://CKEditor/./node_modules/prop-types/factoryWithThrowingShims.js","webpack://CKEditor/./node_modules/prop-types/lib/ReactPropTypesSecret.js"],"names":["root","factory","exports","module","require","define","amd","window","__WEBPACK_EXTERNAL_MODULE__1__","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","CKEditor","props","_classCallCheck","this","_this","_possibleConstructorReturn","__proto__","getPrototypeOf","editor","React","Component","getData","data","setData","_initializeEditor","_destroyEditor","_this2","_react2","default","createElement","ref","_ref","domContainer","_this3","config","then","onInit","model","document","on","event","onChange","catch","error","console","_this4","destroy","propTypes","PropTypes","func","isRequired","string","defaultProps","ReactPropTypesSecret","emptyFunction","shim","propName","componentName","location","propFullName","secret","err","Error","getShim","ReactPropTypes","array","bool","number","symbol","any","arrayOf","element","instanceOf","node","objectOf","oneOf","oneOfType","shape","exact","checkPropTypes"],"mappings":"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","file":"ckeditor.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"CKEditor\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"CKEditor\"] = factory(root[\"React\"]);\n})(window, function(__WEBPACK_EXTERNAL_MODULE__1__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","/**\n * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.\n * For licensing, see LICENSE.md.\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default class CKEditor extends React.Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\t// After mounting the editor, the variable will contain a reference to created editor.\n\t\t// @see: https://docs.ckeditor.com/ckeditor5/latest/api/module_core_editor_editor-Editor.html\n\t\tthis.editor = null;\n\t}\n\n\tcomponentDidUpdate() {\n\t\tif ( this.editor && this.editor.getData() !== this.props.data ) {\n\t\t\tthis.editor.setData( this.props.data );\n\t\t}\n\t}\n\n\t// Initialize editor when component is mounted.\n\tcomponentDidMount() {\n\t\tthis._initializeEditor();\n\t}\n\n\t// Destroy editor before unmouting component.\n\tcomponentWillUnmount() {\n\t\tthis._destroyEditor();\n\t}\n\n\t// Render
element which will be replaced by CKEditor.\n\trender() {\n\t\treturn (\n\t\t\t
( this.domContainer = ref ) }>
\n\t\t);\n\t}\n\n\t_initializeEditor() {\n\t\tthis.props.editor\n\t\t\t.create( this.domContainer, this.props.config )\n\t\t\t.then( editor => {\n\t\t\t\tthis.editor = editor;\n\n\t\t\t\tif ( this.props.data ) {\n\t\t\t\t\tthis.editor.setData( this.props.data );\n\t\t\t\t}\n\n\t\t\t\tif ( this.props.onInit ) {\n\t\t\t\t\tthis.props.onInit( this.editor );\n\t\t\t\t}\n\n\t\t\t\tconst document = this.editor.model.document;\n\n\t\t\t\tdocument.on( 'change:data', event => {\n\t\t\t\t\t/* istanbul ignore else */\n\t\t\t\t\tif ( this.props.onChange ) {\n\t\t\t\t\t\tthis.props.onChange( event, editor );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t} )\n\t\t\t.catch( error => {\n\t\t\t\tconsole.error( error );\n\t\t\t} );\n\t}\n\n\t_destroyEditor() {\n\t\tif ( this.editor ) {\n\t\t\tthis.editor.destroy()\n\t\t\t\t.then( () => {\n\t\t\t\t\tthis.editor = null;\n\t\t\t\t} );\n\t\t}\n\t}\n}\n\n// Properties definition.\nCKEditor.propTypes = {\n\teditor: PropTypes.func.isRequired,\n\tdata: PropTypes.string,\n\tconfig: PropTypes.object,\n\tonChange: PropTypes.func,\n\tonInit: PropTypes.func\n};\n\n// Default values for non-required properties.\nCKEditor.defaultProps = {\n\tdata: '',\n\tconfig: {}\n};\n\n","module.exports = __WEBPACK_EXTERNAL_MODULE__1__;","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nif (process.env.NODE_ENV !== 'production') {\n var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&\n Symbol.for &&\n Symbol.for('react.element')) ||\n 0xeac7;\n\n var isValidElement = function(object) {\n return typeof object === 'object' &&\n object !== null &&\n object.$$typeof === REACT_ELEMENT_TYPE;\n };\n\n // By explicitly using `prop-types` you are opting into new development behavior.\n // http://fb.me/prop-types-in-prod\n var throwOnDirectAccess = true;\n module.exports = require('./factoryWithTypeCheckers')(isValidElement, throwOnDirectAccess);\n} else {\n // By explicitly using `prop-types` you are opting into new production behavior.\n // http://fb.me/prop-types-in-prod\n module.exports = require('./factoryWithThrowingShims')();\n}\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n\nfunction emptyFunction() {}\n\nmodule.exports = function() {\n function shim(props, propName, componentName, location, propFullName, secret) {\n if (secret === ReactPropTypesSecret) {\n // It is still safe when called from React.\n return;\n }\n var err = new Error(\n 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +\n 'Use PropTypes.checkPropTypes() to call them. ' +\n 'Read more at http://fb.me/use-check-prop-types'\n );\n err.name = 'Invariant Violation';\n throw err;\n };\n shim.isRequired = shim;\n function getShim() {\n return shim;\n };\n // Important!\n // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.\n var ReactPropTypes = {\n array: shim,\n bool: shim,\n func: shim,\n number: shim,\n object: shim,\n string: shim,\n symbol: shim,\n\n any: shim,\n arrayOf: getShim,\n element: shim,\n instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim\n };\n\n ReactPropTypes.checkPropTypes = emptyFunction;\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack://CKEditor/webpack/universalModuleDefinition","webpack://CKEditor/webpack/bootstrap","webpack://CKEditor/./src/ckeditor.jsx","webpack://CKEditor/external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}","webpack://CKEditor//Users/pomek/Projects/ckeditor/ckeditor5/node_modules/prop-types/index.js","webpack://CKEditor//Users/pomek/Projects/ckeditor/ckeditor5/node_modules/prop-types/factoryWithThrowingShims.js","webpack://CKEditor//Users/pomek/Projects/ckeditor/ckeditor5/node_modules/prop-types/lib/ReactPropTypesSecret.js"],"names":["root","factory","exports","module","require","define","amd","window","__WEBPACK_EXTERNAL_MODULE__1__","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","CKEditor","props","_classCallCheck","this","_this","_possibleConstructorReturn","__proto__","getPrototypeOf","editor","React","Component","getData","data","setData","_initializeEditor","_destroyEditor","_this2","_react2","default","createElement","ref","_ref","domContainer","_this3","config","then","onInit","model","document","on","event","onChange","catch","error","console","_this4","destroy","propTypes","PropTypes","func","isRequired","string","defaultProps","ReactPropTypesSecret","emptyFunction","shim","propName","componentName","location","propFullName","secret","err","Error","getShim","ReactPropTypes","array","bool","number","symbol","any","arrayOf","element","instanceOf","node","objectOf","oneOf","oneOfType","shape","exact","checkPropTypes"],"mappings":";;;;CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,EAAAG,QAAA,UACA,mBAAAC,eAAAC,IACAD,QAAA,SAAAJ,GACA,iBAAAC,QACAA,QAAA,SAAAD,EAAAG,QAAA,UAEAJ,EAAA,SAAAC,EAAAD,EAAA,OARA,CASCO,OAAA,SAAAC,GACD,mBCTA,IAAAC,KAGA,SAAAC,EAAAC,GAGA,GAAAF,EAAAE,GACA,OAAAF,EAAAE,GAAAT,QAGA,IAAAC,EAAAM,EAAAE,IACAC,EAAAD,EACAE,GAAA,EACAX,YAUA,OANAY,EAAAH,GAAAI,KAAAZ,EAAAD,QAAAC,IAAAD,QAAAQ,GAGAP,EAAAU,GAAA,EAGAV,EAAAD,QA0DA,OArDAQ,EAAAM,EAAAF,EAGAJ,EAAAO,EAAAR,EAGAC,EAAAQ,EAAA,SAAAhB,EAAAiB,EAAAC,GACAV,EAAAW,EAAAnB,EAAAiB,IACAG,OAAAC,eAAArB,EAAAiB,GAA0CK,YAAA,EAAAC,IAAAL,KAK1CV,EAAAgB,EAAA,SAAAxB,GACA,oBAAAyB,eAAAC,aACAN,OAAAC,eAAArB,EAAAyB,OAAAC,aAAwDC,MAAA,WAExDP,OAAAC,eAAArB,EAAA,cAAiD2B,OAAA,KAQjDnB,EAAAoB,EAAA,SAAAD,EAAAE,GAEA,GADA,EAAAA,IAAAF,EAAAnB,EAAAmB,IACA,EAAAE,EAAA,OAAAF,EACA,KAAAE,GAAA,iBAAAF,QAAAG,WAAA,OAAAH,EACA,IAAAI,EAAAX,OAAAY,OAAA,MAGA,GAFAxB,EAAAgB,EAAAO,GACAX,OAAAC,eAAAU,EAAA,WAAyCT,YAAA,EAAAK,UACzC,EAAAE,GAAA,iBAAAF,EAAA,QAAAM,KAAAN,EAAAnB,EAAAQ,EAAAe,EAAAE,EAAA,SAAAA,GAAgH,OAAAN,EAAAM,IAAqBC,KAAA,KAAAD,IACrI,OAAAF,GAIAvB,EAAA2B,EAAA,SAAAlC,GACA,IAAAiB,EAAAjB,KAAA6B,WACA,WAA2B,OAAA7B,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAO,EAAAQ,EAAAE,EAAA,IAAAA,GACAA,GAIAV,EAAAW,EAAA,SAAAiB,EAAAC,GAAsD,OAAAjB,OAAAkB,UAAAC,eAAA1B,KAAAuB,EAAAC,IAGtD7B,EAAAgC,EAAA,GAIAhC,IAAAiC,EAAA,gVC7EAjC,EAAA,QACAA,EAAA,2DAEqBkC,cACpB,SAAAA,EAAaC,gGAAQC,CAAAC,KAAAH,GAAA,IAAAI,mKAAAC,CAAAF,MAAAH,EAAAM,WAAA5B,OAAA6B,eAAAP,IAAA7B,KAAAgC,KACbF,IADa,OAKpBG,EAAKI,OAAS,KALMJ,qUADgBK,UAAMC,2DAUrCP,KAAKK,QAAUL,KAAKK,OAAOG,YAAcR,KAAKF,MAAMW,MACxDT,KAAKK,OAAOK,QAASV,KAAKF,MAAMW,kDAMjCT,KAAKW,mEAKLX,KAAKY,kDAIG,IAAAC,EAAAb,KACR,OACCc,EAAAC,QAAAC,cAAA,OAAKC,IAAM,SAAAC,GAAA,OAASL,EAAKM,aAAeF,iDAItB,IAAAG,EAAApB,KACnBA,KAAKF,MAAMO,OACTlB,OAAQa,KAAKmB,aAAcnB,KAAKF,MAAMuB,QACtCC,KAAM,SAAAjB,GACNe,EAAKf,OAASA,EAETe,EAAKtB,MAAMW,MACfW,EAAKf,OAAOK,QAASU,EAAKtB,MAAMW,MAG5BW,EAAKtB,MAAMyB,QACfH,EAAKtB,MAAMyB,OAAQH,EAAKf,QAGRe,EAAKf,OAAOmB,MAAMC,SAE1BC,GAAI,cAAe,SAAAC,GAEtBP,EAAKtB,MAAM8B,UACfR,EAAKtB,MAAM8B,SAAUD,EAAOtB,OAI9BwB,MAAO,SAAAC,GACPC,QAAQD,MAAOA,8CAID,IAAAE,EAAAhC,KACXA,KAAKK,QACTL,KAAKK,OAAO4B,UACVX,KAAM,WACNU,EAAK3B,OAAS,0BAhEER,EAuErBA,EAASqC,WACR7B,OAAQ8B,UAAUC,KAAKC,WACvB5B,KAAM0B,UAAUG,OAChBjB,OAAQc,UAAU5C,OAClBqC,SAAUO,UAAUC,KACpBb,OAAQY,UAAUC,MAInBvC,EAAS0C,cACR9B,KAAM,GACNY,0BC1FDjE,EAAAD,QAAAM,mBC0BAL,EAAAD,QAAAQ,EAAA,EAAAA,iCCjBA,IAAA6E,EAAA7E,EAAA,GAEA,SAAA8E,KAEArF,EAAAD,QAAA,WACA,SAAAuF,EAAA5C,EAAA6C,EAAAC,EAAAC,EAAAC,EAAAC,GACA,GAAAA,IAAAP,EAAA,CAIA,IAAAQ,EAAA,IAAAC,MACA,mLAKA,MADAD,EAAA5E,KAAA,sBACA4E,GAGA,SAAAE,IACA,OAAAR,EAFAA,EAAAL,WAAAK,EAMA,IAAAS,GACAC,MAAAV,EACAW,KAAAX,EACAN,KAAAM,EACAY,OAAAZ,EACAnD,OAAAmD,EACAJ,OAAAI,EACAa,OAAAb,EAEAc,IAAAd,EACAe,QAAAP,EACAQ,QAAAhB,EACAiB,WAAAT,EACAU,KAAAlB,EACAmB,SAAAX,EACAY,MAAAZ,EACAa,UAAAb,EACAc,MAAAd,EACAe,MAAAf,GAMA,OAHAC,EAAAe,eAAAzB,EACAU,EAAAhB,UAAAgB,EAEAA,iCC9CA/F,EAAAD,QAFA","file":"ckeditor.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"CKEditor\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"CKEditor\"] = factory(root[\"React\"]);\n})(window, function(__WEBPACK_EXTERNAL_MODULE__1__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","/**\n * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.\n * For licensing, see LICENSE.md.\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default class CKEditor extends React.Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\t// After mounting the editor, the variable will contain a reference to the created editor.\n\t\t// @see: https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html\n\t\tthis.editor = null;\n\t}\n\n\tcomponentDidUpdate() {\n\t\tif ( this.editor && this.editor.getData() !== this.props.data ) {\n\t\t\tthis.editor.setData( this.props.data );\n\t\t}\n\t}\n\n\t// Initialize the editor when the component is mounted.\n\tcomponentDidMount() {\n\t\tthis._initializeEditor();\n\t}\n\n\t// Destroy the editor before unmouting the component.\n\tcomponentWillUnmount() {\n\t\tthis._destroyEditor();\n\t}\n\n\t// Render a
element which will be replaced by CKEditor.\n\trender() {\n\t\treturn (\n\t\t\t
( this.domContainer = ref ) }>
\n\t\t);\n\t}\n\n\t_initializeEditor() {\n\t\tthis.props.editor\n\t\t\t.create( this.domContainer, this.props.config )\n\t\t\t.then( editor => {\n\t\t\t\tthis.editor = editor;\n\n\t\t\t\tif ( this.props.data ) {\n\t\t\t\t\tthis.editor.setData( this.props.data );\n\t\t\t\t}\n\n\t\t\t\tif ( this.props.onInit ) {\n\t\t\t\t\tthis.props.onInit( this.editor );\n\t\t\t\t}\n\n\t\t\t\tconst document = this.editor.model.document;\n\n\t\t\t\tdocument.on( 'change:data', event => {\n\t\t\t\t\t/* istanbul ignore else */\n\t\t\t\t\tif ( this.props.onChange ) {\n\t\t\t\t\t\tthis.props.onChange( event, editor );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t} )\n\t\t\t.catch( error => {\n\t\t\t\tconsole.error( error );\n\t\t\t} );\n\t}\n\n\t_destroyEditor() {\n\t\tif ( this.editor ) {\n\t\t\tthis.editor.destroy()\n\t\t\t\t.then( () => {\n\t\t\t\t\tthis.editor = null;\n\t\t\t\t} );\n\t\t}\n\t}\n}\n\n// Properties definition.\nCKEditor.propTypes = {\n\teditor: PropTypes.func.isRequired,\n\tdata: PropTypes.string,\n\tconfig: PropTypes.object,\n\tonChange: PropTypes.func,\n\tonInit: PropTypes.func\n};\n\n// Default values for non-required properties.\nCKEditor.defaultProps = {\n\tdata: '',\n\tconfig: {}\n};\n\n","module.exports = __WEBPACK_EXTERNAL_MODULE__1__;","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nif (process.env.NODE_ENV !== 'production') {\n var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&\n Symbol.for &&\n Symbol.for('react.element')) ||\n 0xeac7;\n\n var isValidElement = function(object) {\n return typeof object === 'object' &&\n object !== null &&\n object.$$typeof === REACT_ELEMENT_TYPE;\n };\n\n // By explicitly using `prop-types` you are opting into new development behavior.\n // http://fb.me/prop-types-in-prod\n var throwOnDirectAccess = true;\n module.exports = require('./factoryWithTypeCheckers')(isValidElement, throwOnDirectAccess);\n} else {\n // By explicitly using `prop-types` you are opting into new production behavior.\n // http://fb.me/prop-types-in-prod\n module.exports = require('./factoryWithThrowingShims')();\n}\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n\nfunction emptyFunction() {}\n\nmodule.exports = function() {\n function shim(props, propName, componentName, location, propFullName, secret) {\n if (secret === ReactPropTypesSecret) {\n // It is still safe when called from React.\n return;\n }\n var err = new Error(\n 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +\n 'Use PropTypes.checkPropTypes() to call them. ' +\n 'Read more at http://fb.me/use-check-prop-types'\n );\n err.name = 'Invariant Violation';\n throw err;\n };\n shim.isRequired = shim;\n function getShim() {\n return shim;\n };\n // Important!\n // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.\n var ReactPropTypes = {\n array: shim,\n bool: shim,\n func: shim,\n number: shim,\n object: shim,\n string: shim,\n symbol: shim,\n\n any: shim,\n arrayOf: getShim,\n element: shim,\n instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim\n };\n\n ReactPropTypes.checkPropTypes = emptyFunction;\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n"],"sourceRoot":""} \ No newline at end of file diff --git a/sample/index.html b/sample/index.html index dd2c399e..f0cb1857 100644 --- a/sample/index.html +++ b/sample/index.html @@ -21,11 +21,11 @@

CKEditor 5 – React Component – development sample

document.addEventListener( 'DOMContentLoaded', () => { const editorContent = `

Sample

-

This is an instance of the classic editor build.

+

This is an instance of the classic editor build.

CKEditor 5 Sample image.
-

You can use this sample to validate whether your custom build works fine.

+

You can use this sample to validate whether your custom build works fine.

`; ReactDOM.render( diff --git a/src/ckeditor.jsx b/src/ckeditor.jsx index 823a1e3e..1795da14 100644 --- a/src/ckeditor.jsx +++ b/src/ckeditor.jsx @@ -11,7 +11,7 @@ export default class CKEditor extends React.Component { super( props ); // After mounting the editor, the variable will contain a reference to the created editor. - // @see: https://docs.ckeditor.com/ckeditor5/latest/api/module_core_editor_editor-Editor.html + // @see: https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html this.editor = null; } diff --git a/tests/ckeditor.jsx b/tests/ckeditor.jsx index 53171517..396f3a4b 100644 --- a/tests/ckeditor.jsx +++ b/tests/ckeditor.jsx @@ -29,7 +29,7 @@ class Editor { } // Implements the `DataApi` interface. - // See: https://docs.ckeditor.com/ckeditor5/latest/api/module_core_editor_utils_dataapimixin-DataApi.html + // See: https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_utils_dataapimixin-DataApi.html setData() {} getData() {}