MDL-41912 editor_atto: Padding for editable area

lib/editor/atto/styles.css

@@ -1,24 +1,29 @@
-div.editor_atto {
+.editor_atto_content_wrap {
     background-color: white;
-    border: 1px solid #BBB;
-    width: 100%;
+}
+.editor_atto_content {
+    padding: 4px;
 }
 
+.editor_atto_content_wrap,
 .editor_atto + textarea {
     width: 100%;
     padding: 0;
-    resize: vertical;
-    border-radius: 0;
     border: 1px solid #BBB;
+    border-top: none;
+}
+
+.editor_atto + textarea {
+    border-radius: 0;
+    resize: vertical;
+    margin-top: -1px;
 }
 
 div.editor_atto_toolbar {
     display: block;
     background: #F2F2F2;
     min-height: 42px;
-    border-top: 1px solid #BBB;
-    border-left: 1px solid #BBB;
-    border-right: 1px solid #BBB;
+    border: 1px solid #BBB;
     width: 100%;
     padding: 0 0 9px 0;
 }
@@ -53,7 +58,7 @@ div.editor_atto_toolbar div.atto_group {
     background: #FFF;
 }
 
-.editor_atto img {
+.editor_atto_content img {
     resize: both; overflow: auto;
 }
 

lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js

@@ -15,15 +15,34 @@ YUI.add('moodle-editor_atto-editor', function (Y, NAME) {
 // You should have received a copy of the GNU General Public License
 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 
+/**
+ * Atto editor.
+ *
+ * @package    editor_atto
+ * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+/**
+ * Classes constants.
+ */
+CSS = {
+    CONTENT: 'editor_atto_content',
+    CONTENTWRAPPER: 'editor_atto_content_wrap',
+    TOOLBAR: 'editor_atto_toolbar',
+    WRAPPER: 'editor_atto'
+};
+
 /**
  * Atto editor main class.
  * Common functions required by editor plugins.
  *
- * @package    editor-atto
+ * @package    editor_atto
  * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 M.editor_atto = M.editor_atto || {
+
     /**
      * List of attached button handlers to prevent duplicates.
      */
@@ -309,12 +328,22 @@ M.editor_atto = M.editor_atto || {
      */
     init : function(params) {
         var textarea = Y.one('#' +params.elementid);
+        var wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
         var atto = Y.Node.create('<div id="' + params.elementid + 'editable" ' +
                                             'contenteditable="true" ' +
                                             'spellcheck="true" ' +
-                                            'class="editor_atto"/>');
+                                            'class="' + CSS.CONTENT + '" />');
+
         var cssfont = '';
-        var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar" role="toolbar"/>');
+        var toolbar = Y.Node.create('<div class="' + CSS.TOOLBAR + '" id="' + params.elementid + '_toolbar" role="toolbar"/>');
+
+        // Editable content wrapper.
+        var content = Y.Node.create('<div class="' + CSS.CONTENTWRAPPER + '" />');
+        content.appendChild(atto);
+
+        // Add everything to the wrapper.
+        wrapper.appendChild(toolbar);
+        wrapper.appendChild(content);
 
         // Bleh - why are we sent a url and not the css to apply directly?
         var css = Y.io(params.content_css, { sync: true });
@@ -328,10 +357,8 @@ M.editor_atto = M.editor_atto || {
         // Copy text to editable div.
         atto.append(textarea.get('value'));
 
-        // Add the toolbar to the page.
-        textarea.get('parentNode').insert(toolbar, textarea);
-        // Add the editable div to the page.
-        textarea.get('parentNode').insert(atto, textarea);
+        // Add the toolbar and editable zone to the page.
+        textarea.get('parentNode').insert(wrapper, textarea);
         atto.setStyle('color', textarea.getStyle('color'));
         atto.setStyle('lineHeight', textarea.getStyle('lineHeight'));
         atto.setStyle('fontSize', textarea.getStyle('fontSize'));

lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js

@@ -15,15 +15,34 @@ YUI.add('moodle-editor_atto-editor', function (Y, NAME) {
 // You should have received a copy of the GNU General Public License
 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 
+/**
+ * Atto editor.
+ *
+ * @package    editor_atto
+ * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+/**
+ * Classes constants.
+ */
+CSS = {
+    CONTENT: 'editor_atto_content',
+    CONTENTWRAPPER: 'editor_atto_content_wrap',
+    TOOLBAR: 'editor_atto_toolbar',
+    WRAPPER: 'editor_atto'
+};
+
 /**
  * Atto editor main class.
  * Common functions required by editor plugins.
  *
- * @package    editor-atto
+ * @package    editor_atto
  * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 M.editor_atto = M.editor_atto || {
+
     /**
      * List of attached button handlers to prevent duplicates.
      */
@@ -309,12 +328,22 @@ M.editor_atto = M.editor_atto || {
      */
     init : function(params) {
         var textarea = Y.one('#' +params.elementid);
+        var wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
         var atto = Y.Node.create('<div id="' + params.elementid + 'editable" ' +
                                             'contenteditable="true" ' +
                                             'spellcheck="true" ' +
-                                            'class="editor_atto"/>');
+                                            'class="' + CSS.CONTENT + '" />');
+
         var cssfont = '';
-        var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar" role="toolbar"/>');
+        var toolbar = Y.Node.create('<div class="' + CSS.TOOLBAR + '" id="' + params.elementid + '_toolbar" role="toolbar"/>');
+
+        // Editable content wrapper.
+        var content = Y.Node.create('<div class="' + CSS.CONTENTWRAPPER + '" />');
+        content.appendChild(atto);
+
+        // Add everything to the wrapper.
+        wrapper.appendChild(toolbar);
+        wrapper.appendChild(content);
 
         // Bleh - why are we sent a url and not the css to apply directly?
         var css = Y.io(params.content_css, { sync: true });
@@ -328,10 +357,8 @@ M.editor_atto = M.editor_atto || {
         // Copy text to editable div.
         atto.append(textarea.get('value'));
 
-        // Add the toolbar to the page.
-        textarea.get('parentNode').insert(toolbar, textarea);
-        // Add the editable div to the page.
-        textarea.get('parentNode').insert(atto, textarea);
+        // Add the toolbar and editable zone to the page.
+        textarea.get('parentNode').insert(wrapper, textarea);
         atto.setStyle('color', textarea.getStyle('color'));
         atto.setStyle('lineHeight', textarea.getStyle('lineHeight'));
         atto.setStyle('fontSize', textarea.getStyle('fontSize'));

lib/editor/atto/yui/src/editor/js/editor.js

@@ -13,15 +13,34 @@
 // You should have received a copy of the GNU General Public License
 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 
+/**
+ * Atto editor.
+ *
+ * @package    editor_atto
+ * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+/**
+ * Classes constants.
+ */
+CSS = {
+    CONTENT: 'editor_atto_content',
+    CONTENTWRAPPER: 'editor_atto_content_wrap',
+    TOOLBAR: 'editor_atto_toolbar',
+    WRAPPER: 'editor_atto'
+};
+
 /**
  * Atto editor main class.
  * Common functions required by editor plugins.
  *
- * @package    editor-atto
+ * @package    editor_atto
  * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 M.editor_atto = M.editor_atto || {
+
     /**
      * List of attached button handlers to prevent duplicates.
      */
@@ -307,12 +326,22 @@ M.editor_atto = M.editor_atto || {
      */
     init : function(params) {
         var textarea = Y.one('#' +params.elementid);
+        var wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
         var atto = Y.Node.create('<div id="' + params.elementid + 'editable" ' +
                                             'contenteditable="true" ' +
                                             'spellcheck="true" ' +
-                                            'class="editor_atto"/>');
+                                            'class="' + CSS.CONTENT + '" />');
+
         var cssfont = '';
-        var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar" role="toolbar"/>');
+        var toolbar = Y.Node.create('<div class="' + CSS.TOOLBAR + '" id="' + params.elementid + '_toolbar" role="toolbar"/>');
+
+        // Editable content wrapper.
+        var content = Y.Node.create('<div class="' + CSS.CONTENTWRAPPER + '" />');
+        content.appendChild(atto);
+
+        // Add everything to the wrapper.
+        wrapper.appendChild(toolbar);
+        wrapper.appendChild(content);
 
         // Bleh - why are we sent a url and not the css to apply directly?
         var css = Y.io(params.content_css, { sync: true });
@@ -326,10 +355,8 @@ M.editor_atto = M.editor_atto || {
         // Copy text to editable div.
         atto.append(textarea.get('value'));
 
-        // Add the toolbar to the page.
-        textarea.get('parentNode').insert(toolbar, textarea);
-        // Add the editable div to the page.
-        textarea.get('parentNode').insert(atto, textarea);
+        // Add the toolbar and editable zone to the page.
+        textarea.get('parentNode').insert(wrapper, textarea);
         atto.setStyle('color', textarea.getStyle('color'));
         atto.setStyle('lineHeight', textarea.getStyle('lineHeight'));
         atto.setStyle('fontSize', textarea.getStyle('fontSize'));