diff --git a/packages/app/src/components/commons/Editor/hooks/useAddRow.ts b/packages/app/src/components/commons/Editor/hooks/useAddRow.ts deleted file mode 100644 index 69a7b39..0000000 --- a/packages/app/src/components/commons/Editor/hooks/useAddRow.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { ContentBlock, genKey, ContentState, SelectionState, EditorState } from "draft-js" -import { List } from "immutable" - -const useAddRow = (editorState: EditorState, setEditorState: (editorState: EditorState) => void) => { - const addRow = () => { - const selectionState = editorState.getSelection() - const contentState = editorState.getCurrentContent() - const blockMap = contentState.getBlockMap() - - const newBlock = new ContentBlock({ - key: genKey(), - type: "unstyled", - text: "", - characterList: List(), - }) - - const newBlockMap = blockMap - .toSeq() - .concat([[newBlock.getKey(), newBlock]]) - .toOrderedMap() - - const newContentState = contentState.merge({ - blockMap: newBlockMap, - selectionBefore: selectionState, - selectionAfter: selectionState, - }) as ContentState - - const newEditorState = EditorState.push(editorState, newContentState, "insert-fragment") - - const focusSelection = new SelectionState({ - anchorKey: newBlock.getKey(), - anchorOffset: 0, - focusKey: newBlock.getKey(), - focusOffset: 0, - }) - - setEditorState(EditorState.forceSelection(newEditorState, focusSelection)) - } - - return { addRow } -} - -export default useAddRow diff --git a/packages/app/src/components/commons/Editor/hooks/useCustomComponentInsertion.ts b/packages/app/src/components/commons/Editor/hooks/useCustomComponentInsertion.ts deleted file mode 100644 index 25fa0af..0000000 --- a/packages/app/src/components/commons/Editor/hooks/useCustomComponentInsertion.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { AtomicBlockUtils, EditorState } from "draft-js" - -const useCustomComponentInsertion = ( - editorState: EditorState, - setEditorState: React.Dispatch>, -) => { - const insertCustomComponent = (entityType: string, data: Object | undefined) => { - const contentState = editorState.getCurrentContent() - const contentStateWithEntity = contentState.createEntity(entityType, "IMMUTABLE", data) - const entityKey = contentStateWithEntity.getLastCreatedEntityKey() - const newEditorState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, " ") - - setEditorState(newEditorState) - } - - return { insertCustomComponent } -} - -export default useCustomComponentInsertion diff --git a/packages/app/src/components/commons/Editor/hooks/useDeleteRow.ts b/packages/app/src/components/commons/Editor/hooks/useDeleteRow.ts deleted file mode 100644 index 59d8af6..0000000 --- a/packages/app/src/components/commons/Editor/hooks/useDeleteRow.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { ContentState, EditorState, SelectionState } from "draft-js" - -const useDeleteRow = (editorState: EditorState, setEditorState: React.Dispatch>) => { - const deleteRow = () => { - const contentState = editorState.getCurrentContent() - const selectionState = editorState.getSelection() - const key = selectionState.getAnchorKey() - - const blockMap = contentState.getBlockMap() - - const block = contentState.getBlockForKey(key) - const blocksBefore = blockMap.toSeq().takeUntil((v) => v === block) - if (blocksBefore.last()) { - const blocksAfter = blockMap - .toSeq() - .skipUntil((v) => v === block) - .rest() - const newBlocks = blocksBefore.concat(blocksAfter).toOrderedMap() - - const focusKey = blocksBefore.last().getKey() - const newContentState = contentState.merge({ - blockMap: newBlocks, - selectionBefore: selectionState, - selectionAfter: selectionState.merge({ - anchorKey: focusKey, - focusKey: focusKey, - }), - }) - - const newSelection = new SelectionState({ - anchorKey: focusKey, - anchorOffset: contentState.getBlockForKey(focusKey).getLength(), - focusKey: focusKey, - focusOffset: contentState.getBlockForKey(focusKey).getLength(), - }) - - let newEditorState = EditorState.push(editorState, newContentState as ContentState, "remove-range") - newEditorState = EditorState.forceSelection(newEditorState, newSelection) - setEditorState(newEditorState) - return newEditorState - } - } - - return { deleteRow } -} - -export default useDeleteRow diff --git a/packages/app/src/components/commons/Editor/hooks/useHandleKeyCommand.ts b/packages/app/src/components/commons/Editor/hooks/useHandleKeyCommand.ts deleted file mode 100644 index 9f6231c..0000000 --- a/packages/app/src/components/commons/Editor/hooks/useHandleKeyCommand.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { EditorState, DraftHandleValue, RichUtils } from "draft-js" - -const useHandleKeyCommand = ( - editorState: EditorState, - setEditorState: React.Dispatch>, -) => { - return (command: string): DraftHandleValue => { - const newState = RichUtils.handleKeyCommand(editorState, command) - - if (newState) { - setEditorState(newState) - return "handled" - } - - return "not-handled" - } -} - -export default useHandleKeyCommand diff --git a/packages/app/src/components/commons/Editor/hooks/useKeyBindingFn.ts b/packages/app/src/components/commons/Editor/hooks/useKeyBindingFn.ts deleted file mode 100644 index 7c14515..0000000 --- a/packages/app/src/components/commons/Editor/hooks/useKeyBindingFn.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { getDefaultKeyBinding } from "draft-js" - -const useKeyBindingFn = () => { - return (event: React.KeyboardEvent): string | null => { - if (event.key === "Enter") { - return "split-block" - } - - return getDefaultKeyBinding(event) - } -} - -export default useKeyBindingFn diff --git a/packages/app/src/components/commons/Editor/hooks/useSlashCommand.ts b/packages/app/src/components/commons/Editor/hooks/useSlashCommand.ts deleted file mode 100644 index c2382b8..0000000 --- a/packages/app/src/components/commons/Editor/hooks/useSlashCommand.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { EditorState, Modifier } from "draft-js" -import { useArticleContext } from "../../../../services/publications/contexts" - -const useHandleSlashCommand = () => { - const { setShowBlockTypePopup } = useArticleContext() - - - const handleSlashCommand = (editorState: EditorState) => { - const selection = editorState.getSelection() - const blockKey = selection.getStartKey() - const block = editorState.getCurrentContent().getBlockForKey(blockKey) - const blockText = block.getText() - if (!blockText.endsWith("/")) { - return editorState - } - - // Remove the "/" and open the popup - setShowBlockTypePopup(true) - const newText = blockText.slice(0, -1) - const contentState = Modifier.replaceText( - editorState.getCurrentContent(), - selection.merge({ - anchorOffset: newText.length, - focusOffset: blockText.length, - }), - "", - ) - return EditorState.push(editorState, contentState, "insert-characters") // You need to create a new EditorState object here - } - - // Devuelve los estados y métodos que necesitará tu componente - return { - handleSlashCommand, - } -} - -export default useHandleSlashCommand diff --git a/packages/app/src/components/commons/Editor/hooks/useToggleBlockType.ts b/packages/app/src/components/commons/Editor/hooks/useToggleBlockType.ts deleted file mode 100644 index d39fbba..0000000 --- a/packages/app/src/components/commons/Editor/hooks/useToggleBlockType.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { Dispatch, SetStateAction, useState } from "react" -import { EditorState, RichUtils, DraftEditorCommand, SelectionState } from "draft-js" -import useCustomComponentInsertion from "./useCustomComponentInsertion" -import { useArticleContext } from "../../../../services/publications/contexts" - -type ToggleBlockType = { - toggleBlockType: (blockType: string) => void - showImagePicker: boolean - changeImagePickerState: (show: boolean) => void -} - -const useToggleBlockType = ( - editorState: EditorState, - setEditorState: Dispatch>, -): ToggleBlockType => { - const { setShowBlockTypePopup } = useArticleContext() - const { insertCustomComponent } = useCustomComponentInsertion(editorState, setEditorState) - const [showImagePicker, setShowImagePicker] = useState(false) - - const changeImagePickerState = (show: boolean) => { - setShowImagePicker(show) - } - - const toggleBlockType: ToggleBlockType["toggleBlockType"] = (blockType) => { - if (blockType === "hr") { - insertCustomComponent("HR", {}) - } else if (blockType === "image-picker") { - setShowImagePicker(true) - } else { - const currentSelection = editorState.getSelection() - const currentBlockKey = currentSelection.getStartKey() - - let newEditorState = RichUtils.toggleBlockType(editorState, blockType as DraftEditorCommand) - - const newContent = newEditorState.getCurrentContent() - const newBlock = newContent.getBlockForKey(currentBlockKey) - - const newSelection = new SelectionState({ - anchorKey: newBlock.getKey(), - anchorOffset: newBlock.getLength(), - focusKey: newBlock.getKey(), - focusOffset: newBlock.getLength(), - }) - - newEditorState = EditorState.forceSelection(newEditorState, newSelection) - - setEditorState(newEditorState) - } - - setShowBlockTypePopup(false) - } - - return { toggleBlockType, showImagePicker, changeImagePickerState } -} - -export default useToggleBlockType diff --git a/packages/app/src/components/commons/Editor/hooks/useToggleInlineStyle.ts b/packages/app/src/components/commons/Editor/hooks/useToggleInlineStyle.ts deleted file mode 100644 index ae82641..0000000 --- a/packages/app/src/components/commons/Editor/hooks/useToggleInlineStyle.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { useState } from "react" -import { EditorState, RichUtils } from "draft-js" -import { useArticleContext } from "../../../../services/publications/contexts" - -const useToggleInlineStyle = (editorState: EditorState, setEditorState: (editorState: EditorState) => void) => { - const [showInlinePopup, setShowInlinePopup] = useState(false) - const { linkComponentUrl, setLinkComponentUrl } = useArticleContext() - - const toggleInlineStyle = (inlineStyle: string) => { - if (inlineStyle === "LINK") { - return handleLink() - } - let newState = RichUtils.toggleInlineStyle(editorState, inlineStyle) - const newSelection = newState.getSelection().merge({ - anchorOffset: newState.getSelection().getEndOffset(), - focusOffset: newState.getSelection().getEndOffset(), - }) - newState = EditorState.acceptSelection(newState, newSelection) - setEditorState(newState) - setShowInlinePopup(false) - setLinkComponentUrl(undefined) - } - - const handleLink = () => { - const contentState = editorState.getCurrentContent() - const contentStateWithEntity = contentState.createEntity("LINK", "MUTABLE", { url: linkComponentUrl }) - const entityKey = contentStateWithEntity.getLastCreatedEntityKey() - let newState = EditorState.set(editorState, { - currentContent: contentStateWithEntity, - }) - newState = RichUtils.toggleLink(newState, newState.getSelection(), entityKey) - - // Deselect the text - const newSelection = newState.getSelection().merge({ - anchorOffset: newState.getSelection().getEndOffset(), - focusOffset: newState.getSelection().getEndOffset(), - }) - - newState = EditorState.acceptSelection(newState, newSelection) - setEditorState(newState) - setLinkComponentUrl(undefined) - } - - return { showInlinePopup, setShowInlinePopup, toggleInlineStyle } -} - -export default useToggleInlineStyle