grapesjs-tailwind-iconify/src/blocks/tailwind.js

Enhanced fork of grapesjs-tailwind with Custom Components Manager and Iconify integration

import { source as a1 } from './data/cta-1'
import { source as a1s } from './data/icons/cta-1'
import { source as a2 } from './data/cta-2'
import { source as a2s } from './data/icons/cta-2'
import { source as a3 } from './data/cta-3'
import { source as a3s } from './data/icons/cta-3'
import { source as a4 } from './data/cta-4'
import { source as a4s } from './data/icons/cta-4'
import { source as b1 } from './data/blog-1'
import { source as b1s } from './data/icons/blog-2'
import { source as b2 } from './data/blog-2'
import { source as b2s } from './data/icons/blog-1'
import { source as b3 } from './data/blog-3'
import { source as b3s } from './data/icons/blog-3'
import { source as b4 } from './data/blog-4'
import { source as b4s } from './data/icons/blog-4'
import { source as b5 } from './data/blog-5'
import { source as b5s } from './data/icons/blog-5'
import { source as c1 } from './data/contact-1'
import { source as c1s } from './data/icons/contact-1'
import { source as c2 } from './data/contact-2'
import { source as c2s } from './data/icons/contact-2'
import { source as c3 } from './data/contact-3'
import { source as c3s } from './data/icons/contact-3'
import { source as d1 } from './data/content-1'
import { source as d1s } from './data/icons/content-1'
import { source as d2 } from './data/content-2'
import { source as d2s } from './data/icons/content-2'
import { source as d3 } from './data/content-3'
import { source as d3s } from './data/icons/content-3'
import { source as d4 } from './data/content-4'
import { source as d4s } from './data/icons/content-4'
import { source as d5 } from './data/content-5'
import { source as d5s } from './data/icons/content-5'
import { source as d6 } from './data/content-6'
import { source as d6s } from './data/icons/content-6'
import { source as d7 } from './data/content-7'
import { source as d7s } from './data/icons/content-7'
import { source as d8 } from './data/content-8'
import { source as d8s } from './data/icons/content-8'
import { source as e1 } from './data/ecommerce-1'
import { source as e1s } from './data/icons/ecommerce-1'
import { source as e2 } from './data/ecommerce-2'
import { source as e2s } from './data/icons/ecommerce-2'
import { source as e3 } from './data/ecommerce-3'
import { source as e3s } from './data/icons/ecommerce-3'
import { source as f1 } from './data/feature-1'
import { source as f1s } from './data/icons/feature-1'
import { source as f2 } from './data/feature-2'
import { source as f2s } from './data/icons/feature-2'
import { source as f3 } from './data/feature-3'
import { source as f3s } from './data/icons/feature-3'
import { source as f4 } from './data/feature-4'
import { source as f4s } from './data/icons/feature-4'
import { source as f5 } from './data/feature-5'
import { source as f5s } from './data/icons/feature-5'
import { source as f6 } from './data/feature-6'
import { source as f6s } from './data/icons/feature-6'
import { source as f7 } from './data/feature-7'
import { source as f7s } from './data/icons/feature-7'
import { source as f8 } from './data/feature-8'
import { source as f8s } from './data/icons/feature-8'
import { source as g1 } from './data/gallery-1'
import { source as g1s } from './data/icons/gallery-1'
import { source as g2 } from './data/gallery-2'
import { source as g2s } from './data/icons/gallery-2'
import { source as g3 } from './data/gallery-3'
import { source as g3s } from './data/icons/gallery-3'
import { source as h1 } from './data/header-1'
import { source as h1s } from './data/icons/header-1'
import { source as h2 } from './data/header-2'
import { source as h2s } from './data/icons/header-2'
import { source as h3 } from './data/header-3'
import { source as h3s } from './data/icons/header-3'
import { source as h4 } from './data/header-4'
import { source as h4s } from './data/icons/header-4'
import { source as m1 } from './data/testimonial-1'
import { source as m1s } from './data/icons/testimonial-1'
import { source as m2 } from './data/testimonial-2'
import { source as m2s } from './data/icons/testimonial-2'
import { source as m3 } from './data/testimonial-3'
import { source as m3s } from './data/icons/testimonial-3'
import { source as p1 } from './data/pricing-1'
import { source as p1s } from './data/icons/pricing-1'
import { source as p2 } from './data/pricing-2'
import { source as p2s } from './data/icons/pricing-2'
import { source as q1 } from './data/step-1'
import { source as q1s } from './data/icons/step-1'
// import { source as q2 } from './data/step-2'
// import q2s from './data/step-2.svg'
import { source as q3 } from './data/step-3'
import { source as q3s } from './data/icons/step-3'
import { source as r1 } from './data/hero-1'
import { source as r1s } from './data/icons/hero-1'
import { source as r2 } from './data/hero-2'
import { source as r2s } from './data/icons/hero-2'
import { source as r3 } from './data/hero-3'
import { source as r3s } from './data/icons/hero-3'
import { source as r4 } from './data/hero-4'
import { source as r4s } from './data/icons/hero-4'
import { source as r5 } from './data/hero-5'
import { source as r5s } from './data/icons/hero-5'
import { source as r6 } from './data/hero-6'
import { source as r6s } from './data/icons/hero-6'
import { source as s1 } from './data/statistic-1'
import { source as s1s } from './data/icons/statistic-1'
import { source as s2 } from './data/statistic-2'
import { source as s2s } from './data/icons/statistic-2'
import { source as s3 } from './data/statistic-3'
import { source as s3s } from './data/icons/statistic-3'
import { source as t1 } from './data/team-1'
import { source as t1s } from './data/icons/team-1'
import { source as t2 } from './data/team-2'
import { source as t2s } from './data/icons/team-2'
import { source as t3 } from './data/team-3'
import { source as t3s } from './data/icons/team-3'
import { source as z1 } from './data/footer-1'
import { source as z1s } from './data/icons/footer-1'
import { source as z2 } from './data/footer-2'
import { source as z2s } from './data/icons/footer-2'
import { source as z3 } from './data/footer-3'
import { source as z3s } from './data/icons/footer-3'
import { source as z4 } from './data/footer-4'
import { source as z4s } from './data/icons/footer-4'
import { source as z5 } from './data/footer-5'
import { source as z5s } from './data/icons/footer-5'

