Unify nomenclature
Our thing is a grammar checking service for HTML editors. Not editor as such.
This commit is contained in:
parent
ef6615941b
commit
63584185ae
27
Readme.md
27
Readme.md
@ -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
|
||||
|
||||
@ -9,9 +9,9 @@ Spletni urejevalnik je nadgradnja urejevalnika HTML `<div contenteditable="true"
|
||||
|
||||
## 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:
|
||||
|
||||
@ -19,21 +19,22 @@ Primer:
|
||||
<head>
|
||||
...
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="online-editor.js"></script>
|
||||
<script src="popup.js"></script>
|
||||
<script src="service.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
### 2. V kodo HTML vstavimo urejevalnik
|
||||
### 2. V kodo HTML vstavimo servis
|
||||
|
||||
Primer:
|
||||
|
||||
```html
|
||||
<!-- Vsi elementi z razredom CSS `bes-online-editor` se registrirajo samodejno. -->
|
||||
<div class="bes-online-editor" contenteditable="true">Začetno besedilo</div>
|
||||
<!-- Vsi elementi z razredom CSS `bes-service` se registrirajo samodejno v document.onload. -->
|
||||
<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:
|
||||
|
||||
@ -44,12 +45,12 @@ const el = document.createElement('div')
|
||||
el.contentEditable = "true";
|
||||
|
||||
// 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.
|
||||
parent.appendChild(el)
|
||||
|
||||
// Registriramo urejevalnik.
|
||||
BesEditor.register(el)
|
||||
// Registriramo servis za naš urejevalnik.
|
||||
BesService.register(el)
|
||||
```
|
||||
|
||||
## Navodila za razvijalce
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CKEditor 5 – Classic editor</title>
|
||||
<title>CKEditor 5 Example</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<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>
|
||||
<body>
|
||||
<div id="editor">
|
||||
@ -15,7 +15,7 @@
|
||||
<script>
|
||||
ClassicEditor.create(document.querySelector('#editor'))
|
||||
.then(newEditor => {
|
||||
BesEditor.register(newEditor.ui.view.editable.element, newEditor)
|
||||
BesService.register(newEditor.ui.view.editable.element, newEditor)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
|
||||
38
index.html
38
index.html
@ -3,33 +3,33 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Editor</title>
|
||||
<title>BesService Example</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="online-editor.js"></script>
|
||||
<script src="service.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--<div class="bes-online-editor" 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>
|
||||
<div class="bes-service" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
|
||||
<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>
|
||||
<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 />
|
||||
<textarea class="bes-online-editor"></textarea> -->
|
||||
<div class="bes-service" contenteditable="true"></div>
|
||||
<!--<br />
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
<style>
|
||||
.bes-online-editor {
|
||||
.bes-service {
|
||||
width: 80%;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -1,54 +1,54 @@
|
||||
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>
|
||||
|
||||
class BesEditor {
|
||||
constructor(edit, CKEditorInstance) {
|
||||
this.editorElement = edit
|
||||
class BesService {
|
||||
constructor(hostElement, ckEditorInstance) {
|
||||
this.hostElement = hostElement
|
||||
this.timer = null
|
||||
this.children = []
|
||||
const { correctionPanel, scrollPanel } = this.createCorrectionPanel(edit)
|
||||
const { correctionPanel, scrollPanel } = this.createCorrectionPanel(hostElement)
|
||||
this.correctionPanel = correctionPanel
|
||||
this.scrollPanel = scrollPanel
|
||||
this.offsetTop = null
|
||||
this.CKEditorInstance = CKEditorInstance
|
||||
this.originalSpellcheck = edit.spellcheck
|
||||
edit.spellcheck = false
|
||||
this.ckEditorInstance = ckEditorInstance
|
||||
this.originalSpellcheck = hostElement.spellcheck
|
||||
hostElement.spellcheck = false
|
||||
this.abortController = new AbortController()
|
||||
this.proof(edit)
|
||||
edit.addEventListener('beforeinput', BesEditor.handleBeforeInput, false)
|
||||
edit.addEventListener('click', BesEditor.handleClick)
|
||||
edit.addEventListener('scroll', BesEditor.handleScroll)
|
||||
besEditors.push(this)
|
||||
this.proof(hostElement)
|
||||
hostElement.addEventListener('beforeinput', BesService.handleBeforeInput, false)
|
||||
hostElement.addEventListener('click', BesService.handleClick)
|
||||
hostElement.addEventListener('scroll', BesService.handleScroll)
|
||||
besServices.push(this)
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers grammar checking service
|
||||
*
|
||||
* @param {Element} edit DOM element to register grammar checking service for
|
||||
* @param {CKEditorInstance} CKEditorInstance Enable CKEditor tweaks
|
||||
* @returns {BesEditor} Grammar checking service instance
|
||||
* @param {Element} hostElement DOM element to register grammar checking service for
|
||||
* @param {CKEditorInstance} ckEditorInstance Enable CKEditor tweaks
|
||||
* @returns {BesService} Grammar checking service instance
|
||||
*/
|
||||
static register(edit, CKEditorInstance) {
|
||||
return new BesEditor(edit, CKEditorInstance)
|
||||
static register(hostElement, ckEditorInstance) {
|
||||
return new BesService(hostElement, ckEditorInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregisters grammar checking service
|
||||
*/
|
||||
unregister() {
|
||||
this.editorElement.removeEventListener('scroll', BesEditor.handleScroll)
|
||||
this.editorElement.removeEventListener('click', BesEditor.handleClick)
|
||||
this.editorElement.removeEventListener(
|
||||
this.hostElement.removeEventListener('scroll', BesService.handleScroll)
|
||||
this.hostElement.removeEventListener('click', BesService.handleClick)
|
||||
this.hostElement.removeEventListener(
|
||||
'beforeinput',
|
||||
BesEditor.handleBeforeInput,
|
||||
BesService.handleBeforeInput,
|
||||
false
|
||||
)
|
||||
if (this.timer) clearTimeout(this.timer)
|
||||
besEditors = besEditors.filter(item => item !== this)
|
||||
this.editorElement.spellcheck = this.originalSpellcheck
|
||||
besServices = besServices.filter(item => item !== this)
|
||||
this.hostElement.spellcheck = this.originalSpellcheck
|
||||
this.correctionPanel.remove()
|
||||
this.scrollPanel.remove()
|
||||
}
|
||||
@ -65,7 +65,7 @@ class BesEditor {
|
||||
return [{ text: node.textContent, node: node, markup: false }]
|
||||
|
||||
case Node.ELEMENT_NODE:
|
||||
if (BesEditor.isBlockElement(node)) {
|
||||
if (BesService.isBlockElement(node)) {
|
||||
// Block elements are grammar-proofed independently.
|
||||
if (this.isProofed(node)) {
|
||||
return [
|
||||
@ -183,18 +183,18 @@ class BesEditor {
|
||||
}
|
||||
}
|
||||
|
||||
createCorrectionPanel(edit) {
|
||||
createCorrectionPanel(hostElement) {
|
||||
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)
|
||||
this.setCorrectionPanelSize(hostElement, 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)
|
||||
hostElement.parentElement.insertBefore(panelParent, hostElement)
|
||||
|
||||
return { correctionPanel, scrollPanel }
|
||||
}
|
||||
@ -207,28 +207,28 @@ class BesEditor {
|
||||
* @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.editorElement === edit)
|
||||
if (!editor) return
|
||||
if (editor.timer) clearTimeout(editor.timer)
|
||||
editor.abortController.abort()
|
||||
const hostElement = event.target
|
||||
let service = besServices.find(e => e.hostElement === hostElement)
|
||||
if (!service) return
|
||||
if (service.timer) clearTimeout(service.timer)
|
||||
service.abortController.abort()
|
||||
let blockElements = new Set()
|
||||
event.getTargetRanges().forEach(range => {
|
||||
BesEditor.getNodesInRange(range).forEach(el =>
|
||||
blockElements.add(editor.getBlockParent(el))
|
||||
BesService.getNodesInRange(range).forEach(el =>
|
||||
blockElements.add(service.getBlockParent(el))
|
||||
)
|
||||
})
|
||||
blockElements.forEach(block => {
|
||||
editor.clearMistakeMarkup(block)
|
||||
editor.removeChild(block)
|
||||
service.clearMistakeMarkup(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.
|
||||
setTimeout(() => {
|
||||
editor.repositionMistakes()
|
||||
service.repositionMistakes()
|
||||
}, 0)
|
||||
editor.timer = setTimeout(function () {
|
||||
editor.abortController = new AbortController()
|
||||
editor.proof(edit)
|
||||
service.timer = setTimeout(function () {
|
||||
service.abortController = new AbortController()
|
||||
service.proof(hostElement)
|
||||
}, 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.
|
||||
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
|
||||
*/
|
||||
getBlockParent(el) {
|
||||
for (; el && el !== this.editorElement; el = el.parentNode) {
|
||||
if (el.nodeType === Node.ELEMENT_NODE && BesEditor.isBlockElement(el))
|
||||
for (; el && el !== this.hostElement; el = el.parentNode) {
|
||||
if (el.nodeType === Node.ELEMENT_NODE && BesService.isBlockElement(el))
|
||||
return el
|
||||
}
|
||||
return el
|
||||
@ -400,8 +400,8 @@ class BesEditor {
|
||||
var start = range.startContainer
|
||||
var end = range.endContainer
|
||||
|
||||
let startAncestors = BesEditor.getParents(start)
|
||||
let endAncestors = BesEditor.getParents(end)
|
||||
let startAncestors = BesService.getParents(start)
|
||||
let endAncestors = BesService.getParents(end)
|
||||
let commonAncestor = null
|
||||
for (
|
||||
let i = 0;
|
||||
@ -424,7 +424,7 @@ class BesEditor {
|
||||
nodes.reverse()
|
||||
|
||||
// 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)
|
||||
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.
|
||||
*/
|
||||
static handleClick(event) {
|
||||
const edit = BesEditor.findParent(event.target)
|
||||
let editor = besEditors.find(e => e.editorElement === edit)
|
||||
if (!editor) return
|
||||
const target = editor.getBlockParent(event.target)
|
||||
editor.renderPopup(target, event.clientX, event.clientY)
|
||||
const hostElement = BesService.findParent(event.target)
|
||||
let service = besServices.find(e => e.hostElement === hostElement)
|
||||
if (!service) return
|
||||
const target = service.getBlockParent(event.target)
|
||||
service.renderPopup(target, event.clientX, event.clientY)
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
static handleScroll(event) {
|
||||
const edit = event.target
|
||||
let editor = besEditors.find(e => e.editorElement === edit)
|
||||
if (!editor) return
|
||||
editor.scrollPanel.style.top = -edit.scrollTop + 'px'
|
||||
editor.offsetTop = edit.scrollTop
|
||||
const hostElement = event.target
|
||||
let service = besServices.find(e => e.hostElement === hostElement)
|
||||
if (!service) return
|
||||
service.scrollPanel.style.top = -hostElement.scrollTop + 'px'
|
||||
service.offsetTop = hostElement.scrollTop
|
||||
setTimeout(() => {
|
||||
editor.repositionMistakes()
|
||||
service.repositionMistakes()
|
||||
}, 100)
|
||||
// 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
|
||||
* @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) {
|
||||
for (; el; el = el.parentNode) {
|
||||
if (besEditors.find(editor => editor.editorElement === el)) {
|
||||
if (besServices.find(service => service.hostElement === el)) {
|
||||
return el
|
||||
}
|
||||
}
|
||||
@ -495,14 +495,15 @@ class BesEditor {
|
||||
for (let m of matches) {
|
||||
if (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)
|
||||
m.match.replacements.forEach(replacement => {
|
||||
popup.appendReplacements(
|
||||
el,
|
||||
m,
|
||||
replacement.value,
|
||||
this
|
||||
this,
|
||||
this.hostElement.contentEditable !== 'false'
|
||||
)
|
||||
})
|
||||
popup.show(clientX, clientY)
|
||||
@ -521,16 +522,16 @@ class BesEditor {
|
||||
if (this.timer) clearTimeout(this.timer)
|
||||
this.abortController.abort()
|
||||
// const tags = this.getTagsAndText(el)
|
||||
if (!this.CKEditorInstance) {
|
||||
if (!this.ckEditorInstance) {
|
||||
match.range.deleteContents()
|
||||
match.range.insertNode(document.createTextNode(replacement))
|
||||
} else {
|
||||
const { CKEditorInstance } = this
|
||||
CKEditorInstance.model.change(writer => {
|
||||
const { ckEditorInstance } = this
|
||||
ckEditorInstance.model.change(writer => {
|
||||
const viewElement =
|
||||
CKEditorInstance.editing.view.domConverter.mapDomToView(el)
|
||||
ckEditorInstance.editing.view.domConverter.mapDomToView(el)
|
||||
const modelElement =
|
||||
CKEditorInstance.editing.mapper.toModelElement(viewElement)
|
||||
ckEditorInstance.editing.mapper.toModelElement(viewElement)
|
||||
if (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.
|
||||
@ -558,22 +559,8 @@ class BesEditor {
|
||||
this.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 ''
|
||||
// }
|
||||
// }
|
||||
|
||||
setCorrectionPanelSize(editor, correctionPanel, scrollPanel) {
|
||||
const styles = window.getComputedStyle(editor)
|
||||
setCorrectionPanelSize(hostElement, correctionPanel, scrollPanel) {
|
||||
const styles = window.getComputedStyle(hostElement)
|
||||
const totalWidth =
|
||||
parseFloat(styles.width) +
|
||||
parseFloat(styles.marginLeft) +
|
||||
@ -588,7 +575,7 @@ class BesEditor {
|
||||
parseFloat(styles.paddingBottom)
|
||||
correctionPanel.style.width = totalWidth + 'px'
|
||||
correctionPanel.style.height = totalHeight + 'px'
|
||||
scrollPanel.style.height = editor.scrollHeight + 'px'
|
||||
scrollPanel.style.height = hostElement.scrollHeight + 'px'
|
||||
}
|
||||
|
||||
static isPointInRect(x, y, rect) {
|
||||
@ -602,23 +589,22 @@ class BesEditor {
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
// Search and prepare all our editors found in the document.
|
||||
document
|
||||
.querySelectorAll('.bes-online-editor')
|
||||
.forEach(edit => BesEditor.register(edit))
|
||||
.querySelectorAll('.bes-service')
|
||||
.forEach(hostElement => BesService.register(hostElement))
|
||||
}
|
||||
|
||||
window.onresize = () => {
|
||||
besEditors.forEach(editor => {
|
||||
editor.setCorrectionPanelSize(
|
||||
editor.editorElement,
|
||||
editor.correctionPanel,
|
||||
editor.scrollPanel
|
||||
besServices.forEach(service => {
|
||||
service.setCorrectionPanelSize(
|
||||
service.hostElement,
|
||||
service.correctionPanel,
|
||||
service.scrollPanel
|
||||
)
|
||||
editor.children.forEach(child => {
|
||||
editor.clearMistakeMarkup(child.element)
|
||||
service.children.forEach(child => {
|
||||
service.clearMistakeMarkup(child.element)
|
||||
child.matches.forEach(match => {
|
||||
const { clientRects, highlights } = editor.addMistakeMarkup(match.range)
|
||||
const { clientRects, highlights } = service.addMistakeMarkup(match.range)
|
||||
match.rects = clientRects
|
||||
match.highlights = highlights
|
||||
})
|
||||
@ -738,14 +724,16 @@ class BesPopupEl extends HTMLElement {
|
||||
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 replacementBtn = document.createElement('button')
|
||||
replacementBtn.classList.add('bes-replacement-btn')
|
||||
replacementBtn.textContent = replacement
|
||||
replacementBtn.classList.add('bes-replacement')
|
||||
replacementBtn.addEventListener('click', () => {
|
||||
editor.replaceText(el, match, replacement)
|
||||
if (allowReplacements)
|
||||
service.replaceText(el, match, replacement)
|
||||
// TODO: Close popup
|
||||
})
|
||||
replacementDiv.appendChild(replacementBtn)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user