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

improve styling

Browse Source
This commit is contained in:
Philipp Kühn
2018-09-28 13:46:39 +02:00
parent f645b9edc0
commit a60a851fc4
3 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
examples/Components/Routes/Mentions/index.vue
View File

@@ -13,8 +13,8 @@
</editor> </editor>
<div class="suggestions"> <div class="suggestion-list" v-if="query || filteredUsers.length">
<div v-if="query && !filteredUsers.length"> <div class="suggestion-list__no-results" v-if="query && !filteredUsers.length">
No users found. No users found.
</div> </div>
<div <div
@@ -22,7 +22,7 @@
v-for="(user, index) in filteredUsers" v-for="(user, index) in filteredUsers"
:key="user.id" :key="user.id"
@click="selectUser(user)" @click="selectUser(user)"
class="suggestions__item" class="suggestion-list__item"
:class="{ 'is-selected': navigatedUserIndex === index }" :class="{ 'is-selected': navigatedUserIndex === index }"
> >
{{ user.name }} {{ user.name }}
@@ -158,13 +158,34 @@ export default {
font-weight: bold; font-weight: bold;
border-radius: 5px; border-radius: 5px;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
white-space: nowrap;
} }
.suggestions { .mention-suggestion {
color: rgba($color-black, 0.6);
}
.suggestion-list {
max-width: 30rem; max-width: 30rem;
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;
padding: 0.2rem;
border-radius: 5px;
border: 2px solid rgba($color-black, 0.1);
color: rgba($color-black, 0.6);
font-size: 0.8rem;
font-weight: bold;
&__no-results {
padding: 0.2rem 0.5rem;
}
&__item { &__item {
color: rgba($color-black, 0.6);
font-size: 0.8rem;
font-weight: bold;
border-radius: 5px;
padding: 0.2rem 0.5rem;
&.is-selected { &.is-selected {
background-color: rgba($color-black, 0.1); background-color: rgba($color-black, 0.1);
} }

2
packages/tiptap-extensions/src/nodes/Mention.js
View File

@@ -45,7 +45,7 @@ export default class MentionNode extends Node {
get plugins() { get plugins() {
return [ return [
suggestionsPlugin({ suggestionsPlugin({
debug: true, suggestionClass: 'mention-suggestion',
matcher: triggerCharacter('@', { matcher: triggerCharacter('@', {
allowSpaces: false, allowSpaces: false,
startOfLine: false, startOfLine: false,

4
packages/tiptap-extensions/src/plugins/suggestions.js
View File

@@ -66,7 +66,7 @@ export function triggerCharacter(char, { allowSpaces = false, startOfLine = fals
*/ */
export function suggestionsPlugin({ export function suggestionsPlugin({
matcher = triggerCharacter('#'), matcher = triggerCharacter('#'),
suggestionClass = 'ProseMirror-suggestion', suggestionClass = 'suggestion',
command = () => false, command = () => false,
items = [], items = [],
onEnter = () => false, onEnter = () => false,
@@ -81,7 +81,6 @@ export function suggestionsPlugin({
return searchItems return searchItems
.filter(item => JSON.stringify(item).toLowerCase().includes(query.toLowerCase())) .filter(item => JSON.stringify(item).toLowerCase().includes(query.toLowerCase()))
}, },
debug = false,
}) { }) {
return new Plugin({ return new Plugin({
key: new PluginKey('suggestions'), key: new PluginKey('suggestions'),
@@ -241,7 +240,6 @@ export function suggestionsPlugin({
nodeName: 'span', nodeName: 'span',
class: suggestionClass, class: suggestionClass,
'data-decoration-id': decorationId, 'data-decoration-id': decorationId,
style: debug ? 'background: rgba(0, 0, 255, 0.05); color: blue; border: 2px solid blue;' : null,
}), }),
]) ])
}, },