Initial

Author: axtho

.browserslistrc

@@ -0,0 +1,3 @@
+current node
+last 2 versions and > 2%
+ie > 10

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/*
+docs/*
+docs-src/*
+rollup-config.js

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+
+  env: {
+    node: true,
+  },
+
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
+  ],
+
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+};

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist/*
+.DS_Store

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "bracketSpacing": false
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "volar.tsPlugin": true
+}

README.md

@@ -0,0 +1,65 @@
+# VueEditr
+A simple WYSIWYG editor for Vue 3. 
+
+The code base is an upgrade of the vue-wysiwyg editor by chmln. The upgarde was done to support Vue 3 and was written in Typescript.
+
+## Usage
+
+### Install vue-editr
+
+
+## Config options
+
+All keys are optional.
+
+```js
+{
+  // { [module]: boolean (set true to hide) }
+  hideModules: { "bold": true },
+
+  // you can override icons too, if desired
+  // just keep in mind that you may need custom styles in your application to get everything to align
+  iconOverrides: { "bold": "<i class='your-custom-icon'></i>" },
+
+  // if the image option is not set, images are inserted as base64
+  image: {
+    uploadURL: "/api/myEndpoint",
+    dropzoneOptions: {}
+  },
+
+  // limit content height if you wish. If not set, editor size will grow with content.
+  maxHeight: "500px",
+
+  // set to 'true' this will insert plain text without styling when you paste something into the editor.
+  plainTextOnPaste: true,
+
+  // specify editor locale, if you don't specify this, the editor will default to english.
+  locale: 'de'
+}
+```
+Available Modules:
+ - bold
+ - italic
+ - underline
+ - justifyLeft
+ - justifyCenter
+ - justifyRight
+ - headings
+ - link
+ - code
+ - orderedList
+ - unorderedList
+ - image
+ - table
+ - removeFormat
+ - separator
+
+Available Locales:
+ - english (default)
+ - hungarian
+ - dutch
+ - german
+
+Note on the image upload API endpoint:
+- Image is uploaded by `multipart/form-data`
+- Your endpoint must respond back with a string, the URL for the image - e.g. `http://myapp.com/images/12345.jpg`

babel.config.js

@@ -0,0 +1,5 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = ['@babel/preset-env', '@babel/preset-typescript'];
+module.exports = {
+  presets: process.env.NODE_ENV === 'development' ? devPresets : buildPresets,
+};

build/rollup.config.js

@@ -0,0 +1,169 @@
+// rollup.config.js
+import fs from 'fs';
+import path from 'path';
+import vue from 'rollup-plugin-vue';
+import alias from '@rollup/plugin-alias';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import babel from '@rollup/plugin-babel';
+import postcss from 'rollup-plugin-postcss';
+import {terser} from 'rollup-plugin-terser';
+import minimist from 'minimist';
+
+// Get browserslist config and remove ie from es build targets
+const esbrowserslist = fs.readFileSync('./.browserslistrc')
+  .toString()
+  .split('\n')
+  .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
+
+const argv = minimist(process.argv.slice(2));
+
+const projectRoot = path.resolve(__dirname, '..');
+
+const baseConfig = {
+  input: 'src/entry.ts',
+  plugins: {
+    preVue: [
+      alias({
+        entries: [
+          {
+            find: '@',
+            replacement: `${path.resolve(projectRoot, 'src')}`,
+          },
+        ],
+        customResolver: resolve({
+          extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+        }),
+      }),
+    ],
+    replace: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+    vue: {
+      preprocessStyles: true,
+    },
+    postVue: [
+      // Process only `<style module>` blocks.
+      postcss({
+        modules: {
+          generateScopedName: '[local]___[hash:base64:5]',
+        },
+        include: /&module=.*\.css$/,
+      }),
+      // Process all `<style>` blocks except `<style module>`.
+      postcss({ include: /(?<!&module=.*)\.css$/ }),
+    ],
+    babel: {
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      babelHelpers: 'bundled',
+    },
+  },
+};
+
+// ESM/UMD/IIFE shared settings: externals
+// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
+const external = [
+  // list external dependencies, exactly the way it is written in the import statement.
+  // eg. 'jquery'
+  'vue',
+];
+
+// UMD/IIFE shared settings: output.globals
+// Refer to https://rollupjs.org/guide/en#output-globals for details
+const globals = {
+  // Provide global variable names to replace your external imports
+  // eg. jquery: '$'
+  vue: 'Vue',
+};
+
+// Customize configs for individual targets
+const buildFormats = [];
+if (!argv.format || argv.format === 'es') {
+  const esConfig = {
+    ...baseConfig,
+    input: 'src/entry.esm.ts',
+    external,
+    output: {
+      file: 'dist/vue-editr.esm.js',
+      format: 'esm',
+      exports: 'named',
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel({
+        ...baseConfig.plugins.babel,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: esbrowserslist,
+            },
+          ],
+        ],
+      }),
+      commonjs(),
+    ],
+  };
+  buildFormats.push(esConfig);
+}
+
+if (!argv.format || argv.format === 'cjs') {
+  const umdConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vue-editr.ssr.js',
+      format: 'cjs',
+      name: 'VueEditr',
+      exports: 'auto',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+      commonjs(),
+    ],
+  };
+  buildFormats.push(umdConfig);
+}
+
+if (!argv.format || argv.format === 'iife') {
+  const unpkgConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vue-editr.min.js',
+      format: 'iife',
+      name: 'VueEditr',
+      exports: 'auto',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+      commonjs(),
+      terser({
+        output: {
+          ecma: 5,
+        },
+      }),
+    ],
+  };
+  buildFormats.push(unpkgConfig);
+}
+
+// Export config
+export default buildFormats;

dev/serve.ts

@@ -0,0 +1,23 @@
+import {createApp} from 'vue';
+import Dev from './serve.vue';
+import VueEditr from '@/entry';
+
+const app = createApp(Dev);
+app.config.performance = true;
+
+app.use(VueEditr, {
+  hideModules: [''],
+  iconOverrides: {
+    bold: '<i class="mdi mdi-format-bold vue-wysiwyg-icon"></i>',
+    italic: '<i class="mdi mdi-format-italic vue-wysiwyg-icon"></i>',
+    underline: '<i class="mdi mdi-format-underline vue-wysiwyg-icon"></i>',
+    orderedList: '<i class="mdi mdi-format-list-numbered vue-wysiwyg-icon"></i>',
+    unorderedList:
+      '<i class="mdi mdi-format-list-bulleted vue-wysiwyg-icon"></i>',
+    removeFormat: '<i class="mdi mdi-format-clear vue-wysiwyg-icon"></i>'
+  },
+  plainTextOnPaste: true,
+  locale: 'ru',
+});
+
+app.mount('#app');