From ad7f07e073f2ecac7aa46b1ece59138a8ff3476f Mon Sep 17 00:00:00 2001
From: Kyohei Fukuda <kyouhei.fukuda0729@gmail.com>
Date: Sun, 24 Sep 2023 11:37:30 +0900
Subject: [PATCH] Delete sample data editor in UI package designer (#273)

* Delete the Sample data editor in ui package's Designer

* Refactoring

* Update snapshot
---
 .../__snapshots__/Designer.test.tsx.snap      |  12 +-
 .../__snapshots__/Preview.test.tsx.snap       |  24 +-
 .../Sidebar/DetailView/BarCodePropEditor.tsx  |   2 +-
 .../Sidebar/DetailView/ExampleInputEditor.tsx |  84 -----
 .../DetailView/PositionAndSizeEditor.tsx      |   2 +-
 .../Sidebar/DetailView/TextPropEditor.tsx     | 356 +++++++++---------
 .../Sidebar/DetailView/TypeAndKeyEditor.tsx   |   2 +-
 .../Designer/Sidebar/DetailView/index.tsx     |   4 +-
 .../ListView/SelectableSortableContainer.tsx  |   7 +-
 .../Designer/Sidebar/ListView/index.tsx       |   2 +-
 .../src/components/Designer/Sidebar/index.tsx |  25 +-
 packages/ui/src/helper.ts                     |  48 ---
 packages/ui/src/i18n.ts                       |   6 -
 packages/ui/src/renders/barcodes.ts           |   8 +-
 packages/ui/src/renders/image.ts              |  77 ++--
 packages/ui/src/renders/text.ts               |  14 +-
 packages/ui/src/types.ts                      |  27 +-
 17 files changed, 285 insertions(+), 415 deletions(-)
 delete mode 100644 packages/ui/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx

diff --git a/packages/ui/__tests__/components/__snapshots__/Designer.test.tsx.snap b/packages/ui/__tests__/components/__snapshots__/Designer.test.tsx.snap
index 3d954f21c..4dd92c59d 100644
--- a/packages/ui/__tests__/components/__snapshots__/Designer.test.tsx.snap
+++ b/packages/ui/__tests__/components/__snapshots__/Designer.test.tsx.snap
@@ -373,7 +373,7 @@ exports[`Designer snapshot 1`] = `
                 style="height: 100%; width: 100%;"
               >
                 <div
-                  style="padding: 0px; resize: none; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%;"
+                  style="padding: 0px; resize: none; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%;"
                 >
                   <div
                     style="font-family: inherit; color: rgb(0, 0, 0); font-size: 30pt; letter-spacing: 0pt; line-height: 1em; text-align: left; white-space: pre-wrap; word-break: break-word; margin-bottom: 0px; padding-top: 3.436640625px;"
@@ -410,16 +410,6 @@ exports[`Designer snapshot 1`] = `
                     src="aaaaaaaaaaaa"
                     style="height: 100%; width: 100%; border-radius: 0;"
                   />
-                  <label
-                    style="width: 100%; height: 100%; display: none; position: absolute; top: 0px; cursor: pointer;"
-                  >
-                    <input
-                      accept="image/jpeg, image/png"
-                      style="width: 100%; height: 100%; position: absolute; top: 50%;"
-                      tabindex="0"
-                      type="file"
-                    />
-                  </label>
                 </div>
               </div>
             </div>
diff --git a/packages/ui/__tests__/components/__snapshots__/Preview.test.tsx.snap b/packages/ui/__tests__/components/__snapshots__/Preview.test.tsx.snap
index eeef168c8..1aff8d625 100644
--- a/packages/ui/__tests__/components/__snapshots__/Preview.test.tsx.snap
+++ b/packages/ui/__tests__/components/__snapshots__/Preview.test.tsx.snap
@@ -90,7 +90,7 @@ exports[`Preview(as Form) snapshot 1`] = `
                 <textarea
                   placeholder="bb"
                   rows="1"
-                  style="padding: 3.436640625px 0px 0px 0px; resize: none; outline: none; background: none; width: 100%; height: 100%; font-family: inherit; color: rgb(0, 0, 0); font-size: 30pt; letter-spacing: 0pt; line-height: 1em; text-align: left; white-space: pre-wrap; word-break: break-word;"
+                  style="padding: 3.436640625px 0px 0px 0px; resize: none; outline: none; background-color: transparent; width: 100%; height: 100%; font-family: inherit; color: rgb(0, 0, 0); font-size: 30pt; letter-spacing: 0pt; line-height: 1em; text-align: left; white-space: pre-wrap; word-break: break-word;"
                   tabindex="100"
                 />
               </div>
@@ -119,16 +119,6 @@ exports[`Preview(as Form) snapshot 1`] = `
                 >
                   x
                 </button>
-                <label
-                  style="width: 100%; height: 100%; display: flex; position: absolute; top: 0px; cursor: pointer;"
-                >
-                  <input
-                    accept="image/jpeg, image/png"
-                    style="width: 100%; height: 100%; position: absolute; top: 50%;"
-                    tabindex="101"
-                    type="file"
-                  />
-                </label>
               </div>
             </div>
           </div>
@@ -224,7 +214,7 @@ exports[`Preview(as Viewer) snapshot 1`] = `
               style="height: 100%; width: 100%;"
             >
               <div
-                style="padding: 0px; resize: none; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%;"
+                style="padding: 0px; resize: none; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%;"
               >
                 <div
                   style="font-family: inherit; color: rgb(0, 0, 0); font-size: 30pt; letter-spacing: 0pt; line-height: 1em; text-align: left; white-space: pre-wrap; word-break: break-word; margin-bottom: 0px; padding-top: 3.436640625px;"
@@ -281,16 +271,6 @@ exports[`Preview(as Viewer) snapshot 1`] = `
                   src="field2"
                   style="height: 100%; width: 100%; border-radius: 0;"
                 />
-                <label
-                  style="width: 100%; height: 100%; display: none; position: absolute; top: 0px; cursor: pointer;"
-                >
-                  <input
-                    accept="image/jpeg, image/png"
-                    style="width: 100%; height: 100%; position: absolute; top: 50%;"
-                    tabindex="101"
-                    type="file"
-                  />
-                </label>
               </div>
             </div>
           </div>
diff --git a/packages/ui/src/components/Designer/Sidebar/DetailView/BarCodePropEditor.tsx b/packages/ui/src/components/Designer/Sidebar/DetailView/BarCodePropEditor.tsx
index 4cb5e8b60..d0565345a 100644
--- a/packages/ui/src/components/Designer/Sidebar/DetailView/BarCodePropEditor.tsx
+++ b/packages/ui/src/components/Designer/Sidebar/DetailView/BarCodePropEditor.tsx
@@ -5,8 +5,8 @@ import {
   DEFAULT_BARCODE_BG_COLOR,
   DEFAULT_BARCODE_COLOR,
 } from '@pdfme/common';
+import type { SidebarProps } from '../../../../types';
 import { I18nContext } from '../../../../contexts';
-import { SidebarProps } from '..';
 import ColorInputSet from './FormComponents/ColorInputSet';
 
 const BarcodePropEditor = (
diff --git a/packages/ui/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx b/packages/ui/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx
deleted file mode 100644
index 39a6aec08..000000000
--- a/packages/ui/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useContext } from 'react';
-import { SchemaForUI } from '@pdfme/common';
-import { readFiles } from '../../../../helper';
-import { I18nContext } from '../../../../contexts';
-import { SidebarProps } from '..';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-
-const ExampleInputEditor = (
-  props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
-) => {
-  const { changeSchemas, activeSchema } = props;
-  const i18n = useContext(I18nContext);
-
-  return (
-    <div>
-      <label>{i18n('inputExample')}</label>
-      {activeSchema.type === 'image' ? (
-        <div style={{ position: 'relative' }}>
-          {activeSchema.data ? (
-            <div style={{ margin: '0 auto' }}>
-              <button
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  color: '#333',
-                  background: '#f2f2f2',
-                  cursor: 'pointer',
-                  borderRadius: 2,
-                  border: '1px solid #767676',
-                  height: 24,
-                  width: 24,
-                }}
-                aria-label="close"
-                onClick={() =>
-                  changeSchemas([{ key: 'data', value: '', schemaId: activeSchema.id }])
-                }
-              >
-                <XMarkIcon width={10} height={10} />
-              </button>
-              <img style={{ maxHeight: 180 }} src={activeSchema.data} alt="Input Example" />
-            </div>
-          ) : (
-            <label>
-              <input
-                style={{ color: '#333', background: 'none' }}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  const { files } = e.target;
-                  readFiles(files, 'dataURL').then((result) => {
-                    changeSchemas([
-                      { key: 'data', value: result as string, schemaId: activeSchema.id },
-                    ]);
-                  });
-                }}
-                type="file"
-                accept="image/jpeg, image/png"
-              />
-            </label>
-          )}
-        </div>
-      ) : (
-        <textarea
-          rows={6}
-          onChange={async (e) => {
-            changeSchemas([{ key: 'data', value: e.target.value, schemaId: activeSchema.id }]);
-          }}
-          style={{
-            width: '100%',
-            border: '1px solid #767676',
-            borderRadius: 2,
-            color: '#333',
-            background: activeSchema.data ? 'none' : '#ffa19b',
-          }}
-          value={activeSchema.data}
-        />
-      )}
-    </div>
-  );
-};
-
-export default ExampleInputEditor;
diff --git a/packages/ui/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx b/packages/ui/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx
index 7def89832..a58ef3041 100644
--- a/packages/ui/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx
+++ b/packages/ui/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { SchemaForUI } from '@pdfme/common';
+import type { SidebarProps } from '../../../../types';
 import { round } from '../../../../helper';
