diff --git a/packages/app/src/components/commons/Editor/Editor.tsx b/packages/app/src/components/commons/Editor/Editor.tsx index a683a85f..1f288f03 100644 --- 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 @@ -351,6 +352,7 @@ const Editor: React.FC = () => { handleReturn={handleReturn} customStyleMap={styleMap} spellCheck={true} + handlePastedText={useHandlePastedText(editorState, setEditorState)} /> = (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 = (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 new file mode 100644 index 00000000..9654d883 --- /dev/null +++ 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>, +) => { + 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 index 1412a4b7..eb2e25c5 100644 --- a/packages/app/src/components/commons/Editor/hooks/useHandleReturn.ts +++ b/packages/app/src/components/commons/Editor/hooks/useHandleReturn.ts @@ -1,4 +1,4 @@ -import { EditorState, DraftHandleValue, RichUtils } from "draft-js" +import { EditorState, DraftHandleValue, Modifier, RichUtils } from "draft-js" const useHandleReturn = ( editorState: EditorState, @@ -6,12 +6,22 @@ const useHandleReturn = ( 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 index dd9a67ab..16537838 100644 --- 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;