feat: advanced prompt (#1330)
Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: Gillian97 <jinling.sunshine@gmail.com>
This commit is contained in:
zxhlyh
@@ -0,0 +1,218 @@
|
||||
import type { FC } from 'react'
|
||||
import { useCallback } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { TextNode } from 'lexical'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import {
|
||||
LexicalTypeaheadMenuPlugin,
|
||||
MenuOption,
|
||||
} from '@lexical/react/LexicalTypeaheadMenuPlugin'
|
||||
import { useBasicTypeaheadTriggerMatch } from '../hooks'
|
||||
import { INSERT_CONTEXT_BLOCK_COMMAND } from './context-block'
|
||||
import { INSERT_VARIABLE_BLOCK_COMMAND } from './variable-block'
|
||||
import { INSERT_HISTORY_BLOCK_COMMAND } from './history-block'
|
||||
import { INSERT_QUERY_BLOCK_COMMAND } from './query-block'
|
||||
import { File05 } from '@/app/components/base/icons/src/vender/solid/files'
|
||||
import { Variable } from '@/app/components/base/icons/src/vender/line/development'
|
||||
import { MessageClockCircle } from '@/app/components/base/icons/src/vender/solid/general'
|
||||
import { UserEdit02 } from '@/app/components/base/icons/src/vender/solid/users'
|
||||
|
||||
class ComponentPickerOption extends MenuOption {
|
||||
title: string
|
||||
icon?: JSX.Element
|
||||
keywords: Array<string>
|
||||
keyboardShortcut?: string
|
||||
desc: string
|
||||
onSelect: (queryString: string) => void
|
||||
disabled?: boolean
|
||||
|
||||
constructor(
|
||||
title: string,
|
||||
options: {
|
||||
icon?: JSX.Element
|
||||
keywords?: Array<string>
|
||||
keyboardShortcut?: string
|
||||
desc: string
|
||||
onSelect: (queryString: string) => void
|
||||
disabled?: boolean
|
||||
},
|
||||
) {
|
||||
super(title)
|
||||
this.title = title
|
||||
this.keywords = options.keywords || []
|
||||
this.icon = options.icon
|
||||
this.keyboardShortcut = options.keyboardShortcut
|
||||
this.desc = options.desc
|
||||
this.onSelect = options.onSelect.bind(this)
|
||||
this.disabled = options.disabled
|
||||
}
|
||||
}
|
||||
|
||||
type ComponentPickerMenuItemProps = {
|
||||
isSelected: boolean
|
||||
onClick: () => void
|
||||
onMouseEnter: () => void
|
||||
option: ComponentPickerOption
|
||||
}
|
||||
const ComponentPickerMenuItem: FC<ComponentPickerMenuItemProps> = ({
|
||||
isSelected,
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
option,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div
|
||||
key={option.key}
|
||||
className={`
|
||||
flex items-center px-3 py-1.5 rounded-lg
|
||||
${isSelected && !option.disabled && '!bg-gray-50'}
|
||||
${option.disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-gray-50 cursor-pointer'}
|
||||
`}
|
||||
tabIndex={-1}
|
||||
ref={option.setRefElement}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onClick={onClick}>
|
||||
<div className='flex items-center justify-center mr-2 w-8 h-8 rounded-lg border border-gray-100'>
|
||||
{option.icon}
|
||||
</div>
|
||||
<div className='grow'>
|
||||
<div className='flex items-center justify-between h-5 text-sm text-gray-900'>
|
||||
{option.title}
|
||||
<span className='text-xs text-gray-400'>{option.disabled && t('common.promptEditor.existed')}</span>
|
||||
</div>
|
||||
<div className='text-xs text-gray-500'>{option.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
type ComponentPickerProps = {
|
||||
contextDisabled?: boolean
|
||||
historyDisabled?: boolean
|
||||
queryDisabled?: boolean
|
||||
historyShow?: boolean
|
||||
queryShow?: boolean
|
||||
}
|
||||
const ComponentPicker: FC<ComponentPickerProps> = ({
|
||||
contextDisabled,
|
||||
historyDisabled,
|
||||
queryDisabled,
|
||||
historyShow,
|
||||
queryShow,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [editor] = useLexicalComposerContext()
|
||||
const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
})
|
||||
|
||||
const options = [
|
||||
new ComponentPickerOption(t('common.promptEditor.context.item.title'), {
|
||||
desc: t('common.promptEditor.context.item.desc'),
|
||||
icon: <File05 className='w-4 h-4 text-[#6938EF]' />,
|
||||
onSelect: () => {
|
||||
if (contextDisabled)
|
||||
return
|
||||
editor.dispatchCommand(INSERT_CONTEXT_BLOCK_COMMAND, undefined)
|
||||
},
|
||||
disabled: contextDisabled,
|
||||
}),
|
||||
new ComponentPickerOption(t('common.promptEditor.variable.item.title'), {
|
||||
desc: t('common.promptEditor.variable.item.desc'),
|
||||
icon: <Variable className='w-4 h-4 text-[#2970FF]' />,
|
||||
onSelect: () => {
|
||||
editor.dispatchCommand(INSERT_VARIABLE_BLOCK_COMMAND, undefined)
|
||||
},
|
||||
}),
|
||||
...historyShow
|
||||
? [
|
||||
new ComponentPickerOption(t('common.promptEditor.history.item.title'), {
|
||||
desc: t('common.promptEditor.history.item.desc'),
|
||||
icon: <MessageClockCircle className='w-4 h-4 text-[#DD2590]' />,
|
||||
onSelect: () => {
|
||||
if (historyDisabled)
|
||||
return
|
||||
editor.dispatchCommand(INSERT_HISTORY_BLOCK_COMMAND, undefined)
|
||||
},
|
||||
disabled: historyDisabled,
|
||||
}),
|
||||
]
|
||||
: [],
|
||||
...queryShow
|
||||
? [
|
||||
new ComponentPickerOption(t('common.promptEditor.query.item.title'), {
|
||||
desc: t('common.promptEditor.query.item.desc'),
|
||||
icon: <UserEdit02 className='w-4 h-4 text-[#FD853A]' />,
|
||||
onSelect: () => {
|
||||
if (queryDisabled)
|
||||
return
|
||||
editor.dispatchCommand(INSERT_QUERY_BLOCK_COMMAND, undefined)
|
||||
},
|
||||
disabled: queryDisabled,
|
||||
}),
|
||||
]
|
||||
: [],
|
||||
]
|
||||
|
||||
const onSelectOption = useCallback(
|
||||
(
|
||||
selectedOption: ComponentPickerOption,
|
||||
nodeToRemove: TextNode | null,
|
||||
closeMenu: () => void,
|
||||
matchingString: string,
|
||||
) => {
|
||||
editor.update(() => {
|
||||
if (nodeToRemove)
|
||||
nodeToRemove.remove()
|
||||
|
||||
selectedOption.onSelect(matchingString)
|
||||
closeMenu()
|
||||
})
|
||||
},
|
||||
[editor],
|
||||
)
|
||||
|
||||
return (
|
||||
<LexicalTypeaheadMenuPlugin
|
||||
options={options}
|
||||
onQueryChange={() => {}}
|
||||
onSelectOption={onSelectOption}
|
||||
menuRenderFn={(
|
||||
anchorElementRef,
|
||||
{ selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
|
||||
) =>
|
||||
(anchorElementRef.current && options.length)
|
||||
? ReactDOM.createPortal(
|
||||
<div className='mt-[25px] p-1 w-[400px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg'>
|
||||
{options.map((option, i: number) => (
|
||||
<ComponentPickerMenuItem
|
||||
isSelected={selectedIndex === i}
|
||||
onClick={() => {
|
||||
if (option.disabled)
|
||||
return
|
||||
setHighlightedIndex(i)
|
||||
selectOptionAndCleanUp(option)
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
if (option.disabled)
|
||||
return
|
||||
setHighlightedIndex(i)
|
||||
}}
|
||||
key={option.key}
|
||||
option={option}
|
||||
/>
|
||||
))}
|
||||
</div>,
|
||||
anchorElementRef.current,
|
||||
)
|
||||
: null}
|
||||
triggerFn={checkForTriggerMatch}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ComponentPicker
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { FC } from 'react'
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
} from 'react'
|
||||
import { $applyNodeReplacement } from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { decoratorTransform } from '../utils'
|
||||
import { CONTEXT_PLACEHOLDER_TEXT } from '../constants'
|
||||
import {
|
||||
$createContextBlockNode,
|
||||
ContextBlockNode,
|
||||
} from './context-block/node'
|
||||
import type { ContextBlockProps } from './context-block/index'
|
||||
import { CustomTextNode } from './custom-text/node'
|
||||
|
||||
const REGEX = new RegExp(CONTEXT_PLACEHOLDER_TEXT)
|
||||
|
||||
const ContextBlockReplacementBlock: FC<ContextBlockProps> = ({
|
||||
datasets,
|
||||
onAddContext,
|
||||
onInsert,
|
||||
}) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([ContextBlockNode]))
|
||||
throw new Error('ContextBlockNodePlugin: ContextBlockNode not registered on editor')
|
||||
}, [editor])
|
||||
|
||||
const createContextBlockNode = useCallback((): ContextBlockNode => {
|
||||
if (onInsert)
|
||||
onInsert()
|
||||
return $applyNodeReplacement($createContextBlockNode(datasets, onAddContext))
|
||||
}, [datasets, onAddContext, onInsert])
|
||||
|
||||
const getMatch = useCallback((text: string) => {
|
||||
const matchArr = REGEX.exec(text)
|
||||
|
||||
if (matchArr === null)
|
||||
return null
|
||||
|
||||
const startOffset = matchArr.index
|
||||
const endOffset = startOffset + CONTEXT_PLACEHOLDER_TEXT.length
|
||||
return {
|
||||
end: endOffset,
|
||||
start: startOffset,
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createContextBlockNode)),
|
||||
)
|
||||
}, [])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default ContextBlockReplacementBlock
|
||||
@@ -0,0 +1,97 @@
|
||||
import type { FC } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useSelectOrDelete, useTrigger } from '../../hooks'
|
||||
import { UPDATE_DATASETS_EVENT_EMITTER } from '../../constants'
|
||||
import type { Dataset } from './index'
|
||||
import { DELETE_CONTEXT_BLOCK_COMMAND } from './index'
|
||||
import { File05, Folder } from '@/app/components/base/icons/src/vender/solid/files'
|
||||
import { Plus } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
|
||||
type ContextBlockComponentProps = {
|
||||
nodeKey: string
|
||||
datasets?: Dataset[]
|
||||
onAddContext: () => void
|
||||
}
|
||||
|
||||
const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
|
||||
nodeKey,
|
||||
datasets = [],
|
||||
onAddContext,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_CONTEXT_BLOCK_COMMAND)
|
||||
const [triggerRef, open, setOpen] = useTrigger()
|
||||
const { eventEmitter } = useEventEmitterContextContext()
|
||||
const [localDatasets, setLocalDatasets] = useState<Dataset[]>(datasets)
|
||||
|
||||
eventEmitter?.useSubscription((v: any) => {
|
||||
if (v?.type === UPDATE_DATASETS_EVENT_EMITTER)
|
||||
setLocalDatasets(v.payload)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={`
|
||||
group inline-flex items-center pl-1 pr-0.5 h-6 border border-transparent bg-[#F4F3FF] text-[#6938EF] rounded-[5px] hover:bg-[#EBE9FE]
|
||||
${open ? 'bg-[#EBE9FE]' : 'bg-[#F4F3FF]'}
|
||||
${isSelected && '!border-[#9B8AFB]'}
|
||||
`} ref={ref}>
|
||||
<File05 className='mr-1 w-[14px] h-[14px]' />
|
||||
<div className='mr-1 text-xs font-medium'>{t('common.promptEditor.context.item.title')}</div>
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-end'
|
||||
offset={{
|
||||
mainAxis: 3,
|
||||
alignmentAxis: -147,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger ref={triggerRef}>
|
||||
<div className={`
|
||||
flex items-center justify-center w-[18px] h-[18px] text-[11px] font-semibold rounded cursor-pointer
|
||||
${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
|
||||
`}>{localDatasets.length}</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent style={{ zIndex: 100 }}>
|
||||
<div className='w-[360px] bg-white rounded-xl shadow-lg'>
|
||||
<div className='p-4'>
|
||||
<div className='mb-2 text-xs font-medium text-gray-500'>
|
||||
{t('common.promptEditor.context.modal.title', { num: localDatasets.length })}
|
||||
</div>
|
||||
<div className='max-h-[270px] overflow-y-auto'>
|
||||
{
|
||||
localDatasets.map(dataset => (
|
||||
<div key={dataset.id} className='flex items-center h-8'>
|
||||
<div className='flex items-center justify-center shrink-0 mr-2 w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#EAECF5]'>
|
||||
<Folder className='w-4 h-4 text-[#444CE7]' />
|
||||
</div>
|
||||
<div className='text-sm text-gray-800 truncate' title=''>{dataset.name}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className='flex items-center h-8 text-[#155EEF] cursor-pointer' onClick={onAddContext}>
|
||||
<div className='shrink-0 flex justify-center items-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-gray-100'>
|
||||
<Plus className='w-[14px] h-[14px]' />
|
||||
</div>
|
||||
<div className='text-[13px] font-medium' title=''>{t('common.promptEditor.context.modal.add')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4 py-3 text-xs text-gray-500 bg-gray-50 border-t-[0.5px] border-gray-50 rounded-b-xl'>
|
||||
{t('common.promptEditor.context.modal.footer')}
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContextBlockComponent
|
||||
@@ -0,0 +1,73 @@
|
||||
import type { FC } from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import {
|
||||
$insertNodes,
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
createCommand,
|
||||
} from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import {
|
||||
$createContextBlockNode,
|
||||
ContextBlockNode,
|
||||
} from './node'
|
||||
|
||||
export const INSERT_CONTEXT_BLOCK_COMMAND = createCommand('INSERT_CONTEXT_BLOCK_COMMAND')
|
||||
export const DELETE_CONTEXT_BLOCK_COMMAND = createCommand('DELETE_CONTEXT_BLOCK_COMMAND')
|
||||
|
||||
export type Dataset = {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
}
|
||||
|
||||
export type ContextBlockProps = {
|
||||
datasets: Dataset[]
|
||||
onAddContext: () => void
|
||||
onInsert?: () => void
|
||||
onDelete?: () => void
|
||||
}
|
||||
const ContextBlock: FC<ContextBlockProps> = ({
|
||||
datasets,
|
||||
onAddContext,
|
||||
onInsert,
|
||||
onDelete,
|
||||
}) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([ContextBlockNode]))
|
||||
throw new Error('ContextBlockPlugin: ContextBlock not registered on editor')
|
||||
|
||||
return mergeRegister(
|
||||
editor.registerCommand(
|
||||
INSERT_CONTEXT_BLOCK_COMMAND,
|
||||
() => {
|
||||
const contextBlockNode = $createContextBlockNode(datasets, onAddContext)
|
||||
|
||||
$insertNodes([contextBlockNode])
|
||||
|
||||
if (onInsert)
|
||||
onInsert()
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
editor.registerCommand(
|
||||
DELETE_CONTEXT_BLOCK_COMMAND,
|
||||
() => {
|
||||
if (onDelete)
|
||||
onDelete()
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
)
|
||||
}, [editor, datasets, onAddContext, onInsert, onDelete])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default ContextBlock
|
||||
@@ -0,0 +1,90 @@
|
||||
import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
|
||||
import { DecoratorNode } from 'lexical'
|
||||
import ContextBlockComponent from './component'
|
||||
import type { Dataset } from './index'
|
||||
|
||||
export type SerializedNode = SerializedLexicalNode & { datasets: Dataset[]; onAddContext: () => void }
|
||||
|
||||
export class ContextBlockNode extends DecoratorNode<JSX.Element> {
|
||||
__datasets: Dataset[]
|
||||
__onAddContext: () => void
|
||||
|
||||
static getType(): string {
|
||||
return 'context-block'
|
||||
}
|
||||
|
||||
static clone(node: ContextBlockNode): ContextBlockNode {
|
||||
return new ContextBlockNode(node.__datasets, node.__onAddContext)
|
||||
}
|
||||
|
||||
isInline(): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
constructor(datasets: Dataset[], onAddContext: () => void, key?: NodeKey) {
|
||||
super(key)
|
||||
|
||||
this.__datasets = datasets
|
||||
this.__onAddContext = onAddContext
|
||||
}
|
||||
|
||||
createDOM(): HTMLElement {
|
||||
const div = document.createElement('div')
|
||||
div.classList.add('inline-flex', 'items-center', 'align-middle')
|
||||
return div
|
||||
}
|
||||
|
||||
updateDOM(): false {
|
||||
return false
|
||||
}
|
||||
|
||||
decorate(): JSX.Element {
|
||||
return (
|
||||
<ContextBlockComponent
|
||||
nodeKey={this.getKey()}
|
||||
datasets={this.getDatasets()}
|
||||
onAddContext={this.getOnAddContext()}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
getDatasets(): Dataset[] {
|
||||
const self = this.getLatest()
|
||||
|
||||
return self.__datasets
|
||||
}
|
||||
|
||||
getOnAddContext(): () => void {
|
||||
const self = this.getLatest()
|
||||
|
||||
return self.__onAddContext
|
||||
}
|
||||
|
||||
static importJSON(serializedNode: SerializedNode): ContextBlockNode {
|
||||
const node = $createContextBlockNode(serializedNode.datasets, serializedNode.onAddContext)
|
||||
|
||||
return node
|
||||
}
|
||||
|
||||
exportJSON(): SerializedNode {
|
||||
return {
|
||||
type: 'context-block',
|
||||
version: 1,
|
||||
datasets: this.getDatasets(),
|
||||
onAddContext: this.getOnAddContext(),
|
||||
}
|
||||
}
|
||||
|
||||
getTextContent(): string {
|
||||
return '{{#context#}}'
|
||||
}
|
||||
}
|
||||
export function $createContextBlockNode(datasets: Dataset[], onAddContext: () => void): ContextBlockNode {
|
||||
return new ContextBlockNode(datasets, onAddContext)
|
||||
}
|
||||
|
||||
export function $isContextBlockNode(
|
||||
node: ContextBlockNode | LexicalNode | null | undefined,
|
||||
): boolean {
|
||||
return node instanceof ContextBlockNode
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import type { EditorConfig, NodeKey, SerializedTextNode } from 'lexical'
|
||||
import { $createTextNode, TextNode } from 'lexical'
|
||||
|
||||
export class CustomTextNode extends TextNode {
|
||||
static getType() {
|
||||
return 'custom-text'
|
||||
}
|
||||
|
||||
static clone(node: CustomTextNode) {
|
||||
return new CustomTextNode(node.__text, node.__key)
|
||||
}
|
||||
|
||||
constructor(text: string, key?: NodeKey) {
|
||||
super(text, key)
|
||||
}
|
||||
|
||||
createDOM(config: EditorConfig) {
|
||||
const dom = super.createDOM(config)
|
||||
dom.classList.add('align-middle')
|
||||
return dom
|
||||
}
|
||||
|
||||
static importJSON(serializedNode: SerializedTextNode): TextNode {
|
||||
const node = $createTextNode(serializedNode.text)
|
||||
node.setFormat(serializedNode.format)
|
||||
node.setDetail(serializedNode.detail)
|
||||
node.setMode(serializedNode.mode)
|
||||
node.setStyle(serializedNode.style)
|
||||
return node
|
||||
}
|
||||
|
||||
exportJSON(): SerializedTextNode {
|
||||
return {
|
||||
detail: this.getDetail(),
|
||||
format: this.getFormat(),
|
||||
mode: this.getMode(),
|
||||
style: this.getStyle(),
|
||||
text: this.getTextContent(),
|
||||
type: 'custom-text',
|
||||
version: 1,
|
||||
}
|
||||
}
|
||||
|
||||
isSimpleText() {
|
||||
return (
|
||||
(this.__type === 'text' || this.__type === 'custom-text') && this.__mode === 0)
|
||||
}
|
||||
}
|
||||
|
||||
export function $createCustomTextNode(text: string): CustomTextNode {
|
||||
return new CustomTextNode(text)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { FC } from 'react'
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
} from 'react'
|
||||
import { $applyNodeReplacement } from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { decoratorTransform } from '../utils'
|
||||
import { HISTORY_PLACEHOLDER_TEXT } from '../constants'
|
||||
import {
|
||||
$createHistoryBlockNode,
|
||||
HistoryBlockNode,
|
||||
} from './history-block/node'
|
||||
import type { HistoryBlockProps } from './history-block/index'
|
||||
import { CustomTextNode } from './custom-text/node'
|
||||
|
||||
const REGEX = new RegExp(HISTORY_PLACEHOLDER_TEXT)
|
||||
|
||||
const HistoryBlockReplacementBlock: FC<HistoryBlockProps> = ({
|
||||
roleName,
|
||||
onEditRole,
|
||||
onInsert,
|
||||
}) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([HistoryBlockNode]))
|
||||
throw new Error('HistoryBlockNodePlugin: HistoryBlockNode not registered on editor')
|
||||
}, [editor])
|
||||
|
||||
const createHistoryBlockNode = useCallback((): HistoryBlockNode => {
|
||||
if (onInsert)
|
||||
onInsert()
|
||||
return $applyNodeReplacement($createHistoryBlockNode(roleName, onEditRole))
|
||||
}, [roleName, onEditRole, onInsert])
|
||||
|
||||
const getMatch = useCallback((text: string) => {
|
||||
const matchArr = REGEX.exec(text)
|
||||
|
||||
if (matchArr === null)
|
||||
return null
|
||||
|
||||
const startOffset = matchArr.index
|
||||
const endOffset = startOffset + HISTORY_PLACEHOLDER_TEXT.length
|
||||
return {
|
||||
end: endOffset,
|
||||
start: startOffset,
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createHistoryBlockNode)),
|
||||
)
|
||||
}, [])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default HistoryBlockReplacementBlock
|
||||
@@ -0,0 +1,90 @@
|
||||
import type { FC } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useSelectOrDelete, useTrigger } from '../../hooks'
|
||||
import { UPDATE_HISTORY_EVENT_EMITTER } from '../../constants'
|
||||
import type { RoleName } from './index'
|
||||
import { DELETE_HISTORY_BLOCK_COMMAND } from './index'
|
||||
import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import { MessageClockCircle } from '@/app/components/base/icons/src/vender/solid/general'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
|
||||
type HistoryBlockComponentProps = {
|
||||
nodeKey: string
|
||||
roleName?: RoleName
|
||||
onEditRole: () => void
|
||||
}
|
||||
|
||||
const HistoryBlockComponent: FC<HistoryBlockComponentProps> = ({
|
||||
nodeKey,
|
||||
roleName = { user: '', assistant: '' },
|
||||
onEditRole,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_HISTORY_BLOCK_COMMAND)
|
||||
const [triggerRef, open, setOpen] = useTrigger()
|
||||
const { eventEmitter } = useEventEmitterContextContext()
|
||||
const [localRoleName, setLocalRoleName] = useState<RoleName>(roleName)
|
||||
|
||||
eventEmitter?.useSubscription((v: any) => {
|
||||
if (v?.type === UPDATE_HISTORY_EVENT_EMITTER)
|
||||
setLocalRoleName(v.payload)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={`
|
||||
group inline-flex items-center pl-1 pr-0.5 h-6 border border-transparent text-[#DD2590] rounded-[5px] hover:bg-[#FCE7F6]
|
||||
${open ? 'bg-[#FCE7F6]' : 'bg-[#FDF2FA]'}
|
||||
${isSelected && '!border-[#F670C7]'}
|
||||
`} ref={ref}>
|
||||
<MessageClockCircle className='mr-1 w-[14px] h-[14px]' />
|
||||
<div className='mr-1 text-xs font-medium'>{t('common.promptEditor.history.item.title')}</div>
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='top-end'
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
alignmentAxis: -148,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger ref={triggerRef}>
|
||||
<div className={`
|
||||
flex items-center justify-center w-[18px] h-[18px] rounded cursor-pointer
|
||||
${open ? 'bg-[#DD2590] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
|
||||
`}>
|
||||
<DotsHorizontal className='w-3 h-3' />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent style={{ zIndex: 100 }}>
|
||||
<div className='w-[360px] bg-white rounded-xl shadow-lg'>
|
||||
<div className='p-4'>
|
||||
<div className='mb-2 text-xs font-medium text-gray-500'>{t('common.promptEditor.history.modal.title')}</div>
|
||||
<div className='flex items-center text-sm text-gray-700'>
|
||||
<div className='mr-1 w-20 text-xs font-semibold'>{localRoleName?.user}</div>
|
||||
{t('common.promptEditor.history.modal.user')}
|
||||
</div>
|
||||
<div className='flex items-center text-sm text-gray-700'>
|
||||
<div className='mr-1 w-20 text-xs font-semibold'>{localRoleName?.assistant}</div>
|
||||
{t('common.promptEditor.history.modal.assistant')}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className='px-4 py-3 text-xs text-[#155EEF] border-t border-black/5 rounded-b-xl cursor-pointer'
|
||||
onClick={onEditRole}
|
||||
>
|
||||
{t('common.promptEditor.history.modal.edit')}
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HistoryBlockComponent
|
||||
@@ -0,0 +1,73 @@
|
||||
import type { FC } from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import {
|
||||
$insertNodes,
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
createCommand,
|
||||
} from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import {
|
||||
$createHistoryBlockNode,
|
||||
HistoryBlockNode,
|
||||
} from './node'
|
||||
|
||||
export const INSERT_HISTORY_BLOCK_COMMAND = createCommand('INSERT_HISTORY_BLOCK_COMMAND')
|
||||
export const DELETE_HISTORY_BLOCK_COMMAND = createCommand('DELETE_HISTORY_BLOCK_COMMAND')
|
||||
|
||||
export type RoleName = {
|
||||
user: string
|
||||
assistant: string
|
||||
}
|
||||
|
||||
export type HistoryBlockProps = {
|
||||
roleName: RoleName
|
||||
onEditRole: () => void
|
||||
onInsert?: () => void
|
||||
onDelete?: () => void
|
||||
}
|
||||
|
||||
const HistoryBlock: FC<HistoryBlockProps> = ({
|
||||
roleName,
|
||||
onEditRole,
|
||||
onInsert,
|
||||
onDelete,
|
||||
}) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([HistoryBlockNode]))
|
||||
throw new Error('HistoryBlockPlugin: HistoryBlock not registered on editor')
|
||||
|
||||
return mergeRegister(
|
||||
editor.registerCommand(
|
||||
INSERT_HISTORY_BLOCK_COMMAND,
|
||||
() => {
|
||||
const historyBlockNode = $createHistoryBlockNode(roleName, onEditRole)
|
||||
|
||||
$insertNodes([historyBlockNode])
|
||||
|
||||
if (onInsert)
|
||||
onInsert()
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
editor.registerCommand(
|
||||
DELETE_HISTORY_BLOCK_COMMAND,
|
||||
() => {
|
||||
if (onDelete)
|
||||
onDelete()
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
)
|
||||
}, [editor, roleName, onEditRole, onInsert, onDelete])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default HistoryBlock
|
||||
@@ -0,0 +1,90 @@
|
||||
import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
|
||||
import { DecoratorNode } from 'lexical'
|
||||
import HistoryBlockComponent from './component'
|
||||
import type { RoleName } from './index'
|
||||
|
||||
export type SerializedNode = SerializedLexicalNode & { roleName: RoleName; onEditRole: () => void }
|
||||
|
||||
export class HistoryBlockNode extends DecoratorNode<JSX.Element> {
|
||||
__roleName: RoleName
|
||||
__onEditRole: () => void
|
||||
|
||||
static getType(): string {
|
||||
return 'history-block'
|
||||
}
|
||||
|
||||
static clone(node: HistoryBlockNode): HistoryBlockNode {
|
||||
return new HistoryBlockNode(node.__roleName, node.__onEditRole)
|
||||
}
|
||||
|
||||
constructor(roleName: RoleName, onEditRole: () => void, key?: NodeKey) {
|
||||
super(key)
|
||||
|
||||
this.__roleName = roleName
|
||||
this.__onEditRole = onEditRole
|
||||
}
|
||||
|
||||
isInline(): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
createDOM(): HTMLElement {
|
||||
const div = document.createElement('div')
|
||||
div.classList.add('inline-flex', 'items-center', 'align-middle')
|
||||
return div
|
||||
}
|
||||
|
||||
updateDOM(): false {
|
||||
return false
|
||||
}
|
||||
|
||||
decorate(): JSX.Element {
|
||||
return (
|
||||
<HistoryBlockComponent
|
||||
nodeKey={this.getKey()}
|
||||
roleName={this.getRoleName()}
|
||||
onEditRole={this.getOnEditRole()}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
getRoleName(): RoleName {
|
||||
const self = this.getLatest()
|
||||
|
||||
return self.__roleName
|
||||
}
|
||||
|
||||
getOnEditRole(): () => void {
|
||||
const self = this.getLatest()
|
||||
|
||||
return self.__onEditRole
|
||||
}
|
||||
|
||||
static importJSON(serializedNode: SerializedNode): HistoryBlockNode {
|
||||
const node = $createHistoryBlockNode(serializedNode.roleName, serializedNode.onEditRole)
|
||||
|
||||
return node
|
||||
}
|
||||
|
||||
exportJSON(): SerializedNode {
|
||||
return {
|
||||
type: 'history-block',
|
||||
version: 1,
|
||||
roleName: this.getRoleName(),
|
||||
onEditRole: this.getOnEditRole,
|
||||
}
|
||||
}
|
||||
|
||||
getTextContent(): string {
|
||||
return '{{#histories#}}'
|
||||
}
|
||||
}
|
||||
export function $createHistoryBlockNode(roleName: RoleName, onEditRole: () => void): HistoryBlockNode {
|
||||
return new HistoryBlockNode(roleName, onEditRole)
|
||||
}
|
||||
|
||||
export function $isHistoryBlockNode(
|
||||
node: HistoryBlockNode | LexicalNode | null | undefined,
|
||||
): node is HistoryBlockNode {
|
||||
return node instanceof HistoryBlockNode
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import type { FC } from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import {
|
||||
BLUR_COMMAND,
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
} from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
|
||||
type OnBlurBlockProps = {
|
||||
onBlur?: () => void
|
||||
}
|
||||
const OnBlurBlock: FC<OnBlurBlockProps> = ({
|
||||
onBlur,
|
||||
}) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerCommand(
|
||||
BLUR_COMMAND,
|
||||
() => {
|
||||
if (onBlur)
|
||||
onBlur()
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
)
|
||||
}, [editor, onBlur])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default OnBlurBlock
|
||||
@@ -0,0 +1,13 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const Placeholder = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='absolute top-0 left-0 h-full w-full text-sm text-gray-300 select-none pointer-events-none leading-6'>
|
||||
{t('common.promptEditor.placeholder')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Placeholder
|
||||
@@ -0,0 +1,59 @@
|
||||
import type { FC } from 'react'
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
} from 'react'
|
||||
import { $applyNodeReplacement } from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { decoratorTransform } from '../utils'
|
||||
import { QUERY_PLACEHOLDER_TEXT } from '../constants'
|
||||
import {
|
||||
$createQueryBlockNode,
|
||||
QueryBlockNode,
|
||||
} from './query-block/node'
|
||||
import type { QueryBlockProps } from './query-block/index'
|
||||
import { CustomTextNode } from './custom-text/node'
|
||||
|
||||
const REGEX = new RegExp(QUERY_PLACEHOLDER_TEXT)
|
||||
|
||||
const QueryBlockReplacementBlock: FC<QueryBlockProps> = ({
|
||||
onInsert,
|
||||
}) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([QueryBlockNode]))
|
||||
throw new Error('QueryBlockNodePlugin: QueryBlockNode not registered on editor')
|
||||
}, [editor])
|
||||
|
||||
const createQueryBlockNode = useCallback((): QueryBlockNode => {
|
||||
if (onInsert)
|
||||
onInsert()
|
||||
return $applyNodeReplacement($createQueryBlockNode())
|
||||
}, [onInsert])
|
||||
|
||||
const getMatch = useCallback((text: string) => {
|
||||
const matchArr = REGEX.exec(text)
|
||||
|
||||
if (matchArr === null)
|
||||
return null
|
||||
|
||||
const startOffset = matchArr.index
|
||||
const endOffset = startOffset + QUERY_PLACEHOLDER_TEXT.length
|
||||
return {
|
||||
end: endOffset,
|
||||
start: startOffset,
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createQueryBlockNode)),
|
||||
)
|
||||
}, [])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default QueryBlockReplacementBlock
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useSelectOrDelete } from '../../hooks'
|
||||
import { DELETE_QUERY_BLOCK_COMMAND } from './index'
|
||||
import { UserEdit02 } from '@/app/components/base/icons/src/vender/solid/users'
|
||||
|
||||
type QueryBlockComponentProps = {
|
||||
nodeKey: string
|
||||
}
|
||||
|
||||
const QueryBlockComponent: FC<QueryBlockComponentProps> = ({
|
||||
nodeKey,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_QUERY_BLOCK_COMMAND)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
inline-flex items-center pl-1 pr-0.5 h-6 bg-[#FFF6ED] border border-transparent rounded-[5px] hover:bg-[#FFEAD5]
|
||||
${isSelected && '!border-[#FD853A]'}
|
||||
`}
|
||||
ref={ref}
|
||||
>
|
||||
<UserEdit02 className='mr-1 w-[14px] h-[14px] text-[#FD853A]' />
|
||||
<div className='text-xs font-medium text-[#EC4A0A] opacity-60'>{'{{'}</div>
|
||||
<div className='text-xs font-medium text-[#EC4A0A]'>{t('common.promptEditor.query.item.title')}</div>
|
||||
<div className='text-xs font-medium text-[#EC4A0A] opacity-60'>{'}}'}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default QueryBlockComponent
|
||||
@@ -0,0 +1,62 @@
|
||||
import type { FC } from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import {
|
||||
$insertNodes,
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
createCommand,
|
||||
} from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import {
|
||||
$createQueryBlockNode,
|
||||
QueryBlockNode,
|
||||
} from './node'
|
||||
|
||||
export const INSERT_QUERY_BLOCK_COMMAND = createCommand('INSERT_QUERY_BLOCK_COMMAND')
|
||||
export const DELETE_QUERY_BLOCK_COMMAND = createCommand('DELETE_QUERY_BLOCK_COMMAND')
|
||||
|
||||
export type QueryBlockProps = {
|
||||
onInsert?: () => void
|
||||
onDelete?: () => void
|
||||
}
|
||||
const QueryBlock: FC<QueryBlockProps> = ({
|
||||
onInsert,
|
||||
onDelete,
|
||||
}) => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([QueryBlockNode]))
|
||||
throw new Error('QueryBlockPlugin: QueryBlock not registered on editor')
|
||||
|
||||
return mergeRegister(
|
||||
editor.registerCommand(
|
||||
INSERT_QUERY_BLOCK_COMMAND,
|
||||
() => {
|
||||
const contextBlockNode = $createQueryBlockNode()
|
||||
|
||||
$insertNodes([contextBlockNode])
|
||||
if (onInsert)
|
||||
onInsert()
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
editor.registerCommand(
|
||||
DELETE_QUERY_BLOCK_COMMAND,
|
||||
() => {
|
||||
if (onDelete)
|
||||
onDelete()
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
)
|
||||
}, [editor, onInsert, onDelete])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default QueryBlock
|
||||
@@ -0,0 +1,59 @@
|
||||
import type { LexicalNode, SerializedLexicalNode } from 'lexical'
|
||||
import { DecoratorNode } from 'lexical'
|
||||
import QueryBlockComponent from './component'
|
||||
|
||||
export type SerializedNode = SerializedLexicalNode
|
||||
|
||||
export class QueryBlockNode extends DecoratorNode<JSX.Element> {
|
||||
static getType(): string {
|
||||
return 'query-block'
|
||||
}
|
||||
|
||||
static clone(): QueryBlockNode {
|
||||
return new QueryBlockNode()
|
||||
}
|
||||
|
||||
isInline(): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
createDOM(): HTMLElement {
|
||||
const div = document.createElement('div')
|
||||
div.classList.add('inline-flex', 'items-center', 'align-middle')
|
||||
return div
|
||||
}
|
||||
|
||||
updateDOM(): false {
|
||||
return false
|
||||
}
|
||||
|
||||
decorate(): JSX.Element {
|
||||
return <QueryBlockComponent nodeKey={this.getKey()} />
|
||||
}
|
||||
|
||||
static importJSON(): QueryBlockNode {
|
||||
const node = $createQueryBlockNode()
|
||||
|
||||
return node
|
||||
}
|
||||
|
||||
exportJSON(): SerializedNode {
|
||||
return {
|
||||
type: 'query-block',
|
||||
version: 1,
|
||||
}
|
||||
}
|
||||
|
||||
getTextContent(): string {
|
||||
return '{{#query#}}'
|
||||
}
|
||||
}
|
||||
export function $createQueryBlockNode(): QueryBlockNode {
|
||||
return new QueryBlockNode()
|
||||
}
|
||||
|
||||
export function $isQueryBlockNode(
|
||||
node: QueryBlockNode | LexicalNode | null | undefined,
|
||||
): node is QueryBlockNode {
|
||||
return node instanceof QueryBlockNode
|
||||
}
|
||||
19
web/app/components/base/prompt-editor/plugins/tree-view.tsx
Normal file
19
web/app/components/base/prompt-editor/plugins/tree-view.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { TreeView } from '@lexical/react/LexicalTreeView'
|
||||
|
||||
const TreeViewPlugin = () => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
return (
|
||||
<TreeView
|
||||
viewClassName="tree-view-output"
|
||||
treeTypeButtonClassName="debug-treetype-button"
|
||||
timeTravelPanelClassName="debug-timetravel-panel"
|
||||
timeTravelButtonClassName="debug-timetravel-button"
|
||||
timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
|
||||
timeTravelPanelButtonClassName="debug-timetravel-panel-button"
|
||||
editor={editor}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default TreeViewPlugin
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useEffect } from 'react'
|
||||
import {
|
||||
$insertNodes,
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
createCommand,
|
||||
} from 'lexical'
|
||||
import { mergeRegister } from '@lexical/utils'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { CustomTextNode } from '../custom-text/node'
|
||||
|
||||
export const INSERT_VARIABLE_BLOCK_COMMAND = createCommand('INSERT_VARIABLE_BLOCK_COMMAND')
|
||||
export const INSERT_VARIABLE_VALUE_BLOCK_COMMAND = createCommand('INSERT_VARIABLE_VALUE_BLOCK_COMMAND')
|
||||
|
||||
const VariableBlock = () => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerCommand(
|
||||
INSERT_VARIABLE_BLOCK_COMMAND,
|
||||
() => {
|
||||
const textNode = new CustomTextNode('{')
|
||||
$insertNodes([textNode])
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
editor.registerCommand(
|
||||
INSERT_VARIABLE_VALUE_BLOCK_COMMAND,
|
||||
(value: string) => {
|
||||
const textNode = new CustomTextNode(value)
|
||||
$insertNodes([textNode])
|
||||
|
||||
return true
|
||||
},
|
||||
COMMAND_PRIORITY_EDITOR,
|
||||
),
|
||||
)
|
||||
}, [editor])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default VariableBlock
|
||||
@@ -0,0 +1,228 @@
|
||||
import type { FC } from 'react'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { $insertNodes, type TextNode } from 'lexical'
|
||||
import {
|
||||
LexicalTypeaheadMenuPlugin,
|
||||
MenuOption,
|
||||
} from '@lexical/react/LexicalTypeaheadMenuPlugin'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { useBasicTypeaheadTriggerMatch } from '../hooks'
|
||||
import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from './variable-block'
|
||||
import { $createCustomTextNode } from './custom-text/node'
|
||||
import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
|
||||
|
||||
class VariablePickerOption extends MenuOption {
|
||||
title: string
|
||||
icon?: JSX.Element
|
||||
keywords: Array<string>
|
||||
keyboardShortcut?: string
|
||||
onSelect: (queryString: string) => void
|
||||
|
||||
constructor(
|
||||
title: string,
|
||||
options: {
|
||||
icon?: JSX.Element
|
||||
keywords?: Array<string>
|
||||
keyboardShortcut?: string
|
||||
onSelect: (queryString: string) => void
|
||||
},
|
||||
) {
|
||||
super(title)
|
||||
this.title = title
|
||||
this.keywords = options.keywords || []
|
||||
this.icon = options.icon
|
||||
this.keyboardShortcut = options.keyboardShortcut
|
||||
this.onSelect = options.onSelect.bind(this)
|
||||
}
|
||||
}
|
||||
|
||||
type VariablePickerMenuItemProps = {
|
||||
isSelected: boolean
|
||||
onClick: () => void
|
||||
onMouseEnter: () => void
|
||||
option: VariablePickerOption
|
||||
queryString: string | null
|
||||
}
|
||||
const VariablePickerMenuItem: FC<VariablePickerMenuItemProps> = ({
|
||||
isSelected,
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
option,
|
||||
queryString,
|
||||
}) => {
|
||||
const title = option.title
|
||||
let before = title
|
||||
let middle = ''
|
||||
let after = ''
|
||||
|
||||
if (queryString) {
|
||||
const regex = new RegExp(queryString, 'i')
|
||||
const match = regex.exec(option.title)
|
||||
|
||||
if (match) {
|
||||
before = title.substring(0, match.index)
|
||||
middle = match[0]
|
||||
after = title.substring(match.index + match[0].length)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={option.key}
|
||||
className={`
|
||||
flex items-center px-3 h-6 rounded-md hover:bg-primary-50 cursor-pointer
|
||||
${isSelected && 'bg-primary-50'}
|
||||
`}
|
||||
tabIndex={-1}
|
||||
ref={option.setRefElement}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onClick={onClick}>
|
||||
<div className='mr-2'>
|
||||
{option.icon}
|
||||
</div>
|
||||
<div className='text-[13px] text-gray-900'>
|
||||
{before}
|
||||
<span className='text-[#2970FF]'>{middle}</span>
|
||||
{after}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export type Option = {
|
||||
value: string
|
||||
name: string
|
||||
}
|
||||
|
||||
type VariablePickerProps = {
|
||||
items?: Option[]
|
||||
}
|
||||
const VariablePicker: FC<VariablePickerProps> = ({
|
||||
items = [],
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [editor] = useLexicalComposerContext()
|
||||
const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('{', {
|
||||
minLength: 0,
|
||||
maxLength: 6,
|
||||
})
|
||||
const [queryString, setQueryString] = useState<string | null>(null)
|
||||
|
||||
const options = useMemo(() => {
|
||||
const baseOptions = items.map((item) => {
|
||||
return new VariablePickerOption(item.value, {
|
||||
icon: <BracketsX className='w-[14px] h-[14px] text-[#2970FF]' />,
|
||||
onSelect: () => {
|
||||
editor.dispatchCommand(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, `{{${item.value}}}`)
|
||||
},
|
||||
})
|
||||
})
|
||||
if (!queryString)
|
||||
return baseOptions
|
||||
|
||||
const regex = new RegExp(queryString, 'i')
|
||||
|
||||
return baseOptions.filter(option => regex.test(option.title) || option.keywords.some(keyword => regex.test(keyword)))
|
||||
}, [editor, queryString, items])
|
||||
|
||||
const newOption = new VariablePickerOption(t('common.promptEditor.variable.modal.add'), {
|
||||
icon: <BracketsX className='mr-2 w-[14px] h-[14px] text-[#2970FF]' />,
|
||||
onSelect: () => {
|
||||
editor.update(() => {
|
||||
const prefixNode = $createCustomTextNode('{{')
|
||||
const suffixNode = $createCustomTextNode('}}')
|
||||
$insertNodes([prefixNode, suffixNode])
|
||||
prefixNode.select()
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
const onSelectOption = useCallback(
|
||||
(
|
||||
selectedOption: VariablePickerOption,
|
||||
nodeToRemove: TextNode | null,
|
||||
closeMenu: () => void,
|
||||
matchingString: string,
|
||||
) => {
|
||||
editor.update(() => {
|
||||
if (nodeToRemove)
|
||||
nodeToRemove.remove()
|
||||
|
||||
selectedOption.onSelect(matchingString)
|
||||
closeMenu()
|
||||
})
|
||||
},
|
||||
[editor],
|
||||
)
|
||||
|
||||
const mergedOptions = [...options, newOption]
|
||||
|
||||
return (
|
||||
<LexicalTypeaheadMenuPlugin
|
||||
options={mergedOptions}
|
||||
onQueryChange={setQueryString}
|
||||
onSelectOption={onSelectOption}
|
||||
menuRenderFn={(
|
||||
anchorElementRef,
|
||||
{ selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
|
||||
) =>
|
||||
(anchorElementRef.current && mergedOptions.length)
|
||||
? ReactDOM.createPortal(
|
||||
<div className='mt-[25px] w-[240px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg'>
|
||||
{
|
||||
!!options.length && (
|
||||
<>
|
||||
<div className='p-1'>
|
||||
{options.map((option, i: number) => (
|
||||
<VariablePickerMenuItem
|
||||
isSelected={selectedIndex === i}
|
||||
onClick={() => {
|
||||
setHighlightedIndex(i)
|
||||
selectOptionAndCleanUp(option)
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
setHighlightedIndex(i)
|
||||
}}
|
||||
key={option.key}
|
||||
option={option}
|
||||
queryString={queryString}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className='h-[1px] bg-gray-100' />
|
||||
</>
|
||||
)
|
||||
}
|
||||
<div className='p-1'>
|
||||
<div
|
||||
className={`
|
||||
flex items-center px-3 h-6 rounded-md hover:bg-primary-50 cursor-pointer
|
||||
${selectedIndex === options.length && 'bg-primary-50'}
|
||||
`}
|
||||
ref={newOption.setRefElement}
|
||||
tabIndex={-1}
|
||||
onClick={() => {
|
||||
setHighlightedIndex(options.length)
|
||||
selectOptionAndCleanUp(newOption)
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
setHighlightedIndex(options.length)
|
||||
}}
|
||||
key={newOption.key}
|
||||
>
|
||||
{newOption.icon}
|
||||
<div className='text-[13px] text-gray-900'>{newOption.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
anchorElementRef.current,
|
||||
)
|
||||
: null}
|
||||
triggerFn={checkForTriggerMatch}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default VariablePicker
|
||||
@@ -0,0 +1,52 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
} from 'react'
|
||||
import type { TextNode } from 'lexical'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { useLexicalTextEntity } from '../../hooks'
|
||||
import {
|
||||
$createVariableValueBlockNode,
|
||||
VariableValueBlockNode,
|
||||
} from './node'
|
||||
import { getHashtagRegexString } from './utils'
|
||||
|
||||
const REGEX = new RegExp(getHashtagRegexString(), 'i')
|
||||
|
||||
const VariableValueBlock = () => {
|
||||
const [editor] = useLexicalComposerContext()
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor.hasNodes([VariableValueBlockNode]))
|
||||
throw new Error('VariableValueBlockPlugin: VariableValueNode not registered on editor')
|
||||
}, [editor])
|
||||
|
||||
const createVariableValueBlockNode = useCallback((textNode: TextNode): VariableValueBlockNode => {
|
||||
return $createVariableValueBlockNode(textNode.getTextContent())
|
||||
}, [])
|
||||
|
||||
const getVariableValueMatch = useCallback((text: string) => {
|
||||
const matchArr = REGEX.exec(text)
|
||||
|
||||
if (matchArr === null)
|
||||
return null
|
||||
|
||||
const hashtagLength = matchArr[3].length + 4
|
||||
const startOffset = matchArr.index
|
||||
const endOffset = startOffset + hashtagLength
|
||||
return {
|
||||
end: endOffset,
|
||||
start: startOffset,
|
||||
}
|
||||
}, [])
|
||||
|
||||
useLexicalTextEntity<VariableValueBlockNode>(
|
||||
getVariableValueMatch,
|
||||
VariableValueBlockNode,
|
||||
createVariableValueBlockNode,
|
||||
)
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default VariableValueBlock
|
||||
@@ -0,0 +1,65 @@
|
||||
import type {
|
||||
EditorConfig,
|
||||
LexicalNode,
|
||||
NodeKey,
|
||||
SerializedTextNode,
|
||||
} from 'lexical'
|
||||
import {
|
||||
$applyNodeReplacement,
|
||||
TextNode,
|
||||
} from 'lexical'
|
||||
|
||||
export class VariableValueBlockNode extends TextNode {
|
||||
static getType(): string {
|
||||
return 'variable-value-block'
|
||||
}
|
||||
|
||||
static clone(node: VariableValueBlockNode): VariableValueBlockNode {
|
||||
return new VariableValueBlockNode(node.__text, node.__key)
|
||||
}
|
||||
|
||||
constructor(text: string, key?: NodeKey) {
|
||||
super(text, key)
|
||||
}
|
||||
|
||||
createDOM(config: EditorConfig): HTMLElement {
|
||||
const element = super.createDOM(config)
|
||||
element.classList.add('inline-flex', 'items-center', 'px-0.5', 'h-[22px]', 'text-[#155EEF]', 'rounded-[5px]', 'align-middle')
|
||||
return element
|
||||
}
|
||||
|
||||
static importJSON(serializedNode: SerializedTextNode): TextNode {
|
||||
const node = $createVariableValueBlockNode(serializedNode.text)
|
||||
node.setFormat(serializedNode.format)
|
||||
node.setDetail(serializedNode.detail)
|
||||
node.setMode(serializedNode.mode)
|
||||
node.setStyle(serializedNode.style)
|
||||
return node
|
||||
}
|
||||
|
||||
exportJSON(): SerializedTextNode {
|
||||
return {
|
||||
detail: this.getDetail(),
|
||||
format: this.getFormat(),
|
||||
mode: this.getMode(),
|
||||
style: this.getStyle(),
|
||||
text: this.getTextContent(),
|
||||
type: 'variable-value-block',
|
||||
version: 1,
|
||||
}
|
||||
}
|
||||
|
||||
canInsertTextBefore(): boolean {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export function $createVariableValueBlockNode(text = ''): VariableValueBlockNode {
|
||||
return $applyNodeReplacement(new VariableValueBlockNode(text))
|
||||
}
|
||||
|
||||
export function $isVariableValueNodeBlock(
|
||||
node: LexicalNode | null | undefined,
|
||||
): node is VariableValueBlockNode {
|
||||
return node instanceof VariableValueBlockNode
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
function getHashtagRegexStringChars(): Readonly<{
|
||||
alpha: string
|
||||
alphanumeric: string
|
||||
leftChars: string
|
||||
rightChars: string
|
||||
}> {
|
||||
// Latin accented characters
|
||||
// Excludes 0xd7 from the range
|
||||
// (the multiplication sign, confusable with "x").
|
||||
// Also excludes 0xf7, the division sign
|
||||
const latinAccents
|
||||
= '\xC0-\xD6'
|
||||
+ '\xD8-\xF6'
|
||||
+ '\xF8-\xFF'
|
||||
+ '\u0100-\u024F'
|
||||
+ '\u0253-\u0254'
|
||||
+ '\u0256-\u0257'
|
||||
+ '\u0259'
|
||||
+ '\u025B'
|
||||
+ '\u0263'
|
||||
+ '\u0268'
|
||||
+ '\u026F'
|
||||
+ '\u0272'
|
||||
+ '\u0289'
|
||||
+ '\u028B'
|
||||
+ '\u02BB'
|
||||
+ '\u0300-\u036F'
|
||||
+ '\u1E00-\u1EFF'
|
||||
|
||||
// Cyrillic (Russian, Ukrainian, etc.)
|
||||
const nonLatinChars
|
||||
= '\u0400-\u04FF' // Cyrillic
|
||||
+ '\u0500-\u0527' // Cyrillic Supplement
|
||||
+ '\u2DE0-\u2DFF' // Cyrillic Extended A
|
||||
+ '\uA640-\uA69F' // Cyrillic Extended B
|
||||
+ '\u0591-\u05BF' // Hebrew
|
||||
+ '\u05C1-\u05C2'
|
||||
+ '\u05C4-\u05C5'
|
||||
+ '\u05C7'
|
||||
+ '\u05D0-\u05EA'
|
||||
+ '\u05F0-\u05F4'
|
||||
+ '\uFB12-\uFB28' // Hebrew Presentation Forms
|
||||
+ '\uFB2A-\uFB36'
|
||||
+ '\uFB38-\uFB3C'
|
||||
+ '\uFB3E'
|
||||
+ '\uFB40-\uFB41'
|
||||
+ '\uFB43-\uFB44'
|
||||
+ '\uFB46-\uFB4F'
|
||||
+ '\u0610-\u061A' // Arabic
|
||||
+ '\u0620-\u065F'
|
||||
+ '\u066E-\u06D3'
|
||||
+ '\u06D5-\u06DC'
|
||||
+ '\u06DE-\u06E8'
|
||||
+ '\u06EA-\u06EF'
|
||||
+ '\u06FA-\u06FC'
|
||||
+ '\u06FF'
|
||||
+ '\u0750-\u077F' // Arabic Supplement
|
||||
+ '\u08A0' // Arabic Extended A
|
||||
+ '\u08A2-\u08AC'
|
||||
+ '\u08E4-\u08FE'
|
||||
+ '\uFB50-\uFBB1' // Arabic Pres. Forms A
|
||||
+ '\uFBD3-\uFD3D'
|
||||
+ '\uFD50-\uFD8F'
|
||||
+ '\uFD92-\uFDC7'
|
||||
+ '\uFDF0-\uFDFB'
|
||||
+ '\uFE70-\uFE74' // Arabic Pres. Forms B
|
||||
+ '\uFE76-\uFEFC'
|
||||
+ '\u200C-\u200C' // Zero-Width Non-Joiner
|
||||
+ '\u0E01-\u0E3A' // Thai
|
||||
+ '\u0E40-\u0E4E' // Hangul (Korean)
|
||||
+ '\u1100-\u11FF' // Hangul Jamo
|
||||
+ '\u3130-\u3185' // Hangul Compatibility Jamo
|
||||
+ '\uA960-\uA97F' // Hangul Jamo Extended-A
|
||||
+ '\uAC00-\uD7AF' // Hangul Syllables
|
||||
+ '\uD7B0-\uD7FF' // Hangul Jamo Extended-B
|
||||
+ '\uFFA1-\uFFDC' // Half-width Hangul
|
||||
|
||||
const charCode = String.fromCharCode
|
||||
|
||||
const cjkChars
|
||||
= '\u30A1-\u30FA\u30FC-\u30FE' // Katakana (full-width)
|
||||
+ '\uFF66-\uFF9F' // Katakana (half-width)
|
||||
+ '\uFF10-\uFF19\uFF21-\uFF3A'
|
||||
+ '\uFF41-\uFF5A' // Latin (full-width)
|
||||
+ '\u3041-\u3096\u3099-\u309E' // Hiragana
|
||||
+ '\u3400-\u4DBF' // Kanji (CJK Extension A)
|
||||
+ `\u4E00-\u9FFF${// Kanji (Unified)
|
||||
// Disabled as it breaks the Regex.
|
||||
// charCode(0x20000) + '-' + charCode(0x2A6DF) + // Kanji (CJK Extension B)
|
||||
charCode(0x2A700)
|
||||
}-${
|
||||
charCode(0x2B73F) // Kanji (CJK Extension C)
|
||||
}${charCode(0x2B740)
|
||||
}-${
|
||||
charCode(0x2B81F) // Kanji (CJK Extension D)
|
||||
}${charCode(0x2F800)
|
||||
}-${
|
||||
charCode(0x2FA1F)
|
||||
}\u3003\u3005\u303B` // Kanji (CJK supplement)
|
||||
|
||||
const otherChars = latinAccents + nonLatinChars + cjkChars
|
||||
// equivalent of \p{L}
|
||||
|
||||
const unicodeLetters
|
||||
= '\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6'
|
||||
+ '\u00F8-\u0241\u0250-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EE\u037A\u0386'
|
||||
+ '\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03CE\u03D0-\u03F5\u03F7-\u0481'
|
||||
+ '\u048A-\u04CE\u04D0-\u04F9\u0500-\u050F\u0531-\u0556\u0559\u0561-\u0587'
|
||||
+ '\u05D0-\u05EA\u05F0-\u05F2\u0621-\u063A\u0640-\u064A\u066E-\u066F'
|
||||
+ '\u0671-\u06D3\u06D5\u06E5-\u06E6\u06EE-\u06EF\u06FA-\u06FC\u06FF\u0710'
|
||||
+ '\u0712-\u072F\u074D-\u076D\u0780-\u07A5\u07B1\u0904-\u0939\u093D\u0950'
|
||||
+ '\u0958-\u0961\u097D\u0985-\u098C\u098F-\u0990\u0993-\u09A8\u09AA-\u09B0'
|
||||
+ '\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC-\u09DD\u09DF-\u09E1\u09F0-\u09F1'
|
||||
+ '\u0A05-\u0A0A\u0A0F-\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32-\u0A33'
|
||||
+ '\u0A35-\u0A36\u0A38-\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D'
|
||||
+ '\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2-\u0AB3\u0AB5-\u0AB9\u0ABD'
|
||||
+ '\u0AD0\u0AE0-\u0AE1\u0B05-\u0B0C\u0B0F-\u0B10\u0B13-\u0B28\u0B2A-\u0B30'
|
||||
+ '\u0B32-\u0B33\u0B35-\u0B39\u0B3D\u0B5C-\u0B5D\u0B5F-\u0B61\u0B71\u0B83'
|
||||
+ '\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99-\u0B9A\u0B9C\u0B9E-\u0B9F'
|
||||
+ '\u0BA3-\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0C05-\u0C0C\u0C0E-\u0C10'
|
||||
+ '\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C60-\u0C61\u0C85-\u0C8C'
|
||||
+ '\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE'
|
||||
+ '\u0CE0-\u0CE1\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D28\u0D2A-\u0D39'
|
||||
+ '\u0D60-\u0D61\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6'
|
||||
+ '\u0E01-\u0E30\u0E32-\u0E33\u0E40-\u0E46\u0E81-\u0E82\u0E84\u0E87-\u0E88'
|
||||
+ '\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7'
|
||||
+ '\u0EAA-\u0EAB\u0EAD-\u0EB0\u0EB2-\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6'
|
||||
+ '\u0EDC-\u0EDD\u0F00\u0F40-\u0F47\u0F49-\u0F6A\u0F88-\u0F8B\u1000-\u1021'
|
||||
+ '\u1023-\u1027\u1029-\u102A\u1050-\u1055\u10A0-\u10C5\u10D0-\u10FA\u10FC'
|
||||
+ '\u1100-\u1159\u115F-\u11A2\u11A8-\u11F9\u1200-\u1248\u124A-\u124D'
|
||||
+ '\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0'
|
||||
+ '\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310'
|
||||
+ '\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C'
|
||||
+ '\u166F-\u1676\u1681-\u169A\u16A0-\u16EA\u1700-\u170C\u170E-\u1711'
|
||||
+ '\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7'
|
||||
+ '\u17DC\u1820-\u1877\u1880-\u18A8\u1900-\u191C\u1950-\u196D\u1970-\u1974'
|
||||
+ '\u1980-\u19A9\u19C1-\u19C7\u1A00-\u1A16\u1D00-\u1DBF\u1E00-\u1E9B'
|
||||
+ '\u1EA0-\u1EF9\u1F00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D'
|
||||
+ '\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC'
|
||||
+ '\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC'
|
||||
+ '\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u2094\u2102\u2107'
|
||||
+ '\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D'
|
||||
+ '\u212F-\u2131\u2133-\u2139\u213C-\u213F\u2145-\u2149\u2C00-\u2C2E'
|
||||
+ '\u2C30-\u2C5E\u2C80-\u2CE4\u2D00-\u2D25\u2D30-\u2D65\u2D6F\u2D80-\u2D96'
|
||||
+ '\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6'
|
||||
+ '\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u3005-\u3006\u3031-\u3035'
|
||||
+ '\u303B-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF'
|
||||
+ '\u3105-\u312C\u3131-\u318E\u31A0-\u31B7\u31F0-\u31FF\u3400-\u4DB5'
|
||||
+ '\u4E00-\u9FBB\uA000-\uA48C\uA800-\uA801\uA803-\uA805\uA807-\uA80A'
|
||||
+ '\uA80C-\uA822\uAC00-\uD7A3\uF900-\uFA2D\uFA30-\uFA6A\uFA70-\uFAD9'
|
||||
+ '\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C'
|
||||
+ '\uFB3E\uFB40-\uFB41\uFB43-\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F'
|
||||
+ '\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A'
|
||||
+ '\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7'
|
||||
+ '\uFFDA-\uFFDC'
|
||||
|
||||
// equivalent of \p{Mn}\p{Mc}
|
||||
const unicodeAccents
|
||||
= '\u0300-\u036F\u0483-\u0486\u0591-\u05B9\u05BB-\u05BD\u05BF'
|
||||
+ '\u05C1-\u05C2\u05C4-\u05C5\u05C7\u0610-\u0615\u064B-\u065E\u0670'
|
||||
+ '\u06D6-\u06DC\u06DF-\u06E4\u06E7-\u06E8\u06EA-\u06ED\u0711\u0730-\u074A'
|
||||
+ '\u07A6-\u07B0\u0901-\u0903\u093C\u093E-\u094D\u0951-\u0954\u0962-\u0963'
|
||||
+ '\u0981-\u0983\u09BC\u09BE-\u09C4\u09C7-\u09C8\u09CB-\u09CD\u09D7'
|
||||
+ '\u09E2-\u09E3\u0A01-\u0A03\u0A3C\u0A3E-\u0A42\u0A47-\u0A48\u0A4B-\u0A4D'
|
||||
+ '\u0A70-\u0A71\u0A81-\u0A83\u0ABC\u0ABE-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD'
|
||||
+ '\u0AE2-\u0AE3\u0B01-\u0B03\u0B3C\u0B3E-\u0B43\u0B47-\u0B48\u0B4B-\u0B4D'
|
||||
+ '\u0B56-\u0B57\u0B82\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD7'
|
||||
+ '\u0C01-\u0C03\u0C3E-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55-\u0C56'
|
||||
+ '\u0C82-\u0C83\u0CBC\u0CBE-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5-\u0CD6'
|
||||
+ '\u0D02-\u0D03\u0D3E-\u0D43\u0D46-\u0D48\u0D4A-\u0D4D\u0D57\u0D82-\u0D83'
|
||||
+ '\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DF2-\u0DF3\u0E31\u0E34-\u0E3A'
|
||||
+ '\u0E47-\u0E4E\u0EB1\u0EB4-\u0EB9\u0EBB-\u0EBC\u0EC8-\u0ECD\u0F18-\u0F19'
|
||||
+ '\u0F35\u0F37\u0F39\u0F3E-\u0F3F\u0F71-\u0F84\u0F86-\u0F87\u0F90-\u0F97'
|
||||
+ '\u0F99-\u0FBC\u0FC6\u102C-\u1032\u1036-\u1039\u1056-\u1059\u135F'
|
||||
+ '\u1712-\u1714\u1732-\u1734\u1752-\u1753\u1772-\u1773\u17B6-\u17D3\u17DD'
|
||||
+ '\u180B-\u180D\u18A9\u1920-\u192B\u1930-\u193B\u19B0-\u19C0\u19C8-\u19C9'
|
||||
+ '\u1A17-\u1A1B\u1DC0-\u1DC3\u20D0-\u20DC\u20E1\u20E5-\u20EB\u302A-\u302F'
|
||||
+ '\u3099-\u309A\uA802\uA806\uA80B\uA823-\uA827\uFB1E\uFE00-\uFE0F'
|
||||
+ '\uFE20-\uFE23'
|
||||
|
||||
// equivalent of \p{Dn}
|
||||
const unicodeDigits
|
||||
= '\u0030-\u0039\u0660-\u0669\u06F0-\u06F9\u0966-\u096F\u09E6-\u09EF'
|
||||
+ '\u0A66-\u0A6F\u0AE6-\u0AEF\u0B66-\u0B6F\u0BE6-\u0BEF\u0C66-\u0C6F'
|
||||
+ '\u0CE6-\u0CEF\u0D66-\u0D6F\u0E50-\u0E59\u0ED0-\u0ED9\u0F20-\u0F29'
|
||||
+ '\u1040-\u1049\u17E0-\u17E9\u1810-\u1819\u1946-\u194F\u19D0-\u19D9'
|
||||
+ '\uFF10-\uFF19'
|
||||
|
||||
// An alpha char is a unicode chars including unicode marks or
|
||||
// letter or char in otherChars range
|
||||
const alpha = unicodeLetters
|
||||
|
||||
// A numeric character is any with the number digit property, or
|
||||
// underscore. These characters can be included in hashtags, but a hashtag
|
||||
// cannot have only these characters.
|
||||
const numeric = `${unicodeDigits}_`
|
||||
|
||||
// Alphanumeric char is any alpha char or a unicode char with decimal
|
||||
// number property \p{Nd}
|
||||
const alphanumeric = alpha + numeric
|
||||
const leftChars = '{'
|
||||
const rightChars = '}'
|
||||
|
||||
return {
|
||||
alpha,
|
||||
alphanumeric,
|
||||
leftChars,
|
||||
rightChars,
|
||||
}
|
||||
}
|
||||
|
||||
export function getHashtagRegexString(): string {
|
||||
const { alpha, alphanumeric, leftChars, rightChars } = getHashtagRegexStringChars()
|
||||
|
||||
const hashtagAlpha = `[${alpha}]`
|
||||
const hashtagAlphanumeric = `[${alphanumeric}]`
|
||||
const hashLeftCharList = `[${leftChars}]`
|
||||
const hashRightCharList = `[${rightChars}]`
|
||||
|
||||
// A hashtag contains characters, numbers and underscores,
|
||||
// but not all numbers.
|
||||
const hashtag
|
||||
= `(${
|
||||
hashLeftCharList
|
||||
})`
|
||||
+ `(${
|
||||
hashLeftCharList
|
||||
})([a-zA-Z_][a-zA-Z0-9_]{0,29}`
|
||||
+ `)(${
|
||||
hashRightCharList
|
||||
})(${
|
||||
hashRightCharList
|
||||
})`
|
||||
|
||||
return hashtag
|
||||
}
|
||||
Reference in New Issue
Block a user