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(/>., '๐ฃ'), + 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/, 'โค๏ธ'), + ] + }, +}) 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