@pdfme/schemas 3.4.3 → 4.0.0-dev.3

package/dist/types/src/tables/tableHelper.d.ts

@@ -0,0 +1,11 @@
+import { Schema, BasePdf, CommonOptions } from '@pdfme/common';
+import { Table } from './classes';
+interface CreateTableArgs {
+    schema: Schema;
+    basePdf: BasePdf;
+    options: CommonOptions;
+    _cache: Map<any, any>;
+}
+export declare function createSingleTable(body: string[][], args: CreateTableArgs): Promise<Table>;
+export declare function createMultiTables(body: string[][], args: CreateTableArgs): Promise<Table[]>;
+export {};

package/dist/types/src/tables/types.d.ts

@@ -0,0 +1,91 @@
+import type { ALIGNMENT, VERTICAL_ALIGNMENT } from '../text/types';
+import type { Schema } from '@pdfme/common';
+export type Spacing = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+type BorderInsets = Spacing;
+type BoxDimensions = Spacing;
+export interface CellStyle {
+    fontName?: string;
+    alignment: ALIGNMENT;
+    verticalAlignment: VERTICAL_ALIGNMENT;
+    fontSize: number;
+    lineHeight: number;
+    characterSpacing: number;
+    fontColor: string;
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: BoxDimensions;
+    padding: BoxDimensions;
+}
+export type CellSchema = Schema & CellStyle;
+export interface TableSchema extends Schema {
+    showHead: boolean;
+    head: string[];
+    headWidthPercentages: number[];
+    __bodyRange?: {
+        start: number;
+        end?: number;
+    };
+    tableStyles: {
+        borderColor: string;
+        borderWidth: number;
+    };
+    headStyles: CellStyle;
+    bodyStyles: CellStyle & {
+        alternateBackgroundColor: string;
+    };
+    columnStyles: {
+        alignment?: {
+            [colIndex: number]: ALIGNMENT;
+        };
+    };
+}
+export interface Styles {
+    fontName: string | undefined;
+    backgroundColor: string;
+    textColor: string;
+    lineHeight: number;
+    characterSpacing: number;
+    alignment: 'left' | 'center' | 'right';
+    verticalAlignment: 'top' | 'middle' | 'bottom';
+    fontSize: number;
+    cellPadding: Spacing;
+    lineColor: string;
+    lineWidth: BorderInsets;
+    cellWidth: number;
+    minCellHeight: number;
+    minCellWidth: number;
+}
+export interface TableInput {
+    settings: Settings;
+    styles: StylesProps;
+    content: ContentInput;
+}
+interface ContentInput {
+    body: string[][];
+    head: string[][];
+    columns: number[];
+}
+export interface Settings {
+    startY: number;
+    margin: Spacing;
+    tableWidth: number;
+    showHead: boolean;
+    tableLineWidth: number;
+    tableLineColor: string;
+}
+export interface StylesProps {
+    styles: Partial<Styles>;
+    headStyles: Partial<Styles>;
+    bodyStyles: Partial<Styles>;
+    alternateRowStyles: Partial<Styles>;
+    columnStyles: {
+        [key: string]: Partial<Styles>;
+    };
+}
+export type Section = 'head' | 'body';
+export {};

package/dist/types/src/tables/uiRender.d.ts

@@ -0,0 +1,3 @@
+import type { UIRenderProps } from '@pdfme/common';
+import type { TableSchema } from './types.js';
+export declare const uiRender: (arg: UIRenderProps<TableSchema>) => Promise<void>;

package/dist/types/src/text/helper.d.ts

