Skip to content

Commit 8cf0261

Browse files
johannesmutterjohannesmutter
committed
Added Github Link in header;
Made last block non-editable; Fix spacing gap variable name;
1 parent bbda5ec commit 8cf0261

File tree

5 files changed

+45
-22
lines changed

5 files changed

+45
-22
lines changed

‎src/lib/StoryBlock.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
</div>
2727
<div class="caption">
2828
<!-- ATTENTION: Do not format the following lines, as whitespace will mess up contenteditable -->
29-
<Text class='heading2' path={[...path,'title']} />
30-
<Text class='body' path={[...path,'description']} />
29+
<Text class='heading2' path={[...path,'title']} editable={block.editable} />
30+
<Text class='body' path={[...path,'description']} editable={block.editable} />
3131
</div>
3232
</div>
3333

‎src/lib/Text.svelte

+16-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
import { getContext } from 'svelte';
33
const svedit = getContext('svedit');
44
5-
let { path, class: css_class } = $props();
5+
let {
6+
path,
7+
class: css_class,
8+
editable = true
9+
} = $props();
610
711
function render_annotated_text(text, annotations) {
812
let fragments = [];
@@ -40,12 +44,17 @@
4044
let fragments = $derived(render_annotated_text(svedit.entry_session.get(path)[0], svedit.entry_session.get(path)[1]));
4145
let plain_text = $derived(svedit.entry_session.get(path)[0]);
4246
47+
function handle_link_click(e) {
48+
if (editable) {
49+
e.preventDefault();
50+
}
51+
}
4352
</script>
4453

4554

4655
<!-- ATTENTION: The comment blocks are needed to prevent unwanted text nodes with whitespace. -->
4756
<div
48-
contenteditable="true"
57+
contenteditable={editable}
4958
data-type="text"
5059
data-path={path.join('.')}
5160
style="anchor-name: --{path.join('-')};"
@@ -61,7 +70,7 @@
6170
-->{:else if fragment.type === 'strong'}<!--
6271
--><strong>{fragment.content}</strong><!--
6372
-->{:else if fragment.type === 'link'}<!--
64-
--><a onclick={(e)=> {e.preventDefault()}} style="anchor-name: --{path.join('-') + '-' + fragment.annotation_index};" href={fragment.href}>{fragment.content}</a><!--
73+
--><a onclick={handle_link_click} style="anchor-name: --{path.join('-') + '-' + fragment.annotation_index};" href={fragment.href} target={fragment.target || '_self'}>{fragment.content}</a><!--
6574
-->{:else}<!--
6675
-->{fragment.content}<!--
6776
-->{/if}<!--
@@ -76,8 +85,10 @@
7685
&.heading1 {
7786
text-wrap: var(--text-wrap);
7887
}
79-
a {
80-
cursor: text;
88+
[contenteditable="true"] {
89+
a {
90+
cursor: text;
91+
}
8192
}
8293
}
8394
</style>

‎src/lib/styles/spacing.css

+12-11
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
.me-auto { margin-inline-end: auto; }
3333
.mbs-auto { margin-block-start: auto; }
3434
.mbe-auto { margin-block-end: auto; }
35+
.m-0 { margin: 0; }
3536

3637

3738
/* for less than ~10 spacing values, we use the following approach */
@@ -80,17 +81,17 @@
8081

8182
/****************** Gap Utility Classes (Tailwind compatible) ******************/
8283

83-
.gap-05 { --gx: var(--s-05); } .gap-x-05 { --gx: var(--s-05); } .gap-y-05 { --gy: var(--s-05); }
84-
.gap-1 { --gx: var(--s-1); } .gap-x-1 { --gx: var(--s-1); } .gap-y-1 { --gy: var(--s-1); }
85-
.gap-2 { --gx: var(--s-2); } .gap-x-2 { --gx: var(--s-2); } .gap-y-2 { --gy: var(--s-2); }
86-
.gap-3 { --gx: var(--s-3); } .gap-x-3 { --gx: var(--s-3); } .gap-y-3 { --gy: var(--s-3); }
87-
.gap-4 { --gx: var(--s-4); } .gap-x-4 { --gx: var(--s-4); } .gap-y-4 { --gy: var(--s-4); }
88-
.gap-5 { --gx: var(--s-5); } .gap-x-5 { --gx: var(--s-5); } .gap-y-5 { --gy: var(--s-5); }
89-
.gap-6 { --gx: var(--s-6); } .gap-x-6 { --gx: var(--s-6); } .gap-y-6 { --gy: var(--s-6); }
90-
.gap-7 { --gx: var(--s-7); } .gap-x-7 { --gx: var(--s-7); } .gap-y-7 { --gy: var(--s-7); }
91-
.gap-8 { --gx: var(--s-8); } .gap-x-8 { --gx: var(--s-8); } .gap-y-8 { --gy: var(--s-8); }
92-
.gap-9 { --gx: var(--s-9); } .gap-x-9 { --gx: var(--s-9); } .gap-y-9 { --gy: var(--s-9); }
93-
.gap-10 { --gx: var(--s-10); } .gap-x-10 { --gx: var(--s-10); } .gap-y-10 { --gy: var(--s-10); }
84+
.gap-05 { --g: var(--s-05); } .gap-x-05 { --gx: var(--s-05); } .gap-y-05 { --gy: var(--s-05); }
85+
.gap-1 { --g: var(--s-1); } .gap-x-1 { --gx: var(--s-1); } .gap-y-1 { --gy: var(--s-1); }
86+
.gap-2 { --g: var(--s-2); } .gap-x-2 { --gx: var(--s-2); } .gap-y-2 { --gy: var(--s-2); }
87+
.gap-3 { --g: var(--s-3); } .gap-x-3 { --gx: var(--s-3); } .gap-y-3 { --gy: var(--s-3); }
88+
.gap-4 { --g: var(--s-4); } .gap-x-4 { --gx: var(--s-4); } .gap-y-4 { --gy: var(--s-4); }
89+
.gap-5 { --g: var(--s-5); } .gap-x-5 { --gx: var(--s-5); } .gap-y-5 { --gy: var(--s-5); }
90+
.gap-6 { --g: var(--s-6); } .gap-x-6 { --gx: var(--s-6); } .gap-y-6 { --gy: var(--s-6); }
91+
.gap-7 { --g: var(--s-7); } .gap-x-7 { --gx: var(--s-7); } .gap-y-7 { --gy: var(--s-7); }
92+
.gap-8 { --g: var(--s-8); } .gap-x-8 { --gx: var(--s-8); } .gap-y-8 { --gy: var(--s-8); }
93+
.gap-9 { --g: var(--s-9); } .gap-x-9 { --gx: var(--s-9); } .gap-y-9 { --gy: var(--s-9); }
94+
.gap-10 { --g: var(--s-10); } .gap-x-10 { --gx: var(--s-10); } .gap-y-10 { --gy: var(--s-10); }
9495

9596
.gap-05, .gap-1, .gap-2, .gap-3, .gap-4, .gap-5, .gap-6, .gap-7, .gap-8, .gap-9, .gap-10 { gap: var(--g); }
9697
.gap-x-05, .gap-x-1, .gap-x-2, .gap-x-3, .gap-x-4, .gap-x-5, .gap-x-6, .gap-x-7, .gap-x-8, .gap-x-9, .gap-x-10 { column-gap: var(--gx); }

‎src/lib/styles/typography.css

+6
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,12 @@ button {
133133
.flex-row {
134134
flex-direction: row;
135135
}
136+
.items-center {
137+
align-items: center;
138+
}
139+
.flex-wrap {
140+
flex-wrap: wrap;
141+
}
136142

137143
a {
138144
text-decoration: underline;

‎src/routes/+page.svelte

+9-4
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,14 @@
3333
{
3434
type: 'story',
3535
layout: 1,
36+
editable: false,
3637
image: '/images/github.svg',
3738
title: ['Star us on GitHub', []],
3839
description: ['Please star Svedit on GitHub or watch the repo to be notified about updates. Svedit is made by Michael Aufreiter and Johannes Mutter and is licensed under the MIT License.',
3940
[
40-
[0, 28, "link", {"href": "https://github.com/michael/svedit/"}],
41-
[95, 112, "link", {"href": "https://michaelaufreiter.com"}],
42-
[117,132, "link", {"href": "https://mutter.co"}],
41+
[0, 28, "link", {"href": "https://github.com/michael/svedit/", target: "_blank"}],
42+
[95, 112, "link", {"href": "https://michaelaufreiter.com", target: "_blank"}],
43+
[117,132, "link", {"href": "https://mutter.co", target: "_blank"}],
4344
]
4445
]
4546
},
@@ -49,14 +50,18 @@
4950

5051
<svelte:head>
5152
<title>Svedit - A rich content editor for Svelte 5</title>
53+
<script async defer src="https://buttons.github.io/buttons.js"></script>
5254
</svelte:head>
5355

5456
<div class="demo-wrapper">
5557
<TextToolBar {entry_session} />
5658

5759
<Svedit {entry_session} editable={true} class='flex-column'>
5860
<div class='flex-column gap-y-10 p-10 max-w-screen-lg mx-auto w-full'>
59-
<Text path={['title']} class='heading1' />
61+
<div class='flex-row flex-wrap gap-5 items-center'>
62+
<Text path={['title']} class='heading1 m-0' />
63+
<a class="github-button" href="https://github.com/michael/svedit" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Star michael/svedit on GitHub">Star</a>
64+
</div>
6065
<Text path={['subtitle']} class='heading3' />
6166
</div>
6267
<!-- NOTE: non-editable island must have contenteditable="false" and contain some text content, otherwise invalid selections occur. -->

0 commit comments

Comments
 (0)