add the character count extension

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

packages/extension-character-count/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-character-count
+[![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?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-character-count.svg)](https://www.npmjs.com/package/@tiptap/extension-character-count)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).

packages/extension-character-count/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@tiptap/extension-character-count",
+  "description": "font family extension for tiptap",
+  "version": "2.0.0-alpha.5",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-character-count.cjs.js",
+  "umd": "dist/tiptap-extension-character-count.umd.js",
+  "module": "dist/tiptap-extension-character-count.esm.js",
+  "unpkg": "dist/tiptap-extension-character-count.bundle.umd.min.js",
+  "types": "dist/packages/extension-character-count/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-alpha.6",
+    "@tiptap/extension-text-style": "^2.0.0-alpha.0"
+  }
+}

packages/extension-character-count/src/character-count.ts

@@ -1,20 +1,17 @@
-// @ts-nocheck
 import { Extension } from '@tiptap/core'
-import {
-  Plugin, PluginKey,
-} from 'prosemirror-state'
+import { Plugin, PluginKey } from 'prosemirror-state'
 
 export const pluginKey = new PluginKey('characterLimit')
 
-export interface CharacterLimitOptions {
-  limit: number,
+export interface CharacterCountOptions {
+  limit?: number,
 }
 
-export const CharacterLimit = Extension.create({
-  name: 'characterLimit',
+export const CharacterCount = Extension.create({
+  name: 'characterCount',
 
-  defaultOptions: <CharacterLimitOptions>{
-    limit: 100,
+  defaultOptions: <CharacterCountOptions>{
+    limit: 0,
   },
 
   addProseMirrorPlugins() {
@@ -28,7 +25,7 @@ export const CharacterLimit = Extension.create({
         appendTransaction: (transactions, oldState, newState) => {
           const length = newState.doc.content.size
 
-          if (length > options.limit) {
+          if (options.limit && length > options.limit) {
             return newState.tr.insertText('', options.limit + 1, length)
           }
         },
@@ -39,6 +36,6 @@ export const CharacterLimit = Extension.create({
 
 declare module '@tiptap/core' {
   interface AllExtensions {
-    CharacterLimit: typeof CharacterLimit,
+    CharacterCount: typeof CharacterCount,
   }
 }

packages/extension-character-count/src/index.ts

@@ -0,0 +1,5 @@
+import { CharacterCount } from './character-count'
+
+export * from './character-count'
+
+export default CharacterCount