From c3bfda6b601957e2a37f2c01729b55dffd6b9332 Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Tue, 18 Apr 2023 15:14:43 -0300
Subject: [PATCH] links flotantes

---
 src/editor/BubbleMenu.svelte      |  86 ++++++++++++++-----------
 src/editor/menubar/Linking.svelte | 103 ++++++++++++++++++++++++++++++
 2 files changed, 153 insertions(+), 36 deletions(-)
 create mode 100644 src/editor/menubar/Linking.svelte

diff --git a/src/editor/BubbleMenu.svelte b/src/editor/BubbleMenu.svelte
index be7ffb0..18d2bdf 100644
--- a/src/editor/BubbleMenu.svelte
+++ b/src/editor/BubbleMenu.svelte
@@ -23,6 +23,7 @@
   import Modal from "../components/Modal.svelte";
   import PagePicker from "../components/PagePicker.svelte";
   import type { WorldY } from "../lib/doc";
+  import Linking from "./menubar/Linking.svelte";
 
   export let view: EditorView;
   export let state: EditorState;
@@ -133,46 +134,53 @@ transform: scale(${1 / viewport.scale});
   </Modal>
 {/if}
 
-<div class="bubble" hidden={state.selection.empty} style={barStyle}>
-  {#if changingProp === false}
-    <SimpleMarkItem {view} {state} type={view.state.schema.marks.strong}
-      ><BoldIcon style={svgStyle} /></SimpleMarkItem
-    >
-    <SimpleMarkItem {view} {state} type={view.state.schema.marks.em}
-      ><ItalicIcon style={svgStyle} /></SimpleMarkItem
-    >
-    <SimpleMarkItem {view} {state} type={view.state.schema.marks.underline}
-      ><UnderlineIcon style={svgStyle} /></SimpleMarkItem
-    >
-    <SimpleMarkItem {view} {state} type={view.state.schema.marks.strikethrough}
-      ><StrikethroughIcon style={svgStyle} /></SimpleMarkItem
-    >
-    <Button
-      active={markIsActive(state, view.state.schema.marks.link)}
-      onClick={startEditingLink}><LinkIcon style={svgStyle} /></Button
-    >
-    <Button
-      active={markIsActive(state, view.state.schema.marks.internal_link)}
-      onClick={startMakingInternalLink}
-      ><InternalLinkIcon style={svgStyle} /></Button
-    >
-  {:else if changingProp.type === "link"}
-    <input
-      bind:this={linkInputEl}
-      type="text"
-      placeholder="https://"
-      on:change|preventDefault={onChangeLink}
-      value={changingProp.url}
-    />
-    <Button title="Borrar enlace" onClick={removeLink}
-      ><CloseIcon style={svgStyle} /></Button
-    >
-  {/if}
+<div class="floating" style={barStyle}>
+  <Linking {state} {view} />
+  <div class="bubble" hidden={state.selection.empty}>
+    {#if changingProp === false}
+      <SimpleMarkItem {view} {state} type={view.state.schema.marks.strong}
+        ><BoldIcon style={svgStyle} /></SimpleMarkItem
+      >
+      <SimpleMarkItem {view} {state} type={view.state.schema.marks.em}
+        ><ItalicIcon style={svgStyle} /></SimpleMarkItem
+      >
+      <SimpleMarkItem {view} {state} type={view.state.schema.marks.underline}
+        ><UnderlineIcon style={svgStyle} /></SimpleMarkItem
+      >
+      <SimpleMarkItem
+        {view}
+        {state}
+        type={view.state.schema.marks.strikethrough}
+        ><StrikethroughIcon style={svgStyle} /></SimpleMarkItem
+      >
+      <Button
+        active={markIsActive(state, view.state.schema.marks.link)}
+        onClick={startEditingLink}><LinkIcon style={svgStyle} /></Button
+      >
+      <Button
+        active={markIsActive(state, view.state.schema.marks.internal_link)}
+        onClick={startMakingInternalLink}
+        ><InternalLinkIcon style={svgStyle} /></Button
+      >
+    {:else if changingProp.type === "link"}
+      <input
+        bind:this={linkInputEl}
+        type="text"
+        placeholder="https://"
+        on:change|preventDefault={onChangeLink}
+        value={changingProp.url}
+      />
+      <Button title="Borrar enlace" onClick={removeLink}
+        ><CloseIcon style={svgStyle} /></Button
+      >
+    {/if}
+  </div>
 </div>
 
 <style>
-  .bubble {
+  .floating {
     display: flex;
+    flex-direction: column;
     position: fixed;
     left: 0px;
     bottom: 0px;
@@ -180,6 +188,12 @@ transform: scale(${1 / viewport.scale});
     /* https://wicg.github.io/visual-viewport/examples/fixed-to-keyboard.html */
     transform-origin: left bottom;
 
+    width: 100%;
+  }
+
+  .bubble {
+    display: flex;
+
     background: var(--background);
     border-top: 1px solid var(--accent-bg);
     width: 100%;
diff --git a/src/editor/menubar/Linking.svelte b/src/editor/menubar/Linking.svelte
new file mode 100644
index 0000000..2741ed3
--- /dev/null
+++ b/src/editor/menubar/Linking.svelte
@@ -0,0 +1,103 @@
+<script>
+  // Inspirado en https://collectednotes.com/blog/zettelkasten
+
+  import { schema } from "../schema";
+  import LinkIcon from "bootstrap-icons/icons/box-arrow-up-right.svg";
+  import InternalLinkIcon from "bootstrap-icons/icons/folder-symlink.svg";
+
+  const svgStyle = "width: 1em; height: 1em";
+
+  /** @type {import("prosemirror-view").EditorView} */
+  export let view;
+  /** @type {import("prosemirror-state").EditorState} */
+  export let state;
+
+  /** @typedef {object} ExternalLink
+   * @prop {'external'} type
+   * @prop {string} content
+   * @prop {string} href
+   */
+  /** @typedef {object} InternalLink
+   * @prop {'internal'} type
+   * @prop {string} content
+   * @prop {string} id
+   */
+  /** @typedef {ExternalLink | InternalLink} Link */
+
+  /**
+   * @param {import("prosemirror-model").Node} node
+   * @returns {Link[]}
+   */
+  function getLinks(node) {
+    /** @type {Link[]} */
+    let links = [];
+    node.descendants((node) => {
+      for (const mark of node.marks) {
+        const content = node.textContent;
+        // no repetir marks interrumpidas por otras marks
+        const lastLink = links[links.length - 1] || null;
+        if (
+          lastLink &&
+          ("href" in lastLink
+            ? lastLink.href === mark.attrs.href
+            : lastLink.id === mark.attrs.id)
+        ) {
+          lastLink.content += node.textContent;
+          continue;
+        }
+        if (mark.type === schema.marks.link) {
+          links.push({
+            type: "external",
+            content,
+            href: mark.attrs.href,
+          });
+        } else if (mark.type === schema.marks.internal_link) {
+          links.push({
+            type: "internal",
+            content,
+            id: mark.attrs.id,
+          });
+        }
+      }
+    });
+    return links;
+  }
+
+  $: links = getLinks(state.selection.$to.parent);
+</script>
+
+<div class="linking">
+  {#each links as link}
+    <a
+      href={"href" in link ? link.href : link.id}
+      target={link.type === "external" ? "_blank" : null}
+    >
+      {#if link.type === "internal"}
+        <InternalLinkIcon style={svgStyle} />
+      {:else}
+        <LinkIcon style={svgStyle} />
+      {/if}
+      {link.content}
+    </a>
+  {/each}
+</div>
+
+<style>
+  .linking {
+    max-width: 1280px;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+  }
+
+  a {
+    background: ButtonFace;
+    color: ButtonText;
+    padding: 0.7em 1em;
+    margin: 0.3em;
+    border-radius: 2em;
+    display: block;
+    text-decoration: none;
+    line-height: 1;
+  }
+</style>