[ FEATURE ] New Issue Widget for displaying issues inside document-editor (#2920)

* feat: added heading 3 in the editor summary markings

* feat: fixed editor and summary bar sizing

* feat: added `issue-embed` extension

* feat: exposed issue embed extension

* feat: added main embed config configuration to document editor body

* feat: added peek overview and issue embed fetch function

* feat: enabled slash commands to take additonal suggestions from editors

* chore: replaced `IssueEmbedWidget` into widget extension

* chore: removed issue embed from previous places

* feat: added issue embed suggestion extension

* feat: added issue embed suggestion renderer

* feat: added issue embed suggestions into extensions module

* feat: added issues in issueEmbedConfiguration in document editor

* chore: package fixes

* chore: removed log statements

* feat: added title updation logic into document editor

* fix: issue suggestion items, not rendering issue widget on enter

* feat: added error card for issue widget

* feat: improved focus logic for issue search and navigate

* feat: appended transactionid for issueWidgetTransaction

* chore: packages update

* feat: disabled editing of title in readonly mode

* feat: added issueEmbedConfig in readonly editor

* fix: issue suggestions not loading after structure changed to object

* feat: added toast messages for success/error messages from doc editor

* fix: issue suggestions sorting issue

* fix: formatting errors resolved

* fix: infinite reloading of the readonly document editor

* fix: css in avatar of issue widget card

* feat: added show alert on pages reload

* feat: added saving state for the pages editor

* fix: issue with heading 3 in side bar view

* style: updated issue suggestions dropdown ui

* fix: Pages intiliazation and mutation with updated MobX store

* fixed image uploads being cancelled on refocus due to swr

* fix: issue with same description rerendering empty content fixed

* fix: scroll in issue suggestion view

* fix: added submission prop

* fix: Updated the comment update to take issue id in inbox issues

* feat:changed date representation in IssueEmbedCard

* fix: page details mutation with optimistic updates using swr

* fix: menu options in read only editor with auth fixed

* fix: add error handling for title and page desc

* fixed yarn.lock

* fix: read-only editor title wrapping

* fix: build error with rich text editor

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>

packages/editor/core/src/ui/hooks/use-editor.tsx

@@ -14,7 +14,10 @@ import {
 interface CustomEditorProps {
   uploadFile: UploadImage;
   restoreFile: RestoreImage;
-  text_html?: string;
+  rerenderOnPropsChange?: {
+    id: string;
+    description_html: string;
+  };
   deleteFile: DeleteImage;
   cancelUploadImage?: () => any;
   setIsSubmitting?: (
@@ -38,7 +41,7 @@ export const useEditor = ({
   cancelUploadImage,
   editorProps = {},
   value,
-  text_html,
+  rerenderOnPropsChange,
   extensions = [],
   onStart,
   onChange,
@@ -79,7 +82,7 @@ export const useEditor = ({
         onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
       },
     },
-    [text_html],
+    [rerenderOnPropsChange],
   );
 
   const editorRef: MutableRefObject<Editor | null> = useRef(null);

packages/editor/core/src/ui/hooks/use-read-only-editor.tsx

@@ -1,10 +1,5 @@
 import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import {
-  useImperativeHandle,
-  useRef,
-  MutableRefObject,
-  useEffect,
-} from "react";
+import { useImperativeHandle, useRef, MutableRefObject } from "react";
 import { CoreReadOnlyEditorExtensions } from "../read-only/extensions";
 import { CoreReadOnlyEditorProps } from "../read-only/props";
 import { EditorProps } from "@tiptap/pm/view";
@@ -15,6 +10,10 @@ interface CustomReadOnlyEditorProps {
   forwardedRef?: any;
   extensions?: any;
   editorProps?: EditorProps;
+  rerenderOnPropsChange?: {
+    id: string;
+    description_html: string;
+  };
   mentionHighlights?: string[];
   mentionSuggestions?: IMentionSuggestion[];
 }
@@ -24,33 +23,29 @@ export const useReadOnlyEditor = ({
   forwardedRef,
   extensions = [],
   editorProps = {},
+  rerenderOnPropsChange,
   mentionHighlights,
   mentionSuggestions,
 }: CustomReadOnlyEditorProps) => {
-  const editor = useCustomEditor({
-    editable: false,
-    content:
-      typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
-    editorProps: {
-      ...CoreReadOnlyEditorProps,
-      ...editorProps,
+  const editor = useCustomEditor(
+    {
+      editable: false,
+      content:
+        typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+      editorProps: {
+        ...CoreReadOnlyEditorProps,
+        ...editorProps,
+      },
+      extensions: [
+        ...CoreReadOnlyEditorExtensions({
+          mentionSuggestions: mentionSuggestions ?? [],
+          mentionHighlights: mentionHighlights ?? [],
+        }),
+        ...extensions,
+      ],
     },
-    extensions: [
-      ...CoreReadOnlyEditorExtensions({
-        mentionSuggestions: mentionSuggestions ?? [],
-        mentionHighlights: mentionHighlights ?? [],
-      }),
-      ...extensions,
-    ],
-  });
-
-  const hasIntiliazedContent = useRef(false);
-  useEffect(() => {
-    if (editor && !value && !hasIntiliazedContent.current) {
-      editor.commands.setContent(value);
-      hasIntiliazedContent.current = true;
-    }
-  }, [value]);
+    [rerenderOnPropsChange],
+  );
 
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   editorRef.current = editor;