Remove linked list part 16

lib/components/MarkedInput.tsx

@@ -15,11 +15,13 @@ export interface MarkedInputProps<T = MarkStruct> {
 	/**
 	 * Annotated text with markups for mark
 	 */
-	value: string
+	value?: string
+	/** Default value */
+	defaultValue?: string
 	/**
 	 * Change event
 	 */
-	onChange: (value: string) => void
+	onChange?: (value: string) => void
 	/**
 	 * Component that used for render markups
 	 */

lib/constants.ts

@@ -43,6 +43,7 @@ export const SystemEvent = {
 	ClearTrigger: Symbol() as EventKey<undefined>,
 	CheckTrigger: Symbol() as EventKey<undefined>,
 	Change: Symbol() as EventKey<undefined>,
+	Reparce: Symbol() as EventKey<undefined>,
 	Delete: Symbol() as EventKey<{ node: NodeProxy | null}>,
 	Select: Symbol() as EventKey<{ mark: MarkStruct, match: OverlayMatch }>,
 }

lib/features/useKeyDown.tsx

@@ -22,26 +22,26 @@ export function useKeyDown() {
 
 	function shiftFocusPrev() {
 		const {focus} = store
-		if (focus.isEditable && !focus.isCaretAtBeginning) return
+		if (focus.isSpan && !focus.isCaretAtBeginning) return
 
 		focus.prev.focus()
 		focus.setCaretToEnd()
 	}
 
 	function shiftFocusNext() {
 		const {focus} = store
-		if (focus.isEditable && !focus.isCaretAtEnd) return
+		if (focus.isSpan && !focus.isCaretAtEnd) return
 
 		focus.next.focus()
 	}
 
 	function deleteSelfMark() {
-		if (!store.focus.isEditable)
+		if (store.focus.isMark)
 			deleteMark('self', store)
 	}
 
 	function deletePrevMark(event: KeyboardEvent) {
-		if (store.focus.isEditable && store.focus.isCaretAtBeginning && store.focus.prev.target) {
+		if (store.focus.isSpan && store.focus.isCaretAtBeginning && store.focus.prev.target) {
 			event.preventDefault()
 			deleteMark('prev', store)
 		}
@@ -50,7 +50,7 @@ export function useKeyDown() {
 	//TODO pass focus
 	//TODO on && !store.focus.next.isEditable remove first symbol
 	function deleteNextMark(event: KeyboardEvent) {
-		if (store.focus.isEditable && store.focus.isCaretAtEnd && store.focus.next.target) {
+		if (store.focus.isSpan && store.focus.isCaretAtEnd && store.focus.next.target) {
 			event.preventDefault()
 			deleteMark('next', store)
 		}

lib/features/useSystemListeners.tsx

@@ -1,6 +1,8 @@
 import {DefaultOptions, SystemEvent} from '../constants'
 import {annotate} from '../utils/functions/annotate'
 import {createNewSpan} from '../utils/functions/createNewSpan'
+import {getTokensByUI} from '../utils/functions/getTokensByUI'
+import {getTokensByValue} from '../utils/functions/getTokensByValue'
 import {toString} from '../utils/functions/toString'
 import {useListener} from '../utils/hooks/useListener'
 import {useStore} from '../utils/hooks/useStore'
@@ -16,10 +18,17 @@ export function useSystemListeners() {
 
 		store.tokens[store.focus.index].label = store.focus.content
 
-		onChange(toString(store.tokens, options))
+		onChange?.(toString(store.tokens, options))
+		store.bus.send(SystemEvent.Reparce)
 		//bus.send(SystemEvent.CheckTrigger) TODO check on value change
 	}, [])
 
+	useListener(SystemEvent.Reparce, (event) => {
+		store.tokens = store.focus.target
+			? getTokensByUI(store)
+			: getTokensByValue(store)
+	}, [])
+
 	useListener(SystemEvent.Select, (event) => {
 		const {Mark, onChange, options} = store.props
 		const {mark, match: {option, span, index, source, node}} = event
@@ -37,7 +46,8 @@ export function useSystemListeners() {
 
 			store.focus.target = store.input.target
 			store.input.clear()
-			onChange(toString(store.tokens, options))
+			onChange?.(toString(store.tokens, options))
+			store.bus.send(SystemEvent.Reparce)
 		}
 	}, [])
 }

lib/features/useValueParser.tsx

@@ -1,18 +1,24 @@
-import {useEffect} from 'react'
+import {useEffect, useRef} from 'react'
+import {SystemEvent} from '../constants'
+import {Parser} from '../utils/classes/Parser/Parser'
 import {useStore} from '../utils/hooks/useStore'
-import {getTokensByUI} from '../utils/functions/getTokensByUI'
-import {getTokensByValue} from '../utils/functions/getTokensByValue'
 
 export const useValueParser = () => {
 	const store = useStore()
+	const isMounted = useRef(false)
 	const {value, options} = useStore(store => ({
 		value: store.props.value,
 		options: store.props.Mark ? store.props.options : undefined,
 	}), true)
 
 	useEffect(() => {
-		store.tokens = store.focus.target
-			? getTokensByUI(store)
-			: getTokensByValue(store)
+		if (isMounted.current) {
+			store.bus.send(SystemEvent.Reparce)
+			return
+		}
+
+		//Initial parse
+		store.tokens = Parser.split(value ?? store.props.defaultValue ?? '', options)
+		isMounted.current = true
 	}, [value, options])
 }

lib/utils/classes/NodeProxy.ts

@@ -21,6 +21,14 @@ export class NodeProxy {
 		return new NodeProxy(this.target?.previousSibling, this.#store)
 	}
 
+	get isSpan() {
+		return this.index % 2 === 0
+	}
+
+	get isMark() {
+		return !this.isSpan
+	}
+
 	get isEditable() {
 		return this.target?.isContentEditable ?? false
 	}