tmp: editor package with vite

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["cn"],
+  "trailingComma": "es5"
+}

package.json

@@ -1,21 +1,37 @@
 {
-  "name": "@serlo/frontend",
-  "version": "0.0.1",
-  "private": true,
+  "name": "@serlo/editor",
+  "version": "0.0.24",
   "bugs": {
     "url": "https://github.com/serlo/frontend/issues"
   },
   "type": "module",
   "repository": "serlo/frontend",
   "license": "Apache-2.0",
   "author": "Serlo Education e.V.",
+  "module": "./dist/editor.js",
+  "types": "./dist/src/serlo-editor/package/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/editor.js"
+    },
+    "./dist/editor-tailwind.css": {
+      "import": "./dist/editor-tailwind.css",
+      "require": "./dist/editor-tailwind.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "_eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "_prettier": "prettier .",
     "analyze": "cross-env ANALYZE=true yarn build",
     "build": "npm-run-all build:prisma build:next",
     "build:next": "next build",
     "build:prisma": "yarn prisma generate",
+    "editor:build": "run-s \"editor:build:*\"",
+    "editor:build:vite": "vite build",
+    "editor:build:tailwindcss": "tailwindcss --input src/assets-webkit/styles/serlo-tailwind.css -o dist/editor-tailwind.css --postcss",
     "check:all": "scripts/check-all.sh",
     "check:api": "node ./scripts/check-api-version.mjs",
     "check:tailwind": "node ./scripts/check-tailwind.js",
@@ -33,12 +49,24 @@
     "test": "jest"
   },
   "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
     "@fortawesome/fontawesome-svg-core": "6.4.2",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@graphiql/toolkit": "^0.9.1",
+    "@graphql-codegen/add": "^5.0.0",
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/introspection": "4.0.0",
+    "@graphql-codegen/typescript": "4.0.1",
+    "@graphql-codegen/typescript-operations": "4.0.1",
     "@hello-pangea/dnd": "^16.3.0",
+    "@next/bundle-analyzer": "^13.5.4",
     "@ory/client": "^1.2.11",
     "@ory/integrations": "^1.1.5",
     "@prezly/slate-lists": "^0.97.0",
@@ -47,69 +75,9 @@
     "@radix-ui/react-select": "^1.2.2",
     "@reduxjs/toolkit": "^1.9.7",
     "@serlo/authorization": "^0.57.3",
-    "@tippyjs/react": "^4.2.6",
-    "algebra.js": "^0.2.6",
-    "array-move": "^4.0.0",
-    "autoprefixer": "^10.4.16",
-    "clsx": "^2.0.0",
-    "fast-xml-parser": "^4.3.2",
-    "fp-ts": "^2.16.1",
-    "graphiql": "^3.0.6",
-    "graphql": "^16.8.1",
-    "graphql-request": "^6.1.0",
-    "iframe-resizer": "^4.3.7",
-    "iframe-resizer-react": "^1.1.0",
-    "io-ts": "^2.2.20",
-    "is-hotkey": "^0.2.0",
-    "js-cookie": "^3.0.5",
-    "json-diff": "^1.0.6",
-    "katex": "^0.16.9",
-    "next": "^13.5.4",
-    "next-query-params": "^4.2.3",
-    "nprogress": "^0.2.0",
-    "postcss": "^8.4.31",
-    "qrcode.react": "^3.1.0",
-    "ramda": "^0.29.1",
-    "react": "^18.2.0",
-    "react-diff-viewer": "^3.1.1",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
-    "react-hotkeys-hook": "^4.4.1",
-    "react-lazyload": "^3.2.0",
-    "react-mathquill": "Entkenntnis/tmp-react-mathquill",
-    "react-modal": "^3.16.1",
-    "react-notify-toast": "Entkenntnis/tmp-react-notify-toast",
-    "react-redux": "^8.1.3",
-    "react-simple-star-rating": "^5.1.7",
-    "react-syntax-highlighter": "^15.5.0",
-    "react-textarea-autosize": "^8.5.3",
-    "redux": "^4.2.1",
-    "redux-saga": "^1.2.3",
-    "reselect": "^4.1.8",
-    "slate": "^0.94.1",
-    "slate-react": "^0.99.0",
-    "swr": "^2.2.4",
-    "timeago-react": "^3.0.6",
-    "timeago.js": "^4.0.2",
-    "tiny-warning": "^1.0.3",
-    "tippy.js": "^6.3.7",
-    "ts-debounce": "^4.0.0",
-    "ts-key-enum": "^2.0.12",
-    "use-query-params": "^2.2.1",
-    "uuid": "^9.0.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@graphiql/toolkit": "^0.9.1",
-    "@graphql-codegen/add": "^5.0.0",
-    "@graphql-codegen/cli": "5.0.0",
-    "@graphql-codegen/introspection": "4.0.0",
-    "@graphql-codegen/typescript": "4.0.1",
-    "@graphql-codegen/typescript-operations": "4.0.1",
-    "@next/bundle-analyzer": "^13.5.4",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/typography": "^0.5.10",
+    "@tippyjs/react": "^4.2.6",
     "@types/algebra.js": "^0.2.2",
     "@types/escape-html": "^1.0.2",
     "@types/iframe-resizer": "^3.5.10",
