Skip to content

Commit

Permalink
Fixed simplemde, ckeditor, table of content
Browse files Browse the repository at this point in the history
  • Loading branch information
@putuadityabayu
putuadityabayu committed Jan 31, 2023
1 parent 1b6771e commit 5077b01
Show file tree
Hide file tree
Showing 8 changed files with 95 additions and 24 deletions.
18 changes: 18 additions & 0 deletions src/components/CKEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,24 @@ const Div = styled("div")(({theme})=>({
'.ck.ck-toolbar-dropdown>.ck-dropdown__panel': {
maxWidth: 400
},
},
'& h1':{
fontSize:'1.5rem'
},
'& h2':{
fontSize:'1.25rem'
},
'& h3':{
fontSize:'1.125rem'
},
'& h4':{
fontSize:'1.125rem'
},
'& h5':{
fontSize:'1.125rem'
},
'& h6':{
fontSize:'1.125rem'
}
}))

Expand Down
6 changes: 4 additions & 2 deletions src/components/Image.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ function getPortalnesiaImagePng(img: string) {
}
}

NativeFancybox.defaults.Hash = false;

/**
*
* Custom Image Components
Expand Down Expand Up @@ -154,7 +156,7 @@ const Image=React.forwardRef<HTMLImageElement,ImageProps>((props,ref)=>{
return (
<>
{fancybox ? (
<ButtonBase component='a' ref={(ref)=>imgRef.current=ref} data-fancybox={dataFancybox} data-src={withPng ? pngDataSrc : (dataSrc||src)} data-options="{'protect':'true'}" {...(caption||alt ? {'data-caption':caption||alt} : {})} sx={sx}>
<ButtonBase component='a' ref={(ref)=>imgRef.current=ref} data-fancybox={dataFancybox} data-src={withPng ? pngDataSrc : (dataSrc||src)} data-options="{'protect':'true'}" {...(caption||alt ? {'data-caption':caption||alt} : {})} sx={sx} {...(dataSrc !== src ? {['data-thumb']: src} : {})}>
<picture>
{!withPng && <source type='image/webp' srcSet={webpSrc}/>}
<source type={withPng ? 'image/png' : 'image/jpeg'} srcSet={withPng ? pngSrc : src}/>
Expand Down Expand Up @@ -192,7 +194,7 @@ const Image=React.forwardRef<HTMLImageElement,ImageProps>((props,ref)=>{
return(
<>
{fancybox ? (
<ButtonBase component='a' ref={(ref)=>imgRef.current=ref} data-fancybox={dataFancybox} data-src={withPng ? pngDataSrc : (dataSrc||src)} data-options="{'protect':'true'}" {...(caption||alt ? {'data-caption':caption||alt} : {})} sx={sx}>
<ButtonBase component='a' ref={(ref)=>imgRef.current=ref} data-fancybox={dataFancybox} data-src={withPng ? pngDataSrc : (dataSrc||src)} data-options="{'protect':'true'}" {...(caption||alt ? {'data-caption':caption||alt} : {})} sx={sx} {...(dataSrc !== src ? {['data-thumb']: src} : {})}>
{lazy ? (
<LazyImageStyle src={withPng ? `${src}&output=png` : src} className={`no-drag${className ? ' '+className : ''}`} onContextMenu={onRightClick} {...(alt ? {alt:alt} : {})} sx={sx} {...rest} />
) : (
Expand Down
27 changes: 23 additions & 4 deletions src/components/SimpleMDE.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,24 @@ const Div = styled("div")(()=>({
'& .editor-preview pre': {
background:'unset !important',
margin:'1em 0 !important'
},
'& .cm-s-easymde .cm-header-1':{
fontSize:'1.5rem'
},
'& .cm-s-easymde .cm-header-2':{
fontSize:'1.25rem'
},
'& .cm-s-easymde .cm-header-3':{
fontSize:'1.125rem'
},
'& .cm-s-easymde .cm-header-4':{
fontSize:'1.125rem'
},
'& .cm-s-easymde .cm-header-5':{
fontSize:'1.125rem'
},
'& .cm-s-easymde .cm-header-6':{
fontSize:'1.125rem'
}
}))

Expand Down Expand Up @@ -131,10 +149,11 @@ export default function Simple(props: SimpleMDEProps) {
name: "guide",
action: function(){
return window.open(portalUrl('/blog/markdown-guide'))
},
className: "fa fa-question-circle",
title: "Markdown Guide",
}];
},
className: "fa fa-question-circle",
title: "Markdown Guide",
}
];
} else {
opt.toolbar=["heading-1","heading-2","heading-3","unordered-list","ordered-list","horizontal-rule","|","bold", "italic", "quote","code","|","link","preview","side-by-side","fullscreen",{
name: "guide",
Expand Down
7 changes: 4 additions & 3 deletions src/design/components/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,8 @@ export interface SearchProps {

export default function Search({onsubmit,onremove,onchange,remove=false,value,autosize=false,sx,wrapperSx}: SearchProps) {
const [open,setOpen] = React.useState(false);

const [focus,setFocus] = React.useState(false);

const inputRef = React.useRef<HTMLInputElement>(null);
const buttonRef = React.useRef(null)

Expand Down Expand Up @@ -117,7 +118,7 @@ export interface SearchProps {
{autosize ? (
<form onSubmit={handleSubmit}>
<Wrapper autoresize sx={{...wrapperSx}}>
{remove && value?.length > 0? (
{!focus && remove && value?.length > 0? (
<DeleteStyle focused={value?.length > 0 }>
<IconButton onClick={handleRemove} size="small">
<ClearIcon />
Expand All @@ -128,7 +129,7 @@ export interface SearchProps {
<SearchIcon />
</SearchStyle>
)}
<InputStyle ref={inputRef} sx={sx} autoresize removed={remove && value?.length > 0} placeholder={`Search...`} value={value} onChange={onchange} />
<InputStyle onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)} ref={inputRef} sx={sx} autoresize removed={remove && value?.length > 0} placeholder={`Search...`} value={value} onChange={onchange} />
</Wrapper>
</form>
) : (
Expand Down
48 changes: 38 additions & 10 deletions src/design/components/TableContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,15 @@ type Args = {
data: any
}

type Content = {
type BaseContent = {
id: string,
name: string
}

type Content = BaseContent & {
child?: BaseContent[]
}

export function getOffset(elem: Element|null){
if(elem === null || !elem.getClientRects().length) return {top:0,left:0}
const rect = elem.getBoundingClientRect();
Expand Down Expand Up @@ -102,10 +106,14 @@ export default function useTableContent(opt: Args) {
React.useEffect(()=>{
const tim1 = setTimeout(()=>{
let konten: Content[]=[];
document.querySelectorAll('a > h1[id],a > h2[id], a > h3[id], .table-content[id]').forEach(e=>{
const id = e.getAttribute('id')||'';
const name = (e.textContent||'')
konten = konten.concat({id:id,name:name})
document.querySelectorAll('a > h1[id],a > h2[id],a > h3[id]').forEach(e=>{
const id = e.getAttribute('id')||'';
const name = (e.textContent||'')
if(e.tagName === 'H3' && konten.length > 0) {
konten[konten.length-1].child = (konten?.[konten.length-1]?.child||[]).concat({id,name})
} else {
konten = konten.concat({id:id,name:name});
}
})
setContent(konten);
},500)
Expand All @@ -129,9 +137,9 @@ export default function useTableContent(opt: Args) {
if(getOffset(id).top - padding <= o+5) {
if(a.parentNode?.parentNode) {
const li = a.parentElement;
for(let siblings of li?.parentNode?.children||[]) {
siblings.classList.remove('active');
}
document.querySelectorAll<HTMLAnchorElement>('#tableOfContents li').forEach(l=>{
l.classList.remove('active');
})
li?.classList?.add('active');
}
}
Expand Down Expand Up @@ -172,7 +180,17 @@ export function HtmlMdUp(props: Args) {
<div id='tableOfContents'>
<List component="ol" sx={{listStyle:'numeric',listStylePosition:'inside'}}>
{content.map((dt,i)=>(
<CustomLi key={`${dt?.id}-${i}`}><ContentSpan href={`#${dt?.id}`} onClick={handlePageContent(dt?.id)}><span>{dt?.name}</span></ContentSpan></CustomLi>
<React.Fragment key={`${dt?.id}-${i}`}>
<CustomLi {...dt.child && dt.child?.length > 0 ? {className:'not-margin'} : {}}><ContentSpan href={`#${dt?.id}`} onClick={handlePageContent(dt?.id)}><span>{dt?.name}</span></ContentSpan></CustomLi>
{dt.child && dt.child?.length > 0 && (
<List component="ul" sx={{listStyle:'inside',listStylePosition:'inside',pl:2}}>
{dt.child.map((c,ii)=>(
<CustomLi key={`${c.id}-${i}-${ii}`}><ContentSpan href={`#${c?.id}`} onClick={handlePageContent(c?.id)}><span>{c?.name}</span></ContentSpan></CustomLi>
))}
</List>
)}

</React.Fragment>
))}
</List>
</div>
Expand Down Expand Up @@ -220,7 +238,17 @@ export function HtmlMdDown(props: Args) {
<div id='tableOfContents'>
<List component="ol" sx={{listStyle:'numeric',listStylePosition:'inside'}}>
{content.map((dt,i)=>(
<CustomLi key={`${dt?.id}-${i}`}><ContentSpan href={`#${dt?.id}`} onClick={handleClick(dt?.id)}><span>{dt?.name}</span></ContentSpan></CustomLi>
<React.Fragment key={`${dt?.id}-${i}`}>
<CustomLi {...dt.child && dt.child?.length > 0 ? {className:'not-margin'} : {}}><ContentSpan href={`#${dt?.id}`} onClick={handleClick(dt?.id)}><span>{dt?.name}</span></ContentSpan></CustomLi>
{dt.child && dt.child?.length > 0 && (
<List component="ul" sx={{listStyle:'inside',listStylePosition:'inside',pl:2}}>
{dt.child.map((c,ii)=>(
<CustomLi key={`${c.id}-${i}-${ii}`}><ContentSpan href={`#${c?.id}`} onClick={handleClick(c?.id)}><span>{c?.name}</span></ContentSpan></CustomLi>
))}
</List>
)}

</React.Fragment>
))}
</List>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/pages/admin/blog/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,9 @@ export default function EditBlogAdmin({data,meta}: IPages<IBlogEdit>) {
const handleSubmit = React.useCallback(submitForm(async()=>{
try {
setLoading(true)
const text = input?.format === 'html' ? editorRef.current?.getData() : input?.text;
const recaptcha = await captchaRef.current?.execute();
await put(`/v2/blog/${data.slug}`,{...input,recaptcha},{},{success_notif:true});
await put(`/v2/blog/${data.slug}`,{...input,text,recaptcha},{},{success_notif:true});
setCanChange(true)
} catch(e) {
if(e instanceof ApiError) setNotif(e.message,true)
Expand Down
5 changes: 3 additions & 2 deletions src/pages/admin/pages/[...slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,12 +173,13 @@ export default function EditPagesAdmin({data,meta}: IPages<IBlogEdit>) {
const handleSubmit = React.useCallback(submitForm(async()=>{
try {
setLoading(true)
const text = input?.format === 'html' ? editorRef.current?.getData() : input?.text;
const recaptcha = await captchaRef.current?.execute();
if(slug?.[0] !== "new") {
await put(`/v2/blog/${data.slug}`,{...input,recaptcha},{},{success_notif:true});
await put(`/v2/blog/${data.slug}`,{...input,text,recaptcha},{},{success_notif:true});
setCanChange(true)
} else {
const res = await post<{slug?:string}>("/v2/blog?type=pages",{...input,recaptcha},{},{success_notif:true});
const res = await post<{slug?:string}>("/v2/blog?type=pages",{...input,text,recaptcha},{},{success_notif:true});
setCanChange(true)
if(res?.slug) {
setTimeout(()=>{
Expand Down
5 changes: 3 additions & 2 deletions src/pages/dashboard/blog/[...slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,12 +172,13 @@ export default function EditBlogPages({data,meta}: IPages<IBlogEdit>) {
const handleSubmit = React.useCallback(submitForm(async()=>{
try {
setLoading(true)
const text = input?.format === 'html' ? editorRef.current?.getData() : input?.text;
const recaptcha = await captchaRef.current?.execute();
if(slug?.[0] !== "new") {
await put(`/v2/blog/${data.slug}`,{...input,recaptcha},{},{success_notif:true});
await put(`/v2/blog/${data.slug}`,{...input,text,recaptcha},{},{success_notif:true});
setCanChange(true)
} else {
const res = await post<{slug?:string}>("/v2/blog",{...input,recaptcha},{},{success_notif:true});
const res = await post<{slug?:string}>("/v2/blog",{...input,text,recaptcha},{},{success_notif:true});
setCanChange(true)
if(res?.slug) {
setTimeout(()=>{
Expand Down

0 comments on commit 5077b01

Please sign in to comment.