Skip to content

Commit 093a74c

Browse files
moysamoysa
committed
Add preview
1 parent 123618d commit 093a74c

File tree

2 files changed

+140
-65
lines changed

2 files changed

+140
-65
lines changed

‎src/pages/ReadsEditor.module.scss‎

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -472,7 +472,7 @@
472472
font-size: 16px;
473473
font-weight: 400;
474474
line-height: 22px;
475-
border-radius: 12px;
475+
border-radius: 0;
476476
padding: 0;
477477
width: 100%;
478478
margin: 0;
@@ -488,6 +488,7 @@
488488
.tagList {
489489
display: flex;
490490
gap: 4px;
491+
flex-wrap: wrap;
491492

492493
.tag {
493494
display: inline-block;
@@ -566,7 +567,7 @@
566567
.titleImage {
567568
width: 100%;
568569
max-height: 598px;
569-
570+
border-radius: 12px;
570571
}
571572

572573
.accordionTrigger {
@@ -606,9 +607,9 @@
606607
.sectionButton {
607608
background: none;
608609
color: var(--text-secondary);
609-
font-size: 18px;
610+
font-size: 14px;
610611
font-weight: 600;
611-
line-height: 20px;
612+
line-height: 16px;
612613
border: none;
613614

614615
display: flex;
@@ -619,4 +620,54 @@
619620
&.open {
620621
color: var(--text-primary);
621622
}
623+
624+
span {
625+
margin-right: 4px;
626+
}
627+
}
628+
629+
.metadataPreview {
630+
padding-left: 8px;
631+
.titlePreview {
632+
color: var(--text-primary);
633+
font-size: 18px;
634+
font-weight: 600;
635+
line-height: 20px;
636+
}
637+
638+
.titleImagePreview {
639+
max-height: 200px;
640+
border-radius: 12px;
641+
}
642+
643+
.summaryPreview {
644+
color: var(--text-secondary);
645+
font-size: 14px;
646+
font-weight: 300;
647+
line-height: 26px;
648+
}
649+
650+
.tagPreview {
651+
width: 200px;
652+
.tagList {
653+
display: flex;
654+
gap: 4px;
655+
flex-wrap: wrap;
656+
657+
.tag {
658+
display: inline-block;
659+
color: var(--text-secondary);
660+
font-size: 8px;
661+
font-weight: 400;
662+
line-height: 10px;
663+
background-color: var(--background-input);
664+
padding: 6px 10px;
665+
border-radius: 12px;
666+
width: fit-content;
667+
margin-block: 2px;
668+
margin-right: 4px;
669+
cursor: pointer;
670+
}
671+
}
672+
}
622673
}

‎src/pages/ReadsEditor.tsx‎

Lines changed: 85 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ const ReadsEditor: Component = () => {
119119
})
120120

121121
const initEditor = async () => {
122+
if (editor()) return;
123+
122124
try {
123125
const e = await Editor.make()
124126
.config((ctx) => {
@@ -188,19 +190,17 @@ const ReadsEditor: Component = () => {
188190
// insert(cont)(e.ctx);
189191
// setHtml(() => getHTML()(e.ctx));
190192

193+
// e.action(replaceAll(article.content))
194+
191195
setEditor(() => e);
192196

193197
} catch (err) {
194198
logError('Failed init milkdown editor: ', err);
195199
}
196200
}
197201

198-
createEffect(() => {
199-
if (accordionSection().includes('content')) {
200-
setTimeout(() => {
201-
initEditor();
202-
}, 10)
203-
}
202+
onMount(() => {
203+
initEditor();
204204
});
205205

206206
onCleanup(() => editor()?.destroy());
@@ -331,22 +331,47 @@ const ReadsEditor: Component = () => {
331331
setAccordionSection((as) => [...as, 'metadata']);
332332
}}
333333
>
334+
<Show
335+
when={accordionSection().includes('metadata')}
336+
fallback={<span>Show</span>}
337+
>
338+
<span>Hide</span>
339+
</Show>
334340
Metadata
335341
</button>
336342

337-
<button
338-
class={`${styles.sectionButton} ${accordionSection().includes('content') ? styles.open : ''}`}
339-
onClick={() => {
340-
if (accordionSection().includes('content')) {
341-
setAccordionSection((as) => as.filter(s => s !== 'content'));
342-
return;
343-
}
344-
345-
setAccordionSection((as) => [...as, 'content']);
346-
}}
347-
>
348-
Content
349-
</button>
343+
<Show when={!accordionSection().includes('metadata')}>
344+
<div class={styles.metadataPreview}>
345+
<Show when={article.title.length > 0}>
346+
<div class={styles.titlePreview}>
347+
{article.title}
348+
</div>
349+
</Show>
350+
351+
<Show when={article.image.length > 0}>
352+
<img
353+
class={styles.titleImagePreview}
354+
src={article.image}
355+
/>
356+
</Show>
357+
358+
<Show when={article.summary.length > 0}>
359+
<div class={styles.summaryPreview}>
360+
{article.summary}
361+
</div>
362+
</Show>
363+
364+
<Show when={article.tags.length > 0}>
365+
<div class={styles.tagPreview}>
366+
<div class={styles.tagList}>
367+
<For each={article.tags}>
368+
{tag => <div class={styles.tag}>{tag}</div>}
369+
</For>
370+
</div>
371+
</div>
372+
</Show>
373+
</div>
374+
</Show>
350375
</div>
351376
</Wormhole>
352377

@@ -485,6 +510,7 @@ const ReadsEditor: Component = () => {
485510

486511
const tags = value.split(',').map((x: string) => x.trim());
487512
setArticle('tags', (ts) => [...ts, ...tags]);
513+
// @ts-ignore
488514
e.target.value = ''
489515
}}
490516
>
@@ -497,56 +523,54 @@ const ReadsEditor: Component = () => {
497523
</div>
498524
</Show>
499525

500-
<Show when={accordionSection().includes('content')}>
501-
<div>
502-
<div class={styles.toolbar}>
503-
<div>
504-
<button
505-
id="undoBtn"
506-
class={styles.mdToolButton}
507-
onClick={undo}
508-
>
509-
<div class={styles.undoIcon}></div>
510-
</button>
511-
<button
512-
id="redoBtn"
513-
class={styles.mdToolButton}
514-
onClick={redo}
515-
>
516-
<div class={styles.redoIcon}></div>
517-
</button>
518-
<button
519-
id="boldBtn"
520-
class={`${styles.mdToolButton} ${isBoldActive() || isBoldSelected() ? styles.selected : ''}`}
521-
onClick={bold}
522-
>
523-
<div class={styles.boldIcon}></div>
524-
</button>
525-
<button
526-
id="italicBtn"
527-
class={`${styles.mdToolButton} ${isItalicActive() || isItalicSelected() ? styles.selected : ''}`}
528-
onClick={italic}
529-
>
530-
<div class={styles.italicIcon}></div>
531-
</button>
532-
</div>
526+
<div class={styles.contentEditor}>
527+
<div class={styles.toolbar}>
528+
<div>
529+
<button
530+
id="undoBtn"
531+
class={styles.mdToolButton}
532+
onClick={undo}
533+
>
534+
<div class={styles.undoIcon}></div>
535+
</button>
536+
<button
537+
id="redoBtn"
538+
class={styles.mdToolButton}
539+
onClick={redo}
540+
>
541+
<div class={styles.redoIcon}></div>
542+
</button>
543+
<button
544+
id="boldBtn"
545+
class={`${styles.mdToolButton} ${isBoldActive() || isBoldSelected() ? styles.selected : ''}`}
546+
onClick={bold}
547+
>
548+
<div class={styles.boldIcon}></div>
549+
</button>
550+
<button
551+
id="italicBtn"
552+
class={`${styles.mdToolButton} ${isItalicActive() || isItalicSelected() ? styles.selected : ''}`}
553+
onClick={italic}
554+
>
555+
<div class={styles.italicIcon}></div>
556+
</button>
533557
</div>
534-
<div
535-
class={styles.editor}
536-
ref={mdEditor}
537-
onClick={() => {
538-
// focusEditor();
539-
}}
540-
></div>
541558
</div>
542-
</Show>
559+
<div
560+
class={styles.editor}
561+
ref={mdEditor}
562+
onClick={() => {
563+
// focusEditor();
564+
}}
565+
></div>
566+
</div>
543567

544568

545569
<div class={styles.postingControls}>
546570
<ButtonPrimary
547571
onClick={postArticle}
548572
>
549-
Post
573+
Publish Article
550574
</ButtonPrimary>
551575
</div>
552576
</div>

0 commit comments

Comments
 (0)