From 9fd19ab457a001ca561d57e438787bb2d03b5aac Mon Sep 17 00:00:00 2001 From: kundan1023 Date: Thu, 19 Oct 2023 14:45:32 +0545 Subject: [PATCH 1/3] feat: added hide toolbar option for individule --- package.json | 2 +- src/components/RaraEditor/RaraEditor.tsx | 110 +++++++++++------------ src/components/Toolbar/Toolbar.tsx | 45 ++++++---- src/types/index.ts | 91 +++++++++++-------- 4 files changed, 137 insertions(+), 111 deletions(-) diff --git a/package.json b/package.json index 963c4d4..078a5a5 100644 --- a/package.json +++ b/package.json @@ -95,4 +95,4 @@ "\\.(css|less|scss|sass)$": "identity-obj-proxy" } } -} +} \ No newline at end of file diff --git a/src/components/RaraEditor/RaraEditor.tsx b/src/components/RaraEditor/RaraEditor.tsx index e1821e4..91a40fa 100644 --- a/src/components/RaraEditor/RaraEditor.tsx +++ b/src/components/RaraEditor/RaraEditor.tsx @@ -74,11 +74,11 @@ const RaraEditor = (props: RaraEditorProps) => { mentionDetailRenderer, styles, value, - autoFocus=false, - + autoFocus = false, + toolbarIgnorList } = props; - + const ref = React.useRef(null); const [target, setTarget] = React.useState(); @@ -99,7 +99,7 @@ const RaraEditor = (props: RaraEditorProps) => { ), [] ); - + const { onDOMBeforeInput, onKeyDown, @@ -146,7 +146,7 @@ const RaraEditor = (props: RaraEditorProps) => { ] ); const renderLeaf = React.useCallback( - (props: RenderLeafProps) => , + (props: RenderLeafProps) => , [] ); @@ -171,7 +171,7 @@ const RaraEditor = (props: RaraEditorProps) => { { - + //TO check if the values are changed or not const isAstChange = editor.operations.some( op => 'set_selection' !== op.type @@ -234,19 +234,20 @@ const RaraEditor = (props: RaraEditorProps) => { return; } } + setTarget(null); if (isAstChange) { // Save the value to Local Storage. setFinalData(change as unknown as string); - if(JSON.stringify(change) === '[{"type":"paragraph","children":[{"text":""}]}]') - { onChange && onChange(''); - } else { + if (JSON.stringify(change) === '[{"type":"paragraph","children":[{"text":""}]}]') { + onChange && onChange(''); + } else { onChange && onChange(JSON.stringify(change)); } //managing mention data const edtr = editor.operations; - + const mentionUser = edtr.find( (e: BaseOperation): e is BaseInsertNodeOperation => e.type === 'insert_node' && e?.node?.type === 'mention' @@ -254,7 +255,7 @@ const RaraEditor = (props: RaraEditorProps) => { const removeMentionUser = edtr.filter( (e: BaseOperation): e is RemoveNodeOperation => - e.type === 'remove_node' && (e?.node?.type === 'mention' ||(e?.node?.type === 'mention' && e?.node?.text === "")), + e.type === 'remove_node' && (e?.node?.type === 'mention' || (e?.node?.type === 'mention' && e?.node?.text === "")), ); const mentionContact = edtr.find( (e: BaseOperation): e is BaseInsertNodeOperation => @@ -272,32 +273,31 @@ const RaraEditor = (props: RaraEditorProps) => { // console.log({editor,edtr}); let last let newLast - const setSelection = edtr.filter((e:BaseOperation):e is SelectionOperation => e.type === 'set_selection') - - for(let i=0; i e.type === 'set_selection') + + for (let i = 0; i < removeMentionUser.length; i++) { setMentionUsers((pre: string[]) => [ ...removeById(pre, removeMentionUser[i].node.id!), ]); } - - last = removeMentionUser[0].path[removeMentionUser[0].path.length -1] - 1 , - newLast = [...removeMentionUser[0].path], - newLast[removeMentionUser[0].path.length - 1] = last, - Transforms.select(editor, { - anchor: Editor.end(editor, { - path: setSelection ? setSelection[0]?.newProperties?.anchor ?setSelection[0]?.newProperties?.anchor.path :setSelection[0]?.newProperties?.focus?.path! : [...newLast], - offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 - }), - - focus: Editor.end(editor, { - path: setSelection ? setSelection[0]?.newProperties?.anchor ?setSelection[0]?.newProperties?.anchor.path :setSelection[0]?.newProperties?.focus?.path! : [...newLast], - - - offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 - }) - }); - + + last = removeMentionUser[0].path[removeMentionUser[0].path.length - 1] - 1, + newLast = [...removeMentionUser[0].path], + newLast[removeMentionUser[0].path.length - 1] = last, + Transforms.select(editor, { + anchor: Editor.end(editor, { + path: setSelection ? setSelection[0]?.newProperties?.anchor ? setSelection[0]?.newProperties?.anchor.path : setSelection[0]?.newProperties?.focus?.path! : [...newLast], + offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 + }), + + focus: Editor.end(editor, { + path: setSelection ? setSelection[0]?.newProperties?.anchor ? setSelection[0]?.newProperties?.anchor.path : setSelection[0]?.newProperties?.focus?.path! : [...newLast], + + + offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 + }) + }); + } if (mentionContact) { setMentionContacts((pre: any) => [ @@ -307,41 +307,41 @@ const RaraEditor = (props: RaraEditorProps) => { } if (removeMentionContact.length > 0) { - + let last let newLast - for(let i=0; i [ ...removeById(pre, removeMentionContact[i].node.id!), - + ]); } - last = removeMentionContact[0].path[removeMentionContact[0].path.length -1] - 1, - newLast = [...removeMentionContact[0].path], - newLast[removeMentionContact[0].path.length - 1] = last, - Transforms.select(editor, { - anchor: Editor.end(editor, { - path: [...newLast], - offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 - - }), - - focus: Editor.end(editor, { - path: [...newLast], - offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 - - }) - }); + last = removeMentionContact[0].path[removeMentionContact[0].path.length - 1] - 1, + newLast = [...removeMentionContact[0].path], + newLast[removeMentionContact[0].path.length - 1] = last, + Transforms.select(editor, { + anchor: Editor.end(editor, { + path: [...newLast], + offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 + + }), + + focus: Editor.end(editor, { + path: [...newLast], + offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 + + }) + }); } } }} editor={editor} value={finalData as Descendant[]} > - {!readOnly && ( + {(!readOnly && !toolbarIgnorList?.includes('all')) && (
- +
)} void; // } -export const Toolbar = () => { +export const Toolbar = ({ ignorList }: { ignorList?: ElementIgnorType[] }) => { const editor = useSlate(); // console.log(editor); return (
- - + {!ignorList?.includes('color') && + <> + + + } + - { }} active={isBlockActive(editor, 'block-quote')} /> - - - - - - - + } + {!ignorList?.includes('heading') && <> + + } + {!ignorList?.includes('alignMarker') && } + {!ignorList?.includes('listMarker') && <> + + } + {!ignorList?.includes('code') && <> { toggleBlock(editor, 'code'); }} /> - - + } + {!ignorList?.includes('check-list-item') && <> { toggleBlock(editor, 'check-list-item'); }} /> - - + } + {ignorList?.includes('link') && <> { } }} /> - + + } {/* */}
- + ); }; diff --git a/src/types/index.ts b/src/types/index.ts index f66043e..12ce36b 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -10,8 +10,8 @@ export type ParagraphElement = { align?: string; color?: string; children: CustomTextElement[]; - id?:string|number - text?:string + id?: string | number + text?: string }; export type CustomTextElement = { text?: string; @@ -21,27 +21,27 @@ export type CustomTextElement = { underline?: boolean; type?: string; children?: any[]; - id?:string|number; - code?:boolean; - color?:string; - highlight?:boolean - editor?:RaraEditorType + id?: string | number; + code?: boolean; + color?: string; + highlight?: boolean + editor?: RaraEditorType }; export type CodeElement = { align?: string; type?: 'code'; children?: CustomTextElement[]; - id?:string|number - text?:string + id?: string | number + text?: string }; export type BlockQuoteElement = { align?: string; type?: 'block-quote' | string; children?: CustomTextElement[]; - id?:string|number - text?:string + id?: string | number + text?: string }; export type CustomElement = | BlockQuoteElement @@ -67,14 +67,27 @@ export type ElementType = | 'link' | 'mention' | undefined; +export type ElementIgnorType = + | 'color' + | 'block-quote' + | 'code' + | 'heading' + | 'alignMarker' + | 'listMarker' + | 'check-list-item' + | 'paragraph' + | 'link' + | 'mention' + | 'all' + | undefined; export type ColoredElement = { align?: string; type: 'color'; color?: string; children: any[]; - id?:string|number - text?:string + id?: string | number + text?: string }; export type ChecklistElement = { @@ -82,26 +95,26 @@ export type ChecklistElement = { type: 'check-list-item'; checked: boolean; children: CustomTextElement[]; - id?:string|number - text?:string + id?: string | number + text?: string }; export type HeadingElement = { align?: string; type?: - | 'heading-one' - | 'heading-two' - | 'heading-three' - | 'heading-four' - | 'heading-five' - | 'heading-six' - | 'bulleted-list' - | 'list-item' - | 'numbered-list' - | 'mentionContact'; + | 'heading-one' + | 'heading-two' + | 'heading-three' + | 'heading-four' + | 'heading-five' + | 'heading-six' + | 'bulleted-list' + | 'list-item' + | 'numbered-list' + | 'mentionContact'; children: CustomTextElement[]; - id?:string|number - text?:string + id?: string | number + text?: string }; @@ -112,7 +125,7 @@ export type MentionElement = { label: string; metaData?: Record; children: CustomTextElement[]; - text?:string + text?: string }; @@ -121,8 +134,8 @@ export type LinkElement = { type: 'link'; url?: string; children: CustomTextElement[]; - id?:string|number - text?:string + id?: string | number + text?: string }; @@ -134,6 +147,7 @@ export type RaraEditorProps = { onCheckboxChange?: (checked: boolean, value: string) => void; onMentionListChange?: (mentionedItems: MentionItemProps[]) => void; // onMentionQuery?: (query: string) => Promise; + toolbarIgnorList?: ElementIgnorType[] onMentionQuery?: MentionItemProps[]; onMentionContactQuery?: MentionItemProps[]; isMentionLoading?: boolean; @@ -152,7 +166,7 @@ export type RaraEditorProps = { styles?: React.CSSProperties; onMentionContact?: (e: number[]) => void; onMentionUser?: (e: string[]) => void; - autoFocus?:boolean + autoFocus?: boolean }; export type MentionItemProps = { @@ -163,10 +177,11 @@ export type MentionItemProps = { declare module 'slate' { interface BaseEditor { - type?:string; - id?:string - text?:string - }} + type?: string; + id?: string + text?: string + } +} @@ -180,11 +195,11 @@ export interface IediterHooks { target: Location | BaseRange | null | undefined; searchResults: MentionItemProps[]; setIndex: (e: number) => void; - insertMention: (editor: RaraEditorType, item: MentionItemProps,target:BaseRange) => void; + insertMention: (editor: RaraEditorType, item: MentionItemProps, target: BaseRange) => void; insertMentionContact: ( editor: RaraEditorType, item: MentionItemProps, - target:BaseRange + target: BaseRange ) => void; setTarget: Dispatch>; setSearchResults: Dispatch>; @@ -194,6 +209,6 @@ export interface IediterHooks { mentionIndicator: string | null; onMentionContact?: (e: number[]) => void; onMentionUser?: (e: string[]) => void; - + } From 854281293d3e1ad06c601f595f7b14d7af05a585 Mon Sep 17 00:00:00 2001 From: kundan1023 Date: Thu, 2 Nov 2023 14:18:32 +0545 Subject: [PATCH 2/3] added new hidden props and toolbar array of options --- src/components/RaraEditor/RaraEditor.tsx | 30 +++++++++++++++++++++--- src/components/RaraEditor/styles.css | 2 +- src/types/index.ts | 1 + 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/components/RaraEditor/RaraEditor.tsx b/src/components/RaraEditor/RaraEditor.tsx index 91a40fa..93f74e2 100644 --- a/src/components/RaraEditor/RaraEditor.tsx +++ b/src/components/RaraEditor/RaraEditor.tsx @@ -75,12 +75,13 @@ const RaraEditor = (props: RaraEditorProps) => { styles, value, autoFocus = false, - toolbarIgnorList + toolbarIgnorList, + hideOnBlur = false } = props; const ref = React.useRef(null); - + const [blur, setBlur] = React.useState(!autoFocus) const [target, setTarget] = React.useState(); const [index, setIndex] = React.useState(0); const [search] = React.useState(''); @@ -100,6 +101,7 @@ const RaraEditor = (props: RaraEditorProps) => { [] ); + const { onDOMBeforeInput, onKeyDown, @@ -149,6 +151,13 @@ const RaraEditor = (props: RaraEditorProps) => { (props: RenderLeafProps) => , [] ); + React.useEffect(() => { + if(!autoFocus && !hideOnBlur){ + + setBlur(false) + } + + },[autoFocus]) React.useEffect(() => { if (target && searchResults.length > 0) { @@ -169,6 +178,7 @@ const RaraEditor = (props: RaraEditorProps) => { style={styles} > { @@ -339,7 +349,7 @@ const RaraEditor = (props: RaraEditorProps) => { editor={editor} value={finalData as Descendant[]} > - {(!readOnly && !toolbarIgnorList?.includes('all')) && ( + {(!readOnly && !toolbarIgnorList?.includes('all') && !blur ) && (
@@ -347,6 +357,20 @@ const RaraEditor = (props: RaraEditorProps) => { { + if(hideOnBlur) { + + setBlur(false) + } + }} + onBlur={() => { + if(hideOnBlur) + { + + setBlur(true) + } + + }} autoFocus={autoFocus} renderElement={(p: RenderElementProps) => { return renderElement(p); diff --git a/src/components/RaraEditor/styles.css b/src/components/RaraEditor/styles.css index fd541eb..6d2a5e4 100644 --- a/src/components/RaraEditor/styles.css +++ b/src/components/RaraEditor/styles.css @@ -8,7 +8,7 @@ padding: 12px; border-radius: 4px; width: auto; - min-height: 60px; + min-height: auto; } .rte-editor.read-only { diff --git a/src/types/index.ts b/src/types/index.ts index 12ce36b..d04c77d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -167,6 +167,7 @@ export type RaraEditorProps = { onMentionContact?: (e: number[]) => void; onMentionUser?: (e: string[]) => void; autoFocus?: boolean + hideOnBlur?:boolean }; export type MentionItemProps = { From 766094b4b34b502139ddbc02592cafdfa6a7b9db Mon Sep 17 00:00:00 2001 From: kundan1023 Date: Thu, 2 Nov 2023 14:21:42 +0545 Subject: [PATCH 3/3] change in versin with issue #41 fix --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 078a5a5..473e20d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.2.8", + "version": "0.2.9", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts",