mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-15 02:59:01 +08:00
Merge pull request #297 from jjangga0214/patch/deprecated/slot
change deprecated `slot-scope` to `v-slot`
This commit is contained in:
commit
f44be05cf3
14
README.md
14
README.md
@ -117,8 +117,8 @@ The `<editor-menu-bar />` component is renderless and will receive some properti
|
|||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
<div slot-scope="{ commands, isActive }">
|
<div>
|
||||||
<button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
|
<button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
|
||||||
Bold
|
Bold
|
||||||
</button>
|
</button>
|
||||||
@ -147,9 +147,8 @@ The `<editor-menu-bubble />` component is renderless and will receive some prope
|
|||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<editor-menu-bubble :editor="editor">
|
<editor-menu-bubble :editor="editor" v-slot="{ commands, isActive, menu }">
|
||||||
<div
|
<div
|
||||||
slot-scope="{ commands, isActive, menu }"
|
|
||||||
:class="{ 'is-active': menu.isActive }"
|
:class="{ 'is-active': menu.isActive }"
|
||||||
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
|
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
|
||||||
>
|
>
|
||||||
@ -181,9 +180,8 @@ The `<editor-floating-menu />` component is renderless and will receive some pro
|
|||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<editor-floating-menu :editor="editor">
|
<editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
|
||||||
<div
|
<div
|
||||||
slot-scope="{ commands, isActive, menu }"
|
|
||||||
:class="{ 'is-active': menu.isActive }"
|
:class="{ 'is-active': menu.isActive }"
|
||||||
:style="`top: ${menu.top}px`"
|
:style="`top: ${menu.top}px`"
|
||||||
>
|
>
|
||||||
@ -207,12 +205,10 @@ By default, the editor will only support paragraphs. Other nodes and marks are a
|
|||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
<div slot-scope="{ commands, isActive }">
|
|
||||||
<button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
|
<button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
|
||||||
Bold
|
Bold
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</editor-menu-bar>
|
</editor-menu-bar>
|
||||||
<editor-content :editor="editor" />
|
<editor-content :editor="editor" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
<div class="menubar" slot-scope="{ commands, isActive }">
|
<div class="menubar">
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
<div class="menubar" slot-scope="{ commands, isActive }">
|
<div class="menubar">
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-floating-menu :editor="editor">
|
<editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
|
||||||
<div
|
<div
|
||||||
slot-scope="{ commands, isActive, menu }"
|
|
||||||
class="editor__floating-menu"
|
class="editor__floating-menu"
|
||||||
:class="{ 'is-active': menu.isActive }"
|
:class="{ 'is-active': menu.isActive }"
|
||||||
:style="`top: ${menu.top}px`"
|
:style="`top: ${menu.top}px`"
|
||||||
|
@ -1,10 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
|
||||||
<div
|
<div
|
||||||
class="menubar is-hidden"
|
class="menubar is-hidden"
|
||||||
:class="{ 'is-focused': focused }"
|
:class="{ 'is-focused': focused }"
|
||||||
slot-scope="{ commands, isActive, focused }"
|
|
||||||
>
|
>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
<div class="menubar" slot-scope="{ commands, isActive }">
|
<div class="menubar">
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands }">
|
||||||
<div class="menubar" slot-scope="{ commands }">
|
<div class="menubar">
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
@click="showImagePrompt(commands.image)"
|
@click="showImagePrompt(commands.image)"
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu">
|
<editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu" v-slot="{ commands, isActive, getMarkAttrs, menu }">
|
||||||
<div
|
<div
|
||||||
slot-scope="{ commands, isActive, getMarkAttrs, menu }"
|
|
||||||
class="menububble"
|
class="menububble"
|
||||||
:class="{ 'is-active': menu.isActive }"
|
:class="{ 'is-active': menu.isActive }"
|
||||||
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
|
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bubble :editor="editor" :keep-in-bounds="keepInBounds">
|
<editor-menu-bubble :editor="editor" :keep-in-bounds="keepInBounds" v-slot="{ commands, isActive, menu }">
|
||||||
<div
|
<div
|
||||||
slot-scope="{ commands, isActive, menu }"
|
|
||||||
class="menububble"
|
class="menububble"
|
||||||
:class="{ 'is-active': menu.isActive }"
|
:class="{ 'is-active': menu.isActive }"
|
||||||
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
|
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
|
||||||
|
@ -2,8 +2,8 @@
|
|||||||
<div>
|
<div>
|
||||||
|
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands }">
|
||||||
<div class="menubar" slot-scope="{ commands }">
|
<div class="menubar">
|
||||||
<button class="menubar__button" @click="commands.mention({ id: 1, label: 'Philipp Kühn' })">
|
<button class="menubar__button" @click="commands.mention({ id: 1, label: 'Philipp Kühn' })">
|
||||||
<icon name="mention" />
|
<icon name="mention" />
|
||||||
<span>Insert Mention</span>
|
<span>Insert Mention</span>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
<div class="menubar" slot-scope="{ commands, isActive }">
|
<div class="menubar">
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="editor">
|
||||||
<editor-menu-bar :editor="editor">
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
<div class="menubar" slot-scope="{ commands, isActive }">
|
<div class="menubar">
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="menubar__button"
|
class="menubar__button"
|
||||||
|
Loading…
Reference in New Issue
Block a user