Clever Geek Handbook

JS queryCommandState ("superscript") always returns false

document.queryCommandState("superscript"); //always return false
document.queryCommandState("bold"); // works fine

how to detect sub or sup on contentEditable element?

+3


source to share


1 answer


I know I'm pretty late to this, but just for documentation purposes, I thought I would answer this:

This is most likely due to the style of the <sub />

/ element <sup />

. The @ tim-down example uses the default style. I have updated the fiddle ( http://jsfiddle.net/alarie/vzxh3818/ ) to use some styles and then it queryCommandState

will return false

. (In this case, it is the property vertical-align: baseline;

that breaks it)

The spec actually contains this note on how state should be determined from the effective value of the command :

NOTE [effective command value] is logically somewhat similar to computed or allowed CSS values, and in fact, for most commands, it is identical to CSS allowed values ​​(see end of algorithm). We need a separate concept for some of the teams where we cannot rely on CSS for whatever reason: createLink and unlink are not related to CSS at all, backColor and hiliteColor need special treatment because the background color is not inherited property, index and superscript rely on <sub>

/ <sup>

instead of CSS vertical-align, and strikethrough and underline are not mapped to unique CSS properties.

Source: https://w3c.github.io/editing/execCommand.html#assorted-inline-formatting-command-algorithms



And here is the actual algorithm for the index / index (from the same spec):

  • Let the index affected and influenced by the superscript be two boolean variables as initially false.

  • While node is an inline node:

    NOTE. Firefox 6.0a2 ignores vertical-align for this purpose, and only takes care of the tags themselves. Opera 11.11 is similar, and actually behaves as bold even for commands. Spectrum originally followed Chrome 14 dev, mainly because WebKit itself will produce gaps with vertical alignment or super, and we want to handle them properly. However, Ryosuke informs me that the behavior of WebKit is considered a bug here, so I changed it to match Gecko / Opera.

    Where node is a subset whose value depends on the index. <is what chrome / webkit is behaving incorrectly

  • Otherwise, if node is sup, set superscript to true. Set node to its parent. If the index is affected and the superscript is correct, returns the string "mixed". If index is true, returns "index". If superscript is affected by true, return "superscript". Returning null.

So the solution for now would be 1) not mess with the styling, or rather 2) do the validation yourself.

0


source






More articles:


All Articles