Html block.

__tests__/components/blocks/HtmlBlock.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { HtmlBlock } from '../../../src/components'
+
+describe('type html', () => {
+  it('it renders correctly', () => {
+    render(
+      <HtmlBlock
+        block={{
+          type: 'html',
+          id: 'test-id-1',
+          content:
+            '<div>This is a raw HTML</div><p>With more HTML</p>',
+        }}
+      />,
+    )
+
+    screen.getByText('This is a raw HTML')
+    screen.getByText('With more HTML')
+  })
+  it('it renders correctly without content', () => {
+    render(
+      <HtmlBlock
+        block={{
+          type: 'html',
+          id: 'test-id-1',
+          content: null as unknown as string,
+        }}
+      />,
+    )
+  })
+})

package.json

@@ -23,7 +23,7 @@
     "build": "tsc",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
-    "format": "prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc",
+    "format": "prettier --write src/**/*.{ts,tsx} --config ./.prettierrc",
     "preview": "vite preview",
     "prepare": "husky install",
     "lint-staged": "npm run lint && npm run format",
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
+    "@ladle/react": "^3.2.2",
     "@rollup/plugin-typescript": "^11.1.2",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
@@ -65,7 +66,7 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.0.2",
     "vite": "^4.4.0",
-    "vite-plugin-dts": "^1.0.5",
+    "vite-plugin-dts": "^1.7.3",
     "vite-plugin-linter": "^2.0.2"
   },
   "peerDependencies": {

src/components/GenerateBlocks.tsx

@@ -22,12 +22,15 @@ import {
   ButtonBlockInterface,
   LayoutSectionBlocksMix,
   MarkdownBlockInterface,
+  HtmlBlockInteface,
 } from '../models'
+import { HtmlBlock } from './blocks/HtmlBlock'
 
 const generateBlockByType = {
   ['markdown']: (block: MarkdownBlockInterface, markdownParsingOptions: MarkdownToJSX.Options) => (
     <MarkdownBlock block={block} markdownParsingOptions={markdownParsingOptions} />
   ),
+  ['html']: (block: HtmlBlockInteface) => <HtmlBlock block={block} />,
   ['table']: (block: TableBlock) => <Table block={block} />,
   ['thumb-markdown']: (
     block: ThumbMarkdownBlock,

src/components/blocks/HtmlBlock.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { HtmlBlock } from './HtmlBlock';
+
+export const HtmlBlockStory = () => (<div style={
+  {
+    width: '100%',
+    height: '100%',
+  }
+}>
+  <HtmlBlock
+    block={{
+      'id': 'html',
+      'type': 'html',
+      'content': `<div>This is an HTML</div> <b>inside</b> <p>an HTML block</p>`
+    }}
+  />
+</div>);

src/components/blocks/HtmlBlock.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import styled from 'styled-components'
+
+import { HtmlBlockInteface, } from '../../models'
+
+export const HtmlBlock = ({
+  block,
+}: {
+  block: HtmlBlockInteface
+}) => (
+  <Content data-stylizable="block html-content">
+    {block?.content && (
+      <ContentWrapper dangerouslySetInnerHTML={{ __html: block.content }} />
+    )}
+  </Content>
+)
+
+const Content = styled.div`
+  display: flex;
+  margin: 0;
+  flex-direction: column;
+  justify-content: flex-start;
+`
+
+const ContentWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`

src/components/blocks/index.ts

@@ -4,4 +4,5 @@ export * from './LinkBlock'
 export * from './Markdown'
 export * from './Section'
 export * from './Table'
+export * from './HtmlBlock'
 export * from './ThumbMarkdown'

src/models/datasets.ts

@@ -3,6 +3,7 @@ export enum LayoutBlockTypes {
   'button',
   'link',
   'markdown',
+  'html',
   'section',
   'table',
   'thumb-markdown',
@@ -17,6 +18,10 @@ export interface MarkdownBlockInterface extends GenericBlock {
   content: string
 }
 
+export interface HtmlBlockInteface extends GenericBlock {
+  content: string
+}
+
 export type TableBlockHeadings = {
   id: string
   label: string
@@ -38,7 +43,7 @@ export interface TableBlock extends GenericBlock {
 export interface SectionBlock extends GenericBlock {
   title: string
   open: boolean
-  blocks: (MarkdownBlockInterface | LinkBlockInterface | ButtonBlockInterface)[]
+  blocks: (HtmlBlockInteface | MarkdownBlockInterface | LinkBlockInterface | ButtonBlockInterface)[]
 }
 
 export type ImageThumb = {
@@ -79,6 +84,7 @@ export interface ButtonBlockInterface extends GenericBlock {
 
 export type LayoutSectionBlock =
   | MarkdownBlockInterface
+  | HtmlBlockInteface
   | TableBlock
   | ThumbMarkdownBlock
   | LinkBlockInterface
@@ -88,6 +94,7 @@ export type LayoutSectionBlock =
 
 export type LayoutSectionBlocksMix = MarkdownBlockInterface &
   TableBlock &
+  HtmlBlockInteface &
   ThumbMarkdownBlock &
   LinkBlockInterface &
   SectionBlock &

vite.config.ts

@@ -3,14 +3,11 @@ import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 
 import react from '@vitejs/plugin-react'
-import dts from 'vite-plugin-dts'
-import EsLint from 'vite-plugin-linter'
+import { EsLinter, linterPlugin, } from "vite-plugin-linter";
 import typescript from '@rollup/plugin-typescript'
 
 import * as packageJson from './package.json'
 
-const { EsLinter, linterPlugin } = EsLint
-
 // https://vitejs.dev/config/
 export default defineConfig((configEnv) => ({
   plugins: [