732 lines
23 KiB
JavaScript
732 lines
23 KiB
JavaScript
const besUrl = 'http://localhost:225/api/v2/check'
|
|
|
|
let besEditors = [] // Collection of all grammar checking services in the document
|
|
|
|
class BesEditor {
|
|
constructor(edit, isCkeditor) {
|
|
this.el = edit
|
|
this.timer = null
|
|
this.children = []
|
|
const { correctionPanel, scrollPanel } = this.createCorrectionPanel(edit)
|
|
this.correctionPanel = correctionPanel
|
|
this.scrollPanel = scrollPanel
|
|
this.offsetTop = null
|
|
this.isCKeditor = !!isCkeditor
|
|
edit.classList.add('bes-online-editor')
|
|
this.originalSpellcheck = edit.spellcheck
|
|
edit.spellcheck = false
|
|
this.proof(edit)
|
|
edit.addEventListener('beforeinput', BesEditor.handleBeforeInput, false)
|
|
edit.addEventListener('click', BesEditor.handleClick)
|
|
edit.addEventListener('scroll', BesEditor.handleScroll)
|
|
besEditors.push(this)
|
|
}
|
|
|
|
/**
|
|
* Registers grammar checking service
|
|
*
|
|
* @param {Element} edit DOM element to register grammar checking service for
|
|
* @param {Boolean} isCkeditor Enable CKEditor tweaks
|
|
* @returns {BesEditor} Grammar checking service instance
|
|
*/
|
|
static register(edit, isCkeditor) {
|
|
return new BesEditor(edit, isCkeditor)
|
|
}
|
|
|
|
/**
|
|
* Unregisters grammar checking service
|
|
*/
|
|
unregister() {
|
|
this.el.removeEventListener('scroll', BesEditor.handleScroll)
|
|
this.el.removeEventListener('click', BesEditor.handleClick)
|
|
this.el.removeEventListener(
|
|
'beforeinput',
|
|
BesEditor.handleBeforeInput,
|
|
false
|
|
)
|
|
if (this.timer) clearTimeout(this.timer)
|
|
besEditors = besEditors.filter(item => item !== this)
|
|
this.el.spellcheck = this.originalSpellcheck
|
|
this.el.classList.remove('bes-online-editor')
|
|
this.correctionPanel.remove()
|
|
this.scrollPanel.remove()
|
|
}
|
|
|
|
// TODO: add support for textarea elements
|
|
/**
|
|
* Recursively grammar-proofs a DOM tree.
|
|
*
|
|
* @param {Node} el DOM root node to proof
|
|
* @returns {Array} Markup of text to proof using BesStr
|
|
*/
|
|
async proof(el) {
|
|
// If first child is not a block element, add a dummy <div>...</div> around it.
|
|
// This solution is still not fully tested and might need some improvements.
|
|
if (el.classList?.contains('bes-online-editor')) {
|
|
const firstChild = el.firstChild
|
|
if (
|
|
firstChild &&
|
|
(firstChild.nodeType === Node.TEXT_NODE ||
|
|
!BesEditor.isBlockElement(firstChild))
|
|
) {
|
|
const divEl = document.createElement('div')
|
|
if (firstChild.nodeType === Node.TEXT_NODE) {
|
|
divEl.textContent = firstChild.textContent
|
|
} else divEl.appendChild(firstChild.cloneNode(true))
|
|
el.insertBefore(divEl, firstChild)
|
|
el.removeChild(firstChild)
|
|
}
|
|
}
|
|
|
|
switch (el.nodeType) {
|
|
case Node.TEXT_NODE:
|
|
return [{ text: el.textContent, el: el, markup: false }]
|
|
|
|
case Node.ELEMENT_NODE:
|
|
if (BesEditor.isBlockElement(el)) {
|
|
// Block elements are grammar-proofed independently.
|
|
if (this.isProofed(el)) {
|
|
return [{ text: '<' + el.tagName + '/>', el: el, markup: true }]
|
|
}
|
|
this.clearMistakeMarkup(el)
|
|
let data = []
|
|
for (const el2 of el.childNodes) {
|
|
data = data.concat(await this.proof(el2))
|
|
}
|
|
if (data.some(x => !x.markup && !/^\s*$/.test(x.text))) {
|
|
const requestData = {
|
|
format: 'plain',
|
|
data: JSON.stringify({
|
|
annotation: data.map(x =>
|
|
x.markup ? { markup: x.text } : { text: x.text }
|
|
)
|
|
}),
|
|
language: el.lang ? el.lang : 'sl',
|
|
level: 'picky'
|
|
}
|
|
const request = new Request(besUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: new URLSearchParams(requestData)
|
|
})
|
|
fetch(request)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
// TODO: Make connectivity and BesStr issues non-fatal. But show an error sign somewhere in the UI.
|
|
throw new Error('Backend server response was not OK')
|
|
}
|
|
return response.json()
|
|
})
|
|
.then(responseData => {
|
|
let matches = []
|
|
responseData.matches.forEach(match => {
|
|
let range = document.createRange()
|
|
|
|
// Locate start of the grammar mistake.
|
|
for (
|
|
let idx = 0, startingOffset = 0;
|
|
;
|
|
startingOffset += data[idx++].text.length
|
|
) {
|
|
if (
|
|
!data[idx].markup &&
|
|
/*startingOffset <= match.offset &&*/ match.offset <
|
|
startingOffset + data[idx].text.length
|
|
) {
|
|
range.setStart(
|
|
data[idx].el,
|
|
match.offset - startingOffset
|
|
)
|
|
break
|
|
}
|
|
}
|
|
|
|
// Locate end of the grammar mistake.
|
|
let endOffset = match.offset + match.length
|
|
for (
|
|
let idx = 0, startingOffset = 0;
|
|
;
|
|
startingOffset += data[idx++].text.length
|
|
) {
|
|
if (
|
|
!data[idx].markup &&
|
|
/*startingOffset <= endOffset &&*/ endOffset <=
|
|
startingOffset + data[idx].text.length
|
|
) {
|
|
range.setEnd(data[idx].el, endOffset - startingOffset)
|
|
break
|
|
}
|
|
}
|
|
|
|
const { clientRects, highlight } = this.addMistakeMarkup(
|
|
range,
|
|
this.scrollPanel
|
|
)
|
|
matches.push({
|
|
rects: clientRects,
|
|
highlight: highlight,
|
|
range: range,
|
|
match: match
|
|
})
|
|
})
|
|
this.markProofed(el, matches)
|
|
|
|
// This is a solution for CKEditor. It is not the best solution, but it works for now.
|
|
if (this.isCKeditor) {
|
|
const resizeEvent = new Event('resize')
|
|
window.dispatchEvent(resizeEvent)
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// TODO: Make parsing issues non-fatal. But show an error sign somewhere in the UI.
|
|
throw new Error(
|
|
'Parsing backend server response failed: ' + error
|
|
)
|
|
})
|
|
}
|
|
return [{ text: '<' + el.tagName + '/>', el: el, markup: true }]
|
|
} else {
|
|
// Surround inline element with dummy <tagName>...</tagName>.
|
|
let data = [{ text: '<' + el.tagName + '>', el: el, markup: true }]
|
|
for (const el2 of el.childNodes) {
|
|
data = data.concat(await this.proof(el2))
|
|
}
|
|
data.splice(data.length, 0, {
|
|
text: '</' + el.tagName + '>',
|
|
markup: true
|
|
})
|
|
return data
|
|
}
|
|
|
|
default:
|
|
return [{ text: '<?' + el.nodeType + '>', el: el, markup: true }]
|
|
}
|
|
}
|
|
|
|
createCorrectionPanel(edit) {
|
|
const panelParent = document.createElement('div')
|
|
panelParent.classList.add('bes-correction-panel-parent')
|
|
const correctionPanel = document.createElement('div')
|
|
const scrollPanel = document.createElement('div')
|
|
this.setCorrectionPanelSize(edit, correctionPanel, scrollPanel)
|
|
correctionPanel.classList.add('bes-correction-panel')
|
|
scrollPanel.classList.add('bes-correction-panel-scroll')
|
|
|
|
correctionPanel.appendChild(scrollPanel)
|
|
panelParent.appendChild(correctionPanel)
|
|
edit.parentElement.insertBefore(panelParent, edit)
|
|
|
|
return { correctionPanel, scrollPanel }
|
|
}
|
|
|
|
/**
|
|
* beforeinput event handler
|
|
*
|
|
* Marks section of the text that is about to change as not-yet-grammar-proofed.
|
|
*
|
|
* @param {InputEvent} event The event notifying the user of editable content changes
|
|
*/
|
|
static handleBeforeInput(event) {
|
|
const edit = event.target
|
|
let editor = besEditors.find(e => e.el === edit)
|
|
if (!editor) return
|
|
if (editor.timer) clearTimeout(editor.timer)
|
|
let blockElements = new Set()
|
|
event.getTargetRanges().forEach(range => {
|
|
BesEditor.getNodesInRange(range).forEach(el =>
|
|
blockElements.add(editor.getBlockParent(el))
|
|
)
|
|
})
|
|
blockElements.forEach(block => {
|
|
editor.clearProofed(block)
|
|
editor.clearMistakeMarkup(block)
|
|
editor.clearChildren(block)
|
|
})
|
|
// Not a nice way to do it, but it works for now the repositionMistakes function is called before the DOM updates are finished.
|
|
setTimeout(() => {
|
|
editor.repositionMistakes()
|
|
}, 0)
|
|
editor.timer = setTimeout(function () {
|
|
editor.proof(edit)
|
|
}, 1000)
|
|
}
|
|
|
|
// Test if given block element has already been grammar-proofed.
|
|
isProofed(el) {
|
|
let filteredChildren = this.children.filter(child => child.elements === el)
|
|
return filteredChildren[0]?.isProofed
|
|
}
|
|
|
|
// Mark given block element as grammar-proofed.
|
|
markProofed(el, matches) {
|
|
let newChild = {
|
|
isProofed: true,
|
|
elements: el, // TODO: Rename "elements" to "el" - 1. It contains only single element (plural elements is misleading), 2. BesEditor also uses "el" named field for DOM matching.
|
|
matches: matches
|
|
}
|
|
|
|
this.children = this.children.map(child =>
|
|
child.elements === newChild.elements ? newChild : child
|
|
)
|
|
if (!this.children.some(child => child.elements === newChild.elements)) {
|
|
this.children.push(newChild)
|
|
}
|
|
}
|
|
|
|
// Mark given block element as not grammar-proofed.
|
|
clearProofed(el) {
|
|
this.children
|
|
.filter(child => child.elements === el)
|
|
.forEach(child => {
|
|
child.isProofed = false
|
|
})
|
|
}
|
|
|
|
// Remove all grammar mistakes markup for given block element.
|
|
clearMistakeMarkup(el) {
|
|
this.children
|
|
.filter(child => child.elements === el)
|
|
.forEach(child => {
|
|
child.matches.forEach(match => {
|
|
match.highlight.remove()
|
|
delete match.highlight
|
|
})
|
|
})
|
|
}
|
|
|
|
// Remove all children from this.children array
|
|
clearChildren(el) {
|
|
if (el?.classList.contains('bes-online-editor')) return
|
|
else this.children = this.children.filter(child => child.elements !== el)
|
|
}
|
|
|
|
repositionMistakes() {
|
|
this.children.forEach(child => {
|
|
this.clearMistakeMarkup(child.elements)
|
|
child.matches.forEach(match => {
|
|
const { clientRects, highlight } = this.addMistakeMarkup(
|
|
match.range,
|
|
this.scrollPanel
|
|
)
|
|
match.rects = clientRects
|
|
match.highlight = highlight
|
|
})
|
|
})
|
|
}
|
|
|
|
// Adds grammar mistake markup
|
|
addMistakeMarkup(range, scrollPanel) {
|
|
// TODO: Consider using range.getClientRects() instead of range.getBoundingClientRect()
|
|
// In CKEditor case, the highlight element is not shown for some reason. But after resizing the window it is shown.
|
|
const clientRects = range.getClientRects()
|
|
const scrollPanelRect = scrollPanel.getBoundingClientRect()
|
|
const highlight = document.createElement('div')
|
|
for (let i = 0, n = clientRects.length; i < n; ++i) {
|
|
const rect = clientRects[i]
|
|
highlight.classList.add('bes-typo-mistake')
|
|
const topPosition = rect.top - scrollPanelRect.top
|
|
const leftPosition = rect.left - scrollPanelRect.left
|
|
highlight.style.left = `${leftPosition}px`
|
|
highlight.style.top = `${topPosition}px`
|
|
highlight.style.width = `${rect.width}px`
|
|
highlight.style.height = `${rect.height}px`
|
|
this.scrollPanel.appendChild(highlight)
|
|
}
|
|
return { clientRects, highlight }
|
|
}
|
|
|
|
// Tests if given element is block element.
|
|
static isBlockElement(el) {
|
|
switch (
|
|
document.defaultView
|
|
.getComputedStyle(el, null)
|
|
.getPropertyValue('display')
|
|
.toLowerCase()
|
|
) {
|
|
case 'inline':
|
|
case 'inline-block':
|
|
return false
|
|
default:
|
|
return true
|
|
}
|
|
}
|
|
|
|
// Returns first block parent element
|
|
getBlockParent(el) {
|
|
for (; el && el !== this.el; el = el.parentNode) {
|
|
if (el.nodeType === Node.ELEMENT_NODE && BesEditor.isBlockElement(el))
|
|
return el
|
|
}
|
|
return el
|
|
}
|
|
|
|
static getNextNode(node) {
|
|
if (node.firstChild) return node.firstChild
|
|
while (node) {
|
|
if (node.nextSibling) return node.nextSibling
|
|
node = node.parentNode
|
|
}
|
|
}
|
|
|
|
static getParents(node) {
|
|
let parents = []
|
|
do {
|
|
parents.push(node)
|
|
node = node.parentNode
|
|
} while (node)
|
|
return parents.reverse()
|
|
}
|
|
|
|
static getNodesInRange(range) {
|
|
var start = range.startContainer
|
|
var end = range.endContainer
|
|
|
|
let startAncestors = BesEditor.getParents(start)
|
|
let endAncestors = BesEditor.getParents(end)
|
|
let commonAncestor = null
|
|
for (
|
|
let i = 0;
|
|
i < startAncestors.length &&
|
|
i < endAncestors.length &&
|
|
startAncestors[i] === endAncestors[i];
|
|
++i
|
|
) {
|
|
commonAncestor = startAncestors[i]
|
|
}
|
|
|
|
var nodes = []
|
|
var node
|
|
|
|
// walk parent nodes from start to common ancestor
|
|
for (node = start.parentNode; node; node = node.parentNode) {
|
|
nodes.push(node)
|
|
if (node == commonAncestor) break
|
|
}
|
|
nodes.reverse()
|
|
|
|
// walk children and siblings from start until end is found
|
|
for (node = start; node; node = BesEditor.getNextNode(node)) {
|
|
nodes.push(node)
|
|
if (node == end) break
|
|
}
|
|
|
|
return nodes
|
|
}
|
|
|
|
/**
|
|
* click event handler
|
|
*
|
|
* Displays or hides grammar mistake popup.
|
|
*
|
|
* @param {PointerEvent} event The event produced by a pointer such as the geometry of the contact point, the device type that generated the event, the amount of pressure that was applied on the contact surface, etc.
|
|
*/
|
|
static handleClick(event) {
|
|
const edit = BesEditor.findParent(event.target)
|
|
let editor = besEditors.find(e => e.el === edit)
|
|
if (!editor) return
|
|
const target = editor.getBlockParent(event.target)
|
|
const popup = document.querySelector('bes-popup-el')
|
|
const matches = editor.children.find(
|
|
child => child.elements === target
|
|
)?.matches
|
|
if (
|
|
!matches ||
|
|
!editor.renderPopup(target, matches, popup, event.clientX, event.clientY)
|
|
)
|
|
popup.hide()
|
|
}
|
|
|
|
/**
|
|
* scroll event handler
|
|
*
|
|
* Syncs grammar mistake positions with editor scroll offset.
|
|
*
|
|
* @param {Event} event The event which takes place.
|
|
*/
|
|
static handleScroll(event) {
|
|
const edit = event.target
|
|
let editor = besEditors.find(e => e.el === edit)
|
|
if (!editor) return
|
|
editor.scrollPanel.style.top = -edit.scrollTop + 'px'
|
|
editor.offsetTop = edit.scrollTop
|
|
setTimeout(() => {
|
|
editor.repositionMistakes()
|
|
}, 300)
|
|
// TODO: Move popup (if open) too.
|
|
}
|
|
|
|
/**
|
|
* Finds the editor with grammar checking service the given DOM node is a child of.
|
|
*
|
|
* @param {Node} target DOM node
|
|
* @returns {Element} Editor DOM element; null if DOM node is not a descendant of an editor.
|
|
*/
|
|
static findParent(target) {
|
|
for (let el = target; el; el = el.parentNode) {
|
|
if (el.classList?.contains('bes-online-editor')) {
|
|
return el
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
renderPopup(el, matches, popup, clientX, clientY) {
|
|
for (let m of matches) {
|
|
if (m.rects) {
|
|
for (let r of m.rects) {
|
|
if (BesEditor.isPointInRect(clientX, clientY, r)) {
|
|
popup.changeText(m.match.message)
|
|
m.match.replacements.forEach(replacement => {
|
|
popup.appendReplacements(el, r, m.match, replacement.value, this)
|
|
})
|
|
popup.show(clientX, clientY)
|
|
return true
|
|
}
|
|
}
|
|
} else {
|
|
popup.hide()
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
// TODO: In rich HTML texts, match.offset has different value than in plain text.
|
|
// This function should be able to handle both cases or find a way that works for both.
|
|
static replaceText(el, rect, match, replacement, editor) {
|
|
// const tags = this.getTagsAndText(el)
|
|
const text = el.textContent
|
|
const newText =
|
|
text.substring(0, match.offset) +
|
|
replacement +
|
|
text.substring(match.offset + match.length)
|
|
el.textContent = newText
|
|
BesEditor.clearSingleMistake(editor, el, rect)
|
|
// In my opinion, this approach provides the most straightforward solution for repositioning mistakes after a change.
|
|
// It maintains reasonable performance as it only checks the block element that has been modified,
|
|
// rather than re-evaluating the entire document or a larger set of elements.
|
|
editor.proof(el)
|
|
}
|
|
|
|
// static getTagsAndText(node) {
|
|
// if (node.nodeType === Node.TEXT_NODE) {
|
|
// return node.textContent
|
|
// } else if (node.nodeType === Node.ELEMENT_NODE) {
|
|
// let tag = node.tagName.toLowerCase()
|
|
// let content = Array.from(node.childNodes)
|
|
// .map(BesEditor.getTagsAndText)
|
|
// .join('')
|
|
// return `<${tag}>${content}</${tag}>`
|
|
// } else {
|
|
// return ''
|
|
// }
|
|
// }
|
|
|
|
// This function clears a single mistake
|
|
static clearSingleMistake(editor, el, rect) {
|
|
const childToDelete = editor.children.filter(
|
|
child => child.elements === el
|
|
)[0]
|
|
childToDelete.isProofed = false
|
|
childToDelete.matches = childToDelete.matches.filter(
|
|
match => !BesEditor.isPointInRect(rect.left, rect.top, match.rects[0])
|
|
)
|
|
|
|
// TODO: find a better way to remove elements from the DOM
|
|
Array.from(editor.scrollPanel.children)
|
|
.filter(child => {
|
|
const childRect = child.getBoundingClientRect()
|
|
return BesEditor.isPointInRect(childRect.left, childRect.top, rect)
|
|
})
|
|
.forEach(child => child.remove())
|
|
}
|
|
|
|
setCorrectionPanelSize(editor, correctionPanel, scrollPanel) {
|
|
const styles = window.getComputedStyle(editor)
|
|
const totalWidth =
|
|
parseFloat(styles.width) +
|
|
parseFloat(styles.marginLeft) +
|
|
parseFloat(styles.marginRight) +
|
|
parseFloat(styles.paddingLeft) +
|
|
parseFloat(styles.paddingRight)
|
|
const totalHeight =
|
|
parseFloat(styles.height) +
|
|
parseFloat(styles.marginTop) +
|
|
parseFloat(styles.marginBottom) +
|
|
parseFloat(styles.paddingTop) +
|
|
parseFloat(styles.paddingBottom)
|
|
correctionPanel.style.width = totalWidth + 'px'
|
|
correctionPanel.style.height = totalHeight + 'px'
|
|
scrollPanel.style.height = editor.scrollHeight + 'px'
|
|
}
|
|
|
|
static isPointInRect(x, y, rect) {
|
|
return (
|
|
x >= rect.x &&
|
|
x < rect.x + rect.width &&
|
|
y >= rect.y &&
|
|
y < rect.y + rect.height
|
|
)
|
|
}
|
|
}
|
|
|
|
window.onload = () => {
|
|
// Search and prepare all our editors found in the document.
|
|
document
|
|
.querySelectorAll('.bes-online-editor')
|
|
.forEach(edit => BesEditor.register(edit))
|
|
|
|
// TODO: not the most optimal solution, but it works for now
|
|
// Find contenteditable element inside ckeditor and prepare it
|
|
document.querySelectorAll('.ck-editor__editable').forEach(edit => {
|
|
BesEditor.register(edit, true)
|
|
})
|
|
}
|
|
|
|
window.onresize = () => {
|
|
besEditors.forEach(editor => {
|
|
editor.setCorrectionPanelSize(
|
|
editor.el,
|
|
editor.correctionPanel,
|
|
editor.scrollPanel
|
|
)
|
|
editor.children.forEach(child => {
|
|
editor.clearMistakeMarkup(child.elements)
|
|
child.matches.forEach(match => {
|
|
const { clientRects, highlight } = editor.addMistakeMarkup(
|
|
match.range,
|
|
editor.scrollPanel
|
|
)
|
|
match.rects = clientRects
|
|
match.highlight = highlight
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
// This is popup element
|
|
class BesPopupEl extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({ mode: 'open' })
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render()
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
position: relative;
|
|
display: inline-block;
|
|
z-index: -1
|
|
}
|
|
:host(.show){
|
|
z-index: 10;
|
|
}
|
|
.popup-text {
|
|
max-width: 160px;
|
|
color: black;
|
|
text-align: center;
|
|
padding: 8px 0;
|
|
z-index: 1;
|
|
}
|
|
.bes-popup-container {
|
|
visibility: hidden;
|
|
max-width: 300px;
|
|
background-color: rgb(241, 243, 249);
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
border-radius: 5px;
|
|
padding: 8px;
|
|
z-index: 1;
|
|
}
|
|
.bes-toolbar {
|
|
display: flex;
|
|
justify-content: end;
|
|
padding: 5px 2px;
|
|
}
|
|
.bes-toolbar button {
|
|
margin-right: 2px;
|
|
}
|
|
.bes-text-div{
|
|
background-color: white;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
.bes-replacement-btn{
|
|
margin: 5px 0;
|
|
padding: 5px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background-color: #239aff;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
.bes-replacement-btn:hover{
|
|
background-color: #1976f0;
|
|
}
|
|
:host(.show) .bes-popup-container {
|
|
visibility: visible;
|
|
animation: fadeIn 1s;
|
|
}
|
|
@keyframes fadeIn {
|
|
from {opacity: 0;}
|
|
to {opacity:1 ;}
|
|
}
|
|
</style>
|
|
<div class="bes-popup-container">
|
|
<div class="bes-toolbar">
|
|
<button class="bes-close-btn">X</button>
|
|
</div>
|
|
<div class="bes-text-div">
|
|
<span class="popup-text">
|
|
</span>
|
|
<div class="bes-replacement-div">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
show(x, y) {
|
|
y = y + 20
|
|
this.style.position = 'fixed'
|
|
this.style.left = `${x}px`
|
|
this.style.top = `${y}px`
|
|
this.classList.add('show')
|
|
}
|
|
|
|
clear() {
|
|
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
|
|
const replacements = replacementDiv.children
|
|
if (!replacements.length) return
|
|
for (const replacement of Array.from(replacements)) {
|
|
replacement.remove()
|
|
}
|
|
}
|
|
|
|
hide() {
|
|
this.classList.remove('show')
|
|
}
|
|
|
|
changeText(text) {
|
|
this.clear()
|
|
this.shadowRoot.querySelector('.popup-text').textContent = text
|
|
}
|
|
|
|
appendReplacements(el, rect, match, replacement, editor) {
|
|
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
|
|
const replacementBtn = document.createElement('button')
|
|
replacementBtn.classList.add('bes-replacement-btn')
|
|
replacementBtn.textContent = replacement
|
|
replacementBtn.classList.add('bes-replacement')
|
|
replacementBtn.addEventListener('click', () => {
|
|
BesEditor.replaceText(el, rect, match, replacement, editor)
|
|
})
|
|
replacementDiv.appendChild(replacementBtn)
|
|
}
|
|
}
|
|
|
|
customElements.define('bes-popup-el', BesPopupEl)
|