feat: ✨ spellcheck attribute for editor

src/components/ElementTiptap.vue

@@ -43,7 +43,8 @@
 import { Component, Prop, Watch, Model, Mixins } from 'vue-property-decorator';
 import { Editor, EditorContent, Extension, EditorUpdateEvent } from 'tiptap';
 
-import { Placeholder } from '@/extensions';
+import { Placeholder } from 'tiptap-extensions';
+import ContentAttributes from '@/extensions/content_attributes';
 import { capitalize } from '@/utils/shared';
 import { EVENTS } from '@/constants';
 import i18nMixin from '@/mixins/i18nMixin';
@@ -100,6 +101,12 @@ export default class ElTiptap extends Mixins(i18nMixin) {
   })
   readonly readonly!: boolean;
 
+  @Prop({
+    type: Boolean,
+    default: undefined,
+  })
+  readonly spellcheck!: boolean | undefined;
+
   editor: Editor | null = null;
   emitAfterOnUpdate: boolean = false;
 
@@ -157,7 +164,18 @@ export default class ElTiptap extends Mixins(i18nMixin) {
   }
 
   private generateExtensions (): Array<Extension> {
-    const extensions = this.extensions;
+    let extensions: Extension[] = [];
+
+    const spellcheck = this.spellcheck == null
+      ? this.$elementTiptapPlugin.spellcheck
+      : this.spellcheck;
+
+    extensions = extensions.concat(
+      new ContentAttributes({
+        spellcheck,
+      }),
+    );
+    extensions = extensions.concat([...this.extensions]);
 
     if (this.placeholder) {
       extensions.push(

src/extensions/content_attributes.ts

@@ -0,0 +1,26 @@
+import { Extension } from 'tiptap';
+import { Plugin } from 'prosemirror-state';
+
+export default class ContentAttributes extends Extension {
+  get name () {
+    return 'content_attributes';
+  }
+
+  get defaultOptions () {
+    return {
+      spellcheck: true,
+    };
+  }
+
+  get plugins () {
+    return [
+      new Plugin({
+        props: {
+          attributes: {
+            ...this.options,
+          },
+        },
+      }),
+    ];
+  }
+}

src/extensions/index.ts

@@ -4,7 +4,6 @@ export {
   Code,
   HardBreak,
   TrailingNode,
-  Placeholder,
   TableHeader,
   TableCell,
   TableRow,

src/index.ts

@@ -4,12 +4,18 @@ import ElementTiptap from '@/components/ElementTiptap.vue';
 
 const ElementTiptapPlugin: ElementTiptapPluginInterface = {
   installed: false,
+  spellcheck: true,
 
   install (Vue, options = {}) {
     const { lang } = options;
     if (lang) useLang(lang);
 
+    this.spellcheck = options.spellcheck == null
+      ? true
+      : options.spellcheck;
+
     Vue.component('el-tiptap', ElementTiptap);
+    Vue.prototype.$elementTiptapPlugin = this;
 
     this.installed = true;
   },

types/index.d.ts

@@ -2,11 +2,13 @@ import { VueConstructor } from 'vue';
 
 export interface OptionsInterface {
   lang?: string;
+  spellcheck?: boolean;
 }
 
 export interface ElementTiptapPluginInterface {
   installed: boolean;
   install (Vue: VueConstructor, options: OptionsInterface): void;
+  spellcheck: boolean;
 }
 
 export interface MenuBtnComponentOptions {
@@ -21,3 +23,9 @@ export interface MenuBtnView {
   // TODO: tiptap menuData
   menuBtnView (menuData: any): MenuBtnViewType;
 }
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $elementTiptapPlugin: ElementTiptapPluginInterface;
+  }
+}