Merge pull request #65 from serlo/update-serlo-editor-package-version

feat: Bump `@serlo/editor` to `0.14.0`
serlo · Sep 26, 2024 · c791ed2 · c791ed2
2 parents 62a538b + 7331e92
commit c791ed2
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "start:dev": "tsx --watch src/backend/index.ts"
   },
   "dependencies": {
-    "@serlo/editor": "0.9.2",
+    "@serlo/editor": "0.14.0",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "fp-ts": "2.16.9",

diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx
@@ -14,7 +14,7 @@ export type AppState =
   | { type: 'fetching-content' }
   | AppStateError
   | { type: 'editor'; content: SerloEditorProps['initialState'] }
-  | { type: 'static-renderer'; content: SerloRendererProps['document'] }
+  | { type: 'static-renderer'; content: SerloRendererProps['state'] }
 
 export type AppStateError = {
   type: 'error'
@@ -127,7 +127,7 @@ function App() {
       <div
         style={{ padding: '1rem', backgroundColor: 'white', minWidth: '600px' }}
       >
-        <SerloRenderer document={appState.content} />
+        <SerloRenderer state={appState.content} editorVariant="lti-tool" />
       </div>
     )
   }

diff --git a/src/frontend/SerloEditorWrapper.tsx b/src/frontend/SerloEditorWrapper.tsx
@@ -1,11 +1,13 @@
 import { BaseEditor, SerloEditor, type SerloEditorProps } from '@serlo/editor'
-import { useEffect, useRef, useState } from 'react'
-import { createPluginsConfig } from './plugins-config'
+import React, { useEffect, useRef, useState } from 'react'
 
 interface SerloContentProps {
   initialState: SerloEditorProps['initialState']
 }
 
+// HACK: Skip rerendering SerloEditor. It leads to slate error (not finding DOM node) and resets the cursor position. But, I don't think we need to support rerendering currently. There is probably a better way to do this but the way `initialState` and `onChange` works makes it tricky.
+const MemoSerloEditor = React.memo(SerloEditor, () => true)
+
 export default function SerloEditorWrapper(props: SerloContentProps) {
   const { initialState } = props
   const queryString = window.location.search
@@ -54,28 +56,21 @@ export default function SerloEditorWrapper(props: SerloContentProps) {
       {/* <div style={{ color: 'grey' }}>
         {savePending ? 'Ungespeicherte Änderungen' : 'Gespeichert'}
       </div> */}
-      <SerloEditor
+      <MemoSerloEditor
         initialState={initialState}
-        onChange={({ changed, getDocument }) => {
-          if (!changed) return
-          const newState = getDocument()
-          if (!newState) return
+        onChange={(newState) => {
           editorStateRef.current = JSON.stringify(newState)
           setEditorState(editorStateRef.current)
           setSavePending(true)
         }}
-        pluginsConfig={createPluginsConfig(testingSecret)}
+        editorVariant="lti-tool"
+        _testingSecret={testingSecret}
       >
         {(editor) => {
           customizeEditorStrings(editor.i18n)
           return <>{editor.element}</>
         }}
-      </SerloEditor>
-      {/* <h2>Debug info</h2>
-      <h3>Access token:</h3>
-      <div>{accessToken}</div>
-      <h3>ltik:</h3>
-      <div>{ltik}</div> */}
+      </MemoSerloEditor>
     </div>
   )
 }

diff --git a/src/frontend/plugins-config.ts b/src/frontend/plugins-config.ts
diff --git a/yarn.lock b/yarn.lock
@@ -631,15 +631,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@serlo/editor@npm:0.9.2":
-  version: 0.9.2
-  resolution: "@serlo/editor@npm:0.9.2"
+"@serlo/editor@npm:0.14.0":
+  version: 0.14.0
+  resolution: "@serlo/editor@npm:0.14.0"
   dependencies:
     "@serlo/katex-styles": "npm:1.0.1"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-resizable: "npm:^3.0.5"
-  checksum: 10/186f4201430d19e71a6831ff57f585babd79decf221efe2c397404302ab634cffd0f215aee79d1e3ab231aace8dec992e65f6d03e88046e1a8d6712220153ee3
+  checksum: 10/d281b531ba43f7ea95c4476399220b6e406fa7a11553067edec879d4b0a3c04682db60dbaed681de4a84dfe3e174a13935ed8df0b5e3526fbe0c02d5ca05072e
   languageName: node
   linkType: hard
 
@@ -4895,7 +4895,7 @@ __metadata:
   dependencies:
     "@eslint/compat": "npm:^1.1.1"
     "@eslint/js": "npm:^9.10.0"
-    "@serlo/editor": "npm:0.9.2"
+    "@serlo/editor": "npm:0.14.0"
     "@types/jsonwebtoken": "npm:9.0.6"
     "@types/ltijs": "npm:4.0.11"
     "@types/node": "npm:^22.5.4"