diff --git a/plugins/talk-plugin-rich-text/client/components/rte/lib/api.js b/plugins/talk-plugin-rich-text/client/components/rte/lib/api.js index ce52afeec..c7ba4d51a 100644 --- a/plugins/talk-plugin-rich-text/client/components/rte/lib/api.js +++ b/plugins/talk-plugin-rich-text/client/components/rte/lib/api.js @@ -1,22 +1,17 @@ -import { selectionIsInside } from './dom'; - /** * An instance of API is passed to all the buttons to * interact with RTE, which servers as a clean abstraction. */ export default class API { - constructor(contentEditable, onChange, canUndo, canRedo, undo, redo) { - this.contentEditable = contentEditable; + constructor(container, onChange, canUndo, canRedo, undo, redo) { + this.container = container; this.broadcastChange = onChange; this.canUndo = canUndo; this.canRedo = canRedo; this.undo = undo; this.redo = redo; } - isSelectionInside() { - return selectionIsInside(this.contentEditable); - } focus() { - this.contentEditable.focus(); + this.container.focus(); } } diff --git a/plugins/talk-plugin-rich-text/client/components/rte/lib/dom.js b/plugins/talk-plugin-rich-text/client/components/rte/lib/dom.js index 69bff32f4..6c25d6052 100644 --- a/plugins/talk-plugin-rich-text/client/components/rte/lib/dom.js +++ b/plugins/talk-plugin-rich-text/client/components/rte/lib/dom.js @@ -1,7 +1,8 @@ /** * Find ancestor with given tag or whith callback returning true. + * If `limitTo` is passed, the search is limited to this container. */ -export function findAncestor(node, tagOrCallback) { +export function findAncestor(node, tagOrCallback, limitTo) { const callback = typeof tagOrCallback === 'function' ? tagOrCallback @@ -11,6 +12,9 @@ export function findAncestor(node, tagOrCallback) { if (callback(node)) { return node; } + if (limitTo && node.isSameNode(limitTo)) { + return null; + } } return null; } @@ -38,9 +42,10 @@ export function findChild(node, tagOrCallback) { /** * Find an node intersecting with the selection with given tag or - * with callback returning true. + * with callback returning true. If `limitTo` is passed, the search + * is limited to this container. */ -export function findIntersecting(tagOrCallback) { +export function findIntersecting(tagOrCallback, limitTo) { const callback = typeof tagOrCallback === 'function' ? tagOrCallback @@ -55,7 +60,7 @@ export function findIntersecting(tagOrCallback) { return range.startContainer; } - const ancestor = findAncestor(range.startContainer, callback); + const ancestor = findAncestor(range.startContainer, callback, limitTo); if (ancestor) { return ancestor; } @@ -226,7 +231,7 @@ function ensureEndMarker(node) { * Returns true if selection is completely inside * given node. */ -export function selectionIsInside(node) { +export function isSelectionInside(node) { const range = getSelectionRange(); return ( range &&