Community Extension: tiptap-extension-section

[KID-1912]

Description

Make tiptap support section tags, which provide predefined styles for content.

Installation

npm install tiptap-extension-section -S

Usage

import Section from "tiptap-extension-section";

const editor = new Editor({
  element: document.querySelector(".editor"),
  extensions: [StarterKit, Section],
});

const html = `
  <section style="display: flex;flex-direction: column;align-items: center;text-align: center;">
    <section style="color: #fff;border-radius: 4px;font-weight: bold;min-width: 30px;padding: 0 4px;line-height: 30px;background-color: grey;">
      <p>01</p>
    </section>
    <section style="color: grey">
      <p><strong>公司宣传手册</strong></p>
    </section>
    <section style="color: grey">
      <p>
        <span style="font-size: 12px">COMPANY BROCHURE</span>
      </p>
    </section>
  </section>`;
editor
  .chain()
  .focus()
  .insertContent(html, {
    parseOptions: {
      preserveWhitespace: false,
    },
  })
  .run();

Type

Node

Other

More details see：https://github.com/KID-1912/tiptap-extension-section