Skip to content

Commit

Permalink
Add preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@moysa
moysa committed Mar 4, 2025
1 parent 123618d commit 093a74c
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 65 deletions.
59 changes: 55 additions & 4 deletions src/pages/ReadsEditor.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,7 +472,7 @@
font-size: 16px;
font-weight: 400;
line-height: 22px;
border-radius: 12px;
border-radius: 0;
padding: 0;
width: 100%;
margin: 0;
Expand All @@ -488,6 +488,7 @@
.tagList {
display: flex;
gap: 4px;
flex-wrap: wrap;

.tag {
display: inline-block;
Expand Down Expand Up @@ -566,7 +567,7 @@
.titleImage {
width: 100%;
max-height: 598px;

border-radius: 12px;
}

.accordionTrigger {
Expand Down Expand Up @@ -606,9 +607,9 @@
.sectionButton {
background: none;
color: var(--text-secondary);
font-size: 18px;
font-size: 14px;
font-weight: 600;
line-height: 20px;
line-height: 16px;
border: none;

display: flex;
Expand All @@ -619,4 +620,54 @@
&.open {
color: var(--text-primary);
}

span {
margin-right: 4px;
}
}

.metadataPreview {
padding-left: 8px;
.titlePreview {
color: var(--text-primary);
font-size: 18px;
font-weight: 600;
line-height: 20px;
}

.titleImagePreview {
max-height: 200px;
border-radius: 12px;
}

.summaryPreview {
color: var(--text-secondary);
font-size: 14px;
font-weight: 300;
line-height: 26px;
}

.tagPreview {
width: 200px;
.tagList {
display: flex;
gap: 4px;
flex-wrap: wrap;

.tag {
display: inline-block;
color: var(--text-secondary);
font-size: 8px;
font-weight: 400;
line-height: 10px;
background-color: var(--background-input);
padding: 6px 10px;
border-radius: 12px;
width: fit-content;
margin-block: 2px;
margin-right: 4px;
cursor: pointer;
}
}
}
}
146 changes: 85 additions & 61 deletions src/pages/ReadsEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,8 @@ const ReadsEditor: Component = () => {
})

const initEditor = async () => {
if (editor()) return;

try {
const e = await Editor.make()
.config((ctx) => {
Expand Down Expand Up @@ -188,19 +190,17 @@ const ReadsEditor: Component = () => {
// insert(cont)(e.ctx);
// setHtml(() => getHTML()(e.ctx));

// e.action(replaceAll(article.content))

setEditor(() => e);

} catch (err) {
logError('Failed init milkdown editor: ', err);
}
}

createEffect(() => {
if (accordionSection().includes('content')) {
setTimeout(() => {
initEditor();
}, 10)
}
onMount(() => {
initEditor();
});

onCleanup(() => editor()?.destroy());
Expand Down Expand Up @@ -331,22 +331,47 @@ const ReadsEditor: Component = () => {
setAccordionSection((as) => [...as, 'metadata']);
}}
>
<Show
when={accordionSection().includes('metadata')}
fallback={<span>Show</span>}
>
<span>Hide</span>
</Show>
Metadata
</button>

<button
class={`${styles.sectionButton} ${accordionSection().includes('content') ? styles.open : ''}`}
onClick={() => {
if (accordionSection().includes('content')) {
setAccordionSection((as) => as.filter(s => s !== 'content'));
return;
}

setAccordionSection((as) => [...as, 'content']);
}}
>
Content
</button>
<Show when={!accordionSection().includes('metadata')}>
<div class={styles.metadataPreview}>
<Show when={article.title.length > 0}>
<div class={styles.titlePreview}>
{article.title}
</div>
</Show>

<Show when={article.image.length > 0}>
<img
class={styles.titleImagePreview}
src={article.image}
/>
</Show>

<Show when={article.summary.length > 0}>
<div class={styles.summaryPreview}>
{article.summary}
</div>
</Show>

<Show when={article.tags.length > 0}>
<div class={styles.tagPreview}>
<div class={styles.tagList}>
<For each={article.tags}>
{tag => <div class={styles.tag}>{tag}</div>}
</For>
</div>
</div>
</Show>
</div>
</Show>
</div>
</Wormhole>

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

const tags = value.split(',').map((x: string) => x.trim());
setArticle('tags', (ts) => [...ts, ...tags]);
// @ts-ignore
e.target.value = ''
}}
>
Expand All @@ -497,56 +523,54 @@ const ReadsEditor: Component = () => {
</div>
</Show>

<Show when={accordionSection().includes('content')}>
<div>
<div class={styles.toolbar}>
<div>
<button
id="undoBtn"
class={styles.mdToolButton}
onClick={undo}
>
<div class={styles.undoIcon}></div>
</button>
<button
id="redoBtn"
class={styles.mdToolButton}
onClick={redo}
>
<div class={styles.redoIcon}></div>
</button>
<button
id="boldBtn"
class={`${styles.mdToolButton} ${isBoldActive() || isBoldSelected() ? styles.selected : ''}`}
onClick={bold}
>
<div class={styles.boldIcon}></div>
</button>
<button
id="italicBtn"
class={`${styles.mdToolButton} ${isItalicActive() || isItalicSelected() ? styles.selected : ''}`}
onClick={italic}
>
<div class={styles.italicIcon}></div>
</button>
</div>
<div class={styles.contentEditor}>
<div class={styles.toolbar}>
<div>
<button
id="undoBtn"
class={styles.mdToolButton}
onClick={undo}
>
<div class={styles.undoIcon}></div>
</button>
<button
id="redoBtn"
class={styles.mdToolButton}
onClick={redo}
>
<div class={styles.redoIcon}></div>
</button>
<button
id="boldBtn"
class={`${styles.mdToolButton} ${isBoldActive() || isBoldSelected() ? styles.selected : ''}`}
onClick={bold}
>
<div class={styles.boldIcon}></div>
</button>
<button
id="italicBtn"
class={`${styles.mdToolButton} ${isItalicActive() || isItalicSelected() ? styles.selected : ''}`}
onClick={italic}
>
<div class={styles.italicIcon}></div>
</button>
</div>
<div
class={styles.editor}
ref={mdEditor}
onClick={() => {
// focusEditor();
}}
></div>
</div>
</Show>
<div
class={styles.editor}
ref={mdEditor}
onClick={() => {
// focusEditor();
}}
></div>
</div>


<div class={styles.postingControls}>
<ButtonPrimary
onClick={postArticle}
>
Post
Publish Article
</ButtonPrimary>
</div>
</div>
Expand Down

0 comments on commit 093a74c

Please sign in to comment.