From 83cc872c79ec0f70a275e92aefc4f5358ca5a5ab Mon Sep 17 00:00:00 2001 From: Darginec05 Date: Sun, 12 May 2024 20:10:44 +0300 Subject: [PATCH 01/13] add apply styles to plugins --- README.md | 6 +++- package.json | 2 +- packages/blockquote/src/styles.css | 6 +++- packages/blockquote/src/ui/Blockquote.tsx | 15 ++++----- packages/callout/src/styles.css | 24 ++++++++++++++ packages/callout/src/ui/Callout.tsx | 5 +-- packages/core/src/UI/Overlay/Overlay.tsx | 19 +++++++++++ packages/core/src/UI/Portal/Portal.tsx | 33 +++++++++++++++++++ packages/core/src/UI/index.tsx | 4 +++ .../contexts/YooptaContext/YooptaContext.tsx | 1 + packages/core/src/editor/types.ts | 1 + packages/development/src/pages/dev/index.tsx | 1 + packages/headings/src/plugin/HeadingOne.tsx | 2 +- packages/headings/src/plugin/HeadingThree.tsx | 2 +- packages/headings/src/plugin/HeadingTwo.tsx | 2 +- packages/headings/src/styles.css | 14 +++++++- packages/paragraph/src/styles.css | 6 +++- packages/paragraph/src/ui/Paragraph.tsx | 2 +- 18 files changed, 124 insertions(+), 21 deletions(-) create mode 100644 packages/core/src/UI/Overlay/Overlay.tsx create mode 100644 packages/core/src/UI/Portal/Portal.tsx diff --git a/README.md b/README.md index a0321b064..c1d2a1b62 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,8 @@ type YooptaEditor = { readOnly?: boolean; /* Width. [Default] - 450px */ width?: number | string; + /* Id for your editor instance. Can be useful for multiple editors */ + id?: number | string; }; ``` @@ -315,7 +317,9 @@ If you have any questions or need assistance raise an issue in the GitHub reposi Let's create powerful and engaging editing experiences together with Yoopta-Editor! ## Contributing -If you're ready to support Yoopta-Editor, here's how you can do it: + +If you're ready to support Yoopta-Editor, here's how you can do it: + - If you've spotted a bug or thinking of a feature [raise an issue](https://github.com/Darginec05/Yoopta-Editor/issues/new/choose) - If you want to collaborate on the project, find an issue you like to work on and suggest your changes. - If you want to discuss your idea feel free to create a [discussion](https://github.com/Darginec05/Yoopta-Editor/discussions/new/choose) diff --git a/package.json b/package.json index fc57d7c73..e7d79e123 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ ], "private": true, "scripts": { - "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/image --scope @yoopta/action-menu-list --scope @yoopta/video --scope @yoopta/paragraph --scope @yoopta/blockquote --scope @yoopta/headings --parallel --ignore development", + "start": "yarn lerna run start --parallel --ignore development", "build": "yarn clean && yarn lerna run build --parallel --ignore development", "clean": "find ./packages -type d -name dist ! -path './packages/development/*' -exec rm -rf {} +", "serve": "cd ./packages/development && yarn dev", diff --git a/packages/blockquote/src/styles.css b/packages/blockquote/src/styles.css index 3db5b698c..6d2266d83 100644 --- a/packages/blockquote/src/styles.css +++ b/packages/blockquote/src/styles.css @@ -1 +1,5 @@ -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +.yoopta-blockquote { + @apply yoo-b-pl-6 yoo-b-leading-7 yoo-b-mt-[8px] yoo-b-border-l-2 yoo-b-border-l-[#e5e7eb] +} \ No newline at end of file diff --git a/packages/blockquote/src/ui/Blockquote.tsx b/packages/blockquote/src/ui/Blockquote.tsx index 7c625b467..6927ff660 100644 --- a/packages/blockquote/src/ui/Blockquote.tsx +++ b/packages/blockquote/src/ui/Blockquote.tsx @@ -1,21 +1,20 @@ import { PluginElementRenderProps } from '@yoopta/editor'; -const blockquoteStyles = { - margin: '8px 0 0 0', - border: 'none', - borderLeft: '2px solid #e5e7eb', -}; +// const blockquoteStyles = { +// margin: '8px 0 0 0', +// border: 'none', +// borderLeft: '2px solid #e5e7eb', +// }; const BlockquoteRender = (props: PluginElementRenderProps) => { - const { className = '', style, ...htmlAttrs } = props.HTMLAttributes || {}; + const { className = '', ...htmlAttrs } = props.HTMLAttributes || {}; return (
{props.children}
diff --git a/packages/callout/src/styles.css b/packages/callout/src/styles.css index 9b6a9494a..53a7f447f 100644 --- a/packages/callout/src/styles.css +++ b/packages/callout/src/styles.css @@ -7,4 +7,28 @@ .yoopta-callout:hover .yoopta-callout-options { opacity: 1; +} + +.yoopta-callout { + @apply yoo-callout-rounded-md yoo-callout-mt-2 yoo-callout-p-2 yoo-callout-pl-4 yoo-callout-leading-7 yoo-callout-text-[16px] +} + +.yoopta-callout-theme-default { + @apply yoo-callout-text-[#000] yoo-callout-bg-[#f5f7f9] +} + +.yoopta-callout-theme-info { + @apply yoo-callout-text-[#08a2e7] yoo-callout-bg-[#e1f3fe] yoo-callout-border-l-4 yoo-callout-border-l-[#08a2e7] +} + +.yoopta-callout-theme-success { + @apply yoo-callout-text-[#12b77f] yoo-callout-bg-[#d1fae5] yoo-callout-border-l-4 yoo-callout-border-l-[#12b77f] +} + +.yoopta-callout-theme-warning { + @apply yoo-callout-text-[#f97415] yoo-callout-bg-[#fef3c9] yoo-callout-border-l-4 yoo-callout-border-l-[#f97415] +} + +.yoopta-callout-theme-error { + @apply yoo-callout-text-[#ee4443] yoo-callout-bg-[#fee1e2] yoo-callout-border-l-4 yoo-callout-border-l-[#ee4443] } \ No newline at end of file diff --git a/packages/callout/src/ui/Callout.tsx b/packages/callout/src/ui/Callout.tsx index e015860c8..d74b03e2c 100644 --- a/packages/callout/src/ui/Callout.tsx +++ b/packages/callout/src/ui/Callout.tsx @@ -1,5 +1,4 @@ import { PluginElementRenderProps, useBlockData, useYooptaEditor, useYooptaReadOnly } from '@yoopta/editor'; -import { CALLOUT_THEME_STYLES } from '../utils'; import { CalloutBlockOptions } from './CalloutBlockOptions'; const CalloutRender = ({ element, attributes, children, blockId, HTMLAttributes = {} }: PluginElementRenderProps) => { @@ -9,13 +8,11 @@ const CalloutRender = ({ element, attributes, children, blockId, HTMLAttributes const editor = useYooptaEditor(); const isReadOnly = useYooptaReadOnly(); const { theme = 'default' } = element.props || {}; - const styles = CALLOUT_THEME_STYLES[theme]; return (
diff --git a/packages/core/src/UI/Overlay/Overlay.tsx b/packages/core/src/UI/Overlay/Overlay.tsx new file mode 100644 index 000000000..0a0cbb6b9 --- /dev/null +++ b/packages/core/src/UI/Overlay/Overlay.tsx @@ -0,0 +1,19 @@ +import { FloatingOverlay } from '@floating-ui/react'; +import { MouseEvent, ReactNode } from 'react'; + +type Props = { + children: ReactNode; + lockScroll?: boolean; + className?: string; + onClick?: (e: MouseEvent) => void; +}; + +const Overlay = (props: Props) => { + return ( + + {props.children} + + ); +}; + +export { Overlay }; diff --git a/packages/core/src/UI/Portal/Portal.tsx b/packages/core/src/UI/Portal/Portal.tsx new file mode 100644 index 000000000..8166025e1 --- /dev/null +++ b/packages/core/src/UI/Portal/Portal.tsx @@ -0,0 +1,33 @@ +import { FloatingPortal } from '@floating-ui/react'; +import { MutableRefObject, ReactNode, useEffect, useState } from 'react'; +import { useYooptaEditor } from '../../contexts/YooptaContext/YooptaContext'; + +type Props = { + children: ReactNode; + id: string; + root?: HTMLElement | null | MutableRefObject; +}; + +const Portal = (props: Props) => { + const [isMounted, setIsMounted] = useState(false); + const editor = useYooptaEditor(); + + useEffect(() => { + setIsMounted(true); + }, []); + + if (!isMounted) return null; + + return ( + + {props.children} + + ); +}; + +export { Portal }; diff --git a/packages/core/src/UI/index.tsx b/packages/core/src/UI/index.tsx index dd11fd68c..990282742 100644 --- a/packages/core/src/UI/index.tsx +++ b/packages/core/src/UI/index.tsx @@ -1,7 +1,11 @@ import * as BlockOptionsUI from './BlockOptions/BlockOptions'; import { ExtendedBlockActions } from './ExtendedBlockActions/ExtendedBlockActions'; +import { Portal } from './Portal/Portal'; +import { Overlay } from './Overlay/Overlay'; export const UI = { ...BlockOptionsUI, ExtendedBlockActions, + Portal, + Overlay, }; diff --git a/packages/core/src/contexts/YooptaContext/YooptaContext.tsx b/packages/core/src/contexts/YooptaContext/YooptaContext.tsx index 37c9e8fb1..e96342701 100644 --- a/packages/core/src/contexts/YooptaContext/YooptaContext.tsx +++ b/packages/core/src/contexts/YooptaContext/YooptaContext.tsx @@ -9,6 +9,7 @@ export type YooptaEditorContext = { const DEFAULT_HANDLERS: YooptaEditorContext = { editor: { + id: '', getBlock: () => undefined, insertBlock: () => undefined, insertBlocks: () => undefined, diff --git a/packages/core/src/editor/types.ts b/packages/core/src/editor/types.ts index 69e2fd5d0..5b94eb8fa 100644 --- a/packages/core/src/editor/types.ts +++ b/packages/core/src/editor/types.ts @@ -74,6 +74,7 @@ export type YooEditorEvents = 'change' | 'block:copy'; // [TODO] - Fix generic and default types export type YooEditor = { + id: string; insertBlock: (data: YooptaBlockData, options?: YooptaEditorTransformOptions) => void; insertBlocks: (blocks: YooptaBlockData[], options?: YooptaEditorTransformOptions) => void; splitBlock: (options?: YooptaEditorTransformOptions) => void; diff --git a/packages/development/src/pages/dev/index.tsx b/packages/development/src/pages/dev/index.tsx index ac1eedcea..18d86bc2d 100644 --- a/packages/development/src/pages/dev/index.tsx +++ b/packages/development/src/pages/dev/index.tsx @@ -1439,6 +1439,7 @@ const BasicExample = () => { tools={TOOLS} readOnly={readOnly} width={750} + value={value} >
); -const BlockOptionsMenuItem = ({ children }) => ( -
- {children} -
-); +const BlockOptionsMenuItem = ({ children }) =>
{children}
; type BlockOptionsSeparatorProps = { className?: string; }; -const BlockOptionsSeparator = ({ className }: BlockOptionsSeparatorProps) => ( +const BlockOptionsSeparator = ({ className = '' }: BlockOptionsSeparatorProps) => (
); @@ -123,21 +118,13 @@ const BlockOptions = ({ isOpen, onClose, refs, style, children }: BlockOptionsPr - - @@ -159,7 +146,7 @@ const BlockOptions = ({ isOpen, onClose, refs, style, children }: BlockOptionsPr )} diff --git a/packages/core/src/UI/ExtendedBlockActions/ExtendedBlockActions.tsx b/packages/core/src/UI/ExtendedBlockActions/ExtendedBlockActions.tsx index e34af90a4..f735ff482 100644 --- a/packages/core/src/UI/ExtendedBlockActions/ExtendedBlockActions.tsx +++ b/packages/core/src/UI/ExtendedBlockActions/ExtendedBlockActions.tsx @@ -56,9 +56,7 @@ const ExtendedBlockActions = ({ id, className, style, onClick, children }: Props type="button" ref={blockOptionRefs.setReference} id={id} - className={`yoo-editor-absolute yoo-editor-right-[8px] yoo-editor-top-[8px] yoo-editor-flex yoo-editor-items-center yoo-editor-justify-between yoo-editor-z-10 yoo-editor-opacity-1 yoo-editor-bg-[#eee] yoo-editor-w-[22px] yoo-editor-h-[22px] yoo-editor-transition-opacity yoo-editor-duration-150 yoo-editor-ease-in yoo-editor-border-none yoo-editor-cursor-pointer yoo-editor-rounded-[2px] yoo-editor-p-[0_4px] ${ - className || '' - } yoopta-extended-block-actions`} + className={`yoopta-extended-block-actions ${className || ''}`} onClick={onDotsClick} style={isBlockOptionsOpen ? { ...style, opacity: 1 } : style} > diff --git a/packages/core/src/components/Block/Block.tsx b/packages/core/src/components/Block/Block.tsx index baac828f3..1bfdd8dfd 100644 --- a/packages/core/src/components/Block/Block.tsx +++ b/packages/core/src/components/Block/Block.tsx @@ -37,7 +37,7 @@ const Block = ({ children, block, blockId }) => { return (
{ > {children}
- {isSelected && !editor.readOnly && ( -
- )} + {isSelected && !editor.readOnly &&
}
); }; diff --git a/packages/core/src/components/Block/BlockActions.tsx b/packages/core/src/components/Block/BlockActions.tsx index d7d042fea..6fba65430 100644 --- a/packages/core/src/components/Block/BlockActions.tsx +++ b/packages/core/src/components/Block/BlockActions.tsx @@ -127,11 +127,7 @@ const BlockActions = ({ block, editor, dragHandleProps, onChangeActiveBlock, sho const blockOptionsFloatingStyle = { ...floatingStyles, ...blockOptionsTransitionStyles }; return ( -
+
{isActionMenuOpen && hasActionMenu && ( @@ -141,16 +137,12 @@ const BlockActions = ({ block, editor, dragHandleProps, onChangeActiveBlock, sho )} - @@ -61,7 +57,7 @@ export const CodeBlockOptions = ({ block, editor, element }: Props) => { onChange={onChangeTheme} value={element.props?.theme || 'VSCode'} > - + Theme @@ -78,7 +74,7 @@ export const CodeBlockOptions = ({ block, editor, element }: Props) => { onChange={onChangeLanguage} value={element.props?.language || 'JavaScript'} > - + Language diff --git a/packages/core/src/UI/BlockOptions/BlockOptions.tsx b/packages/core/src/UI/BlockOptions/BlockOptions.tsx index f3b37a16a..4c9ef0afb 100644 --- a/packages/core/src/UI/BlockOptions/BlockOptions.tsx +++ b/packages/core/src/UI/BlockOptions/BlockOptions.tsx @@ -19,12 +19,12 @@ import { getRootBlockElement } from '../../utils/blockElements'; import { useYooptaTools } from '../../contexts/YooptaContext/ToolsContext'; import { buildActionMenuRenderProps } from './utils'; -const BlockOptionsMenuGroup = ({ children }) =>
{children}
; +const BlockOptionsMenuGroup = ({ children }) =>
{children}
; const BlockOptionsMenuContent = ({ children }) => (
e.stopPropagation()} - className="yoo-editor-bg-[#FFF] yoo-editor-relative yoo-editor-min-w-[200px] yoo-editor-w-auto yoo-editor-overflow-hidden yoo-editor-rounded-md yoo-editor-border yoo-editor-border-solid yoo-editor-border-[#e5e7eb] yoo-editor-bg-popover yoo-editor-py-[6px] yoo-editor-px-0 yoo-editor-text-popover-foreground yoo-editor-shadow-md data-[state=open]:yoo-editor-animate-in data-[state=closed]:yoo-editor-animate-out data-[state=closed]:yoo-editor-fade-out-0 data-[state=open]:yoo-editor-fade-in-0 data-[state=closed]:yoo-editor-zoom-out-95 data-[state=open]:yoo-editor-zoom-in-95 data-[side=bottom]:yoo-editor-slide-in-from-top-2 data-[side=left]:yoo-editor-slide-in-from-right-2 data-[side=right]:yoo-editor-slide-in-from-left-2 data-[side=top]:yoo-editor-slide-in-from-bottom-2" + className="yoopta-block-options-menu-content data-[state=open]:yoo-editor-animate-in data-[state=closed]:yoo-editor-animate-out data-[state=closed]:yoo-editor-fade-out-0 data-[state=open]:yoo-editor-fade-in-0 data-[state=closed]:yoo-editor-zoom-out-95 data-[state=open]:yoo-editor-zoom-in-95 data-[side=bottom]:yoo-editor-slide-in-from-top-2 data-[side=left]:yoo-editor-slide-in-from-right-2 data-[side=right]:yoo-editor-slide-in-from-left-2 data-[side=top]:yoo-editor-slide-in-from-bottom-2" > {children}
@@ -37,7 +37,7 @@ type BlockOptionsSeparatorProps = { }; const BlockOptionsSeparator = ({ className = '' }: BlockOptionsSeparatorProps) => ( -
+
); type BlockOptionsProps = { diff --git a/packages/core/src/plugins/SlateEditorComponent.tsx b/packages/core/src/plugins/SlateEditorComponent.tsx index 4ec67fd88..be4760e22 100644 --- a/packages/core/src/plugins/SlateEditorComponent.tsx +++ b/packages/core/src/plugins/SlateEditorComponent.tsx @@ -247,26 +247,24 @@ const SlateEditorComponent = ({ ); return ( -
- -
+ ); }; diff --git a/packages/core/src/styles.css b/packages/core/src/styles.css index 0371cd4a7..959d64b58 100644 --- a/packages/core/src/styles.css +++ b/packages/core/src/styles.css @@ -97,6 +97,14 @@ pre { @apply yoo-editor-absolute yoo-editor-right-[8px] yoo-editor-top-[8px] yoo-editor-flex yoo-editor-items-center yoo-editor-justify-between yoo-editor-z-10 yoo-editor-opacity-100 yoo-editor-bg-[#eee] yoo-editor-w-[22px] yoo-editor-h-[22px] yoo-editor-transition-opacity yoo-editor-duration-150 yoo-editor-ease-in yoo-editor-border-none yoo-editor-cursor-pointer yoo-editor-rounded-[2px] yoo-editor-p-[0_4px] } -/* .yoopta-block-options-menu-content { - @apply yoo-editor-bg-[#FFF] yoo-editor-relative yoo-editor-min-w-[200px] yoo-editor-w-auto yoo-editor-overflow-hidden yoo-editor-rounded-md yoo-editor-border yoo-editor-border-solid yoo-editor-border-[#e5e7eb] yoo-editor-py-[6px] yoo-editor-px-0 yoo-editor-shadow-md data-[state=open]:yoo-editor-animate-in data-[state=closed]:yoo-editor-animate-out data-[state=closed]:yoo-editor-fade-out-0 data-[state=open]:yoo-editor-fade-in-0 data-[state=closed]:yoo-editor-zoom-out-95 data-[state=open]:yoo-editor-zoom-in-95 data-[side=bottom]:yoo-editor-slide-in-from-top-2 data-[side=left]:yoo-editor-slide-in-from-right-2 data-[side=right]:yoo-editor-slide-in-from-left-2 data-[side=top]:yoo-editor-slide-in-from-bottom-2 -} */ \ No newline at end of file +.yoopta-block-options-separator { + @apply yoo-editor-h-[1px] yoo-editor-bg-[#37352f14] yoo-editor-my-[4px] yoo-editor-w-full +} + +.yoopta-block-options-menu-content { + @apply yoo-editor-bg-[#FFF] yoo-editor-relative yoo-editor-min-w-[200px] yoo-editor-w-auto yoo-editor-overflow-hidden yoo-editor-rounded-md yoo-editor-border yoo-editor-border-solid yoo-editor-border-[#e5e7eb] yoo-editor-py-[6px] yoo-editor-px-0 yoo-editor-shadow-md +} + +.yoopta-block-options-group { + @apply yoo-editor-flex yoo-editor-flex-col +} \ No newline at end of file diff --git a/packages/embed/src/ui/EmbedBlockOptions.tsx b/packages/embed/src/ui/EmbedBlockOptions.tsx index b6f67678a..346a5d87c 100644 --- a/packages/embed/src/ui/EmbedBlockOptions.tsx +++ b/packages/embed/src/ui/EmbedBlockOptions.tsx @@ -20,11 +20,7 @@ const EmbedBlockOptions = ({ editor, block, props: embedProps }: Props) => { - diff --git a/packages/file/src/ui/FileBlockOptions.tsx b/packages/file/src/ui/FileBlockOptions.tsx index e4e04accd..b085ec1bb 100644 --- a/packages/file/src/ui/FileBlockOptions.tsx +++ b/packages/file/src/ui/FileBlockOptions.tsx @@ -21,11 +21,7 @@ const FileBlockOptions = ({ editor, block, props: fileProps }: Props) => { - diff --git a/packages/image/src/ui/ImageBlockOptions.tsx b/packages/image/src/ui/ImageBlockOptions.tsx index 73e22ad38..7f2e6c580 100644 --- a/packages/image/src/ui/ImageBlockOptions.tsx +++ b/packages/image/src/ui/ImageBlockOptions.tsx @@ -45,11 +45,7 @@ const ImageBlockOptions = ({ editor, block, props: imageProps }: Props) => { - - - - - diff --git a/packages/file/src/ui/Placeholder.tsx b/packages/file/src/ui/Placeholder.tsx index c16e1328c..2e435f1fd 100644 --- a/packages/file/src/ui/Placeholder.tsx +++ b/packages/file/src/ui/Placeholder.tsx @@ -29,7 +29,7 @@ const Placeholder = ({ attributes, children, blockId }) => { contentEditable={false} > diff --git a/packages/image/src/ui/ImageUploader.tsx b/packages/image/src/ui/ImageUploader.tsx index 692fbf5be..ec37941f2 100644 --- a/packages/image/src/ui/ImageUploader.tsx +++ b/packages/image/src/ui/ImageUploader.tsx @@ -35,7 +35,7 @@ const ImageUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }: type="button" onClick={() => switchTab('upload')} style={getTabStyles(isUploader)} - className={`yoo-image-py-[6px] yoo-image-whitespace-nowrap yoo-image-min-w-0 yoo-image-flex-shrink-0 yoo-image-text-[rgb(55,53,47)] yoo-image-relative yoo-image-cursor-pointer yoo-image-user-select-none yoo-image-bg-inherit yoo-image-transition-[height_20ms_ease-in] yoo-image-inline-flex yoo-image-items-center yoo-image-h-full yoo-image-text-[14px] yoo-image-leading-[1.2] yoo-image-px-[8px]`} + className={`yoopta-button yoo-image-py-[6px] yoo-image-whitespace-nowrap yoo-image-min-w-0 yoo-image-flex-shrink-0 yoo-image-text-[rgb(55,53,47)] yoo-image-relative yoo-image-cursor-pointer yoo-image-user-select-none yoo-image-bg-inherit yoo-image-transition-[height_20ms_ease-in] yoo-image-inline-flex yoo-image-items-center yoo-image-h-full yoo-image-text-[14px] yoo-image-leading-[1.2] yoo-image-px-[8px]`} > Upload @@ -44,7 +44,7 @@ const ImageUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }: onClick={() => switchTab('embed')} style={getTabStyles(isEmbed)} className={ - 'yoo-image-py-[6px] yoo-image-whitespace-nowrap yoo-image-min-w-0 yoo-image-flex-shrink-0 yoo-image-text-[rgb(55,53,47)] yoo-image-relative yoo-image-cursor-pointer yoo-image-user-select-none yoo-image-bg-inherit yoo-image-transition-[height_20ms_ease-in] yoo-image-inline-flex yoo-image-items-center yoo-image-h-full yoo-image-text-[14px] yoo-image-leading-[1.2] yoo-image-px-[8px]' + 'yoopta-button yoo-image-py-[6px] yoo-image-whitespace-nowrap yoo-image-min-w-0 yoo-image-flex-shrink-0 yoo-image-text-[rgb(55,53,47)] yoo-image-relative yoo-image-cursor-pointer yoo-image-user-select-none yoo-image-bg-inherit yoo-image-transition-[height_20ms_ease-in] yoo-image-inline-flex yoo-image-items-center yoo-image-h-full yoo-image-text-[14px] yoo-image-leading-[1.2] yoo-image-px-[8px]' } > Image link diff --git a/packages/image/src/ui/Placeholder.tsx b/packages/image/src/ui/Placeholder.tsx index 935447e7c..7141efe00 100644 --- a/packages/image/src/ui/Placeholder.tsx +++ b/packages/image/src/ui/Placeholder.tsx @@ -29,7 +29,7 @@ const Placeholder = ({ attributes, children, blockId }) => { contentEditable={false} >
@@ -44,7 +44,7 @@ const VideoUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }: onClick={() => switchTab('embed')} style={getTabStyles(isEmbed)} className={ - 'yoo-video-py-[6px] yoo-video-whitespace-nowrap yoo-video-min-w-0 yoo-video-flex-shrink-0 yoo-video-text-[rgb(55,53,47)] yoo-video-relative yoo-video-cursor-pointer yoo-video-user-select-none yoo-video-bg-inherit yoo-video-transition-[height_20ms_ease-in] yoo-video-inline-flex yoo-video-items-center yoo-video-h-full yoo-video-text-[14px] yoo-video-leading-[1.2] yoo-video-px-[8px]' + 'yoopta-button yoo-video-py-[6px] yoo-video-whitespace-nowrap yoo-video-min-w-0 yoo-video-flex-shrink-0 yoo-video-text-[rgb(55,53,47)] yoo-video-relative yoo-video-cursor-pointer yoo-video-user-select-none yoo-video-bg-inherit yoo-video-transition-[height_20ms_ease-in] yoo-video-inline-flex yoo-video-items-center yoo-video-h-full yoo-video-text-[14px] yoo-video-leading-[1.2] yoo-video-px-[8px]' } > Video link From 2a6dd19de411da3327dfdd46bcbe11748eb9aa0e Mon Sep 17 00:00:00 2001 From: Darginec05 Date: Tue, 14 May 2024 00:52:49 +0300 Subject: [PATCH 06/13] finish with portals --- .../src/components/ActionMenuList.tsx | 56 ++++++++----------- .../components/DefaultActionMenuRender.tsx | 5 +- packages/action-menu/src/styles.css | 10 +++- packages/code/src/ui/Select.tsx | 5 +- .../core/src/UI/BlockOptions/BlockOptions.tsx | 34 ++++------- packages/core/src/UI/Portal/Portal.tsx | 5 +- packages/core/src/YooptaEditor.tsx | 2 + .../src/components/Block/BlockActions.tsx | 21 +++---- packages/core/src/components/Block/hooks.ts | 12 +--- .../core/src/components/Editor/Editor.tsx | 3 +- packages/embed/src/ui/EmbedUploader.tsx | 12 ++-- .../file/src/ui/FilePlaceholderUploader.tsx | 14 +++-- packages/image/src/ui/ImageUploader.tsx | 11 ++-- .../src/components/DefaultToolbarRender.tsx | 42 +++----------- .../toolbar/src/components/HighlightColor.tsx | 8 +-- packages/toolbar/src/components/Toolbar.tsx | 25 +++------ packages/video/src/ui/VideoUploader.tsx | 12 ++-- 17 files changed, 109 insertions(+), 168 deletions(-) diff --git a/packages/action-menu/src/components/ActionMenuList.tsx b/packages/action-menu/src/components/ActionMenuList.tsx index 61c910061..b2e88f24a 100644 --- a/packages/action-menu/src/components/ActionMenuList.tsx +++ b/packages/action-menu/src/components/ActionMenuList.tsx @@ -1,15 +1,6 @@ -import { useEffect, useLayoutEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { DefaultActionMenuRender } from './DefaultActionMenuRender'; -import { - useFloating, - offset, - flip, - shift, - inline, - autoUpdate, - FloatingPortal, - useTransitionStyles, -} from '@floating-ui/react'; +import { useFloating, offset, flip, shift, inline, autoUpdate, useTransitionStyles } from '@floating-ui/react'; import { Editor, Path } from 'slate'; import { YooptaBlockData, @@ -18,11 +9,13 @@ import { findSlateBySelectionPath, HOTKEYS, findPluginBlockBySelectionPath, - YooEditor, + UI, } from '@yoopta/editor'; import { ActionMenuRenderProps, ActionMenuToolItem, ActionMenuToolProps } from '../types'; import { buildActionMenuRenderProps, mapActionMenuItems } from './utils'; +const { Portal } = UI; + const filterBy = (item: YooptaBlockData | YooptaBlock['options'], text: string, field: string) => { if (!item || !item?.[field]) return false; const itemField = Array.isArray(item[field]) ? item[field].join(' ') : item[field]; @@ -82,7 +75,7 @@ const ActionMenuList = ({ items, render }: ActionMenuToolProps) => { }; useEffect(() => { - const yooptaEditorRef = document.getElementById('yoopta-editor'); + const yooptaEditorRef = document.querySelector(`[data-yoopta-editor-id="${editor.id}"]`); updateActionMenuPosition(); const handleActionMenuKeyUp = (event: KeyboardEvent) => { @@ -103,6 +96,7 @@ const ActionMenuList = ({ items, render }: ActionMenuToolProps) => { const slateEditorRef = event.currentTarget as HTMLElement; const isInsideEditor = slateEditorRef?.contains(event.target as Node); + const pluginWithCustomEditor = document.querySelector('[data-custom-editor]'); const isInsideCustomEditor = pluginWithCustomEditor?.contains(event.target as Node); @@ -281,37 +275,31 @@ const ActionMenuList = ({ items, render }: ActionMenuToolProps) => { return () => clearTimeout(timeout); }, [actions.length, isMenuOpen]); - if (!isMounted) return null; - const style = { ...floatingStyles, ...transitionStyles }; if (render) { return ( // [TODO] - take care about SSR - -
- {/* [TODO] - pass key down handler */} - {render({ ...renderProps, actions })} -
- + + {isMounted && ( +
+ {/* [TODO] - pass key down handler */} + {render({ ...renderProps, actions })} +
+ )} + ); } return ( // [TODO] - take care about SSR - -
- -
- + + {isMounted && ( +
+ +
+ )} + ); }; diff --git a/packages/action-menu/src/components/DefaultActionMenuRender.tsx b/packages/action-menu/src/components/DefaultActionMenuRender.tsx index d58e6c8e0..c4beb2f86 100644 --- a/packages/action-menu/src/components/DefaultActionMenuRender.tsx +++ b/packages/action-menu/src/components/DefaultActionMenuRender.tsx @@ -34,10 +34,7 @@ const DefaultActionMenuRender = ({ }; return ( -
+
{ }; const SelectContent = ({ children }) => { + const editor = useYooptaEditor(); + return ( - +
{children}
; @@ -112,8 +104,8 @@ const BlockOptions = ({ isOpen, onClose, refs, style, children }: BlockOptionsPr return ( // [TODO] - take care about SSR - - + +
@@ -132,17 +124,13 @@ const BlockOptions = ({ isOpen, onClose, refs, style, children }: BlockOptionsPr {!!ActionMenu && !isVoidElement && !editor.blocks[currentBlock?.type || '']?.hasCustomEditor && ( {isActionMenuMounted && ( - - setIsActionMenuOpen(false)} - > + + setIsActionMenuOpen(false)}>
- - + + )}
- - + + ); }; diff --git a/packages/core/src/UI/Portal/Portal.tsx b/packages/core/src/UI/Portal/Portal.tsx index 8166025e1..4070ebb61 100644 --- a/packages/core/src/UI/Portal/Portal.tsx +++ b/packages/core/src/UI/Portal/Portal.tsx @@ -5,7 +5,6 @@ import { useYooptaEditor } from '../../contexts/YooptaContext/YooptaContext'; type Props = { children: ReactNode; id: string; - root?: HTMLElement | null | MutableRefObject; }; const Portal = (props: Props) => { @@ -20,10 +19,8 @@ const Portal = (props: Props) => { return ( {props.children} diff --git a/packages/core/src/YooptaEditor.tsx b/packages/core/src/YooptaEditor.tsx index ef51db70a..83cd0ce84 100644 --- a/packages/core/src/YooptaEditor.tsx +++ b/packages/core/src/YooptaEditor.tsx @@ -17,6 +17,7 @@ import { import { YooptaPlugin } from './plugins'; import { YooptaMark } from './marks'; import { FakeSelectionMark } from './marks/FakeSelectionMark'; +import { generateId } from './utils/generateId'; type Props = { editor: YooEditor; @@ -91,6 +92,7 @@ const YooptaEditor = ({ }, [pluginsProps]); const [editorState, setEditorState] = useState<{ editor: YooEditor; version: number }>(() => { + if (!editor.id) editor.id = generateId(); editor.applyChanges = applyChanges; editor.readOnly = readOnly || false; if (marks) editor.formats = buildMarks(editor, marks); diff --git a/packages/core/src/components/Block/BlockActions.tsx b/packages/core/src/components/Block/BlockActions.tsx index 6fba65430..69b607234 100644 --- a/packages/core/src/components/Block/BlockActions.tsx +++ b/packages/core/src/components/Block/BlockActions.tsx @@ -7,19 +7,12 @@ import { findSlateBySelectionPath } from '../../utils/findSlateBySelectionPath'; import { ReactEditor } from 'slate-react'; import { Editor, Transforms } from 'slate'; import { useState } from 'react'; -import { - useFloating, - offset, - flip, - inline, - shift, - useTransitionStyles, - FloatingPortal, - FloatingOverlay, -} from '@floating-ui/react'; +import { useFloating, offset, flip, inline, shift, useTransitionStyles } from '@floating-ui/react'; import { BlockOptions } from '../../UI/BlockOptions/BlockOptions'; import { getRootBlockElement } from '../../utils/blockElements'; import { useActionMenuToolRefs } from './hooks'; +import { Overlay } from '../../UI/Overlay/Overlay'; +import { Portal } from '../../UI/Portal/Portal'; type ActionsProps = { block: YooptaBlockData; @@ -129,13 +122,13 @@ const BlockActions = ({ block, editor, dragHandleProps, onChangeActiveBlock, sho return (
{isActionMenuOpen && hasActionMenu && ( - - + +
- - + + )} Date: Wed, 15 May 2024 19:01:40 +0300 Subject: [PATCH 10/13] added example with custom styles --- packages/development/src/pages/dev/index.tsx | 6 +++++- packages/development/src/styles/globals.css | 10 +++++----- packages/headings/src/plugin/HeadingOne.tsx | 2 +- packages/headings/src/plugin/HeadingThree.tsx | 2 +- web/vite-example/src/index.css | 2 +- 5 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/development/src/pages/dev/index.tsx b/packages/development/src/pages/dev/index.tsx index 8d2dfb271..ecbc1cd0a 100644 --- a/packages/development/src/pages/dev/index.tsx +++ b/packages/development/src/pages/dev/index.tsx @@ -678,7 +678,11 @@ const BasicExample = () => {