Merge pull request #621 from phiggins42/nested-toolbar

allow nested contenteditables
yabwe · May 20, 2015 · c04e467 · c04e467
2 parents e6fe548 + 71db944
commit c04e467
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 10 deletions.
diff --git a/demo/nested-editable.html b/demo/nested-editable.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>medium editor | demo</title>
+    <link rel="stylesheet" href="css/demo.css">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
+    <link rel="stylesheet" href="../dist/css/medium-editor.css">
+    <link rel="stylesheet" href="../dist/css/themes/default.css" id="medium-editor-theme">
+</head>
+<body>
+    <a href="https://github.com/daviferreira/medium-editor" class="github-link"><img style="z-index: 100;position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <div class="top-bar">
+        Theme:
+        <select id="sel-themes">
+            <option value="themes/default" selected>default</option>
+            <option value="themes/roman">roman</option>
+            <option value="themes/mani">mani</option>
+            <option value="themes/flat">flat</option>
+            <option value="themes/bootstrap">bootstrap</option>
+        </select>
+    </div>
+    <div id="container">
+        <h1>Medium Editor</h1>
+        <div class="editable">
+            <p>My father’s family name being <a href="https://en.wikipedia.org/wiki/Pip_(Great_Expectations)">Pirrip</a>, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.</p>
+
+            <div>
+            <div contenteditable="false">
+                <div>
+                    <h4 selectable="false">this portion is not editable</h4>
+                    <div style="border:1px solid #ededed; padding:40px" contenteditable="true">
+                        <p>this is editable</p>
+                        <p>that seems really neat</p>
+                    </div>
+                </div>
+            </div>
+            </div>
+
+            <p>I give Pirrip as my father’s family name, on the authority of his tombstone and my sister,—Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably </p><p>derived from their tombstones. The shape of the letters on my father’s, gave me an odd idea that he was a square, stout, dark man, with curly black hair. From the character and turn of the inscription, “Also Georgiana Wife of the Above,” I drew a childish conclusion that my mother was freckled and sickly. To five little stone lozenges, each about a foot and a half long, which were arranged in a neat row beside their grave, and were sacred to the memory of five little brothers of mine,—who gave up trying to get a living, exceedingly early in that universal struggle,—I am indebted for a belief I religiously entertained that they had all been born on their backs with their hands in their trousers-pockets, and had never taken them out in this state of existence.</p>
+        </div>
+    </div>
+    <p style="text-align: center;"><small><a style="color: #333;" target="_blank" href="http://www.goodreads.com/reader/475-great-expectations">Source</a></small></p>
+    <script src="../dist/js/medium-editor.js"></script>
+    <script>
+        var editor = new MediumEditor('.editable', {
+            buttonLabels: 'fontawesome'
+        }),
+        cssLink = document.getElementById('medium-editor-theme');
+
+        document.getElementById('sel-themes').addEventListener('change', function () {
+            cssLink.href = '../dist/css/' + this.value + '.css';
+        });
+    </script>
+</body>
+</html>
diff --git a/dist/js/medium-editor.js b/dist/js/medium-editor.js
@@ -1603,9 +1603,19 @@ var Selection;
         },
 
         selectionInContentEditableFalse: function (contentWindow) {
-            return this.findMatchingSelectionParent(function (el) {
-                return (el && el.nodeName !== '#text' && el.getAttribute('contenteditable') === 'false');
-            }, contentWindow);
+            // determine if the current selection is exclusively inside
+            // a contenteditable="false", though treat the case of an
+            // explicit contenteditable="true" inside a "false" as false.
+            var sawtrue,
+                sawfalse = this.findMatchingSelectionParent(function (el) {
+                    var ce = el && el.getAttribute('contenteditable');
+                    if (ce === 'true') {
+                        sawtrue = true;
+                    }
+                    return el.nodeName !== '#text' && ce === 'false';
+                }, contentWindow);
+
+            return !sawtrue && sawfalse;
         },
 
         // http://stackoverflow.com/questions/4176923/html-of-selected-text

diff --git a/dist/js/medium-editor.min.js b/dist/js/medium-editor.min.js
diff --git a/src/js/selection.js b/src/js/selection.js
@@ -27,9 +27,19 @@ var Selection;
         },
 
         selectionInContentEditableFalse: function (contentWindow) {
-            return this.findMatchingSelectionParent(function (el) {
-                return (el && el.nodeName !== '#text' && el.getAttribute('contenteditable') === 'false');
-            }, contentWindow);
+            // determine if the current selection is exclusively inside
+            // a contenteditable="false", though treat the case of an
+            // explicit contenteditable="true" inside a "false" as false.
+            var sawtrue,
+                sawfalse = this.findMatchingSelectionParent(function (el) {
+                    var ce = el && el.getAttribute('contenteditable');
+                    if (ce === 'true') {
+                        sawtrue = true;
+                    }
+                    return el.nodeName !== '#text' && ce === 'false';
+                }, contentWindow);
+
+            return !sawtrue && sawfalse;
         },
 
         // http://stackoverflow.com/questions/4176923/html-of-selected-text