How to use tiptap - 10 common examples

initEditor({ doc, version }) {
      if (this.editor) {
        this.editor.destroy()
      }

      this.editor = new Editor({
        content: doc,
        extensions: [
          new Collab({
            version,
            clientID: this.clientID,
          }),
        ],
        // onTransaction: transaction => {
        //   console.log('onTransaction')
        //   this.newState = this.editor.state.apply(transaction)
        //   this.editor.view.updateState(this.state.edit)
        //   return false
        // },
        onUpdate: ({ state }) => {
          this.getSendableSteps(state)
        },

})
    const extensions = [
      ...this[PROPS.NATIVE_EXTENSIONS],
      ...nativeExtensionsInstances
    ]

    if (this[PROPS.PLACEHOLDER]) {
      // !!!!!!!!!!!!!!!!! TODO ONLY FOR TEST (update: не помню что это, возможно и не нужно убирать код ниже)
      extensions.push(new Placeholder({
        emptyNodeClass: 'tiptap-vuetify-editor__paragraph--is-empty',
        emptyNodeText: this[PROPS.PLACEHOLDER],
        showOnlyWhenEditable: true
      }))
    }

    this.editor = new Editor({
      extensions,
      ...this[PROPS.EDITOR_PROPERTIES],
      content: this[PROPS.VALUE],
      onUpdate: this.onUpdate.bind(this)
    })

    this.$emit(EVENTS.INIT, {
      editor: this.editor
    })
  }

onInit({ doc, version }) {
      this.loading = false

      if (this.editor) {
        this.editor.destroy()
      }

      this.editor = new Editor({
        content: doc,
        extensions: [
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new Bold(),
          new Code(),
          new Italic(),
          new History(),
          new Collaboration({
            // the initial version we start with
            // version is an integer which is incremented with every change
            version,
            // debounce changes so we can save some requests
            debounce: 250,
            // onSendable is called whenever there are changed we have to send to our server
            onSendable: ({ sendable }) => {

get plugins() {
    return [
      new Plugin({
        state: {
          init(_, { doc }) {
            return getDecorations(doc)
          },
          apply(tr, set) {
            // TODO: find way to cache decorations
            // see: https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493
            if (tr.docChanged) {
              return getDecorations(tr.doc)
            }
            return set.map(tr.mapping, tr.doc)
          },
        },
        props: {
          decorations(state) {
            return this.getState(state)

created() {
    this.editor = new Editor({
      content: this.value || '',
      doc: this.doc,
      extensions: [
        // Hashtags must come first, see
        // https://github.com/scrumpy/tiptap/issues/421#issuecomment-523037460
        ...this.optionalExtensions,
        ...defaultExtensions(this),
        new EventHandler(),
        new History(),
      ],
      onUpdate: e => {
        clearTimeout(throttleInputEvent)
        throttleInputEvent = setTimeout(() => this.onUpdate(e), 300)
      },
    })
  },

get plugins() {
    return [
      new Plugin({
        props: {
          transformPastedText(text) {
            return text.trim()
          },
          transformPastedHTML(html) {
            html = html
              // remove all tags with "space only"
              .replace(/<[a-z-]+>[\s]+<\/[a-z-]+>/gim, '')
              // remove all iframes
              .replace(/(]*)(>)[^>]*\/*>/gim, '')
              .replace(/[\n]{3,}/gim, '\n\n')
              .replace(/(\r\n|\n\r|\r|\n)/g, '<br>$1')

              // replace all p tags with line breaks (and spaces) only by single linebreaks
              // limit linebreaks to max 2 (equivalent to html "br" linebreak)
              .replace(/(<br>\s*){2,}/gim, '<br>')

get plugins() {
    return [
      new Plugin({
        state: {
          init() {
            return DecorationSet.empty
          },
          apply: (tr, old) => {
            if (this._updating
              || this.options.searching
              || (tr.docChanged && this.options.alwaysSearch)
            ) {
              return this.createDeco(tr.doc)
            }

            if (tr.docChanged) {
              return old.map(tr.mapping, tr.doc)
            }

get plugins() {
    return [
      new Plugin({
        props: {
          handleDOMEvents: {
            drop(view, event) {
              const hasFiles = event.dataTransfer
              && event.dataTransfer.files
              && event.dataTransfer.files.length

              if (!hasFiles) {
                return
              }

              const images = Array
                .from(event.dataTransfer.files)
                .filter(file => (/image/i).test(file.type))

              if (images.length === 0) {

data() {
    return {
      editor: new Editor({
        extensions: [
          new CodeBlockHighlight({
            languages: {
              javascript,
              css,
            },
          }),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new Bold(),
          new Code(),
          new Italic(),
        ],
        content: `
          <h2>
            Code Highlighting</h2>

data() {
    return {
      editor: new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new CodeBlock(),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new ListItem(),
          new OrderedList(),
          new TodoItem(),
          new TodoList(),
          new Link(),
          new Bold(),
          new Code(),
          new Italic(),
          new History(),
        ],