diff --git a/.gitignore b/.gitignore index 5037a7d2..b8a4c7e1 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,7 @@ yarn-error.log* !.yarn/releases !.yarn/sdks !.yarn/versions + +# yalc +.yalc/* +yalc.lock diff --git a/.yarn/cache/@serlo-editor-npm-0.6.0-beta.11-d65c5882fe-a6241d87d8.zip b/.yarn/cache/@serlo-editor-npm-0.6.0-beta.11-d65c5882fe-a6241d87d8.zip deleted file mode 100644 index 66ca16f5..00000000 Binary files a/.yarn/cache/@serlo-editor-npm-0.6.0-beta.11-d65c5882fe-a6241d87d8.zip and /dev/null differ diff --git a/.yarn/cache/@serlo-editor-npm-0.6.0-beta.12-4540dab3a8-d3c0de5afa.zip b/.yarn/cache/@serlo-editor-npm-0.6.0-beta.12-4540dab3a8-d3c0de5afa.zip new file mode 100644 index 00000000..780281ec Binary files /dev/null and b/.yarn/cache/@serlo-editor-npm-0.6.0-beta.12-4540dab3a8-d3c0de5afa.zip differ diff --git a/.yarn/cache/@types-katex-npm-0.16.6-8516b05f81-20166070de.zip b/.yarn/cache/@types-katex-npm-0.16.6-8516b05f81-20166070de.zip deleted file mode 100644 index 17796289..00000000 Binary files a/.yarn/cache/@types-katex-npm-0.16.6-8516b05f81-20166070de.zip and /dev/null differ diff --git a/.yarn/cache/commander-npm-8.3.0-c0d18c66d5-0f82321821.zip b/.yarn/cache/commander-npm-8.3.0-c0d18c66d5-0f82321821.zip deleted file mode 100644 index 4f07a5cd..00000000 Binary files a/.yarn/cache/commander-npm-8.3.0-c0d18c66d5-0f82321821.zip and /dev/null differ diff --git a/.yarn/cache/katex-npm-0.16.9-721692b7ff-861194dfd4.zip b/.yarn/cache/katex-npm-0.16.9-721692b7ff-861194dfd4.zip deleted file mode 100644 index a10e428c..00000000 Binary files a/.yarn/cache/katex-npm-0.16.9-721692b7ff-861194dfd4.zip and /dev/null differ diff --git a/README.md b/README.md index a3237245..ab6196b6 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 0bf4537a..9c0295de 100644 --- a/package.json +++ b/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", diff --git a/src/frontend/editor.tsx b/src/frontend/editor.tsx index 95664824..a01dda61 100644 --- a/src/frontend/editor.tsx +++ b/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 ( - - {(editor) => { + + {(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 ( {editor} @@ -242,20 +234,9 @@ function EditInner({ function renderExtraEditorStyles() { return ( ) } diff --git a/src/frontend/plugins/create-plugins.tsx b/src/frontend/plugins/create-plugins.tsx index 62599465..0aca25d0 100644 --- a/src/frontend/plugins/create-plugins.tsx +++ b/src/frontend/plugins/create-plugins.tsx @@ -1,10 +1,6 @@ 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' @@ -12,7 +8,6 @@ import { createSerloInjectionPlugin } from './serlo-injection' export function createPlugins({ ltik }: { ltik: string }) { return [ ...createBasicPlugins({ - editorStrings: loggedInDataDe.strings.editor, enableTextAreaExercise: true, allowImageInTableCells: false, exerciseVisibleInSuggestion: true, diff --git a/src/frontend/plugins/edusharing-asset/renderer.tsx b/src/frontend/plugins/edusharing-asset/renderer.tsx index 411de9c7..cdae8534 100644 --- a/src/frontend/plugins/edusharing-asset/renderer.tsx +++ b/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(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( + '.edusharing_rendering_content_footer a', + ) + if (!linkElement) { + return { + html: '
Fehler beim Einbinden des Inhalts
', + renderMethod: 'dangerously-set-inner-html', + defineContainerHeight: false, + } + } + + return { + html: `${ + linkElement.innerText ? linkElement.innerText : linkElement.href + }`, + renderMethod: 'dangerously-set-inner-html', + defineContainerHeight: false, + } + } + const image = getImageOrUndefined(htmlDocument) const isPixabayImage = diff --git a/src/frontend/serlo-editor.tsx b/src/frontend/serlo-editor.tsx index 0f6c6d55..8024443a 100644 --- a/src/frontend/serlo-editor.tsx +++ b/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({ ) : ( - + )} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 4befd684..b8e4d89e 100644 --- a/src/pages/_app.tsx +++ b/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) { diff --git a/yarn.lock b/yarn.lock index dd23c93b..db41f262 100644 --- a/yarn.lock +++ b/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"