docs: remove position: relative from menu demos

This commit is contained in:
Philipp Kühn
2021-04-16 14:43:26 +02:00
parent a0ba4542ef
commit c4e0010656
6 changed files with 21 additions and 11 deletions

View File

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

View File

@@ -1,6 +1,11 @@
<template> <template>
<div style="position: relative"> <div>
<bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :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 +17,12 @@
</button> </button>
</bubble-menu> </bubble-menu>
<floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :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>

View File

@@ -16,7 +16,7 @@ export default () => {
}) })
return ( return (
<div style={{ position: 'relative' }}> <>
{editor && <BubbleMenu editor={editor}> {editor && <BubbleMenu editor={editor}>
<button <button
onClick={() => editor.chain().focus().toggleBold().run()} onClick={() => editor.chain().focus().toggleBold().run()}
@@ -38,6 +38,6 @@ export default () => {
</button> </button>
</BubbleMenu>} </BubbleMenu>}
<EditorContent editor={editor} /> <EditorContent editor={editor} />
</div> </>
) )
} }

View File

@@ -1,5 +1,5 @@
<template> <template>
<div style="position: relative"> <div>
<bubble-menu :editor="editor" v-if="editor"> <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

View File

@@ -17,7 +17,7 @@ export default () => {
}) })
return ( return (
<div style={{ position: 'relative' }}> <>
{editor && <FloatingMenu editor={editor}> {editor && <FloatingMenu editor={editor}>
<button <button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
@@ -39,6 +39,6 @@ export default () => {
</button> </button>
</FloatingMenu>} </FloatingMenu>}
<EditorContent editor={editor} /> <EditorContent editor={editor} />
</div> </>
) )
} }

View File

@@ -1,5 +1,5 @@
<template> <template>
<div style="position: relative"> <div>
<floating-menu :editor="editor" v-if="editor"> <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