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

fix menu fade animations

Browse Source
This commit is contained in:
Philipp Kühn
2021-04-16 13:29:50 +02:00
parent 13170c939e
commit a0ba4542ef
4 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,7 +25,7 @@ export default () => {
return ( return (
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
{editor && <BubbleMenu className="bubble-menu" editor={editor}> {editor && <BubbleMenu className="bubble-menu" tippyOptions={{ duration: 100 }} 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' : ''}
@@ -46,7 +46,7 @@ export default () => {
</button> </button>
</BubbleMenu>} </BubbleMenu>}
{editor && <FloatingMenu className="floating-menu" editor={editor}> {editor && <FloatingMenu className="floating-menu" tippyOptions={{ duration: 100 }} 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' : ''}

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

@@ -14,7 +14,6 @@
background-color: #0D0D0D; background-color: #0D0D0D;
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: visibility 0.1s ease, opacity 0.1s ease;
button { button {
border: none; border: none;
@@ -37,9 +36,6 @@
background-color: #0D0D0D10; background-color: #0D0D0D10;
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
margin-top: -0.25rem;
margin-left: 0.25rem;
transition: visibility 0.1s ease, opacity 0.1s ease;
button { button {
border: none; border: none;

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

@@ -1,6 +1,6 @@
<template> <template>
<div style="position: relative"> <div style="position: relative">
<bubble-menu class="bubble-menu" :editor="editor" v-if="editor"> <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :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>
@@ -12,7 +12,7 @@
</button> </button>
</bubble-menu> </bubble-menu>
<floating-menu class="floating-menu" :editor="editor" v-if="editor"> <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :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>
@@ -95,7 +95,6 @@ export default {
background-color: #0D0D0D; background-color: #0D0D0D;
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: visibility 0.1s ease, opacity 0.1s ease;
button { button {
border: none; border: none;
@@ -118,9 +117,6 @@ export default {
background-color: #0D0D0D10; background-color: #0D0D0D10;
padding: 0.2rem; padding: 0.2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
margin-top: -0.25rem;
margin-left: 0.25rem;
transition: visibility 0.1s ease, opacity 0.1s ease;
button { button {
border: none; border: none;

4
packages/core/src/style.ts
View File

@@ -57,6 +57,10 @@ const style = `.ProseMirror {
.ProseMirror-focused .ProseMirror-gapcursor { .ProseMirror-focused .ProseMirror-gapcursor {
display: block; display: block;
}
.tippy-box[data-animation=fade][data-state=hidden] {
opacity: 0
}` }`
export default style export default style