42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
|
import type { JSX } from 'solid-js'
|
||
|
|
import { Accessor, createContext, createSignal, useContext } from 'solid-js'
|
||
|
|
|
||
|
|
type WordCounter = {
|
||
|
|
characters: number
|
||
|
|
words: number
|
||
|
|
paragraphs?: number
|
||
|
|
}
|
||
|
|
|
||
|
|
type EditorContextType = {
|
||
|
|
isEditorPanelVisible: Accessor<boolean>
|
||
|
|
wordCounter: Accessor<WordCounter>
|
||
|
|
actions: {
|
||
|
|
toggleEditorPanel: () => void
|
||
|
|
countWords: (value: WordCounter) => void
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const EditorContext = createContext<EditorContextType>()
|
||
|
|
|
||
|
|
export function useEditorContext() {
|
||
|
|
return useContext(EditorContext)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const EditorProvider = (props: { children: JSX.Element }) => {
|
||
|
|
const [isEditorPanelVisible, setEditorPanelVisible] = createSignal<boolean>(false)
|
||
|
|
const [wordCounter, setWordCounter] = createSignal<WordCounter>({
|
||
|
|
characters: 0,
|
||
|
|
words: 0
|
||
|
|
})
|
||
|
|
const toggleEditorPanel = () => setEditorPanelVisible(!isEditorPanelVisible())
|
||
|
|
const countWords = (value) => setWordCounter(value)
|
||
|
|
const actions = {
|
||
|
|
toggleEditorPanel,
|
||
|
|
countWords
|
||
|
|
}
|
||
|
|
|
||
|
|
const value: EditorContextType = { actions, isEditorPanelVisible, wordCounter }
|
||
|
|
|
||
|
|
return <EditorContext.Provider value={value}>{props.children}</EditorContext.Provider>
|
||
|
|
}
|