Compare commits

...

3 commits

Author SHA1 Message Date
c98a5c8319 solo mostrar enlaces si se está en un bloque
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
2023-04-18 19:27:26 -03:00
076d661027 poder scrollear links 2023-04-18 19:19:24 -03:00
a45d1a00eb no deduplicar links que no están al lado 2023-04-18 19:19:11 -03:00

View file

@ -31,12 +31,18 @@
function getLinks(node) { function getLinks(node) {
/** @type {Link[]} */ /** @type {Link[]} */
let links = []; let links = [];
// a veces selecciona el documento entero y no queremos mostrar todos los enlaces
if (node.type.spec.group !== "block") return [];
let lastWasLinkMark = false;
node.descendants((node) => { node.descendants((node) => {
for (const mark of node.marks) { for (const mark of node.marks) {
const content = node.textContent; const content = node.textContent;
// no repetir marks interrumpidas por otras marks // no repetir marks interrumpidas por otras marks
const lastLink = links[links.length - 1] || null; const lastLink = links[links.length - 1] || null;
if ( if (
lastWasLinkMark &&
lastLink && lastLink &&
("href" in lastLink ("href" in lastLink
? lastLink.href === mark.attrs.href ? lastLink.href === mark.attrs.href
@ -51,14 +57,19 @@
content, content,
href: mark.attrs.href, href: mark.attrs.href,
}); });
lastWasLinkMark = true;
} else if (mark.type === schema.marks.internal_link) { } else if (mark.type === schema.marks.internal_link) {
links.push({ links.push({
type: "internal", type: "internal",
content, content,
id: mark.attrs.id, id: mark.attrs.id,
}); });
lastWasLinkMark = true;
} else {
lastWasLinkMark = false;
} }
} }
if (node.marks.length == 0) lastWasLinkMark = false;
}); });
return links; return links;
} }
@ -67,19 +78,21 @@
</script> </script>
<div class="linking"> <div class="linking">
{#each links as link} <div class="links">
<a {#each links as link}
href={"href" in link ? link.href : link.id} <a
target={link.type === "external" ? "_blank" : null} href={"href" in link ? link.href : link.id}
> target={link.type === "external" ? "_blank" : null}
{#if link.type === "internal"} >
<InternalLinkIcon style={svgStyle} /> {#if link.type === "internal"}
{:else} <InternalLinkIcon style={svgStyle} />
<LinkIcon style={svgStyle} /> {:else}
{/if} <LinkIcon style={svgStyle} />
{link.content} {/if}
</a> {link.content}
{/each} </a>
{/each}
</div>
</div> </div>
<style> <style>
@ -87,7 +100,11 @@
max-width: 1280px; max-width: 1280px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
overflow-x: auto;
}
.links {
display: flex; display: flex;
min-width: min-content;
} }
a { a {
@ -101,7 +118,7 @@
line-height: 1; line-height: 1;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
max-width: 40vw; max-width: 45vw;
white-space: nowrap; white-space: nowrap;
} }
</style> </style>