Skip to content

Commit

Permalink
update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
Darginec05 committed Jul 8, 2024
1 parent 8ba04b2 commit 7f0ea7e
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 110 deletions.
36 changes: 18 additions & 18 deletions web/next-example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,24 @@
"@types/js-beautify": "^1.14.3",
"@uiw/codemirror-theme-vscode": "^4.21.24",
"@uiw/react-codemirror": "^4.21.25",
"@yoopta/accordion": "^4.6.3-rc.1",
"@yoopta/action-menu-list": "^4.6.3-rc.1",
"@yoopta/blockquote": "^4.6.3-rc.1",
"@yoopta/callout": "^4.6.3-rc.1",
"@yoopta/code": "^4.6.3-rc.1",
"@yoopta/editor": "^4.6.3-rc.1",
"@yoopta/embed": "^4.6.3-rc.1",
"@yoopta/exports": "^4.6.3-rc.1",
"@yoopta/file": "^4.6.3-rc.1",
"@yoopta/headings": "^4.6.3-rc.1",
"@yoopta/image": "^4.6.3-rc.1",
"@yoopta/link": "^4.6.3-rc.1",
"@yoopta/link-tool": "^4.6.3-rc.1",
"@yoopta/lists": "^4.6.3-rc.1",
"@yoopta/marks": "^4.6.3-rc.1",
"@yoopta/paragraph": "^4.6.3-rc.1",
"@yoopta/toolbar": "^4.6.3-rc.1",
"@yoopta/video": "^4.6.3-rc.1",
"@yoopta/accordion": "^4.6.3",
"@yoopta/action-menu-list": "^4.6.3",
"@yoopta/blockquote": "^4.6.3",
"@yoopta/callout": "^4.6.3",
"@yoopta/code": "^4.6.3",
"@yoopta/editor": "^4.6.3",
"@yoopta/embed": "^4.6.3",
"@yoopta/exports": "^4.6.3",
"@yoopta/file": "^4.6.3",
"@yoopta/headings": "^4.6.3",
"@yoopta/image": "^4.6.3",
"@yoopta/link": "^4.6.3",
"@yoopta/link-tool": "^4.6.3",
"@yoopta/lists": "^4.6.3",
"@yoopta/marks": "^4.6.3",
"@yoopta/paragraph": "^4.6.3",
"@yoopta/toolbar": "^4.6.3",
"@yoopta/video": "^4.6.3",
"class-variance-authority": "^0.7.0",
"classnames": "^2.5.1",
"clsx": "^2.1.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,16 +97,6 @@ function WithBaseFullSetup() {
const editor = useMemo(() => createYooptaEditor(), []);
const selectionRef = useRef(null);

useEffect(() => {
function handleChange(value) {
console.log('value', value);
}
editor.on('change', handleChange);
return () => {
editor.off('change', handleChange);
};
}, [editor]);

return (
<div
className="md:py-[100px] md:pl-[200px] md:pr-[80px] px-[20px] pt-[80px] pb-[40px] flex justify-center"
Expand Down
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;
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const WITH_BASIC_INIT_VALUE = undefined;
26 changes: 16 additions & 10 deletions web/next-example/src/pages/examples/[example].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import withBaseFullSetup from '@/components/examples/withBaseFullSetup';
// import withOffline from '@/components/examples/withOffline';
// import { CheckSourceCode } from '@/components/CheckSourceCode/CheckSourceCode';
import withExports from '@/components/examples/withExports';
import withCustomHTMLAttributes from '@/components/examples/withCustomHTMLAttributes';
// import withCustomHTMLAttributes from '@/components/examples/withCustomHTMLAttributes';
import withCustomMark from '@/components/examples/withCustomMark';
import withCustomPlugin from '@/components/examples/withCustomPlugin';
import withCustomToolbar from '@/components/examples/withCustomToolbar';
Expand All @@ -16,10 +16,11 @@ import withSavingToDatabase from '@/components/examples/withSavingToDatabase';
import withEditorControl from '@/components/examples/withEditorControl';
import withLargeDocuments from '@/components/examples/withLargeDocuments';
import withChatSlack from '@/components/examples/withChatSlack';
import withCraftExample from '@/components/examples/withCraftExample';
// import withCraftExample from '@/components/examples/withCraftExample';
import withCustomStyles from '@/components/examples/withCustomStyles';
import withEditorFocusBlur from '@/components/examples/withEditorFocusBlur';
import withCustomRenders from '@/components/examples/withCustomRenders';
// import withMultiPageEditors from '@/components/examples/withMultiPageEditors';

import { Head } from '@/components/Head/Head';
import { useRouter } from 'next/router';
Expand All @@ -40,15 +41,16 @@ export const EXAMPLES: Record<string, () => React.JSX.Element> = {
withExtendedPlugin,
withReadOnly,
withEditorControl,
withCustomHTMLAttributes,
// withCustomHTMLAttributes,
withCustomMark,
withCustomPlugin,
withSavingToDatabase,
withCustomStyles,
withLargeDocuments,
withChatSlack,
withEditorFocusBlur,
withCraftExample,
// withMultiPageEditors,
// withCraftExample,
// withOffline,
// withCustomComponent,
};
Expand Down Expand Up @@ -90,10 +92,14 @@ const EXAMPLE_MAP: Record<keyof typeof EXAMPLES, any> = {
title: 'Custom Plugin',
description: '',
},
withCustomHTMLAttributes: {
title: 'Custom HTML Attributes',
withMultiPageEditors: {
title: 'Multi Page Editors',
description: '',
},
// withCustomHTMLAttributes: {
// title: 'Custom HTML Attributes',
// description: '',
// },
withSavingToDatabase: {
title: 'Saving to Database',
description: '',
Expand All @@ -114,10 +120,10 @@ const EXAMPLE_MAP: Record<keyof typeof EXAMPLES, any> = {
title: 'Chat Slack',
description: '',
},
withCraftExample: {
title: 'Craft Example',
description: '',
},
// withCraftExample: {
// title: 'Craft Example',
// description: '',
// },
withMigrationGuide: {
title: 'Migration Guide from v2 to v4',
description: '',
Expand Down
Loading

0 comments on commit 7f0ea7e

Please sign in to comment.