diff --git a/docs/src/demos/Examples/Savvy/SmilieReplacer.ts b/docs/src/demos/Examples/Savvy/SmilieReplacer.ts new file mode 100644 index 00000000..a17cb9cb --- /dev/null +++ b/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(/>.: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/, 'โค๏ธ'), + ] + }, +}) diff --git a/docs/src/demos/Examples/Savvy/index.vue b/docs/src/demos/Examples/Savvy/index.vue index c2774ce9..c0e1ecd0 100644 --- a/docs/src/demos/Examples/Savvy/index.vue +++ b/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: `

@@ -41,8 +43,13 @@ export default {

- 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 :-), <3 or >:P with emojis. Try it out:

+

+

+ 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 +

+ `, }) }, diff --git a/docs/src/docPages/api/extensions/character-count.md b/docs/src/docPages/api/extensions/character-count.md index 67baec25..b425a951 100644 --- a/docs/src/docPages/api/extensions/character-count.md +++ b/docs/src/docPages/api/extensions/character-count.md @@ -23,3 +23,16 @@ yarn add @tiptap/extension-character-count ## Usage + +## 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) + }, +}) +```