viewof editor = {
const root = html`<div />`
const editor = new tiptap.Editor({
element: root,
extensions: [tiptap.StarterKit],
})
editor.commands.setContent(tiptapStarterContent)
root.value = editor
return root
}
editor.getJSON()
nw(source_text, target_text, mispen, gappen, skwpen)
updateTipTap(editor, 2, "Simple. I will fly airline. Lufthansa is a German airline.")
updateTipTap = function(editor, paragraphIndex, targetTextStr){
let textTemplate = Object({
type: "text",
text: ""
})
let textTemplateBold = Object({
type: "text",
text: "",
marks: [{"type": "bold"}]
})
let delay = 200;
let totalTextObject = editor.getJSON()
let currentTextStr = totalTextObject.content[paragraphIndex].content.map(obj => obj.text).join("");
let nwResult = nw(currentTextStr, targetTextStr, mispen, gappen, skwpen)
let tmpTextObjArray = nwResult.aout.map(word => {
const textObj = { ...textTemplate };
textObj.text = word;
return textObj;
});
updateEditor(editor, tmpTextObjArray, paragraphIndex) // Clear formatting
let i = 0;
const iterations = nwResult.summary.length;
loopIteration(i, iterations);
return totalTextObject
}
loopIteration = function(i, iterations) {
if (i < iterations) {
const operation = nwResult.summary[i]
switch (operation) {
case "=":
break;
case "^":
//insert at i
if (nwResult.aout[i] === '^') {
tmpTextObjArray[i].text = nwResult.bout[i]
tmpTextObjArray[i].marks = [{"type": "bold"}] // Format new words
}
// remove at i
else {
tmpTextObjArray[i].text = "^"
}
break;
case "!":
//insert at n
tmpTextObjArray[i].text = nwResult.bout[i]
tmpTextObjArray[i].marks = [{"type": "bold"}] // Format new words
break;
}
updateEditor(editor, tmpTextObjArray, paragraphIndex)
console.log(`Iteration ${i + 1}`, tmpTextObjArray, nwResult.summary);
i = findNext(nwResult.summary, i) // Skip if necessary
if (i < iterations) {
setTimeout(() => loopIteration, delay);
}
}
}
updateEditor = function(editor, tmpTextObjArray, paragraphIndex) {
let totalTextObject = editor.getJSON()
const filteredTmpTextObjArray = tmpTextObjArray.filter(obj => obj.text?.trim() !== "^");
const filteredTmpTextObjArraySpaces = filteredTmpTextObjArray.map((obj, index) => ({
...obj,
text: index < filteredTmpTextObjArray.length - 1 ? obj.text + " " : obj.text
}));
totalTextObject.content[paragraphIndex].content = filteredTmpTextObjArraySpaces
editor.commands.setContent(totalTextObject)
}
findNext = function(arr, i){
for (let j = i + 1; j < arr.length; j++) {
if (arr[j] !== "=") {
return j;
}
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
