|
| 1 | +import LinkifyIt from 'linkify-it'; |
| 2 | +import { isMacOS } from 'utils/common/platform'; |
| 3 | +import { debounce } from 'lodash'; |
| 4 | +/** |
| 5 | + * Marks URLs in the CodeMirror editor with clickable link styling |
| 6 | + * @param {Object} editor - The CodeMirror editor instance |
| 7 | + * @param {Object} linkify - The LinkifyIt instance for URL detection |
| 8 | + * @param {string} linkClass - CSS class name for links |
| 9 | + * @param {string} linkHint - Tooltip text for links |
| 10 | + */ |
| 11 | +function markUrls(editor, linkify, linkClass, linkHint) { |
| 12 | + const doc = editor.getDoc(); |
| 13 | + const text = doc.getValue(); |
| 14 | + |
| 15 | + // Clear existing link marks |
| 16 | + editor.getAllMarks().forEach((mark) => { |
| 17 | + if (mark.className === linkClass) mark.clear(); |
| 18 | + }); |
| 19 | + |
| 20 | + // Find and mark new URLs |
| 21 | + const matches = linkify.match(text); |
| 22 | + matches?.forEach(({ index, lastIndex, url }) => { |
| 23 | + const from = editor.posFromIndex(index); |
| 24 | + const to = editor.posFromIndex(lastIndex); |
| 25 | + editor.markText(from, to, { |
| 26 | + className: linkClass, |
| 27 | + attributes: { |
| 28 | + 'data-url': url, |
| 29 | + 'title': linkHint |
| 30 | + } |
| 31 | + }); |
| 32 | + }); |
| 33 | +} |
| 34 | + |
| 35 | +/** |
| 36 | + * Handles mouse enter events on links to show hover effects |
| 37 | + * @param {Event} event - The mouse enter event |
| 38 | + * @param {string} linkClass - CSS class name for links |
| 39 | + * @param {string} linkHoverClass - CSS class name for hovered links |
| 40 | + * @param {Function} updateCmdCtrlClass - Function to update Cmd/Ctrl state |
| 41 | + */ |
| 42 | +function handleMouseEnter(event, linkClass, linkHoverClass, updateCmdCtrlClass) { |
| 43 | + const el = event.target; |
| 44 | + if (!el.classList.contains(linkClass)) return; |
| 45 | + |
| 46 | + updateCmdCtrlClass(event); |
| 47 | + |
| 48 | + el.classList.add(linkHoverClass); |
| 49 | + |
| 50 | + // Add hover effect to previous siblings that are also links |
| 51 | + let sibling = el.previousElementSibling; |
| 52 | + while (sibling && sibling.classList.contains(linkClass)) { |
| 53 | + sibling.classList.add(linkHoverClass); |
| 54 | + sibling = sibling.previousElementSibling; |
| 55 | + } |
| 56 | + |
| 57 | + // Add hover effect to next siblings that are also links |
| 58 | + sibling = el.nextElementSibling; |
| 59 | + while (sibling && sibling.classList.contains(linkClass)) { |
| 60 | + sibling.classList.add(linkHoverClass); |
| 61 | + sibling = sibling.nextElementSibling; |
| 62 | + } |
| 63 | +} |
| 64 | + |
| 65 | +/** |
| 66 | + * Handles mouse leave events on links to remove hover effects |
| 67 | + * @param {Event} event - The mouse leave event |
| 68 | + * @param {string} linkClass - CSS class name for links |
| 69 | + * @param {string} linkHoverClass - CSS class name for hovered links |
| 70 | + */ |
| 71 | +function handleMouseLeave(event, linkClass, linkHoverClass) { |
| 72 | + const el = event.target; |
| 73 | + el.classList.remove(linkHoverClass); |
| 74 | + |
| 75 | + // Remove hover effect from previous siblings that are also links |
| 76 | + let sibling = el.previousElementSibling; |
| 77 | + while (sibling && sibling.classList.contains(linkClass)) { |
| 78 | + sibling.classList.remove(linkHoverClass); |
| 79 | + sibling = sibling.previousElementSibling; |
| 80 | + } |
| 81 | + |
| 82 | + // Remove hover effect from next siblings that are also links |
| 83 | + sibling = el.nextElementSibling; |
| 84 | + while (sibling && sibling.classList.contains(linkClass)) { |
| 85 | + sibling.classList.remove(linkHoverClass); |
| 86 | + sibling = sibling.nextElementSibling; |
| 87 | + } |
| 88 | +} |
| 89 | + |
| 90 | +/** |
| 91 | + * Updates the CSS class on the editor wrapper based on Cmd/Ctrl key state |
| 92 | + * @param {Event} event - The keyboard event |
| 93 | + * @param {HTMLElement} editorWrapper - The editor wrapper element |
| 94 | + * @param {string} cmdCtrlClass - CSS class name for Cmd/Ctrl pressed state |
| 95 | + * @param {Function} isCmdOrCtrlPressed - Function to check if Cmd/Ctrl is pressed |
| 96 | + */ |
| 97 | +function updateCmdCtrlClass(event, editorWrapper, cmdCtrlClass, isCmdOrCtrlPressed) { |
| 98 | + if (isCmdOrCtrlPressed(event)) { |
| 99 | + editorWrapper.classList.add(cmdCtrlClass); |
| 100 | + } else { |
| 101 | + editorWrapper.classList.remove(cmdCtrlClass); |
| 102 | + } |
| 103 | +} |
| 104 | + |
| 105 | +/** |
| 106 | + * Handles click events on links to open them externally |
| 107 | + * @param {Event} event - The click event |
| 108 | + * @param {string} linkClass - CSS class name for links |
| 109 | + * @param {Function} isCmdOrCtrlPressed - Function to check if Cmd/Ctrl is pressed |
| 110 | + */ |
| 111 | +function handleClick(event, linkClass, isCmdOrCtrlPressed) { |
| 112 | + if (!isCmdOrCtrlPressed(event)) return; |
| 113 | + |
| 114 | + if (event.target.classList.contains(linkClass)) { |
| 115 | + event.preventDefault(); |
| 116 | + event.stopPropagation(); |
| 117 | + const url = event.target.getAttribute('data-url'); |
| 118 | + if (url) { |
| 119 | + window?.ipcRenderer?.openExternal(url); |
| 120 | + } |
| 121 | + } |
| 122 | +} |
| 123 | + |
| 124 | +/** |
| 125 | + * Sets up link awareness for a CodeMirror editor instance. |
| 126 | + * This enables automatic URL detection, styling, and click-to-open functionality. |
| 127 | + * @param {Object} editor - The CodeMirror editor instance |
| 128 | + * @param {Object} options - Configuration options (currently unused but reserved for future use) |
| 129 | + * @returns {void} |
| 130 | + */ |
| 131 | +function setupLinkAware(editor, options = {}) { |
| 132 | + if (!editor) { |
| 133 | + return; |
| 134 | + } |
| 135 | + |
| 136 | + // CSS class names and configuration |
| 137 | + const cmdCtrlClass = 'cmd-ctrl-pressed'; |
| 138 | + const linkClass = 'CodeMirror-link'; |
| 139 | + const linkHoverClass = 'hovered-link'; |
| 140 | + const linkHint = isMacOS() ? 'Hold Cmd and click to open link' : 'Hold Ctrl and click to open link'; |
| 141 | + |
| 142 | + // Helper function to check if Cmd/Ctrl is pressed |
| 143 | + const isCmdOrCtrlPressed = (event) => (isMacOS() ? event.metaKey : event.ctrlKey); |
| 144 | + |
| 145 | + // Initialize LinkifyIt for URL detection |
| 146 | + const linkify = new LinkifyIt(); |
| 147 | + const editorWrapper = editor.getWrapperElement(); |
| 148 | + |
| 149 | + // Create bound versions of event handlers with proper parameters |
| 150 | + const boundMarkUrls = () => markUrls(editor, linkify, linkClass, linkHint); |
| 151 | + const boundUpdateCmdCtrlClass = (event) => updateCmdCtrlClass(event, editorWrapper, cmdCtrlClass, isCmdOrCtrlPressed); |
| 152 | + const boundHandleClick = (event) => handleClick(event, linkClass, isCmdOrCtrlPressed); |
| 153 | + const boundHandleMouseEnter = (event) => handleMouseEnter(event, linkClass, linkHoverClass, boundUpdateCmdCtrlClass); |
| 154 | + const boundHandleMouseLeave = (event) => handleMouseLeave(event, linkClass, linkHoverClass); |
| 155 | + |
| 156 | + // Create debounced version of markUrls |
| 157 | + const debouncedMarkUrls = debounce(() => { |
| 158 | + requestAnimationFrame(boundMarkUrls); |
| 159 | + }, 150); |
| 160 | + |
| 161 | + // Initial URL marking |
| 162 | + boundMarkUrls(); |
| 163 | + |
| 164 | + // Set up event listeners |
| 165 | + editor.on('changes', debouncedMarkUrls); |
| 166 | + window.addEventListener('keydown', boundUpdateCmdCtrlClass); |
| 167 | + window.addEventListener('keyup', boundUpdateCmdCtrlClass); |
| 168 | + editorWrapper.addEventListener('click', boundHandleClick); |
| 169 | + editorWrapper.addEventListener('mouseover', boundHandleMouseEnter); |
| 170 | + editorWrapper.addEventListener('mouseout', boundHandleMouseLeave); |
| 171 | + |
| 172 | + // Cleanup function to remove all event listeners |
| 173 | + editor._destroyLinkAware = () => { |
| 174 | + editor.off('changes', debouncedMarkUrls); |
| 175 | + window.removeEventListener('keydown', boundUpdateCmdCtrlClass); |
| 176 | + window.removeEventListener('keyup', boundUpdateCmdCtrlClass); |
| 177 | + editorWrapper.removeEventListener('click', boundHandleClick); |
| 178 | + editorWrapper.removeEventListener('mouseover', boundHandleMouseEnter); |
| 179 | + editorWrapper.removeEventListener('mouseout', boundHandleMouseLeave); |
| 180 | + }; |
| 181 | +} |
| 182 | + |
| 183 | +export { setupLinkAware }; |
0 commit comments