@mirus/tiptap-editor
v3.0.3
Published
custom setup for the tiptap editor
Downloads
790
Readme
For Vue.js 3.0 use version 3.X. All active development happens here. For Vue 2 use version 2.X. This version will recieve no more updates. How convenient!
tiptap-editor
Vue component that contains our custom setup for the tiptap editor. Able to highlight phrases and give reasons/fixes to the warnings
npm i tiptap-editor
yarn add tiptap-editor
<template>
<TextEditor
:value.sync="localtext"
:warnings="warnings"
:showMenu="true"
:maxCharacterCount="200"
height="500px"
placeholder="write something will-ya!"
id="some_unique_id"
/>
</template
<script>
import tiptapEditor from './tiptap-editor.vue';
export default {
components: { tiptapEditor },
data() {
return {
warnings: [],
value: 'this is the initial value'
}
}
}
</script>
Props
value:
String
- the text to editplaceholder:
String
- the text to display when there is nothing in the editorwarnings:
[ Objects ]
- an array of text that should be warned aboutexample:
[ { value: 'the', message: 'did you mean...', options: ['too', 'pizza'], // optional }, { value: 'test text', message: 'cannot say that, sorry', overrideClass: 'underlined-green', // optional offset: 32, // optional length: 9, // optional }, ];
Optional
offset
andlength
values can be specified to highlight a specific instance of an error.- offset:
Number
- character distance from beginning of the text to the index of the error - length:
Number
- character length of the error
- offset:
maxCharacterCount:
Number
- Show a count of the current number of characters. If over the max the count will show redheight:
String
- height of the text editor, default is300px
showMenu:
Boolean
- if false, hide the format menuid:
String
- give the editor a unique id. Also adds aria tags to link the editor menu to the text area
Events
update:value - emitted whenever the core text value changes
new-character-count - the new internal character count of the value. This is useful since the synced value may have formatting, which internal is ignored when counting characters.
Setup
- clone this repo
cd
into the repo directory and runyarn install
- run
yarn serve
Available Scripts
yarn serve
- start the dev serveryarn build
- build for productionyarn preview
- locally preview production buildyarn format
- run Prettier to format codeyarn validate:format
- run Prettier with--check
flagyarn test
- run tests using vitest