Fix: for iphoneSE,remove mention and line break

raralabs · Mar 23, 2023 · 961f21f · 961f21f
1 parent 33607ce
commit 961f21f
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 21 deletions.
diff --git 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,35 +268,44 @@ 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) => [
                 ...pre,
                 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
@@ -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
@@ -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
@@ -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
@@ -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<string, string | number>;
   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
   }}