add toggle off for <pre> code sections

diff --git a/chloro/phyll/static/css/style.scss b/chloro/phyll/static/css/style.scss
index 1a306785bd5f5bfdc983ad1596d3657da1654b5f..24a69f0b5302f6c9a4586d5bb72aa6f1ec6d37eb 100644 (file)
--- a/chloro/phyll/static/css/style.scss
+++ b/chloro/phyll/static/css/style.scss
@@ -216,6 +216,10 @@ div[contenteditable=true]:focus-within {
                        color: blue;
                        text-decoration: underline;
                }
+               &.on {
+                       background: #444;
+                       color: white;
+               }
        }
        &.short button {
                width: 2em;

diff --git a/chloro/phyll/static/js/chloro.js b/chloro/phyll/static/js/chloro.js
index 4030c7c600ab6a1c87bb2103621972a2c01b3133..c47bb0a16ec5e159a34a9d48c271799a7af65b09 100644 (file)
--- a/chloro/phyll/static/js/chloro.js
+++ b/chloro/phyll/static/js/chloro.js
@@ -20,7 +20,10 @@ $(function() {
   });
   $('div[contenteditable]').on('keyup', function(event) {
     var sel = document.getSelection();
-    if (sel.anchorNode instanceof Element && sel.anchorOffset == 0 && sel.isCollapsed) {
+    if ((sel.anchorNode instanceof Element && (
+            (sel.anchorOffset == 0 && sel.isCollapsed) || // first line
+            (sel.anchorNode.tagName === 'PRE'))) ||
+        (sel.anchorNode.parentNode.tagName === 'PRE')) {
       // start of line
       show_block_style_popup();
     } else {
@@ -47,6 +50,10 @@ $(function() {
     if (action == 'code') {
       action = 'pre';
       class_name = 'screen';
+      if ($(this).hasClass('on')) {  // toggle off
+        action = 'p';
+        class_name = null;
+      }
     }
     document.execCommand('formatBlock', false, action);
     var sel = window.getSelection();
@@ -57,7 +64,6 @@ $(function() {
     range.setStart(sel.anchorNode, 0);
     sel.removeAllRanges();
     sel.addRange(range);
-    hide_block_style_popup();
   }
   function show_block_style_popup() {
     if (block_style_popup === null) {
@@ -71,7 +77,16 @@ $(function() {
     }
     block_style_popup.css('position', 'absolute');
     var sel = window.getSelection();
-    var pos = $(sel.anchorNode).offset();
+    var anchor = sel.anchorNode;
+    if (anchor instanceof Text) {
+      anchor = anchor.parentNode;
+    }
+    if (anchor.tagName === "PRE") {
+      block_style_popup.find('[data-action=code]').addClass('on');
+    } else {
+      block_style_popup.find('[data-action=code]').removeClass('on');
+    }
+    var pos = $(anchor).offset();
     block_style_popup.css('top', pos.top - 33);
     block_style_popup.css('left', pos.left);
     block_style_popup.show();