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>