-import { SidebarProps } from '../index';
 
 const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
 
diff --git a/packages/ui/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx b/packages/ui/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx
index 53d42a3d5..013bbe71c 100644
--- a/packages/ui/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx
+++ b/packages/ui/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx
@@ -14,9 +14,8 @@ import {
   DYNAMIC_FIT_HORIZONTAL,
   DEFAULT_DYNAMIC_FIT,
 } from '@pdfme/common';
+import type { SidebarProps } from '../../../../types';
 import { FontContext } from '../../../../contexts';
-import Divider from '../../../Divider';
-import { SidebarProps } from '..';
 import ColorInputSet from './FormComponents/ColorInputSet';
 
 const inputStyle = {
@@ -129,194 +128,191 @@ const TextPropEditor = (
   if (activeSchema.type !== 'text') return <></>;
 
   return (
-    <>
-      <section style={{ fontSize: '0.7rem' }}>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginBottom: '0.25rem',
+    <section style={{ fontSize: '0.7rem' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: '0.25rem',
+        }}
+      >
+        <SelectSet
+          label={'FontName'}
+          value={activeSchema.fontName ?? fallbackFontName}
+          options={Object.keys(font)}
+          onChange={(e) => {
+            changeSchemas([{ key: 'fontName', value: e.target.value, schemaId: activeSchema.id }]);
           }}
-        >
-          <SelectSet
-            label={'FontName'}
-            value={activeSchema.fontName ?? fallbackFontName}
-            options={Object.keys(font)}
-            onChange={(e) => {
-              changeSchemas([{ key: 'fontName', value: e.target.value, schemaId: activeSchema.id }]);
-            }}
-          />
+        />
 
-          <SelectSet
-            label={'Horizontal Align'}
-            value={activeSchema.alignment ?? 'left'}
-            options={alignments}
-            onChange={(e) =>
-              changeSchemas([{ key: 'alignment', value: e.target.value, schemaId: activeSchema.id }])
-            }
-          />
+        <SelectSet
+          label={'Horizontal Align'}
+          value={activeSchema.alignment ?? 'left'}
+          options={alignments}
+          onChange={(e) =>
+            changeSchemas([{ key: 'alignment', value: e.target.value, schemaId: activeSchema.id }])
+          }
+        />
 
-          <SelectSet
-            label={'Vertical Align'}
-            value={activeSchema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT}
-            options={verticalAlignments}
-            onChange={(e) => {
-              changeSchemas([{ key: 'verticalAlignment', value: e.target.value, schemaId: activeSchema.id }]);
-            }}
-          />
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginBottom: '0.25rem',
+        <SelectSet
+          label={'Vertical Align'}
+          value={activeSchema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT}
+          options={verticalAlignments}
+          onChange={(e) => {
+            changeSchemas([{ key: 'verticalAlignment', value: e.target.value, schemaId: activeSchema.id }]);
+          }}
+        />
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: '0.25rem',
+        }}
+      >
+        <NumberInputSet
+          width="30%"
+          label={'FontSize(pt)'}
+          value={activeSchema.dynamicFontSize ? NaN : (activeSchema.fontSize ?? DEFAULT_FONT_SIZE)}
+          style={activeSchema.dynamicFontSize ? { background: '#ccc', cursor: 'not-allowed' } : {}}
+          disabled={!!activeSchema.dynamicFontSize}
+          onChange={(e) => {
+            changeSchemas([{ key: 'fontSize', value: Number(e.target.value), schemaId: activeSchema.id }])
           }}
-        >
-          <NumberInputSet
-            width="30%"
-            label={'FontSize(pt)'}
-            value={activeSchema.dynamicFontSize ? NaN : (activeSchema.fontSize ?? DEFAULT_FONT_SIZE)}
-            style={activeSchema.dynamicFontSize ? { background: '#ccc', cursor: 'not-allowed' } : {}}
-            disabled={!!activeSchema.dynamicFontSize}
-            onChange={(e) => {
-              changeSchemas([{ key: 'fontSize', value: Number(e.target.value), schemaId: activeSchema.id }])
-            }}
-          />
-          <NumberInputSet
-            width="30%"
-            label={'LineHeight(em)'}
-            step={0.1}
-            value={activeSchema.lineHeight ?? DEFAULT_LINE_HEIGHT}
-            onChange={(e) =>
-              changeSchemas([
-                { key: 'lineHeight', value: Number(e.target.value), schemaId: activeSchema.id },
-              ])
-            }
-          />
+        />
+        <NumberInputSet
+          width="30%"
+          label={'LineHeight(em)'}
+          step={0.1}
+          value={activeSchema.lineHeight ?? DEFAULT_LINE_HEIGHT}
+          onChange={(e) =>
+            changeSchemas([
+              { key: 'lineHeight', value: Number(e.target.value), schemaId: activeSchema.id },
+            ])
+          }
+        />
 
-          <NumberInputSet
-            width="40%"
-            label={'CharacterSpacing(pt)'}
-            step={0.1}
-            value={activeSchema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}
-            onChange={async (e) => {
-              const currentCharacterSpacing = Number(e.target.value);
-              changeSchemas([
-                { key: 'characterSpacing', value: currentCharacterSpacing, schemaId: activeSchema.id, },
-              ]);
-            }}
-          />
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            flexWrap: 'wrap',
-            marginBottom: '0.25rem',
+        <NumberInputSet
+          width="40%"
+          label={'CharacterSpacing(pt)'}
+          step={0.1}
+          value={activeSchema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}
+          onChange={async (e) => {
+            const currentCharacterSpacing = Number(e.target.value);
+            changeSchemas([
+              { key: 'characterSpacing', value: currentCharacterSpacing, schemaId: activeSchema.id, },
+            ]);
           }}
-        >
-          <CheckboxSet
-            width="100%"
-            label="Use dynamic font size"
-            checked={Boolean(activeSchema.dynamicFontSize)}
-            onChange={(e) => {
-              changeSchemas([
-                {
-                  key: 'dynamicFontSize', value: e.target.checked ? {
-                    min: activeSchema.fontSize || DEFAULT_FONT_SIZE,
-                    max: activeSchema.fontSize || DEFAULT_FONT_SIZE,
-                  } : undefined, schemaId: activeSchema.id,
-                },
-              ]);
-            }}
-          />
+        />
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          marginBottom: '0.25rem',
+        }}
+      >
+        <CheckboxSet
+          width="100%"
+          label="Use dynamic font size"
+          checked={Boolean(activeSchema.dynamicFontSize)}
+          onChange={(e) => {
+            changeSchemas([
+              {
+                key: 'dynamicFontSize', value: e.target.checked ? {
+                  min: activeSchema.fontSize || DEFAULT_FONT_SIZE,
+                  max: activeSchema.fontSize || DEFAULT_FONT_SIZE,
+                } : undefined, schemaId: activeSchema.id,
+              },
+            ]);
+          }}
+        />
 
