feat(vue3): Rewrite the plugin to work with Vue3 and update all relevant dependencies. Also switch the build tools and update all relevant configurations for a future release on npm. Remove a lot of the Editor.js supported plugins.

Author: Kloen

.browserslistrc

@@ -1,3 +1,3 @@
-> 1%
-last 2 versions
-not ie <= 8
+current node
+last 2 versions and > 2%
+ie > 10

.github/FUNDING.yml

@@ -1,4 +1,4 @@
 # These are supported funding model platforms
 
-github: [changjoo-park]
-ko_fi: A316F4N
+github: [Kloen]
+patreon: kloenlansfiel

.github/workflow/npm-publish.yml

@@ -0,0 +1,31 @@
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm run build
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.ncurc.yml

@@ -0,0 +1 @@
+reject: ['rollup','vue-tsc']

CHANGELOG.md

@@ -1,8 +1,9 @@
-# 2.0.2
-
-- Support change holder id @npyramid PR #70
+# WIP
 
 # 1.0.0
 
-- Support Vue Composition API
-- Drop support import in compoentn
+- Vue3 port of `vue-editor-js`
+- Removed all the plugins but Header and List
+- Update all dependencies
+- Update the demo
+- Update the building process

README.md

@@ -1,259 +1,33 @@
-# vue-editor-js
+# vue3-editor-js
 
