@pdfme/ui 3.2.3-dev.1 → 4.0.0-alpha.0

package/src/components/Designer/Canvas/index.tsx

@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import { theme, Button } from 'antd';
 import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
-import { ZOOM, SchemaForUI, Size, ChangeSchemas } from '@pdfme/common';
+import { ZOOM, SchemaForUI, Size, ChangeSchemas, BasePdf, isBlankPdf } from '@pdfme/common';
 import { PluginsRegistry } from '../../../contexts';
 import { CloseOutlined } from '@ant-design/icons';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
@@ -23,6 +23,9 @@ import Selecto from './Selecto';
 import Moveable from './Moveable';
 import Guides from './Guides';
 import Mask from './Mask';
+import Padding from './Padding';
+
+const mm2px = (mm: number) => mm * 3.7795275591;
 
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
@@ -70,6 +73,7 @@ interface GuidesInterface {
 }
 
 interface Props {
+  basePdf: BasePdf;
   height: number;
   hoveringSchemaId: string | null;
   onChangeHoveringSchemaId: (id: string | null) => void;
@@ -89,6 +93,7 @@ interface Props {
 
 const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   const {
+    basePdf,
     pageCursor,
     scale,
     backgrounds,
@@ -142,7 +147,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
 
   useEffect(() => {
     moveable.current?.updateRect();
-    if (prevSchemas === null) {
+    if (!prevSchemas) {
       return;
     }
 
@@ -154,9 +159,37 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     }
   }, [pageCursor, schemasList, prevSchemas]);
 
-  const onDrag = ({ target, left, top }: OnDrag) => {
-    target.style.left = `${left < 0 ? 0 : left}px`;
-    target.style.top = `${top < 0 ? 0 : top}px`;
+  const onDrag = ({ target, top, left }: OnDrag) => {
+    const { width: _width, height: _height } = target.style;
+    const targetWidth = fmt(_width);
+    const targetHeight = fmt(_height);
+    const actualTop = top / ZOOM;
+    const actualLeft = left / ZOOM;
+    const { width: pageWidth, height: pageHeight } = pageSizes[pageCursor];
+    let topPadding = 0;
+    let rightPadding = 0;
+    let bottomPadding = 0;
+    let leftPadding = 0;
+
+    if (isBlankPdf(basePdf)) {
+      const [t, r, b, l] = basePdf.padding;
+      topPadding = t * ZOOM;
+      rightPadding = r;
+      bottomPadding = b;
+      leftPadding = l * ZOOM;
+    }
+
+    if (actualTop + targetHeight > pageHeight - bottomPadding) {
+      target.style.top = `${(pageHeight - targetHeight - bottomPadding) * ZOOM}px`;
+    } else {
+      target.style.top = `${top < topPadding ? topPadding : top}px`;
+    }
+
+    if (actualLeft + targetWidth > pageWidth - rightPadding) {
+      target.style.left = `${(pageWidth - targetWidth - rightPadding) * ZOOM}px`;
+    } else {
+      target.style.left = `${left < leftPadding ? leftPadding : left}px`;
+    }
   };
 
   const onDragEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
@@ -195,24 +228,24 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     changeSchemas(flatten(arg));
   };
 
-  const onResizeEnd = async ({ target }: { target: HTMLElement | SVGElement }) => {
+  const onResizeEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
     const { id, style } = target;
     const { width, height, top, left } = style;
     changeSchemas([
+      { key: 'position.x', value: fmt(left), schemaId: id },
+      { key: 'position.y', value: fmt(top), schemaId: id },
       { key: 'width', value: fmt(width), schemaId: id },
       { key: 'height', value: fmt(height), schemaId: id },
-      { key: 'position.y', value: fmt(top), schemaId: id },
-      { key: 'position.x', value: fmt(left), schemaId: id },
     ]);
 
     const targetSchema = schemasList[pageCursor].find((schema) => schema.id === id);
 
     if (!targetSchema) return;
 
+    targetSchema.position.x = fmt(left);
+    targetSchema.position.y = fmt(top);
     targetSchema.width = fmt(width);
     targetSchema.height = fmt(height);
-    targetSchema.position.y = fmt(top);
-    targetSchema.position.x = fmt(left);
   };
 
   const onResizeEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
@@ -227,13 +260,43 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
 
   const onResize = ({ target, width, height, direction }: OnResize) => {
     if (!target) return;
-    const s = target.style;
-    const newLeft = fmt4Num(s.left) + (fmt4Num(s.width) - width);
-    const newTop = fmt4Num(s.top) + (fmt4Num(s.height) - height);
+    let topPadding = 0;
+    let rightPadding = 0;
+    let bottomPadding = 0;
+    let leftPadding = 0;
+
+    if (isBlankPdf(basePdf)) {
+      const [t, r, b, l] = basePdf.padding;
+      topPadding = t * ZOOM;
+      rightPadding = mm2px(r);
+      bottomPadding = mm2px(b);
+      leftPadding = l * ZOOM;
+    }
+
+    const pageWidth = mm2px(pageSizes[pageCursor].width);
+    const pageHeight = mm2px(pageSizes[pageCursor].height);
+
     const obj: { top?: string; left?: string; width: string; height: string } = {
       width: `${width}px`,
       height: `${height}px`,
     };
+
+    const s = target.style;
+    let newLeft = fmt4Num(s.left) + (fmt4Num(s.width) - width);
+    let newTop = fmt4Num(s.top) + (fmt4Num(s.height) - height);
+    if (newLeft < leftPadding) {
+      newLeft = leftPadding;
+    }
+    if (newTop < topPadding) {
+      newTop = topPadding;
+    }
+    if (newLeft + width > pageWidth - rightPadding) {
+      obj.width = `${pageWidth - rightPadding - newLeft}px`;
+    }
+    if (newTop + height > pageHeight - bottomPadding) {
+      obj.height = `${pageHeight - bottomPadding - newTop}px`;
+    }
+
     const d = direction.toString();
     if (isTopLeftResize(d)) {
       obj.top = `${newTop}px`;
@@ -255,7 +318,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   };
 
   const rotatable = useMemo(() => {
-    const selectedSchemas = schemasList[pageCursor].filter((s) =>
+    const selectedSchemas = (schemasList[pageCursor] || []).filter((s) =>
       activeElements.map((ae) => ae.id).includes(s.id)
     );
     const schemaTypes = selectedSchemas.map((s) => s.type);
@@ -329,6 +392,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
             {!editing && activeElements.length > 0 && pageCursor === index && (
               <DeleteButton activeElements={activeElements} />
             )}
+            <Padding basePdf={basePdf} />
             <Guides
               paperSize={paperSize}
               horizontalRef={(e) => {
@@ -372,19 +436,21 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           <Renderer
             key={schema.id}
             schema={schema}
+            basePdf={basePdf}
+            value={schema.content || ''}
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
             mode={
               editing && activeElements.map((ae) => ae.id).includes(schema.id)
                 ? 'designer'
                 : 'viewer'
             }
-            onChange={(value) => {
-              changeSchemas([{ key: 'data', value, schemaId: schema.id }]);
+            onChange={(arg) => {
+              const args = Array.isArray(arg) ? arg : [arg];
+              changeSchemas(args.map(({ key, value }) => ({ key, value, schemaId: schema.id })));
             }}
             stopEditing={() => setEditing(false)}
-            outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${
-              schema.readOnly ? 'transparent' : token.colorPrimary
-            }`}
+            outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${schema.readOnly && hoveringSchemaId !== schema.id ? 'transparent' : token.colorPrimary
+              }`}
             scale={scale}
           />
         )}

package/src/components/Designer/Sidebar/DetailView/index.tsx

@@ -75,7 +75,7 @@ const DetailView = (
   const handleWatch = (newSchema: any) => {
     const changes = [];
     for (let key in newSchema) {
-      if (['id', 'data'].includes(key)) continue;
+      if (['id', 'content'].includes(key)) continue;
       if (newSchema[key] !== (activeSchema as any)[key]) {
         let value = newSchema[key];
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
@@ -123,15 +123,15 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       key: { title: i18n('fieldName'), type: 'string', required: true, span: 14 },
       '-': { type: 'void', widget: 'Divider' },
       align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
-      x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8 },
-      y: { title: 'Y', type: 'number', widget: 'inputNumber', required: true, span: 8 },
+      x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
+      y: { title: 'Y', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
       rotate: {
         title: i18n('rotate'),
         type: 'number',
         widget: 'inputNumber',
         disabled: defaultSchema?.rotate === undefined,
         max: 360,
-        min: 0,
+        props: { min: 0 },
         span: 8,
       },
       width: {
@@ -140,7 +140,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         widget: 'inputNumber',
         required: true,
         span: 8,
-        min: 0,
+        props: { min: 0 },
       },
       height: {
         title: i18n('height'),
@@ -148,18 +148,14 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         widget: 'inputNumber',
         required: true,
         span: 8,
-        min: 0,
+        props: { min: 0 },
       },
       opacity: {
         title: i18n('opacity'),
         type: 'number',
         widget: 'inputNumber',
         disabled: defaultSchema?.opacity === undefined,
-        props: {
-          step: 0.1,
-        },
-        max: 1,
-        min: 0,
+        props: { step: 0.1, min: 0, max: 1 },
         span: 8,
       },
     },

package/src/components/Designer/index.tsx

@@ -8,18 +8,19 @@ import {
   DesignerProps,
   Size,
   Plugin,
+  isBlankPdf,
 } from '@pdfme/common';
 import Sidebar from './Sidebar/index';
 import Canvas from './Canvas/index';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../constants';
 import { I18nContext, PluginsRegistry } from '../../contexts';
 import {
-  fmtTemplate,
+  schemasList2template,
   uuid,
-  set,
   cloneDeep,
-  templateSchemas2SchemasList,
+  template2SchemasList,
   getPagesScrollTopByIndex,
+  changeSchemas as _changeSchemas,
 } from '../../helper';
 import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks';
 import Root from '../Root';
@@ -32,9 +33,10 @@ const TemplateEditor = ({
   onSaveTemplate,
   onChangeTemplate,
 }: Omit<DesignerProps, 'domContainer'> & {
-  onSaveTemplate: (t: Template) => void;
   size: Size;
-} & { onChangeTemplate: (t: Template) => void }) => {
+  onSaveTemplate: (t: Template) => void;
+  onChangeTemplate: (t: Template) => void;
+}) => {
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
   const mainRef = useRef<HTMLDivElement>(null);
@@ -51,7 +53,8 @@ const TemplateEditor = ({
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [prevTemplate, setPrevTemplate] = useState<Template | null>(null);
 
-  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
+  const { backgrounds, pageSizes, scale, error, refresh } =
+    useUIPreProcessor({ template, size, zoomLevel });
 
   const onEdit = (targets: HTMLElement[]) => {
     setActiveElements(targets);
@@ -81,7 +84,7 @@ const TemplateEditor = ({
       const _schemasList = cloneDeep(schemasList);
       _schemasList[pageCursor] = newSchemas;
       setSchemasList(_schemasList);
-      onChangeTemplate(fmtTemplate(template, _schemasList));
+      onChangeTemplate(schemasList2template(_schemasList, template.basePdf));
     },
     [template, schemasList, pageCursor, onChangeTemplate]
   );
@@ -96,32 +99,16 @@ const TemplateEditor = ({
 
   const changeSchemas: ChangeSchemas = useCallback(
     (objs) => {
-      const newSchemas = objs.reduce((acc, { key, value, schemaId }) => {
-        const tgt = acc.find((s) => s.id === schemaId)! as SchemaForUI;
-        // Assign to reference
-        set(tgt, key, value);
-
-        if (key === 'type') {
-          const keysToKeep = ['id', 'key', 'type', 'position'];
-          Object.keys(tgt).forEach((key) => {
-            if (!keysToKeep.includes(key)) {
-              delete tgt[key as keyof typeof tgt];
-            }
-          });
-          const propPanel = Object.values(pluginsRegistry).find(
-            (plugin) => plugin?.propPanel.defaultSchema.type === value
-          )?.propPanel;
-          set(tgt, 'data', propPanel?.defaultValue || '');
-          Object.assign(tgt, propPanel?.defaultSchema || {});
-        } else if (key === 'data' && tgt.readOnly) {
-          set(tgt, 'readOnlyValue', value);
-        }
-
-        return acc;
-      }, cloneDeep(schemasList[pageCursor]));
-      commitSchemas(newSchemas);
+      _changeSchemas({
+        objs,
+        schemas: schemasList[pageCursor],
+        basePdf: template.basePdf,
+        pluginsRegistry,
+        pageSize: pageSizes[pageCursor],
+        commitSchemas,
+      });
     },
-    [commitSchemas, pageCursor, schemasList]
+    [commitSchemas, pageCursor, schemasList, pluginsRegistry, pageSizes, template.basePdf]
   );
 
   useInitEvents({
@@ -142,7 +129,7 @@ const TemplateEditor = ({
   });
 
   const updateTemplate = useCallback(async (newTemplate: Template) => {
-    const sl = await templateSchemas2SchemasList(newTemplate);
+    const sl = await template2SchemasList(newTemplate);
     setSchemasList(sl);
     onEditEnd();
     setPageCursor(0);
@@ -162,13 +149,16 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     const s = {
       id: uuid(),
       key: `${i18n('field')}${schemasList[pageCursor].length + 1}`,
-      data: propPanel.defaultValue || '',
       ...propPanel.defaultSchema,
     } as SchemaForUI;
 
     const paper = paperRefs.current[pageCursor];
     const rectTop = paper ? paper.getBoundingClientRect().top : 0;
-    s.position.y = rectTop > 0 ? 0 : pageSizes[pageCursor].height / 2;
+    const [paddingTop, , , paddingLeft] = isBlankPdf(template.basePdf)
+      ? template.basePdf.padding
+      : [0, 0, 0, 0];
+    s.position.y = rectTop > 0 ? paddingTop : pageSizes[pageCursor].height / 2;
+    s.position.x = paddingLeft;
 
     commitSchemas(schemasList[pageCursor].concat(s));
     setTimeout(() => onEdit([document.getElementById(s.id)!]));
@@ -182,6 +172,34 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     setHoveringSchemaId(id);
   };
 
+  const updatePage = async (sl: SchemaForUI[][], newPageCursor: number) => {
+    setPageCursor(newPageCursor);
+    const newTemplate = schemasList2template(sl, template.basePdf);
+    onChangeTemplate(newTemplate);
+    await updateTemplate(newTemplate);
+    void refresh(newTemplate);
+    setTimeout(
+      () =>
+        mainRef.current &&
+        ((mainRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)), 0)
+    );
+  };
+
+  const handleRemovePage = () => {
+    if (pageCursor === 0) return;
+    if (!window.confirm(i18n('removePageConfirm'))) return;
+
+    const _schemasList = cloneDeep(schemasList);
+    _schemasList.splice(pageCursor, 1);
+    void updatePage(_schemasList, pageCursor - 1);
+  };
+
+  const handleAddPageAfter = () => {
+    const _schemasList = cloneDeep(schemasList);
+    _schemasList.splice(pageCursor + 1, 0, []);
+    void updatePage(_schemasList, pageCursor + 1);
+  };
+
   if (prevTemplate !== template) {
     setPrevTemplate(template);
     void updateTemplate(template);
@@ -195,6 +213,9 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   if (error) {
     return <ErrorScreen size={size} error={error} />;
   }
+  const pageManipulation = isBlankPdf(template.basePdf)
+    ? { addPageAfter: handleAddPageAfter, removePage: handleRemovePage }
+    : {};
 
   return (
     <Root size={size} scale={scale}>
@@ -210,15 +231,16 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         }}
         zoomLevel={zoomLevel}
         setZoomLevel={setZoomLevel}
+        {...pageManipulation}
       />
       <Sidebar
         hoveringSchemaId={hoveringSchemaId}
         onChangeHoveringSchemaId={onChangeHoveringSchemaId}
         height={mainRef.current ? mainRef.current.clientHeight : 0}
         size={size}
-        pageSize={pageSizes[pageCursor]}
+        pageSize={pageSizes[pageCursor] ?? []}
         activeElements={activeElements}
-        schemas={schemasList[pageCursor]}
+        schemas={schemasList[pageCursor] ?? []}
         changeSchemas={changeSchemas}
         onSortEnd={onSortEnd}
         onEdit={(id: string) => {
@@ -234,6 +256,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       <Canvas
         ref={mainRef}
         paperRefs={paperRefs}
+        basePdf={template.basePdf}
         hoveringSchemaId={hoveringSchemaId}
         onChangeHoveringSchemaId={onChangeHoveringSchemaId}
         height={size.height - RULER_HEIGHT * ZOOM}

package/src/components/Paper.tsx

@@ -67,8 +67,7 @@ const Paper = (props: {
 
         return (
           <div
-            id={`@pdfme/ui-paper${paperIndex}`}
-            key={paperIndex + JSON.stringify(paperSize)}
+            key={String(paperIndex) + JSON.stringify(paperSize)}
             ref={(e) => {
               if (e) {
                 paperRefs.current[paperIndex] = e;

package/src/components/Preview.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useRef, useState, useEffect } from 'react';
-import type { SchemaForUI, PreviewProps, Size } from '@pdfme/common';
+import React, { useRef, useState, useEffect, useContext } from 'react';
+import { Template, SchemaForUI, PreviewProps, Size, getDynamicTemplate } from '@pdfme/common';
+import { modifyTemplateForTable, getDynamicHeightForTable } from '@pdfme/schemas';
 import UnitPager from './UnitPager';
 import Root from './Root';
 import ErrorScreen from './ErrorScreen';
@@ -7,9 +8,12 @@ import CtlBar from './CtlBar';
 import Paper from './Paper';
 import Renderer from './Renderer';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
-import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
+import { FontContext } from '../contexts';
+import { template2SchemasList, getPagesScrollTopByIndex } from '../helper';
 import { theme } from 'antd';
 
+const _cache = new Map();
+
 const Preview = ({
   template,
   inputs,
@@ -21,6 +25,8 @@ const Preview = ({
 }) => {
   const { token } = theme.useToken();
 
+  const font = useContext(FontContext);
+
   const containerRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
 
@@ -29,38 +35,55 @@ const Preview = ({
   const [zoomLevel, setZoomLevel] = useState(1);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
 
-  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
+  const { backgrounds, pageSizes, scale, error, refresh } =
+    useUIPreProcessor({ template, size, zoomLevel });
+
+  const isForm = Boolean(onChangeInput);
+
+  const input = inputs[unitCursor];
 
-  const init = useCallback(async () => {
-    const sl = await templateSchemas2SchemasList(template);
-    setSchemasList(sl);
-  }, [template]);
+  const init = (template: Template) => {
+    const options = { font };
+    getDynamicTemplate({
+      template,
+      input,
+      options,
+      _cache,
+      modifyTemplate: (arg) => {
+        return modifyTemplateForTable(arg);
+      },
+      getDynamicHeight: (value, args) => {
+        if (args.schema.type !== 'table') return Promise.resolve(args.schema.height);
+        return getDynamicHeightForTable(value, args);
+      },
+    })
+      .then(async (dynamicTemplate) => {
+        const sl = await template2SchemasList(dynamicTemplate);
+        setSchemasList(sl);
+        await refresh(dynamicTemplate);
+      })
+      .catch((err) => console.error(`[@pdfme/ui] `, err));
+  };
 
   useEffect(() => {
     if (unitCursor > inputs.length - 1) {
       setUnitCursor(inputs.length - 1);
     }
-  }, [inputs]);
 
-  useEffect(() => {
-    init();
-  }, [init]);
+    init(template);
+  }, [template, inputs, size]);
 
   useScrollPageCursor({
     ref: containerRef,
     pageSizes,
     scale,
     pageCursor,
-    onChangePageCursor: (p) => setPageCursor(p),
+    onChangePageCursor: setPageCursor,
   });
 
   const handleChangeInput = ({ key, value }: { key: string; value: string }) =>
     onChangeInput && onChangeInput({ index: unitCursor, key, value });
 
-  const isForm = Boolean(onChangeInput);
-
-  const input = inputs[unitCursor];
-
   if (error) {
     return <ErrorScreen size={size} error={error} />;
   }
@@ -94,16 +117,43 @@ const Preview = ({
           pageSizes={pageSizes}
           backgrounds={backgrounds}
           renderSchema={({ schema, index }) => {
-            const { key } = schema;
-            const data = (input && input[key]) || '';
+            const { key, readOnly } = schema;
+            const content = readOnly ? String(schema.content) || '' : String(input && input[key] || '');
             return (
               <Renderer
                 key={schema.id}
-                schema={Object.assign(schema, { data })}
+                schema={schema}
+                basePdf={template.basePdf}
+                value={content}
                 mode={isForm ? 'form' : 'viewer'}
-                placeholder={template.sampledata?.[0]?.[key] ?? ''}
+                placeholder={schema.content}
                 tabIndex={index + 100}
-                onChange={(value) => handleChangeInput({ key, value })}
+                onChange={(arg) => {
+                  const args = Array.isArray(arg) ? arg : [arg];
+                  let isNeedInit = false;
+                  args.forEach(({ key: _key, value }) => {
+                    if (_key === 'content') {
+                      const newValue = value as string;
+                      const oldValue = (input?.[key] as string) || '';
+                      if (newValue === oldValue) return;
+                      handleChangeInput({ key, value: newValue });
+                      // TODO Set to true only if the execution of getDynamicTemplate, such as for a table, is required.
+                      isNeedInit = true;
+                    } else {
+                      const targetSchema = schemasList[pageCursor].find(
+                        (s) => s.id === schema.id
+                      ) as SchemaForUI;
+                      if (!targetSchema) return;
+
+                      // @ts-ignore
+                      targetSchema[_key] = value as string;
+                    }
+                  });
+                  if (isNeedInit) {
+                    init(template);
+                  }
+                  setSchemasList([...schemasList])
+                }}
                 outline={
                   isForm && !schema.readOnly ? `1px dashed ${token.colorPrimary}` : 'transparent'
                 }

package/src/components/Renderer.tsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useContext, ReactNode, useRef } from 'react';
-import { Dict, ZOOM, UIRenderProps, SchemaForUI, Schema } from '@pdfme/common';
+import { Dict, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema } from '@pdfme/common';
 import { theme as antdTheme } from 'antd';
 import { SELECTABLE_CLASSNAME } from '../constants';
 import { PluginsRegistry, OptionsContext, I18nContext } from '../contexts';
 
 type RendererProps = Omit<
   UIRenderProps<Schema>,
-  'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'
+  'schema' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'
 > & {
+  basePdf: BasePdf;
   schema: SchemaForUI;
-  onChange: (value: string) => void;
+  value: string;
   outline: string;
   onChangeHoveringSchemaId?: (id: string | null) => void;
   scale: number;
@@ -49,7 +50,8 @@ const Renderer = (props: RendererProps) => {
   const i18n = useContext(I18nContext) as (key: keyof Dict | string) => string;
   const { token: theme } = antdTheme.useToken();
 
-  const { schema, mode, onChange, stopEditing, tabIndex, placeholder, scale } = props;
+  const { schema, basePdf, value, mode, onChange, stopEditing, tabIndex, placeholder, scale } =
+    props;
 
   const ref = useRef<HTMLDivElement>(null);
   const _cache = useRef<Map<any, any>>(new Map());
@@ -68,16 +70,15 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
 
       ref.current.innerHTML = '';
 
-      const editable = mode === 'form' || mode === 'designer';
-
-      render({
+      void render({
         key: schema.key,
-        value: schema.readOnly ? schema.readOnlyValue || '' : schema.data,
+        value,
         schema,
+        basePdf,
         rootElement: ref.current,
         mode,
-        onChange: editable ? onChange : undefined,
-        stopEditing: editable ? stopEditing : undefined,
+        onChange,
+        stopEditing: stopEditing,
         tabIndex,
         placeholder,
         options,
@@ -91,7 +92,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         ref.current.innerHTML = '';
       }
     };
-  }, [JSON.stringify(schema), JSON.stringify(options), mode, scale]);
+  }, [value, JSON.stringify(schema), JSON.stringify(options), mode, scale]);
 
   return (
     <Wrapper {...props}>

package/src/constants.ts

@@ -8,6 +8,6 @@ export const RULER_HEIGHT = 30;
 
 export const PAGE_GAP = 10;
 
-export const SIDEBAR_WIDTH = 350;
+export const SIDEBAR_WIDTH = 400;
 
 export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';