Merge pull request #244 from gnosis/issue-#231-#233

Bug: solve code and quote break/return
gnosisguild · Jul 24, 2023 · b568f5b · b568f5b
2 parents b548795 + 4904b24
commit b568f5b
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 9 deletions.
diff --git a/packages/app/src/components/commons/Editor/Editor.tsx b/packages/app/src/components/commons/Editor/Editor.tsx
@@ -32,6 +32,7 @@ import EditorImagePicker from "./EditorComponents/EditorImagePicker"
 import EditorLink from "./EditorComponents/EditorLink"
 import EditorShowImage from "./EditorComponents/EditoShowImage"
 import { palette, typography } from "../../../theme"
+import useHandlePastedText from "./hooks/useHandlePasteText"
 
 const { hasCommandModifier } = KeyBindingUtil
 type Config = IConvertToHTMLConfig<DraftInlineStyleType, string, RawDraftEntity>
@@ -351,6 +352,7 @@ const Editor: React.FC = () => {
         handleReturn={handleReturn}
         customStyleMap={styleMap}
         spellCheck={true} 
+        handlePastedText={useHandlePastedText(editorState, setEditorState)}
       />
       <EditorInlineText
         showCommand={showInlinePopup}

diff --git a/packages/app/src/components/commons/Editor/EditorBlock.tsx b/packages/app/src/components/commons/Editor/EditorBlock.tsx
@@ -48,7 +48,8 @@ const EditorBlockItem: React.FC<EditorBlockItemProps> = (props) => {
       sx={{
         position: "relative",
         cursor: "text",
-        mt: 1,
+        mt: type.includes("code-block") ? 0 : 1,
+
         "&:hover .rich-text": {
           opacity: 1,
         },
@@ -62,7 +63,7 @@ const EditorBlockItem: React.FC<EditorBlockItemProps> = (props) => {
             position: "absolute",
             top: handleTop,
             left: type.includes("ordered-list-item" || "unordered-list-item") ? 30 : 0,
-            color: palette.grays[600],
+            color: type.includes("code-block") ? palette.whites[600] : palette.grays[600],
           }}
         >
           Type '/' for commands...

diff --git a/packages/app/src/components/commons/Editor/hooks/useHandlePasteText.ts b/packages/app/src/components/commons/Editor/hooks/useHandlePasteText.ts
@@ -0,0 +1,21 @@
+import { EditorState, DraftHandleValue, Modifier } from "draft-js"
+
+const useHandlePastedText = (
+  editorState: EditorState,
+  setEditorState: React.Dispatch<React.SetStateAction<EditorState>>,
+) => {
+  return (text: string, html: string | undefined, editorState: EditorState): DraftHandleValue => {
+    // We obtain the current content and selection;
+    const contentState = editorState.getCurrentContent()
+    const selectionState = editorState.getSelection()
+
+    // Replace the text selected with the copied text and we use it as one block
+    const newContentState = Modifier.replaceText(contentState, selectionState, text)
+    const newEditorState = EditorState.push(editorState, newContentState, "insert-fragment")
+
+    setEditorState(newEditorState)
+    return "handled"
+  }
+}
+
+export default useHandlePastedText
diff --git a/packages/app/src/components/commons/Editor/hooks/useHandleReturn.ts b/packages/app/src/components/commons/Editor/hooks/useHandleReturn.ts
@@ -1,17 +1,27 @@
-import { EditorState, DraftHandleValue, RichUtils } from "draft-js"
+import { EditorState, DraftHandleValue, Modifier, RichUtils } from "draft-js"
 
 const useHandleReturn = (
   editorState: EditorState,
   setEditorState: React.Dispatch<React.SetStateAction<EditorState>>,
   hasCommandModifier: (e: React.KeyboardEvent) => boolean,
 ) => {
   return (e: React.KeyboardEvent): DraftHandleValue => {
-    if (e.altKey || !hasCommandModifier(e)) {
-      return "not-handled"
-    }
+    if (e.shiftKey) {
+      // If we press shift + return, add new line
+      setEditorState(RichUtils.insertSoftNewline(editorState))
+      return "handled"
+    } else {
+      // If we press return without shift, we create a new block
+      const contentState = editorState.getCurrentContent()
+      const selectionState = editorState.getSelection()
+
+      let newContentState = Modifier.splitBlock(contentState, selectionState)
+      newContentState = Modifier.setBlockType(newContentState, newContentState.getSelectionAfter(), "unstyled")
+      const newEditorState = EditorState.push(editorState, newContentState, "split-block")
 
-    setEditorState(RichUtils.insertSoftNewline(editorState))
-    return "handled"
+      setEditorState(newEditorState)
+      return "handled"
+    }
   }
 }
 

diff --git a/packages/app/src/theme/index.ts b/packages/app/src/theme/index.ts
@@ -236,7 +236,8 @@ let theme = createTheme({
           font-family: ${typography.fontFamilies.monospace};
           margin-bottom: 1rem;
           overflow: auto;
-          padding: 1rem;
+          padding: 0.5rem;
+          font-size: 13px;
         }
         .rich-editor-placeholder{
           font-family: ${fontFamilies.serif} !important;