kbd.js

import { Mark, markInputRule, markPasteRule } from '@tiptap/core';

export const kbdInputRegex = /(?:^|\s)((?:<kbd>)((?:[^*]+))(?:<\/kbd>))$/;
export const kbdPasteRegex = /(?:^|\s)((?:<kbd>)((?:[^*]+))(?:<\/kbd>))/g;

export const Kbd = Mark.create({
  name: 'kbd',

  excludes: '_',
  
  inclusive: false,

  parseHTML() {
    return [
      {
        tag: 'kbd',
      },
    ];
  },

  renderHTML() {
    return ['kbd'];
  },

  addCommands() {
    return {
      setKbd:
        () =>
        ({ commands }) => {
          return commands.setMark('kbd');
        },
      toggleKbd:
        () =>
        ({ commands }) => {
          return commands.toggleMark('kbd');
        },
      unsetKbd:
        () =>
        ({ commands }) => {
          return commands.unsetMark('kbd');
        },
    };
  },

  addKeyboardShortcuts() {
    return {
      'Mod-^': () => this.editor.commands.toggleKbd(),
    };
  },

  addInputRules() {
    return [
      markInputRule({
        find: kbdInputRegex,
        type: this.type,
      }),
    ];
  },

  addPasteRules() {
    return [
      markPasteRule({
        find: kbdPasteRegex,
        type: this.type,
      }),
    ];
  },
});

export default Kbd;