editor: Open link toolbar automatically when editable and link in selection

This commit is contained in:
Tom Moor
2022-02-11 18:34:56 -08:00
parent 2dd86bbc2b
commit 4255dd24da
2 changed files with 12 additions and 36 deletions

View File

@@ -8,13 +8,7 @@ import {
Node,
Mark as ProsemirrorMark,
} from "prosemirror-model";
import {
Transaction,
EditorState,
Plugin,
TextSelection,
} from "prosemirror-state";
import getMarkRange from "../queries/getMarkRange";
import { Transaction, EditorState, Plugin } from "prosemirror-state";
import Mark from "./Mark";
const LINK_INPUT_REGEX = /\[([^[]+)]\((\S+)\)$/;
@@ -135,28 +129,9 @@ export default class Link extends Mark {
return false;
}
// clicking a link while editing should select the entire link
// which will trigger the link editing toolbar to be displayed
if (view.editable) {
const { state, dispatch } = view;
const range = getMarkRange(
state.selection.$from,
state.schema.marks.link
);
if (range) {
dispatch(
state.tr.setSelection(
new TextSelection(
state.doc.resolve(range.from),
state.doc.resolve(range.to)
)
)
);
}
// clicking while read-only will navigate directly to the link
} else {
// clicking a link while editing should show the link toolbar,
// clicking in read-only will navigate
if (!view.editable) {
const href =
event.target.href ||
(event.target.parentNode instanceof HTMLAnchorElement
@@ -175,9 +150,10 @@ export default class Link extends Mark {
event.preventDefault();
this.options.onClickLink(href, event);
}
return true;
}
return true;
return false;
},
},
},