@@ -133,7 +101,12 @@
     "@types/uuid": "^9.0.5",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
+    "@vitejs/plugin-react": "^4.2.0",
+    "algebra.js": "^0.2.6",
+    "array-move": "^4.0.0",
+    "autoprefixer": "^10.4.16",
     "babel-jest": "^29.7.0",
+    "clsx": "^2.0.0",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
     "eslint": "^8.51.0",
@@ -143,24 +116,73 @@
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "fast-xml-parser": "^4.3.2",
+    "fp-ts": "^2.16.1",
+    "graphiql": "^3.0.6",
+    "graphql": "^16.8.1",
+    "graphql-request": "^6.1.0",
     "graphql-tag": "2.12.6",
+    "iframe-resizer": "^4.3.7",
+    "iframe-resizer-react": "^1.1.0",
+    "install": "^0.13.0",
+    "io-ts": "^2.2.20",
+    "is-hotkey": "^0.2.0",
     "jest": "^27.5.1",
+    "js-cookie": "^3.0.5",
+    "json-diff": "^1.0.6",
+    "katex": "^0.16.9",
     "micromark": "^4.0.0",
     "msw": "^0.47.4",
+    "next": "^13.5.4",
+    "next-query-params": "^4.2.3",
+    "npm": "^10.2.5",
     "npm-run-all": "^4.1.5",
+    "nprogress": "^0.2.0",
+    "postcss": "^8.4.31",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-nested": "^6.0.1",
     "prettier": "^3.0.3",
     "prettier-plugin-packagejson": "^2.4.6",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "prisma": "^5.2.0",
     "prop-types": "^15.8.1",
+    "qrcode.react": "^3.1.0",
+    "ramda": "^0.29.1",
+    "react-diff-viewer": "^3.1.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-hotkeys-hook": "^4.4.1",
     "react-is": "^18.2.0",
+    "react-lazyload": "^3.2.0",
+    "react-mathquill": "Entkenntnis/tmp-react-mathquill",
+    "react-modal": "^3.16.1",
+    "react-notify-toast": "Entkenntnis/tmp-react-notify-toast",
+    "react-redux": "^8.1.3",
+    "react-simple-star-rating": "^5.1.7",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-textarea-autosize": "^8.5.3",
+    "redux": "^4.2.1",
+    "redux-saga": "^1.2.3",
+    "reselect": "^4.1.8",
+    "slate": "^0.94.1",
+    "slate-react": "^0.99.0",
     "styled-jsx-plugin-postcss": "^4.0.1",
+    "swr": "^2.2.4",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",
+    "timeago-react": "^3.0.6",
+    "timeago.js": "^4.0.2",
+    "tiny-warning": "^1.0.3",
+    "tippy.js": "^6.3.7",
+    "ts-debounce": "^4.0.0",
+    "ts-key-enum": "^2.0.12",
     "ts-unused-exports": "^10.0.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "use-query-params": "^2.2.1",
