mover css de bubblemenu a sus componentes

src/editor/BubbleMenu.svelte

@@ -25,6 +25,7 @@
   import { refreshCoords as _refreshCoords } from "./bubblemenu/coords";
   import SimpleMarkItem from "./bubblemenu/SimpleMarkItem.svelte";
   import { nanoid } from "nanoid";
+  import Button from "./bubblemenu/Button.svelte";
 
   export let view: EditorView;
   export let state: EditorState;
@@ -148,17 +149,13 @@
     <SimpleMarkItem {view} {state} type={view.state.schema.marks.strikethrough}
       ><StrikethroughIcon style={svgStyle} /></SimpleMarkItem
     >
-    <button
+    <Button
-      type="button"
+      active={markIsActive(state, view.state.schema.marks.link)}
-      class:active={markIsActive(state, view.state.schema.marks.link)}
+      onClick={startEditingLink}><LinkIcon style={svgStyle} /></Button
-      on:mousedown|preventDefault={startEditingLink}
-      ><LinkIcon style={svgStyle} /></button
     >
-    <button
+    <Button
-      type="button"
+      active={markIsActive(state, view.state.schema.marks.internal_link)}
-      class:active={markIsActive(state, view.state.schema.marks.internal_link)}
+      onClick={createInternalLink}><InternalLinkIcon style={svgStyle} /></Button
-      on:mousedown|preventDefault={createInternalLink}
-      ><InternalLinkIcon style={svgStyle} /></button
     >
   {:else if changingProp.type === "link"}
     <input
@@ -168,11 +165,39 @@
       on:change|preventDefault={onChangeLink}
       value={changingProp.url}
     />
-    <button
+    <Button title="Borrar enlace" onClick={removeLink}
-      type="button"
+      ><CloseIcon style={svgStyle} /></Button
-      title="Borrar enlace"
-      on:mousedown|preventDefault={removeLink}
-      ><CloseIcon style={svgStyle} /></button
     >
   {/if}
 </div>
+
+<style>
+  .bubble {
+    display: flex !important;
+    position: absolute;
+    z-index: 420;
+    transform: translateX(-50%);
+    background: black;
+    color: white;
+    border-radius: 5px;
+    padding: 0rem;
+    margin-bottom: 0.5rem;
+
+    visibility: visible;
+    opacity: 1;
+
+    transition: opacity 0.2s, visibility 0.2s;
+  }
+  .bubble[hidden] {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  .bubble input {
+    appearance: none;
+    background: none;
+    color: inherit;
+    border: none;
+    font-size: 1.25em;
+  }
+</style>

src/editor/bubblemenu/Button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export let active: boolean = false;
+  export let onClick: (event: Event) => void;
+  export let title: string = "";
+</script>
+
+<button
+  type="button"
+  {title}
+  class:active
+  on:mousedown|preventDefault={onClick}
+>
+  <slot />
+</button>
+
+<style>
+  button {
+    appearance: none;
+    background: none;
+    color: inherit;
+    border: none;
+    border-radius: 2px;
+    padding: 0.3em;
+    margin: 0.2em;
+    width: 1.8rem;
+    height: 1.8rem;
+    font-size: 1em;
+    line-height: 1;
+
+    transition: background 0.2s;
+  }
+  button:hover {
+    background: #333;
+  }
+  button.active {
+    background: #555;
+  }
+</style>

src/editor/bubblemenu/SimpleMarkItem.svelte

@@ -5,6 +5,7 @@
   import { toggleMark } from "prosemirror-commands";
 
   import { commandListener, markIsActive } from "../ps-utils";
+  import Button from "./Button.svelte";
 
   export let view: EditorView;
   export let state: EditorState;
@@ -15,10 +16,10 @@
   $: listener = commandListener(view, toggleMark(type));
 </script>
 
-<button type="button" class:active={isActive} on:mousedown={listener}>
+<Button active={isActive} onClick={listener}>
   {#if small}
     <small><slot /></small>
   {:else}
     <slot />
   {/if}
-</button>
+</Button>

src/editor/editor.css

@@ -23,11 +23,6 @@
   border-bottom: 1px solid #bbb;
 }
 
-.editor .menubar .separator {
-  border-right: 2px solid #bbb;
-  margin: 0 0.5rem;
-}
-
 .editor .menubar button {
   appearance: none;
   background: none;
@@ -52,76 +47,6 @@
   height: 1.5rem;
 }
 
-.editor .bubble {
-  display: flex !important;
-  position: absolute;
-  z-index: 420;
-  transform: translateX(-50%);
-  background: black;
-  color: white;
-  border-radius: 5px;
-  padding: 0rem;
-  margin-bottom: 0.5rem;
-
-  visibility: visible;
-  opacity: 1;
-
-  transition: opacity 0.2s, visibility 0.2s;
-}
-.editor .bubble[hidden] {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.editor .bubble input {
-  appearance: none;
-  background: none;
-  color: inherit;
-  border: none;
-  font-size: 1.25em;
-}
-
-.editor .bubble .separator {
-  border-right: 1px solid #777;
-  margin: 0 0.5rem;
-}
-
-.editor .bubble button {
-  appearance: none;
-  background: none;
-  color: inherit;
-  border: none;
-  border-radius: 2px;
-  padding: 0.3em;
-  margin: 0.2em;
-  width: 1.8rem;
-  height: 1.8rem;
-  font-size: 1em;
-  line-height: 1;
-
-  transition: background 0.2s;
-}
-.editor .bubble button:hover {
-  background: #333;
-}
-.editor .bubble button.active {
-  background: #555;
-}
-
-.editor .bubble .color-button {
-  padding: 0.4em;
-}
-.editor .bubble .color {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border-radius: 100%;
-}
-
-.editor .bubble p {
-  margin: 0;
-}
-
 .ProseMirror {
   width: 100%;
   padding: 0.5em;