fix(editor): RTE related issues (#5116)

erxes · Apr 4, 2024 · 7b580b8 · 7b580b8
1 parent 6a5fb83
commit 7b580b8
Show file tree

Hide file tree

Showing 28 changed files with 348 additions and 542 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,41 +2,35 @@
 
 ## [1.7.5](https://github.com/erxes/erxes/compare/1.7.4...1.7.5) (2024-04-02)
 
-
 ### Bug Fixes
 
-* **xbuilder:** Entries list scroll not working ([#5084](https://github.com/erxes/erxes/issues/5084)) ([c4bc165](https://github.com/erxes/erxes/commit/c4bc165bc2c4f8a3e4a48a93577b85fc36b12e63))
+- **xbuilder:** Entries list scroll not working ([#5084](https://github.com/erxes/erxes/issues/5084)) ([c4bc165](https://github.com/erxes/erxes/commit/c4bc165bc2c4f8a3e4a48a93577b85fc36b12e63))
 
 ## [1.7.4](https://github.com/erxes/erxes/compare/1.7.3...1.7.4) (2024-04-01)
 
-
 ### Bug Fixes
 
-* segment count rabbitmq message ([ebf63a2](https://github.com/erxes/erxes/commit/ebf63a27c6c2c494598c119eff3f2dbfd27ef312))
+- segment count rabbitmq message ([ebf63a2](https://github.com/erxes/erxes/commit/ebf63a27c6c2c494598c119eff3f2dbfd27ef312))
 
 ## [1.7.3](https://github.com/erxes/erxes/compare/1.7.2...1.7.3) (2024-03-27)
 
-
 ### Bug Fixes
 
-* **segment:** fix segment db connection string ([9519038](https://github.com/erxes/erxes/commit/9519038f3a9e69e6788ef68cb2d3dc97ba59cf19))
-
+- **segment:** fix segment db connection string ([9519038](https://github.com/erxes/erxes/commit/9519038f3a9e69e6788ef68cb2d3dc97ba59cf19))
 
-### Reverts
+### Bug Fixes
 
-* revert erxes request headers erxes-user to user ([cf0684b](https://github.com/erxes/erxes/commit/cf0684be5d2e7e8bceccd7bb47a4e79b7087a5f0))
+- revert erxes request headers erxes-user to user ([cf0684b](https://github.com/erxes/erxes/commit/cf0684be5d2e7e8bceccd7bb47a4e79b7087a5f0))
 
 ## [1.7.2](https://github.com/erxes/erxes/compare/1.7.1...1.7.2) (2024-03-27)
 
-
 ### Bug Fixes
 
-* customer render full name ([dc3aa68](https://github.com/erxes/erxes/commit/dc3aa68823e9abe6e9852451c66190ded2ca371e))
-
+- customer render full name ([dc3aa68](https://github.com/erxes/erxes/commit/dc3aa68823e9abe6e9852451c66190ded2ca371e))
 
 ### Performance Improvements
 
-* **calls:** increase session timers, fix call timer and add integration config   ([ea49253](https://github.com/erxes/erxes/commit/ea49253ba53f08c03a86ac1cb3ad11b046d0a2d0))
+- **calls:** increase session timers, fix call timer and add integration config ([ea49253](https://github.com/erxes/erxes/commit/ea49253ba53f08c03a86ac1cb3ad11b046d0a2d0))
 
 ## [1.7.1](https://github.com/erxes/erxes/compare/1.7.0...1.7.1) (2024-03-26)
 

diff --git a/packages/api-utils/src/elasticsearch.ts b/packages/api-utils/src/elasticsearch.ts
@@ -32,7 +32,7 @@ export const doSearch = async ({
 }) => {
   const highlightFields = {};
 
-  fields.forEach(field => {
+  fields.forEach((field) => {
     highlightFields[field] = {};
   });
 
@@ -67,7 +67,7 @@ export const doSearch = async ({
     defaultValue: { hits: { hits: [] } },
   });
 
-  const results = fetchResults.hits.hits.map(result => {
+  const results = fetchResults.hits.hits.map((result) => {
     return {
       source: {
         _id: getRealIdFromElk(result._id),
@@ -246,8 +246,8 @@ export const fetchByQueryWithScroll = async ({
   const scrollId = response._scroll_id;
 
   let ids = response.hits.hits
-    .map(hit => (_source === '_id' ? hit._id : hit._source[_source]))
-    .filter(r => r);
+    .map((hit) => (_source === '_id' ? hit._id : hit._source[_source]))
+    .filter((r) => r);
 
   if (totalCount < 10000) {
     return ids;
@@ -260,7 +260,7 @@ export const fetchByQueryWithScroll = async ({
       break;
     }
 
-    ids = ids.concat(scrollResponse.hits.hits.map(hit => hit._id));
+    ids = ids.concat(scrollResponse.hits.hits.map((hit) => hit._id));
   }
 
   return ids;
@@ -296,8 +296,8 @@ export const fetchByQuery = async ({
   });
 
   return response.hits.hits
-    .map(hit => (_source === '_id' ? hit._id : hit._source[_source]))
-    .filter(r => r);
+    .map((hit) => (_source === '_id' ? hit._id : hit._source[_source]))
+    .filter((r) => r);
 };
 
 export const getRealIdFromElk = (_id: string) => {
@@ -313,7 +313,7 @@ export const generateElkIds = async (ids: string[], subdomain: string) => {
     if (ids && ids.length) {
       const organizationId = await getOrganizationIdBySubdomain(subdomain);
 
-      return ids.map(_id => `${organizationId}__${_id}`);
+      return ids.map((_id) => `${organizationId}__${_id}`);
     }
     return [];
   }

diff --git a/packages/erxes-ui/package.json b/packages/erxes-ui/package.json
@@ -7,9 +7,25 @@
     "@nateradebaugh/react-datetime": "4.0.0-rc.10",
     "@types/styled-components": "^3.0.0",
     "ckeditor4-react": "^1.0.0",
-    "@tiptap/starter-kit": "^2.2.4",
-    "@tiptap/pm": "^2.2.4",
-    "@tiptap/react": "^2.2.4",
+    "@tiptap/core": "^2.2.4",
+    "@tiptap/extension-blockquote": "^2.2.4",
+    "@tiptap/extension-bold": "^2.2.4",
+    "@tiptap/extension-bullet-list": "^2.2.4",
+    "@tiptap/extension-code": "^2.2.4",
+    "@tiptap/extension-code-block": "^2.2.4",
+    "@tiptap/extension-document": "^2.2.4",
+    "@tiptap/extension-dropcursor": "^2.2.4",
+    "@tiptap/extension-gapcursor": "^2.2.4",
+    "@tiptap/extension-hard-break": "^2.2.4",
+    "@tiptap/extension-heading": "^2.2.4",
+    "@tiptap/extension-history": "^2.2.4",
+    "@tiptap/extension-horizontal-rule": "^2.2.4",
+    "@tiptap/extension-italic": "^2.2.4",
+    "@tiptap/extension-list-item": "^2.2.4",
+    "@tiptap/extension-ordered-list": "^2.2.4",
+    "@tiptap/extension-paragraph": "^2.2.4",
+    "@tiptap/extension-strike": "^2.2.4",
+    "@tiptap/extension-text": "^2.2.4",
     "@tiptap/extension-text-style": "^2.2.4",
     "@tiptap/extension-font-family": "^2.2.4",
     "@tiptap/extension-text-align": "^2.2.4",
@@ -29,6 +45,8 @@
     "@tiptap/extension-character-count": "^2.2.4",
     "@tiptap/extension-bubble-menu": "^2.2.4",
     "@tiptap/suggestion": "^2.2.4",
+    "@tiptap/pm": "^2.2.4",
+    "@tiptap/react": "^2.2.4",
     "@tiptap/html": "^2.2.4",
     "@codemirror/lang-html": "^6.4.6",
     "@uiw/react-codemirror": "^4.21.20",

diff --git a/...es/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx b/...es/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
-import { EditorContent } from '@tiptap/react';
+import React, { useCallback } from 'react';
+import { EditorContent, BubbleMenu, isTextSelection } from '@tiptap/react';
 import CodeMirror from '@uiw/react-codemirror';
 import { html } from '@codemirror/lang-html';
 import { useRichTextEditorContext } from '../RichTextEditor.context';
 import { ProseMirrorWrapper } from '../styles';
+import TableMenuControls from '../RichTextEditorControl/TableMenuControls';
+import { BubbleMenuShowProps } from '../RichTextEditorControl/TableControl';
+
 export interface IRichTextEditorContentProps {
   /** The height of the editing area that includes the editor content. */
   height?: number | string;
@@ -14,7 +17,6 @@ export interface IRichTextEditorContentProps {
   /** The The minimum height that the editor can assume when adjusting to content by using the Auto Grow feature. */
   autoGrowMinHeight?: number | string;
 }
-
 export const RichTextEditorContent = (props: IRichTextEditorContentProps) => {
   const { editor, isSourceEnabled, codeMirrorRef } = useRichTextEditorContext();
   const {
@@ -23,13 +25,11 @@ export const RichTextEditorContent = (props: IRichTextEditorContentProps) => {
     autoGrowMaxHeight = 0,
     autoGrow = false,
   } = props;
-
   const editorStyle = {
     ...(autoGrow && { minHeight: autoGrowMinHeight }),
     ...(autoGrow && { maxHeight: autoGrowMaxHeight }),
     ...(!autoGrow && { height }),
   };
-
   function convertToPx(value: string | number) {
     // Check if the value is a number
     if (typeof value === 'number') {
@@ -39,10 +39,32 @@ export const RichTextEditorContent = (props: IRichTextEditorContentProps) => {
     return value;
   }
 
+  const shouldShow = useCallback(
+    ({ editor, view, state, from, to }: BubbleMenuShowProps) => {
+      if (
+        state.selection.$anchor.node(1) &&
+        state.selection.$anchor.node(1).type.name === 'table'
+      ) {
+        return true;
+      }
+      // Sometime check for `empty` is not enough
+      const isEmptyTextBlock =
+        !state.doc.textBetween(from, to).length &&
+        isTextSelection(state.selection);
+
+      if (!view.hasFocus() || state.selection.empty || isEmptyTextBlock) {
+        return false;
+      }
+      return false;
+    },
+    [editor]
+  );
+
   return (
     <ProseMirrorWrapper
       data-promise-mirror-editor={true}
       $height={autoGrow ? undefined : convertToPx(height)}
+      $autoGrow={autoGrow}
       $minHeight={convertToPx(autoGrow ? autoGrowMinHeight : height)}
       $maxHeight={convertToPx(autoGrow ? autoGrowMaxHeight : height)}
     >
@@ -63,6 +85,17 @@ export const RichTextEditorContent = (props: IRichTextEditorContentProps) => {
         editor={editor}
         style={editorStyle}
       />
+
+      {editor && (
+        <BubbleMenu
+          editor={editor}
+          pluginKey="tableMenu"
+          updateDelay={0}
+          shouldShow={shouldShow}
+        >
+          <TableMenuControls />
+        </BubbleMenu>
+      )}
     </ProseMirrorWrapper>
   );
 };
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/MoreButtonControl.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/MoreButtonControl.tsx
@@ -38,7 +38,7 @@ export const MoreButtonControl = (props: IRichTextEditorMoreControlProps) => {
 
   return (
     <OverlayTrigger
-      rootClose={true}
+      rootClose={false}
       ref={(overlayTrigger) => {
         overLayRef = overlayTrigger;
       }}

diff --git a/...xes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorColorControl.tsx b/...xes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorColorControl.tsx
@@ -41,9 +41,11 @@ export const RichTextEditorColorControl = () => {
       ? getAttributesForEachSelected(editor?.state, 'textStyle')
       : [];
 
-    const currentSelectionTextColors: string[] = allSelectionTextStyleAttrs.map(
-      (attrs) => attrs.color,
-    );
+    const currentSelectionTextColors: string[] = allSelectionTextStyleAttrs
+      .map((attrs) => {
+        if (attrs?.color) return attrs.color;
+      })
+      .filter((color) => typeof color === 'string');
 
     const numUniqueSelectionTextColors = new Set(currentSelectionTextColors)
       .size;
@@ -87,9 +89,11 @@ export const RichTextEditorColorControl = () => {
     ? getAttributesForEachSelected(editor?.state, 'textStyle')
     : [];
 
-  const currentTextColors: string[] = allCurrentTextStyleAttrs.map(
-    (attrs) => attrs.color,
-  );
+  const currentTextColors: string[] = allCurrentTextStyleAttrs
+    .map((attrs) => {
+      if (attrs?.color) return attrs.color;
+    })
+    .filter((color) => typeof color === 'string');
 
   const numUniqueCurrentTextColors = new Set(currentTextColors).size;
 

diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/TableControl.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/TableControl.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { BubbleMenu, isTextSelection } from '@tiptap/react';
 import { Editor } from '@tiptap/core';
 import { EditorView } from '@tiptap/pm/view';
 import { EditorState } from '@tiptap/pm/state';
@@ -9,24 +8,20 @@ import {
   RichTextEditorControlBase,
 } from './RichTextEditorControl';
 import Icon from '../../Icon';
-import TableMenuControls from './TableMenuControls';
 
-type BubbleMenuShowProps = {
+export type BubbleMenuShowProps = {
   editor: Editor;
   view: EditorView;
   state: EditorState;
   oldState?: EditorState;
   from: number;
   to: number;
 };
-
 const TableIcon: IRichTextEditorControlBaseProps['icon'] = () => (
   <Icon icon="table" />
 );
-
 export function TableControl() {
   const { editor, labels } = useRichTextEditorContext();
-
   const handleTableRequest = () => {
     editor
       ?.chain()
@@ -35,46 +30,13 @@ export function TableControl() {
       .run();
   };
 
-  const shouldShow = () => {
-    return ({ view, state, from, to }: BubbleMenuShowProps) => {
-      // If selection is in table, show bubble menu
-      if (
-        state.selection.$anchor.node(1) &&
-        state.selection.$anchor.node(1).type.name === 'table'
-      ) {
-        return true;
-      }
-      // Sometime check for `empty` is not enough
-      const isEmptyTextBlock =
-        !state.doc.textBetween(from, to).length &&
-        isTextSelection(state.selection);
-
-      if (!view.hasFocus() || state.selection.empty || isEmptyTextBlock) {
-        return false;
-      }
-      return false;
-    };
-  };
-
   return (
-    <>
-      {editor && (
-        <BubbleMenu
-          pluginKey="tableToolbar"
-          shouldShow={shouldShow()}
-          editor={editor}
-          tippyOptions={{ duration: 100 }}
-        >
-          <TableMenuControls />
-        </BubbleMenu>
-      )}
-      <RichTextEditorControlBase
-        icon={TableIcon}
-        aria-label={labels.tableControlLabel}
-        title={labels.tableControlLabel}
-        onClick={handleTableRequest}
-        disabled={!editor?.isEditable || !editor.can().insertTable()}
-      />
-    </>
+    <RichTextEditorControlBase
+      icon={TableIcon}
+      aria-label={labels.tableControlLabel}
+      title={labels.tableControlLabel}
+      onClick={handleTableRequest}
+      disabled={!editor?.isEditable || !editor.can().insertTable()}
+    />
   );
 }
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts
@@ -393,7 +393,7 @@ const RichTextEditorMenuPopoverWrapper = styled.div`
   }
   .popover {
     box-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15);
-    z-index: 100;
+    z-index: 999;
   }
 `;