feat(CharacterCount): Add counter function to `CharacterCount` extension.

ho991217 commented 3 days ago

Changes Overview

Made CharacterCount's text and word counting logic to accessible from outside, which can solve issues with string containing emoji.

Implementation Approach

I've just added these two options

export interface CharacterCountOptions {
  /**
   * The text counter function to use. Defaults to a simple character count.
   * @default (text) => text.length
   * @example (text) => [...new Intl.Segmenter().segment(text)].length
   */
  textCounter: (text: string) => number
  /**
   * The word counter function to use. Defaults to a simple word count.
   * @default (text) => text.split(' ').filter(word => word !== '').length
   * @example (text) => text.split(/\s+/).filter(word => word !== '').length
   */
  wordCounter: (text: string) => number
}

and default options

      textCounter: text => text.length,
      wordCounter: text => text.split(' ').filter(word => word !== '').length,

Testing Done

Verification Steps

Additional Notes

Checklist

[x] I have created a changeset for this PR if necessary.
[x] My changes do not break the library.
[x] I have added tests where applicable.
[x] I have followed the project guidelines.
[x] I have fixed any lint issues.

Related Issues

changeset-bot[bot] commented 3 days ago

🦋 Changeset detected

Latest commit: 2d0a2551c8aa9acf003b31168e20ebd351460359

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 54 packages

| Name | Type | | -------------------------------------- | ----- | | @tiptap/extension-character-count | Minor | | @tiptap/core | Minor | | @tiptap/extension-blockquote | Minor | | @tiptap/extension-bold | Minor | | @tiptap/extension-bubble-menu | Minor | | @tiptap/extension-bullet-list | Minor | | @tiptap/extension-code-block-lowlight | Minor | | @tiptap/extension-code-block | Minor | | @tiptap/extension-code | Minor | | @tiptap/extension-collaboration-cursor | Minor | | @tiptap/extension-collaboration | Minor | | @tiptap/extension-color | Minor | | @tiptap/extension-document | Minor | | @tiptap/extension-dropcursor | Minor | | @tiptap/extension-floating-menu | Minor | | @tiptap/extension-focus | Minor | | @tiptap/extension-font-family | Minor | | @tiptap/extension-gapcursor | Minor | | @tiptap/extension-hard-break | Minor | | @tiptap/extension-heading | Minor | | @tiptap/extension-highlight | Minor | | @tiptap/extension-history | Minor | | @tiptap/extension-horizontal-rule | Minor | | @tiptap/extension-image | Minor | | @tiptap/extension-italic | Minor | | @tiptap/extension-link | Minor | | @tiptap/extension-list-item | Minor | | @tiptap/extension-list-keymap | Minor | | @tiptap/extension-mention | Minor | | @tiptap/extension-ordered-list | Minor | | @tiptap/extension-paragraph | Minor | | @tiptap/extension-placeholder | Minor | | @tiptap/extension-strike | Minor | | @tiptap/extension-subscript | Minor | | @tiptap/extension-superscript | Minor | | @tiptap/extension-table-cell | Minor | | @tiptap/extension-table-header | Minor | | @tiptap/extension-table-row | Minor | | @tiptap/extension-table | Minor | | @tiptap/extension-task-item | Minor | | @tiptap/extension-task-list | Minor | | @tiptap/extension-text-align | Minor | | @tiptap/extension-text-style | Minor | | @tiptap/extension-text | Minor | | @tiptap/extension-typography | Minor | | @tiptap/extension-underline | Minor | | @tiptap/extension-youtube | Minor | | @tiptap/html | Minor | | @tiptap/pm | Minor | | @tiptap/react | Minor | | @tiptap/starter-kit | Minor | | @tiptap/suggestion | Minor | | @tiptap/vue-2 | Minor | | @tiptap/vue-3 | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 3 days ago

Deploy Preview for tiptap-embed ready!

Name	Link
Latest commit	2d0a2551c8aa9acf003b31168e20ebd351460359
Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/66f6402bee59bb0008eb6d92
Deploy Preview	https://deploy-preview-5674--tiptap-embed.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

gethari commented 7 hours ago

just a thought !

how about adding a flag that can ignore/consider emoji as a character ? user's can decided between the flags ?

ueberdosis / tiptap