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) {
/** @type {Link[]} */
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) => {
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 (
lastWasLinkMark &&
lastLink &&
("href" in lastLink
? lastLink.href === mark.attrs.href
@ -51,14 +57,19 @@
content,
href: mark.attrs.href,
});
lastWasLinkMark = true;
} else if (mark.type === schema.marks.internal_link) {
links.push({
type: "internal",
content,
id: mark.attrs.id,
});
lastWasLinkMark = true;
} else {
lastWasLinkMark = false;
}
}
if (node.marks.length == 0) lastWasLinkMark = false;
});
return links;
}
@ -67,19 +78,21 @@
</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 class="links">
{#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>
</div>
<style>
@ -87,7 +100,11 @@
max-width: 1280px;
width: 100%;
margin: 0 auto;
overflow-x: auto;
}
.links {
display: flex;
min-width: min-content;
}
a {
@ -101,7 +118,7 @@
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
max-width: 40vw;
max-width: 45vw;
white-space: nowrap;
}
</style>