diff --git a/css/responsivearea.css b/css/responsivearea.css index 1e55337..bb06d33 100644 --- a/css/responsivearea.css +++ b/css/responsivearea.css @@ -97,14 +97,14 @@ position: relative; float: left; margin-left: 2.762430939%; - border: dashed 1px #aaa; + border: dashed 1px #aaa !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ckeditor-col-container { - overflow: hidden; + /*overflow: hidden;*/ margin-bottom: 1em; } diff --git a/js/build/responsiveAreaPlugin.js b/js/build/responsiveAreaPlugin.js index 12c94d1..5c89257 100644 --- a/js/build/responsiveAreaPlugin.js +++ b/js/build/responsiveAreaPlugin.js @@ -1 +1 @@ -!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.CKEditor5=n():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.responsiveAreaPlugin=n())}(self,(()=>(()=>{var __webpack_modules__={"./js/ckeditor5_plugins/responsiveAreaPlugin/src/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _responsivearea__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./responsivearea */ "./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsivearea.js");\n/**\n * @file The build process always expects an index.js file. Anything exported\n * here will be recognized by CKEditor 5 as an available plugin. Multiple\n * plugins can be exported in this one file.\n *\n * I.e. this file\'s purpose is to make plugin(s) discoverable.\n */\n// cSpell:ignore ResponsiveArea\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n ResponsiveArea: _responsivearea__WEBPACK_IMPORTED_MODULE_0__["default"],\n});\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/index.js?')},"./js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ InsertResponsiveAreaCommand)\n/* harmony export */ });\n/* harmony import */ var ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ckeditor5/src/core */ \"ckeditor5/src/core.js\");\n/**\n * @file defines InsertResponsiveAreaCommand, which is executed when the responsiveArea\n * toolbar button is pressed.\n */\n// cSpell:ignore responsiveareaediting\n\n\n\nclass InsertResponsiveAreaCommand extends ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__.Command {\n execute(option) {\n const { model } = this.editor;\n\n const value = option.value;\n\n model.change((writer) => {\n // Insert * at the current selection position\n // in a way that will result in creating a valid model structure.\n model.insertContent(createResponsiveArea(writer));\n model.insertContent(createGrid(writer, value));\n });\n }\n\n refresh() {\n const { model } = this.editor;\n const { selection } = model.document;\n\n // Determine if the cursor (selection) is in a position where adding a\n // responsiveArea is permitted. This is based on the schema of the model(s)\n // currently containing the cursor.\n const allowedIn = model.schema.findAllowedParent(\n selection.getFirstPosition(),\n 'responsiveArea',\n 'responsiveDivWrapper',\n 'div'\n );\n\n // If the cursor is not in a location where a responsiveArea can be added, return\n // null so the addition doesn't happen.\n this.isEnabled = allowedIn !== null;\n }\n}\n\nfunction createResponsiveArea(writer) {\n // Create instances of the three elements registered with the editor in\n // responsiveareaediting.js.\n const responsiveArea = writer.createElement('responsiveArea');\n const responsiveAreaTitle = writer.createElement('responsiveAreaTitle');\n const responsiveAreaDescription = writer.createElement('responsiveAreaDescription');\n\n // Append the title and description elements to the responsiveArea, which matches\n // the parent/child relationship as defined in their schemas.\n writer.append(responsiveAreaTitle, responsiveArea);\n writer.append(responsiveAreaDescription, responsiveArea);\n\n // The responsiveAreaDescription text content will automatically be wrapped in a\n // `

