docs: update content

docs/src/demos/Examples/Savvy/SmilieReplacer.ts

@@ -0,0 +1,133 @@
+import { Extension } from '@tiptap/core'
+import { InputRule } from 'prosemirror-inputrules'
+
+export const SmilieReplacer = Extension.create({
+  name: 'smilieReplacer',
+
+  addInputRules() {
+    return [
+      new InputRule(/-___-/, '😑'),
+      new InputRule(/:'-\)/, '😂'),
+      new InputRule(/':-\)/, '😅'),
+      new InputRule(/':-D/, '😅'),
+      new InputRule(/>:-\)/, '😆'),
+      new InputRule(/-__-/, '😑'),
+      new InputRule(/':-\(/, '😓'),
+      new InputRule(/:'-\(/, '😢'),
+      new InputRule(/>:-\(/, '😠'),
+      new InputRule(/O:-\)/, '😇'),
+      new InputRule(/0:-3/, '😇'),
+      new InputRule(/0:-\)/, '😇'),
+      new InputRule(/0;\^\)/, '😇'),
+      new InputRule(/O;-\)/, '😇'),
+      new InputRule(/0;-\)/, '😇'),
+      new InputRule(/O:-3/, '😇'),
+      new InputRule(/:'\)/, '😂'),
+      new InputRule(/:-D/, '😃'),
+      new InputRule(/':\)/, '😅'),
+      new InputRule(/'=\)/, '😅'),
+      new InputRule(/':D/, '😅'),
+      new InputRule(/'=D/, '😅'),
+      new InputRule(/>:\)/, '😆'),
+      new InputRule(/>;\)/, '😆'),
+      new InputRule(/>=\)/, '😆'),
+      new InputRule(/;-\)/, '😉'),
+      new InputRule(/\*-\)/, '😉'),
+      new InputRule(/;-\]/, '😉'),
+      new InputRule(/;\^\)/, '😉'),
+      new InputRule(/B-\)/, '😎'),
+      new InputRule(/8-\)/, '😎'),
+      new InputRule(/B-D/, '😎'),
+      new InputRule(/8-D/, '😎'),
+      new InputRule(/:-\*/, '😘'),
+      new InputRule(/:\^\*/, '😘'),
+      new InputRule(/:-\)/, '🙂'),
+      new InputRule(/-_-/, '😑'),
+      new InputRule(/:-X/, '😶'),
+      new InputRule(/:-#/, '😶'),
+      new InputRule(/:-x/, '😶'),
+      new InputRule(/>.</, '😣'),
+      new InputRule(/:-O/, '😮'),
+      new InputRule(/:-o/, '😮'),
+      new InputRule(/O_O/, '😮'),
+      new InputRule(/>:O/, '😮'),
+      new InputRule(/:-P/, '😛'),
+      new InputRule(/:-p/, '😛'),
+      new InputRule(/:-Þ/, '😛'),
+      new InputRule(/:-þ/, '😛'),
+      new InputRule(/:-b/, '😛'),
+      new InputRule(/>:P/, '😜'),
+      new InputRule(/X-P/, '😜'),
+      new InputRule(/x-p/, '😜'),
+      new InputRule(/':\(/, '😓'),
+      new InputRule(/'=\(/, '😓'),
+      new InputRule(/>:\\/, '😕'),
+      new InputRule(/>:\//, '😕'),
+      new InputRule(/:-\//, '😕'),
+      new InputRule(/:-./, '😕'),
+      new InputRule(/>:\[/, '😞'),
+      new InputRule(/:-\(/, '😞'),
+      new InputRule(/:-\[/, '😞'),
+      new InputRule(/:'\(/, '😢'),
+      new InputRule(/;-\(/, '😢'),
+      new InputRule(/#-\)/, '😵'),
+      new InputRule(/%-\)/, '😵'),
+      new InputRule(/X-\)/, '😵'),
+      new InputRule(/>:\(/, '😠'),
+      new InputRule(/0:3/, '😇'),
+      new InputRule(/0:\)/, '😇'),
+      new InputRule(/O:\)/, '😇'),
+      new InputRule(/O=\)/, '😇'),
+      new InputRule(/O:3/, '😇'),
+      new InputRule(/<\/3/, '💔'),
+      new InputRule(/:D/, '😃'),
+      new InputRule(/=D/, '😃'),
+      new InputRule(/;\)/, '😉'),
+      new InputRule(/\*\)/, '😉'),
+      new InputRule(/;\]/, '😉'),
+      new InputRule(/;D/, '😉'),
+      new InputRule(/B\)/, '😎'),
+      new InputRule(/8\)/, '😎'),
+      new InputRule(/:\*/, '😘'),
+      new InputRule(/=\*/, '😘'),
+      new InputRule(/:\)/, '🙂'),
+      new InputRule(/=\]/, '🙂'),
+      new InputRule(/=\)/, '🙂'),
+      new InputRule(/:\]/, '🙂'),
+      new InputRule(/:X/, '😶'),
+      new InputRule(/:#/, '😶'),
+      new InputRule(/=X/, '😶'),
+      new InputRule(/=x/, '😶'),
+      new InputRule(/:x/, '😶'),
+      new InputRule(/=#/, '😶'),
+      new InputRule(/:O/, '😮'),
+      new InputRule(/:o/, '😮'),
+      new InputRule(/:P/, '😛'),
+      new InputRule(/=P/, '😛'),
+      new InputRule(/:p/, '😛'),
+      new InputRule(/=p/, '😛'),
+      new InputRule(/:Þ/, '😛'),
+      new InputRule(/:þ/, '😛'),
+      new InputRule(/:b/, '😛'),
+      new InputRule(/d:/, '😛'),
+      new InputRule(/:\//, '😕'),
+      new InputRule(/:\\/, '😕'),
+      new InputRule(/=\//, '😕'),
+      new InputRule(/=\\/, '😕'),
+      new InputRule(/:L/, '😕'),
+      new InputRule(/=L/, '😕'),
+      new InputRule(/:\(/, '😞'),
+      new InputRule(/:\[/, '😞'),
+      new InputRule(/=\(/, '😞'),
+      new InputRule(/;\(/, '😢'),
+      new InputRule(/D:/, '😨'),
+      new InputRule(/:\$/, '😳'),
+      new InputRule(/=\$/, '😳'),
+      new InputRule(/#\)/, '😵'),
+      new InputRule(/%\)/, '😵'),
+      new InputRule(/X\)/, '😵'),
+      new InputRule(/:@/, '😠'),
+      new InputRule(/<3/, '❤️'),
+    ]
+  },
+})

docs/src/demos/Examples/Savvy/index.vue

@@ -10,6 +10,7 @@ import Text from '@tiptap/extension-text'
 import Code from '@tiptap/extension-code'
 import Typography from '@tiptap/extension-typography'
 import { ColorHighlighter } from './ColorHighlighter'
+import { SmilieReplacer } from './SmilieReplacer'
 
 export default {
   components: {
@@ -31,6 +32,7 @@ export default {
         Code,
         Typography,
         ColorHighlighter,
+        SmilieReplacer,
       ],
       content: `
         <p>
@@ -41,8 +43,13 @@ export default {
         </p>
         <p></p>
         <p>
-          Also, you can teach the editor new things. For example to recognize hex colors and add a color swatch on the fly: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F
+          Or teach the editor new things. We added a custom extension to this example that replaces smilies like <code>:-)</code>, <code><3</code> or <code>>:P</code> with emojis. Try it out:
         </p>
+        <p></p>
+        <p>
+          You can also teach the editor new things. For example to recognize hex colors and add a color swatch on the fly: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F
+        </p>
+
       `,
     })
   },

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

@@ -23,3 +23,16 @@ yarn add @tiptap/extension-character-count
 
 ## Usage
 <demo name="Extensions/CharacterCount" />
+
+## Count words, emojis, letters …
+Want to count words instead? Or emojis? Or the letter *a*? Sure, no problem. You can access the `textContent` directly and count whatever you’re into.
+
+```js
+new Editor({
+  onUpdate({ editor }) {
+    const wordCount = editor.state.doc.textContent.split(' ').length
+
+    console.log(wordCount)
+  },
+})
+```