feat: add error message
Joel
7 months ago
parent
da560e5950
commit
3160e5e562
@ -0,0 +1,40 @@
|
||||
import { type FC, useEffect } from 'react'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { useSelectOrDelete } from '../../hooks'
|
||||
import { DELETE_ERROR_MESSAGE_COMMAND, ErrorMessageBlockNode } from '.'
|
||||
import cn from '@/utils/classnames'
|
||||
import { Variable02 } from '../../../icons/src/vender/solid/development'
|
||||
|
||||
type Props = {
|
||||
nodeKey: string
|
||||
}
|
||||
|
||||
const ErrorMessageBlockComponent: FC<Props> = ({
|
||||
nodeKey,
|
||||
}) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_ERROR_MESSAGE_COMMAND)
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([ErrorMessageBlockNode]))
|
||||
throw new Error('WorkflowVariableBlockPlugin: WorkflowVariableBlock not registered on editor')
|
||||
}, [editor])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px] text-util-colors-orange-dark-orange-dark-600 hover:border-state-accent-solid hover:bg-state-accent-hover',
|
||||
isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
ref={ref}
|
||||
>
|
||||
<Variable02 className='mr-0.5 h-[14px] w-[14px]' />
|
||||
<div className='text-xs font-medium'>error_message</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ErrorMessageBlockComponent
|
||||
@ -0,0 +1,61 @@
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
} from 'react'
|
||||
import { $applyNodeReplacement } from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { decoratorTransform } from '../../utils'
|
||||
import { ERROR_MESSAGE_PLACEHOLDER_TEXT } from '../../constants'
|
||||
import type { ErrorMessageBlockType } from '../../types'
|
||||
import {
|
||||
$createErrorMessageBlockNode,
|
||||
ErrorMessageBlockNode,
|
||||
} from './node'
|
||||
import { CustomTextNode } from '../custom-text/node'
|
||||
|
||||
const REGEX = new RegExp(ERROR_MESSAGE_PLACEHOLDER_TEXT)
|
||||
|
||||
const ErrorMessageBlockReplacementBlock = ({
|
||||
onInsert,
|
||||
}: ErrorMessageBlockType) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([ErrorMessageBlockNode]))
|
||||
throw new Error('ErrorMessageBlockNodePlugin: ErrorMessageBlockNode not registered on editor')
|
||||
}, [editor])
|
||||
|
||||
const createErrorMessageBlockNode = useCallback((): ErrorMessageBlockNode => {
|
||||
if (onInsert)
|
||||
onInsert()
|
||||
return $applyNodeReplacement($createErrorMessageBlockNode())
|
||||
}, [onInsert])
|
||||
|
||||
const getMatch = useCallback((text: string) => {
|
||||
const matchArr = REGEX.exec(text)
|
||||
|
||||
if (matchArr === null)
|
||||
return null
|
||||
|
||||
const startOffset = matchArr.index
|
||||
const endOffset = startOffset + ERROR_MESSAGE_PLACEHOLDER_TEXT.length
|
||||
return {
|
||||
end: endOffset,
|
||||
start: startOffset,
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
REGEX.lastIndex = 0
|
||||
return mergeRegister(
|
||||
editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createErrorMessageBlockNode)),
|
||||
)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default memo(ErrorMessageBlockReplacementBlock)
|
||||
@ -0,0 +1,65 @@
|
||||
import {
|
||||
memo,
|
||||
useEffect,
|
||||
} from 'react'
|
||||
import {
|
||||
$insertNodes,
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
createCommand,
|
||||
} from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import type { ErrorMessageBlockType } from '../../types'
|
||||
import {
|
||||
$createErrorMessageBlockNode,
|
||||
ErrorMessageBlockNode,
|
||||
} from './node'
|
||||
|
||||
export const INSERT_ERROR_MESSAGE_BLOCK_COMMAND = createCommand('INSERT_ERROR_MESSAGE_BLOCK_COMMAND')
|
||||
export const DELETE_ERROR_MESSAGE_COMMAND = createCommand('DELETE_ERROR_MESSAGE_COMMAND')
|
||||
|
||||
const ErrorMessageBlock = memo(({
|
||||
onInsert,
|
||||
onDelete,
|
||||
}: ErrorMessageBlockType) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([ErrorMessageBlockNode]))
|
||||
throw new Error('ERROR_MESSAGEBlockPlugin: ERROR_MESSAGEBlock not registered on editor')
|
||||
|
||||
return mergeRegister(
|
||||
editor.registerCommand(
|
||||
INSERT_ERROR_MESSAGE_BLOCK_COMMAND,
|
||||
() => {
|
||||
const Node = $createErrorMessageBlockNode()
|
||||
|
||||
$insertNodes([Node])
|
||||
|
||||
if (onInsert)
|
||||
onInsert()
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
editor.registerCommand(
|
||||
DELETE_ERROR_MESSAGE_COMMAND,
|
||||
() => {
|
||||
if (onDelete)
|
||||
onDelete()
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
)
|
||||
}, [editor, onDelete, onInsert])
|
||||
|
||||
return null
|
||||
})
|
||||
ErrorMessageBlock.displayName = 'ErrorMessageBlock'
|
||||
|
||||
export { ErrorMessageBlock }
|
||||
export { ErrorMessageBlockNode } from './node'
|
||||
export { default as ErrorMessageBlockReplacementBlock } from './error-message-block-replacement-block'
|
||||
@ -0,0 +1,67 @@
|
||||
import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
|
||||
import { DecoratorNode } from 'lexical'
|
||||
import ErrorMessageBlockComponent from './component'
|
||||
|
||||
export type SerializedNode = SerializedLexicalNode
|
||||
|
||||
export class ErrorMessageBlockNode extends DecoratorNode<React.JSX.Element> {
|
||||
static getType(): string {
|
||||
return 'error-message-block'
|
||||
}
|
||||
|
||||
static clone(node: ErrorMessageBlockNode): ErrorMessageBlockNode {
|
||||
return new ErrorMessageBlockNode(node.getKey())
|
||||
}
|
||||
|
||||
isInline(): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
constructor(key?: NodeKey) {
|
||||
super(key)
|
||||
}
|
||||
|
||||
createDOM(): HTMLElement {
|
||||
const div = document.createElement('div')
|
||||
div.classList.add('inline-flex', 'items-center', 'align-middle')
|
||||
return div
|
||||
}
|
||||
|
||||
updateDOM(): false {
|
||||
return false
|
||||
}
|
||||
|
||||
decorate(): React.JSX.Element {
|
||||
return (
|
||||
<ErrorMessageBlockComponent
|
||||
nodeKey={this.getKey()}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
static importJSON(): ErrorMessageBlockNode {
|
||||
const node = $createErrorMessageBlockNode()
|
||||
|
||||
return node
|
||||
}
|
||||
|
||||
exportJSON(): SerializedNode {
|
||||
return {
|
||||
type: 'error-message-block',
|
||||
version: 1,
|
||||
}
|
||||
}
|
||||
|
||||
getTextContent(): string {
|
||||
return '{{#error_message#}}'
|
||||
}
|
||||
}
|
||||
export function $createErrorMessageBlockNode(): ErrorMessageBlockNode {
|
||||
return new ErrorMessageBlockNode()
|
||||
}
|
||||
|
||||
export function $isErrorMessageBlockNode(
|
||||
node: ErrorMessageBlockNode | LexicalNode | null | undefined,
|
||||
): boolean {
|
||||
return node instanceof ErrorMessageBlockNode
|
||||
}
|
||||
Loading…
Reference in New Issue