From 11b48edca1fd32e3a3242ee1b0e8e68283d3ed1d Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Wed, 8 Mar 2023 16:29:11 +0100 Subject: [PATCH] fix(frontend): extract codemirror extension for ref update into hook Signed-off-by: Tilman Vatteroth --- .../change-content-context.tsx | 60 ------------------- .../codemirror-reference-context.tsx | 39 ++++++++++++ .../use-change-editor-content-callback.tsx | 11 +++- .../editor-page/editor-page-content.tsx | 2 +- .../editor-page/editor-pane/editor-pane.tsx | 17 ++---- .../use-on-image-upload-from-renderer.ts | 4 +- .../hooks/use-apply-scroll-state.ts | 4 +- .../editor-pane/hooks/use-handle-upload.tsx | 2 +- .../hooks/use-update-code-mirror-reference.ts | 21 +++++++ .../tool-bar/buttons/bold-button.tsx | 2 +- .../tool-bar/buttons/check-list-button.tsx | 2 +- .../tool-bar/buttons/code-fence-button.tsx | 2 +- .../buttons/collapsible-block-button.tsx | 2 +- .../tool-bar/buttons/comment-button.tsx | 2 +- .../tool-bar/buttons/header-level-button.tsx | 2 +- .../tool-bar/buttons/highlight-button.tsx | 2 +- .../buttons/horizontal-line-button.tsx | 2 +- .../tool-bar/buttons/image-link-button.tsx | 2 +- .../tool-bar/buttons/italic-button.tsx | 2 +- .../tool-bar/buttons/link-button.tsx | 2 +- .../tool-bar/buttons/ordered-list-button.tsx | 2 +- .../tool-bar/buttons/quotes-button.tsx | 2 +- .../tool-bar/buttons/strikethrough-button.tsx | 2 +- .../tool-bar/buttons/subscript-button.tsx | 2 +- .../tool-bar/buttons/superscript-button.tsx | 2 +- .../tool-bar/buttons/underline-button.tsx | 2 +- .../buttons/unordered-list-button.tsx | 2 +- .../editor-pane/tool-bar/toolbar-button.tsx | 2 +- .../upload-image-button.tsx | 4 +- 29 files changed, 99 insertions(+), 103 deletions(-) delete mode 100644 frontend/src/components/editor-page/change-content-context/change-content-context.tsx create mode 100644 frontend/src/components/editor-page/change-content-context/codemirror-reference-context.tsx create mode 100644 frontend/src/components/editor-page/editor-pane/hooks/use-update-code-mirror-reference.ts diff --git a/frontend/src/components/editor-page/change-content-context/change-content-context.tsx b/frontend/src/components/editor-page/change-content-context/change-content-context.tsx deleted file mode 100644 index 89db4a878..000000000 --- a/frontend/src/components/editor-page/change-content-context/change-content-context.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ -import type { ContentEdits } from '../editor-pane/tool-bar/formatters/types/changes' -import type { CursorSelection } from '../editor-pane/tool-bar/formatters/types/cursor-selection' -import type { EditorView } from '@codemirror/view' -import { Optional } from '@mrdrogdrog/optional' -import type { PropsWithChildren } from 'react' -import React, { createContext, useContext, useState } from 'react' - -export type CodeMirrorReference = EditorView | undefined -type SetCodeMirrorReference = (value: CodeMirrorReference) => void - -export type ContentFormatter = (parameters: { - currentSelection: CursorSelection - markdownContent: string -}) => [ContentEdits, CursorSelection | undefined] - -type ChangeEditorContentContext = [CodeMirrorReference, SetCodeMirrorReference] - -const changeEditorContentContext = createContext(undefined) - -/** - * Extracts the {@link CodeMirrorReference code mirror reference} from the parent context. - * - * @return The {@link CodeMirrorReference} from the parent context. - */ -export const useCodeMirrorReference = (): CodeMirrorReference => { - const contextContent = Optional.ofNullable(useContext(changeEditorContentContext)).orElseThrow( - () => new Error('No change content received. Did you forget to use the provider component') - ) - return contextContent[0] -} - -/** - * Provides a function to set the {@link CodeMirrorReference code mirror reference} in the current context. - * - * @return A function to set a {@link CodeMirrorReference code mirror reference}. - */ -export const useSetCodeMirrorReference = (): SetCodeMirrorReference => { - const contextContent = Optional.ofNullable(useContext(changeEditorContentContext)).orElseThrow( - () => new Error('No change content received. Did you forget to use the provider component') - ) - return contextContent[1] -} - -/** - * Provides a context for the child components that contains a ref to the current code mirror instance and a callback that posts changes to this codemirror. - */ -export const ChangeEditorContentContextProvider: React.FC> = ({ children }) => { - const [codeMirrorRef, setCodeMirrorRef] = useState(undefined) - - return ( - - {children} - - ) -} diff --git a/frontend/src/components/editor-page/change-content-context/codemirror-reference-context.tsx b/frontend/src/components/editor-page/change-content-context/codemirror-reference-context.tsx new file mode 100644 index 000000000..f4233417f --- /dev/null +++ b/frontend/src/components/editor-page/change-content-context/codemirror-reference-context.tsx @@ -0,0 +1,39 @@ +/* + * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import type { EditorView } from '@codemirror/view' +import { Optional } from '@mrdrogdrog/optional' +import type { PropsWithChildren } from 'react' +import React, { createContext, useContext, useState } from 'react' + +type CodeMirrorReference = EditorView | undefined + +const codemirrorReferenceContext = createContext< + [CodeMirrorReference, (value: CodeMirrorReference) => void] | undefined +>(undefined) + +/** + * Provides the value from the {@link CodeMirrorReference code mirror reference} context. + * + * @return The {@link CodeMirrorReference} from the parent context. + */ +export const useCodemirrorReferenceContext = () => { + return Optional.ofNullable(useContext(codemirrorReferenceContext)).orElseThrow( + () => new Error('No codemirror reference received. Did you forget to use the provider component?') + ) +} + +/** + * Provides a context for the child components that contains a ref to the current code mirror instance and a callback that posts changes to this codemirror. + */ +export const ChangeEditorContentContextProvider: React.FC> = ({ children }) => { + const [codeMirrorRef, setCodeMirrorRef] = useState(undefined) + + return ( + + {children} + + ) +} diff --git a/frontend/src/components/editor-page/change-content-context/use-change-editor-content-callback.tsx b/frontend/src/components/editor-page/change-content-context/use-change-editor-content-callback.tsx index 732f6646b..14909852c 100644 --- a/frontend/src/components/editor-page/change-content-context/use-change-editor-content-callback.tsx +++ b/frontend/src/components/editor-page/change-content-context/use-change-editor-content-callback.tsx @@ -3,13 +3,18 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ +import type { ContentEdits } from '../editor-pane/tool-bar/formatters/types/changes' import type { CursorSelection } from '../editor-pane/tool-bar/formatters/types/cursor-selection' -import type { ContentFormatter } from './change-content-context' -import { useCodeMirrorReference } from './change-content-context' +import { useCodemirrorReferenceContext } from './codemirror-reference-context' import type { EditorView } from '@codemirror/view' import { Optional } from '@mrdrogdrog/optional' import { useMemo } from 'react' +export type ContentFormatter = (parameters: { + currentSelection: CursorSelection + markdownContent: string +}) => [ContentEdits, CursorSelection | undefined] + /** * Changes the content of the given CodeMirror view using the given formatter function. * @@ -33,7 +38,7 @@ export const changeEditorContent = (view: EditorView, formatter: ContentFormatte * @see changeEditorContent */ export const useChangeEditorContentCallback = () => { - const codeMirrorRef = useCodeMirrorReference() + const [codeMirrorRef] = useCodemirrorReferenceContext() return useMemo(() => { if (codeMirrorRef) { return (callback: ContentFormatter) => changeEditorContent(codeMirrorRef, callback) diff --git a/frontend/src/components/editor-page/editor-page-content.tsx b/frontend/src/components/editor-page/editor-page-content.tsx index b4d387545..38e99f4ab 100644 --- a/frontend/src/components/editor-page/editor-page-content.tsx +++ b/frontend/src/components/editor-page/editor-page-content.tsx @@ -11,7 +11,7 @@ import { MotdModal } from '../common/motd-modal/motd-modal' import { CommunicatorImageLightbox } from '../markdown-renderer/extensions/image/communicator-image-lightbox' import { ExtensionEventEmitterProvider } from '../markdown-renderer/hooks/use-extension-event-emitter' import { AppBar, AppBarMode } from './app-bar/app-bar' -import { ChangeEditorContentContextProvider } from './change-content-context/change-content-context' +import { ChangeEditorContentContextProvider } from './change-content-context/codemirror-reference-context' import { EditorDocumentRenderer } from './editor-document-renderer/editor-document-renderer' import { EditorPane } from './editor-pane/editor-pane' import { useComponentsFromAppExtensions } from './editor-pane/hooks/use-components-from-app-extensions' diff --git a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx b/frontend/src/components/editor-page/editor-pane/editor-pane.tsx index 6c4510617..48460dba5 100644 --- a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx +++ b/frontend/src/components/editor-page/editor-pane/editor-pane.tsx @@ -8,7 +8,6 @@ import { useBaseUrl, ORIGIN } from '../../../hooks/common/use-base-url' import { useDarkModeState } from '../../../hooks/common/use-dark-mode-state' import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute' import { findLanguageByCodeBlockName } from '../../markdown-renderer/extensions/base/code-block-markdown-extension/find-language-by-code-block-name' -import { useCodeMirrorReference, useSetCodeMirrorReference } from '../change-content-context/change-content-context' import type { ScrollProps } from '../synced-scroll/scroll-props' import styles from './extended-codemirror/codemirror.module.scss' import { useCodeMirrorFileInsertExtension } from './hooks/code-mirror-extensions/use-code-mirror-file-insert-extension' @@ -18,6 +17,7 @@ import { useOnImageUploadFromRenderer } from './hooks/image-upload-from-renderer import { useCodeMirrorTablePasteExtension } from './hooks/table-paste/use-code-mirror-table-paste-extension' import { useApplyScrollState } from './hooks/use-apply-scroll-state' import { useCursorActivityCallback } from './hooks/use-cursor-activity-callback' +import { useUpdateCodeMirrorReference } from './hooks/use-update-code-mirror-reference' import { useAwareness } from './hooks/yjs/use-awareness' import { useBindYTextToRedux } from './hooks/yjs/use-bind-y-text-to-redux' import { useCodeMirrorYjsExtension } from './hooks/yjs/use-code-mirror-yjs-extension' @@ -63,16 +63,7 @@ export const EditorPane: React.FC = ({ scrollState, onScroll, onMak const spellCheckExtension = useCodeMirrorSpellCheckExtension() const cursorActivityExtension = useCursorActivityCallback() - const codeMirrorRef = useCodeMirrorReference() - const setCodeMirrorReference = useSetCodeMirrorReference() - - const updateViewContext = useMemo(() => { - return EditorView.updateListener.of((update) => { - if (codeMirrorRef !== update.view) { - setCodeMirrorReference(update.view) - } - }) - }, [codeMirrorRef, setCodeMirrorReference]) + const updateViewContextExtension = useUpdateCodeMirrorReference() const yDoc = useYDoc() const awareness = useAwareness(yDoc) @@ -102,7 +93,7 @@ export const EditorPane: React.FC = ({ scrollState, onScroll, onMak fileInsertExtension, autocompletion(), cursorActivityExtension, - updateViewContext, + updateViewContextExtension, yjsExtension, firstEditorUpdateExtension, spellCheckExtension @@ -113,7 +104,7 @@ export const EditorPane: React.FC = ({ scrollState, onScroll, onMak tablePasteExtensions, fileInsertExtension, cursorActivityExtension, - updateViewContext, + updateViewContextExtension, yjsExtension, firstEditorUpdateExtension, spellCheckExtension diff --git a/frontend/src/components/editor-page/editor-pane/hooks/image-upload-from-renderer/use-on-image-upload-from-renderer.ts b/frontend/src/components/editor-page/editor-pane/hooks/image-upload-from-renderer/use-on-image-upload-from-renderer.ts index c6e7a97c0..a4d4c35c0 100644 --- a/frontend/src/components/editor-page/editor-pane/hooks/image-upload-from-renderer/use-on-image-upload-from-renderer.ts +++ b/frontend/src/components/editor-page/editor-pane/hooks/image-upload-from-renderer/use-on-image-upload-from-renderer.ts @@ -8,7 +8,7 @@ import { Logger } from '../../../../../utils/logger' import { useEditorReceiveHandler } from '../../../../render-page/window-post-message-communicator/hooks/use-editor-receive-handler' import type { ImageUploadMessage } from '../../../../render-page/window-post-message-communicator/rendering-message' import { CommunicationMessageType } from '../../../../render-page/window-post-message-communicator/rendering-message' -import { useCodeMirrorReference } from '../../../change-content-context/change-content-context' +import { useCodemirrorReferenceContext } from '../../../change-content-context/codemirror-reference-context' import type { CursorSelection } from '../../tool-bar/formatters/types/cursor-selection' import { useHandleUpload } from '../use-handle-upload' import { findRegexMatchInText } from './find-regex-match-in-text' @@ -22,7 +22,7 @@ const imageWithPlaceholderLinkRegex = /!\[([^\]]*)]\(https:\/\/([^)]*)\)/g * Receives {@link CommunicationMessageType.IMAGE_UPLOAD image upload events} via iframe communication and processes the attached uploads. */ export const useOnImageUploadFromRenderer = (): void => { - const codeMirrorReference = useCodeMirrorReference() + const [codeMirrorReference] = useCodemirrorReferenceContext() const handleUpload = useHandleUpload() useEditorReceiveHandler( diff --git a/frontend/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts b/frontend/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts index 19e992ba1..d36f646d2 100644 --- a/frontend/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts +++ b/frontend/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts @@ -4,7 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ import { Logger } from '../../../../utils/logger' -import { useCodeMirrorReference } from '../../change-content-context/change-content-context' +import { useCodemirrorReferenceContext } from '../../change-content-context/codemirror-reference-context' import type { ScrollState } from '../../synced-scroll/scroll-props' import { EditorView } from '@codemirror/view' import equal from 'fast-deep-equal' @@ -37,7 +37,7 @@ const applyScrollState = (view: EditorView, scrollState: ScrollState): void => { */ export const useApplyScrollState = (scrollState?: ScrollState): void => { const lastScrollPosition = useRef() - const codeMirrorRef = useCodeMirrorReference() + const [codeMirrorRef] = useCodemirrorReferenceContext() useEffect(() => { const view = codeMirrorRef diff --git a/frontend/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx b/frontend/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx index 30b24d84f..bdef03219 100644 --- a/frontend/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx +++ b/frontend/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx @@ -7,7 +7,7 @@ import { uploadFile } from '../../../../api/media' import { getGlobalState } from '../../../../redux' import { supportedMimeTypes } from '../../../common/upload-image-mimetypes' import { useUiNotifications } from '../../../notifications/ui-notification-boundary' -import type { ContentFormatter } from '../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../change-content-context/use-change-editor-content-callback' import { changeEditorContent } from '../../change-content-context/use-change-editor-content-callback' import { replaceInContent } from '../tool-bar/formatters/replace-in-content' import { replaceSelection } from '../tool-bar/formatters/replace-selection' diff --git a/frontend/src/components/editor-page/editor-pane/hooks/use-update-code-mirror-reference.ts b/frontend/src/components/editor-page/editor-pane/hooks/use-update-code-mirror-reference.ts new file mode 100644 index 000000000..0fc8288a6 --- /dev/null +++ b/frontend/src/components/editor-page/editor-pane/hooks/use-update-code-mirror-reference.ts @@ -0,0 +1,21 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { useCodemirrorReferenceContext } from '../../change-content-context/codemirror-reference-context' +import type { Extension } from '@codemirror/state' +import { EditorView } from '@codemirror/view' +import { useMemo } from 'react' + +export const useUpdateCodeMirrorReference = (): Extension => { + const [codeMirrorReference, setCodeMirrorReference] = useCodemirrorReferenceContext() + + return useMemo(() => { + return EditorView.updateListener.of((update) => { + if (codeMirrorReference !== update.view) { + setCodeMirrorReference(update.view) + } + }) + }, [codeMirrorReference, setCodeMirrorReference]) +} diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/bold-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/bold-button.tsx index 186220d68..72e49095e 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/bold-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/bold-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { wrapSelection } from '../formatters/wrap-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/check-list-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/check-list-button.tsx index e1d6bca92..4d992b001 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/check-list-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/check-list-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/code-fence-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/code-fence-button.tsx index 1b87ff4ef..49654d0e9 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/code-fence-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/code-fence-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { changeCursorsToWholeLineIfNoToCursor } from '../formatters/utils/change-cursors-to-whole-line-if-no-to-cursor' import { wrapSelection } from '../formatters/wrap-selection' import { ToolbarButton } from '../toolbar-button' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/collapsible-block-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/collapsible-block-button.tsx index c47b4c8ec..2a322eadd 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/collapsible-block-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/collapsible-block-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { changeCursorsToWholeLineIfNoToCursor } from '../formatters/utils/change-cursors-to-whole-line-if-no-to-cursor' import { wrapSelection } from '../formatters/wrap-selection' import { ToolbarButton } from '../toolbar-button' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/comment-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/comment-button.tsx index 167b2c25c..654e365b9 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/comment-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/comment-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { replaceSelection } from '../formatters/replace-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/header-level-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/header-level-button.tsx index 112bf63e7..3e385d28b 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/header-level-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/header-level-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/highlight-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/highlight-button.tsx index 4e39ccf20..f5e0271ed 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/highlight-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/highlight-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { wrapSelection } from '../formatters/wrap-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/horizontal-line-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/horizontal-line-button.tsx index 46ba420d1..0bf22019f 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/horizontal-line-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/horizontal-line-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { replaceSelection } from '../formatters/replace-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/image-link-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/image-link-button.tsx index d932f2806..0b7231d41 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/image-link-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/image-link-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { addLink } from '../formatters/add-link' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/italic-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/italic-button.tsx index 6d3e736cc..aed31c36f 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/italic-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/italic-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { wrapSelection } from '../formatters/wrap-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/link-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/link-button.tsx index 211290d37..d0e650bcd 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/link-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/link-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { addLink } from '../formatters/add-link' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/ordered-list-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/ordered-list-button.tsx index 7bdf1f4b4..600622f70 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/ordered-list-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/ordered-list-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/quotes-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/quotes-button.tsx index 3f49240be..9ae9265e6 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/quotes-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/quotes-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/strikethrough-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/strikethrough-button.tsx index 845c81ba1..739523c98 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/strikethrough-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/strikethrough-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { wrapSelection } from '../formatters/wrap-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/subscript-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/subscript-button.tsx index a9943bf8f..ea8781508 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/subscript-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/subscript-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { wrapSelection } from '../formatters/wrap-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/superscript-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/superscript-button.tsx index abb63668c..9195634e5 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/superscript-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/superscript-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { wrapSelection } from '../formatters/wrap-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/underline-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/underline-button.tsx index 17e44f6db..468aa4250 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/underline-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/underline-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { wrapSelection } from '../formatters/wrap-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/unordered-list-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/unordered-list-button.tsx index 90a3281b8..00e0588ff 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/unordered-list-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/buttons/unordered-list-button.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ContentFormatter } from '../../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../../change-content-context/use-change-editor-content-callback' import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection' import { ToolbarButton } from '../toolbar-button' import React, { useCallback } from 'react' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/toolbar-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/toolbar-button.tsx index 38a720bde..bf00e4b5b 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/toolbar-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/toolbar-button.tsx @@ -5,7 +5,7 @@ */ import { cypressId } from '../../../../utils/cypress-attribute' import { UiIcon } from '../../../common/icons/ui-icon' -import type { ContentFormatter } from '../../change-content-context/change-content-context' +import type { ContentFormatter } from '../../change-content-context/use-change-editor-content-callback' import { useChangeEditorContentCallback } from '../../change-content-context/use-change-editor-content-callback' import React, { useCallback, useMemo } from 'react' import { Button } from 'react-bootstrap' diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx index 7402b12f2..e813ddd2d 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx @@ -8,7 +8,7 @@ import { Logger } from '../../../../../utils/logger' import { UiIcon } from '../../../../common/icons/ui-icon' import { ShowIf } from '../../../../common/show-if/show-if' import { acceptedMimeTypes } from '../../../../common/upload-image-mimetypes' -import { useCodeMirrorReference } from '../../../change-content-context/change-content-context' +import { useCodemirrorReferenceContext } from '../../../change-content-context/codemirror-reference-context' import { UploadInput } from '../../../sidebar/upload-input' import { useHandleUpload } from '../../hooks/use-handle-upload' import { extractSelectedText } from './extract-selected-text' @@ -30,7 +30,7 @@ export const UploadImageButton: React.FC = () => { clickRef.current?.() }, []) - const codeMirror = useCodeMirrorReference() + const [codeMirror] = useCodemirrorReferenceContext() const handleUpload = useHandleUpload() const onUploadImage = useCallback(