`.\n writer.appendElement('paragraph', responsiveAreaDescription);\n\n // Return the element to be added to the editor.\n return responsiveArea;\n}\n\n\nfunction createGrid(writer, value) {\n const wrapper = writer.createElement('responsiveDivWrapper');\n let grid_columns = getColumnsByGrid(value);\n for (const grid_column of grid_columns) {\n const column = writer.createElement('responsiveDivColumn_' + grid_column);\n writer.append(column, wrapper);\n }\n return wrapper;\n}\n\n\nfunction getColumnsByGrid(grid) {\n switch (grid) {\n case '1_100':\n return [\n '1_100'\n ];\n case '2_50_50':\n return [\n '2_50',\n '2_50'\n ];\n case '2_75_25':\n return [\n '2_75',\n '2_25'\n ];\n case '2_25_75':\n return [\n '2_25',\n '2_75'\n ];\n case '2_33_66':\n return [\n '2_33',\n '2_66'\n ];\n case '2_66_33':\n return [\n '2_66',\n '2_33'\n ];\n case '3_33_34_33':\n return [\n '2_33',\n '2_34',\n '2_33'\n ];\n case '3_25_50_25':\n return [\n '3_25',\n '3_50',\n '3_25'\n ];\n case '3_25_25_50':\n return [\n '3_25',\n '3_25',\n '3_50'\n ];\n case '3_50_25_25':\n return [\n '3_50',\n '3_25',\n '3_25'\n ];\n case '4_25_25_25_25':\n return [\n '4_25',\n '4_25',\n '4_25',\n '4_25'\n ];\n case '5_20_20_20_20_20':\n return [\n '5_20',\n '5_20',\n '5_20',\n '5_20',\n '5_20'\n ];\n }\n}\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js?")},"./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsivearea.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (/* binding */ ResponsiveArea)\n/* harmony export */ });\n/* harmony import */ var _responsiveareaediting__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./responsiveareaediting */ "./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js");\n/* harmony import */ var _responsiveareaui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./responsiveareaui */ "./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaui.js");\n/* harmony import */ var ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ckeditor5/src/core */ "ckeditor5/src/core.js");\n/**\n * @file This is what CKEditor refers to as a master (glue) plugin. Its role is\n * just to load the “editing” and “UI” components of this Plugin. Those\n * components could be included in this file, but\n *\n * I.e, this file\'s purpose is to integrate all the separate parts of the plugin\n * before it\'s made discoverable via index.js.\n */\n// cSpell:ignore responsiveareaediting responsiveareaui\n\n// The contents of ResponsiveAreaUI and ResponsiveArea editing could be included in this\n// file, but it is recommended to separate these concerns in different files.\n\n\n\n\nclass ResponsiveArea extends ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_2__.Plugin {\n // Note that ResponsiveAreaEditing and ResponsiveAreaUI also extend `Plugin`, but these\n // are not seen as individual plugins by CKEditor 5. CKEditor 5 will only\n // discover the plugins explicitly exported in index.js.\n static get requires() {\n return [_responsiveareaediting__WEBPACK_IMPORTED_MODULE_0__["default"], _responsiveareaui__WEBPACK_IMPORTED_MODULE_1__["default"]];\n }\n}\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsivearea.js?')},"./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ ResponsiveAreaEditing)\n/* harmony export */ });\n/* harmony import */ var ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ckeditor5/src/core */ \"ckeditor5/src/core.js\");\n/* harmony import */ var ckeditor5_src_widget__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ckeditor5/src/widget */ \"ckeditor5/src/widget.js\");\n/* harmony import */ var _insertresponsiveareacommand__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./insertresponsiveareacommand */ \"./js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js\");\n\n\n\n\n\n// cSpell:ignore responsivearea insertresponsiveareacommand\nclass ResponsiveAreaEditing extends ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__.Plugin {\n static get requires() {\n return [ckeditor5_src_widget__WEBPACK_IMPORTED_MODULE_1__.Widget];\n }\n\n init() {\n this._defineSchema();\n this._defineConverters();\n this.editor.commands.add(\n 'insertResponsiveArea',\n new _insertresponsiveareacommand__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this.editor),\n );\n }\n\n /*\n * This registers the structure that will be seen by CKEditor 5 as\n * \n * \n * \n * \n *\n * The logic in _defineConverters() will determine how this is converted to\n * markup.\n */\n _defineSchema() {\n // Schemas are registered via the central `editor` object.\n const schema = this.editor.model.schema;\n\n schema.register('responsiveArea', {\n isObject: true,\n allowWhere: '$block',\n });\n\n\n schema.register('responsiveDivWrapper', {\n isObject: true,\n allowIn: 'responsiveArea',\n allowWhere: '$block',\n });\n\n const options = this._optionsListCols();\n for (const option of options) {\n schema.register('responsiveDivColumn_' + option.grid, {\n isObject: true,\n allowIn: 'responsiveArea',\n allowWhere: '$block',\n });\n }\n }\n\n /**\n * Converters determine how CKEditor 5 models are converted into markup and\n * vice-versa.\n */\n _defineConverters() {\n // Converters are registered via the central editor object.\n const { conversion } = this.editor;\n\n conversion.for('upcast').elementToElement({\n model: 'responsiveDivWrapper',\n view: {\n name: 'div',\n classes: 'ckeditor-col-container clearfix row',\n },\n });\n\n\n conversion.for('dataDowncast').elementToElement({\n model: 'responsiveDivWrapper',\n view: {\n name: 'div',\n classes: 'ckeditor-col-container clearfix row',\n },\n });\n\n\n conversion.for('editingDowncast').elementToElement({\n model: 'responsiveDivWrapper',\n view: (modelElement, { writer: viewWriter }) => {\n const section = viewWriter.createContainerElement('div', {\n class: 'ckeditor-col-container clearfix row',\n });\n\n return (0,ckeditor5_src_widget__WEBPACK_IMPORTED_MODULE_1__.toWidget)(section, viewWriter, { label: 'responsiveDivWrapper' });\n },\n });\n\n\n const options = this._optionsListCols();\n\n for (const option of options) {\n conversion.for('dataDowncast').elementToElement({\n model: 'responsiveDivColumn_' + option.grid,\n view: {\n name: 'div',\n classes: option.class\n },\n });\n\n conversion.for('upcast').elementToElement({\n model: 'responsiveDivColumn_' + option.grid,\n view: {\n name: 'div',\n classes: option.class\n },\n });\n\n conversion.for('editingDowncast').elementToElement({\n model: 'responsiveDivColumn_' + option.grid,\n view: (modelElement, { writer: viewWriter }) => {\n const section = viewWriter.createContainerElement('div', {\n class: option.class\n });\n\n return (0,ckeditor5_src_widget__WEBPACK_IMPORTED_MODULE_1__.toWidget)(section, viewWriter, { label: 'responsiveDivColumn' });\n },\n });\n\n\n }\n\n\n\n }\n\n\n _optionsListCols() {\n return [\n {\n grid: '1_100',\n class: 'grid-12 col-md-12 col-sm-12 col-xs-12 col-lg-12'\n },\n {\n grid: '2_50',\n class: 'grid-6 sixcol col-md-6 col-sm-6 col-xs-6 col-lg-6'\n },\n {\n grid: '2_75',\n class: 'grid-8 eightcol col-md-9 col-sm-9 col-xs-9 col-lg-9'\n },\n {\n grid: '2_25',\n class: 'grid-4 fourcol col-md-3 col-sm-3 col-xs-3 col-lg-3'\n },\n {\n grid: '2_33',\n class: 'grid-5 fivecol col-md-4 col-sm-4 col-xs-4 col-lg-4'\n },\n {\n grid: '2_66',\n class: 'grid-7 sevencol col-md-8 col-sm-8 col-xs-8 col-lg-8'\n },\n {\n grid: '3_33',\n class: 'grid-4 fourcol col-md-4 col-sm-4 col-xs-4 col-lg-4'\n },\n {\n grid: '3_44',\n class: 'grid-4 fourcol col-md-4 col-sm-4 col-xs-4 col-lg-4'\n },\n {\n grid: '3_25',\n class: 'grid-3 threecol col-md-3 col-sm-3 col-xs-3 col-lg-3'\n },\n {\n grid: '3_50',\n class: 'grid-6 sixcol col-md-6 col-sm-6 col-xs-6 col-lg-6'\n },\n {\n grid: '4_25',\n class: 'grid-3 threecol col-md-3 col-sm-3 col-xs-3 col-lg-3'\n },\n {\n grid: '5_20',\n class: 'grid-2 twocol col-sm-2 col-xs-2 col-lg-2 layout-5-col'\n }\n ];\n }\n\n}\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js?")},"./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaui.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ ResponsiveAreaUI)\n/* harmony export */ });\n/* harmony import */ var ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ckeditor5/src/core */ \"ckeditor5/src/core.js\");\n/* harmony import */ var ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ckeditor5/src/ui */ \"ckeditor5/src/ui.js\");\n/* harmony import */ var _icons_responsivearea_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../icons/responsivearea.svg */ \"./icons/responsivearea.svg\");\n/* harmony import */ var ckeditor5_src_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ckeditor5/src/utils */ \"ckeditor5/src/utils.js\");\n/**\n * @file registers the responsiveArea toolbar button and binds functionality to it.\n */\n\n\n\n\n\n\nclass ResponsiveAreaUI extends ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__.Plugin {\n init() {\n const editor = this.editor;\n const t = editor.t;\n const options = this._getLocalizedOptions();\n this._balloon = this.editor.plugins.get(ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__.ContextualBalloon);\n\n\n // This will register the responsiveArea toolbar button.\n editor.ui.componentFactory.add('responsiveArea', (locale) => {\n const command = editor.commands.get('insertResponsiveArea');\n const dropdownView = (0,ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__.createDropdown)(locale);\n (0,ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__.addListToDropdown)( dropdownView, _prepareListOptions( options, command ) );\n dropdownView.buttonView.set( {\n label: t( 'CKEditor Responsive' ),\n icon: _icons_responsivearea_svg__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n tooltip: true\n } );\n dropdownView.bind( 'isEnabled' ).to( command );\n this.listenTo(dropdownView, 'execute', (item) => {\n editor.execute('insertResponsiveArea', { value: item.source.value })\n });\n\n return dropdownView;\n });\n }\n\n _getLocalizedOptions() {\n const editor = this.editor;\n const t = editor.t;\n const options = [\n {\n value: '1_100',\n title: t('1 area - 100%')\n },\n {\n value: '2_50_50',\n title: t('2 areas - 50% each')\n },\n {\n value: '2_75_25',\n title: t('2 areas - 75% 25%')\n },\n {\n value: '2_25_75',\n title: t('2 areas - 25% 75%')\n },\n {\n value: '2_33_66',\n title: t('2 areas - 33% 66%')\n },\n {\n value: '2_66_33',\n title: t('2 areas - 66% 33%')\n },\n {\n value: '3_33_44_33',\n title: t('3 areas - 33% each')\n },\n {\n value: '3_25_50_25',\n title: t('3 areas - 25% 50% 25%')\n },\n {\n value: '3_25_25_50',\n title: t('3 areas - 25% 25% 50%')\n },\n {\n value: '4_25_25_25_25',\n title: t('4 areas - 25% each')\n },\n {\n value: '5_20_20_20_20_20',\n title: t('5 areas - 20% each')\n },\n\n ];\n\n return options.map( option => {\n // The only title to localize is \"Default\" others are font names.\n if ( option.title === 'Default' ) {\n option.title = t( 'Default' );\n }\n\n return option;\n } );\n }\n\n _showUI() {\n this._balloon.add( {\n view: this.formView,\n position: this._getBalloonPositionData()\n } );\n }\n\n _hideUI() {\n this._balloon.remove( this.formView );\n this.editor.editing.view.focus();\n }\n\n _getBalloonPositionData() {\n const view = this.editor.editing.view;\n const viewDocument = view.document;\n let target = null;\n target = () => view.domConverter.viewRangeToDom( viewDocument.selection.getFirstRange() );\n return {\n target\n };\n }\n}\n\n\nfunction _prepareListOptions(options, command) {\n const itemDefinitions = new ckeditor5_src_utils__WEBPACK_IMPORTED_MODULE_3__.Collection();\n\n // Create dropdown items.\n for (const option of options) {\n const def = {\n type: 'button',\n model: new ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__.Model( {\n commandName: 'responsiveArea',\n commandParam: option.model,\n label: option.title,\n withText: true,\n value: option.value,\n } )\n };\n\n itemDefinitions.add(def);\n }\n return itemDefinitions;\n}\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaui.js?")},"./icons/responsivearea.svg":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./icons/responsivearea.svg?')},"ckeditor5/src/core.js":(module,__unused_webpack_exports,__webpack_require__)=>{eval('module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ "dll-reference CKEditor5.dll"))("./src/core.js");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/delegated_./core.js_from_dll-reference_CKEditor5.dll?')},"ckeditor5/src/ui.js":(module,__unused_webpack_exports,__webpack_require__)=>{eval('module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ "dll-reference CKEditor5.dll"))("./src/ui.js");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/delegated_./ui.js_from_dll-reference_CKEditor5.dll?')},"ckeditor5/src/utils.js":(module,__unused_webpack_exports,__webpack_require__)=>{eval('module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ "dll-reference CKEditor5.dll"))("./src/utils.js");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/delegated_./utils.js_from_dll-reference_CKEditor5.dll?')},"ckeditor5/src/widget.js":(module,__unused_webpack_exports,__webpack_require__)=>{eval('module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ "dll-reference CKEditor5.dll"))("./src/widget.js");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/delegated_./widget.js_from_dll-reference_CKEditor5.dll?')},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},__webpack_module_cache__={};function __webpack_require__(e){var n=__webpack_module_cache__[e];if(void 0!==n)return n.exports;var r=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](r,r.exports,__webpack_require__),r.exports}__webpack_require__.d=(e,n)=>{for(var r in n)__webpack_require__.o(n,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},__webpack_require__.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__=__webpack_require__("./js/ckeditor5_plugins/responsiveAreaPlugin/src/index.js");return __webpack_exports__=__webpack_exports__.default,__webpack_exports__})())); \ No newline at end of file +!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.CKEditor5=n():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.responsiveAreaPlugin=n())}(self,(()=>(()=>{var __webpack_modules__={"./js/ckeditor5_plugins/responsiveAreaPlugin/src/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _responsivearea__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./responsivearea */ "./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsivearea.js");\n/**\r\n * @file The build process always expects an index.js file. Anything exported\r\n * here will be recognized by CKEditor 5 as an available plugin. Multiple\r\n * plugins can be exported in this one file.\r\n *\r\n * I.e. this file\'s purpose is to make plugin(s) discoverable.\r\n */\r\n// cSpell:ignore ResponsiveArea\r\n\r\n\r\n\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\r\n ResponsiveArea: _responsivearea__WEBPACK_IMPORTED_MODULE_0__["default"],\r\n});\r\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/index.js?')},"./js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ InsertResponsiveAreaCommand)\n/* harmony export */ });\n/* harmony import */ var ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ckeditor5/src/core */ \"ckeditor5/src/core.js\");\n/**\n * @file defines InsertResponsiveAreaCommand, which is executed when the responsiveArea\n * toolbar button is pressed.\n */\n// cSpell:ignore responsiveareaediting\n\n\n\nclass InsertResponsiveAreaCommand extends ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__.Command {\n execute(option) {\n const { model } = this.editor;\n\n const value = option.value;\n\n model.change((writer) => {\n // Insert * at the current selection position\n // in a way that will result in creating a valid model structure.\n model.insertContent(createResponsiveArea(writer));\n model.insertContent(createGrid(writer, value));\n });\n }\n\n refresh() {\n const { model } = this.editor;\n const { selection } = model.document;\n\n // Determine if the cursor (selection) is in a position where adding a\n // responsiveArea is permitted. This is based on the schema of the model(s)\n // currently containing the cursor.\n const allowedIn = model.schema.findAllowedParent(\n selection.getFirstPosition(),\n 'responsiveArea',\n 'responsiveDivWrapper',\n 'div'\n );\n\n // If the cursor is not in a location where a responsiveArea can be added, return\n // null so the addition doesn't happen.\n this.isEnabled = allowedIn !== null;\n }\n}\n\nfunction createResponsiveArea(writer) {\n // Create instances of the three elements registered with the editor in\n // responsiveareaediting.js.\n const responsiveArea = writer.createElement('responsiveArea');\n const responsiveAreaTitle = writer.createElement('responsiveAreaTitle');\n const responsiveAreaDescription = writer.createElement('responsiveAreaDescription');\n\n // Append the title and description elements to the responsiveArea, which matches\n // the parent/child relationship as defined in their schemas.\n writer.append(responsiveAreaTitle, responsiveArea);\n writer.append(responsiveAreaDescription, responsiveArea);\n\n // The responsiveAreaDescription text content will automatically be wrapped in a\n // `