+    "uuid": "^9.0.1",
+    "vite": "^5.0.2",
+    "vite-plugin-dts": "^3.6.3",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "packageManager": "[email protected]",
   "engines": {

src/serlo-editor-integration/create-basic-plugins.tsx

@@ -0,0 +1,120 @@
+import { EditorPluginType } from '../serlo-editor/types/editor-plugin-type'
+import { type LoggedInData } from '@/data-types'
+import IconBox from '@/serlo-editor/editor-ui/assets/plugin-icons/icon-box.svg'
+import IconEquation from '@/serlo-editor/editor-ui/assets/plugin-icons/icon-equation.svg'
+import IconGeogebra from '@/serlo-editor/editor-ui/assets/plugin-icons/icon-geogebra.svg'
+import IconHighlight from '@/serlo-editor/editor-ui/assets/plugin-icons/icon-highlight.svg'
+import IconMultimedia from '@/serlo-editor/editor-ui/assets/plugin-icons/icon-multimedia.svg'
+import IconSpoiler from '@/serlo-editor/editor-ui/assets/plugin-icons/icon-spoiler.svg'
+import IconTable from '@/serlo-editor/editor-ui/assets/plugin-icons/icon-table.svg'
+import IconText from '@/serlo-editor/editor-ui/assets/plugin-icons/icon-text.svg'
+import { createBoxPlugin } from '@/serlo-editor/plugins/box'
+import { equationsPlugin } from '@/serlo-editor/plugins/equations'
+import { exercisePlugin } from '@/serlo-editor/plugins/exercise'
+import { geoGebraPlugin } from '@/serlo-editor/plugins/geogebra'
+import { createHighlightPlugin } from '@/serlo-editor/plugins/highlight'
+import { createInputExercisePlugin } from '@/serlo-editor/plugins/input-exercise'
+import {
+  MultimediaConfig,
+  createMultimediaPlugin,
+} from '@/serlo-editor/plugins/multimedia'
+import { createRowsPlugin } from '@/serlo-editor/plugins/rows'
+import { createScMcExercisePlugin } from '@/serlo-editor/plugins/sc-mc-exercise'
+import { createSerloTablePlugin } from '@/serlo-editor/plugins/serlo-table'
+import { solutionPlugin } from '@/serlo-editor/plugins/solution'
+import { createSpoilerPlugin } from '@/serlo-editor/plugins/spoiler'
+import { createTextPlugin } from '@/serlo-editor/plugins/text'
+import { unsupportedPlugin } from '@/serlo-editor/plugins/unsupported'
+
+export function createBasicPlugins({
+  editorStrings,
+  exerciseVisibleInSuggestion,
+  allowedChildPlugins,
+  allowImageInTableCells,
+  multimediaConfig,
+}: {
+  allowedChildPlugins?: string[]
+  exerciseVisibleInSuggestion: boolean
+  allowImageInTableCells: boolean
+  editorStrings: LoggedInData['strings']['editor']
+  multimediaConfig?: MultimediaConfig
+}) {
+  return [
+    {
+      type: EditorPluginType.Text,
+      plugin: createTextPlugin({}),
+      visibleInSuggestions: true,
+      icon: <IconText />,
+    },
+    {
+      type: EditorPluginType.Multimedia,
+      plugin: createMultimediaPlugin(multimediaConfig),
+      visibleInSuggestions: true,
+      icon: <IconMultimedia />,
+    },
+    {
+      type: EditorPluginType.Spoiler,
+      plugin: createSpoilerPlugin({ allowedPlugins: allowedChildPlugins }),
+      visibleInSuggestions: true,
+      icon: <IconSpoiler />,
+    },
+    {
+      type: EditorPluginType.Equations,
+      plugin: equationsPlugin,
+      visibleInSuggestions: true,
+      icon: <IconEquation />,
+    },
+    {
+      type: EditorPluginType.Box,
+      plugin: createBoxPlugin({ allowedPlugins: allowedChildPlugins }),
+      visibleInSuggestions: true,
+      icon: <IconBox />,
+    },
+    {
+      type: EditorPluginType.SerloTable,
+      plugin: createSerloTablePlugin({ allowImageInTableCells }),
+      visibleInSuggestions: true,
+      icon: <IconTable />,
+    },
+    // TODO: Deactivate for RLP
+    {
+      type: EditorPluginType.Geogebra,
+      plugin: geoGebraPlugin,
+      visibleInSuggestions: true,
+      icon: <IconGeogebra />,
+    },
+    {
+      type: EditorPluginType.Highlight,
+      plugin: createHighlightPlugin(),
+      visibleInSuggestions: true,
+      icon: <IconHighlight />,
+    },
+
+    // Exercises etc.
+    // ===================================================
+    {
+      type: EditorPluginType.Exercise,
+      plugin: exercisePlugin,
+      visibleInSuggestions: exerciseVisibleInSuggestion,
+    },
+    { type: EditorPluginType.Solution, plugin: solutionPlugin },
+    {
+      type: EditorPluginType.InputExercise,
+      plugin: createInputExercisePlugin({
+        feedback: {
+          plugin: EditorPluginType.Text,
+          config: {
+            placeholder:
+              editorStrings.templatePlugins.inputExercise.feedbackPlaceholder,
+          },
+        },
+      }),
+    },
+    { type: EditorPluginType.ScMcExercise, plugin: createScMcExercisePlugin() },
+
+    // Special plugins, never visible in suggestions
+    // ===================================================
+    { type: EditorPluginType.Rows, plugin: createRowsPlugin() },
+    { type: EditorPluginType.Unsupported, plugin: unsupportedPlugin },
+  ]
+}