Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Enhancement: Clicking a PDF annotation link now causes an immediate j…
…ump to the annotation in markdown-source-view (#258) * Clicking a PDF annotation link now causes an immediate jump to the annotation in markdown-source-view
- Loading branch information
1 parent
c5cc31a
commit b405940
Showing
2 changed files
with
224 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| import { | ||
| MarkdownView, | ||
| TFile, | ||
| parseLinktext | ||
| } from 'obsidian'; | ||
| import AnnotatorPlugin from 'main'; | ||
|
|
||
| export default class SourceViewObserver { | ||
| private plugin: AnnotatorPlugin; | ||
| private tmpLinkInfos: {linkText: string; count: number}[] = []; | ||
| private tmpTargetIndex = -1; | ||
| private targetClassNameSet: Set<string> = new Set(); | ||
| private observer: MutationObserver; | ||
|
|
||
| constructor(plugin: AnnotatorPlugin) { | ||
| this.plugin = plugin; | ||
| this.initClassNameSet(); | ||
| this.initObserver(); | ||
| } | ||
|
|
||
| initClassNameSet() { | ||
| const prefixObservedClassName = [ | ||
| 'cm-highlight ', 'cm-em ', | ||
| 'cm-header cm-header-1 ', 'cm-header cm-header-2 ', 'cm-header cm-header-3 ', | ||
| 'cm-header cm-header-4 ', 'cm-header cm-header-5 ', 'cm-header cm-header-6 ' | ||
| ]; | ||
| const suffixObservedClassName = [ | ||
| '', | ||
| ' cm-list-1', ' cm-list-2', ' cm-list-3', | ||
| ' cm-quote cm-quote-1', ' cm-strong' | ||
| ]; | ||
| const baseTargetClassName = 'cm-hmd-internal-link cm-link-alias'; | ||
| for (const className of prefixObservedClassName) { | ||
| this.targetClassNameSet.add(className + baseTargetClassName); | ||
| } | ||
| for (const className of suffixObservedClassName) { | ||
| this.targetClassNameSet.add(baseTargetClassName + className); | ||
| } | ||
| } | ||
|
|
||
| initObserver() { | ||
| const activeLeaf = this.plugin.app.workspace.getActiveViewOfType(MarkdownView); | ||
| if (!activeLeaf) return; | ||
|
|
||
| const that = this; | ||
| const observedClassName = 'cm-hmd-internal-link cm-link-has-alias'; | ||
| const targetClassName = 'cm-hmd-internal-link cm-link-alias'; | ||
| const filePath = this.plugin.app.workspace.getActiveFile().path; | ||
| const observeCallback = function(mutations: MutationRecord[]) { | ||
| that.plugin.log('-----------------------------'); | ||
| for (const mutation of mutations) { | ||
| if (mutation.type == 'childList') { | ||
| for (const addedNode of mutation.addedNodes) { | ||
| const addedElement = addedNode as Element; | ||
| if (addedElement.className && addedElement.className.indexOf(observedClassName) >= 0) { | ||
| that.linkOnFocus(addedElement); | ||
| } | ||
| } | ||
| for (const removedNode of mutation.removedNodes) { | ||
| const removedElement = removedNode as Element; | ||
| if (removedElement.className && removedElement.className.indexOf(observedClassName) >= 0) { | ||
| const removedLinkText = removedElement.textContent; | ||
| that.plugin.log('remove'); | ||
| that.linkOnBlur(mutation.target as Element, removedLinkText, filePath, targetClassName); | ||
| } | ||
| } | ||
| } else if (mutation.type == 'attributes') { | ||
| if (mutation.oldValue && mutation.oldValue.indexOf(observedClassName) >= 0) { | ||
| that.plugin.log('attri'); | ||
| that.linkOnBlur(mutation.target.parentNode as Element, '', filePath, targetClassName); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| this.observer = new MutationObserver(observeCallback); | ||
| } | ||
|
|
||
| getObserver(): MutationObserver { | ||
| return this.observer; | ||
| } | ||
|
|
||
| setObserver(observer: MutationObserver) { | ||
| this.observer = observer; | ||
| } | ||
|
|
||
| watch() { | ||
| const activeLeaf = this.plugin.app.workspace.getActiveViewOfType(MarkdownView); | ||
| if (!activeLeaf) return; | ||
|
|
||
| const regex2Find = /(?<=[\[]{2})[^\]]*(?=[\]]{2})/gm; | ||
| const filePath = this.plugin.app.workspace.getActiveFile().path; | ||
| const view = activeLeaf.leaf.view.containerEl; | ||
| const editor = activeLeaf.editor; | ||
| const oldText = editor.getValue(); | ||
| const linkHref = oldText.match(regex2Find); | ||
| if(!linkHref || linkHref.length == 0) return; | ||
|
|
||
| const tempSourceLinks = view.getElementsByClassName('cm-hmd-internal-link cm-link-alias') as HTMLCollectionOf<HTMLAnchorElement>; | ||
| const length = tempSourceLinks.length; | ||
| const sourceLinks = []; | ||
| if (length > 1) { | ||
| let prev = tempSourceLinks[0]; | ||
| for (let i = 1; i < length; i++) { | ||
| if (tempSourceLinks[i - 1].nextElementSibling != tempSourceLinks[i]) { | ||
| sourceLinks.push(prev); | ||
| prev = tempSourceLinks[i]; | ||
| if (i == length - 1) { | ||
| sourceLinks.push(tempSourceLinks[i]); | ||
| } | ||
| } else if (i == length - 1) { | ||
| sourceLinks.push(prev); | ||
| } | ||
| } | ||
| } else { | ||
| sourceLinks.push(tempSourceLinks[0]); | ||
| } | ||
|
|
||
| const observeConfig = { | ||
| attributeFilter: ['class'], | ||
| attributes: true, | ||
| characterData: true, | ||
| characterDataOldValue: true, | ||
| childList: true, | ||
| attributeOldValue: true, | ||
| subtree: true | ||
| }; | ||
|
|
||
| for (let i = 0; i < sourceLinks.length; i++) { | ||
| const tempLink = linkHref[i]; | ||
| if (typeof tempLink != 'string') continue; | ||
| const parsedLink = parseLinktext(tempLink.split('|')[0]); | ||
| const annotationid = parsedLink.subpath.startsWith('#^') ? parsedLink.subpath.substring(2) : null; | ||
| const file: TFile | null = this.plugin.app.metadataCache.getFirstLinkpathDest(parsedLink.path, filePath); | ||
|
|
||
| if (this.plugin.isAnnotationFile(file)) { | ||
| this.addClickListener(sourceLinks[i], annotationid, file, false); | ||
| this.observer.observe(sourceLinks[i].parentNode, observeConfig); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| addClickListener(element: HTMLAnchorElement, annotationid: string, file: TFile, isReadingView: boolean) { | ||
| const childs = element.children; | ||
| if (isReadingView || childs && childs.length == 1) { | ||
| element.addEventListener('click', ev => { | ||
| this.plugin.log(annotationid); | ||
| ev.preventDefault(); | ||
| ev.stopPropagation(); | ||
| ev.stopImmediatePropagation(); | ||
| const inNewPane = ev.metaKey || ev.ctrlKey || ev.button == 1; | ||
| this.plugin.openAnnotationTarget(file, inNewPane, annotationid); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| linkOnFocus(element: Element) { | ||
| let count = 0; | ||
| const linkText = element.textContent; | ||
| while(element.className && element.className.indexOf('cm-formatting-link cm-formatting-link-end') == -1) { | ||
| if (this.targetClassNameSet.has(element.className)) count++; | ||
| element = element.nextElementSibling; | ||
| } | ||
| this.tmpLinkInfos.push({linkText: linkText, count: count}); | ||
| } | ||
|
|
||
| linkOnBlur(node: Element, rawLinkText: string, filePath: string, className: string) { | ||
| const linkIndex = this.tmpTargetIndex + 1; | ||
| if (this.tmpLinkInfos.length == 0) return; | ||
| const linkInfo = this.tmpLinkInfos[0]; | ||
|
|
||
| const link = parseLinktext(rawLinkText == '' ? linkInfo.linkText : rawLinkText); | ||
| const annotationid = link.subpath.startsWith('#^') ? link.subpath.substring(2) : null; | ||
| const file: TFile | null = this.plugin.app.metadataCache.getFirstLinkpathDest(link.path, filePath); | ||
|
|
||
| const targets = node.getElementsByClassName(className) as HTMLCollectionOf<HTMLAnchorElement>; | ||
| const uniqueTarget = targets[linkIndex]; | ||
| this.plugin.log( | ||
| 'linkText: ' + link.path + | ||
| ' tarIndex: ' + this.tmpTargetIndex + | ||
| ' linkIndex: ' + linkIndex + | ||
| ' size: ' + this.tmpLinkInfos.length | ||
| ); | ||
| this.plugin.log(uniqueTarget); | ||
|
|
||
| this.tmpTargetIndex += linkInfo.count; | ||
|
|
||
| this.addClickListener(uniqueTarget, annotationid, file, false); | ||
|
|
||
| this.tmpLinkInfos.splice(0, 1); | ||
| if (this.tmpLinkInfos.length == 0) this.resetTmpLinkInfo(); | ||
| } | ||
|
|
||
| resetTmpLinkInfo() { | ||
| this.tmpTargetIndex = -1; | ||
| this.tmpLinkInfos.length = 0; | ||
| } | ||
| } |