feat(texteditor tinymce sections plugin): add a padding when a backgr…

…ound color is added
CodeCorico · Oct 28, 2016 · 42f1a5f · 42f1a5f
1 parent 4c4c7da
commit 42f1a5f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/features/texteditor/views/less/texteditor-styles.less b/features/texteditor/views/less/texteditor-styles.less
@@ -130,7 +130,7 @@
  }
  }
 
- th, td, .columns {
+ th, td {
  h1, h2, h3, h4, h5, h6, p {
  &:first-child {
  margin-top: 0;
@@ -353,10 +353,24 @@
 
  .row {
  margin-top: 0.5rem;
+
+ &.row-bg {
+ padding: 1rem;
+ }
  }
 
  .columns {
  border: 1px solid transparent;
  min-height: 2.5rem;
+
+ h1, h2, h3, h4, h5, h6, p {
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
  }
 }
diff --git a/features/texteditor/views/tinymce-plugins/sections/plugin.js b/features/texteditor/views/tinymce-plugins/sections/plugin.js
@@ -15,7 +15,7 @@
  function _insertSection(layout) {
  // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
 
- var html = ['<div d="__mcenew" class="row mceNonEditable">'];
+ var html = ['<div id="__mcenew" class="row mceNonEditable">'];
 
  layout.split('-').forEach(function(number) {
  html.push([

diff --git a/features/texteditor/views/tinymce-plugins/textcolor/plugin.js b/features/texteditor/views/tinymce-plugins/textcolor/plugin.js
@@ -187,6 +187,11 @@ tinymce.PluginManager.add('textcolor', function(editor) {
 
  if (row) {
  editor.dom.setAttrib(row, 'style', 'background-color: ' + value + ';');
+ var classes = (editor.dom.getAttrib(row, 'class') || '').split(' ');
+ if (classes.indexOf('row-bg') < 0) {
+ classes.push('row-bg');
+ editor.dom.setAttrib(row, 'class', classes.join(' '));
+ }
  }
  else {
  editor.formatter.apply(format, {value: value});
@@ -204,6 +209,11 @@ tinymce.PluginManager.add('textcolor', function(editor) {
 
  if (row) {
  editor.dom.setAttrib(row, 'style', '');
+ var classes = (editor.dom.getAttrib(row, 'class') || '').split(' ');
+ if (classes.indexOf('row-bg') > -1) {
+ classes.splice(classes.indexOf('row-bg'), 1);
+ editor.dom.setAttrib(row, 'class', classes.join(' '));
+ }
  }
  else {
  editor.formatter.remove(format, {value: null}, null, true);