Add support for :scope, :read-only, and :read-write

Author: wooorm

lib/any.js

@@ -46,6 +46,7 @@ function rule(query, tree, state) {
     schema: state.space === 'svg' ? svg : html,
     language: undefined,
     direction: 'ltr',
+    editableOrEditingHost: false,
     iterator: match,
     one: state.one,
     shallow: state.shallow

lib/enter-state.js

@@ -19,9 +19,10 @@ module.exports = config
 
 function config(state, node) {
   var schema = state.schema
+  var space = schema.space
   var language = state.language
   var currentDirection = state.direction
-  var space = schema.space
+  var editableOrEditingHost = state.editableOrEditingHost
   var props = node.properties
   var dirInferred
   var type
@@ -39,13 +40,25 @@ function config(state, node) {
       found = true
     }
 
+    // Turn off editing mode in non-HTML spaces.
+    if (space !== 'html' && state.editableOrEditingHost) {
+      state.editableOrEditingHost = false
+      found = true
+    }
+
     if (space === 'html') {
+      if (props.contentEditable === 'true') {
+        state.editableOrEditingHost = true
+        found = true
+      }
+
       if (is(node, 'svg')) {
         state.schema = svg
         space = 'svg'
         found = true
       }
 
+      // See: https://html.spec.whatwg.org/#the-directionality
       // Explicit `[dir=rtl]`
       if (dir === rtl) {
         dirInferred = dir
@@ -85,6 +98,7 @@ function config(state, node) {
     state.schema = schema
     state.language = language
     state.direction = currentDirection
+    state.editableOrEditingHost = editableOrEditingHost
   }
 
   function inferDirectionality(child) {

lib/pseudo.js

@@ -2,6 +2,11 @@
 
 var commaSeparated = require('comma-separated-tokens').parse
 var filter = require('bcp-47-match').extendedFilter
+var zwitch = require('zwitch')
+var not = require('not')
+var is = require('hast-util-is-element')
+var has = require('hast-util-has-property')
+var whitespace = require('hast-util-whitespace')
 
 module.exports = match
 
@@ -20,11 +25,6 @@ match.needsIndex = [
   'only-of-type'
 ]
 
-var zwitch = require('zwitch')
-var not = require('not')
-var is = require('hast-util-is-element')
-var has = require('hast-util-has-property')
-var whitespace = require('hast-util-whitespace')
 var anything = require('./any')
 
 var handle = zwitch('name')
@@ -68,8 +68,11 @@ handlers['nth-last-of-type'] = nthLastOfType
 handlers['only-child'] = onlyChild
 handlers['only-of-type'] = onlyOfType
 handlers.optional = not(required)
+handlers['read-only'] = not(readWrite)
+handlers['read-write'] = readWrite
 handlers.required = required
 handlers.root = root
+handlers.scope = scope
 
 function match(query, node, index, parent, state) {
   var pseudos = query.pseudos
@@ -122,15 +125,28 @@ function required(query, node) {
   return is(node, requirable) && has(node, 'required')
 }
 
+function readWrite(query, node, index, parent, state) {
+  var inputOrArea = is(node, ['input', 'textarea'])
+
+  return (
+    (inputOrArea && !has(node, 'readOnly') && !has(node, 'disabled')) ||
+    (!inputOrArea && state.editableOrEditingHost)
+  )
+}
+
 function root(query, node, index, parent, state) {
   var space = state.schema.space
   return (
+    (!parent || parent.type === 'root') &&
     space in roots &&
-    node.tagName === roots[space] &&
-    (!parent || parent.type === 'root')
+    is(node, roots[space])
   )
 }
 
+function scope(query, node, index, parent) {
+  return (!parent || parent.type === 'root') && is(node)
+}
+
 function empty(query, node) {
   return !someChildren(node, check)
 

readme.md

@@ -166,19 +166,22 @@ Yields:
 *   [x] `[attr$=value]` (attribute ends with)
 *   [x] `[attr*=value]` (attribute contains)
 *   [x] `:any()` (pseudo-class, use `:matches` instead)
+*   [x] `:dir()` (pseudo-class)
+*   [x] `:lang()` (pseudo-class)
 *   [x] `:matches()` (pseudo-class)
 *   [x] `:not()` (pseudo-class)
 *   [x] `:any-link` (pseudo-class)
-*   [x] `:empty` (pseudo-class)
 *   [x] `:blank` (pseudo-class)
 *   [x] `:checked` (pseudo-class)
 *   [x] `:disabled` (pseudo-class)
+*   [x] `:empty` (pseudo-class)
 *   [x] `:enabled` (pseudo-class)
 *   [x] `:optional` (pseudo-class)
+*   [x] `:read-only` (pseudo-class)
+*   [x] `:read-write` (pseudo-class)
 *   [x] `:required` (pseudo-class)
 *   [x] `:root` (pseudo-class)
-*   [x] `:dir()` (pseudo-class)
-*   [x] `:lang()` (pseudo-class)
+*   [x] `:scope` (pseudo-class):
 *   [x] `article p` (combinator: descendant selector)
 *   [x] `article > p` (combinator: child selector)
 *   [x] `h1 + p` (combinator: adjacent sibling selector)
@@ -187,12 +190,12 @@ Yields:
 *   [x] \* `:first-of-type` (pseudo-class)
 *   [x] \* `:last-child` (pseudo-class)
 *   [x] \* `:last-of-type` (pseudo-class)
+*   [x] \* `:only-child` (pseudo-class)
+*   [x] \* `:only-of-type` (pseudo-class)
 *   [x] \* `:nth-child()` (pseudo-class)
 *   [x] \* `:nth-last-child()` (pseudo-class)
 *   [x] \* `:nth-last-of-type()` (pseudo-class)
 *   [x] \* `:nth-of-type()` (pseudo-class)
-*   [x] \* `:only-child` (pseudo-class)
-*   [x] \* `:only-of-type` (pseudo-class)
 
 ## Unsupported
 
@@ -220,9 +223,6 @@ Yields:
 *   [ ] † `:paused` (pseudo-class)
 *   [ ] † `:placeholder-shown` (pseudo-class)
 *   [ ] † `:playing` (pseudo-class)
-*   [ ] § `:read-only` (pseudo-class)
-*   [ ] § `:read-write` (pseudo-class)
-*   [ ] § `:scope` (pseudo-class)
 *   [ ] † `:user-error` (pseudo-class)
 *   [ ] † `:user-invalid` (pseudo-class)
 *   [ ] § `:valid` (pseudo-class)

test/matches.js

@@ -1130,6 +1130,67 @@ test('select.matches()', function(t) {
       sst.end()
     })
 
+    st.test(':scope', function(sst) {
+      sst.ok(matches(':scope', h('html')), 'always true for elements')
+      sst.ok(matches(':scope', h('p')), 'always true for elements')
+      sst.notOk(matches(':scope', u('text'), '!'), 'always true for elements')
+      sst.end()
+    })
+
+    st.test(':read-write', function(sst) {
+      sst.ok(matches(':read-write', h('input')), 'true on input')
+      sst.ok(matches(':read-write', h('input')), 'true on textarea')
+      sst.notOk(
+        matches(':read-write', h('input', {readOnly: true})),
+        'false on input w/ readonly'
+      )
+      sst.notOk(
+        matches(':read-write', h('textarea', {readOnly: true})),
+        'false on textarea w/ readonly'
+      )
+      sst.notOk(
+        matches(':read-write', h('input', {disabled: true})),
+        'false on input w/ disabled'
+      )
+      sst.notOk(
+        matches(':read-write', h('textarea', {disabled: true})),
+        'false on textarea w/ disabled'
+      )
+      sst.ok(
+        matches(':read-write', h('div', {contentEditable: 'true'})),
+        'true on element w/ contenteditable'
+      )
+
+      sst.end()
+    })
+
+    st.test(':read-only', function(sst) {
+      sst.notOk(matches(':read-only', h('input')), 'false on input')
+      sst.notOk(matches(':read-only', h('input')), 'false on textarea')
+      sst.ok(
+        matches(':read-only', h('input', {readOnly: true})),
+        'true on input w/ readonly'
+      )
+      sst.ok(
+        matches(':read-only', h('textarea', {readOnly: true})),
+        'true on textarea w/ readonly'
+      )
+      sst.ok(
+        matches(':read-only', h('input', {disabled: true})),
+        'true on input w/ disabled'
+      )
+      sst.ok(
+        matches(':read-only', h('textarea', {disabled: true})),
+        'true on textarea w/ disabled'
+      )
+      sst.notOk(
+        matches(':read-only', h('div', {contentEditable: 'true'})),
+        'false on element w/ contenteditable'
+      )
+
+      sst.end()
+    })
+
     st.end()
   })
 

test/select-all.js

@@ -770,6 +770,62 @@ test('select.selectAll()', function(t) {
       sst.end()
     })
 
+    st.test(':read-write', function(sst) {
+      sst.deepEqual(
+        selectAll(
+          'p:read-write',
+          u('root', [h('div', {contentEditable: 'true'}, [h('p', 'A')])])
+        ),
+        [h('p', 'A')],
+        'should return elements inside `[contentEditable=true]`'
+      )
+
+      sst.deepEqual(
+        selectAll(
+          'a:read-write',
+          u('root', [
+            h('div', {contentEditable: 'true'}, [
+              s('svg', {viewBox: [0, 0, 50, 50]}, [
+                s('a', {download: true}, '!')
+              ])
+            ])
+          ])
+        ),
+        [],
+        'should not return elements inside SVG embedded in `[contentEditable=true]`'
+      )
+
+      sst.end()
+    })
+
+    st.test(':read-only', function(sst) {
+      sst.deepEqual(
+        selectAll(
+          'p:read-only',
+          u('root', [h('div', {contentEditable: 'true'}, [h('p', 'A')])])
+        ),
+        [],
+        'should not return elements inside `[contentEditable=true]`'
+      )
+
+      sst.deepEqual(
+        selectAll(
+          'a:read-only',
+          u('root', [
+            h('div', {contentEditable: 'true'}, [
+              s('svg', {viewBox: [0, 0, 50, 50]}, [
+                s('a', {download: true}, '!')
+              ])
+            ])
+          ])
+        ),
+        [s('a', {download: true}, '!')],
+        'should return elements inside SVG embedded in `[contentEditable=true]`'
+      )
+
+      sst.end()
+    })
+
     st.test(':root', function(sst) {
       sst.deepEqual(
         selectAll(
@@ -852,6 +908,25 @@ test('select.selectAll()', function(t) {
       sst.end()
     })
 
+    st.test(':scope', function(sst) {
+      sst.deepEqual(
+        selectAll(
+          ':scope',
+          u('root', [h('strong', h('b', 'a')), h('em', h('i', 'b'))])
+        ),
+        [h('strong', h('b', 'a')), h('em', h('i', 'b'))],
+        'should select the elements directly in `root`, if a `root` is given'
+      )
+
+      sst.deepEqual(
+        selectAll(':scope', h('em', h('i', 'b'))),
+        [h('em', h('i', 'b'))],
+        'should select the root element if one is given'
+      )
+
+      sst.end()
+    })
+
     st.end()
   })