From 961f21fa022a975d8fb194dd5aadc1f09c9a5d0f Mon Sep 17 00:00:00 2001 From: kundan1023 Date: Fri, 24 Mar 2023 00:30:24 +0545 Subject: [PATCH] Fix: for iphoneSE,remove mention and line break --- src/components/RaraEditor/RaraEditor.tsx | 49 +++++++++++++-------- src/components/Toolbar/TextAlignMarkers.tsx | 2 +- src/components/Toolbar/styles.css | 2 +- src/lib/functions.tsx | 2 + src/types/index.ts | 11 +++++ 5 files changed, 45 insertions(+), 21 deletions(-) diff --git a/src/components/RaraEditor/RaraEditor.tsx b/src/components/RaraEditor/RaraEditor.tsx index 202af88..0470ba7 100644 --- a/src/components/RaraEditor/RaraEditor.tsx +++ b/src/components/RaraEditor/RaraEditor.tsx @@ -17,6 +17,7 @@ import { Editor, Range, RemoveNodeOperation, + SelectionOperation, Transforms, } from 'slate'; @@ -246,7 +247,6 @@ const RaraEditor = (props: RaraEditorProps) => { //managing mention data const edtr = editor.operations; - console.log({edtr}); const mentionUser = edtr.find( (e: BaseOperation): e is BaseInsertNodeOperation => @@ -255,7 +255,7 @@ const RaraEditor = (props: RaraEditorProps) => { const removeMentionUser = edtr.find( (e: BaseOperation): e is RemoveNodeOperation => - e.type === 'remove_node' && e?.node?.type === 'mention', + e.type === 'remove_node' && (e?.node?.type === 'mention' || e?.node?.text === ""), ); const mentionContact = edtr.find( (e: BaseOperation): e is BaseInsertNodeOperation => @@ -268,27 +268,34 @@ const RaraEditor = (props: RaraEditorProps) => { if (mentionUser) { setMentionUsers((pre: any) => [...pre, mentionUser?.node?.id]); } + if (removeMentionUser) { - // console.log({removeMentionUser}); + // console.log({editor,edtr}); let last let newLast + const setSelection = edtr.filter((e:BaseOperation):e is SelectionOperation => e.type === 'set_selection') + console.log({setSelection}); + + setMentionUsers((pre: string[] | number[]) => [ ...removeById(pre, removeMentionUser?.node?.id!), - last = removeMentionUser.path[removeMentionUser.path.length -1] - 1, - newLast = [...removeMentionUser.path], - newLast[removeMentionUser.path.length - 1] = last, - Transforms.select(editor, { - anchor: Editor.end(editor, { - path: [...newLast], - offset: 0 - }), - - focus: Editor.end(editor, { - path: [...newLast], - offset: 0 - }) - }), ]); + last = removeMentionUser.path[removeMentionUser.path.length -1] - 1 , + newLast = [...removeMentionUser.path], + newLast[removeMentionUser.path.length - 1] = last, + Transforms.select(editor, { + anchor: Editor.end(editor, { + path: setSelection ? setSelection[0]?.newProperties?.anchor?.path! : [...newLast], + offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 + }), + + focus: Editor.end(editor, { + path: setSelection ? setSelection[0]?.newProperties?.anchor?.path! : [...newLast], + + offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 + }) + }); + } if (mentionContact) { setMentionContacts((pre: any) => [ @@ -296,7 +303,9 @@ const RaraEditor = (props: RaraEditorProps) => { mentionContact?.node?.id, ]); } + if (removeMentionContact) { + let last let newLast setMentionContacts((pre: string[] | number[]) => [ @@ -307,12 +316,14 @@ const RaraEditor = (props: RaraEditorProps) => { Transforms.select(editor, { anchor: Editor.end(editor, { path: [...newLast], - offset: 0 + offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 + }), focus: Editor.end(editor, { path: [...newLast], - offset: 0 + offset: edtr[0].type === "remove_text" ? edtr[0].offset : 0 + }) }), ]); diff --git a/src/components/Toolbar/TextAlignMarkers.tsx b/src/components/Toolbar/TextAlignMarkers.tsx index ef7d334..ddd8040 100644 --- a/src/components/Toolbar/TextAlignMarkers.tsx +++ b/src/components/Toolbar/TextAlignMarkers.tsx @@ -50,7 +50,7 @@ export const TextAlignMarkers = ({}: TextAlignMarkerProps) => { onMouseDown={e => { e.preventDefault(); }} - icon={Icons.ALIGNMENT} + icon={Icons.ALIGN_LEFT} active={isActive || state?.alignSelector} name="Heading" /> diff --git a/src/components/Toolbar/styles.css b/src/components/Toolbar/styles.css index dd9b5b3..b68e3d6 100644 --- a/src/components/Toolbar/styles.css +++ b/src/components/Toolbar/styles.css @@ -93,7 +93,7 @@ flex-direction: row; justify-content: space-between; } -@media (max-Width: 375px) { +@media (max-Width: 377px) { .list-picker-content{ left:-10px diff --git a/src/lib/functions.tsx b/src/lib/functions.tsx index ed50296..d6af9d0 100644 --- a/src/lib/functions.tsx +++ b/src/lib/functions.tsx @@ -32,6 +32,8 @@ export const insertMention = async( children: [{ text: '' }], }; // setTimeout(() => { + console.log({editor}); + Transforms.insertText(editor," ") Transforms.insertNodes(editor, mention); Transforms.move(editor); diff --git a/src/types/index.ts b/src/types/index.ts index 8743b07..838418d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -11,6 +11,7 @@ export type ParagraphElement = { color?: string; children: CustomTextElement[]; id?:string|number + text?:string }; export type CustomTextElement = { text?: string; @@ -28,12 +29,15 @@ export type CodeElement = { type?: 'code'; children?: CustomTextElement[]; id?:string|number + text?:string + }; export type BlockQuoteElement = { align?: string; type?: 'block-quote' | string; children?: CustomTextElement[]; id?:string|number + text?:string }; export type CustomElement = | BlockQuoteElement @@ -66,6 +70,7 @@ export type ColoredElement = { color?: string; children: any[]; id?:string|number + text?:string }; export type ChecklistElement = { @@ -74,6 +79,7 @@ export type ChecklistElement = { checked: boolean; children: CustomTextElement[]; id?:string|number + text?:string }; export type HeadingElement = { @@ -91,6 +97,7 @@ export type HeadingElement = { | 'mentionContact'; children: CustomTextElement[]; id?:string|number + text?:string }; @@ -101,6 +108,8 @@ export type MentionElement = { label: string; metaData?: Record; children: CustomTextElement[]; + text?:string + }; export type LinkElement = { @@ -109,6 +118,7 @@ export type LinkElement = { url?: string; children: CustomTextElement[]; id?:string|number + text?:string }; @@ -151,6 +161,7 @@ declare module 'slate' { interface BaseEditor { type?:string; id?:string + text?:string }}