Add built-in support for converting "->" to "→"

[lamtuanamc]

Hi,

I would like to suggest adding built-in support for automatically converting "->" to "→" when typing.

This feature would be very useful for many users who often use arrow symbols in their texts.

Thanks for considering this request!

[matthewlipski]

There's not a good way to do this directly from the BlockNote API atm unfortunately, but should be quite easy with a TipTap extension. You can then pass your extension to the _tiptapOptions editor option:

const editor = useCreateBlockNote({
  _tiptapOptions: {
    extensions: [extension];
  }
});

[lamtuanamc]

ok thanks, i got it

import { Extension } from '@tiptap/core'

const ArrowConversion = Extension.create({
  name: 'arrowConversion',

  addInputRules() {
    return [
      {
        find: /->/g,
        handler: ({ state, range }) => {
          const { from, to } = range
          const tr = state.tr.replaceWith(from, to, state.schema.text('→'))
          return tr
        },
      },
    ]
  },
})

export default ArrowConversion

[YousefED]

I think this would be a great example on how to use tiptap extensions with blocknote.

/bounty 10

[algora-pbc[bot]]

## 💎 $10 bounty • BlockNote

💎 $10 bounty • divyasingh0803

Steps to solve:

1. Start working: Comment /attempt #915 with your implementation plan
2. Submit work: Create a pull request including /claim #915 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to TypeCellOS/BlockNote!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🟢 @kom-senapati	Jul 30, 2024, 3:11:22 AM	#971

[kom-senapati]

/attempt #915

Options

• Cancel my attempt

[algora-pbc[bot]]

💡 @kom-senapati submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[lamtuanamc]

ok thanks, i got it

import { Extension } from '@tiptap/core'

const ArrowConversion = Extension.create({
  name: 'arrowConversion',

  addInputRules() {
    return [
      {
        find: /->/g,
        handler: ({ state, range }) => {
          const { from, to } = range
          const tr = state.tr.replaceWith(from, to, state.schema.text('→'))
          return tr
        },
      },
    ]
  },
})

export default ArrowConversion

I noticed that you used this code in the pull request. However, I encountered some editing errors when using it, specifically when adding spaces between words or inserting special characters. If you could create a pull request with an example of how to use the Tiptap extension, please ensure that the logic is thoroughly checked.

@kom-senapati

[kom-senapati]

Can you tell me what editing errors you got?

[kom-senapati]

The extension is added to Blocknote, it works in playground.

[lamtuanamc]

I used the code snippet above in _tiptapOptions and encountered an error when adding a space to a word, or when modifying a character. It gets replaced by an arrow. When I tested it, there was no issue, but the tester reported this error when it was moved to production.

https://github.com/user-attachments/assets/496b229d-c50f-40e8-8278-ba842ba613e2

https://github.com/user-attachments/assets/0fc83cd7-7c24-4d35-952d-a47259260e8b

[kom-senapati]

No such issues for me I just tried out

30_7_2024, 6_51_21 pm - Screen - Untitled video.webm

[algora-pbc[bot]]

🎉🎈 @kom-senapati has been awarded $10! 🎈🎊

• Share on socials
• Give feedback