feat: remove DefaultTextEditor and UpdateContentsPage, replace with ContentsFormPage
This commit is contained in:
Ardeman
parent
18098d63ba
commit
2c05c543ce
@ -1,107 +0,0 @@
|
|||||||
import { useEditor, EditorContent } from '@tiptap/react'
|
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
|
||||||
|
|
||||||
import {
|
|
||||||
BoldIcon as Bold,
|
|
||||||
ItalicIcon as Italic,
|
|
||||||
UndoIcon as Undo,
|
|
||||||
RedoIcon as Redo,
|
|
||||||
ListIcon as List,
|
|
||||||
ListOrderIcon as ListOrdered,
|
|
||||||
LinkIcon as Link,
|
|
||||||
ImageIcon as Image,
|
|
||||||
CodeIcon as Code,
|
|
||||||
QuoteIcon as Quote,
|
|
||||||
StrikethroughIcon as Strikethrough,
|
|
||||||
UnderlineIcon as Underline,
|
|
||||||
} from '~/components/icons/editor'
|
|
||||||
|
|
||||||
const DefaultTextEditor = () => {
|
|
||||||
const editor = useEditor({
|
|
||||||
extensions: [StarterKit],
|
|
||||||
immediatelyRender: false,
|
|
||||||
content:
|
|
||||||
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis nisl cursus bibendum sit nulla accumsan sodales ornare. At urna viverra non suspendisse neque, lorem. Pretium condimentum pellentesque gravida id etiam sit sed arcu euismod. Rhoncus proin orci duis scelerisque molestie cursus tincidunt aliquam.</p>',
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!editor) {
|
|
||||||
return <p>Loading editor...</p>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="0 rounded border bg-white">
|
|
||||||
<div className="mb-4 rounded bg-gray-100 p-2">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button onClick={() => editor.chain().focus().undo().run()}>
|
|
||||||
<Undo />
|
|
||||||
</button>
|
|
||||||
<button onClick={() => editor.chain().focus().redo().run()}>
|
|
||||||
<Redo />
|
|
||||||
</button>
|
|
||||||
<button onClick={() => editor.chain().focus().toggleBold().run()}>
|
|
||||||
<Bold />
|
|
||||||
</button>
|
|
||||||
<button onClick={() => editor.chain().focus().toggleItalic().run()}>
|
|
||||||
<Italic />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
// onClick={() => editor.chain().focus().toggleUnderline().run()}
|
|
||||||
>
|
|
||||||
<Underline />
|
|
||||||
</button>
|
|
||||||
<button onClick={() => editor.chain().focus().toggleStrike().run()}>
|
|
||||||
<Strikethrough />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
|
||||||
>
|
|
||||||
<List />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
|
||||||
>
|
|
||||||
<ListOrdered />
|
|
||||||
</button>
|
|
||||||
<button onClick={() => editor.chain().focus().toggleCode().run()}>
|
|
||||||
<Code />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
|
||||||
>
|
|
||||||
<Quote />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
editor
|
|
||||||
.chain()
|
|
||||||
.focus()
|
|
||||||
// .setLink({ href: prompt('Enter URL') })
|
|
||||||
.run()
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Link />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
editor
|
|
||||||
.chain()
|
|
||||||
.focus()
|
|
||||||
// .setImage({ src: prompt('Enter image URL') })
|
|
||||||
.run()
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Image />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="p-5">
|
|
||||||
<EditorContent
|
|
||||||
editor={editor}
|
|
||||||
className="h-[50vh]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DefaultTextEditor
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import { Field, Input, Label, Select } from '@headlessui/react'
|
|
||||||
|
|
||||||
import { SearchIcon } from '~/components/icons/search'
|
|
||||||
import DefaultTextEditor from '~/components/ui/text-editor'
|
|
||||||
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
|
||||||
|
|
||||||
export const UpdateContentsPage = () => {
|
|
||||||
return (
|
|
||||||
<div className="relative">
|
|
||||||
<TitleDashboard title="Update Artikel" />
|
|
||||||
<div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
|
|
||||||
<div className="w-[400px]">
|
|
||||||
<Field>
|
|
||||||
<Label className="mb-2 block text-sm font-medium">Pilih Tags</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
placeholder="Cari Tags"
|
|
||||||
className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
|
||||||
<SearchIcon className="h-5 w-5" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-[235px]">
|
|
||||||
<Field>
|
|
||||||
<Label className="mb-2 block text-sm font-medium">Status</Label>
|
|
||||||
<Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
|
|
||||||
<option>Pilih Status</option>
|
|
||||||
<option>Aktif</option>
|
|
||||||
<option>Nonaktif</option>
|
|
||||||
</Select>
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<DefaultTextEditor />
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { UpdateContentsPage } from '~/pages/contents-update'
|
import { ContentsFormPage } from '~/pages/contents-form'
|
||||||
|
|
||||||
const DashboardContentUpdateLayout = () => <UpdateContentsPage />
|
const DashboardContentUpdateLayout = () => <ContentsFormPage />
|
||||||
export default DashboardContentUpdateLayout
|
export default DashboardContentUpdateLayout
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user