Merge remote-tracking branch 'origin/main' into remove-geogebra-hack-…

…to-fix-sizing

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# yalc
+.yalc/*
+yalc.lock

README.md

@@ -46,6 +46,26 @@ Use repo
 to test the integration with a local instance of edu-sharing instead of just a
 mock. However, this version of edu-sharing is pretty outdated at this point.
 
+## Local development of Serlo Editor integration
+
+Prerequisites:
+
+- Yalc: `yarn global add yalc`
+
+Initial steps:
+
+1. From frontend -> run `yarn editor:publish-local`
+2. From serlo-editor-for-edusharing -> run `yalc add @serlo/editor`
+3. From serlo-editor-for-edusharing -> run `yarn dev`
+
+After making some changes in the editor:
+
+1. From frontend -> run `yarn editor:publish-local`
+
+To remove the local link to Serlo Editor:
+
+1. From serlo-editor-for-edusharing -> run `yalc remove @serlo/editor`
+
 ## Usage perspective
 
 The following user story describes how the editor is integrated within

package.json

@@ -53,7 +53,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@next/env": "^13.5.6",
-    "@serlo/editor": "0.6.0-beta.11",
+    "@serlo/editor": "0.6.0-beta.12",
     "clsx": "^1.2.1",
     "default-import": "^1.1.5",
     "express": "^4.18.2",
@@ -63,7 +63,6 @@
     "json-web-key": "^0.4.0",
     "jsonwebtoken": "^9.0.0",
     "jwks-rsa": "^3.0.1",
-    "katex": "^0.16.9",
     "ltijs": "^5.9.2",
     "mongodb": "^5.1.0",
     "next": "13.5.6",
@@ -85,7 +84,6 @@
     "@types/express": "^4.17.17",
     "@types/jest": "^29.5.11",
     "@types/jsonwebtoken": "^9.0.1",
-    "@types/katex": "^0.16.3",
     "@types/multer": "^1.4.7",
     "@types/node": "^18.18.4",
     "@types/react": "^18.0.28",

src/frontend/editor.tsx

@@ -3,7 +3,6 @@ import { useDebounce } from 'rooks'
 
 import {
   SerloEditor as SerloEditorPackage,
-  SerloEditorProps,
   selectHasPendingChanges,
   useAppDispatch,
   useAppSelector,
@@ -16,8 +15,6 @@ import {
   selectStaticDocument,
   ROOT,
   StaticRenderer,
-  instanceDataDe,
-  loggedInDataDe,
 } from '@serlo/editor'
 
 import { Layout } from './layout'
@@ -37,19 +34,14 @@ export interface EditorProps {
 }
 
 export function Editor({ state, providerUrl, ltik }: EditorProps) {
-  // HACK: Change strings in link element. Searching or inserting an id is not possible in this integration.
-  loggedInDataDe.strings.editor.plugins.text.linkOverlay.placeholder =
-    'https://example.com/'
-  loggedInDataDe.strings.editor.plugins.text.linkOverlay.inputLabel =
-    "Gib eine URL inklusive 'https://' ein"
-
   return (
-    <SerloEditorPackage
-      initialState={state.document}
-      instanceData={instanceDataDe as SerloEditorProps['instanceData']}
-      loggedInData={loggedInDataDe as SerloEditorProps['loggedInData']}
-    >
-      {(editor) => {
+    <SerloEditorPackage initialState={state.document}>
+      {(editor, languageData) => {
+        // HACK: Change strings in link element. Searching or inserting an id is not possible in this integration.
+        languageData.loggedInData.strings.editor.plugins.text.linkOverlay.placeholder =
+          'https://example.com/'
+        languageData.loggedInData.strings.editor.plugins.text.linkOverlay.inputLabel =
+          "Gib eine URL inklusive 'https://' ein"
         return (
           <EditInner ltik={ltik} state={state} providerUrl={providerUrl}>
             {editor}
@@ -242,20 +234,9 @@ function EditInner({
   function renderExtraEditorStyles() {
     return (
       <style jsx global>{`
-        .fa-4x {
-          color: rgb(175, 215, 234);
-          width: 3rem;
-        }
-
         div[data-document] h3 {
           margin-top: 1.5rem;
         }
-
-        /* fixes bug in chromium based browsers v105+ */
-        /* https://github.com/ianstormtaylor/slate/issues/5110#issuecomment-1234951122 */
-        div[data-slate-editor] {
-          -webkit-user-modify: read-write !important;
-        }
       `}</style>
     )
   }

src/frontend/plugins/create-plugins.tsx

@@ -1,18 +1,13 @@
 import IconImage from '../assets/plugin-icons/icon-image.svg'
 import IconInjection from '../assets/plugin-icons/icon-injection.svg'
-import {
-  EditorPluginType,
-  createBasicPlugins,
-  loggedInDataDe,
-} from '@serlo/editor'
+import { EditorPluginType, createBasicPlugins } from '@serlo/editor'
 
 import { createEdusharingAssetPlugin } from './edusharing-asset'
 import { createSerloInjectionPlugin } from './serlo-injection'
 
 export function createPlugins({ ltik }: { ltik: string }) {
   return [
     ...createBasicPlugins({
-      editorStrings: loggedInDataDe.strings.editor,
       enableTextAreaExercise: true,
       allowImageInTableCells: false,
       exerciseVisibleInSuggestion: true,

src/frontend/plugins/edusharing-asset/renderer.tsx

@@ -16,8 +16,6 @@ export function EdusharingAssetRenderer(props: {
   ltik: string
   contentWidth: string | null
 }) {
-  // Use default value for widthInPercent so that old content can be load
-  // where this property was not set
   const { nodeId, repositoryId, ltik, contentWidth } = props
 
   let [embedHtml, setEmbedHtml] = useState<string | null>(null)
@@ -107,6 +105,34 @@ export function EdusharingAssetRenderer(props: {
     const parser = new DOMParser()
     const htmlDocument = parser.parseFromString(detailsSnippet, 'text/html')
 
+    // Sadly, LearningApps also have `mediatype: 'link'` so we need to check more stuff here than just `mediatype`
+    const isLink =
+      content.node.mediatype === 'link' &&
+      !content.node.mimetype &&
+      content.node.repositoryType === 'ALFRESCO'
+    if (isLink) {
+      const linkElement = htmlDocument.querySelector<HTMLLinkElement>(
+        '.edusharing_rendering_content_footer a',
+      )
+      if (!linkElement) {
+        return {
+          html: '<div>Fehler beim Einbinden des Inhalts</div>',
+          renderMethod: 'dangerously-set-inner-html',
+          defineContainerHeight: false,
+        }
+      }
+
+      return {
+        html: `<a class="serlo-link" target="_blank" rel="noopener noreferrer" href="${
+          linkElement.href
+        }">${
+          linkElement.innerText ? linkElement.innerText : linkElement.href
+        }</a>`,
+        renderMethod: 'dangerously-set-inner-html',
+        defineContainerHeight: false,
+      }
+    }
+
     const image = getImageOrUndefined(htmlDocument)
 
     const isPixabayImage =

src/frontend/serlo-editor.tsx

@@ -2,14 +2,7 @@ import Head from 'next/head'
 import dynamic from 'next/dynamic'
 import { default as ToastNotice } from 'react-notify-toast'
 
-import {
-  editorPlugins,
-  editorRenderers,
-  instanceDataDe,
-  loggedInDataDe,
-  SerloRenderer,
-  SerloRendererProps,
-} from '@serlo/editor'
+import { editorPlugins, editorRenderers, SerloRenderer } from '@serlo/editor'
 
 import type { EditorProps } from './editor'
 import { Layout } from './layout'
@@ -48,15 +41,7 @@ export function SerloEditor({
           <Editor state={state} providerUrl={providerUrl} ltik={ltik} />
         ) : (
           <Layout>
-            <SerloRenderer
-              document={state.document}
-              instanceData={
-                instanceDataDe as SerloRendererProps['instanceData']
-              }
-              loggedInData={
-                loggedInDataDe as SerloRendererProps['loggedInData']
-              }
-            />
+            <SerloRenderer document={state.document} />
           </Layout>
         )}
         <ToastNotice />

src/pages/_app.tsx

@@ -1,7 +1,5 @@
 import type { AppProps } from 'next/app'
 
-import '@serlo/editor/dist/editor-tailwind.css'
-import 'katex/dist/katex.min.css'
 import '../frontend/styles.css'
 
 export default function MyApp({ Component, pageProps }: AppProps) {

yarn.lock

@@ -2341,13 +2341,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@serlo/editor@npm:0.6.0-beta.11":
-  version: 0.6.0-beta.11
-  resolution: "@serlo/editor@npm:0.6.0-beta.11"
+"@serlo/editor@npm:0.6.0-beta.12":
+  version: 0.6.0-beta.12
+  resolution: "@serlo/editor@npm:0.6.0-beta.12"
   dependencies:
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: a6241d87d8a953c6a3b9dbf81d4d13d1102cfa20f0fe0ede06c40b019e1daa12f9118063b7b51f504b471dead5fce95dce10d788b0c4bfcdc0ec535758bd99b9
+  checksum: d3c0de5afa462cf6e2fd63c30a7b34db49328b6e0b56c8d806f58e39aeff10fc23108f5abbaca351101c7c8b815c46f300d2909e79ff7df98ec09b4b7ac7405d
   languageName: node
   linkType: hard
 
@@ -2362,13 +2362,12 @@ __metadata:
     "@next/env": ^13.5.6
     "@next/eslint-plugin-next": ^14.0.4
     "@next/swc-linux-x64-gnu": ^14.0.3
-    "@serlo/editor": 0.6.0-beta.11
+    "@serlo/editor": 0.6.0-beta.12
     "@svgr/webpack": ^8.1.0
     "@tailwindcss/typography": ^0.5.9
     "@types/express": ^4.17.17
     "@types/jest": ^29.5.11
     "@types/jsonwebtoken": ^9.0.1
-    "@types/katex": ^0.16.3
     "@types/multer": ^1.4.7
     "@types/node": ^18.18.4
     "@types/react": ^18.0.28
@@ -2389,7 +2388,6 @@ __metadata:
     json-web-key: ^0.4.0
     jsonwebtoken: ^9.0.0
     jwks-rsa: ^3.0.1
-    katex: ^0.16.9
     ltijs: ^5.9.2
     mongodb: ^5.1.0
     multer: ^1.4.5-lts.1
@@ -2834,13 +2832,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/katex@npm:^0.16.3":
-  version: 0.16.6
-  resolution: "@types/katex@npm:0.16.6"
-  checksum: 20166070de2c92c4658c066bf13af5c0cd705a9c6d43e30aa6f097725fd30d5892ccbd2320257894eab9c224444c356070376a94886fdc19ec33a1458f793bf8
-  languageName: node
-  linkType: hard
-
 "@types/keyv@npm:^3.1.4":
   version: 3.1.4
   resolution: "@types/keyv@npm:3.1.4"
@@ -4121,13 +4112,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^8.3.0":
-  version: 8.3.0
-  resolution: "commander@npm:8.3.0"
-  checksum: 0f82321821fc27b83bd409510bb9deeebcfa799ff0bf5d102128b500b7af22872c0c92cb6a0ebc5a4cf19c6b550fba9cedfa7329d18c6442a625f851377bacf0
-  languageName: node
-  linkType: hard
-
 "common-tags@npm:^1.8.0":
   version: 1.8.2
   resolution: "common-tags@npm:1.8.2"
@@ -7258,17 +7242,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"katex@npm:^0.16.9":
-  version: 0.16.9
-  resolution: "katex@npm:0.16.9"
-  dependencies:
-    commander: ^8.3.0
-  bin:
-    katex: cli.js
-  checksum: 861194dfd4d86505e657f688fb73048d46ac498edafce71199502a35b03c0ecc35ba930c631be79c4a09d90a0d23476673cd52f6bc367c7a161854d64005fa95
-  languageName: node
-  linkType: hard
-
 "keyv@npm:^4.0.0":
   version: 4.5.2
   resolution: "keyv@npm:4.5.2"