const getSvgHtml = (svg) => {
  if (typeof window === 'undefined') return ''
  svg.setAttribute('width', '100%')
  svg.setAttribute('height', '100%')
  return svg.outerHTML
}

const sources = [
  {
    id: 'blog-block-1',
    // class: 'fa fa-map-o',
    class: '',
    label: b1s,
    // label: 'b2s().outerHTML',
    content: b1,
    category: 'Blog',
    // order: 1
  },
  {
    id: 'blog-block-2',
    class: '',
    label: b2s,
    content: b2,
    category: 'Blog',
    // order: 1
  },
  {
    id: 'blog-block-3',
    class: '',
    label: b3s,
    content: b3,
    category: 'Blog',
    // order: 1
  },
  {
    id: 'blog-block-4',
    class: '',
    label: b4s,
    content: b4,
    category: 'Blog',
    // order: 1
  },
  {
    id: 'blog-block-5',
    class: '',
    label: b5s,
    content: b5,
    category: 'Blog',
    // order: 1
  },
  {
    id: 'contact-block-1',
    class: '',
    label: c1s,
    content: c1,
    category: 'Contact',
    // order: 1
  },
  {
    id: 'contact-block-2',
    class: '',
    label: c2s,
    content: c2,
    category: 'Contact',
    // order: 1
  },
  {
    id: 'contact-block-3',
    class: '',
    label: c3s,
    content: c3,
    category: 'Contact',
    // order: 1
  },
  {
    id: 'content-block-1',
    class: '',
    label: d1s,
    content: d1,
    category: 'Content',
    // order: 1
  },
  {
    id: 'content-block-2',
    class: '',
    label: d2s,
    content: d2,
    category: 'Content',
    // order: 1
  },
  {
    id: 'content-block-3',
    class: '',
    label: d3s,
    content: d3,
    category: 'Content',
    // order: 1
  },
  {
    id: 'content-block-4',
    class: '',
    label: d4s,
    content: d4,
    category: 'Content',
    // order: 1
  },
  {
    id: 'content-block-5',
    class: '',
    label: d5s,
    content: d5,
    category: 'Content',
    // order: 1
  },
  {
    id: 'content-block-6',
    class: '',
    label: d6s,
    content: d6,
    category: 'Content',
    // order: 1
  },
  {
    id: 'content-block-7',
    class: '',
    label: d7s,
    content: d7,
    category: 'Content',
    // order: 1
  },
  {
    id: 'content-block-8',
    class: '',
    label: d8s,
    content: d8,
    category: 'Content',
    // order: 1
  },
  {
    id: 'cta-block-1',
    class: '',
    label: a1s,
    content: a1,
    category: 'CTA',
    // order: 1
  },
  {
    id: 'cta-block-2',
    class: '',
    label: a2s,
    content: a2,
    category: 'CTA',
    // order: 1
  },
  {
    id: 'cta-block-3',
    class: '',
    label: a3s,
    content: a3,
    category: 'CTA',
    // order: 1
  },
  {
    id: 'cta-block-4',
    class: '',
    label: a4s,
    content: a4,
    category: 'CTA',
    // order: 1
  },
  {
    id: 'commerce-block-1',
    class: '',
    label: e1s,
    content: e1,
    category: 'Commerce',
    // order: 1
  },
  {
    id: 'commerce-block-2',
    class: '',
    label: e2s,
    content: e2,
    category: 'Commerce',
    // order: 1
  },
  {
    id: 'commerce-block-3',
    class: '',
    label: e3s,
    content: e3,
    category: 'Commerce',
    // order: 1
  },
  {
    id: 'feature-block-1',
    class: '',
    label: f1s,
    content: f1,
    category: 'Features',
    // order: 1
  },
  {
    id: 'feature-block-2',
    class: '',
    label: f2s,
    content: f2,
    category: 'Features',
    // order: 1
  },
  {
    id: 'feature-block-3',
    class: '',
    label: f3s,
    content: f3,
    category: 'Features',
    // order: 1
  },
  {
    id: 'feature-block-4',
    class: '',
    label: f4s,
    content: f4,
    category: 'Features',
    // order: 1
  },
  {
    id: 'feature-block-5',
    class: '',
    label: f5s,
    content: f5,
    category: 'Features',
    // order: 1
  },
  {
    id: 'feature-block-6',
    class: '',
    label: f6s,
    content: f6,
    category: 'Features',
    // order: 1
  },
  {
    id: 'feature-block-7',
    class: '',
    label: f7s,
    content: f7,
    category: 'Features',
    // order: 1
  },
  {
    id: 'feature-block-8',
    class: '',
    label: f8s,
    content: f8,
    category: 'Features',
    // order: 1
  },
  {
    id: 'footer-block-1',
    class: '',
    label: z1s,
    content: z1,
    category: 'Footer',
    // order: 1
  },
  {
    id: 'footer-block-2',
    class: '',
    label: z2s,
    content: z2,
    category: 'Footer',
    // order: 1
  },
  {
    id: 'footer-block-3',
    class: '',
    label: z3s,
    content: z3,
    category: 'Footer',
    // order: 1
  },
  {
    id: 'footer-block-4',
    class: '',
    label: z4s,
    content: z4,
    category: 'Footer',
    // order: 1
  },
  {
    id: 'footer-block-5',
    class: '',
    label: z5s,
    content: z5,
    category: 'Footer',
    // order: 1
  },
  {
    id: 'gallery-block-1',
    class: '',
    label: g1s,
    content: g1,
    category: 'Gallery',
    // order: 1
  },
  {
    id: 'gallery-block-2',
    class: '',
    label: g2s,
    content: g2,
    category: 'Gallery',
    // order: 1
  },
  {
    id: 'gallery-block-3',
    class: '',
    label: g3s,
    content: g3,
    category: 'Gallery',
    // order: 1
  },
  {
    id: 'header-block-1',
    class: '',
    label: h1s,
    content: h1,
    category: 'Header',
    // order: 1
  },
  {
    id: 'header-block-2',
    class: '',
    label: h2s,
    content: h2,
    category: 'Header',
    // order: 1
  },
  {
    id: 'header-block-3',
    class: '',
    label: h3s,
    content: h3,
    category: 'Header',
    // order: 1
  },
  {
    id: 'header-block-4',
    class: '',
    label: h4s,
    content: h4,
    category: 'Header',
    // order: 1
  },
  {
    id: 'hero-block-1',
    class: '',
    label: r1s,
    content: r1,
    category: 'Hero',
    // order: 1
  },
  {
    id: 'hero-block-2',
    class: '',
    label: r2s,
    content: r2,
    category: 'Hero',
    // order: 1
  },
  {
    id: 'hero-block-3',
    class: '',
    label: r3s,
    content: r3,
    category: 'Hero',
    // order: 1
  },
  {
    id: 'hero-block-4',
    class: '',
    label: r4s,
    content: r4,
    category: 'Hero',
    // order: 1
  },
  {
    id: 'hero-block-5',
    class: '',
    label: r5s,
    content: r5,
    category: 'Hero',
    // order: 1
  },
  {
    id: 'hero-block-6',
    class: '',
    label: r6s,
    content: r6,
    category: 'Hero',
    // order: 1
  },
  {
    id: 'pricing-block-1',
    class: '',
    label: p1s,
    content: p1,
    category: 'Pricing',
    // order: 1
  },
  {
    id: 'pricing-block-2',
    class: '',
    label: p2s,
    content: p2,
    category: 'Pricing',
    // order: 1
  },
  {
    id: 'statistic-block-1',
    class: '',
    label: s1s,
    content: s1,
    category: 'Statistics',
    // order: 1
  },
  {
    id: 'statistic-block-2',
    class: '',
    label: s2s,
    content: s2,
    category: 'Statistics',
    // order: 1
  },
  {
    id: 'statistic-block-3',
    class: '',
    label: s3s,
    content: s3,
    category: 'Statistics',
    // order: 1
  },
  {
    id: 'step-block-1',
    class: '',
    label: q1s,
    content: q1,
    category: 'Steps',
    // order: 1
  },
  // {
  //   id: 'step-block-2',
  //   class: '',
  //   label: q2s,
  //   content: q2,
  //   category: 'Steps',
  //   // order: 1
  // },
  {
    id: 'step-block-3',
    class: '',
    label: q3s,
    content: q3,
    category: 'Steps',
    // order: 1
  },
  {
    id: 'team-block-1',
    class: '',
    label: t1s,
    content: t1,
    category: 'Team',
    // order: 1
  },
  {
    id: 'team-block-2',
    class: '',
    label: t2s,
    content: t2,
    category: 'Team',
    // order: 1
  },
  {
    id: 'team-block-3',
    class: '',
    label: t3s,
    content: t3,
    category: 'Team',
    // order: 1
  },
  {
    id: 'testimonial-block-1',
    class: '',
    label: m1s,
    content: m1,
    category: 'Testimonials',
    // order: 1
  },
  {
    id: 'testimonial-block-2',
    class: '',
    label: m2s,
    content: m2,
    category: 'Testimonials',
    // order: 1
  },
  {
    id: 'testimonial-block-3',
    class: '',
    label: m3s,
    content: m3,
    category: 'Testimonials',
    // order: 1
  },
]

export default (editor, options = {}) => {
  const bm = editor.Blocks

  sources.forEach((s) => {
    bm.add(s.id, {
      label: getSvgHtml(editor.$(s.label).get(0)),
      attributes: { class: `${s.class} block-full-width` },
      content: s.content,
      category: { label: s.category, open: s.category === options.openCategory },
    })
  })
}