refactoring

examples/Components/Routes/Links/index.vue

@@ -12,7 +12,11 @@
 					</form>
 
 					<template v-else>
-						<button class="menububble__button" @click="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
+						<button
+							class="menububble__button"
+							@click="showLinkMenu(marks.link)"
+							:class="{ 'is-active': marks.link.active() }"
+						>
 							<span>Add Link</span>
 							<icon name="link" />
 						</button>

examples/Components/Routes/MenuBar/index.vue

@@ -1,40 +1,93 @@
 <template>
 	<div>
 		<editor :editable="true" class="editor" @update="onUpdate">
+
 			<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
 				<div v-if="nodes && marks">
-          <button class="menubar__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
+
+          <button
+            class="menubar__button"
+            :class="{ 'is-active': marks.bold.active() }"
+            @click="marks.bold.command"
+          >
             <icon name="bold" />
           </button>
-          <button class="menubar__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
+
+          <button
+            class="menubar__button"
+            :class="{ 'is-active': marks.italic.active() }"
+            @click="marks.italic.command"
+          >
             <icon name="italic" />
           </button>
-          <button class="menubar__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
+
+          <button
+            class="menubar__button"
+            @click="marks.code.command"
+            :class="{ 'is-active': marks.code.active() }
+          ">
             <icon name="code" />
           </button>
-					<button class="menubar__button" @click="nodes.paragraph.command" :class="{ 'is-active': nodes.paragraph.active() }">
+
+					<button
+            class="menubar__button"
+            :class="{ 'is-active': nodes.paragraph.active() }"
+            @click="nodes.paragraph.command"
+          >
 						<icon name="paragraph" />
 					</button>
-					<button class="menubar__button" @click="nodes.heading.command({ level: 1 })" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }">
+
+					<button
+            class="menubar__button"
+            :class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
+            @click="nodes.heading.command({ level: 1 })"
+          >
 						H1
 					</button>
-					<button class="menubar__button" @click="nodes.heading.command({ level: 2 })" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }">
+
+					<button
+            class="menubar__button"
+            :class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
+            @click="nodes.heading.command({ level: 2 })"
+          >
 						H2
 					</button>
-					<button class="menubar__button" @click="nodes.heading.command({ level: 3 })" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }">
+
+					<button
+            class="menubar__button"
+            :class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
+            @click="nodes.heading.command({ level: 3 })"
+          >
 						H3
 					</button>
-					<button class="menubar__button" @click="nodes.bullet_list.command" :class="{ 'is-active': nodes.bullet_list.active() }">
+
+					<button
+            class="menubar__button"
+            :class="{ 'is-active': nodes.bullet_list.active() }"
+            @click="nodes.bullet_list.command"
+          >
 						<icon name="ul" />
 					</button>
-					<button class="menubar__button" @click="nodes.ordered_list.command" :class="{ 'is-active': nodes.ordered_list.active() }">
+
+					<button
+            class="menubar__button"
+            :class="{ 'is-active': nodes.ordered_list.active() }"
+            @click="nodes.ordered_list.command"
+          >
 						<icon name="ol" />
 					</button>
-					<button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }">
+
+					<button
+            class="menubar__button"
+            :class="{ 'is-active': nodes.code_block.active() }"
+            @click="nodes.code_block.command"
+          >
 						<icon name="code" />
 					</button>
+
 				</div>
 			</div>
+
 			<div class="editor__content" slot="content" slot-scope="props">
         <h1>
           A renderless rich-text editor for Vue.js
@@ -55,6 +108,7 @@
           It's amazing 👏
         </p>
       </div>
+
 		</editor>
 	</div>
 </template>

examples/Components/Routes/MenuBubble/index.vue

@@ -1,19 +1,37 @@
 <template>
 	<div>
 		<editor class="editor" @update="onUpdate">
+
 			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
 				<template v-if="marks">
-					<button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
+
+					<button
+						class="menububble__button"
+						:class="{ 'is-active': marks.bold.active() }"
+						@click="marks.bold.command"
+					>
 						<icon name="bold" />
 					</button>
-					<button class="menububble__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
+
+					<button
+						class="menububble__button"
+						:class="{ 'is-active': marks.italic.active() }"
+						@click="marks.italic.command"
+					>
 						<icon name="italic" />
 					</button>
-					<button class="menububble__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
+
+					<button
+						class="menububble__button"
+						:class="{ 'is-active': marks.code.active() }"
+						@click="marks.code.command"
+					>
 						<icon name="code" />
 					</button>
+
 				</template>
 			</div>
+
 			<div class="editor__content" slot="content" slot-scope="props">
 				<h1>
 					Bubble Navigation
@@ -22,6 +40,7 @@
 					Hey, try to select some text.
 				</p>
 			</div>
+
 		</editor>
 	</div>
 </template>