diff --git a/package-lock.json b/package-lock.json index 75d0027..22528be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.1.2", "hasInstallScript": true, "dependencies": { + "@codemirror/commands": "^6.8.1", "@codemirror/lang-markdown": "^6.3.2", "@codemirror/language-data": "^6.5.1", "@codemirror/state": "^6.5.2", @@ -484,9 +485,9 @@ } }, "node_modules/@codemirror/commands": { - "version": "6.8.0", - "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.0.tgz", - "integrity": "sha512-q8VPEFaEP4ikSlt6ZxjB3zW72+7osfAYW9i8Zu943uqbKuz6utc1+F170hyLUCUltXORjQXRyYQNfkckzA/bPQ==", + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.1.tgz", + "integrity": "sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==", "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", diff --git a/package.json b/package.json index 91b1a05..876cd72 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "build:local": "electron-vite build" }, "dependencies": { + "@codemirror/commands": "^6.8.1", "@codemirror/lang-markdown": "^6.3.2", "@codemirror/language-data": "^6.5.1", "@codemirror/state": "^6.5.2", diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index ffeefc0..61f7931 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -15,6 +15,7 @@ export default function App(): JSX.Element { const [focus, setFocus] = useState('fileList') const [currentListItem, setCurrentListItem] = useState(null) const [current, setCurrent] = useState(null) + const [editorExtensions, setEditorExtensions] = useState([]) const toggleFocus = (value): void => { if (value === focus) { @@ -36,7 +37,9 @@ export default function App(): JSX.Element { isVisible: isEditorVisible, setIsVisible: setIsEditorVisible, current, - setCurrent + setCurrent, + setEditorExtensions, + editorExtensions }} > { @@ -40,27 +40,30 @@ export default function BodyField({ value, onChange, onKeyDownCapture }: Props): [bodyEditor] ) - const handleFileDrop = (e): void => { - e.preventDefault() + const handleFileDrop = useCallback( + (e): void => { + e.preventDefault() - const items = e.dataTransfer!.items! - for (let i = 0; i < items.length; i++) { - const item = items[i].webkitGetAsEntry() - if (item && item.isFile) { - new Promise((resolve, reject) => { - ;(item as FileSystemFileEntry).file(resolve, reject) - }).then((file) => { - window.api.copyFile(file).then(() => { - const pos = bodyEditor?.current?.view?.posAtCoords({ - x: e.pageX, - y: e.pageY + const items = e.dataTransfer!.items! + for (let i = 0; i < items.length; i++) { + const item = items[i].webkitGetAsEntry() + if (item && item.isFile) { + new Promise((resolve, reject) => { + ;(item as FileSystemFileEntry).file(resolve, reject) + }).then((file) => { + window.api.copyFile(file).then(() => { + const pos = bodyEditor?.current?.view?.posAtCoords({ + x: e.pageX, + y: e.pageY + }) + insertImage(item.name, pos) }) - insertImage(item.name, pos) }) - }) + } } - } - } + }, + [bodyEditor, insertImage] + ) const theme = useMemo(() => { if ( @@ -78,6 +81,27 @@ export default function BodyField({ value, onChange, onKeyDownCapture }: Props): return thememirror[window.textZenInternal.config.view.theme!] }, []) + useEffect(() => { + setEditorExtensions([ + markdown({ base: markdownLanguage, codeLanguages: languages }), + hyperLink, + EditorView.lineWrapping, + markdownImagePlugin, + internalLink, + ...highlights, + autocompletion({ + override: [internalLinkCompletion] + }), + EditorView.domEventHandlers({ + drop: handleFileDrop + }), + theme, + mermaidPlugin, + tablePreviewPlugin, + mathFormulaPlugin + ]) + }, [handleFileDrop, setEditorExtensions, theme]) + useEffect(() => { window.textZen.codemirror.view = bodyEditor?.current?.view window.textZen.codemirror.state = bodyEditor?.current?.state @@ -91,24 +115,7 @@ export default function BodyField({ value, onChange, onKeyDownCapture }: Props): return ( { @@ -115,15 +116,28 @@ export default function Editor({ } } - // エディタの編集履歴をリセットする useEffect(() => { if (!currentFile) { return } window.api.getBody(currentFile.id).then(setCurrentBody) - setEditorVisible(false) - setTimeout(() => setEditorVisible(true), 1) - }, [currentFile, setCurrentTitle]) + + if (!bodyEditor?.current?.view?.state) { + return + } + + bodyEditor?.current?.view?.setState( + EditorState.fromJSON( + { + ...bodyEditor?.current?.view.state.toJSON({ history: historyField }), + history + }, + { + extensions: editorExtensions + } + ) + ) + }, [bodyEditor, currentFile, setCurrentTitle]) useEffect(() => { setCurrentTitle(currentFile.title) @@ -136,13 +150,11 @@ export default function Editor({ onChange={handleTitleChange} onKeyDown={handleTitleKeyDown} /> - {editorVisible && ( - void} - /> - )} + void} + /> ) } diff --git a/src/renderer/src/contexts/editorContext.ts b/src/renderer/src/contexts/editorContext.ts index 552b65f..2449395 100644 --- a/src/renderer/src/contexts/editorContext.ts +++ b/src/renderer/src/contexts/editorContext.ts @@ -1,4 +1,4 @@ -import { ReactCodeMirrorRef } from '@uiw/react-codemirror' +import { Extension, ReactCodeMirrorRef } from '@uiw/react-codemirror' import { createContext, Dispatch, SetStateAction } from 'react' interface ContextType { @@ -8,6 +8,8 @@ interface ContextType { setIsVisible: (value: boolean) => void current: string | null setCurrent: Dispatch> + setEditorExtensions: (Extension) => void + editorExtensions: Extension[] } export const EditorContext = createContext({ @@ -16,5 +18,7 @@ export const EditorContext = createContext({ isVisible: true, setIsVisible: () => {}, current: null, - setCurrent: () => {} + setCurrent: () => {}, + setEditorExtensions: () => {}, + editorExtensions: [] })