@seafile/seafile-editor 0.4.7 → 1.0.0

package/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["react-app", {"absoluteRuntime": false}]
+  ]
+}

package/.eslintignore

@@ -0,0 +1,19 @@
+# config
+/config/*
+
+# dev-server
+/dev-server.js
+/cofnig.js
+
+# script
+/scripts/*
+
+# jest
+/jest.config.js
+
+# eslint
+.eslintignore
+
+# package
+package.json
+package-lock.json

package/.eslintrc.json

@@ -0,0 +1,52 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["react-app", "eslint:recommended"],
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    // enbale console.log
+    "no-console": "off",
+    // enable declare variable in if
+    "no-cond-assign": "off",
+    // enable declare variable width var
+    "no-var": "off",
+    // enable declare in case
+    "no-case-declarations": "off",
+    // enable redeclare variable
+    "no-redeclare": "off",
+    "indent": ["warn", 2, { 
+      "SwitchCase": 1,
+      "ignoreComments": false
+    }],
+    "linebreak-style": ["warn", "unix"],
+    "quotes": ["warn", "single"],
+    "semi": ["warn", "always"],
+    "no-unreachable": "warn",
+    "no-class-assign": "warn",
+    "no-unused-vars": "warn",
+    "no-useless-escape": "off",
+    "no-irregular-whitespace": "warn",
+    "no-trailing-spaces": "warn",
+    "react/jsx-indent": ["warn", 2],
+    "eol-last": "error",
+    "space-before-function-paren": ["warn", {"named": "never"}],
+    "array-bracket-spacing": ["warn", "never"],
+    "object-curly-spacing": ["warn", "always"],
+    "spaced-comment": "warn",
+    "keyword-spacing": ["warn", {"before": true}],
+    "space-infix-ops": "error",
+    "key-spacing": ["error", { "beforeColon": false }],
+    "arrow-spacing": ["error", { "before": true, "after": true }],
+    "comma-spacing": ["error", { "before": false, "after": true }]
+  }
+}

package/.github/workflows/nodejs.yml

@@ -0,0 +1,25 @@
+name: Node CI
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: npm install, build, and test
+      run: |
+        npm install
+        npm test
+      env:
+        CI: true

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "rehype"
+  ]
+}

package/config/config.common.js

@@ -0,0 +1,157 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const webpack = require('webpack')
+
+module.exports = function getCommon(config) {
+  const lessLoader = [
+    {
+      loader: MiniCssExtractPlugin.loader,
+    },
+    {
+      loader: 'css-loader',
+    },
+    {
+      loader: 'postcss-loader',
+    },
+    {
+      loader: 'less-loader',
+      options: {
+        modifyVars: {
+          'so-prefix': process.env.SO_PREFIX || 'so',
+          ...config.modifyVars,
+        },
+      },
+    },
+  ]
+  const jsLoaders = [
+    {
+      loader: 'babel-loader',
+      options: {
+        cacheDirectory: true,
+      },
+    },
+  ]
+  const plugins = [
+    new MiniCssExtractPlugin({
+      filename: `${config.extractTextPluginPath}`,
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        SO_PREFIX: JSON.stringify(process.env.SO_PREFIX || ''),
+        CSS_MODULE: !!process.env.LOCAL_IDENT_NAME,
+        LOG_ENV: JSON.stringify(process.env.LOG_ENV || ''),
+      },
+    }),
+  ]
+  if (config.IGNORE_LESS) {
+    jsLoaders.splice(0, 0, { loader: 'remove-less-loader' })
+    plugins.push(
+      new webpack.IgnorePlugin({
+        resourceRegExp: /\.less$/,
+      })
+    )
+  }
+  return {
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // We want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minification steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending further investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+        }),
+        new CssMinimizerPlugin({}),
+      ],
+    },
+    externals: config.externals,
+    resolve: {
+      alias: config.alias,
+      extensions: ['.js', '.json', '.jsx'],
+    },
+    resolveLoader: {
+      modules: ['node_modules'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx|ts|tsx)$/,
+          exclude: [/node_modules/],
+          use: jsLoaders,
+        },
+
+        {
+          test: /\.less$/,
+          use: config.DEV ? 'ignore-loader' : lessLoader,
+        },
+
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+
+        {
+          test: /\.(png|jpg|jpeg|gif)$/,
+          use: [
+            {
+              loader: 'url-loader',
+              options: {
+                limit: 10000,
+                name: './images/[name].[ext]',
+              },
+            },
+          ],
+        },
+
+        {
+          test: /\.(ttf|eot|woff|woff2|otf|svg)/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: './font/[name].[ext]',
+              },
+            },
+          ],
+        },
+
+        {
+          test: /\.md$/,
+          use: 'raw-loader',
+        },
+      ],
+    },
+
+    plugins,
+  }
+}

package/config/config.dev.js

@@ -0,0 +1,53 @@
+const webpack = require('webpack')
+const { merge } = require('webpack-merge')
+const config = require('../config')
+const common = require('./config.common')
+const cssConf = require('./utils/theme.css')
+
+function getEntry(entry) {
+  const newEntry = {}
+  Object.keys(entry).forEach(key => {
+    newEntry[key] = [
+      'webpack/hot/dev-server.js',
+      `webpack-dev-server/client/index.js?hot=true&live-reload=true&hostname=127.0.0.1&port=${config.dev.webpackPort}`,
+      entry[key],
+    ]
+  })
+  return newEntry
+}
+
+function getPublishPath() {
+  if (config.dev.publishPort === 80) return 'http://localhost/'
+  return `http://localhost:${config.dev.publishPort}/`
+}
+
+const jsConfig = merge(common({ ...config.webpack, DEV: true }), {
+  devtool: config.webpack.devtool,
+  entry: getEntry(config.webpack.entry),
+  output: {
+    filename: '[name].js',
+    publicPath: getPublishPath(),
+    libraryTarget: 'umd',
+  },
+  mode: 'development',
+  plugins: [new webpack.HotModuleReplacementPlugin()],
+});
+
+const cssConfig = config.themes.map(name =>
+  cssConf({
+    mode: 'development',
+    hot: true,
+    name,
+    entry: [
+      `webpack-dev-server/client/index.js?hot=true&live-reload=true&hostname=127.0.0.1&port=${config.dev.webpackPort}`,
+      'webpack/hot/only-dev-server',
+      './site/index.js',
+    ],
+    output: { publicPath: getPublishPath() },
+    clean: false,
+    filename: '__css_hot_loader.js',
+    prefix: '',
+  })
+);
+
+module.exports = [jsConfig]

package/config/jest/cssTransform.js

@@ -0,0 +1,16 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return {
+      code: `module.exports = {};`,
+    };
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

package/config/jest/fileTransform.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFileName = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFileName}`;
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};

package/config/utils/theme.css.js

@@ -0,0 +1,103 @@
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const CleanWebpackPlugin = require('clean-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const webpack = require('webpack')
+const config = require('../../config')
+
+const lessLoader = (name, hot) => {
+  const loaders = [
+    {
+      loader: MiniCssExtractPlugin.loader,
+    },
+    {
+      loader: 'css-loader',
+    },
+    {
+      loader: 'postcss-loader',
+    },
+    {
+      loader: 'less-loader',
+      options: {
+        modifyVars: {
+          'so-prefix': process.env.SO_PREFIX || 'so',
+          'so-theme': name,
+        },
+      },
+    },
+  ]
+  if (hot) loaders.splice(0, 0, { loader: 'css-hot-loader' })
+  return loaders
+}
+
+const jsLoaders = [
+  {
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: true,
+    },
+  },
+]
+
+module.exports = function({
+  name,
+  hot,
+  entry,
+  output,
+  clean,
+  prefix = 'theme',
+  mode = 'production',
+  filename = '_temp.file',
+}) {
+  const conf = {
+    mode,
+    optimization: {
+      minimizer: [new CssMinimizerPlugin({})]
+    },
+    entry,
+    resolveLoader: {
+      modules: ['node_modules', 'webpack/loaders'],
+    },
+    resolve: {
+      alias: config.webpack.alias,
+    },
+    output: {
+      ...output,
+      filename,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx|ts|tsx)$/,
+          exclude: [/node_modules/],
+          use: jsLoaders,
+        },
+        {
+          test: /\.less$/,
+          use: lessLoader(name, hot),
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+      ],
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: prefix ? `${prefix}.${name}.css` : `${name}.css`,
+      }),
+    ],
+  }
+
+  if (clean) {
+    conf.plugins.push(
+      new CleanWebpackPlugin({
+        verbose: true,
+        protectWebpackAssets: false,
+        cleanAfterEveryBuildPatterns: ['_temp.file'],
+        cleanOnceBeforeBuildPatterns: [],
+      })
+    )
+  }
+  if (hot) conf.plugins.push(new webpack.HotModuleReplacementPlugin())
+  return conf
+}

package/config.js

@@ -0,0 +1,61 @@
+const path = require('path');
+const fs = require('fs');
+
+const versions = {};
+['react', 'react-dom', 'prop-types'].forEach(lib => {
+  const pkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'node_modules/', lib, 'package.json')))
+  versions[lib] = pkg.version
+})
+
+module.exports = {
+  appName: '@seafile/seafile-editor',
+  dev: {
+    publishPort: 4000,
+    webpackPort: 4001,
+    scriptPath: '/*.*',
+    scripts: [
+      `/react@${versions['react']}/umd/react.production.min.js`,
+      `/react-dom@${versions['react-dom']}/umd/react-dom.production.min.js`,
+      `/prop-types@${versions['prop-types']}/prop-types.min.js`,
+    ],
+    styles: [
+      // '/prism/1.15.0/themes/prism.min.css',
+      'public/media/seafile-ui.css',
+      'public/media/seafile-editor-font.css'
+    ],
+  },
+  themes: ['default'],
+  webpack: {
+    entry: {
+      app: './site/index.js',
+    },
+    output: {
+      chunkFileName: '[name].[chunkhash].js',
+      filename: '[name].js'
+    },
+    alias: {
+      '@seafile/seafile-editor': path.resolve(__dirname, 'src')
+    },
+    devtool: 'cheap-module-source-map',
+    externals: {
+      react: {
+        root: 'React',
+        commonjs2: 'react',
+        commonjs: 'react',
+        amd: 'react',
+      },
+      'react-dom': {
+        root: 'ReactDOM',
+        commonjs2: 'react-dom',
+        commonjs: 'react-dom',
+        amd: 'react-dom',
+      },
+      'prop-types': {
+        root: 'PropTypes',
+        commonjs2: 'prop-types',
+        commonjs: 'prop-types',
+        amd: 'prop-types',
+      },
+    },
+  }
+}

package/dev-server.js

@@ -0,0 +1,145 @@
+const axios = require('axios')
+const path = require('path');
+const Koa = require('koa')
+const send = require('koa-send')
+const Router = require('koa-router')
+const cors = require('koa2-cors');
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+
+const { version } = require('./package.json')
+const config = require('./config')
+const webpackConfig = require('./config/config.dev')
+const ejs = require('./scripts/ejs')
+
+// error handle
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+process.on('uncaughtException', (err, origin) => {
+  console.log(err);
+  throw err;
+});
+
+['SIGINT', 'SIGTERM'].forEach(function(sig) {
+  process.on(sig, function() {
+    process.exit();
+  });
+});
+
+// webpack server ===========================================
+
+const serverConfig = {
+  hot: true,
+  client: false,
+  host: '127.0.0.1',
+  static: {
+    directory: path.join(__dirname, 'public'),
+  },
+  port: config.dev.webpackPort,
+  // noInfo: true,
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+  },
+};
+
+const webpackServer = new WebpackDevServer(serverConfig, webpack(webpackConfig));
+
+webpackServer.startCallback(() => {
+  console.log(`webpack server is running on http://127.0.0.1:${config.dev.webpackPort}`)
+});
+
+
+// dev server ================================================
+const app = new Koa()
+const router = new Router()
+
+// use devlopment version React
+router.get('**/react.production.min.js', async ctx => {
+  await send(ctx, 'node_modules/react/umd/react.development.js')
+})
+
+router.get('**/react-dom.production.min.js', async ctx => {
+  await send(ctx, 'node_modules/react-dom/umd/react-dom.development.js')
+})
+
+router.get('**/prop-types.min.js', async ctx => {
+  await send(ctx, 'node_modules/prop-types/prop-types.js')
+})
+
+router.get('/public/**', async ctx => {
+  await send(ctx, `${ctx.path}`);
+})
+
+router.get('/images/**', async ctx => {
+  await send(ctx, `site/${ctx.path}`)
+})
+
+// dev code proxy: webpack packaged file
+router.get(config.dev.scriptPath, async (ctx, next) => {
+  // console.log(ctx.url)
+  let url = ctx.url.split('/')
+  url = url[url.length - 1]
+  if (
+    url.indexOf('seafile-editor') > -1 ||
+    url.indexOf('seafile-viewer') > -1 ||
+    url.indexOf('wiki-viewer') > -1
+  ) {
+    await next()
+  } else if (url.endsWith('.Form') || url.endsWith('.List')) {
+    await next()
+  } else {
+    const options = {
+      url: `http://127.0.0.1:${config.dev.webpackPort}/${url}`,
+      method: 'GET',
+    }
+    const result = await axios(options);
+    ctx.body = result.data;
+  }
+})
+
+// react-hot-loader proxy
+router.get('/*.hot-update.json?', async ctx => {
+  const options = {
+    url: `http://127.0.0.1:${config.dev.webpackPort}/${ctx.url}`,
+    method: 'GET',
+  }
+  ctx.set('Access-Control-Allow-Origin', '*')
+  const result = await axios(options);
+  ctx.body = result.data;
+})
+
+router.get('/*', async ctx => {
+  // if (ctx.url === '/') ctx.redirect('/index')
+
+  const prepath = config.dev.scriptPath.replace('**', version)
+
+  const scripts = [
+    ...(config.dev.scripts || []),
+    ...Object.keys(config.webpack.entry).map(s => prepath.replace('*.*', `${s}.js`)),
+    // '__css_hot_loader.js',
+  ]
+
+  const styles = config.dev.styles || []
+  ctx.type = 'text/html; charest=utf-8'
+  ctx.body = await ejs.renderFile(`./site/index.html`, {
+    scripts,
+    env: 'development',
+    appName: config.appName,
+    styles,
+    description: '',
+    icoUrl: 'public/favicon.ico',
+  })
+})
+
+// if (config.proxy) config.proxy(router)
+
+app.use(cors())
+app.use(router.routes())
+
+app.listen(`${config.dev.publishPort}`, () => {
+  const ps = config.dev.publishPort === 80 ? '' : `:${config.dev.publishPort}`
+  console.log(`server running on http://127.0.0.1${ps}/`)
+})
+