diff --git a/README.md b/README.md index b4cc0dc..132838d 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,8 @@ - [x] Code - [x] Checklist - [x] Copy from html - - [ ] Text Align - - [ ] Mention + - [x] Text Align + - [x] Mention - [ ] Ordered List - [ ] Unordered List - [ ] Nested List diff --git a/src/components/Elements/Leaf.tsx b/src/components/Elements/Leaf.tsx index e69da82..f56ab0b 100644 --- a/src/components/Elements/Leaf.tsx +++ b/src/components/Elements/Leaf.tsx @@ -1,30 +1,16 @@ import * as React from 'react'; -// import { CustomTextElement } from '../../types'; -// import { ElementProps } from './Element'; +import { RenderLeafProps } from 'slate-react'; +import { RaraEditorType } from '../../types'; + +interface LeafProps extends RenderLeafProps { + editor:RaraEditorType +} + +const Leaf = ({ attributes, children, leaf }:LeafProps) => { -// declare module 'slate-react' { -// interface ColumnMeta { -// column?: ColumnDef; -// isNumeric?: boolean; -// width?: number | string; -// Footer?: { -// colspan?: number; -// display?: 'none'; -// }; -// } -// } -// interface LeafProps { -// attributes?: ElementProps -// children?: React.ReactNode; -// leaf?:CustomTextElement -// element?:any -// text?:CustomTextElement -// }//need to extend the leaf props to RenderLeafProps -////need to fix leafProps to any -const Leaf = ({ attributes, children, leaf }:any) => { if (leaf?.bold) { - children = {children}; + children = {children}; } if (leaf?.code) { children = {children}; @@ -48,7 +34,7 @@ const Leaf = ({ attributes, children, leaf }:any) => { {children} ); - } +} // if (leaf.placeholder) { // return ( // <> diff --git a/src/components/RaraEditor/RaraEditor.tsx b/src/components/RaraEditor/RaraEditor.tsx index f26e3f6..e1821e4 100644 --- a/src/components/RaraEditor/RaraEditor.tsx +++ b/src/components/RaraEditor/RaraEditor.tsx @@ -146,7 +146,7 @@ const RaraEditor = (props: RaraEditorProps) => { ] ); const renderLeaf = React.useCallback( - (props: RenderLeafProps) => , + (props: RenderLeafProps) => , [] ); @@ -243,7 +243,6 @@ const RaraEditor = (props: RaraEditorProps) => { } else { onChange && onChange(JSON.stringify(change)); } - //managing mention data const edtr = editor.operations; @@ -255,7 +254,7 @@ const RaraEditor = (props: RaraEditorProps) => { const removeMentionUser = edtr.filter( (e: BaseOperation): e is RemoveNodeOperation => - e.type === 'remove_node' && (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 => @@ -263,7 +262,7 @@ const RaraEditor = (props: RaraEditorProps) => { ); const removeMentionContact = edtr.filter( (e: BaseOperation): e is RemoveNodeOperation => - e.type === 'remove_node' && (e?.node?.type === 'mentionContact' || e?.node?.text === "") + e.type === 'remove_node' && (e?.node?.type === 'mentionContact' || (e?.node?.type === 'mentionContact' && e?.node?.text === "")) ); if (mentionUser) { setMentionUsers((pre: any) => [...pre, mentionUser?.node?.id]); diff --git a/src/types/index.ts b/src/types/index.ts index 838418d..f66043e 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -21,7 +21,11 @@ export type CustomTextElement = { underline?: boolean; type?: string; children?: any[]; - id?:string|number + id?:string|number; + code?:boolean; + color?:string; + highlight?:boolean + editor?:RaraEditorType }; export type CodeElement = {