ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: update content

Browse Source
This commit is contained in:
Hans Pagel
2021-03-30 21:17:10 +02:00
parent 8fcfaef4f1
commit 69ba3e3c97
3 changed files with 154 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
docs/src/demos/Examples/Savvy/SmilieReplacer.ts Normal file
View File

@@ -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/, '❤️'),
]
},
})

9
docs/src/demos/Examples/Savvy/index.vue
View File

@@ -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>
`,
})
},

13
docs/src/docPages/api/extensions/character-count.md
View File

@@ -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)
},
})
```