improve the character limit experiment

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

@@ -4,6 +4,8 @@ import {
   Plugin, PluginKey,
 } from 'prosemirror-state'
 
+export const pluginKey = new PluginKey('characterLimit')
+
 export interface CharacterLimitOptions {
   limit: number,
 }
@@ -21,35 +23,13 @@ export const CharacterLimit = Extension.create({
     return [
       new Plugin({
 
-        key: new PluginKey('characterLimit'),
-
-        // state: {
-        //   init(_, config) {
-        //     // console.log(_, config)
-        //     // const length = config.doc.content.size
-
-        //     // if (length > options.limit) {
-        //     //   console.log('too long', options.limit, config)
-
-        //     //   const transaction = config.tr.insertText('', options.limit + 1, length)
-
-        //     //   return config.apply(transaction)
-        //     // }
-        //   },
-        //   apply() {
-        //     //
-        //   },
-        // },
+        key: pluginKey,
 
         appendTransaction: (transactions, oldState, newState) => {
-          const oldLength = oldState.doc.content.size
-          const newLength = newState.doc.content.size
+          const length = newState.doc.content.size
 
-          if (newLength > options.limit && newLength > oldLength) {
-            const newTr = newState.tr
-            newTr.insertText('', options.limit + 1, newLength)
-
-            return newTr
+          if (length > options.limit) {
+            return newState.tr.insertText('', options.limit + 1, length)
           }
         },
       }),

docs/src/demos/Experiments/CharacterLimit/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <editor-content :editor="editor" />
-    <div>
+    <div class="character-limit">
       {{ characters }}/{{ limit }}
     </div>
   </div>
@@ -22,7 +22,7 @@ export default {
   data() {
     return {
       editor: null,
-      limit: 10,
+      limit: 280,
     }
   },
 
@@ -38,10 +38,7 @@ export default {
       ],
       content: `
         <p>
-          This is a radically reduced version of tiptap. It has only support for a document, paragraphs and text. That’s it. It’s probably too much for real minimalists though.
-        </p>
-        <p>
-          The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different. You’ll mostly likely want to add a paragraph though.
+          Let‘s make sure people can’t write more than 280 characters. I bet you could build one of the biggest social networks on that idea.
         </p>
       `,
     })
@@ -70,4 +67,9 @@ export default {
     margin-top: 0.75em;
   }
 }
+
+.character-limit {
+  margin-top: 1rem;
+  color: #adb5bd;
+}
 </style>