diff --git a/src/ckeditor/ContextedPlugin.ts b/src/ckeditor/ContextedPlugin.ts index 3c25e3f..6eabc76 100644 --- a/src/ckeditor/ContextedPlugin.ts +++ b/src/ckeditor/ContextedPlugin.ts @@ -9,9 +9,19 @@ export default class ContextedLinkEditing extends Plugin { this._defineConverters() // ADDED const twoStepCaretMovementPlugin = this.editor.plugins.get(TwoStepCaretMovement) twoStepCaretMovementPlugin.registerAttribute('contextedLink') - inlineHighlight(this.editor, 'contextedLink', 'a', HIGHLIGHT_CLASS) } + afterInit() { + // const editor = this.editor + // editor.model.document.on('change', (eventInfo, batch) => { + // const model = editor.model + // const selection = model.document.selection + // const collapsed = selection.isCollapsed // should be true + // if (!collapsed) return + // console.log(eventInfo, batch) + // }) + this._addAutocomplete() + } _defineSchema() { // ADDED const schema = this.editor.model.schema @@ -49,4 +59,60 @@ export default class ContextedLinkEditing extends Plugin { converterPriority: 'high', }) } + _addAutocomplete() { + // Copied from: node_modules/@ckeditor/ckeditor5-autoformat/src/inlineautoformatediting.js + const editor = this.editor + editor.model.document.on('change:data', (_, batch) => { + if (batch.isUndo || !batch.isLocal) { + return + } + const model = editor.model + const selection = model.document.selection + // Do nothing if selection is not collapsed. + if (!selection.isCollapsed) return + const changes = Array.from(model.document.differ.getChanges()) + const entry = changes[0] + // Typing is represented by only a single change. + if ( + changes.length != 1 || + entry.type !== 'insert' || + entry.name != '$text' || + entry.length != 1 + ) { + return + } + const focus = selection.focus + const block = focus?.parent + if (!block || !focus) return + const { text, range } = getTextAfterCode( + model.createRange(model.createPositionAt(block, 0), focus), + model + ) + console.log(text, range) + }) + } +} + +// function testOutputToRanges(start: any, arrays: any[], model: any) { +// return arrays +// .filter((array) => array[0] !== undefined && array[1] !== undefined) +// .map((array) => { +// return model.createRange( +// start.getShiftedBy(array[0]), +// start.getShiftedBy(array[1]) +// ) +// }) +// } + +function getTextAfterCode(range: any, model: any) { + let start = range.start + const text = Array.from(range.getItems()).reduce((rangeText: any, node: any) => { + // Trim text to a last occurrence of an inline element and update range start. + if (!(node.is('$text') || node.is('$textProxy')) || node.getAttribute('code')) { + start = model.createPositionAfter(node) + return '' + } + return rangeText + node.data + }, '') + return { text, range: model.createRange(start, range.end) } }