@@ -9,7 +9,7 @@ export declare const getBrowserVerticalFontAdjustments: (fontKitFont: FontKitFon
 export declare const getFontDescentInPt: (fontKitFont: FontKitFont, fontSize: number) => number;
 export declare const heightOfFontAtSize: (fontKitFont: FontKitFont, fontSize: number) => number;
 export declare const widthOfTextAtSize: (text: string, fontKitFont: FontKitFont, fontSize: number, characterSpacing: number) => number;
-export declare const getFontKitFont: (textSchema: TextSchema, font: Font, _cache: Map<any, any>) => Promise<fontkit.Font>;
+export declare const getFontKitFont: (fontName: string | undefined, font: Font, _cache: Map<any, any>) => Promise<fontkit.Font>;
 /**
  * Recursively splits the line at getSplitPosition.
  * If there is some leftover, split the rest again in the same manner.
@@ -28,4 +28,11 @@ export declare const calculateDynamicFontSize: ({ textSchema, font, value, start
     startingFontSize?: number | undefined;
     _cache: Map<any, any>;
 }) => Promise<number>;
+export declare const splitTextToSize: (arg: {
+    value: string;
+    characterSpacing: number;
+    boxWidthInPt: number;
+    fontSize: number;
+    fontKitFont: fontkit.Font;
+}) => string[];
 export declare const isFirefox: () => boolean;

package/dist/types/src/utils.d.ts

@@ -30,3 +30,4 @@ export declare const hex2CmykColor: (hexString: string | undefined) => import("@
 export declare const hex2PrintingColor: (hexString: string | undefined, colorType?: ColorType) => import("@pdfme/pdf-lib").RGB | import("@pdfme/pdf-lib").CMYK | undefined;
 export declare const readFile: (input: File | FileList | null) => Promise<string | ArrayBuffer>;
 export declare const createErrorElm: () => HTMLDivElement;
+export declare const cloneDeep: <T>(value: T) => T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/schemas",
-  "version": "3.4.3",
+  "version": "4.0.0-dev.3",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/barcodes/propPanel.ts

@@ -16,11 +16,15 @@ const defaultIncludetext = { includetext: DEFAULT_BARCODE_INCLUDETEXT };
 const position = { x: 0, y: 0 };
 const default40x20 = { width: 40, height: 20 };
 
-const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[] = [
+const barcodeIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-barcode"><path d="M3 5v14"/><path d="M8 5v14"/><path d="M12 5v14"/><path d="M17 5v14"/><path d="M21 5v14"/></svg>';
+
+const barcodeDefaults: { defaultSchema: BarcodeSchema }[] = [
   {
-    defaultValue: 'https://pdfme.com/',
     defaultSchema: {
       type: 'qrcode',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-qr-code"><rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/></svg>',
+      content: 'https://pdfme.com/',
       position,
       ...defaultColors,
       width: 30,
@@ -30,9 +34,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '6540123789-A-K-Z',
     defaultSchema: {
       type: 'japanpost',
+      icon: barcodeIcon,
+      content: '6540123789-A-K-Z',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -44,9 +49,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '2112345678900',
     defaultSchema: {
       type: 'ean13',
+      icon: barcodeIcon,
+      content: '2112345678900',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -58,9 +64,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '02345673',
     defaultSchema: {
       type: 'ean8',
+      icon: barcodeIcon,
+      content: '02345673',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -71,9 +78,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: 'THIS IS CODE 39',
     defaultSchema: {
       type: 'code39',
+      icon: barcodeIcon,
+      content: 'THIS IS CODE 39',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -83,9 +91,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: 'This is Code 128!',
     defaultSchema: {
       type: 'code128',
+      icon: barcodeIcon,
+      content: 'This is Code 128!',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -96,9 +105,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: 'A0123456789B',
     defaultSchema: {
       type: 'nw7',
+      icon: barcodeIcon,
+      content: 'A0123456789B',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -109,9 +119,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '04601234567893',
     defaultSchema: {
       type: 'itf14',
+      icon: barcodeIcon,
+      content: '04601234567893',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -123,9 +134,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '416000336108',
     defaultSchema: {
       type: 'upca',
+      icon: barcodeIcon,
+      content: '416000336108',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -137,9 +149,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '00123457',
     defaultSchema: {
       type: 'upce',
+      icon: barcodeIcon,
+      content: '00123457',
       position,
       ...defaultColors,
       ...defaultTextColors,
@@ -150,9 +163,10 @@ const barcodeDefaults: { defaultValue: string; defaultSchema: BarcodeSchema }[]
     },
   },
   {
-    defaultValue: '(01)03453120000011(17)191125(10)ABCD1234',
     defaultSchema: {
       type: 'gs1datamatrix',
+      icon: barcodeIcon,
+      content: '(01)03453120000011(17)191125(10)ABCD1234',
       position,
       ...defaultColors,
       width: 30,

package/src/barcodes/uiRender.ts

@@ -69,7 +69,7 @@ export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
     input.placeholder = placeholder || '';
     input.tabIndex = tabIndex || 0;
     input.addEventListener('change', (e: Event) => {
-      onChange && onChange((e.target as HTMLInputElement).value);
+      onChange && onChange({ key: 'content', value: (e.target as HTMLInputElement).value });
     });
     input.addEventListener('blur', () => {
       stopEditing && stopEditing();

package/src/graphics/image.ts

@@ -3,18 +3,12 @@ import type { PDFImage, PDFEmbeddedPage } from '@pdfme/pdf-lib';
 import type { Plugin } from '@pdfme/common';
 import type { PDFRenderProps, Schema } from '@pdfme/common';
 import type * as CSS from 'csstype';
-import { UIRenderProps } from '@pdfme/common';
+import { UIRenderProps, px2mm } from '@pdfme/common';
 import { convertForPdfLayoutProps, addAlphaToHex, isEditable, readFile } from '../utils.js';
 import { DEFAULT_OPACITY } from '../constants.js';
 import { getImageDimension } from './imagehelper.js';
 import { isPdf, pdfToImage } from './pdfHelper.js';
 
-const px2mm = (px: number): number => {
-  // http://www.endmemo.com/sconvert/millimeterpixel.php
-  const ratio = 0.26458333333333;
-  return parseFloat(String(px)) * ratio;
-};
-
 const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
 const fullSize = { width: '100%', height: '100%' };
 const defaultValue =
@@ -140,7 +134,7 @@ const imageSchema: Plugin<ImageSchema> = {
       };
       Object.assign(button.style, buttonStyle);
       button.addEventListener('click', () => {
-        onChange && onChange('');
+        onChange && onChange({ key: 'content', value: '' });
       });
       container.appendChild(button);
     }
@@ -175,7 +169,9 @@ const imageSchema: Plugin<ImageSchema> = {
       input.accept = 'image/jpeg, image/png, application/pdf';
       input.addEventListener('change', (event: Event) => {
         const changeEvent = event as unknown as ChangeEvent<HTMLInputElement>;
-        readFile(changeEvent.target.files).then((result) => onChange && onChange(result as string));
+        readFile(changeEvent.target.files).then(
+          (result) => onChange && onChange({ key: 'content', value: result as string })
+        );
       });
       input.addEventListener('blur', () => stopEditing && stopEditing());
       label.appendChild(input);
@@ -183,9 +179,10 @@ const imageSchema: Plugin<ImageSchema> = {
   },
   propPanel: {
     schema: {},
-    defaultValue,
     defaultSchema: {
       type: 'image',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
+      content: defaultValue,
       position: { x: 0, y: 0 },
       width: 40,
       height: 40,
@@ -207,8 +204,8 @@ export const readOnlyImage: Plugin<ImageSchema> = {
     defaultSchema: {
       ...imageSchema.propPanel.defaultSchema,
       type: 'readOnlyImage',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-off"><line x1="2" x2="22" y1="2" y2="22"/><path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/><line x1="13.5" x2="6" y1="13.5" y2="21"/><line x1="18" x2="21" y1="12" y2="15"/><path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/><path d="M21 15V5a2 2 0 0 0-2-2H9"/></svg>',
       readOnly: true,
-      readOnlyValue: defaultValue,
     },
   },
 };

package/src/graphics/svg.ts

@@ -41,7 +41,7 @@ const svgSchema: Plugin<SVGSchema> = {
 
       textarea.addEventListener('change', (e: Event) => {
         const newValue = (e.target as HTMLTextAreaElement).value;
-        onChange && onChange(newValue);
+        onChange && onChange({ key: 'content', value: newValue });
       });
       rootElement.appendChild(container);
       textarea.setSelectionRange(value.length, value.length);
@@ -71,9 +71,10 @@ const svgSchema: Plugin<SVGSchema> = {
   },
   propPanel: {
     schema: {},
-    defaultValue,
     defaultSchema: {
       type: 'svg',
+      icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-route"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></svg>',
+      content: defaultValue,
       position: { x: 0, y: 0 },
       width: 40,
       height: 40,
@@ -91,8 +92,8 @@ export const readOnlySvg: Plugin<SVGSchema> = {
     defaultSchema: {
       ...svgSchema.propPanel.defaultSchema,
       type: 'readOnlySvg',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-route-off"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5c.4 0 .9-.1 1.3-.2"/><path d="M5.2 5.2A3.5 3.53 0 0 0 6.5 12H12"/><path d="m2 2 20 20"/><path d="M21 15.3a3.5 3.5 0 0 0-3.3-3.3"/><path d="M15 5h-4.3"/><circle cx="18" cy="5" r="3"/></svg>',
       readOnly: true,
-      readOnlyValue: defaultValue,
     },
   },
 };

package/src/index.ts

@@ -3,9 +3,13 @@ import image, { readOnlyImage } from './graphics/image.js';
 import svg, { readOnlySvg } from './graphics/svg.js';
 import barcodes from './barcodes/index.js';
 import line from './shapes/line.js';
+import table from './tables/index.js';
+import { modifyTemplateForTable, getDynamicHeightForTable } from './tables/dynamicTemplate.js';
 import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
 import { convertForPdfLayoutProps, rotatePoint } from './utils.js';
 
+const tableBeta = table;
+
 const builtInPlugins = { Text: text };
 
 export {
@@ -17,6 +21,9 @@ export {
   readOnlySvg,
   barcodes,
   line,
+  tableBeta,
+  modifyTemplateForTable,
+  getDynamicHeightForTable,
   rectangle,
   ellipse,
   builtInPlugins,

package/src/shapes/line.ts

@@ -11,6 +11,7 @@ interface LineSchema extends Schema {
 const lineSchema: Plugin<LineSchema> = {
   pdf: (arg: PDFRenderProps<LineSchema>) => {
     const { page, schema, options } = arg;
+    if (schema.width === 0 || schema.height === 0 || !schema.color) return;
     const { colorType } = options;
     const pageHeight = page.getHeight();
     const {
@@ -32,7 +33,7 @@ const lineSchema: Plugin<LineSchema> = {
   ui: (arg: UIRenderProps<LineSchema>) => {
     const { schema, rootElement } = arg;
     const div = document.createElement('div');
-    div.style.backgroundColor = schema.color ?? DEFAULT_LINE_COLOR;
+    div.style.backgroundColor = schema.color ?? 'transparent';
     div.style.width = '100%';
     div.style.height = '100%';
     rootElement.appendChild(div);
@@ -44,17 +45,12 @@ const lineSchema: Plugin<LineSchema> = {
         type: 'string',
         widget: 'color',
         required: true,
-        rules: [
-          {
-            pattern: HEX_COLOR_PATTERN,
-            message: i18n('hexColorPrompt'),
-          },
-        ],
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
       },
     }),
-    defaultValue: '',
     defaultSchema: {
       type: 'line',
+      icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><path d="M5 12h14"/></svg>',
       position: { x: 0, y: 0 },
       width: 50,
       height: 1,

package/src/shapes/rectAndEllipse.ts

@@ -2,14 +2,14 @@ import { Plugin, Schema, mm2pt } from '@pdfme/common';
 import { HEX_COLOR_PATTERN } from '../constants.js';
 import { hex2PrintingColor, convertForPdfLayoutProps } from '../utils.js';
 
-interface Shape extends Schema {
+interface ShapeSchema extends Schema {
   type: 'ellipse' | 'rectangle';
   borderWidth: number;
   borderColor: string;
   color: string;
 }
 
-const shape: Plugin<Shape> = {
+const shape: Plugin<ShapeSchema> = {
   ui: (arg) => {
     const { schema, rootElement } = arg;
     const div = document.createElement('div');
@@ -28,6 +28,7 @@ const shape: Plugin<Shape> = {
   },
   pdf: (arg) => {
     const { schema, page, options } = arg;
+    if (!schema.color && !schema.borderColor) return;
     const { colorType } = options;
     const pageHeight = page.getHeight();
     const cArg = { schema, pageHeight };
@@ -69,7 +70,7 @@ const shape: Plugin<Shape> = {
         title: i18n('schemas.borderWidth'),
         type: 'number',
         widget: 'inputNumber',
-        min: 0,
+        props: { min: 0 },
         step: 1,
       },
       borderColor: {
@@ -85,7 +86,6 @@ const shape: Plugin<Shape> = {
         rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
       },
     }),
-    defaultValue: '',
     defaultSchema: {
       type: 'rectangle',
       position: { x: 0, y: 0 },
@@ -93,17 +93,26 @@ const shape: Plugin<Shape> = {
       height: 37.5,
       rotate: 0,
       opacity: 1,
-      borderWidth: 5,
+      borderWidth: 1,
       borderColor: '#000000',
-      color: '#ffffff',
+      color: '',
       readOnly: true,
     },
   },
 };
 
+const rectangleIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>';
+const ellipseIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle"><circle cx="12" cy="12" r="10"/></svg>';
+
 const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
   ...shape.propPanel,
-  defaultSchema: { ...shape.propPanel.defaultSchema, type },
+  defaultSchema: {
+    ...shape.propPanel.defaultSchema,
+    type,
+    icon: type === 'rectangle' ? rectangleIcon : ellipseIcon,
+  },
 });
 
 export const rectangle = { ...shape, propPanel: getPropPanelSchema('rectangle') };

package/src/tables/cell.ts

@@ -0,0 +1,157 @@
+import {
+  DEFAULT_FONT_NAME,
+  Plugin,
+  PDFRenderProps,
+  UIRenderProps,
+  getFallbackFontName,
+} from '@pdfme/common';
+import { uiRender as textUiRender } from '../text/uiRender.js';
+import { pdfRender as textPdfRender } from '../text/pdfRender.js';
+import line from '../shapes/line.js';
+import { rectangle } from '../shapes/rectAndEllipse.js';
+import type { CellSchema } from './types';
+import { getCellPropPanelSchema, getDefaultCellStyles } from './helper.js';
+const linePdfRender = line.pdf;
+const rectanglePdfRender = rectangle.pdf;
+
+const renderLine = async (
+  arg: PDFRenderProps<CellSchema>,
+  schema: CellSchema,
+  position: { x: number; y: number },
+  width: number,
+  height: number
+) =>
+  linePdfRender({
+    ...arg,
+    schema: { ...schema, type: 'line', position, width, height, color: schema.borderColor },
+  });
+
+const createTextDiv = (schema: CellSchema) => {
+  const { borderWidth: bw, width, height, padding: pd } = schema;
+  const textDiv = document.createElement('div');
+  textDiv.style.position = 'absolute';
+  textDiv.style.zIndex = '1';
+  textDiv.style.width = `${width - bw.left - bw.right - pd.left - pd.right}mm`;
+  textDiv.style.height = `${height - bw.top - bw.bottom - pd.top - pd.bottom}mm`;
+  textDiv.style.top = `${bw.top + pd.top}mm`;
+  textDiv.style.left = `${bw.left + pd.left}mm`;
+  return textDiv;
+};
+
+const createLineDiv = (
+  width: string,
+  height: string,
+  top: string | null,
+  right: string | null,
+  bottom: string | null,
+  left: string | null,
+  borderColor: string
+) => {
+  const div = document.createElement('div');
+  div.style.width = width;
+  div.style.height = height;
+  div.style.position = 'absolute';
+  if (top !== null) div.style.top = top;
+  if (right !== null) div.style.right = right;
+  if (bottom !== null) div.style.bottom = bottom;
+  if (left !== null) div.style.left = left;
+  div.style.backgroundColor = borderColor;
+  return div;
+};
+
+const cellSchema: Plugin<CellSchema> = {
+  pdf: async (arg: PDFRenderProps<CellSchema>) => {
+    const { schema } = arg;
+    const { position, width, height, borderWidth, padding } = schema;
+
+    await Promise.all([
+      // BACKGROUND
+      rectanglePdfRender({
+        ...arg,
+        schema: {
+          ...schema,
+          type: 'rectangle',
+          width: schema.width,
+          height: schema.height,
+          borderWidth: 0,
+          borderColor: '',
+          color: schema.backgroundColor,
+        },
+      }),
+      // TOP
+      renderLine(arg, schema, { x: position.x, y: position.y }, width, borderWidth.top),
+      // RIGHT
+      renderLine(
+        arg,
+        schema,
+        { x: position.x + width - borderWidth.right, y: position.y },
+        borderWidth.right,
+        height
+      ),
+      // BOTTOM
+      renderLine(
+        arg,
+        schema,
+        { x: position.x, y: position.y + height - borderWidth.bottom },
+        width,
+        borderWidth.bottom
+      ),
+      // LEFT
+      renderLine(arg, schema, { x: position.x, y: position.y }, borderWidth.left, height),
+    ]);
+    // TEXT
+    await textPdfRender({
+      ...arg,
+      schema: {
+        ...schema,
+        type: 'text',
+        backgroundColor: '',
+        position: {
+          x: position.x + borderWidth.left + padding.left,
+          y: position.y + borderWidth.top + padding.top,
+        },
+        width: width - borderWidth.left - borderWidth.right - padding.left - padding.right,
+        height: height - borderWidth.top - borderWidth.bottom - padding.top - padding.bottom,
+      },
+    });
+  },
+  ui: async (arg: UIRenderProps<CellSchema>) => {
+    const { schema, rootElement } = arg;
+    const { borderWidth, width, height, borderColor, backgroundColor } = schema;
+    rootElement.style.backgroundColor = backgroundColor;
+
+    const textDiv = createTextDiv(schema);
+    await textUiRender({
+      ...arg,
+      schema: { ...schema, backgroundColor: '' },
+      rootElement: textDiv,
+    });
+    rootElement.appendChild(textDiv);
+
+    const lines = [
+      createLineDiv(`${width}mm`, `${borderWidth.top}mm`, '0mm', null, null, '0mm', borderColor),
+      createLineDiv(`${width}mm`, `${borderWidth.bottom}mm`, null, null, '0mm', '0mm', borderColor),
+      createLineDiv(`${borderWidth.left}mm`, `${height}mm`, '0mm', null, null, '0mm', borderColor),
+      createLineDiv(`${borderWidth.right}mm`, `${height}mm`, '0mm', '0mm', null, null, borderColor),
+    ];
+
+    lines.forEach((line) => rootElement.appendChild(line));
+  },
+  propPanel: {
+    schema: ({ options, i18n }) => {
+      const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
+      const fontNames = Object.keys(font);
+      const fallbackFontName = getFallbackFontName(font);
+      return getCellPropPanelSchema({ i18n, fontNames, fallbackFontName });
+    },
+    defaultSchema: {
+      type: 'cell',
+      content: 'Type Something...',
+      position: { x: 0, y: 0 },
+      width: 50,
+      height: 15,
+      ...getDefaultCellStyles(),
+    },
+  },
+};
+export default cellSchema;