Skip to content

Commit

Permalink
refactor(link): Improve readability of clickHandler function
Browse files Browse the repository at this point in the history
Signed-off-by: Jonas <[email protected]>
  • Loading branch information
mejo- committed Jan 25, 2024
1 parent 3c31f6b commit 67b146b
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 9 deletions.
4 changes: 2 additions & 2 deletions src/marks/Link.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const Link = TipTapLink.extend({

addProseMirrorPlugins() {
const plugins = this.parent()
// remove original handle click
// remove upstream link click handle plugin
.filter(({ key }) => {
return !key.startsWith('handleClickLink')
})
Expand All @@ -78,7 +78,7 @@ const Link = TipTapLink.extend({
return plugins
}

// add custom click handler
// add custom click handle plugin
return [
...plugins,
clickHandler({
Expand Down
20 changes: 13 additions & 7 deletions src/plugins/link.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,39 @@ import { logger } from '../helpers/logger.js'

const clickHandler = ({ editor, type, onClick }) => {
return new Plugin({
key: new PluginKey('textHandleClickLink'),
props: {
key: new PluginKey('textLink'),
handleClick: (view, pos, event) => {
// Only regard left clicks without Ctrl
if (event.button !== 0 || event.ctrlKey) {
return false
}

// Derive link from position of click instead of using `getAttribute()` (like Tiptap handleClick does)
// In Firefox, `getAttribute()` doesn't work in read-only mode
const $clicked = view.state.doc.resolve(pos)
const link = $clicked.marks().find(m => m.type.name === type.name)
if (!link) {
return false
}

if (!link.attrs.href) {
logger.warn('Could not determine href of link.')
logger.debug('Link', { link })
return false
}
// We use custom onClick handler only for left clicks
if (event.button === 0 && !event.ctrlKey) {
event.stopPropagation()
return onClick?.(event, link.attrs)
}

event.stopPropagation()
return onClick?.(event, link.attrs)
},
},
})
}

const clickPreventer = () => {
return new Plugin({
key: new PluginKey('textAvoidClickLink'),
props: {
key: new PluginKey('textAvoidLinkClick'),
handleDOMEvents: {
click: (view, event) => {
if (!view.editable) {
Expand Down

0 comments on commit 67b146b

Please sign in to comment.