How to use tiptap-extensions - 10 common examples

// пополнение доступных действий для конкретного renderIn
      this.availableActions[paramsFinal.renderIn].push(...extension.availableActions)

      // Сбор нативных расширений
      if (extension.nativeExtensionInstance) {
        nativeExtensionsInstances.push(extension.nativeExtensionInstance)
      }
    })
    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
    })

setup(props) {
    const state = reactive({
      editor: useEditor({
        extensions: [
          new OnEscape(() => {
            state.editing = false
            state.editor.blur()
          }),
        ].concat(
          props.placeholder ? new Placeholder({
            emptyNodeText: props.placeholder,
            emptyNodeClass: 'sm-RichText-placeholder',
            showOnlyWhenEditable: false,
          }) : [],
        ),
        editable: !props.readonly,
        content: props.content,
        onUpdate: async(content: string) => {
          state.saveState = saveStates.SAVING
          try {
            // wait a minimum of 500ms for the transition
            await Promise.all([
              props.update(content),
              new Promise(resolve => setTimeout(resolve, 500)),
            ])
            state.saveState = saveStates.SAVED

marks = {},
        nodes = {},
        tools = {}
      } = this.schema
      return [
        // schema.marks:
        marks.bold && new Bold(),
        marks.italic && new Italic(),
        marks.underline && new Underline(),
        marks.strike && new Strike(),
        marks.small && new Small(),
        marks.code && new Code(),
        marks.link && new LinkWithTitle(),

        // schema.nodes:
        nodes.blockquote && new Blockquote(),
        nodes.codeBlock && new CodeBlock(),
        new HardBreak(), // TODO: Should this always on?
        nodes.heading && new Heading({ levels: nodes.heading }),
        nodes.horizontalRule && new HorizontalRule(),
        (nodes.orderedList || nodes.bulletList) && new ListItem(),
        nodes.bulletList && new BulletList(),
        nodes.orderedList && new OrderedList(),
        // TODO:
        // nodes.todoList && new TodoItem(),
        // nodes.todoList && new TodoList(),

        // schema.tools:
        tools.history && new History()
      ].filter(extension => !!extension)
    },

marks.bold && new Bold(),
        marks.italic && new Italic(),
        marks.underline && new Underline(),
        marks.strike && new Strike(),
        marks.small && new Small(),
        marks.code && new Code(),
        marks.link && new LinkWithTitle(),

        // schema.nodes:
        nodes.blockquote && new Blockquote(),
        nodes.codeBlock && new CodeBlock(),
        new HardBreak(), // TODO: Should this always on?
        nodes.heading && new Heading({ levels: nodes.heading }),
        nodes.horizontalRule && new HorizontalRule(),
        (nodes.orderedList || nodes.bulletList) && new ListItem(),
        nodes.bulletList && new BulletList(),
        nodes.orderedList && new OrderedList(),
        // TODO:
        // nodes.todoList && new TodoItem(),
        // nodes.todoList && new TodoList(),

        // schema.tools:
        tools.history && new History()
      ].filter(extension => !!extension)
    },

} = this.schema
      return [
        // schema.marks:
        marks.bold && new Bold(),
        marks.italic && new Italic(),
        marks.underline && new Underline(),
        marks.strike && new Strike(),
        marks.small && new Small(),
        marks.code && new Code(),
        marks.link && new LinkWithTitle(),

        // schema.nodes:
        nodes.blockquote && new Blockquote(),
        nodes.codeBlock && new CodeBlock(),
        new HardBreak(), // TODO: Should this always on?
        nodes.heading && new Heading({ levels: nodes.heading }),
        nodes.horizontalRule && new HorizontalRule(),
        (nodes.orderedList || nodes.bulletList) && new ListItem(),
        nodes.bulletList && new BulletList(),
        nodes.orderedList && new OrderedList(),
        // TODO:
        // nodes.todoList && new TodoItem(),
        // nodes.todoList && new TodoList(),

        // schema.tools:
        tools.history && new History()
      ].filter(extension => !!extension)
    },

// schema.marks:
        marks.bold && new Bold(),
        marks.italic && new Italic(),
        marks.underline && new Underline(),
        marks.strike && new Strike(),
        marks.small && new Small(),
        marks.code && new Code(),
        marks.link && new LinkWithTitle(),

        // schema.nodes:
        nodes.blockquote && new Blockquote(),
        nodes.codeBlock && new CodeBlock(),
        new HardBreak(), // TODO: Should this always on?
        nodes.heading && new Heading({ levels: nodes.heading }),
        nodes.horizontalRule && new HorizontalRule(),
        (nodes.orderedList || nodes.bulletList) && new ListItem(),
        nodes.bulletList && new BulletList(),
        nodes.orderedList && new OrderedList(),
        // TODO:
        // nodes.todoList && new TodoItem(),
        // nodes.todoList && new TodoList(),

        // schema.tools:
        tools.history && new History()
      ].filter(extension => !!extension)
    },

