feat: workflow add note node (#5164)
This commit is contained in:
zxhlyh
@@ -0,0 +1,65 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
createContext,
|
||||
memo,
|
||||
useRef,
|
||||
} from 'react'
|
||||
import { LexicalComposer } from '@lexical/react/LexicalComposer'
|
||||
import { LinkNode } from '@lexical/link'
|
||||
import {
|
||||
ListItemNode,
|
||||
ListNode,
|
||||
} from '@lexical/list'
|
||||
import { createNoteEditorStore } from './store'
|
||||
import theme from './theme'
|
||||
|
||||
type NoteEditorStore = ReturnType<typeof createNoteEditorStore>
|
||||
const NoteEditorContext = createContext<NoteEditorStore | null>(null)
|
||||
|
||||
type NoteEditorContextProviderProps = {
|
||||
value: string
|
||||
children: JSX.Element | string | (JSX.Element | string)[]
|
||||
}
|
||||
export const NoteEditorContextProvider = memo(({
|
||||
value,
|
||||
children,
|
||||
}: NoteEditorContextProviderProps) => {
|
||||
const storeRef = useRef<NoteEditorStore>()
|
||||
|
||||
if (!storeRef.current)
|
||||
storeRef.current = createNoteEditorStore()
|
||||
|
||||
let initialValue = null
|
||||
try {
|
||||
initialValue = JSON.parse(value)
|
||||
}
|
||||
catch (e) {
|
||||
|
||||
}
|
||||
|
||||
const initialConfig = {
|
||||
namespace: 'note-editor',
|
||||
nodes: [
|
||||
LinkNode,
|
||||
ListNode,
|
||||
ListItemNode,
|
||||
],
|
||||
editorState: !initialValue?.root.children.length ? null : JSON.stringify(initialValue),
|
||||
onError: (error: Error) => {
|
||||
throw error
|
||||
},
|
||||
theme,
|
||||
}
|
||||
|
||||
return (
|
||||
<NoteEditorContext.Provider value={storeRef.current}>
|
||||
<LexicalComposer initialConfig={{ ...initialConfig }}>
|
||||
{children}
|
||||
</LexicalComposer>
|
||||
</NoteEditorContext.Provider>
|
||||
)
|
||||
})
|
||||
NoteEditorContextProvider.displayName = 'NoteEditorContextProvider'
|
||||
|
||||
export default NoteEditorContext
|
||||
62
web/app/components/workflow/note-node/note-editor/editor.tsx
Normal file
62
web/app/components/workflow/note-node/note-editor/editor.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
} from 'react'
|
||||
import type { EditorState } from 'lexical'
|
||||
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
|
||||
import { ContentEditable } from '@lexical/react/LexicalContentEditable'
|
||||
import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin'
|
||||
import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'
|
||||
import { ListPlugin } from '@lexical/react/LexicalListPlugin'
|
||||
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
|
||||
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
|
||||
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
|
||||
import LinkEditorPlugin from './plugins/link-editor-plugin'
|
||||
import FormatDetectorPlugin from './plugins/format-detector-plugin'
|
||||
// import TreeView from '@/app/components/base/prompt-editor/plugins/tree-view'
|
||||
import Placeholder from '@/app/components/base/prompt-editor/plugins/placeholder'
|
||||
|
||||
type EditorProps = {
|
||||
placeholder?: string
|
||||
onChange?: (editorState: EditorState) => void
|
||||
containerElement: HTMLDivElement | null
|
||||
}
|
||||
const Editor = ({
|
||||
placeholder = 'write you note...',
|
||||
onChange,
|
||||
containerElement,
|
||||
}: EditorProps) => {
|
||||
const handleEditorChange = useCallback((editorState: EditorState) => {
|
||||
onChange?.(editorState)
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<div className='relative'>
|
||||
<RichTextPlugin
|
||||
contentEditable={
|
||||
<div>
|
||||
<ContentEditable
|
||||
spellCheck={false}
|
||||
className='w-full h-full outline-none caret-primary-600'
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
placeholder={<Placeholder value={placeholder} compact />}
|
||||
ErrorBoundary={LexicalErrorBoundary}
|
||||
/>
|
||||
<ClickableLinkPlugin disabled />
|
||||
<LinkPlugin />
|
||||
<ListPlugin />
|
||||
<LinkEditorPlugin containerElement={containerElement} />
|
||||
<FormatDetectorPlugin />
|
||||
<HistoryPlugin />
|
||||
<OnChangePlugin onChange={handleEditorChange} />
|
||||
{/* <TreeView /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(Editor)
|
||||
@@ -0,0 +1,3 @@
|
||||
export { NoteEditorContextProvider } from './context'
|
||||
export { default as NoteEditor } from './editor'
|
||||
export { default as NoteEditorToolbar } from './toolbar'
|
||||
@@ -0,0 +1,78 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
} from 'react'
|
||||
import {
|
||||
$getSelection,
|
||||
$isRangeSelection,
|
||||
} from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import type { LinkNode } from '@lexical/link'
|
||||
import { $isLinkNode } from '@lexical/link'
|
||||
import { $isListItemNode } from '@lexical/list'
|
||||
import { getSelectedNode } from '../../utils'
|
||||
import { useNoteEditorStore } from '../../store'
|
||||
|
||||
export const useFormatDetector = () => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
const noteEditorStore = useNoteEditorStore()
|
||||
|
||||
const handleFormat = useCallback(() => {
|
||||
editor.getEditorState().read(() => {
|
||||
if (editor.isComposing())
|
||||
return
|
||||
|
||||
const selection = $getSelection()
|
||||
|
||||
if ($isRangeSelection(selection)) {
|
||||
const node = getSelectedNode(selection)
|
||||
const {
|
||||
setSelectedIsBold,
|
||||
setSelectedIsItalic,
|
||||
setSelectedIsStrikeThrough,
|
||||
setSelectedLinkUrl,
|
||||
setSelectedIsLink,
|
||||
setSelectedIsBullet,
|
||||
} = noteEditorStore.getState()
|
||||
setSelectedIsBold(selection.hasFormat('bold'))
|
||||
setSelectedIsItalic(selection.hasFormat('italic'))
|
||||
setSelectedIsStrikeThrough(selection.hasFormat('strikethrough'))
|
||||
const parent = node.getParent()
|
||||
if ($isLinkNode(parent) || $isLinkNode(node)) {
|
||||
const linkUrl = ($isLinkNode(parent) ? parent : node as LinkNode).getURL()
|
||||
setSelectedLinkUrl(linkUrl)
|
||||
setSelectedIsLink(true)
|
||||
}
|
||||
else {
|
||||
setSelectedLinkUrl('')
|
||||
setSelectedIsLink(false)
|
||||
}
|
||||
|
||||
if ($isListItemNode(parent) || $isListItemNode(node))
|
||||
setSelectedIsBullet(true)
|
||||
else
|
||||
setSelectedIsBullet(false)
|
||||
}
|
||||
})
|
||||
}, [editor, noteEditorStore])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('selectionchange', handleFormat)
|
||||
return () => {
|
||||
document.removeEventListener('selectionchange', handleFormat)
|
||||
}
|
||||
}, [handleFormat])
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerUpdateListener(() => {
|
||||
handleFormat()
|
||||
}),
|
||||
)
|
||||
}, [editor, handleFormat])
|
||||
|
||||
return {
|
||||
handleFormat,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { useFormatDetector } from './hooks'
|
||||
|
||||
const FormatDetectorPlugin = () => {
|
||||
useFormatDetector()
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default FormatDetectorPlugin
|
||||
@@ -0,0 +1,152 @@
|
||||
import {
|
||||
memo,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { escape } from 'lodash-es'
|
||||
import {
|
||||
FloatingPortal,
|
||||
flip,
|
||||
offset,
|
||||
shift,
|
||||
useFloating,
|
||||
} from '@floating-ui/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useClickAway } from 'ahooks'
|
||||
import cn from 'classnames'
|
||||
import { useStore } from '../../store'
|
||||
import { useLink } from './hooks'
|
||||
import Button from '@/app/components/base/button'
|
||||
import {
|
||||
Edit03,
|
||||
LinkBroken01,
|
||||
LinkExternal01,
|
||||
} from '@/app/components/base/icons/src/vender/line/general'
|
||||
|
||||
type LinkEditorComponentProps = {
|
||||
containerElement: HTMLDivElement | null
|
||||
}
|
||||
const LinkEditorComponent = ({
|
||||
containerElement,
|
||||
}: LinkEditorComponentProps) => {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
handleSaveLink,
|
||||
handleUnlink,
|
||||
} = useLink()
|
||||
const selectedLinkUrl = useStore(s => s.selectedLinkUrl)
|
||||
const linkAnchorElement = useStore(s => s.linkAnchorElement)
|
||||
const linkOperatorShow = useStore(s => s.linkOperatorShow)
|
||||
const setLinkAnchorElement = useStore(s => s.setLinkAnchorElement)
|
||||
const setLinkOperatorShow = useStore(s => s.setLinkOperatorShow)
|
||||
const [url, setUrl] = useState(selectedLinkUrl)
|
||||
const { refs, floatingStyles, elements } = useFloating({
|
||||
placement: 'top',
|
||||
middleware: [
|
||||
offset(4),
|
||||
shift(),
|
||||
flip(),
|
||||
],
|
||||
})
|
||||
|
||||
useClickAway(() => {
|
||||
setLinkAnchorElement()
|
||||
}, linkAnchorElement)
|
||||
|
||||
useEffect(() => {
|
||||
setUrl(selectedLinkUrl)
|
||||
}, [selectedLinkUrl])
|
||||
|
||||
useEffect(() => {
|
||||
if (linkAnchorElement)
|
||||
refs.setReference(linkAnchorElement)
|
||||
}, [linkAnchorElement, refs])
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
elements.reference && (
|
||||
<FloatingPortal root={containerElement}>
|
||||
<div
|
||||
className={cn(
|
||||
'nodrag nopan inline-flex items-center w-max rounded-md border-[0.5px] border-black/5 bg-white z-10',
|
||||
!linkOperatorShow && 'p-1 shadow-md',
|
||||
linkOperatorShow && 'p-0.5 shadow-sm text-xs text-gray-500 font-medium',
|
||||
)}
|
||||
style={floatingStyles}
|
||||
ref={refs.setFloating}
|
||||
>
|
||||
{
|
||||
!linkOperatorShow && (
|
||||
<>
|
||||
<input
|
||||
className='mr-0.5 p-1 w-[196px] h-6 rounded-sm text-[13px] appearance-none outline-none'
|
||||
value={url}
|
||||
onChange={e => setUrl(e.target.value)}
|
||||
placeholder={t('workflow.nodes.note.editor.enterUrl') || ''}
|
||||
autoFocus
|
||||
/>
|
||||
<Button
|
||||
type='primary'
|
||||
className={cn(
|
||||
'py-0 px-2 h-6 text-xs',
|
||||
!url && 'cursor-not-allowed',
|
||||
)}
|
||||
disabled={!url}
|
||||
onClick={() => handleSaveLink(url)}
|
||||
>
|
||||
{t('common.operation.ok')}
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
linkOperatorShow && (
|
||||
<>
|
||||
<a
|
||||
className='flex items-center px-2 h-6 rounded-md hover:bg-gray-50'
|
||||
href={escape(url)}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
<LinkExternal01 className='mr-1 w-3 h-3' />
|
||||
<div className='mr-1'>
|
||||
{t('workflow.nodes.note.editor.openLink')}
|
||||
</div>
|
||||
<div
|
||||
title={escape(url)}
|
||||
className='text-primary-600 max-w-[140px] truncate'
|
||||
>
|
||||
{escape(url)}
|
||||
</div>
|
||||
</a>
|
||||
<div className='mx-1 w-[1px] h-3.5 bg-gray-100'></div>
|
||||
<div
|
||||
className='flex items-center mr-0.5 px-2 h-6 rounded-md cursor-pointer hover:bg-gray-50'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setLinkOperatorShow(false)
|
||||
}}
|
||||
>
|
||||
<Edit03 className='mr-1 w-3 h-3' />
|
||||
{t('common.operation.edit')}
|
||||
</div>
|
||||
<div
|
||||
className='flex items-center px-2 h-6 rounded-md cursor-pointer hover:bg-gray-50'
|
||||
onClick={handleUnlink}
|
||||
>
|
||||
<LinkBroken01 className='mr-1 w-3 h-3' />
|
||||
{t('workflow.nodes.note.editor.unlink')}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</FloatingPortal>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(LinkEditorComponent)
|
||||
@@ -0,0 +1,115 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
CLICK_COMMAND,
|
||||
COMMAND_PRIORITY_LOW,
|
||||
} from 'lexical'
|
||||
import {
|
||||
mergeRegister,
|
||||
} from '@lexical/utils'
|
||||
import {
|
||||
TOGGLE_LINK_COMMAND,
|
||||
} from '@lexical/link'
|
||||
import { escape } from 'lodash-es'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { useNoteEditorStore } from '../../store'
|
||||
import { urlRegExp } from '../../utils'
|
||||
import { useToastContext } from '@/app/components/base/toast'
|
||||
|
||||
export const useOpenLink = () => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
const noteEditorStore = useNoteEditorStore()
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerUpdateListener(() => {
|
||||
setTimeout(() => {
|
||||
const {
|
||||
selectedLinkUrl,
|
||||
selectedIsLink,
|
||||
setLinkAnchorElement,
|
||||
setLinkOperatorShow,
|
||||
} = noteEditorStore.getState()
|
||||
|
||||
if (selectedIsLink) {
|
||||
setLinkAnchorElement(true)
|
||||
|
||||
if (selectedLinkUrl)
|
||||
setLinkOperatorShow(true)
|
||||
else
|
||||
setLinkOperatorShow(false)
|
||||
}
|
||||
else {
|
||||
setLinkAnchorElement()
|
||||
setLinkOperatorShow(false)
|
||||
}
|
||||
})
|
||||
}),
|
||||
editor.registerCommand(
|
||||
CLICK_COMMAND,
|
||||
(payload) => {
|
||||
setTimeout(() => {
|
||||
const {
|
||||
selectedLinkUrl,
|
||||
selectedIsLink,
|
||||
setLinkAnchorElement,
|
||||
setLinkOperatorShow,
|
||||
} = noteEditorStore.getState()
|
||||
|
||||
if (selectedIsLink) {
|
||||
if ((payload.metaKey || payload.ctrlKey) && selectedLinkUrl) {
|
||||
window.open(selectedLinkUrl, '_blank')
|
||||
return true
|
||||
}
|
||||
setLinkAnchorElement(true)
|
||||
|
||||
if (selectedLinkUrl)
|
||||
setLinkOperatorShow(true)
|
||||
else
|
||||
setLinkOperatorShow(false)
|
||||
}
|
||||
else {
|
||||
setLinkAnchorElement()
|
||||
setLinkOperatorShow(false)
|
||||
}
|
||||
})
|
||||
return false
|
||||
},
|
||||
COMMAND_PRIORITY_LOW,
|
||||
),
|
||||
)
|
||||
}, [editor, noteEditorStore])
|
||||
}
|
||||
|
||||
export const useLink = () => {
|
||||
const { t } = useTranslation()
|
||||
const [editor] = useLexicalComposerContext()
|
||||
const noteEditorStore = useNoteEditorStore()
|
||||
const { notify } = useToastContext()
|
||||
|
||||
const handleSaveLink = useCallback((url: string) => {
|
||||
if (url && !urlRegExp.test(url)) {
|
||||
notify({ type: 'error', message: t('workflow.nodes.note.editor.invalidUrl') })
|
||||
return
|
||||
}
|
||||
editor.dispatchCommand(TOGGLE_LINK_COMMAND, escape(url))
|
||||
|
||||
const { setLinkAnchorElement } = noteEditorStore.getState()
|
||||
setLinkAnchorElement()
|
||||
}, [editor, noteEditorStore, notify, t])
|
||||
|
||||
const handleUnlink = useCallback(() => {
|
||||
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
|
||||
|
||||
const { setLinkAnchorElement } = noteEditorStore.getState()
|
||||
setLinkAnchorElement()
|
||||
}, [editor, noteEditorStore])
|
||||
|
||||
return {
|
||||
handleSaveLink,
|
||||
handleUnlink,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import {
|
||||
memo,
|
||||
} from 'react'
|
||||
import { useStore } from '../../store'
|
||||
import { useOpenLink } from './hooks'
|
||||
import LinkEditorComponent from './component'
|
||||
|
||||
type LinkEditorPluginProps = {
|
||||
containerElement: HTMLDivElement | null
|
||||
}
|
||||
const LinkEditorPlugin = ({
|
||||
containerElement,
|
||||
}: LinkEditorPluginProps) => {
|
||||
useOpenLink()
|
||||
const linkAnchorElement = useStore(s => s.linkAnchorElement)
|
||||
|
||||
if (!linkAnchorElement)
|
||||
return null
|
||||
|
||||
return (
|
||||
<LinkEditorComponent containerElement={containerElement} />
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(LinkEditorPlugin)
|
||||
72
web/app/components/workflow/note-node/note-editor/store.ts
Normal file
72
web/app/components/workflow/note-node/note-editor/store.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useContext } from 'react'
|
||||
import {
|
||||
useStore as useZustandStore,
|
||||
} from 'zustand'
|
||||
import { createStore } from 'zustand/vanilla'
|
||||
import NoteEditorContext from './context'
|
||||
|
||||
type Shape = {
|
||||
linkAnchorElement: HTMLElement | null
|
||||
setLinkAnchorElement: (open?: boolean) => void
|
||||
linkOperatorShow: boolean
|
||||
setLinkOperatorShow: (linkOperatorShow: boolean) => void
|
||||
selectedIsBold: boolean
|
||||
setSelectedIsBold: (selectedIsBold: boolean) => void
|
||||
selectedIsItalic: boolean
|
||||
setSelectedIsItalic: (selectedIsItalic: boolean) => void
|
||||
selectedIsStrikeThrough: boolean
|
||||
setSelectedIsStrikeThrough: (selectedIsStrikeThrough: boolean) => void
|
||||
selectedLinkUrl: string
|
||||
setSelectedLinkUrl: (selectedLinkUrl: string) => void
|
||||
selectedIsLink: boolean
|
||||
setSelectedIsLink: (selectedIsLink: boolean) => void
|
||||
selectedIsBullet: boolean
|
||||
setSelectedIsBullet: (selectedIsBullet: boolean) => void
|
||||
}
|
||||
|
||||
export const createNoteEditorStore = () => {
|
||||
return createStore<Shape>(set => ({
|
||||
linkAnchorElement: null,
|
||||
setLinkAnchorElement: (open) => {
|
||||
if (open) {
|
||||
setTimeout(() => {
|
||||
const nativeSelection = window.getSelection()
|
||||
|
||||
if (nativeSelection?.focusNode) {
|
||||
const parent = nativeSelection.focusNode.parentElement
|
||||
set(() => ({ linkAnchorElement: parent }))
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
set(() => ({ linkAnchorElement: null }))
|
||||
}
|
||||
},
|
||||
linkOperatorShow: false,
|
||||
setLinkOperatorShow: linkOperatorShow => set(() => ({ linkOperatorShow })),
|
||||
selectedIsBold: false,
|
||||
setSelectedIsBold: selectedIsBold => set(() => ({ selectedIsBold })),
|
||||
selectedIsItalic: false,
|
||||
setSelectedIsItalic: selectedIsItalic => set(() => ({ selectedIsItalic })),
|
||||
selectedIsStrikeThrough: false,
|
||||
setSelectedIsStrikeThrough: selectedIsStrikeThrough => set(() => ({ selectedIsStrikeThrough })),
|
||||
selectedLinkUrl: '',
|
||||
setSelectedLinkUrl: selectedLinkUrl => set(() => ({ selectedLinkUrl })),
|
||||
selectedIsLink: false,
|
||||
setSelectedIsLink: selectedIsLink => set(() => ({ selectedIsLink })),
|
||||
selectedIsBullet: false,
|
||||
setSelectedIsBullet: selectedIsBullet => set(() => ({ selectedIsBullet })),
|
||||
}))
|
||||
}
|
||||
|
||||
export function useStore<T>(selector: (state: Shape) => T): T {
|
||||
const store = useContext(NoteEditorContext)
|
||||
if (!store)
|
||||
throw new Error('Missing NoteEditorContext.Provider in the tree')
|
||||
|
||||
return useZustandStore(store, selector)
|
||||
}
|
||||
|
||||
export const useNoteEditorStore = () => {
|
||||
return useContext(NoteEditorContext)!
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { EditorThemeClasses } from 'lexical'
|
||||
|
||||
import './theme.css'
|
||||
|
||||
const theme: EditorThemeClasses = {
|
||||
paragraph: 'note-editor-theme_paragraph',
|
||||
list: {
|
||||
ul: 'note-editor-theme_list-ul',
|
||||
listitem: 'note-editor-theme_list-li',
|
||||
},
|
||||
link: 'note-editor-theme_link',
|
||||
text: {
|
||||
strikethrough: 'note-editor-theme_text-strikethrough',
|
||||
},
|
||||
}
|
||||
|
||||
export default theme
|
||||
@@ -0,0 +1,24 @@
|
||||
.note-editor-theme_paragraph {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.note-editor-theme_list-ul {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.note-editor-theme_list-li {
|
||||
margin-left: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.note-editor-theme_link {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.note-editor-theme_text-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import {
|
||||
memo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import cn from 'classnames'
|
||||
import { NoteTheme } from '../../types'
|
||||
import { THEME_MAP } from '../../constants'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
|
||||
export const COLOR_LIST = [
|
||||
{
|
||||
key: NoteTheme.blue,
|
||||
inner: THEME_MAP[NoteTheme.blue].title,
|
||||
outer: THEME_MAP[NoteTheme.blue].outer,
|
||||
},
|
||||
{
|
||||
key: NoteTheme.cyan,
|
||||
inner: THEME_MAP[NoteTheme.cyan].title,
|
||||
outer: THEME_MAP[NoteTheme.cyan].outer,
|
||||
},
|
||||
{
|
||||
key: NoteTheme.green,
|
||||
inner: THEME_MAP[NoteTheme.green].title,
|
||||
outer: THEME_MAP[NoteTheme.green].outer,
|
||||
},
|
||||
{
|
||||
key: NoteTheme.yellow,
|
||||
inner: THEME_MAP[NoteTheme.yellow].title,
|
||||
outer: THEME_MAP[NoteTheme.yellow].outer,
|
||||
},
|
||||
{
|
||||
key: NoteTheme.pink,
|
||||
inner: THEME_MAP[NoteTheme.pink].title,
|
||||
outer: THEME_MAP[NoteTheme.pink].outer,
|
||||
},
|
||||
{
|
||||
key: NoteTheme.violet,
|
||||
inner: THEME_MAP[NoteTheme.violet].title,
|
||||
outer: THEME_MAP[NoteTheme.violet].outer,
|
||||
},
|
||||
]
|
||||
|
||||
export type ColorPickerProps = {
|
||||
theme: NoteTheme
|
||||
onThemeChange: (theme: NoteTheme) => void
|
||||
}
|
||||
const ColorPicker = ({
|
||||
theme,
|
||||
onThemeChange,
|
||||
}: ColorPickerProps) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='top'
|
||||
offset={4}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
|
||||
<div className={cn(
|
||||
'flex items-center justify-center w-8 h-8 rounded-md cursor-pointer hover:bg-black/5',
|
||||
open && 'bg-black/5',
|
||||
)}>
|
||||
<div
|
||||
className='w-4 h-4 rounded-full border border-black/5'
|
||||
style={{ backgroundColor: THEME_MAP[theme].title }}
|
||||
></div>
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent>
|
||||
<div className='grid grid-cols-3 grid-rows-2 gap-0.5 p-0.5 rounded-lg border-[0.5px] border-black/8 bg-white shadow-lg'>
|
||||
{
|
||||
COLOR_LIST.map(color => (
|
||||
<div
|
||||
key={color.key}
|
||||
className='group relative flex items-center justify-center w-8 h-8 rounded-md cursor-pointer'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onThemeChange(color.key)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='hidden group-hover:block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-5 h-5 rounded-full border-[1.5px]'
|
||||
style={{ borderColor: color.outer }}
|
||||
></div>
|
||||
<div
|
||||
className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full border border-black/5'
|
||||
style={{ backgroundColor: color.inner }}
|
||||
></div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(ColorPicker)
|
||||
@@ -0,0 +1,81 @@
|
||||
import {
|
||||
memo,
|
||||
useMemo,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from 'classnames'
|
||||
import { useStore } from '../store'
|
||||
import { useCommand } from './hooks'
|
||||
import { Link01 } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import {
|
||||
Bold01,
|
||||
Dotpoints01,
|
||||
Italic01,
|
||||
Strikethrough01,
|
||||
} from '@/app/components/base/icons/src/vender/line/editor'
|
||||
import TooltipPlus from '@/app/components/base/tooltip-plus'
|
||||
|
||||
type CommandProps = {
|
||||
type: 'bold' | 'italic' | 'strikethrough' | 'link' | 'bullet'
|
||||
}
|
||||
const Command = ({
|
||||
type,
|
||||
}: CommandProps) => {
|
||||
const { t } = useTranslation()
|
||||
const selectedIsBold = useStore(s => s.selectedIsBold)
|
||||
const selectedIsItalic = useStore(s => s.selectedIsItalic)
|
||||
const selectedIsStrikeThrough = useStore(s => s.selectedIsStrikeThrough)
|
||||
const selectedIsLink = useStore(s => s.selectedIsLink)
|
||||
const selectedIsBullet = useStore(s => s.selectedIsBullet)
|
||||
const { handleCommand } = useCommand()
|
||||
|
||||
const icon = useMemo(() => {
|
||||
switch (type) {
|
||||
case 'bold':
|
||||
return <Bold01 className={cn('w-4 h-4', selectedIsBold && 'text-primary-600')} />
|
||||
case 'italic':
|
||||
return <Italic01 className={cn('w-4 h-4', selectedIsItalic && 'text-primary-600')} />
|
||||
case 'strikethrough':
|
||||
return <Strikethrough01 className={cn('w-4 h-4', selectedIsStrikeThrough && 'text-primary-600')} />
|
||||
case 'link':
|
||||
return <Link01 className={cn('w-4 h-4', selectedIsLink && 'text-primary-600')} />
|
||||
case 'bullet':
|
||||
return <Dotpoints01 className={cn('w-4 h-4', selectedIsBullet && 'text-primary-600')} />
|
||||
}
|
||||
}, [type, selectedIsBold, selectedIsItalic, selectedIsStrikeThrough, selectedIsLink, selectedIsBullet])
|
||||
|
||||
const tip = useMemo(() => {
|
||||
switch (type) {
|
||||
case 'bold':
|
||||
return t('workflow.nodes.note.editor.bold')
|
||||
case 'italic':
|
||||
return t('workflow.nodes.note.editor.italic')
|
||||
case 'strikethrough':
|
||||
return t('workflow.nodes.note.editor.strikethrough')
|
||||
case 'link':
|
||||
return t('workflow.nodes.note.editor.link')
|
||||
case 'bullet':
|
||||
return t('workflow.nodes.note.editor.bulletList')
|
||||
}
|
||||
}, [type, t])
|
||||
|
||||
return (
|
||||
<TooltipPlus popupContent={tip}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center w-8 h-8 cursor-pointer rounded-md text-gray-500 hover:text-gray-800 hover:bg-black/5',
|
||||
type === 'bold' && selectedIsBold && 'bg-primary-50',
|
||||
type === 'italic' && selectedIsItalic && 'bg-primary-50',
|
||||
type === 'strikethrough' && selectedIsStrikeThrough && 'bg-primary-50',
|
||||
type === 'link' && selectedIsLink && 'bg-primary-50',
|
||||
type === 'bullet' && selectedIsBullet && 'bg-primary-50',
|
||||
)}
|
||||
onClick={() => handleCommand(type)}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
</TooltipPlus>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(Command)
|
||||
@@ -0,0 +1,7 @@
|
||||
const Divider = () => {
|
||||
return (
|
||||
<div className='mx-1 w-[1px] h-3.5 bg-gray-200'></div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Divider
|
||||
@@ -0,0 +1,86 @@
|
||||
import { memo } from 'react'
|
||||
import cn from 'classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useFontSize } from './hooks'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import { TitleCase } from '@/app/components/base/icons/src/vender/line/editor'
|
||||
import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
import { Check } from '@/app/components/base/icons/src/vender/line/general'
|
||||
|
||||
const FontSizeSelector = () => {
|
||||
const { t } = useTranslation()
|
||||
const FONT_SIZE_LIST = [
|
||||
{
|
||||
key: '12px',
|
||||
value: t('workflow.nodes.note.editor.small'),
|
||||
},
|
||||
{
|
||||
key: '14px',
|
||||
value: t('workflow.nodes.note.editor.medium'),
|
||||
},
|
||||
{
|
||||
key: '16px',
|
||||
value: t('workflow.nodes.note.editor.large'),
|
||||
},
|
||||
]
|
||||
const {
|
||||
fontSizeSelectorShow,
|
||||
handleOpenFontSizeSelector,
|
||||
fontSize,
|
||||
handleFontSize,
|
||||
} = useFontSize()
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={fontSizeSelectorShow}
|
||||
onOpenChange={handleOpenFontSizeSelector}
|
||||
placement='bottom-start'
|
||||
offset={2}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => handleOpenFontSizeSelector(!fontSizeSelectorShow)}>
|
||||
<div className={cn(
|
||||
'flex items-center pl-2 pr-1.5 h-8 rounded-md text-[13px] font-medium text-gray-700 cursor-pointer hover:bg-gray-50',
|
||||
fontSizeSelectorShow && 'bg-gray-50',
|
||||
)}>
|
||||
<TitleCase className='mr-1 w-4 h-4' />
|
||||
{FONT_SIZE_LIST.find(font => font.key === fontSize)?.value || t('workflow.nodes.note.editor.small')}
|
||||
<ChevronDown className='ml-0.5 w-3 h-3' />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent>
|
||||
<div className='p-1 w-[120px] bg-white border-[0.5px] border-gray-200 rounded-md shadow-xl text-gray-700'>
|
||||
{
|
||||
FONT_SIZE_LIST.map(font => (
|
||||
<div
|
||||
key={font.key}
|
||||
className='flex items-center justify-between pl-3 pr-2 h-8 rounded-md cursor-pointer hover:bg-gray-50'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleFontSize(font.key)
|
||||
handleOpenFontSizeSelector(false)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ fontSize: font.key }}
|
||||
>
|
||||
{font.value}
|
||||
</div>
|
||||
{
|
||||
fontSize === font.key && (
|
||||
<Check className='w-4 h-4 text-primary-500' />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(FontSizeSelector)
|
||||
@@ -0,0 +1,147 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react'
|
||||
import {
|
||||
$createParagraphNode,
|
||||
$getSelection,
|
||||
$isRangeSelection,
|
||||
$setSelection,
|
||||
COMMAND_PRIORITY_CRITICAL,
|
||||
FORMAT_TEXT_COMMAND,
|
||||
SELECTION_CHANGE_COMMAND,
|
||||
} from 'lexical'
|
||||
import {
|
||||
$getSelectionStyleValueForProperty,
|
||||
$patchStyleText,
|
||||
$setBlocksType,
|
||||
} from '@lexical/selection'
|
||||
import { INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import {
|
||||
$isLinkNode,
|
||||
TOGGLE_LINK_COMMAND,
|
||||
} from '@lexical/link'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { useNoteEditorStore } from '../store'
|
||||
import { getSelectedNode } from '../utils'
|
||||
|
||||
export const useCommand = () => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
const noteEditorStore = useNoteEditorStore()
|
||||
|
||||
const handleCommand = useCallback((type: string) => {
|
||||
if (type === 'bold')
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')
|
||||
|
||||
if (type === 'italic')
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')
|
||||
|
||||
if (type === 'strikethrough')
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')
|
||||
|
||||
if (type === 'link') {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection()
|
||||
|
||||
if ($isRangeSelection(selection)) {
|
||||
const node = getSelectedNode(selection)
|
||||
const parent = node.getParent()
|
||||
const { setLinkAnchorElement } = noteEditorStore.getState()
|
||||
|
||||
if ($isLinkNode(parent) || $isLinkNode(node)) {
|
||||
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
|
||||
setLinkAnchorElement()
|
||||
}
|
||||
else {
|
||||
editor.dispatchCommand(TOGGLE_LINK_COMMAND, '')
|
||||
setLinkAnchorElement(true)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (type === 'bullet') {
|
||||
const { selectedIsBullet } = noteEditorStore.getState()
|
||||
|
||||
if (selectedIsBullet) {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection()
|
||||
if ($isRangeSelection(selection))
|
||||
$setBlocksType(selection, () => $createParagraphNode())
|
||||
})
|
||||
}
|
||||
else {
|
||||
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)
|
||||
}
|
||||
}
|
||||
}, [editor, noteEditorStore])
|
||||
|
||||
return {
|
||||
handleCommand,
|
||||
}
|
||||
}
|
||||
|
||||
export const useFontSize = () => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
const [fontSize, setFontSize] = useState('12px')
|
||||
const [fontSizeSelectorShow, setFontSizeSelectorShow] = useState(false)
|
||||
|
||||
const handleFontSize = useCallback((fontSize: string) => {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection()
|
||||
|
||||
if ($isRangeSelection(selection))
|
||||
$patchStyleText(selection, { 'font-size': fontSize })
|
||||
})
|
||||
}, [editor])
|
||||
|
||||
const handleOpenFontSizeSelector = useCallback((newFontSizeSelectorShow: boolean) => {
|
||||
if (newFontSizeSelectorShow) {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection()
|
||||
|
||||
if ($isRangeSelection(selection))
|
||||
$setSelection(selection.clone())
|
||||
})
|
||||
}
|
||||
setFontSizeSelectorShow(newFontSizeSelectorShow)
|
||||
}, [editor])
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerUpdateListener(() => {
|
||||
editor.getEditorState().read(() => {
|
||||
const selection = $getSelection()
|
||||
|
||||
if ($isRangeSelection(selection)) {
|
||||
const fontSize = $getSelectionStyleValueForProperty(selection, 'font-size', '12px')
|
||||
setFontSize(fontSize)
|
||||
}
|
||||
})
|
||||
}),
|
||||
editor.registerCommand(
|
||||
SELECTION_CHANGE_COMMAND,
|
||||
() => {
|
||||
const selection = $getSelection()
|
||||
|
||||
if ($isRangeSelection(selection)) {
|
||||
const fontSize = $getSelectionStyleValueForProperty(selection, 'font-size', '12px')
|
||||
setFontSize(fontSize)
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
COMMAND_PRIORITY_CRITICAL,
|
||||
),
|
||||
)
|
||||
}, [editor])
|
||||
|
||||
return {
|
||||
fontSize,
|
||||
handleFontSize,
|
||||
fontSizeSelectorShow,
|
||||
handleOpenFontSizeSelector,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { memo } from 'react'
|
||||
import Divider from './divider'
|
||||
import type { ColorPickerProps } from './color-picker'
|
||||
import ColorPicker from './color-picker'
|
||||
import FontSizeSelector from './font-size-selector'
|
||||
import Command from './command'
|
||||
import type { OperatorProps } from './operator'
|
||||
import Operator from './operator'
|
||||
|
||||
type ToolbarProps = ColorPickerProps & OperatorProps
|
||||
const Toolbar = ({
|
||||
theme,
|
||||
onThemeChange,
|
||||
onCopy,
|
||||
onDuplicate,
|
||||
onDelete,
|
||||
showAuthor,
|
||||
onShowAuthorChange,
|
||||
}: ToolbarProps) => {
|
||||
return (
|
||||
<div className='inline-flex items-center p-0.5 bg-white rounded-lg border-[0.5px] border-black/5 shadow-sm'>
|
||||
<ColorPicker
|
||||
theme={theme}
|
||||
onThemeChange={onThemeChange}
|
||||
/>
|
||||
<Divider />
|
||||
<FontSizeSelector />
|
||||
<Divider />
|
||||
<div className='flex items-center space-x-0.5'>
|
||||
<Command type='bold' />
|
||||
<Command type='italic' />
|
||||
<Command type='strikethrough' />
|
||||
<Command type='link' />
|
||||
<Command type='bullet' />
|
||||
</div>
|
||||
<Divider />
|
||||
<Operator
|
||||
onCopy={onCopy}
|
||||
onDuplicate={onDuplicate}
|
||||
onDelete={onDelete}
|
||||
showAuthor={showAuthor}
|
||||
onShowAuthorChange={onShowAuthorChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(Toolbar)
|
||||
@@ -0,0 +1,107 @@
|
||||
import {
|
||||
memo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from 'classnames'
|
||||
import ShortcutsName from '@/app/components/workflow/shortcuts-name'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
|
||||
export type OperatorProps = {
|
||||
onCopy: () => void
|
||||
onDuplicate: () => void
|
||||
onDelete: () => void
|
||||
showAuthor: boolean
|
||||
onShowAuthorChange: (showAuthor: boolean) => void
|
||||
}
|
||||
const Operator = ({
|
||||
onCopy,
|
||||
onDelete,
|
||||
onDuplicate,
|
||||
showAuthor,
|
||||
onShowAuthorChange,
|
||||
}: OperatorProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-end'
|
||||
offset={4}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center w-8 h-8 cursor-pointer rounded-lg hover:bg-black/5',
|
||||
open && 'bg-black/5',
|
||||
)}
|
||||
>
|
||||
<DotsHorizontal className='w-4 h-4 text-gray-500' />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent>
|
||||
<div className='min-w-[192px] bg-white rounded-md border-[0.5px] border-gray-200 shadow-xl'>
|
||||
<div className='p-1'>
|
||||
<div
|
||||
className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-gray-700 hover:bg-black/5'
|
||||
onClick={() => {
|
||||
onCopy()
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
{t('workflow.common.copy')}
|
||||
<ShortcutsName keys={['ctrl', 'c']} />
|
||||
</div>
|
||||
<div
|
||||
className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-gray-700 hover:bg-black/5'
|
||||
onClick={() => {
|
||||
onDuplicate()
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
{t('workflow.common.duplicate')}
|
||||
<ShortcutsName keys={['ctrl', 'd']} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[1px] bg-gray-100'></div>
|
||||
<div className='p-1'>
|
||||
<div
|
||||
className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-gray-700 hover:bg-black/5'
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div>{t('workflow.nodes.note.editor.showAuthor')}</div>
|
||||
<Switch
|
||||
size='l'
|
||||
defaultValue={showAuthor}
|
||||
onChange={onShowAuthorChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[1px] bg-gray-100'></div>
|
||||
<div className='p-1'>
|
||||
<div
|
||||
className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-gray-700 hover:text-[#D92D20] hover:bg-[#FEF3F2]'
|
||||
onClick={() => {
|
||||
onDelete()
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
{t('common.operation.delete')}
|
||||
<ShortcutsName keys={['del']} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(Operator)
|
||||
21
web/app/components/workflow/note-node/note-editor/utils.ts
Normal file
21
web/app/components/workflow/note-node/note-editor/utils.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { $isAtNodeEnd } from '@lexical/selection'
|
||||
import type { ElementNode, RangeSelection, TextNode } from 'lexical'
|
||||
|
||||
export function getSelectedNode(
|
||||
selection: RangeSelection,
|
||||
): TextNode | ElementNode {
|
||||
const anchor = selection.anchor
|
||||
const focus = selection.focus
|
||||
const anchorNode = selection.anchor.getNode()
|
||||
const focusNode = selection.focus.getNode()
|
||||
if (anchorNode === focusNode)
|
||||
return anchorNode
|
||||
|
||||
const isBackward = selection.isBackward()
|
||||
if (isBackward)
|
||||
return $isAtNodeEnd(focus) ? anchorNode : focusNode
|
||||
else
|
||||
return $isAtNodeEnd(anchor) ? anchorNode : focusNode
|
||||
}
|
||||
|
||||
export const urlRegExp = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/
|
||||
Reference in New Issue
Block a user