Amebis/BesService
2
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Unify nomenclature

Browse Source 
Our thing is a grammar checking service for HTML editors. Not editor as
such.
This commit is contained in:
Simon Rozman 2024-03-13 12:35:54 +01:00
parent ef6615941b
commit 63584185ae
4 changed files with 123 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
Readme.md
View File

@ -1,6 +1,6 @@
# Spletni urejevalnik s podporo za preverjanje pravopisa # Servis za preverjanje pravopisa v dokumentih HTML
Spletni urejevalnik je nadgradnja urejevalnika HTML `<div contenteditable="true">`, ki v besedilu urejevalnika preverja in podčrta pravopisne napake. Namenjen je vgradnji v različne spletne strani in storitve, kjer uporabniki vnašajo besedila v naravnem jeziku. Servis je nadgradnja urejevalnikov HTML `<div contenteditable="true">`, ki v besedilu urejevalnika preverja in podčrta pravopisne napake. Namenjen je vgradnji v različne spletne strani in storitve, kjer uporabniki vnašajo besedila v naravnem jeziku.
## Sistemske zahteve ## Sistemske zahteve
@ -9,9 +9,9 @@ Spletni urejevalnik je nadgradnja urejevalnika HTML `<div contenteditable="true"
## Navodila za vgradnjo ## Navodila za vgradnjo
V svoji kodi HTML vključimo Spletni urejevalnik tako, da: V svoji kodi HTML vključimo servis za preverjanje pravopisa tako, da:
### 1. Vključimo JavaScript in CSS Spletnega urejevalnika ### 1. Vključimo JavaScript in CSS servisa
Primer: Primer:
@ -19,21 +19,22 @@ Primer:
<head> <head>
... ...
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script src="online-editor.js"></script> <script src="service.js"></script>
<script src="popup.js"></script>
</head> </head>
``` ```
### 2. V kodo HTML vstavimo urejevalnik ### 2. V kodo HTML vstavimo servis
Primer: Primer:
```html ```html
<!-- Vsi elementi z razredom CSS `bes-online-editor` se registrirajo samodejno. --> <!-- Vsi elementi z razredom CSS `bes-service` se registrirajo samodejno v document.onload. -->
<div class="bes-online-editor" contenteditable="true">Začetno besedilo</div> <div class="bes-service" contenteditable="true">Začetno besedilo</div>
<!-- V dokument mora biti mesto, kjer servis uredi prikaz okna na klik napake. -->
<bes-popup-el></bes-popup-el>
``` ```
Kadar vstavljamo urejevalnik v HTML-jev DOM dinamično (npr. z uporabo JavaScript), registriramo urejevalnik tako, da kličemo metodo `BesEditor.register(el)`, kjer `el` predstavlja naš element DOM našega urejevalnika. V tem primeru razred CSS `bes-online-editor` ni potreben. Kadar vstavljamo servis v HTML-jev DOM dinamično (npr. z uporabo JavaScript), registriramo servis tako, da kličemo metodo `BesService.register(el)`, kjer `el` predstavlja element DOM našega urejevalnika. V tem primeru razred CSS `bes-service` ni potreben.
Primer: Primer:
@ -44,12 +45,12 @@ const el = document.createElement('div')
el.contentEditable = "true"; el.contentEditable = "true";
// Element urejevalnika vstavimo v DOM. Element urejevalnika mora biti // Element urejevalnika vstavimo v DOM. Element urejevalnika mora biti
// vstavljen v dokument pred klicem `BesEditor.register(el)`, ker // vstavljen v dokument pred klicem `BesService.register(el)`, ker
// registracija potrebuje njegovo pozicijo v drevesu DOM. // registracija potrebuje njegovo pozicijo v drevesu DOM.
parent.appendChild(el) parent.appendChild(el)
// Registriramo urejevalnik. // Registriramo servis za naš urejevalnik.
BesEditor.register(el) BesService.register(el)
``` ```
## Navodila za razvijalce ## Navodila za razvijalce

6
ckeditor.html
View File

@ -2,10 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>CKEditor 5 – Classic editor</title> <title>CKEditor 5 Example</title>
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
<script src="online-editor.js"></script> <script src="service.js"></script>
</head> </head>
<body> <body>
<div id="editor"> <div id="editor">
@ -15,7 +15,7 @@
<script> <script>
ClassicEditor.create(document.querySelector('#editor')) ClassicEditor.create(document.querySelector('#editor'))
.then(newEditor => { .then(newEditor => {
BesEditor.register(newEditor.ui.view.editable.element, newEditor) BesService.register(newEditor.ui.view.editable.element, newEditor)
}) })
.catch(error => { .catch(error => {
console.error(error) console.error(error)

36
index.html
View File

@ -3,33 +3,33 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Editor</title> <title>BesService Example</title>
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script src="online-editor.js"></script> <script src="service.js"></script>
</head> </head>
<body> <body>
<!--<div class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div> <div class="bes-service" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
<br>-->
<div class="bes-online-editor" contenteditable="true"></div>
<br />
<!--<div class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div></div>
<br> <br>
<div class="bes-online-editor" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> <div class="bes-service" contenteditable="true"></div>
<br>-->
<!-- <div class="bes-online-editor" contenteditable="true">To je preiskus.</div> -->
<!-- <br> -->
<!-- <div class="bes-online-editor" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div>
<br>-->
<!-- <div class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> -->
<!-- <br>
<div class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> -->
<!--<br /> <!--<br />
<textarea class="bes-online-editor"></textarea> --> <div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div></div>
<br>
<div class="bes-service" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>-->
<br>
<div class="bes-service" contenteditable="true">To je preiskus.</div>
<!--<br>
<div class="bes-service" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div>-->
<!--<br>
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>-->
<br>
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<!--<br />
<textarea class="bes-service"></textarea>-->
<bes-popup-el></bes-popup-el> <bes-popup-el></bes-popup-el>
</body> </body>
</html> </html>
<style> <style>
.bes-online-editor { .bes-service {
width: 80%; width: 80%;
height: 300px; height: 300px;
margin: 0 auto; margin: 0 auto;

186
online-editor.js → service.js
View File

@ -1,54 +1,54 @@
const besUrl = 'http://localhost:225/api/v2/check' const besUrl = 'http://localhost:225/api/v2/check'
let besEditors = [] // Collection of all grammar checking services in the document let besServices = [] // Collection of all grammar checking services in the document
// TODO: Add support for <textarea> // TODO: Add support for <textarea>
class BesEditor { class BesService {
constructor(edit, CKEditorInstance) { constructor(hostElement, ckEditorInstance) {
this.editorElement = edit this.hostElement = hostElement
this.timer = null this.timer = null
this.children = [] this.children = []
const { correctionPanel, scrollPanel } = this.createCorrectionPanel(edit) const { correctionPanel, scrollPanel } = this.createCorrectionPanel(hostElement)
this.correctionPanel = correctionPanel this.correctionPanel = correctionPanel
this.scrollPanel = scrollPanel this.scrollPanel = scrollPanel
this.offsetTop = null this.offsetTop = null
this.CKEditorInstance = CKEditorInstance this.ckEditorInstance = ckEditorInstance
this.originalSpellcheck = edit.spellcheck this.originalSpellcheck = hostElement.spellcheck
edit.spellcheck = false hostElement.spellcheck = false
this.abortController = new AbortController() this.abortController = new AbortController()
this.proof(edit) this.proof(hostElement)
edit.addEventListener('beforeinput', BesEditor.handleBeforeInput, false) hostElement.addEventListener('beforeinput', BesService.handleBeforeInput, false)
edit.addEventListener('click', BesEditor.handleClick) hostElement.addEventListener('click', BesService.handleClick)
edit.addEventListener('scroll', BesEditor.handleScroll) hostElement.addEventListener('scroll', BesService.handleScroll)
besEditors.push(this) besServices.push(this)
} }
/** /**
* Registers grammar checking service * Registers grammar checking service
* *
* @param {Element} edit DOM element to register grammar checking service for * @param {Element} hostElement DOM element to register grammar checking service for
* @param {CKEditorInstance} CKEditorInstance Enable CKEditor tweaks * @param {CKEditorInstance} ckEditorInstance Enable CKEditor tweaks
* @returns {BesEditor} Grammar checking service instance * @returns {BesService} Grammar checking service instance
*/ */
static register(edit, CKEditorInstance) { static register(hostElement, ckEditorInstance) {
return new BesEditor(edit, CKEditorInstance) return new BesService(hostElement, ckEditorInstance)
} }
/** /**
* Unregisters grammar checking service * Unregisters grammar checking service
*/ */
unregister() { unregister() {
this.editorElement.removeEventListener('scroll', BesEditor.handleScroll) this.hostElement.removeEventListener('scroll', BesService.handleScroll)
this.editorElement.removeEventListener('click', BesEditor.handleClick) this.hostElement.removeEventListener('click', BesService.handleClick)
this.editorElement.removeEventListener( this.hostElement.removeEventListener(
'beforeinput', 'beforeinput',
BesEditor.handleBeforeInput, BesService.handleBeforeInput,
false false
) )
if (this.timer) clearTimeout(this.timer) if (this.timer) clearTimeout(this.timer)
besEditors = besEditors.filter(item => item !== this) besServices = besServices.filter(item => item !== this)
this.editorElement.spellcheck = this.originalSpellcheck this.hostElement.spellcheck = this.originalSpellcheck
this.correctionPanel.remove() this.correctionPanel.remove()
this.scrollPanel.remove() this.scrollPanel.remove()
} }
@ -65,7 +65,7 @@ class BesEditor {
return [{ text: node.textContent, node: node, markup: false }] return [{ text: node.textContent, node: node, markup: false }]
case Node.ELEMENT_NODE: case Node.ELEMENT_NODE:
if (BesEditor.isBlockElement(node)) { if (BesService.isBlockElement(node)) {
// Block elements are grammar-proofed independently. // Block elements are grammar-proofed independently.
if (this.isProofed(node)) { if (this.isProofed(node)) {
return [ return [
@ -183,18 +183,18 @@ class BesEditor {
} }
} }
createCorrectionPanel(edit) { createCorrectionPanel(hostElement) {
const panelParent = document.createElement('div') const panelParent = document.createElement('div')
panelParent.classList.add('bes-correction-panel-parent') panelParent.classList.add('bes-correction-panel-parent')
const correctionPanel = document.createElement('div') const correctionPanel = document.createElement('div')
const scrollPanel = document.createElement('div') const scrollPanel = document.createElement('div')
this.setCorrectionPanelSize(edit, correctionPanel, scrollPanel) this.setCorrectionPanelSize(hostElement, correctionPanel, scrollPanel)
correctionPanel.classList.add('bes-correction-panel') correctionPanel.classList.add('bes-correction-panel')
scrollPanel.classList.add('bes-correction-panel-scroll') scrollPanel.classList.add('bes-correction-panel-scroll')
correctionPanel.appendChild(scrollPanel) correctionPanel.appendChild(scrollPanel)
panelParent.appendChild(correctionPanel) panelParent.appendChild(correctionPanel)
edit.parentElement.insertBefore(panelParent, edit) hostElement.parentElement.insertBefore(panelParent, hostElement)
return { correctionPanel, scrollPanel } return { correctionPanel, scrollPanel }
} }
@ -207,28 +207,28 @@ class BesEditor {
* @param {InputEvent} event The event notifying the user of editable content changes * @param {InputEvent} event The event notifying the user of editable content changes
*/ */
static handleBeforeInput(event) { static handleBeforeInput(event) {
const edit = event.target const hostElement = event.target
let editor = besEditors.find(e => e.editorElement === edit) let service = besServices.find(e => e.hostElement === hostElement)
if (!editor) return if (!service) return
if (editor.timer) clearTimeout(editor.timer) if (service.timer) clearTimeout(service.timer)
editor.abortController.abort() service.abortController.abort()
let blockElements = new Set() let blockElements = new Set()
event.getTargetRanges().forEach(range => { event.getTargetRanges().forEach(range => {
BesEditor.getNodesInRange(range).forEach(el => BesService.getNodesInRange(range).forEach(el =>
blockElements.add(editor.getBlockParent(el)) blockElements.add(service.getBlockParent(el))
) )
}) })
blockElements.forEach(block => { blockElements.forEach(block => {
editor.clearMistakeMarkup(block) service.clearMistakeMarkup(block)
editor.removeChild(block) service.removeChild(block)
}) })
// Not a nice way to do it, but it works for now the repositionMistakes function is called before the DOM updates are finished. // Not a nice way to do it, but it works for now the repositionMistakes function is called before the DOM updates are finished.
setTimeout(() => { setTimeout(() => {
editor.repositionMistakes() service.repositionMistakes()
}, 0) }, 0)
editor.timer = setTimeout(function () { service.timer = setTimeout(function () {
editor.abortController = new AbortController() service.abortController = new AbortController()
editor.proof(edit) service.proof(hostElement)
}, 1000) }, 1000)
} }
@ -257,7 +257,7 @@ class BesEditor {
}) })
// This is a solution for displaying mistakes in CKEditor. It is not the best solution, but it works for now. // This is a solution for displaying mistakes in CKEditor. It is not the best solution, but it works for now.
if (this.CKEditorInstance) window.dispatchEvent(new Event('resize')) if (this.ckEditorInstance) window.dispatchEvent(new Event('resize'))
} }
/** /**
@ -354,8 +354,8 @@ class BesEditor {
* @returns {Element} Innermost block element containing given node * @returns {Element} Innermost block element containing given node
*/ */
getBlockParent(el) { getBlockParent(el) {
for (; el && el !== this.editorElement; el = el.parentNode) { for (; el && el !== this.hostElement; el = el.parentNode) {
if (el.nodeType === Node.ELEMENT_NODE && BesEditor.isBlockElement(el)) if (el.nodeType === Node.ELEMENT_NODE && BesService.isBlockElement(el))
return el return el
} }
return el return el
@ -400,8 +400,8 @@ class BesEditor {
var start = range.startContainer var start = range.startContainer
var end = range.endContainer var end = range.endContainer
let startAncestors = BesEditor.getParents(start) let startAncestors = BesService.getParents(start)
let endAncestors = BesEditor.getParents(end) let endAncestors = BesService.getParents(end)
let commonAncestor = null let commonAncestor = null
for ( for (
let i = 0; let i = 0;
@ -424,7 +424,7 @@ class BesEditor {
nodes.reverse() nodes.reverse()
// walk children and siblings from start until end is found // walk children and siblings from start until end is found
for (node = start; node; node = BesEditor.getNextNode(node)) { for (node = start; node; node = BesService.getNextNode(node)) {
nodes.push(node) nodes.push(node)
if (node == end) break if (node == end) break
} }
@ -440,41 +440,41 @@ class BesEditor {
* @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. * @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) { static handleClick(event) {
const edit = BesEditor.findParent(event.target) const hostElement = BesService.findParent(event.target)
let editor = besEditors.find(e => e.editorElement === edit) let service = besServices.find(e => e.hostElement === hostElement)
if (!editor) return if (!service) return
const target = editor.getBlockParent(event.target) const target = service.getBlockParent(event.target)
editor.renderPopup(target, event.clientX, event.clientY) service.renderPopup(target, event.clientX, event.clientY)
} }
/** /**
* scroll event handler * scroll event handler
* *
* Syncs grammar mistake positions with editor scroll offset. * Syncs grammar mistake positions with host element scroll offset.
* *
* @param {Event} event The event which takes place. * @param {Event} event The event which takes place.
*/ */
static handleScroll(event) { static handleScroll(event) {
const edit = event.target const hostElement = event.target
let editor = besEditors.find(e => e.editorElement === edit) let service = besServices.find(e => e.hostElement === hostElement)
if (!editor) return if (!service) return
editor.scrollPanel.style.top = -edit.scrollTop + 'px' service.scrollPanel.style.top = -hostElement.scrollTop + 'px'
editor.offsetTop = edit.scrollTop service.offsetTop = hostElement.scrollTop
setTimeout(() => { setTimeout(() => {
editor.repositionMistakes() service.repositionMistakes()
}, 100) }, 100)
// TODO: Move popup (if open) too. // TODO: Move popup (if open) too.
} }
/** /**
* Finds the editor with grammar checking service a DOM node is child of. * Finds the host element with grammar checking service a DOM node is child of.
* *
* @param {Node} el DOM node * @param {Node} el DOM node
* @returns {Element} Editor DOM element; null if DOM node is not a descendant of an editor. * @returns {Element} Host DOM element; null if DOM node is not a descendant of any registered host element.
*/ */
static findParent(el) { static findParent(el) {
for (; el; el = el.parentNode) { for (; el; el = el.parentNode) {
if (besEditors.find(editor => editor.editorElement === el)) { if (besServices.find(service => service.hostElement === el)) {
return el return el
} }
} }
@ -495,14 +495,15 @@ class BesEditor {
for (let m of matches) { for (let m of matches) {
if (m.rects) { if (m.rects) {
for (let r of m.rects) { for (let r of m.rects) {
if (BesEditor.isPointInRect(clientX, clientY, r)) { if (BesService.isPointInRect(clientX, clientY, r)) {
popup.changeText(m.match.message) popup.changeText(m.match.message)
m.match.replacements.forEach(replacement => { m.match.replacements.forEach(replacement => {
popup.appendReplacements( popup.appendReplacements(
el, el,
m, m,
replacement.value, replacement.value,
this this,
this.hostElement.contentEditable !== 'false'
) )
}) })
popup.show(clientX, clientY) popup.show(clientX, clientY)
@ -521,16 +522,16 @@ class BesEditor {
if (this.timer) clearTimeout(this.timer) if (this.timer) clearTimeout(this.timer)
this.abortController.abort() this.abortController.abort()
// const tags = this.getTagsAndText(el) // const tags = this.getTagsAndText(el)
if (!this.CKEditorInstance) { if (!this.ckEditorInstance) {
match.range.deleteContents() match.range.deleteContents()
match.range.insertNode(document.createTextNode(replacement)) match.range.insertNode(document.createTextNode(replacement))
} else { } else {
const { CKEditorInstance } = this const { ckEditorInstance } = this
CKEditorInstance.model.change(writer => { ckEditorInstance.model.change(writer => {
const viewElement = const viewElement =
CKEditorInstance.editing.view.domConverter.mapDomToView(el) ckEditorInstance.editing.view.domConverter.mapDomToView(el)
const modelElement = const modelElement =
CKEditorInstance.editing.mapper.toModelElement(viewElement) ckEditorInstance.editing.mapper.toModelElement(viewElement)
if (modelElement) { if (modelElement) {
const elementRange = writer.createRangeIn(modelElement) const elementRange = writer.createRangeIn(modelElement)
// TODO: This logic should work once the HTML tags are removed from match.match.offset and match.match.length if is possible. // TODO: This logic should work once the HTML tags are removed from match.match.offset and match.match.length if is possible.
@ -558,22 +559,8 @@ class BesEditor {
this.proof(el) this.proof(el)
} }
// static getTagsAndText(node) { setCorrectionPanelSize(hostElement, correctionPanel, scrollPanel) {
// if (node.nodeType === Node.TEXT_NODE) { const styles = window.getComputedStyle(hostElement)
// 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 ''
// }
// }
setCorrectionPanelSize(editor, correctionPanel, scrollPanel) {
const styles = window.getComputedStyle(editor)
const totalWidth = const totalWidth =
parseFloat(styles.width) + parseFloat(styles.width) +
parseFloat(styles.marginLeft) + parseFloat(styles.marginLeft) +
@ -588,7 +575,7 @@ class BesEditor {
parseFloat(styles.paddingBottom) parseFloat(styles.paddingBottom)
correctionPanel.style.width = totalWidth + 'px' correctionPanel.style.width = totalWidth + 'px'
correctionPanel.style.height = totalHeight + 'px' correctionPanel.style.height = totalHeight + 'px'
scrollPanel.style.height = editor.scrollHeight + 'px' scrollPanel.style.height = hostElement.scrollHeight + 'px'
} }
static isPointInRect(x, y, rect) { static isPointInRect(x, y, rect) {
@ -602,23 +589,22 @@ class BesEditor {
} }
window.onload = () => { window.onload = () => {
// Search and prepare all our editors found in the document.
document document
.querySelectorAll('.bes-online-editor') .querySelectorAll('.bes-service')
.forEach(edit => BesEditor.register(edit)) .forEach(hostElement => BesService.register(hostElement))
} }
window.onresize = () => { window.onresize = () => {
besEditors.forEach(editor => { besServices.forEach(service => {
editor.setCorrectionPanelSize( service.setCorrectionPanelSize(
editor.editorElement, service.hostElement,
editor.correctionPanel, service.correctionPanel,
editor.scrollPanel service.scrollPanel
) )
editor.children.forEach(child => { service.children.forEach(child => {
editor.clearMistakeMarkup(child.element) service.clearMistakeMarkup(child.element)
child.matches.forEach(match => { child.matches.forEach(match => {
const { clientRects, highlights } = editor.addMistakeMarkup(match.range) const { clientRects, highlights } = service.addMistakeMarkup(match.range)
match.rects = clientRects match.rects = clientRects
match.highlights = highlights match.highlights = highlights
}) })
@ -738,14 +724,16 @@ class BesPopupEl extends HTMLElement {
this.shadowRoot.querySelector('.popup-text').textContent = text this.shadowRoot.querySelector('.popup-text').textContent = text
} }
appendReplacements(el, match, replacement, editor) { appendReplacements(el, match, replacement, service, allowReplacements) {
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div') const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
const replacementBtn = document.createElement('button') const replacementBtn = document.createElement('button')
replacementBtn.classList.add('bes-replacement-btn') replacementBtn.classList.add('bes-replacement-btn')
replacementBtn.textContent = replacement replacementBtn.textContent = replacement
replacementBtn.classList.add('bes-replacement') replacementBtn.classList.add('bes-replacement')
replacementBtn.addEventListener('click', () => { replacementBtn.addEventListener('click', () => {
editor.replaceText(el, match, replacement) if (allowReplacements)
service.replaceText(el, match, replacement)
// TODO: Close popup
}) })
replacementDiv.appendChild(replacementBtn) replacementDiv.appendChild(replacementBtn)
} }