From 3e74074b3f9a2420039e79da6c635d8ab3dc5409 Mon Sep 17 00:00:00 2001 From: Darginec05 Date: Sun, 21 Apr 2024 15:00:39 +0300 Subject: [PATCH] update examples --- README.md | 1 + .../src/components/Block/BlockActions.tsx | 5 - packages/development/src/pages/dev/index.tsx | 426 +++++++++++++++++- .../examples/withEditorControl/index.tsx | 40 +- .../examples/withEditorControl/initValue.ts | 242 +++++++++- web/next-example/src/components/ui/sheet.tsx | 4 +- .../src/pages/examples/[example].tsx | 4 +- 7 files changed, 696 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index d533d3251..c99b51794 100644 --- a/README.md +++ b/README.md @@ -292,6 +292,7 @@ If you find Yoopta-Editor useful and valuable for your projects, I kindly ask yo - Collabrative mode - Plugin system - Optimizations for media components +- Create package @yoopta/hotkeys to manage hotkeys - Rethink approach for just rendering to increase SEO perfomance - Continue improving the project. We are listening to you and your requests 💙 diff --git a/packages/core/src/components/Block/BlockActions.tsx b/packages/core/src/components/Block/BlockActions.tsx index 25276dcea..9559e4ff5 100644 --- a/packages/core/src/components/Block/BlockActions.tsx +++ b/packages/core/src/components/Block/BlockActions.tsx @@ -9,7 +9,6 @@ import { Transforms } from 'slate'; import { useState } from 'react'; import { useFloating, offset, flip, inline, shift, useTransitionStyles } from '@floating-ui/react'; import { BlockOptions } from '../../UI/BlockOptions/BlockOptions'; -import { findPluginBlockBySelectionPath } from '../../utils/findPluginBlockBySelectionPath'; type ActionsProps = { block: YooptaBlockData; @@ -19,10 +18,6 @@ type ActionsProps = { onChangeActiveBlock: (id: string) => void; }; -function cx(...classNames: (string | undefined)[]) { - return classNames.filter(Boolean).join(' '); -} - const BlockActions = ({ block, editor, dragHandleProps, showActions, onChangeActiveBlock }: ActionsProps) => { const [isBlockOptionsOpen, setIsBlockOptionsOpen] = useState(false); diff --git a/packages/development/src/pages/dev/index.tsx b/packages/development/src/pages/dev/index.tsx index 6e5f82b4b..db7948e84 100644 --- a/packages/development/src/pages/dev/index.tsx +++ b/packages/development/src/pages/dev/index.tsx @@ -165,6 +165,430 @@ const TOOLS: Tools = { export type YooptaChildrenValue = Record; +const value = { + 'f2cc1b99-1c77-49d4-90b9-f76cf7f28757': { + id: 'f2cc1b99-1c77-49d4-90b9-f76cf7f28757', + value: [ + { + id: '9183fd7d-1c8b-4653-b0d5-01bc27f07d95', + type: 'heading-two', + children: [ + { + text: 'Description', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'HeadingTwo', + meta: { + order: 0, + depth: 0, + }, + }, + 'cec7abb6-bff8-4911-bfda-a6c05227621f': { + id: 'cec7abb6-bff8-4911-bfda-a6c05227621f', + value: [ + { + id: '0ce2e21f-15a6-4102-916a-4ed74cee3669', + type: 'paragraph', + children: [ + { + text: 'Fixes', + }, + { + text: ' ', + }, + { + text: '#27481', + }, + { + text: '.', + }, + { + text: '\n', + }, + { + text: 'See also', + }, + { + text: ' ', + }, + { + text: '#3629', + }, + { + text: '.', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'Paragraph', + meta: { + order: 1, + depth: 0, + }, + }, + '53b44347-9c9a-408e-834d-269d0fa17a48': { + id: '53b44347-9c9a-408e-834d-269d0fa17a48', + value: [ + { + id: '6c53740d-3688-44d2-b6db-e0f182224e9d', + type: 'paragraph', + children: [ + { + text: 'These changes allow the user to select multiple blocks without selecting the blocks as a whole. This is done by allowing native selection across block boundaries, detecting the selection start and end in the appropriate rich text instances, and handling actions for this selection.', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'Paragraph', + meta: { + order: 2, + depth: 0, + }, + }, + '5c5e2bf6-50d1-4f72-bb33-7cfb38be480f': { + id: '5c5e2bf6-50d1-4f72-bb33-7cfb38be480f', + value: [ + { + id: 'f70411a6-661b-4c87-9bc2-90b9c474b670', + type: 'paragraph', + children: [ + { + text: 'This PR implements', + }, + { + text: ' ', + }, + { + code: true, + text: 'Enter', + }, + { + text: ',', + }, + { + text: ' ', + }, + { + code: true, + text: 'Backspace', + }, + { + text: ',', + }, + { + text: ' ', + }, + { + code: true, + text: 'Delete', + }, + { + text: ' ', + }, + { + text: '(forward merge) and any input (typing) over the selection.', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'Paragraph', + meta: { + order: 3, + depth: 0, + }, + }, + '1908fd68-e42f-485b-b4ca-7cbbc2626eae': { + id: '1908fd68-e42f-485b-b4ca-7cbbc2626eae', + value: [ + { + id: '13172da8-afef-42fa-a5d1-0b138260195f', + type: 'paragraph', + children: [ + { + text: 'You can select partially by mouse (drag), shift + click, and also the keyboard (shift + arrow).', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'Paragraph', + meta: { + order: 4, + depth: 0, + }, + }, + 'be87a81a-0e17-4efe-bebd-17d56f122df3': { + id: 'be87a81a-0e17-4efe-bebd-17d56f122df3', + value: [ + { + id: '41b3e0d9-0d81-4ceb-b85c-79ea1212a1d9', + type: 'paragraph', + children: [ + { + text: 'It works in all browsers including Firefox.', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'Paragraph', + meta: { + order: 5, + depth: 0, + }, + }, + 'b2572c5f-8258-466f-af7e-631ce00f9e10': { + id: 'b2572c5f-8258-466f-af7e-631ce00f9e10', + value: [ + { + id: 'c223492e-1abe-41df-a305-9a6a04d9025a', + type: 'paragraph', + children: [ + { + text: 'We use the', + }, + { + text: ' ', + }, + { + code: true, + text: 'merge', + }, + { + text: ' ', + }, + { + text: 'function on the block type to handle merges and detect if two blocks are mergeable. If two blocks are not mergeable, we fall back to the current behaviour, which is to select the blocks entirely.', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'Paragraph', + meta: { + order: 6, + depth: 0, + }, + }, + '391fd7a6-efc1-4c6e-b5ad-06449d447296': { + id: '391fd7a6-efc1-4c6e-b5ad-06449d447296', + value: [ + { + id: '6a7c25ba-253b-4e07-844c-c161c41fdaf5', + type: 'heading-two', + children: [ + { + text: 'Checklist:', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'HeadingTwo', + meta: { + order: 7, + depth: 0, + }, + }, + '223c0a79-e9f6-4892-b314-46abae2b3f10': { + id: '223c0a79-e9f6-4892-b314-46abae2b3f10', + value: [ + { + id: 'a010ac22-228f-48a1-83b9-85c50916208e', + type: 'bulleted-list', + children: [ + { + text: ' My code is tested.', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'BulletedList', + meta: { + order: 8, + depth: 0, + }, + }, + '7ea2f516-59d3-4cda-aa03-86b77ddf9f82': { + id: '7ea2f516-59d3-4cda-aa03-86b77ddf9f82', + value: [ + { + id: 'e230a425-7cac-4bcf-bd21-bd565f5e03de', + type: 'bulleted-list', + children: [ + { + text: ' My code follows the WordPress code style.', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'BulletedList', + meta: { + order: 9, + depth: 0, + }, + }, + '1a199ea1-7120-4c10-9b41-c2c0fffcdecc': { + id: '1a199ea1-7120-4c10-9b41-c2c0fffcdecc', + value: [ + { + id: '5bffabf2-d08c-4cef-acff-c6a799ac1fe4', + type: 'bulleted-list', + children: [ + { + text: ' My code follows the accessibility standards.', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'BulletedList', + meta: { + order: 10, + depth: 0, + }, + }, + '65263b95-2037-4eec-a079-0a8896bf558f': { + id: '65263b95-2037-4eec-a079-0a8896bf558f', + value: [ + { + id: '28098640-a649-4f04-b5ee-5a45bccfe904', + type: 'bulleted-list', + children: [ + { + text: " I've tested my changes with keyboard and screen readers.", + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'BulletedList', + meta: { + order: 11, + depth: 0, + }, + }, + '9a469643-c29c-457d-92ad-b03a6f9adeec': { + id: '9a469643-c29c-457d-92ad-b03a6f9adeec', + value: [ + { + id: '5b82ca2f-87d1-40fc-98ea-23b6826174c6', + type: 'bulleted-list', + children: [ + { + text: ' My code has proper inline documentation.', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'BulletedList', + meta: { + order: 12, + depth: 0, + }, + }, + 'b89f8ac1-6760-4294-b1a3-c77b8cc01a10': { + id: 'b89f8ac1-6760-4294-b1a3-c77b8cc01a10', + value: [ + { + id: '27148ba4-41cf-4203-924f-6a03108dc1ca', + type: 'bulleted-list', + children: [ + { + text: " I've included developer documentation if appropriate.", + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'BulletedList', + meta: { + order: 13, + depth: 0, + }, + }, + 'f907d9d2-1026-4266-a7ba-d9be081ffb1d': { + id: 'f907d9d2-1026-4266-a7ba-d9be081ffb1d', + value: [ + { + id: 'fc0ee172-9a9c-4304-877d-7dffec711a51', + type: 'bulleted-list', + children: [ + { + text: " I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).", + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'BulletedList', + meta: { + order: 14, + depth: 0, + }, + }, + 'f96f1b75-282f-405d-a5ae-69d0aafde8d1': { + id: 'f96f1b75-282f-405d-a5ae-69d0aafde8d1', + value: [ + { + id: 'ab2c7a10-33b1-4283-a33c-4b77c4634cd0', + type: 'bulleted-list', + children: [ + { + text: " I've updated related schemas if appropriate.", + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'BulletedList', + meta: { + order: 15, + depth: 0, + }, + }, +}; const BasicExample = () => { const editor: YooEditor = useMemo(() => createYooptaEditor(), []); const rectangleSelectionRef = useRef(null); @@ -191,7 +615,7 @@ const BasicExample = () => { tools={TOOLS} readOnly={readOnly} width={750} - // value={value} + value={value} >
+ +
createYooptaEditor(), []);\n \n return (\n \n );\n}\n\nexport default WithBaseFullSetup;", + }, + ], + props: { + nodeType: 'void', + language: 'javascript', + theme: 'VSCode', + }, + }, + ], + type: 'Code', + meta: { + order: 3, + depth: 0, + }, + }, + '558c885e-f084-439d-a564-491d5f26d002': { + id: '558c885e-f084-439d-a564-491d5f26d002', + value: [ + { + id: 'f34ea7ab-eeb3-4ebd-9431-df0f805179c8', + type: 'paragraph', + children: [ + { + text: 'Click on buttons above and check what happens', + }, + ], + props: { + nodeType: 'block', + }, + }, + ], + type: 'Paragraph', + meta: { + order: 2, + depth: 0, + }, + }, }; diff --git a/web/next-example/src/components/ui/sheet.tsx b/web/next-example/src/components/ui/sheet.tsx index 0a88abca5..a8857afab 100644 --- a/web/next-example/src/components/ui/sheet.tsx +++ b/web/next-example/src/components/ui/sheet.tsx @@ -60,7 +60,7 @@ const SheetContent = React.forwardRef */} {children} - + Close @@ -102,7 +102,7 @@ type SheetProps = { }; const Sheet = ({ items, path }: SheetProps) => { - const isMobile = window.innerWidth < 768; + const isMobile = window.innerWidth < 991; const [isOpen, onOpenChange] = React.useState(!isMobile); const { setTheme } = useTheme(); diff --git a/web/next-example/src/pages/examples/[example].tsx b/web/next-example/src/pages/examples/[example].tsx index b9b5973c3..b40f6281d 100644 --- a/web/next-example/src/pages/examples/[example].tsx +++ b/web/next-example/src/pages/examples/[example].tsx @@ -34,12 +34,12 @@ export const EXAMPLES: Record React.JSX.Element> = { withMediaAndVoids, withExtendedPlugin, withReadOnly, + withEditorControl, withCustomHTMLAttributes, withCustomMark, withCustomPlugin, withSavingToDatabase, withCustomStyles, - withEditorControl, withLargeDocuments, withChatSlack, withCraftExample, @@ -99,7 +99,7 @@ const EXAMPLE_MAP: Record = { description: '', }, withEditorControl: { - title: 'Editor Control', + title: 'Editor Instance', description: '', }, withLargeDocuments: {