mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-24 11:49:02 +08:00
add remixicon
This commit is contained in:
Philipp Kühn
parent
612253ea4a
commit
29cd8f53ae
@ -22,6 +22,7 @@
|
||||
"react-dom": "^17.0.1",
|
||||
"remark-container": "^0.1.2",
|
||||
"remark-toc": "^7.0.0",
|
||||
"remixicon": "^2.5.0",
|
||||
"vue-github-button": "^1.1.2",
|
||||
"vue-live": "^1.16.0",
|
||||
"y-indexeddb": "^9.0.5",
|
||||
|
||||
132
docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
Normal file
132
docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<menu-item v-for="(item, index) in items" :key="index" v-bind="item" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuItem from './MenuItem.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MenuItem,
|
||||
},
|
||||
|
||||
props: {
|
||||
editor: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
icon: 'bold',
|
||||
action: () => this.editor.chain().focus().toggleBold().run(),
|
||||
isActive: () => this.editor.isActive('bold'),
|
||||
},
|
||||
{
|
||||
icon: 'italic',
|
||||
action: () => this.editor.chain().focus().toggleItalic().run(),
|
||||
isActive: () => this.editor.isActive('italic'),
|
||||
},
|
||||
{
|
||||
icon: 'strikethrough',
|
||||
action: () => this.editor.chain().focus().toggleStrike().run(),
|
||||
isActive: () => this.editor.isActive('strike'),
|
||||
},
|
||||
{
|
||||
icon: 'code-view',
|
||||
action: () => this.editor.chain().focus().toggleCode().run(),
|
||||
isActive: () => this.editor.isActive('code'),
|
||||
},
|
||||
{
|
||||
icon: 'format-clear',
|
||||
action: () => this.editor.chain().focus().unsetAllMarks().run(),
|
||||
},
|
||||
{
|
||||
icon: 'eraser-line',
|
||||
action: () => this.editor.chain().focus().clearNodes().run(),
|
||||
},
|
||||
{
|
||||
icon: 'paragraph',
|
||||
action: () => this.editor.chain().focus().setParagraph().run(),
|
||||
isActive: () => this.editor.isActive('paragraph'),
|
||||
},
|
||||
{
|
||||
icon: 'h-1',
|
||||
action: () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(),
|
||||
isActive: () => this.editor.isActive('heading', { level: 1 }),
|
||||
},
|
||||
{
|
||||
icon: 'h-2',
|
||||
action: () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
|
||||
isActive: () => this.editor.isActive('heading', { level: 2 }),
|
||||
},
|
||||
{
|
||||
icon: 'h-3',
|
||||
action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
|
||||
isActive: () => this.editor.isActive('heading', { level: 3 }),
|
||||
},
|
||||
{
|
||||
icon: 'h-4',
|
||||
action: () => this.editor.chain().focus().toggleHeading({ level: 4 }).run(),
|
||||
isActive: () => this.editor.isActive('heading', { level: 4 }),
|
||||
},
|
||||
{
|
||||
icon: 'h-5',
|
||||
action: () => this.editor.chain().focus().toggleHeading({ level: 5 }).run(),
|
||||
isActive: () => this.editor.isActive('heading', { level: 5 }),
|
||||
},
|
||||
{
|
||||
icon: 'h-6',
|
||||
action: () => this.editor.chain().focus().toggleHeading({ level: 6 }).run(),
|
||||
isActive: () => this.editor.isActive('heading', { level: 6 }),
|
||||
},
|
||||
{
|
||||
icon: 'list-unordered',
|
||||
action: () => this.editor.chain().focus().toggleBulletList().run(),
|
||||
isActive: () => this.editor.isActive('bulletList'),
|
||||
},
|
||||
{
|
||||
icon: 'list-ordered',
|
||||
action: () => this.editor.chain().focus().toggleOrderedList().run(),
|
||||
isActive: () => this.editor.isActive('orderedList'),
|
||||
},
|
||||
{
|
||||
icon: 'code-view',
|
||||
action: () => this.editor.chain().focus().toggleCodeBlock().run(),
|
||||
isActive: () => this.editor.isActive('codeBlock'),
|
||||
},
|
||||
{
|
||||
icon: 'double-quotes-l',
|
||||
action: () => this.editor.chain().focus().toggleBlockQuote().run(),
|
||||
isActive: () => this.editor.isActive('blockQuote'),
|
||||
},
|
||||
{
|
||||
icon: 'separator',
|
||||
action: () => this.editor.chain().focus().setHorizontalRule().run(),
|
||||
},
|
||||
{
|
||||
icon: 'text-wrap',
|
||||
action: () => this.editor.chain().focus().setHardBreak().run(),
|
||||
},
|
||||
{
|
||||
icon: 'arrow-go-back-line',
|
||||
action: () => this.editor.chain().focus().undo().run(),
|
||||
},
|
||||
{
|
||||
icon: 'arrow-go-forward-line',
|
||||
action: () => this.editor.chain().focus().redo().run(),
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
57
docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
Normal file
57
docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<button
|
||||
class="menu-item"
|
||||
:class="{ 'is-active': isActive ? isActive(): null }"
|
||||
@click="action"
|
||||
>
|
||||
<svg class="remix">
|
||||
<use :xlink:href="require('../../../../../node_modules/remixicon/fonts/remixicon.symbol.svg') + `#ri-${icon}`" />
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
action: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
|
||||
isActive: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-item {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
color: rgba(black, 0.5);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&:hover {
|
||||
color: black;
|
||||
background-color: rgba(black, 0.05);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,71 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
bold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||
italic
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
|
||||
strike
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
|
||||
code
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetAllMarks().run()">
|
||||
clear marks
|
||||
</button>
|
||||
<button @click="editor.chain().focus().clearNodes().run()">
|
||||
clear nodes
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
|
||||
paragraph
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
|
||||
h1
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
|
||||
h2
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
|
||||
h3
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
|
||||
h4
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
|
||||
h5
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
|
||||
h6
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
|
||||
bullet list
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
|
||||
ordered list
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
||||
code block
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
|
||||
blockquote
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setHorizontalRule().run()">
|
||||
horizontal rule
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setHardBreak().run()">
|
||||
hard break
|
||||
</button>
|
||||
<button @click="editor.chain().focus().undo().run()">
|
||||
undo
|
||||
</button>
|
||||
<button @click="editor.chain().focus().redo().run()">
|
||||
redo
|
||||
</button>
|
||||
<menu-bar :editor="editor" />
|
||||
<editor-content :editor="editor" />
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<button @click="setName">
|
||||
@ -90,8 +28,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
|
||||
<div :class="`collaboration-status collaboration-status--${status}`">
|
||||
<template v-if="status">
|
||||
{{ status }},
|
||||
@ -109,6 +45,7 @@ import * as Y from 'yjs'
|
||||
import { WebrtcProvider } from 'y-webrtc'
|
||||
// import { WebsocketProvider } from 'y-websocket'
|
||||
import { IndexeddbPersistence } from 'y-indexeddb'
|
||||
import MenuBar from './MenuBar.vue'
|
||||
|
||||
const getRandomElement = list => {
|
||||
return list[Math.floor(Math.random() * list.length)]
|
||||
@ -117,6 +54,7 @@ const getRandomElement = list => {
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
MenuBar,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
@ -12096,6 +12096,11 @@ remark-toc@^7.0.0:
|
||||
"@types/unist" "^2.0.3"
|
||||
mdast-util-toc "^5.0.0"
|
||||
|
||||
remixicon@^2.5.0:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
|
||||
integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
|
||||
|
||||
remove-trailing-separator@^1.0.1:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user