marks.italic && new Italic(),
        marks.underline && new Underline(),
        marks.strike && new Strike(),
        marks.small && new Small(),
        marks.code && new Code(),
        marks.link && new LinkWithTitle(),

        // schema.nodes:
        nodes.blockquote && new Blockquote(),
        nodes.codeBlock && new CodeBlock(),
        new HardBreak(), // TODO: Should this always on?
        nodes.heading && new Heading({ levels: nodes.heading }),
        nodes.horizontalRule && new HorizontalRule(),
        (nodes.orderedList || nodes.bulletList) && new ListItem(),
        nodes.bulletList && new BulletList(),
        nodes.orderedList && new OrderedList(),
        // TODO:
        // nodes.todoList && new TodoItem(),
        // nodes.todoList && new TodoList(),

        // schema.tools:
        tools.history && new History()
      ].filter(extension => !!extension)
    },

createExtensions() {
      const {
        marks = {},
        nodes = {},
        tools = {}
      } = this.schema
      return [
        // schema.marks:
        marks.bold && new Bold(),
        marks.italic && new Italic(),
        marks.underline && new Underline(),
        marks.strike && new Strike(),
        marks.small && new Small(),
        marks.code && new Code(),
        marks.link && new LinkWithTitle(),

        // schema.nodes:
        nodes.blockquote && new Blockquote(),
        nodes.codeBlock && new CodeBlock(),
        new HardBreak(), // TODO: Should this always on?
        nodes.heading && new Heading({ levels: nodes.heading }),
        nodes.horizontalRule && new HorizontalRule(),
        (nodes.orderedList || nodes.bulletList) && new ListItem(),
        nodes.bulletList && new BulletList(),
        nodes.orderedList && new OrderedList(),
        // TODO:
        // nodes.todoList && new TodoItem(),

createExtensions() {
      const {
        marks = {},
        nodes = {},
        tools = {}
      } = this.schema
      return [
        // schema.marks:
        marks.bold && new Bold(),
        marks.italic && new Italic(),
        marks.underline && new Underline(),
        marks.strike && new Strike(),
        marks.small && new Small(),
        marks.code && new Code(),
        marks.link && new LinkWithTitle(),

        // schema.nodes:
        nodes.blockquote && new Blockquote(),
        nodes.codeBlock && new CodeBlock(),
        new HardBreak(), // TODO: Should this always on?
        nodes.heading && new Heading({ levels: nodes.heading }),
        nodes.horizontalRule && new HorizontalRule(),
        (nodes.orderedList || nodes.bulletList) && new ListItem(),
        nodes.bulletList && new BulletList(),
        nodes.orderedList && new OrderedList(),

createExtensions() {
      const {
        marks = {},
        nodes = {},
        tools = {}
      } = this.schema
      return [
        // schema.marks:
        marks.bold && new Bold(),
        marks.italic && new Italic(),
        marks.underline && new Underline(),
        marks.strike && new Strike(),
        marks.small && new Small(),
        marks.code && new Code(),
        marks.link && new LinkWithTitle(),

        // schema.nodes:
        nodes.blockquote && new Blockquote(),
        nodes.codeBlock && new CodeBlock(),
        new HardBreak(), // TODO: Should this always on?
        nodes.heading && new Heading({ levels: nodes.heading }),
        nodes.horizontalRule && new HorizontalRule(),
        (nodes.orderedList || nodes.bulletList) && new ListItem(),
        nodes.bulletList && new BulletList(),
        nodes.orderedList && new OrderedList(),
        // TODO:
        // nodes.todoList && new TodoItem(),
        // nodes.todoList && new TodoList(),

        // schema.tools: