apropiadamente implementar nuevo linkeo

2023-08-31 15:02:58 -03:00 · 2023-08-31 15:02:58 -03:00 · 2b44ab6102
commit 2b44ab6102
parent 15ffbae34d
7 changed files with 88 additions and 105 deletions
--- a/package.json
+++ b/package.json
@ -33,7 +33,7 @@
    "prosemirror-schema-list": "~1.2.2",
    "prosemirror-state": "~1.4.2",
    "prosemirror-transform": "~1.7.1",
-    "prosemirror-view": "~1.29.2",
+    "prosemirror-view": "^1.31.7",
    "svelte": "^3.58.0",
    "svelte-check": "^2.10.3",
    "tailwindcss": "^3.3.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -31,7 +31,7 @@ dependencies:
    version: 9.0.10(yjs@13.5.52)
  y-prosemirror:
    specifier: ^1.2.1
-    version: 1.2.1(prosemirror-model@1.18.3)(prosemirror-state@1.4.2)(prosemirror-view@1.29.2)(y-protocols@1.0.5)(yjs@13.5.52)
+    version: 1.2.1(prosemirror-model@1.18.3)(prosemirror-state@1.4.2)(prosemirror-view@1.31.7)(y-protocols@1.0.5)(yjs@13.5.52)
  y-protocols:
    specifier: ^1.0.5
    version: 1.0.5
@ -107,8 +107,8 @@ devDependencies:
    specifier: ~1.7.1
    version: 1.7.1
  prosemirror-view:
-    specifier: ~1.29.2
-    version: 1.29.2
+    specifier: ^1.31.7
+    version: 1.31.7
  svelte:
    specifier: ^3.58.0
    version: 3.58.0
@ -595,7 +595,7 @@ packages:
      normalize-path: 3.0.0
      readdirp: 3.6.0
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
    dev: true

  /commander@4.1.1:
@ -796,8 +796,8 @@ packages:
    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
    dev: true

-  /fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]
    requiresBuild: true
@ -1307,7 +1307,7 @@ packages:
    dependencies:
      prosemirror-state: 1.4.2
      prosemirror-transform: 1.7.1
-      prosemirror-view: 1.29.2
+      prosemirror-view: 1.31.7
    dev: true

  /prosemirror-gapcursor@1.3.1:
@ -1316,7 +1316,7 @@ packages:
      prosemirror-keymap: 1.2.1
      prosemirror-model: 1.18.3
      prosemirror-state: 1.4.2
-      prosemirror-view: 1.29.2
+      prosemirror-view: 1.31.7
    dev: true

  /prosemirror-history@1.3.0:
@ -1371,15 +1371,15 @@ packages:
    dependencies:
      prosemirror-model: 1.18.3
      prosemirror-transform: 1.7.1
-      prosemirror-view: 1.29.2
+      prosemirror-view: 1.31.7

  /prosemirror-transform@1.7.1:
    resolution: {integrity: sha512-VteoifAfpt46z0yEt6Fc73A5OID9t/y2QIeR5MgxEwTuitadEunD/V0c9jQW8ziT8pbFM54uTzRLJ/nLuQjMxg==}
    dependencies:
      prosemirror-model: 1.18.3

-  /prosemirror-view@1.29.2:
-    resolution: {integrity: sha512-T4Wm+eTpTH0N9gBJfJR6iecjRX2hYTKewoJUwa92hQOoEz2bYVZy6sYeN+hfnRR506TRvRcuZYqftp4KA8dN+Q==}
+  /prosemirror-view@1.31.7:
+    resolution: {integrity: sha512-Pr7w93yOYmxQwzGIRSaNLZ/1uM6YjnenASzN2H6fO6kGekuzRbgZ/4bHbBTd1u4sIQmL33/TcGmzxxidyPwCjg==}
    dependencies:
      prosemirror-model: 1.18.3
      prosemirror-state: 1.4.2
@ -1457,7 +1457,7 @@ packages:
    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
    hasBin: true
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
    dev: true

  /rope-sequence@1.3.3:
@ -1797,7 +1797,7 @@ packages:
      resolve: 1.22.2
      rollup: 3.20.6
    optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
    dev: true

  /vitefu@0.2.4(vite@4.2.2):
@ -1843,7 +1843,7 @@ packages:
      yjs: 13.5.52
    dev: false

-  /y-prosemirror@1.2.1(prosemirror-model@1.18.3)(prosemirror-state@1.4.2)(prosemirror-view@1.29.2)(y-protocols@1.0.5)(yjs@13.5.52):
+  /y-prosemirror@1.2.1(prosemirror-model@1.18.3)(prosemirror-state@1.4.2)(prosemirror-view@1.31.7)(y-protocols@1.0.5)(yjs@13.5.52):
    resolution: {integrity: sha512-czMBfB1eL2awqmOSxQM8cS/fsUOGE6fjvyPLInrh4crPxFiw67wDpwIW+EGBYKRa04sYbS0ScGj7ZgvWuDrmBQ==}
    peerDependencies:
      prosemirror-model: ^1.7.1
@ -1855,7 +1855,7 @@ packages:
      lib0: 0.2.73
      prosemirror-model: 1.18.3
      prosemirror-state: 1.4.2
-      prosemirror-view: 1.29.2
+      prosemirror-view: 1.31.7
      y-protocols: 1.0.5
      yjs: 13.5.52
    dev: false
--- a/src/editor/BubbleMenu.svelte
+++ b/src/editor/BubbleMenu.svelte
@ -1,5 +1,6 @@
 <script lang="ts">
  import { onDestroy, onMount, tick } from "svelte";
+  import type { Writable } from "svelte/store";
  import type { EditorView } from "prosemirror-view";
  import { EditorState, TextSelection } from "prosemirror-state";

@ -17,6 +18,7 @@
    removeMark,
    markIsActive,
    getFirstMarkInSelection,
+    selectMark,
  } from "./ps-utils";
  import SimpleMarkItem from "./bubblemenu/SimpleMarkItem.svelte";
  import Button from "./bubblemenu/Button.svelte";
@ -28,6 +30,7 @@
  export let view: EditorView;
  export let state: EditorState;
  export let worldY: WorldY;
+  export let editingLink: Writable<false | "new" | "selection">;

  let changingProp:
    | false
@ -55,36 +58,19 @@
  }

  function startEditingLink() {
-    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
-    // TODO: quizás queremos poner algo tipo https://sutty.nl por defecto?
-    if (!match) {
-      changingProp = { type: "link", url: "" };
-      return;
-    }
-
-    view.dispatch(
-      state.tr.setSelection(
-        TextSelection.create(
-          state.doc,
-          match.position,
-          match.position + match.node.nodeSize
-        )
-      )
+    const match = getFirstMarkInSelection(
+      view.state,
+      view.state.schema.marks.link,
    );
-    changingProp = { type: "link", url: match.mark.attrs.href };
-  }
-
-  function removeLink() {
-    changingProp = false;
-    runCommand(removeMark(view.state.schema.marks.link));
-  }
-
-  function onChangeLink(event: Event) {
-    changingProp = false;
-    const url = (event.target as HTMLInputElement).value;
-    runCommand(updateMark(view.state.schema.marks.link, { href: url }));
+    if (match) {
+      selectMark(match, view.state, view.dispatch);
+      $editingLink = "selection";
+    } else if (!view.state.selection.empty) {
+      $editingLink = "selection";
+    } else {
+      runCommand(removeMark(view.state.schema.marks.link));
+      $editingLink = "new";
+    }
  }

  let makingInternalLink = false;
@ -134,7 +120,7 @@ transform: scale(${1 / viewport.scale});
  </Modal>
 {/if}

-<div class="floating" style={barStyle}>
+<div class="floating z-40" style={barStyle}>
  <Linking {state} />
  <div class="bubble" hidden={state.selection.empty}>
    {#if changingProp === false}
@ -162,17 +148,6 @@ transform: scale(${1 / viewport.scale});
        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>
@ -202,19 +177,14 @@ transform: scale(${1 / viewport.scale});
    opacity: 1;
    height: auto;

-    transition: opacity 0.2s, visibility 0.2s, height 0.2s;
+    transition:
+      opacity 0.2s,
+      visibility 0.2s,
+      height 0.2s;
  }
  .bubble[hidden] {
    visibility: hidden;
    opacity: 0;
    height: 0;
  }
-
-  .bubble input {
-    appearance: none;
-    background: none;
-    color: inherit;
-    border: none;
-    font-size: 1.25em;
-  }
 </style>
--- a/src/editor/Editor.svelte
+++ b/src/editor/Editor.svelte
@ -83,7 +83,7 @@
    bind:this={wrapperEl}
  />
  {#if view}
-    <BubbleMenu {view} {worldY} state={updatedState} />
+    <BubbleMenu {view} {worldY} {editingLink} state={updatedState} />
  {/if}
 </div>

--- a/src/editor/bubblemenu/EditLinkMenu.svelte
+++ b/src/editor/bubblemenu/EditLinkMenu.svelte
@ -4,8 +4,13 @@
  import { getFirstMarkInSelection } from "../ps-utils";
  import { readable, type Writable } from "svelte/store";
  import { nanoid } from "nanoid";
-  import { markSelectionFloatingUi } from "./floatingUi";
-  import { autoPlacement, shift, offset } from "@floating-ui/dom";
+  import { linkFloatingUi, selectionFloatingUi } from "./floatingUi";
+  import {
+    autoPlacement,
+    shift,
+    offset,
+    type ComputePositionConfig,
+  } from "@floating-ui/dom";

  export let state: EditorState;
  export let view: EditorView;
@ -76,15 +81,12 @@

  $: shown = !!$editingLink;

-  $: linkMatch =
-    state && getFirstMarkInSelection(view.state, view.state.schema.marks.link);
-  $: style =
-    shown && linkMatch
-      ? markSelectionFloatingUi(view, linkMatch, formEl, {
-          placement: "top",
-          middleware: [offset(6), autoPlacement(), shift({ padding: 5 })],
-        })
-      : readable("");
+  $: style = shown
+    ? selectionFloatingUi(formEl, {
+        placement: "top",
+        middleware: [offset(6), autoPlacement(), shift({ padding: 5 })],
+      })
+    : readable("");
 </script>

 <svelte:document on:pointerdown={detectFocus} />
--- a/src/editor/bubblemenu/LinkTooltip.svelte
+++ b/src/editor/bubblemenu/LinkTooltip.svelte
@ -3,11 +3,10 @@
  import {
    getFirstMarkInSelection,
    getMarkRange,
-    removeMark,
    selectMark,
  } from "../ps-utils";
  import type { EditorView } from "prosemirror-view";
-  import { markSelectionFloatingUi } from "./floatingUi";
+  import { linkFloatingUi, selectionFloatingUi } from "./floatingUi";
  import { readable, type Writable } from "svelte/store";
  import { flip, shift, offset } from "@floating-ui/dom";
  import EditIcon from "eva-icons/outline/svg/edit-outline.svg";
@ -22,13 +21,12 @@
  $: link = state && getFirstMarkInSelection(view.state, markType);
  $: shown = !!link && !$editingLink;

-  $: style =
-    shown && link
-      ? markSelectionFloatingUi(view, link, tooltipEl, {
-          placement: "bottom",
-          middleware: [offset(6), flip(), shift({ padding: 5 })],
-        })
-      : readable("");
+  $: style = shown
+    ? linkFloatingUi(view, tooltipEl, {
+        placement: "bottom",
+        middleware: [offset(6), flip(), shift({ padding: 5 })],
+      })
+    : readable("");

  function editLink() {
    if (!link) return;
@ -44,7 +42,7 @@
 </script>

 <div
-  class="absolute z-30 w-max items-center overflow-hidden rounded border border-neutral-200/70 bg-white px-1 leading-none shadow-lg dark:border-neutral-700 dark:bg-neutral-900"
+  class="absolute z-20 w-max items-center overflow-hidden rounded border border-neutral-200/70 bg-white px-1 leading-none shadow-lg dark:border-neutral-700 dark:bg-neutral-900"
  class:flex={shown}
  class:hidden={!shown}
  bind:this={tooltipEl}
--- a/src/editor/bubblemenu/floatingUi.ts
+++ b/src/editor/bubblemenu/floatingUi.ts
@ -1,19 +1,16 @@
 import { readable, type Readable } from "svelte/store";
-import {
-  computePosition,
-  autoUpdate,
-  autoPlacement,
-  shift,
-  offset,
-} from "@floating-ui/dom";
-import type { ComputePositionConfig } from "@floating-ui/dom/src/types";
-import type { MarkMatch } from "../ps-utils";
+import { computePosition, autoUpdate } from "@floating-ui/dom";
+import type {
+  ComputePositionConfig,
+  ReferenceElement,
+} from "@floating-ui/dom/src/types";
 import type { EditorView } from "prosemirror-view";
+import { getFirstMarkInSelection } from "../ps-utils";

 export type Style = string;

 export function floatingUi(
-  refEl: Element,
+  refEl: ReferenceElement,
  tooltipEl: HTMLElement,
  options?: Partial<ComputePositionConfig>,
 ): Readable<Style> {
@ -28,14 +25,30 @@ export function floatingUi(
  };
 }

-export function markSelectionFloatingUi(
-  view: EditorView,
-  mark: MarkMatch,
+export function selectionFloatingUi(
  tooltipEl: HTMLElement,
  options?: Partial<ComputePositionConfig>,
 ): Readable<Style> {
-  let { node } = (view as any).docView.domFromPos(view.state.selection.from);
-  if (!node || !mark || !tooltipEl) return readable("");
-  if (!(node instanceof Element)) node = node.parentElement;
-  return floatingUi(node, tooltipEl, options);
+  const sel = document.getSelection();
+  const range = sel?.getRangeAt(0);
+
+  if (!range) return readable("");
+  return floatingUi(range, tooltipEl, options);
+}
+
+export function linkFloatingUi(
+  view: EditorView,
+  tooltipEl: HTMLElement,
+  options?: Partial<ComputePositionConfig>,
+): Readable<Style> {
+  const mark = getFirstMarkInSelection(
+    view.state,
+    view.state.schema.marks.link,
+  );
+  if (!mark) return readable("");
+  let node = view.nodeDOM(mark?.position);
+  if (!node) return readable("");
+  const element = node instanceof Element ? node : node.parentElement;
+  if (!element) return readable("");
+  return floatingUi(element, tooltipEl, options);
 }