mover bubblemenu pa bajo

src/App.svelte

@@ -38,6 +38,5 @@
   main {
     max-width: 1280px;
     margin: 0 auto;
-    padding: 2rem;
   }
 </style>

src/app.css

@@ -16,6 +16,9 @@
   box-sizing: border-box;
 }
 
-body {
+body,
+#app,
+main {
   margin: 0;
+  min-height: 100vh;
 }

src/editor/BubbleMenu.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-  import { onMount, onDestroy, tick } from "svelte";
+  import { onDestroy, onMount, tick } from "svelte";
   import type { EditorView } from "prosemirror-view";
   import { EditorState, TextSelection } from "prosemirror-state";
-  import type { Node as ProsemirrorNode } from "prosemirror-model";
-  import { toggleMark } from "prosemirror-commands";
-  import type { Mark } from "prosemirror-model";
 
   import BoldIcon from "bootstrap-icons/icons/type-bold.svg";
   import ItalicIcon from "bootstrap-icons/icons/type-italic.svg";
@@ -19,10 +16,8 @@
     updateMark,
     removeMark,
     markIsActive,
-    commandListener,
     getFirstMarkInSelection,
   } from "./ps-utils";
-  import { refreshCoords as _refreshCoords } from "./bubblemenu/coords";
   import SimpleMarkItem from "./bubblemenu/SimpleMarkItem.svelte";
   import { nanoid } from "nanoid";
   import Button from "./bubblemenu/Button.svelte";
@@ -30,37 +25,6 @@
   export let view: EditorView;
   export let state: EditorState;
 
-  // == Posicionamiento ==
-  let bubbleEl: HTMLElement = null;
-  let left: number = 0;
-  let bottom: number = 0;
-
-  function refreshCoords() {
-    const coords = _refreshCoords(view, bubbleEl);
-    left = coords.left;
-    bottom = coords.bottom;
-  }
-
-  $: {
-    // refrescar cuando cambia state
-    view;
-    state;
-    if (bubbleEl) refreshCoords();
-  }
-
-  let resizeObserver = new ResizeObserver(() => {
-    if (bubbleEl) refreshCoords();
-  });
-  $: {
-    view;
-    resizeObserver.disconnect();
-    if (bubbleEl) {
-      resizeObserver.observe(bubbleEl.parentElement);
-    }
-  }
-  onDestroy(() => resizeObserver.disconnect());
-  // == /Posicionamiento ==
-
   let changingProp:
     | false
     | { type: "link"; url: string }
@@ -86,8 +50,7 @@
     command(state, view.dispatch);
   }
 
