fix: enable SaveButton

serlo · Jan 3, 2025 · 8f453d0 · 8f453d0
1 parent 9a22f05
commit 8f453d0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/apps/web/src/data/en/index.ts b/apps/web/src/data/en/index.ts
@@ -478,6 +478,10 @@ export const instanceData = {
       title: 'Title',
       trashed: 'Trashed…',
     },
+    saveButton: {
+      noChangesWarning: 'Nothing changed so there is no need to save yet',
+      save: 'Save',
+    },
   },
 }
 export const instanceLandingData = {

diff --git a/apps/web/src/serlo-editor-integration/components/save-button.tsx b/apps/web/src/serlo-editor-integration/components/save-button.tsx
@@ -1,31 +1,31 @@
-import { FaIcon } from '@editor/editor-ui/fa-icon'
-import { showToastNotice } from '@editor/editor-ui/show-toast-notice'
-import { useEditStrings } from '@editor/i18n/edit-strings-provider'
-import { selectHasPendingChanges, useAppSelector } from '@editor/store'
 import { faSave } from '@fortawesome/free-solid-svg-icons'
 import { useState } from 'react'
 import { createPortal } from 'react-dom'
 
 import { SaveModal } from './save-modal'
 import type { SerloEditorProps } from '../serlo-editor'
+import { FaIcon } from '@/components/fa-icon'
+import { useInstanceData } from '@/contexts/instance-context'
+import { showToastNotice } from '@/helper/show-toast-notice'
 import { useLeaveConfirm } from '@/helper/use-leave-confirm'
 
 export function SaveButton({
   onSave,
+  isChanged,
   isInTestArea,
 }: {
   onSave: SerloEditorProps['onSave']
+  isChanged: boolean
   isInTestArea?: boolean
 }) {
-  const isChanged = useAppSelector(selectHasPendingChanges)
   const [saveModalOpen, setSaveModalOpen] = useState(false)
 
-  const editStrings = useEditStrings()
+  const saveButtonStrings = useInstanceData().strings.saveButton
 
   const handleClick = () =>
     isChanged
       ? setSaveModalOpen(true)
-      : showToastNotice('👀 ' + editStrings.noChangesWarning)
+      : showToastNotice('👀 ' + saveButtonStrings.noChangesWarning)
 
   useLeaveConfirm(isChanged)
 
@@ -36,7 +36,7 @@ export function SaveButton({
   return createPortal(
     <div className="sticky right-0 top-0">
       <button className="serlo-button-edit-primary" onClick={handleClick}>
-        <FaIcon icon={faSave} /> {editStrings.edtrIo.save}
+        <FaIcon icon={faSave} /> {saveButtonStrings.save}
       </button>
       <SaveModal
         open={saveModalOpen}

diff --git a/apps/web/src/serlo-editor-integration/serlo-editor.tsx b/apps/web/src/serlo-editor-integration/serlo-editor.tsx
@@ -9,7 +9,7 @@ import dynamic from 'next/dynamic'
 
 import { ArticleAddModal } from './components/article-add-modal/article-add-modal'
 import { ExternalRevisionLoader } from './components/external-revision-loader'
-// import { SaveButton } from './components/save-button'
+import { SaveButton } from './components/save-button'
 import { useAuthentication } from '@/auth/use-authentication'
 import { useInstanceData } from '@/contexts/instance-context'
 import type { SetEntityMutationData } from '@/mutations/use-set-entity-mutation/types'
@@ -28,8 +28,8 @@ export interface SerloEditorProps {
 }
 
 export function SerloEditor({
-  // onSave,
-  // isInTestArea,
+  onSave,
+  isInTestArea,
   initialState,
 }: SerloEditorProps) {
   const { lang, licenses } = useInstanceData()
@@ -57,9 +57,14 @@ export function SerloEditor({
         initialState={initialState}
       >
         {(editor) => {
+          const hasPendingChanges = editor.history.pendingChanges !== 0
           return (
             <>
-              {/* <SaveButton onSave={onSave} isInTestArea={isInTestArea} /> */}
+              <SaveButton
+                onSave={onSave}
+                isChanged={hasPendingChanges}
+                isInTestArea={isInTestArea}
+              />
               {isNewEntity ? (
                 <ExternalRevisionLoader
                   templateType={