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

add basic styling for menus example

Browse Source
This commit is contained in:
Philipp Kühn
2021-04-01 17:36:22 +02:00
parent 136f6e47a9
commit 3b3a0103b9
5 changed files with 104 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/src/demos/Examples/Menus/React/index.jsx
View File

@@ -22,7 +22,7 @@ export default () => {
return ( return (
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
{editor && <BubbleMenu editor={editor}> {editor && <BubbleMenu className="bubble-menu" editor={editor}>
<button <button
onClick={() => editor.chain().focus().toggleBold().run()} onClick={() => editor.chain().focus().toggleBold().run()}
className={editor.isActive('bold') ? 'is-active' : ''} className={editor.isActive('bold') ? 'is-active' : ''}
@@ -36,14 +36,14 @@ export default () => {
italic italic
</button> </button>
<button <button
onClick={() => editor.chain().focus().toggleCode().run()} onClick={() => editor.chain().focus().toggleStrike().run()}
className={editor.isActive('code') ? 'is-active' : ''} className={editor.isActive('strike') ? 'is-active' : ''}
> >
code strike
</button> </button>
</BubbleMenu>} </BubbleMenu>}
{editor && <FloatingMenu editor={editor}> {editor && <FloatingMenu className="floating-menu" editor={editor}>
<button <button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''} className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}

45
docs/src/demos/Examples/Menus/React/styles.scss
View File

@@ -8,3 +8,48 @@
padding: 0 1rem; padding: 0 1rem;
} }
} }
.bubble-menu {
display: flex;
background-color: #0D0D0D;
padding: 0.2rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
color: #FFF;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
&:hover,
&.is-active {
opacity: 1;
}
}
}
.floating-menu {
display: flex;
background-color: #0D0D0D10;
padding: 0.2rem;
border-radius: 0.5rem;
margin-top: -0.25rem;
margin-left: 0.25rem;
button {
border: none;
background: none;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
&:hover,
&.is-active {
opacity: 1;
}
}
}

53
docs/src/demos/Examples/Menus/Vue/index.vue
View File

@@ -1,18 +1,18 @@
<template> <template>
<div style="position: relative"> <div style="position: relative">
<bubble-menu :editor="editor" v-if="editor"> <bubble-menu class="bubble-menu" :editor="editor" v-if="editor">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }"> <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold bold
</button> </button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }"> <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic italic
</button> </button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }"> <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
code strike
</button> </button>
</bubble-menu> </bubble-menu>
<floating-menu :editor="editor" v-if="editor"> <floating-menu class="floating-menu" :editor="editor" v-if="editor">
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"> <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1 h1
</button> </button>
@@ -86,4 +86,49 @@ export default {
border-left: 2px solid rgba(#0D0D0D, 0.1); border-left: 2px solid rgba(#0D0D0D, 0.1);
} }
} }
.bubble-menu {
display: flex;
background-color: #0D0D0D;
padding: 0.2rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
color: #FFF;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
&:hover,
&.is-active {
opacity: 1;
}
}
}
.floating-menu {
display: flex;
background-color: #0D0D0D10;
padding: 0.2rem;
border-radius: 0.5rem;
margin-top: -0.25rem;
margin-left: 0.25rem;
button {
border: none;
background: none;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
&:hover,
&.is-active {
opacity: 1;
}
}
}
</style> </style>

6
docs/src/demos/Extensions/BubbleMenu/React/index.jsx
View File

@@ -31,10 +31,10 @@ export default () => {
italic italic
</button> </button>
<button <button
onClick={() => editor.chain().focus().toggleCode().run()} onClick={() => editor.chain().focus().toggleStrike().run()}
className={editor.isActive('code') ? 'is-active' : ''} className={editor.isActive('strike') ? 'is-active' : ''}
> >
code strike
</button> </button>
</BubbleMenu>} </BubbleMenu>}
<EditorContent editor={editor} /> <EditorContent editor={editor} />

4
docs/src/demos/Extensions/BubbleMenu/Vue/index.vue
View File

@@ -7,8 +7,8 @@
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }"> <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic italic
</button> </button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }"> <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
code strike
</button> </button>
</bubble-menu> </bubble-menu>
<editor-content :editor="editor" /> <editor-content :editor="editor" />