refactor: document editor props

makeplane · sriramveeraghanta · Apr 11, 2024 · Feb 13, 2024 · Feb 21, 2024 · Feb 21, 2024
commit 9f4d88fd12486738bd9cd6a7003b4e7df391c0e6
diff --git a/packages/editor/core-document-editor/src/hooks/use-editor.tsx b/packages/editor/core-document-editor/src/hooks/use-editor.tsx
@@ -25,8 +25,10 @@ interface CustomEditorProps {
   extensions?: any;
   editorProps?: EditorProps;
   forwardedRef?: MutableRefObject<EditorRefApi | null>;
-  mentionHighlights: () => Promise<IMentionHighlight[]>;
-  mentionSuggestions: () => Promise<IMentionSuggestion[]>;
+  mentionHandler: {
+    highlights: () => Promise<IMentionHighlight[]>;
+    suggestions: () => Promise<IMentionSuggestion[]>;
+  };
   handleEditorReady?: (value: boolean) => void;
 }
 
@@ -42,8 +44,7 @@ export const useEditor = ({
   forwardedRef,
   restoreFile,
   handleEditorReady,
-  mentionHighlights,
-  mentionSuggestions,
+  mentionHandler,
 }: CustomEditorProps) => {
   const editor = useCustomEditor({
     editorProps: {
@@ -53,8 +54,8 @@ export const useEditor = ({
     extensions: [
       ...CoreEditorExtensions(
         {
-          mentionSuggestions: mentionSuggestions ?? [],
-          mentionHighlights: mentionHighlights ?? [],
+          mentionSuggestions: mentionHandler.suggestions ?? [],
+          mentionHighlights: mentionHandler.highlights ?? [],
         },
         deleteFile,
         restoreFile,

diff --git a/packages/editor/core-document-editor/src/hooks/use-read-only-editor.tsx b/packages/editor/core-document-editor/src/hooks/use-read-only-editor.tsx
@@ -13,7 +13,9 @@ interface CustomReadOnlyEditorProps {
   extensions?: any;
   editorProps?: EditorProps;
   handleEditorReady?: (value: boolean) => void;
-  mentionHighlights?: () => Promise<IMentionHighlight[]>;
+  mentionHandler: {
+    highlights: () => Promise<IMentionHighlight[]>;
+  };
 }
 
 export const useReadOnlyEditor = ({
@@ -22,7 +24,7 @@ export const useReadOnlyEditor = ({
   extensions = [],
   editorProps = {},
   handleEditorReady,
-  mentionHighlights,
+  mentionHandler,
 }: CustomReadOnlyEditorProps) => {
   const editor = useCustomEditor({
     editable: false,
@@ -38,7 +40,7 @@ export const useReadOnlyEditor = ({
     },
     extensions: [
       ...CoreReadOnlyEditorExtensions({
-        mentionHighlights: mentionHighlights,
+        mentionHighlights: mentionHandler.highlights,
       }),
       ...extensions,
     ],

diff --git a/packages/editor/core-document-editor/src/styles/editor.css b/packages/editor/core-document-editor/src/styles/editor.css
@@ -1,4 +1,4 @@
 .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: rgb(var(--color-text-400));
@@ -35,16 +35,16 @@
 /* Custom image styles */
 .ProseMirror img {
   transition: filter 0.1s ease-in-out;
-  margin-top: 4px;
-  margin-bottom: 4px;
+  margin-top: 8px;
+  margin-bottom: 0;
 
   &:hover {
     cursor: pointer;
     filter: brightness(90%);
   }
 
   &.ProseMirror-selectednode {
-    outline: 3px solid #5abbf7;
+    outline: 3px solid rgba(var(--color-primary-100));
     filter: brightness(90%);
   }
 }
@@ -158,7 +158,7 @@
  tab-size: 4;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  outline: none;
  cursor: text;
@@ -215,7 +215,7 @@
  cursor: col-resize;
 }

 .ProseMirror table * .is-empty::before {
  opacity: 0;
 }

@@ -224,7 +224,7 @@
  tab-size: 2;
 }

 .ProseMirror pre code {
  background: none;
  color: inherit;
  font-size: 0.8rem;
@@ -283,6 +283,7 @@
   ul:not([data-type="taskList"]):where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
 .prose ul[data-type="taskList"]:where(.prose > :first-child) {
   margin-top: 0.25rem !important;
+  margin-bottom: 1px !important;
 }
 
 .prose ol:not(:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))),
@@ -292,6 +293,7 @@
   ),
 .prose ul[data-type="taskList"]:not(:where(.prose > :first-child)) {
   margin-top: calc(0.25rem + 3px) !important;
+  margin-bottom: 1px !important;
 }
 
 ol ol,

diff --git a/packages/editor/core-document-editor/src/styles/table.css b/packages/editor/core-document-editor/src/styles/table.css
@@ -39,13 +39,13 @@

 .table-wrapper table td.has-focus,
 .table-wrapper table th.has-focus {
  box-shadow: rgba(var(--color-primary-300), 0.1) 0px 0px 0px 2px inset !important;
 }

 .table-wrapper table th {
   font-weight: 500;
   text-align: left;
-  background-color: rgba(var(--color-background-80));
+  background-color: rgba(var(--color-background-90));
 }
 
 .table-wrapper table .selectedCell {
@@ -119,7 +119,7 @@
 }

 .resize-cursor .table-wrapper .table-controls .rows-control,
 .table-wrapper.controls--disabled .table-controls .rows-control,
 .resize-cursor .table-wrapper .table-controls .columns-control,
 .table-wrapper.controls--disabled .table-controls .columns-control {
  opacity: 0;

diff --git a/packages/editor/core-document-editor/src/ui/extensions/code/code-block-node-view.tsx b/packages/editor/core-document-editor/src/ui/extensions/code/code-block-node-view.tsx
@@ -48,7 +48,7 @@ export const CodeBlockComponent: React.FC<CodeBlockComponentProps> = ({ node })
         )}
       </button>
 
-      <pre className="bg-custom-background-80 text-custom-text-100 rounded-lg p-8 pl-9 pr-4">
+      <pre className="bg-custom-background-90 text-custom-text-100 rounded-lg p-8 pl-9 pr-4">
         <NodeViewContent as="code" />
       </pre>
     </NodeViewWrapper>

diff --git a/packages/editor/core-document-editor/src/ui/extensions/image/image-resize.tsx b/packages/editor/core-document-editor/src/ui/extensions/image/image-resize.tsx
@@ -66,7 +66,7 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
           updateMediaSize();
         }}
         scalable
-        renderDirections={["w", "e"]}
+        renderDirections={["se"]}
         onScale={({ target, transform }) => {
           target.style.transform = transform;
         }}

diff --git a/packages/editor/core-document-editor/src/ui/read-only/extensions.tsx b/packages/editor/core-document-editor/src/ui/read-only/extensions.tsx
@@ -85,7 +85,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
   }),
   CustomCodeBlockExtension.configure({
     HTMLAttributes: {
-      class: "bg-custom-background-80 text-custom-text-100 rounded-lg p-8 pl-9 pr-4",
+      class: "bg-custom-background-90 text-custom-text-100 rounded-lg p-8 pl-9 pr-4",
     },
   }),
   CustomCodeInlineExtension,

diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css
@@ -17,7 +17,7 @@
 .ProseMirror blockquote p::after {
  display: none;
 }
 /* end block quotes */

 .ProseMirror code::before,
 .ProseMirror code::after {
@@ -35,16 +35,16 @@
 /* Custom image styles */
 .ProseMirror img {
   transition: filter 0.1s ease-in-out;
-  margin-top: 4px;
-  margin-bottom: 4px;
+  margin-top: 8px;
+  margin-bottom: 0;
 
   &:hover {
     cursor: pointer;
     filter: brightness(90%);
   }
 
   &.ProseMirror-selectednode {
-    outline: 3px solid #5abbf7;
+    outline: 3px solid rgba(var(--color-primary-100));
     filter: brightness(90%);
   }
 }
@@ -52,7 +52,7 @@
 /* Custom list item styles */

 /* Custom gap cursor styles  */
 .ProseMirror-gapcursor::after {
  border-top: 1px solid rgb(var(--color-text-100)) !important;
 }

@@ -283,15 +283,17 @@
   ul:not([data-type="taskList"]):where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
 .prose ul[data-type="taskList"]:where(.prose > :first-child) {
   margin-top: 0.25rem !important;
+  margin-bottom: 1px !important;
 }
 
 .prose ol:not(:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))),
 .prose
  ul:not([data-type="taskList"]):not(
    :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))
   ),
 .prose ul[data-type="taskList"]:not(:where(.prose > :first-child)) {
   margin-top: calc(0.25rem + 3px) !important;
+  margin-bottom: 1px !important;
 }
 
 ol ol,

diff --git a/packages/editor/core/src/styles/table.css b/packages/editor/core/src/styles/table.css
@@ -45,7 +45,7 @@
 .table-wrapper table th {
   font-weight: 500;
   text-align: left;
-  background-color: rgba(var(--color-background-80));
+  background-color: rgba(var(--color-background-90));
 }
 
 .table-wrapper table .selectedCell {
@@ -119,7 +119,7 @@
 }

 .resize-cursor .table-wrapper .table-controls .rows-control,
 .table-wrapper.controls--disabled .table-controls .rows-control,
 .resize-cursor .table-wrapper .table-controls .columns-control,
 .table-wrapper.controls--disabled .table-controls .columns-control {
  opacity: 0;

diff --git a/packages/editor/core/src/ui/extensions/image/image-resize.tsx b/packages/editor/core/src/ui/extensions/image/image-resize.tsx
@@ -66,7 +66,7 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
           updateMediaSize();
         }}
         scalable
-        renderDirections={["w", "e"]}
+        renderDirections={["se"]}
         onScale={({ target, transform }) => {
           target.style.transform = transform;
         }}

diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
@@ -105,7 +105,7 @@ export const CoreEditorExtensions = (
   }),
   CustomCodeBlockExtension.configure({
     HTMLAttributes: {
-      class: "bg-custom-background-80 text-custom-text-100 rounded-lg p-8 pl-9 pr-4",
+      class: "bg-custom-background-90 text-custom-text-100 rounded-lg p-8 pl-9 pr-4",
     },
   }),
   CustomCodeMarkPlugin,

diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -83,7 +83,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
   }),
   CustomCodeBlockExtension.configure({
     HTMLAttributes: {
-      class: "bg-custom-background-80 text-custom-text-100 rounded-lg p-8 pl-9 pr-4",
+      class: "bg-custom-background-90 text-custom-text-100 rounded-lg p-8 pl-9 pr-4",
     },
   }),
   CustomCodeInlineExtension,

diff --git a/packages/editor/document-editor/src/ui/components/page-renderer.tsx b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@@ -24,12 +24,22 @@ type IPageRenderer = {
   editor: Editor;
   editorClassNames: string;
   editorContentCustomClassNames?: string;
+  hideDragHandle?: () => void;
   readonly: boolean;
   tabIndex?: number;
 };
 
 export const PageRenderer = (props: IPageRenderer) => {
-  const { title, tabIndex, editor, editorClassNames, editorContentCustomClassNames, updatePageTitle, readonly } = props;
+  const {
+    title,
+    tabIndex,
+    editor,
+    hideDragHandle,
+    editorClassNames,
+    editorContentCustomClassNames,
+    updatePageTitle,
+    readonly,
+  } = props;
   // states
   const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
   const [isOpen, setIsOpen] = useState(false);
@@ -132,7 +142,7 @@ export const PageRenderer = (props: IPageRenderer) => {
   );
 
   return (
-    <div className="frame-renderer h-full w-full flex flex-col gap-y-2 overflow-y-auto overflow-x-hidden">
+    <div className="frame-renderer h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
       <div className="w-full flex-shrink-0 ml-5">
         {readonly ? (
           <h6 className="-mt-2 break-words bg-transparent text-4xl font-bold">{title}</h6>
@@ -145,6 +155,7 @@ export const PageRenderer = (props: IPageRenderer) => {
             }}
             placeholder="Untitled Page"
             onKeyDown={(e) => {
+              console.log("event", e);
               if (e.key === "Enter") {
                 e.preventDefault();
                 editor
@@ -159,7 +170,7 @@ export const PageRenderer = (props: IPageRenderer) => {
         )}
       </div>
       <div className="flex-grow w-full" onMouseOver={handleLinkHover}>
-        <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+        <EditorContainer editor={editor} hideDragHandle={hideDragHandle} editorClassNames={editorClassNames}>
           <EditorContentWrapper
             tabIndex={tabIndex}
             editor={editor}

diff --git a/packages/editor/document-editor/src/ui/extensions/index.tsx b/packages/editor/document-editor/src/ui/extensions/index.tsx
@@ -4,9 +4,12 @@ import { IssueWidgetPlaceholder } from "src/ui/extensions/widgets/issue-embed-wi
 import { SlashCommandDocumentEditor, DragAndDrop } from "@plane/editor-extensions";
 import { UploadImage } from "@plane/editor-document-core";
 
-export const DocumentEditorExtensions = (uploadFile: UploadImage) => [
+export const DocumentEditorExtensions = (
+  uploadFile: UploadImage,
+  setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void
+) => [
   SlashCommandDocumentEditor(uploadFile),
-  DragAndDrop(),
+  DragAndDrop(setHideDragHandle),
   Placeholder.configure({
     placeholder: ({ editor, node }) => {
       if (node.type.name === "heading") {

diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   UploadImage,
   DeleteImage,
@@ -26,9 +26,10 @@ interface IDocumentEditor {
   editorContentCustomClassNames?: string;
   onChange: (json: object, html: string) => void;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
-  // TODO: merge mention props into one
-  mentionHighlights: () => Promise<IMentionHighlight[]>;
-  mentionSuggestions: () => Promise<IMentionSuggestion[]>;
+  mentionHandler: {
+    highlights: () => Promise<IMentionHighlight[]>;
+    suggestions: () => Promise<IMentionSuggestion[]>;
+  };
   updatePageTitle: (title: string) => void;
   tabIndex?: number;
 }
@@ -42,14 +43,21 @@ const DocumentEditor = (props: IDocumentEditor) => {
     updatedValue = "",
     fileHandler,
     customClassName,
-    mentionHighlights,
-    mentionSuggestions,
+    mentionHandler,
     handleEditorReady,
     forwardedRef,
     updatePageTitle,
     tabIndex,
   } = props;
+  // states
+  const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = useState<() => void>(() => {});
 
+  // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin
+  // loads such that we can invoke it from react when the cursor leaves the container
+  const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => {
+    setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
+  };
+  // use editor
   const editor = useEditor({
     onChange(json, html) {
       onChange(json, html);
@@ -62,28 +70,26 @@ const DocumentEditor = (props: IDocumentEditor) => {
     deleteFile: fileHandler.delete,
     cancelUploadImage: fileHandler.cancel,
     forwardedRef,
-    mentionHighlights,
-    mentionSuggestions,
-    extensions: DocumentEditorExtensions(fileHandler.upload),
+    mentionHandler,
+    extensions: DocumentEditorExtensions(fileHandler.upload, setHideDragHandleFunction),
   });
 
-  if (!editor) {
-    return null;
-  }
-
   const editorClassNames = getEditorClassNames({
     noBorder: true,
     borderOnFocus: false,
     customClassName,
   });
 
+  if (!editor) return null;
+
   return (
     <PageRenderer
       tabIndex={tabIndex}
       readonly={false}
       editor={editor}
       editorContentCustomClassNames={editorContentCustomClassNames}
       editorClassNames={editorClassNames}
+      hideDragHandle={hideDragHandleOnMouseLeave}
       title={title}
       updatePageTitle={updatePageTitle}
     />

diff --git a/packages/editor/document-editor/src/ui/readonly/index.tsx b/packages/editor/document-editor/src/ui/readonly/index.tsx
@@ -15,15 +15,17 @@ interface IDocumentReadOnlyEditor {
   tabIndex?: number;
   title: string;
   handleEditorReady?: (value: boolean) => void;
-  mentionHighlights?: () => Promise<IMentionHighlight[]>;
+  mentionHandler: {
+    highlights: () => Promise<IMentionHighlight[]>;
+  };
   forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
 }
 
 const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
-  const { customClassName, value, title, forwardedRef, tabIndex, handleEditorReady, mentionHighlights } = props;
+  const { customClassName, value, title, forwardedRef, tabIndex, handleEditorReady, mentionHandler } = props;
   const editor = useReadOnlyEditor({
     value,
-    mentionHighlights,
+    mentionHandler,
     forwardedRef,
     handleEditorReady,
     extensions: [IssueWidgetPlaceholder()],

diff --git a/packages/editor/extensions/src/styles/drag-drop.css b/packages/editor/extensions/src/styles/drag-drop.css
@@ -71,26 +71,25 @@
  left: -5px;
  height: 100%;
  width: 100%;
  background-color: rgba(var(--color-primary-100), 0.2);
  border-radius: 4px;
 }
 
 .ProseMirror img {
   transition: filter 0.1s ease-in-out;
+  cursor: pointer;
 
   &:hover {
-    cursor: pointer;
     filter: brightness(90%);
   }
 
   &.ProseMirror-selectednode {
-    outline: 3px solid #5abbf7;
     filter: brightness(90%);
   }
 }

 :not(.dragging) .ProseMirror-selectednode.table-wrapper {
  padding: 4px 2px;
  background-color: rgba(var(--color-primary-300), 0.1) !important;
  box-shadow: rgba(var(--color-primary-100)) 0px 0px 0px 2px inset !important;
 }