Skip to content

Commit 020768c

Browse files
michaelmichael
committed
Svedit.
1 parent 7be5e59 commit 020768c

9 files changed

+47
-57
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "vabimoto-js",
2+
"name": "svedit",
33
"version": "0.0.1",
44
"private": true,
55
"scripts": {

‎src/lib/Container.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { getContext } from 'svelte';
3-
const surface = getContext('surface');
3+
const svedit = getContext('svedit');
44
55
let {
66
path,
@@ -11,7 +11,7 @@
1111

1212
<div data-type="container" data-path={path.join('.')}>
1313
<Layout>
14-
{#each surface.entry_session.get(path) as _block, index}
14+
{#each svedit.entry_session.get(path) as _block, index}
1515
{@render block(_block, [...path, index], index)}
1616
{/each}
1717
</Layout>

‎src/lib/ListBlock.svelte

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import Container from '$lib/Container.svelte';
44
import ListLayout from '$lib/ListLayout.svelte';
55
import ListItemBlock from '$lib/ListItemBlock.svelte';
6-
const surface = getContext('surface');
6+
const svedit = getContext('svedit');
77
88
let {
99
path
@@ -12,11 +12,11 @@
1212
// TODO: we should render this off-canvas
1313
function is_selected() {
1414
let selected = false;
15-
if (surface.entry_session?.selection?.type === 'container') {
15+
if (svedit.entry_session?.selection?.type === 'container') {
1616
const block_index = parseInt(path.at(-1));
17-
const sel_start = Math.min(surface.entry_session.selection.anchor_offset, surface.entry_session.selection.focus_offset);
18-
const sel_end = Math.max(surface.entry_session.selection.anchor_offset, surface.entry_session.selection.focus_offset) - 1;
19-
const is_container_selected = surface.entry_session.selection.path.join('.') === path.slice(0, -1).join('.');
17+
const sel_start = Math.min(svedit.entry_session.selection.anchor_offset, svedit.entry_session.selection.focus_offset);
18+
const sel_end = Math.max(svedit.entry_session.selection.anchor_offset, svedit.entry_session.selection.focus_offset) - 1;
19+
const is_container_selected = svedit.entry_session.selection.path.join('.') === path.slice(0, -1).join('.');
2020
return is_container_selected && block_index >= sel_start && block_index <= sel_end;
2121
}
2222
return selected;

‎src/lib/ListItemBlock.svelte

+8-18
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,40 @@
11
<script>
22
import Text from '$lib/Text.svelte';
33
import { getContext } from 'svelte';
4-
const surface = getContext('surface');
4+
const svedit = getContext('svedit');
55
66
let {
77
path
88
} = $props();
99
1010
function is_selected() {
1111
let selected = false;
12-
if (surface.entry_session?.selection?.type === 'container') {
12+
if (svedit.entry_session?.selection?.type === 'container') {
1313
const block_index = parseInt(path.at(-1));
14-
const sel_start = Math.min(surface.entry_session.selection.anchor_offset, surface.entry_session.selection.focus_offset);
15-
const sel_end = Math.max(surface.entry_session.selection.anchor_offset, surface.entry_session.selection.focus_offset) - 1;
16-
const is_container_selected = surface.entry_session.selection.path.join('.') === path.slice(0, -1).join('.');
14+
const sel_start = Math.min(svedit.entry_session.selection.anchor_offset, svedit.entry_session.selection.focus_offset);
15+
const sel_end = Math.max(svedit.entry_session.selection.anchor_offset, svedit.entry_session.selection.focus_offset) - 1;
16+
const is_container_selected = svedit.entry_session.selection.path.join('.') === path.slice(0, -1).join('.');
1717
return is_container_selected && block_index >= sel_start && block_index <= sel_end;
1818
}
1919
return selected;
2020
}
21-
22-
function is_container_cursor_before() {
23-
// if (surface.entry_session?.selection?.type === 'container') {
24-
// const block_index = path.at(-1)
25-
// const sel_start = Math.min(surface.entry_session.selection.anchor_offset, surface.entry_session.selection.focus_offset);
26-
// return block_index < sel_start;
27-
// }
28-
// return false;
29-
}
3021
</script>
3122
32-
3323
<!-- IMPORTANT: There must not be any white space between the diff and <Text>-->
3424
<div data-path={path.join('.')} data-type="block" class:selected={is_selected()} data-index={path.at(-1)}><Text path={[...path,'description']} /></div>
3525
3626
<style>
3727
div {
3828
position: relative;
39-
padding-left: 1.5em; /* Adjust as needed */
29+
padding-left: 1.5em;
4030
}
4131
4232
div::before {
4333
content: '\25E6'; /* Unicode for a hollow circle */
4434
position: absolute;
45-
left: 0.5em; /* Adjust as needed */
35+
left: 0.5em;
4636
top: 0;
47-
font-size: 1em; /* Adjust as needed */
37+
font-size: 1em;
4838
}
4939
.selected {
5040
outline: 1px solid #0075d5;

‎src/lib/StoryBlock.svelte

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import Text from '$lib/Text.svelte';
33
import { getContext } from 'svelte';
4-
const surface = getContext('surface');
4+
const svedit = getContext('svedit');
55
66
let {
77
path
@@ -10,11 +10,11 @@
1010
// TODO: we should render this off-canvas
1111
function is_selected() {
1212
let selected = false;
13-
if (surface.entry_session?.selection?.type === 'container') {
13+
if (svedit.entry_session?.selection?.type === 'container') {
1414
const block_index = parseInt(path.at(-1));
15-
const sel_start = Math.min(surface.entry_session.selection.anchor_offset, surface.entry_session.selection.focus_offset);
16-
const sel_end = Math.max(surface.entry_session.selection.anchor_offset, surface.entry_session.selection.focus_offset) - 1;
17-
const is_container_selected = surface.entry_session.selection.path.join('.') === path.slice(0, -1).join('.');
15+
const sel_start = Math.min(svedit.entry_session.selection.anchor_offset, svedit.entry_session.selection.focus_offset);
16+
const sel_end = Math.max(svedit.entry_session.selection.anchor_offset, svedit.entry_session.selection.focus_offset) - 1;
17+
const is_container_selected = svedit.entry_session.selection.path.join('.') === path.slice(0, -1).join('.');
1818
return is_container_selected && block_index >= sel_start && block_index <= sel_end;
1919
}
2020
return selected;

‎src/lib/Surface.svelte ‎src/lib/Svedit.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
let is_mouse_down = $state(false);
1212
// let prev_dom_range = $state(); // used to detect certain changes in the dom selection
1313
14-
setContext("surface", {
14+
setContext("svedit", {
1515
get entry_session() {
1616
return entry_session;
1717
}
@@ -83,7 +83,7 @@
8383
8484
function onkeydown(e) {
8585
const selection = entry_session.selection;
86-
console.log('onkeydown', e.key);
86+
// console.log('onkeydown', e.key);
8787
if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
8888
entry_session.undo();
8989
e.preventDefault();

‎src/lib/Text.svelte

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import { getContext } from 'svelte';
33
4-
const surface = getContext('surface');
4+
const svedit = getContext('svedit');
55
66
let {
77
path
@@ -39,29 +39,29 @@
3939
return fragments;
4040
}
4141
42-
let fragments = $derived(render_annotated_text(surface.entry_session.get(path)[0], surface.entry_session.get(path)[1]));
43-
let plain_text = $derived(surface.entry_session.get(path)[0]);
42+
let fragments = $derived(render_annotated_text(svedit.entry_session.get(path)[0], svedit.entry_session.get(path)[1]));
43+
let plain_text = $derived(svedit.entry_session.get(path)[0]);
4444
</script>
4545

4646

47-
<!-- ATTENTION: the weird comment blocks are needed here so no whitespace is rendered. -->
47+
<!-- ATTENTION: The comment blocks are needed to prevent unwanted text nodes containing whitespace. -->
4848
<div contenteditable="true" data-type="text" data-path={path.join('.')}><!--
49-
we need to add a zero width space here so that the text node is not empty and can be selected with the cursor
49+
--><!-- Zero-width space for empty text nodes --><!--
5050
-->{#if plain_text.length === 0}&#8203;{/if}<!--
51-
-->{#each fragments as fragment}
52-
{#if typeof fragment === 'string'}
53-
{fragment}
54-
{:else if fragment.type === 'emphasis'}
55-
<em>{fragment.content}</em>
56-
{:else if fragment.type === 'strong'}
57-
<strong>{fragment.content}</strong>
58-
{:else if fragment.type === 'link'}
59-
<a href={fragment.href}>{fragment.content}</a>
60-
{:else}
61-
{fragment.content}
62-
{/if}
63-
{/each}
64-
</div>
51+
-->{#each fragments as fragment}<!--
52+
-->{#if typeof fragment === 'string'}<!--
53+
-->{fragment}<!--
54+
-->{:else if fragment.type === 'emphasis'}<!--
55+
--><em>{fragment.content}</em><!--
56+
-->{:else if fragment.type === 'strong'}<!--
57+
--><strong>{fragment.content}</strong><!--
58+
-->{:else if fragment.type === 'link'}<!--
59+
--><a href={fragment.href}>{fragment.content}</a><!--
60+
-->{:else}<!--
61+
-->{fragment.content}<!--
62+
-->{/if}<!--
63+
-->{/each}<!--
64+
--></div>
6565

6666
<style>
6767
div {

‎src/lib/UnknownBlock.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { getContext } from 'svelte';
3-
const surface = getContext('surface');
3+
const svedit = getContext('svedit');
44
55
let {
66
path,

‎src/routes/+page.svelte

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import StoryBlock from '$lib/StoryBlock.svelte';
44
import ListBlock from '$lib/ListBlock.svelte';
55
import UnknownBlock from '$lib/UnknownBlock.svelte';
6-
import Surface from '$lib/Surface.svelte';
6+
import Svedit from '$lib/Svedit.svelte';
77
import Container from '$lib/Container.svelte';
88
import EntrySession from '$lib/EntrySession.svelte';
99
import TwoColumnGrid from '$lib/TwoColumnGrid.svelte';
@@ -72,7 +72,7 @@
7272
<button onclick={() => entry_session.annotate_text('emphasis')} disabled={entry_session.active_annotation() && entry_session.active_annotation()?.[2] !== 'emphasis'}>Italic</button>
7373
<button onclick={insert_link} disabled={entry_session.active_annotation()}>Link</button>
7474

75-
<Surface {entry_session} editable={true}>
75+
<Svedit {entry_session} editable={true}>
7676
<div style="display: flex; flex-direction: column; gap: 20px; padding-top: 10px;">
7777
<Text path={['title']} />
7878
<!-- Important: div must have contenteditable="false" and contain some content, otherwise invalid selections occur. -->
@@ -92,9 +92,9 @@
9292
{/snippet}
9393
</Container>
9494
</div>
95-
</Surface>
95+
</Svedit>
9696
<hr/>
97-
<pre style="text-wrap: wrap;"><code>Document: {JSON.stringify(entry_session.entry)}</code><br/><br/><code>Selection: {JSON.stringify(entry_session.selection)}</code></pre>
97+
<pre style="text-wrap: wrap;"><code>Entry: {JSON.stringify(entry_session.entry)}</code><br/><br/><code>Selection: {JSON.stringify(entry_session.selection)}</code></pre>
9898
</div>
9999

100100
<style>

0 commit comments

Comments
 (0)