-
-
Notifications
You must be signed in to change notification settings - Fork 128
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8ba04b2
commit 7f0ea7e
Showing
6 changed files
with
225 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
web/next-example/src/components/examples/withMultiPageEditors/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
import YooptaEditor, { createYooptaEditor, Elements, Blocks, useYooptaEditor } from '@yoopta/editor'; | ||
|
||
import Paragraph from '@yoopta/paragraph'; | ||
import Blockquote from '@yoopta/blockquote'; | ||
import Embed from '@yoopta/embed'; | ||
import Image from '@yoopta/image'; | ||
import Link from '@yoopta/link'; | ||
import Callout from '@yoopta/callout'; | ||
import Video from '@yoopta/video'; | ||
import File from '@yoopta/file'; | ||
import Accordion from '@yoopta/accordion'; | ||
import { NumberedList, BulletedList, TodoList } from '@yoopta/lists'; | ||
import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks'; | ||
import { HeadingOne, HeadingThree, HeadingTwo } from '@yoopta/headings'; | ||
import Code from '@yoopta/code'; | ||
import ActionMenuList, { DefaultActionMenuRender } from '@yoopta/action-menu-list'; | ||
import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar'; | ||
import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool'; | ||
|
||
import { uploadToCloudinary } from '@/utils/cloudinary'; | ||
import { useEffect, useMemo, useRef } from 'react'; | ||
import { WITH_BASIC_INIT_VALUE } from './initValue'; | ||
|
||
const plugins = [ | ||
Paragraph, | ||
Accordion, | ||
HeadingOne, | ||
HeadingTwo, | ||
HeadingThree, | ||
Blockquote, | ||
Callout, | ||
NumberedList, | ||
BulletedList, | ||
TodoList, | ||
Code, | ||
Link, | ||
Embed, | ||
Image.extend({ | ||
options: { | ||
async onUpload(file) { | ||
const data = await uploadToCloudinary(file, 'image'); | ||
|
||
return { | ||
src: data.secure_url, | ||
alt: 'cloudinary', | ||
sizes: { | ||
width: data.width, | ||
height: data.height, | ||
}, | ||
}; | ||
}, | ||
}, | ||
}), | ||
Video.extend({ | ||
options: { | ||
onUpload: async (file) => { | ||
const data = await uploadToCloudinary(file, 'video'); | ||
return { | ||
src: data.secure_url, | ||
alt: 'cloudinary', | ||
sizes: { | ||
width: data.width, | ||
height: data.height, | ||
}, | ||
}; | ||
}, | ||
}, | ||
}), | ||
File.extend({ | ||
options: { | ||
onUpload: async (file) => { | ||
const response = await uploadToCloudinary(file, 'auto'); | ||
return { src: response.url }; | ||
}, | ||
}, | ||
}), | ||
]; | ||
|
||
const TOOLS = { | ||
ActionMenu: { | ||
render: DefaultActionMenuRender, | ||
tool: ActionMenuList, | ||
}, | ||
Toolbar: { | ||
render: DefaultToolbarRender, | ||
tool: Toolbar, | ||
}, | ||
LinkTool: { | ||
render: DefaultLinkToolRender, | ||
tool: LinkTool, | ||
}, | ||
}; | ||
|
||
const MARKS = [Bold, Italic, CodeMark, Underline, Strike, Highlight]; | ||
|
||
function WithMultiPageEditors() { | ||
const editor = useMemo(() => createYooptaEditor(), []); | ||
const selectionRef = useRef(null); | ||
|
||
return ( | ||
<div | ||
className="md:py-[100px] md:pl-[200px] md:pr-[80px] px-[20px] pt-[80px] pb-[40px] flex justify-center" | ||
ref={selectionRef} | ||
> | ||
<YooptaEditor | ||
editor={editor} | ||
plugins={plugins} | ||
tools={TOOLS} | ||
marks={MARKS} | ||
selectionBoxRoot={selectionRef} | ||
value={WITH_BASIC_INIT_VALUE} | ||
autoFocus | ||
/> | ||
</div> | ||
); | ||
} | ||
|
||
export default WithMultiPageEditors; |
1 change: 1 addition & 0 deletions
1
web/next-example/src/components/examples/withMultiPageEditors/initValue.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export const WITH_BASIC_INIT_VALUE = undefined; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.