editor integration notes

[elbotho]

types

interface DocumentState {
  plugin: string
  state?: unknown
}

export interface EditorProps {
  children?: ReactNode | ((document: ReactNode) => ReactNode) // can be used for a custom global toolbar for example
  initialState: DocumentState
  onChange?: (payload: {
    changed: boolean
    getDocument: () => DocumentState | null
  }) => void
}

simplest call

<Editor
  initialState={{ plugin: "rows" }}
  onChange={({ changed, getDocument }) => {
    console.log(changed,getDocument());
  }}
/>

But wrapped in InstanceDataProvider and LoggedInDataProvider and with running this first:

editorPlugins.init(
  createPlugins({
    editorStrings,
    parentType: 'Article',
  })
)

currently required files from frontend repo

• serlo-editor: *
• helper: client-detection.ts, colors.ts, show-toast-notice.ts, tw.ts
• shared: tailwind-base.cjs
• components: close-button.tsx, fa-icon.tsx, modal-with-close-button.tsx
• contexts: instance-context.ts, logged-in-data-context.ts
• data-types.ts
• assets-webkit:
  • fonts/katex/*
  • styles/serlo-tailwind.css

minimal packages (could be more for all plugins)

{
  "dependencies": {
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@prezly/slate-lists": "^0.97.0",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@reduxjs/toolkit": "^1.9.7",
    "autoprefixer": "^10.4.16",
    "clsx": "^2.0.0",
    "is-hotkey": "^0.2.0",
    "katex": "^0.16.9",
    "postcss": "^8.4.31",
    "ramda": "^0.29.1",
    "react": "latest",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "latest",
    "react-hotkeys-hook": "^4.4.1",
    "react-mathquill": "^1.0.3",
    "react-modal": "^3.16.1",
    "react-notify-toast": "^0.5.1",
    "react-redux": "^8.1.3",
    "redux-saga": "^1.2.3",
    "reselect": "^4.1.8",
    "slate": "^0.100.0",
    "slate-react": "^0.101.0",
    "tailwindcss": "^3.3.5",
    "tailwindcss-animate": "^1.0.7",
    "ts-key-enum": "^2.0.12",
    "uuid": "^9.0.1",
    "vite-plugin-svgr": "^4.1.0" // or svgr for webkit
  },
  "devDependencies": {
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    …
  }
}

?

• SaveContext (probably own toolbar and handling like in edusharing)
• Image Upload (custom plugin probably)

serlo stuff that we use inside editor sometimes

• Instance
• Quickbar
• IsSerloContext
• Link
• UuidsContext