tmp: editor package with vite

package.json

@@ -1,21 +1,35 @@
 {
-  "name": "@serlo/frontend",
+  "name": "@serlo/editor",
   "version": "0.0.1",
-  "private": true,
   "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",
+    "build-editor": "tsc && vite build && tailwindcss -o dist/editor-tailwind.css --minify",
     "check:all": "scripts/check-all.sh",
     "check:api": "node ./scripts/check-api-version.mjs",
     "check:tailwind": "node ./scripts/check-tailwind.js",
@@ -48,6 +62,7 @@
     "@reduxjs/toolkit": "^1.9.7",
     "@serlo/authorization": "^0.57.3",
     "@tippyjs/react": "^4.2.6",
+    "@vitejs/plugin-react": "^4.2.0",
     "algebra.js": "^0.2.6",
     "array-move": "^4.0.0",
     "autoprefixer": "^10.4.16",
@@ -160,7 +175,9 @@
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",
     "ts-unused-exports": "^10.0.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vite": "^5.0.2",
+    "vite-plugin-dts": "^3.6.3"
   },
   "packageManager": "[email protected]",
   "engines": {

src/serlo-editor/package/editor.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { EditorPluginType } from '../types/editor-plugin-type'
+import { InstanceDataProvider } from '@/contexts/instance-context'
+import { LoggedInDataProvider } from '@/contexts/logged-in-data-context'
+import type { InstanceData, LoggedInData } from '@/data-types'
+import { Editor, type EditorProps } from '@/serlo-editor/core'
+
+export interface SerloEditorProps {
+  instanceData: InstanceData
+  loggedInData: LoggedInData
+  initialState?: EditorProps['initialState']
+}
+const emptyState = {
+  plugin: EditorPluginType.Rows,
+  state: [
+    {
+      plugin: EditorPluginType.Text,
+      state: [],
+    },
+  ],
+}
+
+/** For exporting the editor */
+export function SerloEditor({
+  instanceData,
+  loggedInData,
+  initialState,
+}: SerloEditorProps) {
+  return (
+    <InstanceDataProvider value={instanceData}>
+      <LoggedInDataProvider value={loggedInData}>
+        hello editor
+        <div className="serlo-editor-hacks mb-24 max-w-[816px] px-2">
+          <Editor initialState={initialState ?? emptyState} />
+        </div>
+      </LoggedInDataProvider>
+    </InstanceDataProvider>
+  )
+}

src/serlo-editor/package/index.ts

@@ -0,0 +1,68 @@
+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 IconVideo from '@/serlo-editor/editor-ui/assets/plugin-icons/icon-video.svg'
+
+export * from './editor'
+
+export { editorPlugins } from '@/serlo-editor/plugin/helpers/editor-plugins'
+export { editorRenderers } from '@/serlo-editor/plugin/helpers/editor-renderer'
+
+export { EditorPluginType } from '@/serlo-editor/types/editor-plugin-type'
+export * from '@/serlo-editor/types/editor-plugins'
+export * from '@/serlo-editor/types/plugin-type-guards'
+export type { PluginsWithData } from '@/serlo-editor/plugin/helpers/editor-plugins'
+
+// default strings
+export {
+  instanceData as instanceDataDe,
+  loggedInData as loggedInDataDe,
+} from '@/data/de'
+export {
+  instanceData as instanceDataEn,
+  loggedInData as loggedInDataEn,
+} from '@/data/en'
+
+// renderers
+export { BoxStaticRenderer } from '@/serlo-editor/plugins/box/static'
+export { GeogebraStaticRenderer } from '@/serlo-editor/plugins/geogebra/static'
+export { ImageStaticRenderer } from '@/serlo-editor/plugins/image/static'
+export { MultimediaStaticRenderer } from '@/serlo-editor/plugins/multimedia/static'
+export { RowsStaticRenderer } from '@/serlo-editor/plugins/rows/static'
+export { SerloTableStaticRenderer } from '@/serlo-editor/plugins/serlo-table/static'
+export { SpoilerStaticRenderer } from '@/serlo-editor/plugins/spoiler/static'
+export type { MathElement } from '@/serlo-editor/plugins/text'
+export { TextStaticRenderer } from '@/serlo-editor/plugins/text/static'
+export { VideoStaticRenderer } from '@/serlo-editor/plugins/video/static'
+export { StaticMath } from '@/serlo-editor/plugins/text/static-components/static-math'
+
+// plugins
+export { createBoxPlugin } from '@/serlo-editor/plugins/box'
+export { equationsPlugin } from '@/serlo-editor/plugins/equations'
+export { geoGebraPlugin } from '@/serlo-editor/plugins/geogebra'
+export { createHighlightPlugin } from '@/serlo-editor/plugins/highlight'
+export { createMultimediaPlugin } from '@/serlo-editor/plugins/multimedia'
+export { createRowsPlugin } from '@/serlo-editor/plugins/rows'
+export { createSerloTablePlugin } from '@/serlo-editor/plugins/serlo-table'
+export { createSpoilerPlugin } from '@/serlo-editor/plugins/spoiler'
+export { createTextPlugin } from '@/serlo-editor/plugins/text'
+export { unsupportedPlugin } from '@/serlo-editor/plugins/unsupported'
+export { videoPlugin } from '@/serlo-editor/plugins/video'
+
+// icons
+export {
+  IconBox,
+  IconEquation,
+  IconGeogebra,
+  IconHighlight,
+  IconMultimedia,
+  IconSpoiler,
+  IconTable,
+  IconText,
+  IconVideo,
+}

vite.config.ts

@@ -0,0 +1,34 @@
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+// https://vitejs.dev/guide/build.html#library-mode
+
+/* we use vite only for building the serlo editor package */
+
+// eslint-disable-next-line import/no-default-export
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/serlo-editor/package/index.ts'),
+      name: 'editor',
+      fileName: 'editor',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  plugins: [react(), dts()],
+})