This repository has been archived by the owner on Jan 6, 2023. It is now read-only.
/
Editor.svelte
120 lines (103 loc) · 2.51 KB
/
Editor.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script>
import { onMount, createEventDispatcher } from "svelte";
import { debounce } from "throttle-debounce";
import { isActive, content, historyStore, defaultData, i18n } from "./stores";
import { format, setSpellCheck } from "./helpers";
import deepClone from "deep-clone";
import Create from "./actions/Create.svelte";
import Block from "./Block.svelte";
import Sidebar from "./Sidebar.svelte";
export const history = historyStore();
export let active = true;
export let spellCheck = false;
export let sidebar = true;
export let placeholder = "Let's write an awesome story!";
export let confirmDelete = "Are you sure?";
export let data;
export let translation = {};
export const toggleFormat = (tag) => {
format(tag);
};
export const getContent = () => {
return content;
};
export const setActive = (bool) => {
$isActive = bool;
};
export const update = () => {
onInit();
};
let editor;
const dispatch = createEventDispatcher();
const onInit = () => {
$isActive = active;
if (data && data.blocks) {
$content = deepClone(data);
} else {
$content = deepClone(defaultData);
}
$i18n = {
...$i18n,
...translation,
};
history.reset();
dispatch("init");
};
const activateHistory = () => {
$history.active = true;
};
const emitChange = debounce(500, () => {
$history.active && history.add();
dispatch("change", $content);
});
setSpellCheck(spellCheck);
onMount(onInit);
content.subscribe(() => {
dispatch("input");
emitChange();
});
</script>
<style>
.omnia-editor {
width: 100%;
margin-left: auto;
margin-right: auto;
line-height: 2.5rem;
text-align: justify;
background-color: inherit;
display: flex;
flex-direction: row;
}
@media (max-width: 960px) {
.omnia-editor {
line-height: 2rem;
}
}
.omnia-blocks {
width: 100%;
}
</style>
<div class="omnia-editor" bind:this={editor}>
{#if sidebar}
<Sidebar>
<slot />
</Sidebar>
{/if}
<div class="omnia-blocks">
{#if $content && $content.blocks}
{#each $content.blocks as block, i}
<Block
{block}
{i}
{confirmDelete}
{placeholder}
on:activateHistory={activateHistory} />
{/each}
{#if $isActive}
<Create
on:create={(e) => content.addBlock(0, e.detail, '')}
on:remove={() => content.removeBlock(0, false, confirmDelete)} />
{/if}
{/if}
</div>
</div>