Merge pull request #14 from iliyaZelenko/prepare_to_new_version

New version release

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

.eslintrc.js

@@ -49,13 +49,15 @@ module.exports = {
     '@typescript-eslint/no-var-requires': OFF,
     // allows 'any' type
     '@typescript-eslint/no-explicit-any': OFF,
+    // allows non null assertion
+    '@typescript-eslint/no-non-null-assertion': OFF,
     // tslint config integration for eslint
     // '@typescript-eslint/tslint/config': [WARNING, {
     //   'lintFile': './tslint.json', // path to tslint.json of your project
     // }]
   }
 }
 
-function isTruthy (value) {
-  return value && ['1', 'true'].includes(value.toLowerCase())
-}
+// function isTruthy (value) {
+//   return value && ['1', 'true'].includes(value.toLowerCase())
+// }

.gitignore

@@ -1,5 +1,8 @@
 /node_modules/
 /dist/
+/.yalc/
+
+yalc.lock
 
 # Log files
 *.log*

README.md

@@ -59,6 +59,9 @@ import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
 // don't forget to import styles
 import 'tiptap-vuetify/dist/main.css'
 
+// first it
+Vue.use(Vuetify)
+// AFTER Vue.use(Vuetify) !!!
 Vue.use(TiptapVuetifyPlugin, {
   // optional, default to 'md' (default vuetify icons before v2.0.0)
   iconsGroup: 'md'
@@ -145,6 +148,18 @@ Or
 
 ## Props
 
+### placeholder
+
+Placeholder is displayed when there is no content in the editor.
+
+How to use:
+
+```vue
+  <tiptap-vuetify
+    placeholder="Write something …"
+  />
+```
+
 ### extensions
 
 You can use the necessary extensions. The corresponding buttons are added automatically
@@ -281,3 +296,5 @@ You can add content after the toolbar.
 - images uploading (free hosting by default)
 - emoticons
 - tests
+- custom content for bubble menu
+- choose where the extension buttons should be displayed: in the toolbar or in the bubble menu

demo/config.js

@@ -0,0 +1,2 @@
+export const MAIN_MODULE = import('~/main') //  '../dist/bundle-cjs'
+// export const MAIN_MODULE = import('../dist/bundle-esm') // '../dist/bundle-cjs'

demo/main.js

@@ -10,20 +10,22 @@ import '@fortawesome/fontawesome-free/css/all.css'
 import App from './App'
 import router from './router'
 
-import { TiptapVuetifyPlugin } from '../dist/bundle-cjs'
 import '../dist/main.css'
+import { MAIN_MODULE } from './config'
 
-Vue.use(TiptapVuetifyPlugin, {
-  iconsGroup: 'md'
-})
-Vue.use(Vuetify)
-Vue.use(Router)
+MAIN_MODULE.then(({ TiptapVuetifyPlugin }) => {
+  Vue.use(Vuetify)
+  Vue.use(TiptapVuetifyPlugin, {
+    iconsGroup: 'fa'
+  })
+  Vue.use(Router)
 
-Vue.config.productionTip = false
+  Vue.config.productionTip = false
 
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  render: h => h(App)
+  /* eslint-disable no-new */
+  new Vue({
+    el: '#app',
+    router,
+    render: h => h(App)
+  })
 })

demo/pages/Index.vue

@@ -4,10 +4,11 @@
       v-model="content"
       :extensions="extensions"
       :toolbar-attributes="{ color: 'yellow' }"
+      placeholder="Write something …"
     />
 
     <br><br>
-    <h1>Preview {{ $vuetify.lang.current }}</h1>
+    <h1>Preview</h1>
     <hr>
 
     <div
@@ -18,14 +19,25 @@
 </template>
 
 <script>
-import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList,
-  ListItem, Link, Blockquote, HardBreak, HorizontalRule, History
-} from '../../dist/bundle-cjs' //  // '../../dist/bundle-umd'
+import { MAIN_MODULE } from '../config'
 
 export default {
-  components: { TiptapVuetify },
+  components: {
+    TiptapVuetify: () => MAIN_MODULE.then(({ TiptapVuetify }) => TiptapVuetify)
+  },
   data: () => ({
-    extensions: [
+    extensions: null,
+    content: `
+      <h1>Yay Headlines!</h1>
+      <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,
+      Link, Blockquote, HardBreak, HorizontalRule, History
+    } = await MAIN_MODULE
+
+    this.extensions = [
       new Heading({
         levels: [1, 2, 3]
       }),
@@ -44,11 +56,7 @@ export default {
       new HardBreak(),
       new HorizontalRule(),
       new History()
-    ],
-    content: `
-      <h1>Yay Headlines!</h1>
-      <p>All these <strong>cool tags</strong> are working now.</p>
-    `
-  })
+    ]
+  }
 }
 </script>

package.json

@@ -38,6 +38,7 @@
     "eslint-plugin-promise": "^4.1.1",
     "eslint-plugin-standard": "^4.0.0",
     "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",
@@ -91,6 +92,7 @@
   "typings": "dist/main.d.ts",
   "files": [
     "dist/*",
-    "types/*"
+    "types/*",
+    "src/*"
   ]
 }

rollup.config.js

@@ -6,6 +6,7 @@ import postcss from 'rollup-plugin-postcss'
 import resolve from 'rollup-plugin-node-resolve'
 import ttypescript from 'ttypescript'
 import { join } from 'path'
+import postcssPresetEnv from 'postcss-preset-env'
 
 const isProduction = process.env.BUILD === 'production'
 const srtDir = join(__dirname, 'src')
@@ -91,17 +92,22 @@ async function getConfig ({
         resolve: ['.ts', '.js', '.vue'],
         '~': srtDir
       }),
-      commonjs(),
+      // TODO раньшн resolve был после commonjs (но в github я видел в таком порядке)
       resolve({
+        extensions: ['.ts', '.js', '.json'],
         customResolveOptions: {
           moduleDirectory: 'node_modules'
         }
       }),
+      commonjs(),
       // TODO autoprefixer
       postcss({
         // TODO для каждого конфига генерируется свой main.css (одинаковый файл), исправить
         extract: join(distDir, 'main.css'),
-        minimize: true
+        minimize: true,
+        plugins: [
+          postcssPresetEnv
+        ]
       }),
       typescript({
         // это фиксит Unknown object type "asyncfunction"

src/components/Main.vue → src/components/TiptapVuetify.vue

@@ -49,6 +49,9 @@ import AbstractExtensionAdapter from '~/extensionAdapters/AbstractExtensionAdapt
 import { PROPS, EVENTS } from '~/const'
 import Bubble from '~/components/Bubble.vue'
 import { Link } from '~/main'
+import {
+  Placeholder
+} from 'tiptap-extensions'
 
 @Component({
   components: {
@@ -57,13 +60,16 @@ import { Link } from '~/main'
     Toolbar
   }
 })
-export default class Main extends Vue {
+export default class TiptapVuetify extends Vue {
   @Prop({ type: String, default: '' })
   readonly [PROPS.VALUE]: string
 
   @Prop({ type: Array, default: () => [] })
   readonly [PROPS.EXTENSIONS]: any
 
+  @Prop({ type: String })
+  readonly [PROPS.PLACEHOLDER]: string
+
   @Prop({
     type: [Array, Object],
     default: () => ({})
@@ -100,7 +106,7 @@ export default class Main extends Vue {
       return
     }
 
-    this.editor.setContent(val)
+    if (this.editor) this.editor.setContent(val)
   }
 
   mounted () {
@@ -115,24 +121,14 @@ export default class Main extends Vue {
     })
     const extensions = [
       ...this[PROPS.NATIVE_EXTENSIONS],
-      // new Blockquote(),
-      // new CodeBlock(),
-      // new HardBreak(),
-      // new Heading({ levels: [1, 2, 3] }),
-      // new BulletList(),
-      // new OrderedList(),
-      // new ListItem(),
-      /// / new TodoItem(),
-      /// / new TodoList(),
-      // new Bold(),
-      // new Code(),
-      // new Italic(),
-      // new Link(),
-      // new Strike(),
-      // new Underline(),
-      // new History(),
-      // new HorizontalRule(),
-      ...extensionsInstances
+      ...extensionsInstances,
+
+      // TODO ONLY FOR TEST
+      new Placeholder({
+        emptyNodeClass: 'tiptap-vuetify-editor__paragraph--is-empty',
+        emptyNodeText: this[PROPS.PLACEHOLDER],
+        showOnlyWhenEditable: true
+      })
     ]
 
     this.editor = new Editor({
@@ -146,13 +142,14 @@ export default class Main extends Vue {
       editor: this.editor
     })
   }
+
   onUpdate (info) {
     this.emitAfterOnUpdate = true
     this.$emit(EVENTS.INPUT, info.getHTML(), info)
   }
 
   beforeDestroy () {
-    this.editor.destroy()
+    if (this.editor) this.editor.destroy()
   }
 }
 </script>
@@ -166,6 +163,7 @@ export default class Main extends Vue {
   /* Элемент не обязательно содрежится в .tiptap-vuetify-editor, может использоваться для отображения результата
   редактора в не редактора */
   .tiptap-vuetify-editor__content
+    transition: all 2s;
     overflow: auto !important;
     padding: 5px;
 
@@ -195,4 +193,14 @@ export default class Main extends Vue {
       margin-bottom: 16px !important;
       /* без этого пустой <p> в превью не будет занимать пространство (чтобы был вид пустой строки) как он это делает в редакторе */
       min-height: 1rem;
+
+      // placeholder
+      &.tiptap-vuetify-editor__paragraph--is-empty
+        &:first-child::before
+          content: attr(data-empty-text);
+          float: left;
+          color: #aaa;
+          pointer-events: none;
+          height: 0;
+          font-style: italic;
 </style>

src/const.ts

@@ -1,3 +1,7 @@
+export const PACKAGE_NAME = 'tiptap-vuetify'
+
+export const VuetifyVuePrototypeProperty = '$vuetify'
+
 export const EVENTS = {
   INPUT: 'input' as const,
   INIT: 'init' as const
@@ -8,5 +12,6 @@ export const PROPS = {
   EXTENSIONS: 'extensions' as const,
   TOOLBAR_ATTRIBUTES: 'toolbarAttributes' as const,
   EDITOR_PROPERTIES: 'editorProperties' as const,
-  NATIVE_EXTENSIONS: 'nativeExtensions' as const
+  NATIVE_EXTENSIONS: 'nativeExtensions' as const,
+  PLACEHOLDER: 'placeholder' as const
 }

src/extensionAdapters/AbstractExtensionAdapter.ts

@@ -16,7 +16,8 @@ export default abstract class AbstractExtensionAdapter {
     return undefined
   }
 
-  protected constructor (protected options, protected extensionClass: Extension | null) {
+  // extensionClass: Extension | null
+  protected constructor (protected options, protected extensionClass) {
     if (extensionClass) {
       // eslint-disable-next-line
       this.extensionInstance = new extensionClass(options)

src/extensionAdapters/Link.ts

@@ -6,7 +6,7 @@ import VuetifyIcon from '~/extensionAdapters/icons/VuetifyIcon'
 export const icons = {
   save: {
     [VuetifyIconsGropus.md]: new VuetifyIcon('check'),
-    [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-strikethrough ' + faIconsSize),
+    [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-check ' + faIconsSize),
     [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-check')
   },
   cancel: {
@@ -21,7 +21,7 @@ export const icons = {
   },
   linkAdd: {
     [VuetifyIconsGropus.md]: new VuetifyIcon('link'),
-    [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-strikethrough ' + faIconsSize),
+    [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-link ' + faIconsSize),
     [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-link-plus')
   }
 }