-[![Wallaby.js](https://img.shields.io/badge/wallaby.js-powered-blue.svg?style=for-the-badge&logo=github)](https://wallabyjs.com/oss/)
-
-
-vue-editor-js is editorjs wrapper component.
+vue3-editor-js is an Editor.js wrapper component.
 
 Please review this first. https://editorjs.io/
 
-## For before 2.0.0 version users.
-
-This plugins is a wrapper component for editorjs.
-If you need to use the plugin for editor.js then import it and set the config property.
-
-Please See the [Demo.vue](https://github.com/ChangJoo-Park/vue-editor-js/blob/master/demo/Demo.vue)
-
+This Vue3 port is based on a fork from the [Vue 2 version](https://github.com/ChangJoo-Park/vue-editor-js)
 
-## For before 1.0.0 version users.
+## Editor.Js
 
-Please use `Vue.use` vue-editor-js in main.js.
+Current Editor.js version: `2.25.0`
 
 ## Supported Plugins
 
-- [Personality](https://github.com/editor-js/personality)
-- [Header](https://github.com/editor-js/header)
-- [List](https://github.com/editor-js/list)
-- [Image](https://github.com/editor-js/image)
-- [InlineCode](https://github.com/editor-js/inline-code)
-- [Embed](https://github.com/editor-js/embed)
-- [Quote](https://github.com/editor-js/quote)
-- [Marker](https://github.com/editor-js/marker)
-- [Code](https://github.com/editor-js/code)
-- [Link](https://github.com/editor-js/link)
-- [Delimiter](https://github.com/editor-js/delimiter)
-- [Raw](https://github.com/editor-js/raw)
-- [Table](https://github.com/editor-js/table)
-- [Warning](https://github.com/editor-js/warning)
-- [Paragraph](https://github.com/editor-js/paragraph)
-- [Checklist](https://github.com/editor-js/checklist)
-
-## Installation
-
-```bash
-# NPM
-npm install --save vue-editor-js
-
-# or Yarn
-yarn add vue-editor-js
-```
-
-## Usage
-
-### In main.js
-```js
-// ...
-import Editor from 'vue-editor-js'
-
-Vue.use(Editor)
-// ...
-```
-
-### In Nuxt.js
-```js
-// in nuxt.config.js
-plugins: [
-  {
-    src: '~/plugins/vue-editor.js', ssr: false
-  }
-],
-
-// in ~/plugins/vue-editor.js
-import Vue from 'vue'
-import Editor from 'vue-editor-js'
-
-Vue.use(Editor)
-```
-
-```Vue
-  <editor ref="editor" :config="config" :initialized="onInitialized"/>
-```
-
-Define the initialization function to get the instance of editor.js when initializing
-
-If you are confused with using it with Nuxt, please see [here](https://github.com/ChangJoo-Park/vue-editor-on-nuxt)
-
-## Local import
-
-If you wish to only import Editor on a single component then you can do so by following the instructions below
-
-1. Make sure to install `@vue/composition-api`
-```bash
-# NPM
-npm i --save @vue/composition-api
-
-# or Yarn
-yarn add @vue/composition-api
-```
-2. In main.js:
-```js
-import Vue from 'vue'
-import VueCompositionApi from '@vue/composition-api'
-
-Vue.use(VueCompositionApi)
-```
-3. Don't import anything from `'vue-editor-js'` in main.js
-4. In your component:
-```js
-import { Editor } from 'vue-editor-js'
-
-export default {
-  // ...
-  components: {
-    Editor,
-  },
-  // ...
-}
-```
-
-## Tools
-### Supported tools
-Same as in Supported Plugins, but with different naming
-- header
-- list
-- code
-- inlineCode
-- personality
-- embed
-- linkTool
-- marker
-- table
-- raw
-- delimiter
-- quote
-- image
-- warning
-- paragraph
-- checklist
+| Plugin                                                  | Version  |
+|---------------------------------------------------------|----------|
+| [Header](https://github.com/editor-js/header)           | `2.6.2`  |
+| [List](https://github.com/editor-js/list)               | `1.7.0`  |
 
 
-### Usage
-
-1. Install the editorjs tool
+## Installation
 
 ```bash
 # NPM
-npm install --save @editorjs/header
+npm install --save vue3-editor-js
 
 # or Yarn
-yarn add @editorjs/header
+yarn add vue3-editor-js
 ```
 
-2. Insert the package into the config prop
-
-```vue
-<editor
-    ...
-    :config="{
-        tools: {
-          header: require('@editorjs/header')
-        }
-    }"
-/>
-```
-
-#### Saving Example Code
-```vue
-<template>
-	<div id="app">
-		<Editor ref="editor" :config="config" />
-
-		<button @click="invokeSave">Save</button>
-	</div>
-</template>
-
-<script>
-	export default {
-		methods: {
-			invokeSave() {
-				this.$refs.editor._data.state.editor.save()
-					.then((data) => {
-						// Do what you want with the data here
-						console.log(data)
-					})
-					.catch(err => { console.log(err) })
-			}
-		},
-	}
-</script>
-```
-
-## Upload Image (>= 1.1.0)
-
-for uploading images, You will need a backend for processing the images. vue-editor-js provides a special `config` prop for easability.
-If you are testing your server to upload an image, please see [server example](https://github.com/ChangJoo-Park/vue-editor-js-imageserver).
-
-```vue
-<editor :config="config" />
-
-<script>
-...
-data() {
-  return {
-      config: {
-        image: {
-          // Like in https://github.com/editor-js/image#config-params
-          endpoints: {
-            byFile: 'http://localhost:8090/image',
-            byUrl: 'http://localhost:8090/image-by-url',
-          },
-          field: 'image',
-          types: 'image/*',
-        },
-      }
-  }
-}
-</script>
-```
-
-## upload personality avatar ( >= 2.0.1)
-
-```js
-  config: {
-    personality: {
-      endpoints: 'http://localhost:8090/image'
-    }
-```
-
-![](https://user-images.githubusercontent.com/1451365/69627876-d7ca9600-108e-11ea-85c7-1e52c4284758.png)
-
-### Other props:
-- customTools - Object with name (key) and class of a custom tool (value)
-
-Enjoy editorjs with Vue.js Project :tada:
-
-## How to Contribute?
-
-1. fork this project.
-2. edit code.
-3. PR
-
-_OR_
-
-1. Just submit a issue!
-
 ## Contributors
 
-- [ChangJoo Park](https://github.com/changjoo-park)
-- [yashha](https://github.com/yashha)
-- [Loskir](https://github.com/Loskir)
-
-
-## Wallaby.js
-
-[![Wallaby.js](https://img.shields.io/badge/wallaby.js-powered-blue.svg?style=for-the-badge&logo=github)](https://wallabyjs.com/oss/)
-
-This repository contributors are welcome to use
-[Wallaby.js OSS License](https://wallabyjs.com/oss/) to get
-test results immediately as you type, and see the results in
-your editor right next to your code.
+- [Klöen Lansfiel](https://github.com/Kloen)

babel.config.js

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