Stop link typing

[SunnyCheung-cp]

can we stop the link by pressing the space?
https://github.com/Milkdown/milkdown/assets/105030733/912dca63-65d0-4962-9732-02c218fd354a

[Saul-Mirone]

It's easy to implement:

const stopLinkCommand = $command('stopLink', (ctx) => (options) => {
  return (state, dispatch) => {
    const marks = state.tr.storedMarks;
    const markType = linkSchema.type(ctx);
    const idx = marks.findIndex(mark => mark.type === markType);
    if (idx < 0) {
      return false;
    }
    dispatch(state.tr.removeStoredMark(markType))
    return true;
  }
});

const linkCustomKeymap = $useKeymap('linkCustomKeymap', {
  StopLink: {
    shortcuts: ['Space'],
    command: (ctx) => {
      const commands = ctx.get(commandsCtx)
      return () => commands.call(stopLinkCommand.key)
    },
  },
})

editor.use([stopLinkCommand, linkCustomKeymap].flat())

It's a rough implementation and you may need to polish it.

[SunnyCheung-cp]

@Saul-Mirone Thanks for your help,
“storedMarks” it seems to keep track of the current Mark type, but is always null

[SunnyCheung-cp]

There's no way to check if storedMarks is a link, so I just need to remove the mark type every time the spacebar is pressed, but does that cause other problems?
anyway it works fine on link

export const stopLinkCommand = $command('StopLink', (ctx) => (options) => {
  return (state, dispatch) => {
    const markType = linkSchema.type(ctx);
    dispatch(state.tr.removeStoredMark(markType))
    return false;
  }
});

iShot_2023-09-12_10.39.11.mp4

[Saul-Mirone]

Maybe you can use something like this to check the mark:

function hasMark(state, type) {
  if (!type) return false;
  const { from, $from, to, empty } = state.selection;
  if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
  return state.doc.rangeHasMark(from, to, type);
};

[SunnyCheung-cp]

Thanks again for your help
This can work, I still need to learn and use more

[SunnyCheung-cp]

@Saul-Mirone I have a quick question, what is the difference between return true | false in $command
My understanding is only need to use dispatch (state. Tr. RemoveStoredMark (markType));
Actually return true and it doesn't do anything

const hasMark = (state, type) => {
  if (!type) return false;
  const { from, $from, to, empty } = state.selection;
  if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
  return state.doc.rangeHasMark(from, to, type);
};

export const stopLinkCommand = $command('StopLink', (ctx) => () => {
  return (state, dispatch) => {
    const markType = linkSchema.type(ctx);
    const checkMark = hasMark(state, markType);
    if(checkMark){
      dispatch(state.tr.removeStoredMark(markType));
    }
    return false;
  }
});