diff --git a/plugins/talk-plugin-rich-text/client/components/CommentContent.css b/plugins/talk-plugin-rich-text/client/components/CommentContent.css index c473ba310..4f81058f4 100644 --- a/plugins/talk-plugin-rich-text/client/components/CommentContent.css +++ b/plugins/talk-plugin-rich-text/client/components/CommentContent.css @@ -3,7 +3,6 @@ background-color: #F6F6F6; padding: 10px; margin: 20px 0px 20px 10px; - font-style: italic; border-radius: 2px; &::after { content: none; diff --git a/plugins/talk-plugin-rich-text/client/components/rte/components/Button.css b/plugins/talk-plugin-rich-text/client/components/rte/components/Button.css index 39b14fb7e..9f30022a0 100644 --- a/plugins/talk-plugin-rich-text/client/components/rte/components/Button.css +++ b/plugins/talk-plugin-rich-text/client/components/rte/components/Button.css @@ -23,16 +23,15 @@ border: none; color: #4e4e4e; margin-right: 3px; + border-radius: 3px; } -.button:hover{ +.button:hover { cursor: pointer; - border-radius: 3px; background-color: #eae8e8; } -.active { - border-radius: 3px; +.button.active { background-color: #ddd; } @@ -41,3 +40,12 @@ cursor: default; background: none; } + +@media (-moz-touch-enabled: 1), (pointer:coarse) { + .button:hover{ + background-color: transparent; + } + .button.active { + background-color: #ddd; + } +} diff --git a/plugins/talk-plugin-rich-text/client/components/rte/features/Bold.js b/plugins/talk-plugin-rich-text/client/components/rte/features/Bold.js index 8f5b55de5..fe072e2b1 100644 --- a/plugins/talk-plugin-rich-text/client/components/rte/features/Bold.js +++ b/plugins/talk-plugin-rich-text/client/components/rte/features/Bold.js @@ -1,5 +1,5 @@ import createToggle from '../factories/createToggle'; -import { findIntersecting } from '../lib/dom'; +import { findIntersecting, findAncestor } from '../lib/dom'; const boldTags = ['B', 'STRONG']; @@ -21,7 +21,8 @@ function isDisabled() { n => n.nodeName !== '#text' && window.getComputedStyle(n).getPropertyValue('font-weight') === 'bold' && - !boldTags.includes(n.tagName), + !boldTags.includes(n.tagName) && + !findAncestor(n, n => boldTags.includes(n.tagName), this.container), this.container ); } diff --git a/plugins/talk-plugin-rich-text/client/components/rte/features/Italic.js b/plugins/talk-plugin-rich-text/client/components/rte/features/Italic.js index d35f08da0..80703f47c 100644 --- a/plugins/talk-plugin-rich-text/client/components/rte/features/Italic.js +++ b/plugins/talk-plugin-rich-text/client/components/rte/features/Italic.js @@ -1,5 +1,5 @@ import createToggle from '../factories/createToggle'; -import { findIntersecting } from '../lib/dom'; +import { findIntersecting, findAncestor } from '../lib/dom'; const italicTags = ['I', 'EM']; @@ -19,7 +19,8 @@ function isDisabled() { n => n.nodeName !== '#text' && window.getComputedStyle(n).getPropertyValue('font-style') === 'italic' && - !italicTags.includes(n.tagName), + !italicTags.includes(n.tagName) && + !findAncestor(n, n => italicTags.includes(n.tagName), this.container), this.container ); }