Merge pull request #245 from matt8707/empty-section

Allow section name to be empty, close #129, close #130, close #232

src/lib/Main/SectionHeader.svelte

@@ -2,6 +2,7 @@
 	import { editMode } from '$lib/Stores';
 	import DragIndicator from '$lib/Main/DragIndicator.svelte';
 	import DeleteButton from '$lib/Main/DeleteButton.svelte';
+	import SectionTitle from '$lib/Main/SectionTitle.svelte';
 
 	export let view: any;
 	export let section: any;
@@ -10,13 +11,11 @@
 <header>
 	<h1 style:cursor={$editMode ? 'text' : 'initial'}>
 		{#if $editMode}
-			{#await import('$lib/Main/SectionTitle.svelte')}
-				{section.name}
-			{:then inPlaceEdit}
-				<svelte:component this={inPlaceEdit.default} bind:value={section.name} />
-			{/await}
+			<SectionTitle bind:value={section.name} />
+		{:else if section?.name === ''}
+			{@html '&nbsp;'}
 		{:else}
-			{section.name}
+			{section?.name}
 		{/if}
 	</h1>
 

src/lib/Main/SectionTitle.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { editMode, record } from '$lib/Stores';
-	import { onMount, createEventDispatcher } from 'svelte';
+	import { editMode, lang, record } from '$lib/Stores';
+	import { createEventDispatcher } from 'svelte';
 
 	export let value: string;
 
@@ -10,25 +10,16 @@
 
 	const dispatch = createEventDispatcher();
 
-	onMount(() => {
-		prevValue = value;
-	});
-
 	/**
 	 * Dispatches title change on submit or blur,
 	 * also restores required title if empty
 	 */
 	function handleSubmit() {
 		if (!$editMode) return;
 
-		if (value === '') {
-			value = prevValue;
-		}
-
 		dispatch('submit', value);
 		$record();
 
-		prevValue = value;
 		if (input) input.blur();
 	}
 
@@ -45,7 +36,11 @@
 
 <!-- reference width -->
 <div class="hidden" bind:offsetWidth={width}>
-	{@html value.replaceAll(' ', '&nbsp;')}
+	{#if value === ''}
+		{$lang('section')}
+	{:else}
+		{@html value.replaceAll(' ', '&nbsp;')}
+	{/if}
 </div>
 
 <form on:submit|preventDefault={handleSubmit}>
@@ -57,9 +52,9 @@
 		on:blur={handleSubmit}
 		on:keydown={handleKeydown}
 		style:width="{width + 1}px"
-		required={true}
 		autocomplete="off"
 		spellcheck="false"
+		placeholder={$lang('section')}
 	/>
 </form>