Merge pull request #46 from iliyaZelenko/master

Next Release (2.0)
iliyaZelenko · Oct 6, 2019 · a10bdc5 · a10bdc5
2 parents 2f5a6a3 + e0a29ef
commit a10bdc5
Show file tree

Hide file tree

Showing 74 changed files with 4,036 additions and 2,568 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,7 +11,7 @@ module.exports = {
   },
   extends: [
     // add more generic rulesets here, such as:
-    // 'eslint:recommended',
+    'eslint:recommended',
     'standard',
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/recommended',
@@ -29,6 +29,7 @@ module.exports = {
     'indent': OFF,
     // не правильно работает для конструктора typescript: constructor (public text) {}
     'no-useless-constructor': OFF,
+    'no-console': OFF,
 
     '@typescript-eslint/explicit-member-accessibility': 'no-public',
     '@typescript-eslint/no-use-before-define': OFF,

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-**At the moment, this package does not fully support Vuetifi 2. If you want me to work more on this project, you can give me motivation in the form of a star. Thanks for attention!**
+**At the moment, this package does not fully support Vuetify 2, but it is planned soon. If you want me to work more on this project, you can give me motivation in the form of a star. Thanks for attention!**
 
   <p align="center">
     <a href="https://www.npmjs.com/package/tiptap-vuetify">
@@ -52,11 +52,13 @@ WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://gi
 
 - used vuetify components
 - support for different types of icons ([fa](https://fontawesome.com/),  [md](https://material.io/tools/icons/), [mdi](https://materialdesignicons.com/))
-- internationalization (2 languages: en, ru)
+- internationalization (en, fr, pl, es, ru), with automatic detection of the current language through the Vuetify
 - easy to start using
 - props and events are available
-- the project is ready to actively develop if there is support (stars)!
 - TypeScript support
+- the project is ready to actively develop if there is support (stars)!
+- the ability to create and use your own extensions
+- choose where the extension buttons should be displayed: in the toolbar or in the bubble menu
 
 ## Installation
 
@@ -115,7 +117,7 @@ More about vuetify icons you can read [here](https://vuetifyjs.com/en/components
 import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList,
   ListItem, Link, Blockquote, HardBreak, HorizontalRule, History
 } from 'tiptap-vuetify'
-
+import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
 export default {
   // specify in the list of components
   components: { TiptapVuetify },
@@ -354,4 +356,3 @@ In the future version this problem will most likely be solved and you will not n
 - site with docs and examples
 - emoticons
 - tests
-- choose where the extension buttons should be displayed: in the toolbar or in the bubble menu (it's done and ready to go to the new version)
diff --git a/demo/App.vue b/demo/App.vue
@@ -5,21 +5,19 @@
       rel="stylesheet"
     >
 
-    <div id="app">
-      <v-app>
-        <v-content>
-          <v-container>
-            <h1>
-              The Tiptap Editor Package
-            </h1>
+    <v-app>
+      <v-content>
+        <v-container>
+          <h1>
+            The Tiptap Editor Package
+          </h1>
 
-            <div class="mt-4">
-              <router-view />
-            </div>
-          </v-container>
-        </v-content>
-      </v-app>
-    </div>
+          <div class="mt-4">
+            <router-view />
+          </div>
+        </v-container>
+      </v-content>
+    </v-app>
   </div>
 </template>
 

diff --git a/demo/config.js b/demo/config.js
@@ -1,2 +1,2 @@
-export const MAIN_MODULE = import('~/main') //  '../dist/bundle-cjs'
+export const MAIN_MODULE = import('../dist/bundle-esm') //  '../dist/bundle-cjs'
 // export const MAIN_MODULE = import('../dist/bundle-esm') // '../dist/bundle-cjs'
diff --git a/demo/main.js b/demo/main.js
@@ -1,5 +1,9 @@
 import Vue from 'vue'
-import Vuetify from 'vuetify'
+import Vuetify, {
+  VApp,
+  VContent,
+  VContainer
+} from 'vuetify/lib'
 import Router from 'vue-router'
 import 'vuetify/dist/vuetify.min.css'
 
@@ -13,19 +17,34 @@ import router from './router'
 import '../dist/main.css'
 import { MAIN_MODULE } from './config'
 
+const vuetify = new Vuetify({
+  lang: {
+    current: 'en' // en | es | fr | pl | ru
+  }
+})
+
 MAIN_MODULE.then(({ TiptapVuetifyPlugin }) => {
-  Vue.use(Vuetify)
+  Vue.use(Router)
+  Vue.use(Vuetify, {
+    components: {
+      VApp,
+      VContent,
+      VContainer
+    },
+    directives: {}
+  })
   Vue.use(TiptapVuetifyPlugin, {
-    iconsGroup: 'fa'
+    vuetify,
+    iconsGroup: 'fa' // VuetifyIconsGroups (fa, md, mdi)
   })
-  Vue.use(Router)
 
   Vue.config.productionTip = false
 
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
+    vuetify,
     render: h => h(App)
   })
 })
diff --git a/demo/pages/Index.vue b/demo/pages/Index.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
+    <!-- :toolbar-attributes="{ color: 'yellow' }" -->
     <tiptap-vuetify
       v-model="content"
       :extensions="extensions"
-      :toolbar-attributes="{ color: 'yellow' }"
       placeholder="Write something …"
     />
 
@@ -29,33 +29,51 @@ export default {
     extensions: null,
     content: `
       <h1>Yay Headlines!</h1>
+      <blockquote>Test quote.</blockquote>
       <p>All these <strong>cool tags</strong> are working now.</p>
     `
   }),
   async created () {
-    const { Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList, ListItem,
+    const {
+      Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList, ListItem,
       Link, Blockquote, HardBreak, HorizontalRule, History
     } = await MAIN_MODULE
 
     this.extensions = [
-      new Heading({
-        levels: [1, 2, 3]
-      }),
-      new Bold(),
-      new Italic(),
-      new Strike(),
-      new Underline(),
-      new Code(),
-      new CodeBlock(),
-      new Paragraph(),
-      new BulletList(),
-      new OrderedList(),
-      new ListItem(),
-      new Link(),
-      new Blockquote(),
-      new HardBreak(),
-      new HorizontalRule(),
-      new History()
+      Code,
+      CodeBlock,
+      HorizontalRule,
+      Paragraph,
+      [History, {
+        // если не нужны кнокпи
+        options: { noActions: true }
+      }],
+      HardBreak, // позволяет переносить через Shift + Ctrl + Enter
+      Underline,
+      Strike,
+      Italic,
+      ListItem, // если нужно использовать список (BulletList, OrderedList)
+      BulletList,
+      OrderedList,
+      [Heading, {
+        // Опции которые попадают в расширение tiptap
+        options: {
+          levels: [1, 2, 3]
+        }
+      }],
+      // но опции не обязательно указывать если нужно чтобы renderIn: 'toolbar', это по умолчанию.
+      [Bold, {
+        renderIn: 'toolbar'
+      }],
+      [Blockquote, {
+        renderIn: 'bubbleMenu',
+        options: {
+          levels: [1, 2, 3]
+        }
+      }],
+      [Link, {
+        renderIn: 'bubbleMenu'
+      }]
     ]
   }
 }

diff --git a/package.json b/package.json
@@ -7,17 +7,18 @@
     "dev": "vue-cli-service serve ./demo/main.js",
     "build": "rollup -c --environment BUILD:production",
     "build-watch": "rollup -w -c",
-    "lint": "eslint . --ext .ts,.js,.vue --ignore-path .gitignore",
+    "lint": "eslint ./src --ext .ts,.js,.vue --ignore-path .gitignore",
     "lint-fix": "yarn lint --fix"
   },
   "dependencies": {
-    "tiptap": "^1.14.0",
+    "tiptap": "1.16.2",
     "tiptap-extensions": "^1.14.0"
   },
   "devDependencies": {
+    "vue-eslint-parser": "^6.0.4",
     "@babel/plugin-proposal-optional-chaining": "^7.2.0",
     "@fortawesome/fontawesome-free": "^5.8.1",
-    "@mdi/font": "^3.5.95",
+    "@mdi/font": "^4.4.95",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/commit-analyzer": "^6.1.0",
     "@semantic-release/git": "^7.0.8",
@@ -29,8 +30,8 @@
     "@vue/cli-plugin-typescript": "^3.5.1",
     "@vue/cli-service": "^3.5.1",
     "@zerollup/ts-transform-paths": "^1.7.0",
-    "commitizen": "^3.0.7",
-    "cross-env": "^5.2.0",
+    "commitizen": "^4.0.3",
+    "cross-env": "^6.0.3",
     "eslint": "^5.16.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.16.0",
@@ -40,13 +41,14 @@
     "eslint-plugin-vue": "^5.2.2",
     "postcss-preset-env": "^6.6.0",
     "rollup": "^1.7.0",
-    "rollup-plugin-alias": "^1.5.1",
-    "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-alias": "^2.0.1",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^2.0.3",
-    "rollup-plugin-terser": "^4.0.4",
-    "rollup-plugin-typescript2": "^0.20.1",
-    "rollup-plugin-vue": "^4.7.2",
+    "rollup-plugin-terser": "^5.1.2",
+    "rollup-plugin-typescript2": "^0.24.3",
+    "rollup-plugin-vue": "^5.0.1",
+    "sass-loader": "^7.0.0",
     "semantic-release": "^15.13.3",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
@@ -60,11 +62,11 @@
     "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.0.2",
     "vue-template-compiler": "^2.6.10",
-    "vuetify": "^1.5.7"
+    "vuetify": "^2.1.1"
   },
   "peerDependencies": {
     "vue": "^2.0.0",
-    "vuetify": "^1.4.0"
+    "vuetify": "^2.0.0"
   },
   "keywords": [
     "editor",

diff --git a/plan.txt b/plan.txt
@@ -1,10 +1,51 @@
+TODO: пользователь выбирает где рендерить
+TODO: i18n для нового текста
+
+Написать гайд как добавлять свои расширения и менять уже существующие.
+
 Важно:
-1. Обновить TypeScript с 3.4 RC до 3.4 https://devblogs.microsoft.com/typescript/announcing-typescript-3-4/
+1. Полностью абстрагироваться от конкретной библиотеки через которую происходит рендеринг. Т.е. не быть привязанным к
+   vuetify. Думаю сделать отдельный пакет (e.g. tiptap-abstract-render-core), который отвичает за логику не связанную с непосредственным отображением.
+   Пакеты tiptap-vuetify, tiptap-bootstrap и т.д. будут использовать этот отдельный пакет, будут передавать
+   (через аргумент, например, и нужно передвать много компонентов) свои .vue компоненты которые отвечают за рендеринг.
+
+   Отдельные расширения-пакеты, типа загрузки картинок также должны быть абстрагированны от рендеринга. Тут можно сделать как отдельные пакеты.
+   Но мне кажется можно сразу в одном пакете, просто подключать как отдельный бандл по необходимости, таким образом
+   не будет лишнего занимать в бандле проектов пользователей.
+
 2. Проверить не входят ли dependencies и pearDependencies в бандл. Если входят, то можно попробовать rollup-plugin-auto-external.
    Вроде лишнее (external) не входит.
 
+
+
+
 1. Сделать свое расширение которое добавляет смайлы в радактор, чтобы был список выбора смайлов, был поиск по ним.
 2. Сделать загрузку изображений.
  - чтобы была возможность выбирать между видами загрузки (драйверами, модулями, не знаю как назвать), по умолчания
    чтобы был imgur загрузка, но подумать как сделать чтобы загрузку можно было легко кастомизировать для своего бекенда
    и чтобы можно было добавить другой модуль (кроме imgur)
+3. Сделать действие кнопки более гибким: после нажатия может открываться модальное окно или появлятся другое bubble меню
+   (например, как сейчас работает добавление ссылки).
+4. Расширения могут отображаться не обязательно в тулбаре, сделать чтобы пользователь мог указывать где должно
+   указывать каждое расширение. Например, в тулбаре или в bubbleMenu, в будущем могут быть еще варианты.
+5. Сделать чтобы дополнительные расширения (e.g. загрузка изображений) шли в отдельном пакете.
+6. Возможность переопределять текст в i18n
+7. Гибкий способ использования компонента:
+
+<tiptap-vuetify>
+  <tiptap-vuetify-toolbar />
+
+  <tiptap-vuetify-content />
+</tiptap-vuetify>
+
+или
+
+<tiptap-vuetify>
+  <tiptap-vuetify-toolbar v-slot="data">
+    Опираясь на data пользователь может вывести данные
+  </tiptap-vuetify-toolbar>
+
+  <tiptap-vuetify-content v-slot="data">
+    Опираясь на data пользователь может вывести данные
+  </tiptap-vuetify-content>
+</tiptap-vuetify>
diff --git a/rollup.config.js b/rollup.config.js
@@ -9,7 +9,7 @@ import { join } from 'path'
 import postcssPresetEnv from 'postcss-preset-env'
 
 const isProduction = process.env.BUILD === 'production'
-const srtDir = join(__dirname, 'src')
+const srcDir = join(__dirname, 'src')
 const distDir = join(__dirname, 'dist')
 
 export default async () => [
@@ -58,7 +58,7 @@ async function getConfig ({
   plugins = []
 }) {
   return {
-    input: join(srtDir, 'main.ts'),
+    input: join(srcDir, 'main.ts'),
     output: {
       esModule,
       file,
@@ -90,17 +90,17 @@ async function getConfig ({
     plugins: [
       alias({
         resolve: ['.ts', '.js', '.vue'],
-        '~': srtDir
+        '~': srcDir
       }),
       // TODO раньшн resolve был после commonjs (но в github я видел в таком порядке)
       resolve({
-        extensions: ['.ts', '.js', '.json'],
+        extensions: ['.ts', '.js', '.vue', '.json'],
         customResolveOptions: {
           moduleDirectory: 'node_modules'
         }
       }),
       commonjs(),
-      // TODO autoprefixer
+      // TODO autoprefixer (update: разве в postcssPresetEnv его нет?)
       postcss({
         // TODO для каждого конфига генерируется свой main.css (одинаковый файл), исправить
         extract: join(distDir, 'main.css'),