Opening the prompt for links in menuPlugin


#1

Hello,

I am using the menuPlugin provided in the website examples:

I want to add a command to add links as below, but it is missing the prompt:

{command: toggleMark(mySchema.marks.link), dom: toolboxButton(null, "link")},

How can I add the openPrompt call at this point?

Should I wrap toggleMark command in a call that first calls openPrompt? Should I create a new command? I tried to incorporate openPrompt as below, but it doesn’t work.

Any examples/directions would be appreciated.

export function toggleMarkLink(markType, attrs) {
  return function(state, dispatch, view) {
    let {empty, $cursor, ranges} = state.selection
    if ((empty && !$cursor) || !markApplies(state.doc, ranges, markType)) return false
    if (dispatch) {
    	openPrompt({
			title: "Create a link",
			fields: {
			href: new TextField({
				label: "Link target",
				required: true
			}),
			title: new TextField({label: "Title"})
			},
			callback(attrs) {
				toggleMark(markType, attrs)(view.state, view.dispatch)
				view.focus()
			}
		})
      if ($cursor) {
        if (markType.isInSet(state.storedMarks || $cursor.marks()))
          dispatch(state.tr.removeStoredMark(markType))
        else
          dispatch(state.tr.addStoredMark(markType.create(attrs)))
      } else {
        let has = false, tr = state.tr
        for (let i = 0; !has && i < ranges.length; i++) {
          let {$from, $to} = ranges[i]
          has = state.doc.rangeHasMark($from.pos, $to.pos, markType)
        }
        for (let i = 0; i < ranges.length; i++) {
          let {$from, $to} = ranges[i]
          if (has) tr.removeMark($from.pos, $to.pos, markType)
          else tr.addMark($from.pos, $to.pos, markType.create(attrs))
        }
        dispatch(tr.scrollIntoView())
      }
    }
    return true
  }
}

Thank you, Bahadir


#2

Yes, pretty much. You can see an example that might be relevant in the example-setup package here.