github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-30 06:58:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix WYSIWYG link keyboard shortcut and add parent anchor tag detection (#12218)

Browse Source 
* Fix WYSIWYG link keyboard shortcut and add parent anchor tag detection

* Fix saving of link on parent anchor tag
This commit is contained in:
ian
2022-03-18 20:51:14 +08:00
committed by GitHub
parent c790f0355a
commit bc0f23f092
2 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
View File

@@ -416,6 +416,13 @@ export default defineComponent({
editor.ui.registry.addToggleButton('customMedia', mediaButton);
editor.ui.registry.addToggleButton('customLink', linkButton);
editor.ui.registry.addButton('customCode', sourceCodeButton);
editor.on('init', function () {
editor.shortcuts.remove('meta+k');
editor.addShortcut('meta+k', 'Insert Link', () => {
editor.ui.registry.getAll().buttons.customlink.onAction();
});
});
}
function setFocus(val: boolean) {

48
app/src/interfaces/input-rich-text-html/useLink.ts
View File

@@ -32,25 +32,26 @@ export default function useLink(editor: Ref<any>): UsableLink {
newTab: true,
};
const linkSelection = ref<LinkSelection>(defaultLinkSelection);
const linkNode = ref<HTMLLinkElement | null>(null);
const currentSelectionNode = ref<HTMLElement | null>(null);
const linkButton = {
icon: 'link',
tooltip: i18n.global.t('wysiwyg_options.link'),
onAction: (buttonApi: any) => {
onAction: () => {
if (editor.value.plugins.fullscreen.isFullscreen()) {
editor.value.execCommand('mceFullScreen');
}
linkDrawerOpen.value = true;
if (buttonApi.isActive()) {
const node = editor.value.selection.getNode() as HTMLLinkElement;
editor.value.selection.select(node);
if (linkNode.value) {
editor.value.selection.select(currentSelectionNode.value);
const url = node.getAttribute('href');
const title = node.getAttribute('title');
const displayText = node.innerText;
const target = node.getAttribute('target');
const url = linkNode.value.getAttribute('href');
const title = linkNode.value.getAttribute('title');
const displayText = linkNode.value.innerText;
const target = linkNode.value.getAttribute('target');
if (url === null || displayText === null) {
return;
@@ -69,7 +70,20 @@ export default function useLink(editor: Ref<any>): UsableLink {
},
onSetup: (buttonApi: any) => {
const onLinkNodeSelect = (eventApi: any) => {
buttonApi.setActive(eventApi.element.tagName === 'A');
let element = eventApi.element;
currentSelectionNode.value = eventApi.element;
linkNode.value = null;
while (element && element.id !== 'tinymce') {
if (element.tagName === 'A') {
linkNode.value = element;
break;
}
element = element.parentElement;
}
buttonApi.setActive(!!linkNode.value);
};
editor.value.on('NodeChange', onLinkNodeSelect);
@@ -98,7 +112,21 @@ export default function useLink(editor: Ref<any>): UsableLink {
link.displayText || link.url
}</a>`;
editor.value.selection.setContent(linkHtml);
// New anchor tag or current selection node is an anchor tag
if (!linkNode.value || currentSelectionNode.value === linkNode.value) {
editor.value.selection.setContent(linkHtml);
}
// Parent node is an anchor tag
else if (currentSelectionNode.value) {
currentSelectionNode.value.innerHTML = link.displayText || link.url;
linkNode.value.setAttribute('data-mce-href', link.url); // Required for tinymce to update changes
linkNode.value.setAttribute('href', link.url);
linkNode.value.setAttribute('title', link.title || '');
linkNode.value.setAttribute('target', link.newTab ? '_blank' : '_self');
editor.value.selection.select(linkNode.value);
editor.value.selection.setNode(linkNode.value);
}
closeLinkDrawer();
}
}