Extension to allow spans

[IHIutch]

Having a little trouble with custom extensions. All I want to do is allow <span> tags inside a text block. Would anyone be able to point me in the right direction?

[sereneinserenade]

https://tiptap.dev/api/marks/text-style

[IHIutch]

What about if I'm writing a custom extension?

[benbucksch]

The stock TextStyle extension does not work for the purposes as stated here in the question, because TextStyle only allows <span style=""> with the style= attribute, but no <span> without the attribute.

[benbucksch]

The following worked for me:

import { Editor, StarterKit, Extension, Mark, mergeAttributes } from '@tiptap/core';


/** This allows a plain `<span>` (but not any attributes on it) */
export interface SpanOptions {
  HTMLAttributes: Record<string, any>,
}
export const Span = Mark.create<SpanOptions>({
  name: 'span',
  addOptions() {
    return {
      HTMLAttributes: {},
    };
  },
  parseHTML() {
    return [
      {
        tag: 'span',
        getAttrs: element => {
          return {};
        },
      },
    ]
  },
  renderHTML({ HTMLAttributes }) {
    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
  },
});

/** This allows a `class="..."` attribute specifically on `<p>` only. */
export const ParagraphAttributes = Extension.create({
  name: 'paragraph-attributes',
  addGlobalAttributes() {
    return [{
      types: [
        'paragraph',
      ],
      attributes: {
        class: {
          default: undefined,
        },
      },
    }];
  },
});

...
    let editor = new Editor({
      element: editorContentEl,
      extensions: [
        StarterKit,
        Span,
        ParagraphAttributes,
      ],
      content: html,
      ...
    });

[mortensassi]

The following worked for me:

import { Editor, StarterKit, Extension, Mark, mergeAttributes } from '@tiptap/core';


/** This allows a plain `<span>` (but not any attributes on it) */
export interface SpanOptions {
  HTMLAttributes: Record<string, any>,
}
export const Span = Mark.create<SpanOptions>({
  name: 'span',
  addOptions() {
    return {
      HTMLAttributes: {},
    };
  },
  parseHTML() {
    return [
      {
        tag: 'span',
        getAttrs: element => {
          return {};
        },
      },
    ]
  },
  renderHTML({ HTMLAttributes }) {
    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
  },
});

/** This allows a `class="..."` attribute specifically on `<p>` only. */
export const ParagraphAttributes = Extension.create({
  name: 'paragraph-attributes',
  addGlobalAttributes() {
    return [{
      types: [
        'paragraph',
      ],
      attributes: {
        class: {
          default: undefined,
        },
      },
    }];
  },
});

...
    let editor = new Editor({
      element: editorContentEl,
      extensions: [
        StarterKit,
        Span,
        ParagraphAttributes,
      ],
      content: html,
      ...
    });

if you want to add class attrs, you have to adjust the span element a little

import { mergeAttributes, Node } from '@tiptap/core'

export const Span = Node.create({
  name: 'span',

  group: 'inline',

  inline: true,

  content: 'text*',

  addAttributes() {
    return {
      class: {
        default: null,
      },
    }
  },

  parseHTML() {
    return [
      {
        tag: 'span',
        getAttrs: element => ({
          class: element.getAttribute('class'),
        }),
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ['span', mergeAttributes(HTMLAttributes), 0]
  },
})

and somewhere else you can set the classes like this:

addCommands() {
    return {
      setFileLink: attributes => ({ chain }) => {
        return chain()
          .insertContent({
            type: this.name,
            attrs: attributes,
            content: [
              {
                type: 'span',
                attrs: { class: 'file-link-title' },
                content: [{ type: 'text', text: attributes.title }],
              },
              {
                type: 'span',
                attrs: { class: 'file-link-size' },
                content: [{ type: 'text', text: attributes.filesize }],
              },
            ],
          })
          .run()
      },
    }
  },