diff --git a/package.json b/package.json index 59a90e7f..e7da03b6 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "react": "^17.0.1", "react-dom": "^17.0.1", "react-icons": "^4.1.0", - "react-markdown-editor-lite": "^1.2.4", + "react-markdown-editor-lite-sunface": "^1.2.5", "validator": "^13.5.2" }, "devDependencies": { diff --git a/pages/test.tsx b/pages/test.tsx new file mode 100644 index 00000000..16de7a32 --- /dev/null +++ b/pages/test.tsx @@ -0,0 +1,63 @@ +import useCaretPosition from 'components/markdown-editor/position' +import TestStyles from 'theme/caret.styles' +import React, { useRef, useState, useEffect, Fragment } from 'react' +import { render } from 'react-dom' + + +const App = () => { + const triggerRef = useRef(null) + const [showTrigger, setShowTrigger] = useState(false) + const { + x: triggerX, + y: triggerY, + getPosition: getPositionTrigger, + } = useCaretPosition(triggerRef) + + const handleCustomUI = (e) => { + const previousCharacter = e.target.value + .charAt(triggerRef.current.selectionStart - 2) + .trim() + const character = e.target.value + .charAt(triggerRef.current.selectionStart - 1) + .trim() + if (character === '@' && previousCharacter === '') { + setShowTrigger(true) + } + if (character === '' && showTrigger) { + setShowTrigger(false) + } + } + + useEffect(() => { + if (triggerRef.current) { + getPositionTrigger(triggerRef) + } + }, []) + + return ( + <> + +
+