extension/link: adds 'whenNotEditable' as option for openOnClick (#3312)

* checks whenNotEditable condition in clickHandler

* passes whenNotEditable option from to helper

* adds docs for whenNotEditable

* adds  to ClickHandlerOptions type

docs/api/marks/link.md

@@ -65,6 +65,14 @@ Link.configure({
 })
 ```
 
+If set to `'whenNotEditable'`, links will be opened on click only when editor is not editable.
+
+```js
+Link.configure({
+  openOnClick: 'whenNotEditable',
+})
+```
+
 ### linkOnPaste
 Adds a link to the current selection if the pasted content only contains an url.
 

packages/extension-link/src/helpers/clickHandler.ts

@@ -3,14 +3,18 @@ import { MarkType } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 
 type ClickHandlerOptions = {
-  type: MarkType
+  type: MarkType,
+  whenNotEditable: boolean,
 }
 
 export function clickHandler(options: ClickHandlerOptions): Plugin {
   return new Plugin({
     key: new PluginKey('handleClickLink'),
     props: {
       handleClick: (view, pos, event) => {
+        if (options.whenNotEditable && view.editable) {
+          return false
+        }
         if (event.button !== 0) {
           return false
         }

packages/extension-link/src/link.ts

@@ -27,7 +27,7 @@ export interface LinkOptions {
   /**
    * If enabled, links will be opened on click.
    */
-  openOnClick: boolean
+  openOnClick: boolean | 'whenNotEditable'
   /**
    * Adds a link to the current selection if the pasted content only contains an url.
    */
@@ -207,6 +207,7 @@ export const Link = Mark.create<LinkOptions>({
       plugins.push(
         clickHandler({
           type: this.type,
+          whenNotEditable: this.options.openOnClick === 'whenNotEditable',
         }),
       )
     }