Merge pull request #297 from jjangga0214/patch/deprecated/slot

change deprecated `slot-scope` to `v-slot`

README.md

@@ -117,8 +117,8 @@ The `<editor-menu-bar />` component is renderless and will receive some properti
 
 ```vue
 <template>
-  <editor-menu-bar :editor="editor">
-    <div slot-scope="{ commands, isActive }">
+  <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+    <div>
       <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
         Bold
       </button>
@@ -147,9 +147,8 @@ The `<editor-menu-bubble />` component is renderless and will receive some prope
 
 ```vue
 <template>
-  <editor-menu-bubble :editor="editor">
+  <editor-menu-bubble :editor="editor" v-slot="{ commands, isActive, menu }">
     <div
-      slot-scope="{ commands, isActive, menu }"
       :class="{ 'is-active': menu.isActive }"
       :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
 <template>
-  <editor-floating-menu :editor="editor">
+  <editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
     <div
-      slot-scope="{ commands, isActive, menu }"
       :class="{ 'is-active': menu.isActive }"
       :style="`top: ${menu.top}px`"
     >
@@ -207,12 +205,10 @@ By default, the editor will only support paragraphs. Other nodes and marks are a
 ```vue
 <template>
   <div>
-    <editor-menu-bar :editor="editor">
-      <div slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
         <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
           Bold
         </button>
-      </div>
     </editor-menu-bar>
     <editor-content :editor="editor" />
   </div>

examples/Components/Routes/Basic/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <div class="menubar">
 
         <button
           class="menubar__button"

examples/Components/Routes/Export/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="editor">
-      <editor-menu-bar :editor="editor">
-        <div class="menubar" slot-scope="{ commands, isActive }">
+      <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+        <div class="menubar">
 
           <button
             class="menubar__button"

examples/Components/Routes/FloatingMenu/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="editor">
-    <editor-floating-menu :editor="editor">
+    <editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
       <div
-        slot-scope="{ commands, isActive, menu }"
         class="editor__floating-menu"
         :class="{ 'is-active': menu.isActive }"
         :style="`top: ${menu.top}px`"

examples/Components/Routes/HidingMenuBar/index.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
       <div
         class="menubar is-hidden"
         :class="{ 'is-focused': focused }"
-        slot-scope="{ commands, isActive, focused }"
       >
 
         <button

examples/Components/Routes/History/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <div class="menubar">
 
         <button
           class="menubar__button"

examples/Components/Routes/Images/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
-      <div class="menubar" slot-scope="{ commands }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands }">
+      <div class="menubar">
         <button
           class="menubar__button"
           @click="showImagePrompt(commands.image)"

examples/Components/Routes/Links/index.vue

@@ -1,8 +1,7 @@
 <template>
   <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
-        slot-scope="{ commands, isActive, getMarkAttrs, menu }"
         class="menububble"
         :class="{ 'is-active': menu.isActive }"
         :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"

examples/Components/Routes/MenuBubble/index.vue

@@ -1,8 +1,7 @@
 <template>
   <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
-        slot-scope="{ commands, isActive, menu }"
         class="menububble"
         :class="{ 'is-active': menu.isActive }"
         :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"

examples/Components/Routes/Suggestions/index.vue

@@ -2,8 +2,8 @@
   <div>
 
     <div class="editor">
-      <editor-menu-bar :editor="editor">
-        <div class="menubar" slot-scope="{ commands }">
+      <editor-menu-bar :editor="editor" v-slot="{ commands }">
+        <div class="menubar">
           <button class="menubar__button" @click="commands.mention({ id: 1, label: 'Philipp Kühn' })">
             <icon name="mention" />
             <span>Insert Mention</span>

examples/Components/Routes/Tables/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="editor">
-		<editor-menu-bar :editor="editor">
-			<div class="menubar" slot-scope="{ commands, isActive }">
+		<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+			<div class="menubar">
 				<div class="toolbar">
 					<button
 						class="menubar__button"

examples/Components/Routes/TodoList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <div class="menubar">
 
         <button
           class="menubar__button"