add the character count extension

docs/src/demos/Experiments/CharacterLimit/extension/CharacterLimit.ts

@@ -1,44 +0,0 @@
-// @ts-nocheck
-import { Extension } from '@tiptap/core'
-import {
-  Plugin, PluginKey,
-} from 'prosemirror-state'
-
-export const pluginKey = new PluginKey('characterLimit')
-
-export interface CharacterLimitOptions {
-  limit: number,
-}
-
-export const CharacterLimit = Extension.create({
-  name: 'characterLimit',
-
-  defaultOptions: <CharacterLimitOptions>{
-    limit: 100,
-  },
-
-  addProseMirrorPlugins() {
-    const { options } = this
-
-    return [
-      new Plugin({
-
-        key: pluginKey,
-
-        appendTransaction: (transactions, oldState, newState) => {
-          const length = newState.doc.content.size
-
-          if (length > options.limit) {
-            return newState.tr.insertText('', options.limit + 1, length)
-          }
-        },
-      }),
-    ]
-  },
-})
-
-declare module '@tiptap/core' {
-  interface AllExtensions {
-    CharacterLimit: typeof CharacterLimit,
-  }
-}

docs/src/demos/Experiments/CharacterLimit/extension/index.ts

@@ -1,4 +0,0 @@
-import { CharacterLimit } from './CharacterLimit'
-
-export * from './CharacterLimit'
-export default CharacterLimit

docs/src/demos/Extensions/CharacterCount/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
     <editor-content :editor="editor" />
-    <div class="character-limit">
-      {{ characters }}/{{ limit }}
+
+    <div :class="{'character-limit': true, 'character-limit--warning': characters === limit}">
+      {{ characters }}/{{ limit }} characters
     </div>
   </div>
 </template>
@@ -12,7 +13,7 @@ import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import CharacterLimit from './extension'
+import CharacterCount from '@tiptap/extension-character-count'
 
 export default {
   components: {
@@ -32,7 +33,7 @@ export default {
         Document,
         Paragraph,
         Text,
-        CharacterLimit.configure({
+        CharacterCount.configure({
           limit: this.limit,
         }),
       ],
@@ -70,6 +71,10 @@ export default {
 
 .character-limit {
   margin-top: 1rem;
-  color: #adb5bd;
+  color: #868e96;
+
+  &--warning {
+    color: #f03e3e;
+  }
 }
 </style>

docs/src/docPages/api/extensions/character-count.md

@@ -0,0 +1,25 @@
+# CharacterCount
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-character-count.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-character-count)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-character-count.svg)](https://npmcharts.com/compare/@tiptap/extension-character-count?minimal=true)
+
+The `CharacterCount` extension limits the number of allowed character to a specific length. That’s it, that’s all.
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-character-count
+
+# with Yarn
+yarn add @tiptap/extension-character-count
+```
+
+## Settings
+| Option | Type     | Default | Description                                              |
+| ------ | -------- | ------- | -------------------------------------------------------- |
+| limit  | `Number` | `0`     | The maximum number of characters that should be allowed. |
+
+## Source code
+[packages/extension-character-count/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-character-count/)
+
+## Usage
+<demo name="Extensions/CharacterCount" highlight="" />

docs/src/docPages/experiments.md

@@ -9,4 +9,4 @@ Congratulations! You’ve found our secret playground with a list of experiments
 * [Commands](/experiments/commands)
 
 ## Waiting for approval
-* [CharacterLimit](/experiments/character-limit)
+–

docs/src/docPages/experiments/character-limit.md

@@ -1,5 +0,0 @@
-# CharacterLimit
-
-⚠️ Experiment
-
-<demo name="Experiments/CharacterLimit" />

docs/src/links.yaml

@@ -183,6 +183,9 @@
         # - title: Annotation
         #   link: /api/extensions/annotation
         #   type: draft
+        - title: CharacterCount
+          link: /api/extensions/character-count
+          type: new
         - title: Collaboration
           link: /api/extensions/collaboration
           type: pro