From a6008d8c9d70981dd8fc4c0a330928a5e2876ea4 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 19 Jan 2021 18:01:25 +0100
Subject: [PATCH] add character limit experiment

---
 .../Annotation/extension/AnnotationPlugin.ts  |  4 +-
 .../extension/CharacterLimit.ts               | 64 ++++++++++++++++
 .../CharacterLimit/extension/index.ts         |  4 +
 .../Experiments/CharacterLimit/index.vue      | 73 +++++++++++++++++++
 .../Experiments/Linter/extension/Linter.ts    |  4 +-
 docs/src/docPages/experiments.md              |  1 +
 .../docPages/experiments/character-limit.md   |  5 ++
 7 files changed, 151 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/demos/Experiments/CharacterLimit/extension/CharacterLimit.ts
 create mode 100644 docs/src/demos/Experiments/CharacterLimit/extension/index.ts
 create mode 100644 docs/src/demos/Experiments/CharacterLimit/index.vue
 create mode 100644 docs/src/docPages/experiments/character-limit.md

diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts
index 290b9cef..7542bc59 100644
--- a/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts
+++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationPlugin.ts
@@ -7,8 +7,8 @@ export const AnnotationPlugin = (options: any) => new Plugin({
   key: AnnotationPluginKey,
   state: {
     init: AnnotationState.init,
-    apply(transaction, prevState) {
-      return prevState.apply(transaction)
+    apply(transaction, oldState) {
+      return oldState.apply(transaction)
     },
   },
   props: {
diff --git a/docs/src/demos/Experiments/CharacterLimit/extension/CharacterLimit.ts b/docs/src/demos/Experiments/CharacterLimit/extension/CharacterLimit.ts
new file mode 100644
index 00000000..42ff0a88
--- /dev/null
+++ b/docs/src/demos/Experiments/CharacterLimit/extension/CharacterLimit.ts
@@ -0,0 +1,64 @@
+// @ts-nocheck
+import { Extension } from '@tiptap/core'
+import {
+  Plugin, PluginKey, EditorState, Transaction,
+} from 'prosemirror-state'
+
+export interface CharacterLimitOptions {
+  limit: number,
+}
+
+export const CharacterLimit = Extension.create({
+  name: 'characterLimit',
+
+  defaultOptions: <CharacterLimitOptions>{
+    limit: 100,
+  },
+
+  addProseMirrorPlugins() {
+    const { options } = this
+
+    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() {
+        //     //
+        //   },
+        // },
+
+        appendTransaction: (transactions, oldState, newState) => {
+          const oldLength = oldState.doc.content.size
+          const newLength = newState.doc.content.size
+
+          if (newLength > options.limit && newLength > oldLength) {
+            const newTr = newState.tr
+            newTr.insertText('', options.limit + 1, newLength)
+
+            return newTr
+          }
+        },
+      }),
+    ]
+  },
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    CharacterLimit: typeof CharacterLimit,
+  }
+}
diff --git a/docs/src/demos/Experiments/CharacterLimit/extension/index.ts b/docs/src/demos/Experiments/CharacterLimit/extension/index.ts
new file mode 100644
index 00000000..7770eb81
--- /dev/null
+++ b/docs/src/demos/Experiments/CharacterLimit/extension/index.ts
@@ -0,0 +1,4 @@
+import { CharacterLimit } from './CharacterLimit'
+
+export * from './CharacterLimit'
+export default CharacterLimit
diff --git a/docs/src/demos/Experiments/CharacterLimit/index.vue b/docs/src/demos/Experiments/CharacterLimit/index.vue
new file mode 100644
index 00000000..16a4822c
--- /dev/null
+++ b/docs/src/demos/Experiments/CharacterLimit/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+    <div>
+      {{ characters }}/{{ limit }}
+    </div>
+  </div>
+</template>
+
+<script>
+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'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+      limit: 10,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        CharacterLimit.configure({
+          limit: this.limit,
+        }),
+      ],
+      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.
+        </p>
+      `,
+    })
+  },
+
+  computed: {
+    characters() {
+      if (this.editor) {
+        return this.editor.state.doc.content.size - 2
+      }
+
+      return null
+    },
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>
diff --git a/docs/src/demos/Experiments/Linter/extension/Linter.ts b/docs/src/demos/Experiments/Linter/extension/Linter.ts
index 42fe777f..4307ed66 100644
--- a/docs/src/demos/Experiments/Linter/extension/Linter.ts
+++ b/docs/src/demos/Experiments/Linter/extension/Linter.ts
@@ -51,10 +51,10 @@ export const Linter = Extension.create({
           init(_, { doc }) {
             return runAllLinterPlugins(doc, plugins)
           },
-          apply(transaction, prevState) {
+          apply(transaction, oldState) {
             return transaction.docChanged
               ? runAllLinterPlugins(transaction.doc, plugins)
-              : prevState
+              : oldState
           },
         },
         props: {
diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md
index 34e2966d..262720b5 100644
--- a/docs/src/docPages/experiments.md
+++ b/docs/src/docPages/experiments.md
@@ -4,3 +4,4 @@ Congratulations! You’ve found our secret playground with a list of experiments
 * [Linter](/experiments/linter)
 * [Annotation](/experiments/annotation)
 * [Comments](/experiments/comments)
+* [CharacterLimit](/experiments/character-limit)
diff --git a/docs/src/docPages/experiments/character-limit.md b/docs/src/docPages/experiments/character-limit.md
new file mode 100644
index 00000000..fa6a209a
--- /dev/null
+++ b/docs/src/docPages/experiments/character-limit.md
@@ -0,0 +1,5 @@
+# CharacterLimit
+
+⚠️ Experiment
+
+<demo name="Experiments/CharacterLimit" />