-          {activeSchema.dynamicFontSize && (
-            <>
-              <NumberInputSet
-                width="30%"
-                label={'FontSize Min(pt)'}
-                value={activeSchema.dynamicFontSize.min ?? Number(activeSchema.fontSize)}
-                minNumber={0}
-                style={
-                  activeSchema.dynamicFontSize &&
-                    activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
-                    ? { background: 'rgb(200 0 0 / 30%)' }
-                    : {}
-                }
-                onChange={(e) => {
-                  changeSchemas([{ key: 'dynamicFontSize.min', value: Number(e.target.value), schemaId: activeSchema.id }])
-                }}
-              />
+        {activeSchema.dynamicFontSize && (
+          <>
+            <NumberInputSet
+              width="30%"
+              label={'FontSize Min(pt)'}
+              value={activeSchema.dynamicFontSize.min ?? Number(activeSchema.fontSize)}
+              minNumber={0}
+              style={
+                activeSchema.dynamicFontSize &&
+                  activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
+                  ? { background: 'rgb(200 0 0 / 30%)' }
+                  : {}
+              }
+              onChange={(e) => {
+                changeSchemas([{ key: 'dynamicFontSize.min', value: Number(e.target.value), schemaId: activeSchema.id }])
+              }}
+            />
 
-              <NumberInputSet
-                width="30%"
-                label={'FontSize Max(pt)'}
-                value={activeSchema.dynamicFontSize.max ?? Number(activeSchema.fontSize)}
-                minNumber={0}
-                style={
-                  activeSchema.dynamicFontSize &&
-                    activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
-                    ? { background: 'rgb(200 0 0 / 30%)' }
-                    : {}
-                }
-                onChange={(e) => {
-                  changeSchemas([{ key: 'dynamicFontSize.max', value: Number(e.target.value), schemaId: activeSchema.id }])
-                }}
-              />
+            <NumberInputSet
+              width="30%"
+              label={'FontSize Max(pt)'}
+              value={activeSchema.dynamicFontSize.max ?? Number(activeSchema.fontSize)}
+              minNumber={0}
+              style={
+                activeSchema.dynamicFontSize &&
+                  activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
+                  ? { background: 'rgb(200 0 0 / 30%)' }
+                  : {}
+              }
+              onChange={(e) => {
+                changeSchemas([{ key: 'dynamicFontSize.max', value: Number(e.target.value), schemaId: activeSchema.id }])
+              }}
+            />
 
-              <SelectSet
-                width="40%"
-                label={'Fit'}
-                value={activeSchema.dynamicFontSize.fit ?? DEFAULT_DYNAMIC_FIT}
-                options={dynamicFits}
-                onChange={(e) => {
-                  changeSchemas([{ key: 'dynamicFontSize.fit', value: e.target.value, schemaId: activeSchema.id }])
-                }}
-              />
-            </>
-          )}
-        </div>
-        <div
-          style={{
-            marginBottom: '0.25rem',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <ColorInputSet
-            label={'FontColor'}
-            value={activeSchema.fontColor ?? '#000000'}
-            onChange={(e) =>
-              changeSchemas([{ key: 'fontColor', value: e.target.value, schemaId: activeSchema.id }])
-            }
-            onClear={() =>
-              changeSchemas([
-                { key: 'fontColor', value: DEFAULT_FONT_COLOR, schemaId: activeSchema.id },
-              ])
-            }
-          />
+            <SelectSet
+              width="40%"
+              label={'Fit'}
+              value={activeSchema.dynamicFontSize.fit ?? DEFAULT_DYNAMIC_FIT}
+              options={dynamicFits}
+              onChange={(e) => {
+                changeSchemas([{ key: 'dynamicFontSize.fit', value: e.target.value, schemaId: activeSchema.id }])
+              }}
+            />
+          </>
+        )}
+      </div>
+      <div
+        style={{
+          marginBottom: '0.25rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <ColorInputSet
+          label={'FontColor'}
+          value={activeSchema.fontColor ?? '#000000'}
+          onChange={(e) =>
+            changeSchemas([{ key: 'fontColor', value: e.target.value, schemaId: activeSchema.id }])
+          }
+          onClear={() =>
+            changeSchemas([
+              { key: 'fontColor', value: DEFAULT_FONT_COLOR, schemaId: activeSchema.id },
+            ])
+          }
+        />
 
-          <ColorInputSet
-            label={'Background'}
-            value={activeSchema.backgroundColor ?? '#ffffff'}
-            onChange={(e) =>
-              changeSchemas([
-                { key: 'backgroundColor', value: e.target.value, schemaId: activeSchema.id },
-              ])
-            }
-            onClear={() =>
-              changeSchemas([{ key: 'backgroundColor', value: '', schemaId: activeSchema.id }])
-            }
-          />
-        </div>
-      </section>
-      <Divider />
-    </>
+        <ColorInputSet
+          label={'Background'}
+          value={activeSchema.backgroundColor ?? '#ffffff'}
+          onChange={(e) =>
+            changeSchemas([
+              { key: 'backgroundColor', value: e.target.value, schemaId: activeSchema.id },
+            ])
+          }
+          onClear={() =>
+            changeSchemas([{ key: 'backgroundColor', value: '', schemaId: activeSchema.id }])
+          }
+        />
+      </div>
+    </section>
   );
 };
 
diff --git a/packages/ui/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx b/packages/ui/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx
index ccbfe17ee..a7e477478 100644
--- a/packages/ui/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx
+++ b/packages/ui/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useRef, useCallback } from 'react';
 import { schemaTypes, SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '../index';
+import type { SidebarProps } from '../../../../types';
 import { I18nContext } from '../../../../contexts';
 
 const ErrorLabel = ({ isError, msg }: { isError: boolean; msg: string }) => (
diff --git a/packages/ui/src/components/Designer/Sidebar/DetailView/index.tsx b/packages/ui/src/components/Designer/Sidebar/DetailView/index.tsx
index 87021d796..62a1cd299 100644
--- a/packages/ui/src/components/Designer/Sidebar/DetailView/index.tsx
+++ b/packages/ui/src/components/Designer/Sidebar/DetailView/index.tsx
@@ -1,11 +1,10 @@
 import React, { useContext } from 'react';
 import { SchemaForUI, isBarcodeSchema, isTextSchema } from '@pdfme/common';
+import type { SidebarProps } from '../../../../types';
 import { Bars3Icon } from '@heroicons/react/20/solid';
 import { I18nContext } from '../../../../contexts';
 import Divider from '../../../Divider';
-import { SidebarProps } from '../index';
 import TextPropEditor from './TextPropEditor';
-import ExampleInputEditor from './ExampleInputEditor';
 import PositionAndSizeEditor from './PositionAndSizeEditor';
 import TypeAndKeyEditor from './TypeAndKeyEditor';
 import BarcodePropEditor from './BarCodePropEditor';
@@ -43,7 +42,6 @@ const DetailView = (
         {isTextSchema(activeSchema) && (
           <TextPropEditor {...props} />
         )}
-        <ExampleInputEditor {...props} />
       </div>
     </div>
   );
diff --git a/packages/ui/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.tsx b/packages/ui/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.tsx
index 011ff24ab..7385f621c 100644
--- a/packages/ui/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.tsx
+++ b/packages/ui/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.tsx
@@ -16,9 +16,9 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
+import type { SidebarProps } from '../../../../types';
 import Item from './Item';
 import SelectableSortableItem from './SelectableSortableItem';
-import { SidebarProps } from '../index';
 
 const SelectableSortableContainer = (
   props: Pick<
@@ -114,9 +114,8 @@ const SelectableSortableContainer = (
                 <SelectableSortableItem
                   key={schema.id}
                   style={{
-                    border: `1px solid ${
-                      schema.id === hoveringSchemaId ? '#18a0fb' : 'transparent'
-                    }`,
+                    border: `1px solid ${schema.id === hoveringSchemaId ? '#18a0fb' : 'transparent'
+                      }`,
                   }}
                   schema={schema}
                   schemas={schemas}
diff --git a/packages/ui/src/components/Designer/Sidebar/ListView/index.tsx b/packages/ui/src/components/Designer/Sidebar/ListView/index.tsx
index 214c6d628..ab213926b 100644
--- a/packages/ui/src/components/Designer/Sidebar/ListView/index.tsx
+++ b/packages/ui/src/components/Designer/Sidebar/ListView/index.tsx
@@ -1,9 +1,9 @@
 import React, { useContext, useState } from 'react';
+import type { SidebarProps } from '../../../../types';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../../constants';
 import { I18nContext } from '../../../../contexts';
 import Divider from '../../../Divider';
 import SelectableSortableContainer from './SelectableSortableContainer';
-import { SidebarProps } from '../index';
 
 const ListView = (
   props: Pick<
diff --git a/packages/ui/src/components/Designer/Sidebar/index.tsx b/packages/ui/src/components/Designer/Sidebar/index.tsx
index 9997b4929..991e0a71c 100644
--- a/packages/ui/src/components/Designer/Sidebar/index.tsx
+++ b/packages/ui/src/components/Designer/Sidebar/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react';
-import { SchemaForUI, Size } from '@pdfme/common';
+import type { SidebarProps } from '../../../types';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
 import { I18nContext, FontContext } from '../../../contexts';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
@@ -7,29 +7,6 @@ import ListView from './ListView/index';
 import DetailView from './DetailView/index';
 import { getFallbackFontName } from '@pdfme/common';
 
-export type SidebarProps = {
-  height: number;
-  hoveringSchemaId: string | null;
-  onChangeHoveringSchemaId: (id: string | null) => void;
-  size: Size;
-  pageSize: Size;
-  activeElements: HTMLElement[];
-  schemas: SchemaForUI[];
-  onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
-  onEdit: (id: string) => void;
-  onEditEnd: () => void;
-  changeSchemas: (
-    objs: {
-      key: string; value: undefined | string | number | {
-        min: number;
-        max: number;
-      }; schemaId: string
-    }[]
-  ) => void;
-  addSchema: () => void;
-  deselectSchema: () => void;
-};
-
 const Sidebar = (props: SidebarProps) => {
   const { height, size, activeElements, schemas, addSchema } = props;
 
diff --git a/packages/ui/src/helper.ts b/packages/ui/src/helper.ts
index 412c57d54..a0a6e86f4 100644
--- a/packages/ui/src/helper.ts
+++ b/packages/ui/src/helper.ts
@@ -196,62 +196,14 @@ export const destroyShortCuts = () => {
   hotkeys.unbind(keys.join());
 };
 
-export const blobToDataURL = (blob: Blob): Promise<string> => new Promise((resolve, reject) => {
-  const reader = new FileReader();
-  reader.onloadend = () => resolve(reader.result as string);
-  reader.onerror = reject;
-  reader.readAsDataURL(blob);
-})
-
-
-const readFile = (file: File | null, type: 'text' | 'dataURL' | 'arrayBuffer') => {
-  return new Promise<string | ArrayBuffer>((r) => {
-    const fileReader = new FileReader();
-    fileReader.addEventListener('load', (e) => {
-      if (e && e.target && e.target.result && file !== null) {
-        r(e.target.result);
-      }
-    });
-    if (file !== null) {
-      if (type === 'text') {
-        fileReader.readAsText(file);
-      } else if (type === 'dataURL') {
-        fileReader.readAsDataURL(file);
-      } else if (type === 'arrayBuffer') {
-        fileReader.readAsArrayBuffer(file);
-      }
-    }
-  });
-};
 
-export const readFiles = (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => {
-  return new Promise<string | ArrayBuffer>((r) => {
-    const fileReader = new FileReader();
-    fileReader.addEventListener('load', (e) => {
-      if (e && e.target && e.target.result && files !== null) {
-        r(e.target.result);
-      }
-    });
-    if (files !== null && files[0]) {
-      readFile(files[0], type).then((data) => r(data));
-    }
-  });
-};
 
 const pt2mm = (pt: number) => {
   // https://www.ddc.co.jp/words/archives/20090701114500.html
   const mmRatio = 0.3527;
-
   return parseFloat(String(pt)) * mmRatio;
 };
 
-export const px2mm = (px: number) => {
-  // http://www.unitconversion.org/typography/millimeters-to-pixels-y-conversion.html
-  const mmRatio = 0.264583333;
-
-  return parseFloat(String(px)) * mmRatio;
-};
-
 export const getPdfPageSizes = async (pdfBlob: Blob) => {
   const url = URL.createObjectURL(pdfBlob);
   const pdfDoc = await getDocument({ url }).promise;
diff --git a/packages/ui/src/i18n.ts b/packages/ui/src/i18n.ts
index 8fe83dd4e..7640d6602 100644
--- a/packages/ui/src/i18n.ts
+++ b/packages/ui/src/i18n.ts
@@ -8,7 +8,6 @@ const dictEn = {
   fieldName: 'Name',
   require: 'Required',
   uniq: 'Unique',
-  inputExample: 'Input Example',
   edit: 'Edit',
   plsInputName: 'Please input name',
   fieldMustUniq: 'Name of field is not unique',
@@ -34,7 +33,6 @@ const dictJa: { [key in keyof DictEn]: string } = {
   fieldName: '項目名',
   require: '必須',
   uniq: '他の項目名と同一不可',
-  inputExample: '記入例',
   edit: '編集する',
   plsInputName: '項目名を入力してください',
   fieldMustUniq: '他の入力項目名と被っています',
@@ -59,7 +57,6 @@ const dictAr: { [key in keyof DictEn]: string } = {
   fieldName: 'اسم الحقل',
   require: 'مطلوب',
   uniq: 'يجب أن يكون فريداً',
-  inputExample: 'مثال',
   edit: 'تعديل',
   plsInputName: 'الرجاء إدخال الاسم',
   fieldMustUniq: 'يجب أن يكون الحقل فريداً',
@@ -84,7 +81,6 @@ const dictTh: { [key in keyof DictEn]: string } = {
   fieldName: 'ชื่อฟิลด์',
   require: 'จำเป็น',
   uniq: 'ต้องไม่ซ้ำกัน',
-  inputExample: 'ตัวอย่าง',
   edit: 'แก้ไข',
   plsInputName: 'กรุณาใส่ชื่อ',
   fieldMustUniq: 'ชื่อฟิลด์ต้องไม่ซ้ำกัน',
@@ -109,7 +105,6 @@ const dictIt: { [key in keyof DictEn]: string } = {
   fieldName: 'Nome',
   require: 'Richiesto',
   uniq: 'Univoco',
-  inputExample: 'Testo di esempio',
   edit: 'Modifica',
   plsInputName: 'Inserisci il nome per favore',
   fieldMustUniq: 'Il nome del campo non è univoco',
@@ -134,7 +129,6 @@ const dictPl: {[key in keyof DictEn]: string} = {
   fieldName: 'Klucz pola',
   require: 'wymagany',
   uniq: 'unikalny',
-  inputExample: 'Przykład',
   edit: 'Edytuj',
   plsInputName: 'Wymagane wprowadzenie klucza pola',
   fieldMustUniq: 'Klucz pola nie jest unikalny',
diff --git a/packages/ui/src/renders/barcodes.ts b/packages/ui/src/renders/barcodes.ts
index a90c0c42c..227405f61 100644
--- a/packages/ui/src/renders/barcodes.ts
+++ b/packages/ui/src/renders/barcodes.ts
@@ -1,7 +1,6 @@
 import type { RenderProps } from "../types"
 import type * as CSS from 'csstype';
 import { validateBarcodeInput, BarcodeSchema, createBarCode } from '@pdfme/common';
-import { blobToDataURL } from '../helper';
 
 const fullSize = { width: '100%', height: '100%' }
 
@@ -32,6 +31,13 @@ const createErrorBarcodeElm = () => {
     return container;
 };
 
+const blobToDataURL = (blob: Blob): Promise<string> => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+});
+
 const createBarcodeImage = async (schema: BarcodeSchema, value: string) => {
     const imageBuf = await createBarCode({ ...schema, input: value });
     const barcodeData = new Blob([new Uint8Array(imageBuf)], { type: 'image/png' });
diff --git a/packages/ui/src/renders/image.ts b/packages/ui/src/renders/image.ts
index e0e9705d9..a5c5acbee 100644
--- a/packages/ui/src/renders/image.ts
+++ b/packages/ui/src/renders/image.ts
@@ -3,9 +3,37 @@ import type * as CSS from 'csstype';
 import { ImageSchema } from '@pdfme/common';
 import type { RenderProps } from "../types"
 import { ZOOM } from '../constants';
-import { readFiles } from '../helper';
 
 const fullSize = { width: '100%', height: '100%' }
+
+const readFile = (input: File | FileList | null): Promise<string | ArrayBuffer> => new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+
+    fileReader.onload = (e) => {
+        if (e.target?.result) {
+            resolve(e.target.result);
+        }
+    };
+
+    fileReader.onerror = (e) => {
+        reject(new Error('File reading failed'));
+    };
+
+    let file: File | null = null;
+    if (input instanceof FileList && input.length > 0) {
+        file = input[0];
+    } else if (input instanceof File) {
+        file = input;
+    }
+
+    if (file) {
+        fileReader.readAsDataURL(file);
+    } else {
+        reject(new Error('No files provided'));
+    }
+});
+
+
 export const renderImage = async (arg: RenderProps) => {
     const {
         value,
@@ -73,29 +101,30 @@ export const renderImage = async (arg: RenderProps) => {
     }
 
     // file input
-    const label = document.createElement('label');
-    const labelStyle: CSS.Properties = {
-        ...fullSize,
-        display: isForm ? 'flex' : 'none',
-        position: 'absolute',
-        top: 0,
-        backgroundColor: isForm || value ? 'rgb(242 244 255 / 75%)' : 'none',
-        cursor: 'pointer',
+    if (!value && isForm) {
+        const label = document.createElement('label');
+        const labelStyle: CSS.Properties = {
+            ...fullSize,
+            display: isForm ? 'flex' : 'none',
+            position: 'absolute',
+            top: 0,
+            backgroundColor: isForm || value ? 'rgb(242 244 255 / 75%)' : 'none',
+            cursor: 'pointer',
+        }
+        Object.assign(label.style, labelStyle);
+        container.appendChild(label);
+        const input = document.createElement('input');
+        const inputStyle: CSS.Properties = { ...fullSize, position: 'absolute', top: '50%' }
+        Object.assign(input.style, inputStyle);
+        input.tabIndex = tabIndex || 0;
+        input.type = 'file';
+        input.accept = 'image/jpeg, image/png';
+        input.addEventListener('change', (event: Event) => {
+            const changeEvent = event as unknown as ChangeEvent<HTMLInputElement>;
+            readFile(changeEvent.target.files).then((result) => onChange && onChange(result as string))
+        });
+        input.addEventListener('blur', () => stopEditing && stopEditing());
+        label.appendChild(input);
     }
-    Object.assign(label.style, labelStyle);
-    container.appendChild(label);
 
-
-    const input = document.createElement('input');
-    const inputStyle: CSS.Properties = { ...fullSize, position: 'absolute', top: '50%' }
-    Object.assign(input.style, inputStyle);
-    input.tabIndex = tabIndex || 0;
-    input.type = 'file';
-    input.accept = 'image/jpeg, image/png';
-    input.addEventListener('change', (event: Event) => {
-        const changeEvent = event as unknown as ChangeEvent<HTMLInputElement>;
-        readFiles(changeEvent.target.files, 'dataURL').then((result) => onChange && onChange(result as string))
-    });
-    input.addEventListener('blur', () => stopEditing && stopEditing());
-    label.appendChild(input);
 }
\ No newline at end of file
diff --git a/packages/ui/src/renders/text.ts b/packages/ui/src/renders/text.ts
index 502581d6d..07765b4ee 100644
--- a/packages/ui/src/renders/text.ts
+++ b/packages/ui/src/renders/text.ts
@@ -70,10 +70,20 @@ export const renderText = async (arg: RenderProps) => {
     const bottomAdjustment = bottomAdj;
 
     const container = document.createElement('div');
+    function getBackgroundColor(mode: 'form' | 'viewer', value: string, schema: TextSchema) {
+        if (mode === 'form' && value && schema.backgroundColor) {
+            return schema.backgroundColor;
+        } else if (mode === 'viewer') {
+            return schema.backgroundColor ?? 'transparent';
+        } else {
+            return 'rgb(242 244 255 / 75%)';
+        }
+    }
+
     const containerStyle: CSS.Properties = {
         padding: 0,
         resize: 'none',
-        backgroundColor: value && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
+        backgroundColor: getBackgroundColor(mode, value, schema),
         border: 'none',
         display: 'flex',
         flexDirection: 'column',
@@ -105,7 +115,7 @@ export const renderText = async (arg: RenderProps) => {
             border: 'none',
             outline: 'none',
             paddingTop: topAdjustment + 'px',
-            background: 'none',
+            backgroundColor: 'transparent',
             width: '100%',
             height: '100%',
         };
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index e341d22d9..ea7cd3be0 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -1,5 +1,5 @@
 
-import type { UIOptions, SchemaForUI } from '@pdfme/common';
+import type { UIOptions, SchemaForUI, Size } from '@pdfme/common';
 
 interface RenderBaseProps {
     schema: SchemaForUI;
@@ -25,4 +25,27 @@ export type RenderProps = RenderBaseProps & {
 
 export interface Renderer {
     [key: string]: { render: (arg: RenderProps) => Promise<void> } | undefined;
-}
\ No newline at end of file
+}
+
+export type SidebarProps = {
+    height: number;
+    hoveringSchemaId: string | null;
+    onChangeHoveringSchemaId: (id: string | null) => void;
+    size: Size;
+    pageSize: Size;
+    activeElements: HTMLElement[];
+    schemas: SchemaForUI[];
+    onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
+    onEdit: (id: string) => void;
+    onEditEnd: () => void;
+    changeSchemas: (
+        objs: {
+            key: string; value: undefined | string | number | {
+                min: number;
+                max: number;
+            }; schemaId: string
+        }[]
+    ) => void;
+    addSchema: () => void;
+    deselectSchema: () => void;
+};
\ No newline at end of file