初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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)!
}