Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Desktop: Fixes #10199: Rich text editor: Include "ctrl-click to open" in link tooltips (#10547)

pull/9854/head
Henry Heino 2024-06-10 23:49:28 -07:00 committed by GitHub
parent 5730c1efcd
commit 940739ce12
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 88 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -291,6 +291,7 @@ packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/shouldPasteResources.
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/shouldPasteResources.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/types.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useLinkTooltips.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useScroll.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useWebViewApi.js
packages/app-desktop/gui/NoteEditor/NoteEditor.js

1
.gitignore vendored
View File

@ -270,6 +270,7 @@ packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/shouldPasteResources.
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/shouldPasteResources.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/types.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useLinkTooltips.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useScroll.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useWebViewApi.js
packages/app-desktop/gui/NoteEditor/NoteEditor.js

3
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@ -32,6 +32,7 @@ import markupRenderOptions from '../../utils/markupRenderOptions';
import { DropHandler } from '../../utils/useDropHandler';
import Logger from '@joplin/utils/Logger';
import useWebViewApi from './utils/useWebViewApi';
import useLinkTooltips from './utils/useLinkTooltips';
import { focus } from '@joplin/lib/utils/focusHandler';
const md5 = require('md5');
const { clipboard } = require('electron');
@ -363,6 +364,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
}, []);
useWebViewApi(editor);
const { resetModifiedTitles: resetLinkTooltips } = useLinkTooltips(editor);
useEffect(() => {
const theme = themeStyle(props.themeId);
@ -1048,6 +1050,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
nextOnChangeEventInfo.current = null;
resetLinkTooltips();
const contentMd = await prop_htmlToMarkdownRef.current(info.contentMarkupLanguage, info.editor.getContent(), info.contentOriginalCss);
lastOnChangeEventInfo.current.content = contentMd;

83
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useLinkTooltips.ts Normal file
View File

@ -0,0 +1,83 @@
import type { Editor } from 'tinymce';
import { useCallback, useEffect } from 'react';
import { _ } from '@joplin/lib/locale';
import shim from '@joplin/lib/shim';
const useLinkTooltips = (editor: Editor|null) => {
const resetModifiedTitles = useCallback(() => {
for (const element of editor.getDoc().querySelectorAll('a[data-joplin-original-title]')) {
element.setAttribute('title', element.getAttribute('data-joplin-original-title') ?? '');
element.removeAttribute('data-joplin-original-title');
}
}, [editor]);
useEffect(() => {
if (!editor) return () => {};
const onMouseOver = (event: MouseEvent) => {
let element = event.target as HTMLElement;
// mouseover events seem to only target the lowest applicable node in the DOM.
// If the user's mouse enters <a><strong></strong></a>, the mouseover event will
// target the <strong></strong>. As such, the parent nodes need to be checked:
let counter = 0;
while (element.tagName !== 'A' || !('href' in element)) {
element = element.parentElement;
counter++;
if (!element || counter > 4) {
return;
}
}
if (!element.hasAttribute('data-joplin-original-title')) {
element.setAttribute('data-joplin-original-title', element.title);
}
// Avoid showing internal HREFs for note links.
if (element.hasAttribute('data-resource-id') && !element.title) {
if (shim.isMac()) {
element.title = _('Cmd-click to open');
} else {
element.title = _('Ctrl-click to open');
}
} else {
if (shim.isMac()) {
element.title = _('Cmd-click to open: %s', element.title || element.href);
} else {
element.title = _('Ctrl-click to open: %s', element.title || element.href);
}
}
const onMouseLeave = () => {
resetModifiedTitles();
element.removeEventListener('mouseleave', onMouseLeave);
};
element.addEventListener('mouseleave', onMouseLeave);
};
const clearRootEventListeners = () => {
editor.getDoc().removeEventListener('mouseover', onMouseOver);
};
const setUpRootEventListeners = () => {
clearRootEventListeners();
editor.getDoc().addEventListener('mouseover', onMouseOver);
};
setUpRootEventListeners();
editor.on('SetContent', setUpRootEventListeners);
editor.on('keyup', resetModifiedTitles);
editor.on('click', resetModifiedTitles);
return () => {
resetModifiedTitles();
editor.off('SetContent', setUpRootEventListeners);
editor.off('keyup', resetModifiedTitles);
editor.off('click', resetModifiedTitles);
clearRootEventListeners();
};
}, [editor, resetModifiedTitles]);
return { resetModifiedTitles };
};
export default useLinkTooltips;