Skip to content

Commit c95b920

Browse files
pd4d10pd4d10
committed
feat: add status bar
1 parent 9fbe177 commit c95b920

File tree

8 files changed

+103
-23
lines changed

8 files changed

+103
-23
lines changed

‎examples/svelte/src/App.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,8 @@
111111
:global(body) {
112112
margin: 0 10px;
113113
font-size: 14px;
114+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
115+
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
114116
}
115117
:global(.bytemd) {
116118
height: calc(100vh - 100px);

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"rollup": "^2.32.1",
4141
"rollup-plugin-livereload": "^2.0.0",
4242
"rollup-plugin-postcss": "^3.1.8",
43-
"rollup-plugin-svelte": "^6.1.0",
43+
"rollup-plugin-svelte": "^7.1.0",
4444
"rollup-plugin-terser": "^7.0.2",
4545
"rollup-plugin-visualizer": "^4.1.2",
4646
"rollup-plugin-vue": "^5.1.9",

‎packages/bytemd/src/editor.svelte‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import Viewer from './viewer.svelte';
1010
import { createUtils } from './editor';
1111
import { scrollSync } from './plugins';
12+
import Status from './status.svelte';
1213
1314
export let value: EditorProps['value'] = '';
1415
export let plugins: NonNullable<EditorProps['plugins']> = [];
@@ -18,11 +19,18 @@
1819
export let placeholder: EditorProps['placeholder'];
1920
export let editorConfig: EditorProps['editorConfig'];
2021
21-
let builtinPlugins: BytemdPlugin[] = [];
22+
let scrollSyncInstance = scrollSync();
2223
23-
$: fullPlugins = [...builtinPlugins, ...plugins];
24+
$: fullPlugins = (() => {
25+
const ps = [...plugins];
26+
if (mode === 'split' && scrollSyncEnabled) {
27+
ps.push(scrollSyncInstance);
28+
}
29+
return ps;
30+
})();
2431
2532
let el: HTMLElement;
33+
let previewEl: HTMLElement;
2634
let viewerProps: ViewerProps = {
2735
value,
2836
plugins,
@@ -32,6 +40,7 @@
3240
let editor: Editor;
3341
let activeTab = 0;
3442
let fullscreen = false;
43+
let scrollSyncEnabled = true;
3544
3645
$: context = { editor, $el: el, utils: createUtils(editor) };
3746
@@ -78,8 +87,6 @@
7887
}
7988
8089
onMount(async () => {
81-
builtinPlugins = [scrollSync()];
82-
8390
const [codemirror] = await Promise.all([
8491
import('codemirror'),
8592
// @ts-ignore
@@ -133,6 +140,7 @@
133140
<textarea bind:this={textarea} style="display:none" />
134141
</div>
135142
<div
143+
bind:this={previewEl}
136144
class="bytemd-preview"
137145
style={mode === 'tab' && activeTab === 0 ? 'display:none' : undefined}
138146
>
@@ -143,4 +151,15 @@
143151
/>
144152
</div>
145153
</div>
154+
<Status
155+
scrollVisible={mode === 'split'}
156+
{value}
157+
{scrollSyncEnabled}
158+
on:sync={(e) => {
159+
scrollSyncEnabled = e.detail;
160+
}}
161+
on:top={() => {
162+
previewEl.scrollTo({ top: 0, behavior: 'smooth' });
163+
}}
164+
/>
146165
</div>

‎packages/bytemd/src/status.svelte‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts">
2+
import { createEventDispatcher } from 'svelte';
3+
export let scrollVisible: boolean;
4+
export let value: string;
5+
export let scrollSyncEnabled: boolean;
6+
7+
const dispatch = createEventDispatcher();
8+
9+
$: bytes = new TextEncoder().encode(value).length;
10+
$: lines = value.split('\n').length;
11+
</script>
12+
13+
<div class="bytemd-status">
14+
<div class="bytemd-status-left">
15+
<span>Bytes: <strong>{bytes}</strong></span><span
16+
>Lines: <strong>{lines}</strong></span
17+
>
18+
</div>
19+
{#if scrollVisible}
20+
<div class="bytemd-status-right">
21+
<label
22+
><input
23+
type="checkbox"
24+
checked={scrollSyncEnabled}
25+
on:change={(e) => dispatch('sync', !scrollSyncEnabled)}
26+
/>Scroll sync</label
27+
><span on:click={(e) => dispatch('top')}>Scroll to top</span>
28+
</div>
29+
{/if}
30+
</div>

‎packages/bytemd/src/toolbar.svelte‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,11 @@
2828
<div class="bytemd-tabs">
2929
<span
3030
on:click={() => dispatch('tab', { value: 0 })}
31-
class:bytemd-tab-active={activeTab === 0}
32-
>
33-
Write
34-
</span>
35-
<span
31+
class:bytemd-tab-active={activeTab === 0}>Write</span
32+
><span
3633
on:click={() => dispatch('tab', { value: 1 })}
37-
class:bytemd-tab-active={activeTab === 1}
34+
class:bytemd-tab-active={activeTab === 1}>Preview</span
3835
>
39-
Preview
40-
</span>
4136
</div>
4237
{/if}
4338

@@ -61,8 +56,7 @@
6156
on:click={() => {
6257
window.open('https://github.com/bytedance/bytemd');
6358
}}
64-
/>
65-
<ToolbarButton
59+
/><ToolbarButton
6660
tooltip="Toggle Fullscreen"
6761
icon={fullscreen ? icons.fullscreenOff : icons.fullscreenOn}
6862
style="float:right"

‎packages/bytemd/styles/index.scss‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
border-bottom: 1px solid $gray-200;
1616
font-size: 0;
1717
background-color: $gray-000;
18+
user-select: none;
1819
> span {
1920
display: inline-block;
2021
cursor: pointer;
@@ -53,7 +54,7 @@
5354
}
5455

5556
.bytemd-body {
56-
height: calc(100% - 33px);
57+
height: calc(100% - 33px - 25px);
5758
overflow: auto;
5859
}
5960

@@ -87,6 +88,37 @@
8788
}
8889
}
8990

91+
.bytemd-status {
92+
font-size: 12px;
93+
line-height: 24px;
94+
color: $gray-900;
95+
border-top: 1px solid $gray-200;
96+
user-select: none;
97+
&-left {
98+
float: left;
99+
span {
100+
padding-left: 16px;
101+
}
102+
strong {
103+
font-weight: 600;
104+
}
105+
}
106+
&-right {
107+
float: right;
108+
label,
109+
span {
110+
padding-right: 16px;
111+
cursor: pointer;
112+
}
113+
span:hover {
114+
color: $blue;
115+
}
116+
input {
117+
vertical-align: middle;
118+
}
119+
}
120+
}
121+
90122
.bytemd-fullscreen {
91123
&.bytemd {
92124
position: fixed;

‎rollup.config.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,11 @@ const configs = packages
4343
input: inputFile,
4444
plugins: [
4545
commonjs(),
46-
svelte(),
46+
svelte({
47+
compilerOptions: {
48+
dev: !production,
49+
},
50+
}),
4751
vue(),
4852
resolve({
4953
browser: true,

‎yarn.lock‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9711,14 +9711,13 @@ rollup-plugin-postcss@^3.1.8:
97119711
safe-identifier "^0.4.1"
97129712
style-inject "^0.3.0"
97139713

9714-
rollup-plugin-svelte@^6.1.0:
9715-
version "6.1.1"
9716-
resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.1.tgz#66362cf0500fb7a848283ebcf19d289a60ef0871"
9717-
integrity sha512-ijnm0pH1ScrY4uxwaNXBpNVejVzpL2769hIEbAlnqNUWZrffLspu5/k9/l/Wsj3NrEHLQ6wCKGagVJonyfN7ow==
9714+
rollup-plugin-svelte@^7.1.0:
9715+
version "7.1.0"
9716+
resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz#d45f2b92b1014be4eb46b55aa033fb9a9c65f04d"
9717+
integrity sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==
97189718
dependencies:
97199719
require-relative "^0.8.7"
97209720
rollup-pluginutils "^2.8.2"
9721-
sourcemap-codec "^1.4.8"
97229721

97239722
rollup-plugin-terser@^7.0.2:
97249723
version "7.0.2"
@@ -10111,7 +10110,7 @@ source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.1:
1011110110
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
1011210111
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
1011310112

10114-
sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
10113+
sourcemap-codec@^1.4.4:
1011510114
version "1.4.8"
1011610115
resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
1011710116
integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==

0 commit comments

Comments
 (0)