add some examples
This commit is contained in:
Philipp Kühn
20
examples/Components/App/index.vue
Normal file
20
examples/Components/App/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="page" spellcheck="false">
|
||||
<navigation />
|
||||
<div class="page__content">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navigation from 'Components/Navigation'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Navigation,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" src="./style.scss"></style>
|
||||
171
examples/Components/App/style.scss
Normal file
171
examples/Components/App/style.scss
Normal file
@@ -0,0 +1,171 @@
|
||||
@import "~variables";
|
||||
|
||||
.page {
|
||||
|
||||
&__content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.editor {
|
||||
position: relative;
|
||||
max-width: 30rem;
|
||||
margin: 0 auto 5rem auto;
|
||||
|
||||
&__content {
|
||||
pre {
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 5px;
|
||||
background: $color-black;
|
||||
color: $color-white;
|
||||
font-size: 0.8rem;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menububble {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 20;
|
||||
background: $color-black;
|
||||
border-radius: 5px;
|
||||
padding: 0.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
transform: translateX(-50%);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s, visibility 0.2s;
|
||||
|
||||
&__button {
|
||||
display: inline-flex;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $color-white;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin-right: 0.2rem;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($color-white, 0.1);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: rgba($color-white, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__input {
|
||||
font: inherit;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.menubar {
|
||||
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
|
||||
|
||||
&.is-focused {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
&__button {
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $color-black;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin-right: 0.2rem;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($color-black, 0.05);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: rgba($color-black, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mention {
|
||||
background: rgba($color-black, 0.1);
|
||||
color: rgba($color-black, 0.6);
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
ul[data-type="todo_list"] {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li[data-type="todo_item"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.todo-checkbox {
|
||||
border: 2px solid $color-black;
|
||||
height: 0.9em;
|
||||
width: 0.9em;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
margin-top: 0.3rem;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: pointer;
|
||||
border-radius: 0.2em;
|
||||
background-color: transparent;
|
||||
transition: 0.4s background;
|
||||
}
|
||||
|
||||
.todo-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
li[data-done="true"] {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
li[data-done="true"] .todo-checkbox {
|
||||
background-color: $color-black;
|
||||
}
|
||||
|
||||
li[data-done="false"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
15
examples/Components/Navigation/index.vue
Normal file
15
examples/Components/Navigation/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="navigation">
|
||||
<router-link class="navigation__link" to="/">
|
||||
Default
|
||||
</router-link>
|
||||
<router-link class="navigation__link" to="/bubble-navigation">
|
||||
Bubble Navigation
|
||||
</router-link>
|
||||
<router-link class="navigation__link" to="/links">
|
||||
Links
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./style.scss"></style>
|
||||
29
examples/Components/Navigation/style.scss
Normal file
29
examples/Components/Navigation/style.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
@import "~variables";
|
||||
|
||||
.navigation {
|
||||
|
||||
background: $color-black;
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
|
||||
&__link {
|
||||
display: inline-block;
|
||||
color: rgba($color-white, 0.5);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background-color: rgba($color-white, 0.1);
|
||||
}
|
||||
|
||||
&.is-exact-active {
|
||||
color: $color-white;
|
||||
background-color: rgba($color-white, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
50
examples/Components/Routes/BubbleNavigation/index.vue
Normal file
50
examples/Components/Routes/BubbleNavigation/index.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<editor class="editor" @update="onUpdate">
|
||||
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
|
||||
<template v-if="marks">
|
||||
<button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
|
||||
<icon name="bold" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
|
||||
<icon name="italic" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
|
||||
<icon name="code" />
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="editor__content" slot="content" slot-scope="props">
|
||||
<h1>
|
||||
Bubble Navigation
|
||||
</h1>
|
||||
<p>
|
||||
Hey, try to select some text.
|
||||
</p>
|
||||
</div>
|
||||
</editor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'Components/Icon'
|
||||
import { Editor } from 'tiptap'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
linkUrl: null,
|
||||
linkMenuIsActive: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onUpdate(state) {
|
||||
console.log(state.doc.toJSON())
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
72
examples/Components/Routes/Links/index.vue
Normal file
72
examples/Components/Routes/Links/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<editor class="editor" @update="onUpdate">
|
||||
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
|
||||
<template v-if="marks">
|
||||
|
||||
<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)">
|
||||
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
|
||||
<button class="menububble__button" @click="setLinkUrl(null, marks.link, focus)" type="button">
|
||||
<icon name="remove" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<template v-else>
|
||||
<button class="menububble__button" @click="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
|
||||
<span>Add Link</span>
|
||||
<icon name="link" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
<div class="editor__content" slot="content" slot-scope="props">
|
||||
<h1>
|
||||
Add links inside of a bubble menu
|
||||
</h1>
|
||||
<p>
|
||||
Try to add some links to the <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>.
|
||||
</p>
|
||||
</div>
|
||||
</editor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'Components/Icon'
|
||||
import { Editor } from 'tiptap'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
linkUrl: null,
|
||||
linkMenuIsActive: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLinkMenu(type) {
|
||||
this.linkUrl = type.attrs.href
|
||||
this.linkMenuIsActive = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.linkInput.focus()
|
||||
})
|
||||
},
|
||||
hideLinkMenu() {
|
||||
this.linkUrl = null
|
||||
this.linkMenuIsActive = false
|
||||
},
|
||||
setLinkUrl(url, type, focus) {
|
||||
type.command({ href: url })
|
||||
this.hideLinkMenu()
|
||||
focus()
|
||||
},
|
||||
onUpdate(state) {
|
||||
console.log(state.doc.toJSON())
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user