Merge pull request #350 from serlo/feat/editor-package-simpler-langua…

…ge-strings

feat: editor package simpler language strings

.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

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}

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/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 />