[feat]: Drag and Drop Handles for all Data Structures (#2745)

* better variable names and comments

* drag drop migrated

* custom horizontal rule created

* init transaction hijack

* fixed code block with better contrast, keyboard tripple enter press disabled and syntax highlighting

* fixed link selector closing on open behaviour

* added better keymaps and syntax highlights

* made drag and drop working for code blocks

* fixed drag drop for code blocks

* moved drag drop only to rich text editor

* fixed drag and drop only for description

* enabled drag handles for peek overview and main issues

* got images to old state

web/components/issues/description-form.tsx

@@ -151,6 +151,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
               value={value}
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
+              dragDropEnabled={true}
               customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
               noBorder={!isAllowed}
               onChange={(description: Object, description_html: string) => {

web/components/issues/issue-peek-overview/issue-detail.tsx

@@ -140,6 +140,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
       </div>
       <span>{errors.name ? errors.name.message : null}</span>
       <RichTextEditor
+        dragDropEnabled={true}
         cancelUploadImage={fileService.cancelUpload}
         uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
         deleteFile={fileService.deleteImage}

web/services/file.service.ts

@@ -34,6 +34,7 @@ export class FileService extends APIService {
   constructor() {
     super(API_BASE_URL);
     this.uploadFile = this.uploadFile.bind(this);
+    // this.validateFile = this.validateFile.bind(this);
     this.deleteImage = this.deleteImage.bind(this);
     this.cancelUpload = this.cancelUpload.bind(this);
   }
@@ -52,6 +53,7 @@ export class FileService extends APIService {
         if (axios.isCancel(error)) {
           console.log(error.message);
         } else {
+          console.log(error);
           throw error?.response?.data;
         }
       });
@@ -61,6 +63,14 @@ export class FileService extends APIService {
     this.cancelSource.cancel("Upload cancelled");
   }
 
+  // async validateFile(assetUrlWithWorkspaceId: string): Promise<any> {
+  //   console.log("bruh", assetUrlWithWorkspaceId);
+  //   const res = await this.get(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/`);
+  //   const data = res?.data;
+  //   console.log("data inside fucntion");
+  //   return data.status;
+  // }
+  //
   getUploadFileFunction(workspaceSlug: string): (file: File) => Promise<string> {
     return async (file: File) => {
       const formData = new FormData();

web/styles/editor.css

@@ -229,3 +229,101 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 .ProseMirror table * .is-empty::before {
   opacity: 0;
 }
+
+.ProseMirror pre {
+  background: rgba(var(--color-background-80));
+  border-radius: 0.5rem;
+  color: rgba(var(--color-text-100));
+  font-family: "JetBrainsMono", monospace;
+  padding: 0.75rem 1rem;
+}
+
+.ProseMirror pre code {
+  background: none;
+  color: inherit;
+  font-size: 0.8rem;
+  padding: 0;
+}
+
+.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(img):not(pre) {
+  outline: none !important;
+  border-radius: 0.2rem;
+  background-color: rgb(var(--color-background-90));
+  border: 1px solid #5abbf7;
+  padding: 4px 2px 4px 2px;
+  transition: background-color 0.2s;
+  box-shadow: none;
+}
+
+.drag-handle {
+  position: fixed;
+  opacity: 1;
+  transition: opacity ease-in 0.2s;
+  display: grid;
+  place-items: center;
+  height: 20px;
+  width: 15px;
+  z-index: 10;
+  cursor: grab;
+  border-radius: 2px;
+  background-color: rgb(var(--color-background-90));
+  &:hover {
+    background-color: rgb(var(--color-background-80));
+  }
+
+  &.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.drag-handle:hover {
+  background-color: #0d0d0d 10;
+  transition: background-color 0.2s;
+}
+
+.drag-handle.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+@media screen and (max-width: 600px) {
+  .drag-handle {
+    display: none;
+    pointer-events: none;
+  }
+}
+
+.drag-handle-container {
+  height: 20px;
+  width: 15px;
+  cursor: grab;
+  display: grid;
+  place-items: center;
+}
+
+.drag-handle-dots {
+  height: 100%;
+  width: 12px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  place-items: center;
+}
+
+.drag-handle-dot {
+  height: 2.75px;
+  width: 3px;
+  background-color: rgba(var(--color-text-100));
+  border-radius: 50%;
+}
+
+div[data-type="horizontalRule"] {
+  line-height: 0;
+  padding: 0.25rem 0;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  & > div {
+    border-bottom: 1px solid rgb(var(--color-text-100));
+  }
+}