`.\n writer.appendElement('paragraph', responsiveAreaDescription);\n\n // Return the element to be added to the editor.\n return responsiveArea;\n}\n\n\nfunction createGrid(writer, value) {\n const wrapper = writer.createElement('responsiveDivWrapper');\n let grid_columns = getColumnsByGrid(value);\n for (const grid_column of grid_columns) {\n const column = writer.createElement('responsiveDivColumn_' + grid_column);\n writer.append(column, wrapper);\n\n // There must be at least one paragraph for the description to be editable.\n // See https://github.com/ckeditor/ckeditor5/issues/1464.\n writer.appendElement( 'paragraph', column );\n }\n return wrapper;\n}\n\n\nfunction getColumnsByGrid(grid) {\n switch (grid) {\n case '1_100':\n return [\n '1_100'\n ];\n case '2_50_50':\n return [\n '2_50',\n '2_50'\n ];\n case '2_75_25':\n return [\n '2_75',\n '2_25'\n ];\n case '2_25_75':\n return [\n '2_25',\n '2_75'\n ];\n case '2_33_66':\n return [\n '2_33',\n '2_66'\n ];\n case '2_66_33':\n return [\n '2_66',\n '2_33'\n ];\n case '3_33_44_33':\n return [\n '3_33',\n '3_44',\n '3_33'\n ];\n case '3_25_50_25':\n return [\n '3_25',\n '3_50',\n '3_25'\n ];\n case '3_25_25_50':\n return [\n '3_25',\n '3_25',\n '3_50'\n ];\n case '3_50_25_25':\n return [\n '3_50',\n '3_25',\n '3_25'\n ];\n case '4_25_25_25_25':\n return [\n '4_25',\n '4_25',\n '4_25',\n '4_25'\n ];\n case '5_20_20_20_20_20':\n return [\n '5_20',\n '5_20',\n '5_20',\n '5_20',\n '5_20'\n ];\n }\n}\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js?")},"./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsivearea.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (/* binding */ ResponsiveArea)\n/* harmony export */ });\n/* harmony import */ var _responsiveareaediting__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./responsiveareaediting */ "./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js");\n/* harmony import */ var _responsiveareaui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./responsiveareaui */ "./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaui.js");\n/* harmony import */ var ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ckeditor5/src/core */ "ckeditor5/src/core.js");\n/**\r\n * @file This is what CKEditor refers to as a master (glue) plugin. Its role is\r\n * just to load the “editing” and “UI” components of this Plugin. Those\r\n * components could be included in this file, but\r\n *\r\n * I.e, this file\'s purpose is to integrate all the separate parts of the plugin\r\n * before it\'s made discoverable via index.js.\r\n */\r\n// cSpell:ignore responsiveareaediting responsiveareaui\r\n\r\n// The contents of ResponsiveAreaUI and ResponsiveArea editing could be included in this\r\n// file, but it is recommended to separate these concerns in different files.\r\n\r\n\r\n\r\n\r\nclass ResponsiveArea extends ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_2__.Plugin {\r\n // Note that ResponsiveAreaEditing and ResponsiveAreaUI also extend `Plugin`, but these\r\n // are not seen as individual plugins by CKEditor 5. CKEditor 5 will only\r\n // discover the plugins explicitly exported in index.js.\r\n static get requires() {\r\n return [_responsiveareaediting__WEBPACK_IMPORTED_MODULE_0__["default"], _responsiveareaui__WEBPACK_IMPORTED_MODULE_1__["default"]];\r\n }\r\n}\r\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsivearea.js?')},"./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ ResponsiveAreaEditing)\n/* harmony export */ });\n/* harmony import */ var ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ckeditor5/src/core */ \"ckeditor5/src/core.js\");\n/* harmony import */ var ckeditor5_src_widget__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ckeditor5/src/widget */ \"ckeditor5/src/widget.js\");\n/* harmony import */ var _insertresponsiveareacommand__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./insertresponsiveareacommand */ \"./js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js\");\n\n\n\n\n\n// cSpell:ignore responsivearea insertresponsiveareacommand\nclass ResponsiveAreaEditing extends ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__.Plugin {\n static get requires() {\n return [ckeditor5_src_widget__WEBPACK_IMPORTED_MODULE_1__.Widget];\n }\n\n init() {\n this._defineSchema();\n this._defineConverters();\n this.editor.commands.add(\n 'insertResponsiveArea',\n new _insertresponsiveareacommand__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this.editor),\n );\n }\n\n /*\n * This registers the structure that will be seen by CKEditor 5 as\n * \n * \n * \n * \n *\n * The logic in _defineConverters() will determine how this is converted to\n * markup.\n */\n _defineSchema() {\n // Schemas are registered via the central `editor` object.\n const schema = this.editor.model.schema;\n\n schema.register('responsiveArea', {\n isObject: true,\n allowWhere: '$block',\n });\n\n\n schema.register('responsiveDivWrapper', {\n inheritAllFrom: '$blockObject',\n });\n\n const options = this._optionsListCols();\n for (const option of options) {\n schema.register('responsiveDivColumn_' + option.grid, {\n // Cannot be split or left by the caret.\n isLimit: true,\n allowIn: 'responsiveDivWrapper',\n // Allow content which is allowed in the root (e.g. paragraphs).\n allowContentOf: '$root'\n });\n }\n }\n\n /**\n * Converters determine how CKEditor 5 models are converted into markup and\n * vice-versa.\n */\n _defineConverters() {\n // Converters are registered via the central editor object.\n const { conversion } = this.editor;\n\n conversion.for('upcast').elementToElement({\n model: 'responsiveDivWrapper',\n view: {\n name: 'div',\n classes: 'ckeditor-col-container clearfix row',\n },\n });\n\n\n conversion.for('dataDowncast').elementToElement({\n model: 'responsiveDivWrapper',\n view: {\n name: 'div',\n classes: 'ckeditor-col-container clearfix row',\n },\n });\n\n\n conversion.for('editingDowncast').elementToElement({\n model: 'responsiveDivWrapper',\n view: (modelElement, { writer: viewWriter }) => {\n const section = viewWriter.createContainerElement('div', {\n class: 'ckeditor-col-container clearfix row',\n });\n\n return (0,ckeditor5_src_widget__WEBPACK_IMPORTED_MODULE_1__.toWidget)(section, viewWriter, { label: 'responsiveDivWrapper' });\n },\n });\n\n\n const options = this._optionsListCols();\n\n for (const option of options) {\n conversion.for('dataDowncast').elementToElement({\n model: 'responsiveDivColumn_' + option.grid,\n view: {\n name: 'div',\n classes: option.class\n },\n });\n\n conversion.for('upcast').elementToElement({\n model: 'responsiveDivColumn_' + option.grid,\n view: {\n name: 'div',\n classes: option.class\n },\n });\n\n conversion.for('editingDowncast').elementToElement({\n model: 'responsiveDivColumn_' + option.grid,\n view: (modelElement, { writer: viewWriter }) => {\n const section = viewWriter.createEditableElement('div', {\n class: option.class\n });\n\n return (0,ckeditor5_src_widget__WEBPACK_IMPORTED_MODULE_1__.toWidgetEditable)(section, viewWriter, { label: 'responsiveDivColumn' });\n },\n });\n\n\n }\n\n\n\n }\n\n\n _optionsListCols() {\n return [\n {\n grid: '1_100',\n class: 'grid-12 col-md-12 col-sm-12 col-xs-12 col-lg-12'\n },\n {\n grid: '2_50',\n class: 'grid-6 sixcol col-md-6 col-sm-6 col-xs-6 col-lg-6'\n },\n {\n grid: '2_75',\n class: 'grid-8 eightcol col-md-9 col-sm-9 col-xs-9 col-lg-9'\n },\n {\n grid: '2_25',\n class: 'grid-4 fourcol col-md-3 col-sm-3 col-xs-3 col-lg-3'\n },\n {\n grid: '2_33',\n class: 'grid-5 fivecol col-md-4 col-sm-4 col-xs-4 col-lg-4'\n },\n {\n grid: '2_66',\n class: 'grid-7 sevencol col-md-8 col-sm-8 col-xs-8 col-lg-8'\n },\n {\n grid: '3_33',\n class: 'grid-4 fourcol col-md-4 col-sm-4 col-xs-4 col-lg-4'\n },\n {\n grid: '3_44',\n class: 'grid-4 fourcol col-md-4 col-sm-4 col-xs-4 col-lg-4'\n },\n {\n grid: '3_25',\n class: 'grid-3 threecol col-md-3 col-sm-3 col-xs-3 col-lg-3'\n },\n {\n grid: '3_50',\n class: 'grid-6 sixcol col-md-6 col-sm-6 col-xs-6 col-lg-6'\n },\n {\n grid: '4_25',\n class: 'grid-3 threecol col-md-3 col-sm-3 col-xs-3 col-lg-3'\n },\n {\n grid: '5_20',\n class: 'grid-2 twocol col-sm-2 col-xs-2 col-lg-2 layout-5-col'\n }\n ];\n }\n\n}\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js?")},"./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaui.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ ResponsiveAreaUI)\n/* harmony export */ });\n/* harmony import */ var ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ckeditor5/src/core */ \"ckeditor5/src/core.js\");\n/* harmony import */ var ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ckeditor5/src/ui */ \"ckeditor5/src/ui.js\");\n/* harmony import */ var _icons_responsivearea_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../icons/responsivearea.svg */ \"./icons/responsivearea.svg\");\n/* harmony import */ var ckeditor5_src_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ckeditor5/src/utils */ \"ckeditor5/src/utils.js\");\n/**\r\n * @file registers the responsiveArea toolbar button and binds functionality to it.\r\n */\r\n\r\n\r\n\r\n\r\n\r\n\r\nclass ResponsiveAreaUI extends ckeditor5_src_core__WEBPACK_IMPORTED_MODULE_0__.Plugin {\r\n init() {\r\n const editor = this.editor;\r\n const t = editor.t;\r\n const options = this._getLocalizedOptions();\r\n this._balloon = this.editor.plugins.get(ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__.ContextualBalloon);\r\n\r\n\r\n // This will register the responsiveArea toolbar button.\r\n editor.ui.componentFactory.add('responsiveArea', (locale) => {\r\n const command = editor.commands.get('insertResponsiveArea');\r\n const dropdownView = (0,ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__.createDropdown)(locale);\r\n (0,ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__.addListToDropdown)( dropdownView, _prepareListOptions( options, command ) );\r\n dropdownView.buttonView.set( {\r\n label: t( 'CKEditor Responsive' ),\r\n icon: _icons_responsivearea_svg__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n tooltip: true\r\n } );\r\n dropdownView.bind( 'isEnabled' ).to( command );\r\n this.listenTo(dropdownView, 'execute', (item) => {\r\n editor.execute('insertResponsiveArea', { value: item.source.value })\r\n });\r\n\r\n return dropdownView;\r\n });\r\n }\r\n\r\n _getLocalizedOptions() {\r\n const editor = this.editor;\r\n const t = editor.t;\r\n const options = [\r\n {\r\n value: '1_100',\r\n title: t('1 area - 100%')\r\n },\r\n {\r\n value: '2_50_50',\r\n title: t('2 areas - 50% each')\r\n },\r\n {\r\n value: '2_75_25',\r\n title: t('2 areas - 75% 25%')\r\n },\r\n {\r\n value: '2_25_75',\r\n title: t('2 areas - 25% 75%')\r\n },\r\n {\r\n value: '2_33_66',\r\n title: t('2 areas - 33% 66%')\r\n },\r\n {\r\n value: '2_66_33',\r\n title: t('2 areas - 66% 33%')\r\n },\r\n {\r\n value: '3_33_44_33',\r\n title: t('3 areas - 33% each')\r\n },\r\n {\r\n value: '3_25_50_25',\r\n title: t('3 areas - 25% 50% 25%')\r\n },\r\n {\r\n value: '3_25_25_50',\r\n title: t('3 areas - 25% 25% 50%')\r\n },\r\n {\r\n value: '4_25_25_25_25',\r\n title: t('4 areas - 25% each')\r\n },\r\n {\r\n value: '5_20_20_20_20_20',\r\n title: t('5 areas - 20% each')\r\n },\r\n\r\n ];\r\n\r\n return options.map( option => {\r\n // The only title to localize is \"Default\" others are font names.\r\n if ( option.title === 'Default' ) {\r\n option.title = t( 'Default' );\r\n }\r\n\r\n return option;\r\n } );\r\n }\r\n\r\n _showUI() {\r\n this._balloon.add( {\r\n view: this.formView,\r\n position: this._getBalloonPositionData()\r\n } );\r\n }\r\n\r\n _hideUI() {\r\n this._balloon.remove( this.formView );\r\n this.editor.editing.view.focus();\r\n }\r\n\r\n _getBalloonPositionData() {\r\n const view = this.editor.editing.view;\r\n const viewDocument = view.document;\r\n let target = null;\r\n target = () => view.domConverter.viewRangeToDom( viewDocument.selection.getFirstRange() );\r\n return {\r\n target\r\n };\r\n }\r\n}\r\n\r\n\r\nfunction _prepareListOptions(options, command) {\r\n const itemDefinitions = new ckeditor5_src_utils__WEBPACK_IMPORTED_MODULE_3__.Collection();\r\n\r\n // Create dropdown items.\r\n for (const option of options) {\r\n const def = {\r\n type: 'button',\r\n model: new ckeditor5_src_ui__WEBPACK_IMPORTED_MODULE_1__.Model( {\r\n commandName: 'responsiveArea',\r\n commandParam: option.model,\r\n label: option.title,\r\n withText: true,\r\n value: option.value,\r\n } )\r\n };\r\n\r\n itemDefinitions.add(def);\r\n }\r\n return itemDefinitions;\r\n}\r\n\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaui.js?")},"./icons/responsivearea.svg":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/./icons/responsivearea.svg?')},"ckeditor5/src/core.js":(module,__unused_webpack_exports,__webpack_require__)=>{eval('module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ "dll-reference CKEditor5.dll"))("./src/core.js");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/delegated_./core.js_from_dll-reference_CKEditor5.dll?')},"ckeditor5/src/ui.js":(module,__unused_webpack_exports,__webpack_require__)=>{eval('module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ "dll-reference CKEditor5.dll"))("./src/ui.js");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/delegated_./ui.js_from_dll-reference_CKEditor5.dll?')},"ckeditor5/src/utils.js":(module,__unused_webpack_exports,__webpack_require__)=>{eval('module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ "dll-reference CKEditor5.dll"))("./src/utils.js");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/delegated_./utils.js_from_dll-reference_CKEditor5.dll?')},"ckeditor5/src/widget.js":(module,__unused_webpack_exports,__webpack_require__)=>{eval('module.exports = (__webpack_require__(/*! dll-reference CKEditor5.dll */ "dll-reference CKEditor5.dll"))("./src/widget.js");\n\n//# sourceURL=webpack://CKEditor5.responsiveAreaPlugin/delegated_./widget.js_from_dll-reference_CKEditor5.dll?')},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},__webpack_module_cache__={};function __webpack_require__(e){var n=__webpack_module_cache__[e];if(void 0!==n)return n.exports;var r=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](r,r.exports,__webpack_require__),r.exports}__webpack_require__.d=(e,n)=>{for(var r in n)__webpack_require__.o(n,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},__webpack_require__.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__=__webpack_require__("./js/ckeditor5_plugins/responsiveAreaPlugin/src/index.js");return __webpack_exports__=__webpack_exports__.default,__webpack_exports__})())); \ No newline at end of file diff --git a/js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js b/js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js index 40f9e8d..91a479e 100644 --- a/js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js +++ b/js/ckeditor5_plugins/responsiveAreaPlugin/src/insertresponsiveareacommand.js @@ -67,6 +67,10 @@ function createGrid(writer, value) { for (const grid_column of grid_columns) { const column = writer.createElement('responsiveDivColumn_' + grid_column); writer.append(column, wrapper); + + // There must be at least one paragraph for the description to be editable. + // See https://github.com/ckeditor/ckeditor5/issues/1464. + writer.appendElement( 'paragraph', column ); } return wrapper; } @@ -103,11 +107,11 @@ function getColumnsByGrid(grid) { '2_66', '2_33' ]; - case '3_33_34_33': + case '3_33_44_33': return [ - '2_33', - '2_34', - '2_33' + '3_33', + '3_44', + '3_33' ]; case '3_25_50_25': return [ diff --git a/js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js b/js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js index a008895..fdc763d 100644 --- a/js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js +++ b/js/ckeditor5_plugins/responsiveAreaPlugin/src/responsiveareaediting.js @@ -39,17 +39,17 @@ export default class ResponsiveAreaEditing extends Plugin { schema.register('responsiveDivWrapper', { - isObject: true, - allowIn: 'responsiveArea', - allowWhere: '$block', + inheritAllFrom: '$blockObject', }); const options = this._optionsListCols(); for (const option of options) { schema.register('responsiveDivColumn_' + option.grid, { - isObject: true, - allowIn: 'responsiveArea', - allowWhere: '$block', + // Cannot be split or left by the caret. + isLimit: true, + allowIn: 'responsiveDivWrapper', + // Allow content which is allowed in the root (e.g. paragraphs). + allowContentOf: '$root' }); } } @@ -114,11 +114,11 @@ export default class ResponsiveAreaEditing extends Plugin { conversion.for('editingDowncast').elementToElement({ model: 'responsiveDivColumn_' + option.grid, view: (modelElement, { writer: viewWriter }) => { - const section = viewWriter.createContainerElement('div', { + const section = viewWriter.createEditableElement('div', { class: option.class }); - return toWidget(section, viewWriter, { label: 'responsiveDivColumn' }); + return toWidgetEditable(section, viewWriter, { label: 'responsiveDivColumn' }); }, });