-  function startEditingLink(event: Event) {
+  function startEditingLink() {
-    const { to, from } = state.selection;
     const match = getFirstMarkInSelection(state, view.state.schema.marks.link);
 
     // si no hay un link en la selección, empezar a editar uno sin ningún enlace
@@ -128,14 +91,33 @@
   }
 
   const svgStyle = "width: 100%; height: 100%";
+
+  /* https://wicg.github.io/visual-viewport/examples/fixed-to-keyboard.html */
+  let barStyle = "";
+  function updateBar() {
+    const viewport = window.visualViewport;
+    // Since the bar is position: fixed we need to offset it by the
+    // visual viewport's offset from the layout viewport origin.
+    const offsetY = window.innerHeight - viewport.height - viewport.offsetTop;
+
+    barStyle = `
+left: ${viewport.offsetLeft}px;
+bottom: ${offsetY}px;
+transform: scale(${1 / viewport.scale});
+`;
+  }
+
+  onMount(() => {
+    window.visualViewport.addEventListener("resize", updateBar);
+    window.visualViewport.addEventListener("scroll", updateBar);
+  });
+  onDestroy(() => {
+    window.visualViewport.removeEventListener("resize", updateBar);
+    window.visualViewport.removeEventListener("scroll", updateBar);
+  });
 </script>
 
-<div
+<div class="bubble" hidden={state.selection.empty} style={barStyle}>
-  bind:this={bubbleEl}
-  class="bubble"
-  hidden={state.selection.empty}
-  style="left: {left}px; bottom: {bottom}px"
->
   {#if changingProp === false}
     <SimpleMarkItem {view} {state} type={view.state.schema.marks.strong}
       ><BoldIcon style={svgStyle} /></SimpleMarkItem
@@ -173,15 +155,16 @@
 
 <style>
   .bubble {
-    display: flex !important;
+    display: flex;
-    position: absolute;
+    position: fixed;
-    z-index: 420;
+    left: 0px;
-    transform: translateX(-50%);
+    bottom: 0px;
-    background: black;
-    color: white;
-    border-radius: 5px;
     padding: 0rem;
-    margin-bottom: 0.5rem;
+    /* https://wicg.github.io/visual-viewport/examples/fixed-to-keyboard.html */
+    transform-origin: left bottom;
+
+    border-top: 1px solid #ccc;
+    width: 100%;
 
     visibility: visible;
     opacity: 1;

src/editor/Editor.svelte

@@ -67,9 +67,19 @@
 
 <div class="editor">
   {#if view}
-    <BubbleMenu {view} state={updatedState} />
     <MenuBar {view} state={updatedState} />
   {/if}
   <!-- this element gets replaced with the editor itself when mounted -->
   <div bind:this={wrapperEl} />
+  {#if view}
+    <BubbleMenu {view} state={updatedState} />
+  {/if}
 </div>
+
+<style>
+  .editor,
+  div,
+  :global(.ProseMirror) {
+    min-height: 100vh;
+  }
+</style>

src/editor/bubblemenu/Button.svelte

@@ -22,17 +22,20 @@
     border-radius: 2px;
     padding: 0.3em;
     margin: 0.2em;
-    width: 1.8rem;
+    width: 2rem;
-    height: 1.8rem;
+    height: 2rem;
     font-size: 1em;
     line-height: 1;
 
     transition: background 0.2s;
   }
+  /* https://stackoverflow.com/a/64553121 */
+  @media (hover: hover) and (pointer: fine) {
     button:hover {
-    background: #333;
+      background: #eee;
+    }
   }
   button.active {
-    background: #555;
+    background: #ddd;
   }
 </style>

src/editor/bubblemenu/coords.ts

@@ -1,104 +0,0 @@
-import type { EditorView } from "prosemirror-view";
-
-function textRange(
-  node: Node,
-  from: number = 0,
-  to: number | null = null
-): Range {
-  const range = document.createRange();
-  range.setEnd(node, to == null ? node.nodeValue.length : to);
-  range.setStart(node, Math.max(from, 0));
-  return range;
-}
-
-function singleRect(object: Element | Range, bias: number) {
-  const rects = object.getClientRects();
-  return !rects.length
-    ? object.getBoundingClientRect()
-    : rects[bias < 0 ? 0 : rects.length - 1];
-}
-
-interface Coords {
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
-}
-
-function coordsAtPos(
-  view: EditorView,
-  pos: number,
-  end: boolean = false
-): Coords {
-  const { node, offset } = (view as any).docView.domFromPos(pos);
-  let side: "left" | "right";
-  let rect: DOMRect;
-  if (node.nodeType === 3) {
-    if (end && offset < node.nodeValue.length) {
-      rect = singleRect(textRange(node, offset - 1, offset), -1);
-      side = "right";
-    } else if (offset < node.nodeValue.length) {
-      rect = singleRect(textRange(node, offset, offset + 1), -1);
-      side = "left";
-    }
-  } else if (node.firstChild) {
-    if (offset < node.childNodes.length) {
-      const child = node.childNodes[offset];
-      rect = singleRect(child.nodeType === 3 ? textRange(child) : child, -1);
-      side = "left";
-    }
-    if ((!rect || rect.top === rect.bottom) && offset) {
-      const child = node.childNodes[offset - 1];
-      rect = singleRect(child.nodeType === 3 ? textRange(child) : child, 1);
-      side = "right";
-    }
-  } else {
-    rect = node.getBoundingClientRect();
-    side = "left";
-  }
-  const x = rect[side];
-
-  return {
-    top: rect.top,
-    bottom: rect.bottom,
-    left: x,
-    right: x,
-  };
-}
-
-export function refreshCoords(view: EditorView, bubbleEl: HTMLElement) {
-  // Brutally stolen from https://github.com/ueberdosis/tiptap/blob/d2cf88fd166092d6df079cb47fe2a55520fadf80/packages/tiptap/src/Plugins/MenuBubble.js
-  const { from, to } = view.state.selection;
-
-  // These are in screen coordinates
-  // We can't use EditorView.coordsAtPos here because it can't handle linebreaks correctly
-  // See: https://github.com/ProseMirror/prosemirror-view/pull/47
-  const start = coordsAtPos(view, from);
-  const end = coordsAtPos(view, to, true);
-
-  // The box in which the tooltip is positioned, to use as base
-  const parent = bubbleEl.offsetParent;
-
-  if (!parent) {
-    console.error(
-      "Me parece que te falto importar el CSS. `import '@suttyweb/editor/dist/style.css';`"
-    );
-    // TODO: i18n
-    throw new Error(
-      "¡El editor tuvo un error! Contactar a lxs desarrolladorxs."
-    );
-  }
-
-  const box = parent.getBoundingClientRect();
-  const el = bubbleEl.getBoundingClientRect();
-
-  const _left = Math.max((start.left + end.left) / 2 - box.left, el.width / 2);
-
-  return {
-    left: Math.round(
-      _left + el.width / 2 > box.width ? box.width - el.width / 2 : _left
-    ),
-    bottom: Math.round(box.bottom - start.top),
-    top: Math.round(end.bottom - box.top),
-  };
-}