@pdfme/ui 1.0.3 → 1.0.6

package/dist/types/class.d.ts

@@ -7,7 +7,7 @@ export declare abstract class BaseUIClass {
     private font;
     private readonly setSize;
     constructor(props: UIProps);
-    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
+    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "zoomIn" | "zoomOut" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;

package/dist/types/components/CtlBar/Zoom.d.ts

@@ -0,0 +1,6 @@
+declare type Props = {
+    zoomLevel: number;
+    setZoomLevel: (zoom: number) => void;
+};
+declare const Pager: ({ zoomLevel, setZoomLevel }: Props) => JSX.Element;
+export default Pager;

package/dist/types/components/CtlBar/index.d.ts

@@ -0,0 +1,9 @@
+declare type Props = {
+    pageCursor: number;
+    pageNum: number;
+    setPageCursor: (page: number) => void;
+    zoomLevel: number;
+    setZoomLevel: (zoom: number) => void;
+};
+declare const CtlBar: (props: Props) => JSX.Element;
+export default CtlBar;

package/dist/types/components/Paper.d.ts

@@ -1,7 +1,7 @@
-import React, { MutableRefObject, ReactNode } from 'react';
+import { MutableRefObject, ReactNode } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
 declare const Paper: (porps: {
-    paperRefs?: React.MutableRefObject<HTMLDivElement[]> | undefined;
+    paperRefs: MutableRefObject<HTMLDivElement[]>;
     scale: number;
     size: Size;
     schemasList: SchemaForUI[][];

package/dist/types/contexts.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
+export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "zoomIn" | "zoomOut" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     fallback?: boolean | undefined;
     subset?: boolean | undefined;

package/dist/types/helper.d.ts

@@ -19,6 +19,7 @@ export declare const initShortCuts: (arg: {
 }) => void;
 export declare const destroyShortCuts: () => void;
 export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;
+export declare const px2mm: (px: number) => number;
 export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
     height: number;
     width: number;
@@ -88,4 +89,8 @@ export declare const moveCommandToChangeSchemasArg: (props: {
     value: number;
     schemaId: string;
 }[];
+export declare const getPagesScrollTopByIndex: (pageSizes: {
+    width: number;
+    height: number;
+}[], index: number, scale: number) => number;
 export {};

package/dist/types/hooks.d.ts

@@ -4,9 +4,9 @@ export declare const usePrevious: <T>(value: T) => T | null;
 declare type UIPreProcessorProps = {
     template: Template;
     size: Size;
-    offset?: number;
+    zoomLevel: number;
 };
-export declare const useUIPreProcessor: ({ template, size, offset }: UIPreProcessorProps) => {
+export declare const useUIPreProcessor: ({ template, size, zoomLevel }: UIPreProcessorProps) => {
     backgrounds: string[];
     pageSizes: {
         width: number;
@@ -16,12 +16,12 @@ export declare const useUIPreProcessor: ({ template, size, offset }: UIPreProces
     error: Error | null;
 };
 declare type ScrollPageCursorProps = {
-    rootRef: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement>;
     pageSizes: Size[];
     scale: number;
     pageCursor: number;
     onChangePageCursor: (page: number) => void;
 };
-export declare const useScrollPageCursor: ({ rootRef, pageSizes, scale, pageCursor, onChangePageCursor, }: ScrollPageCursorProps) => void;
+export declare const useScrollPageCursor: ({ ref, pageSizes, scale, pageCursor, onChangePageCursor, }: ScrollPageCursorProps) => void;
 export declare const useMountStatus: () => boolean;
 export {};

package/dist/types/i18n.d.ts

@@ -23,6 +23,8 @@ declare const dictEn: {
     goToNext: string;
     goToEnd: string;
     select: string;
+    zoomIn: string;
+    zoomOut: string;
     errorOccurred: string;
     errorBulkUpdateFieldName: string;
     commitBulkUpdateFieldName: string;

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "author": "hand-dot",
   "license": "MIT",
+  "keywords": [
+    "pdf",
+    "pdf-generation",
+    "pdf-designer",
+    "pdf-viewer",
+    "typescript",
+    "react"
+  ],
   "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
   "homepage": "https://pdfme.com",
   "repository": {

package/src/assets/icons/add.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+    <path d="M22.5 38V25.5H10V22.5H22.5V10H25.5V22.5H38V25.5H25.5V38Z" fill="#ffffff" />
+</svg>

package/src/assets/icons/remove.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+    <path d="M10 25.5V22.5H38V25.5Z" fill="#ffffff" />
+</svg>

package/src/components/CtlBar/Pager.tsx

@@ -0,0 +1,52 @@
+import React, { useContext } from 'react';
+import left from '../../assets/icons/left.svg';
+import right from '../../assets/icons/right.svg';
+import { I18nContext } from '../../contexts';
+
+const btnStyle: React.CSSProperties = {
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+type Props = {
+  pageCursor: number;
+  pageNum: number;
+  setPageCursor: (page: number) => void;
+};
+
+const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
+  const i18n = useContext(I18nContext);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <button
+        style={{ paddingLeft: '0.5rem', ...btnStyle }}
+        disabled={pageCursor <= 0}
+        onClick={() => setPageCursor(pageCursor - 1)}
+      >
+        <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
+      </button>
+      <strong style={{ color: 'white', fontSize: '0.9rem' }}>
+        {pageCursor + 1}/{pageNum}
+      </strong>
+      <button
+        style={{ paddingRight: '0.5rem', ...btnStyle }}
+        disabled={pageCursor + 1 >= pageNum}
+        onClick={() => setPageCursor(pageCursor + 1)}
+      >
+        <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
+      </button>
+    </div>
+  );
+};
+
+export default Pager;

package/src/components/CtlBar/Zoom.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import { I18nContext } from '../../contexts';
+import add from '../../assets/icons/add.svg';
+import remove from '../../assets/icons/remove.svg';
+
+const btnStyle: React.CSSProperties = {
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const zoomStep = 0.25;
+const maxZoom = 3;
+const minZoom = 0;
+
+type Props = {
+  zoomLevel: number;
+  setZoomLevel: (zoom: number) => void;
+};
+
+const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
+  const i18n = useContext(I18nContext);
+  const nextZoomOut = zoomLevel - zoomStep;
+  const nextZoomIn = zoomLevel + zoomStep;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <button
+        style={{
+          paddingRight: '0.5rem',
+          ...btnStyle,
+          cursor: minZoom >= nextZoomOut ? 'not-allowed' : 'pointer',
+        }}
+        onClick={() => setZoomLevel(nextZoomOut)}
+        disabled={minZoom >= nextZoomOut}
+      >
+        <img src={remove} alt={i18n('zoomOut')} style={{ width: 20 }} />
+      </button>
+      <strong style={{ color: 'white', fontSize: '0.9rem' }}>{Math.round(zoomLevel * 100)}%</strong>
+      <button
+        style={{
+          paddingRight: '0.5rem',
+          ...btnStyle,
+          cursor: maxZoom < nextZoomIn ? 'not-allowed' : 'pointer',
+        }}
+        onClick={() => setZoomLevel(nextZoomIn)}
+        disabled={maxZoom < nextZoomIn}
+      >
+        <img src={add} alt={i18n('zoomIn')} style={{ width: 20 }} />
+      </button>
+    </div>
+  );
+};
+
+export default Pager;

package/src/components/CtlBar/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Pager from './Pager';
+import Zoom from './Zoom';
+
+type Props = {
+  pageCursor: number;
+  pageNum: number;
+  setPageCursor: (page: number) => void;
+  zoomLevel: number;
+  setZoomLevel: (zoom: number) => void;
+};
+
+const barWidth = 220;
+
+const CtlBar = (props: Props) => {
+  const { pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
+  const width = pageNum > 1 ? barWidth : barWidth / 2;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'fixed',
+        zIndex: 1,
+        top: '90%',
+        left: `calc(50% - ${width / 2}px)`,
+        width,
+        background: '#777777e6',
+        borderRadius: 2,
+        padding: '0.5rem',
+        margin: '0 auto',
+      }}
+    >
+      {pageNum > 1 && (
+        <>
+          <Pager pageCursor={pageCursor} pageNum={pageNum} setPageCursor={setPageCursor} />
+          <strong style={{ color: 'white', fontSize: '0.9rem', padding: 0 }}>|</strong>
+        </>
+      )}
+      <Zoom zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+    </div>
+  );
+};
+
+export default CtlBar;

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

@@ -218,7 +218,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
         e.stopPropagation();
         setEditing(false);
       }}
-      style={{ height: props.height }}
+      style={{ overflowX: 'auto' }}
     >
       <Selecto
         container={paperRefs.current[pageCursor]}
@@ -279,7 +279,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             {pageCursor !== index ? (
               <Mask
                 width={paperSize.width + RULER_HEIGHT}
-                height={paperSize.height + RULER_HEIGHT}
+                height={paperSize.height + RULER_HEIGHT * scale}
               />
             ) : (
               !editing && (

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

@@ -27,7 +27,6 @@ const Sidebar = (props: SidebarProps) => {
 
   const i18n = useContext(I18nContext);
   const [open, setOpen] = useState(true);
-  const top = 0;
 
   const getActiveSchemas = () => {
     const ids = activeElements.map((ae) => ae.id);
@@ -41,9 +40,15 @@ const Sidebar = (props: SidebarProps) => {
 
   return (
     <div
-      style={{ position: 'absolute', right: 0, zIndex: 1, height, width: open ? SIDEBAR_WIDTH : 0 }}
+      style={{
+        position: 'absolute',
+        right: 0,
+        zIndex: 1,
+        height: height ? height : '100%',
+        width: open ? SIDEBAR_WIDTH : 0,
+      }}
     >
-      <div style={{ position: 'sticky', top, zIndex: 1, fontSize: '1rem' }}>
+      <div style={{ position: 'sticky', top: 0, zIndex: 1, fontSize: '1rem' }}>
         <button
           style={{
             position: 'absolute',
@@ -66,7 +71,7 @@ const Sidebar = (props: SidebarProps) => {
             width: SIDEBAR_WIDTH,
             height: size.height - RULER_HEIGHT * ZOOM,
             display: open ? 'block' : 'none',
-            top,
+            top: RULER_HEIGHT / 2,
             right: 0,
             position: 'absolute',
             background: '#ffffffed',

package/src/components/Designer/index.tsx

@@ -17,10 +17,12 @@ import {
   getKeepRatioHeightByWidth,
   getUniqSchemaKey,
   moveCommandToChangeSchemasArg,
+  getPagesScrollTopByIndex,
 } from '../../helper';
 import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
 import Root from '../Root';
 import Error from '../Error';
+import CtlBar from '../CtlBar';
 
 const TemplateEditor = ({
   template,
@@ -31,22 +33,18 @@ const TemplateEditor = ({
   const copiedSchemas = useRef<SchemaForUI[] | null>(null);
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
-  const rootRef = useRef<HTMLDivElement>(null);
   const mainRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
 
   const i18n = useContext(I18nContext);
 
-  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({
-    template,
-    size,
-    offset: RULER_HEIGHT,
-  });
-
   const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
   const [pageCursor, setPageCursor] = useState(0);
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
 
   const onEdit = (targets: HTMLElement[]) => {
     setActiveElements(targets);
@@ -59,7 +57,7 @@ const TemplateEditor = ({
   };
 
   useScrollPageCursor({
-    rootRef,
+    ref: mainRef,
     pageSizes,
     scale,
     pageCursor,
@@ -190,8 +188,8 @@ const TemplateEditor = ({
     setSchemasList(sl);
     onEditEnd();
     setPageCursor(0);
-    if (rootRef.current?.scroll) {
-      rootRef.current.scroll({ top: 0, behavior: 'smooth' });
+    if (mainRef.current?.scroll) {
+      mainRef.current.scroll({ top: 0, behavior: 'smooth' });
     }
   }, []);
 
@@ -229,11 +227,29 @@ const TemplateEditor = ({
   }
 
   return (
-    <Root ref={rootRef} size={size} scale={scale}>
+    <Root size={size} scale={scale}>
+      <CtlBar
+        pageCursor={pageCursor}
+        pageNum={schemasList.length}
+        setPageCursor={(p) => {
+          if (!mainRef.current) return;
+          mainRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+          setPageCursor(p);
+          onEditEnd();
+        }}
+        zoomLevel={zoomLevel}
+        setZoomLevel={(zoom) => {
+          if (mainRef.current) {
+            const paper = paperRefs.current[pageCursor];
+            mainRef.current.scrollLeft = paper.clientHeight / 2;
+          }
+          setZoomLevel(zoom);
+        }}
+      />
       <Sidebar
         hoveringSchemaId={hoveringSchemaId}
         onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-        height={mainRef.current ? mainRef.current.scrollHeight : 0}
+        height={mainRef.current ? mainRef.current.clientHeight : 0}
         size={size}
         pageSize={pageSizes[pageCursor]}
         activeElements={activeElements}

package/src/components/Error.tsx

@@ -10,7 +10,7 @@ const Error = ({ size, error }: { size: Size; error: Error }) => {
       style={{
         position: 'relative',
         background: 'rgb(74, 74, 74)',
-        overflowY: 'auto',
+        overflow: 'auto',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',

package/src/components/Paper.tsx

@@ -4,7 +4,7 @@ import { FontContext } from '../contexts';
 import { ZOOM, RULER_HEIGHT } from '../constants';
 
 const Paper = (porps: {
-  paperRefs?: MutableRefObject<HTMLDivElement[]>;
+  paperRefs: MutableRefObject<HTMLDivElement[]>;
   scale: number;
   size: Size;
   schemasList: SchemaForUI[][];
@@ -28,6 +28,7 @@ const Paper = (porps: {
       style={{
         transform: `scale(${scale})`,
         transformOrigin: size.width <= topPageWidth * ZOOM * scale ? `left top` : `center top`,
+        height: size.height,
       }}
     >
       {backgrounds.map((background, paperIndex) => {
@@ -36,9 +37,10 @@ const Paper = (porps: {
 
         return (
           <div
+            id={`@pdfme/ui-paper${paperIndex}`}
             key={paperIndex + JSON.stringify(paperSize)}
             ref={(e) => {
-              if (e && paperRefs) {
+              if (e) {
                 paperRefs.current[paperIndex] = e;
               }
             }}

package/src/components/{Preview/index.tsx → Preview.tsx}

@@ -1,28 +1,26 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
 import { PreviewReactProps, SchemaForUI } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../constants';
-import PagePager from './Pager/Page';
-import UnitPager from './Pager/Unit';
-import Root from '../Root';
-import Error from '../Error';
-import Paper from '../Paper';
-import SchemaUI from '../Schemas/SchemaUI';
-import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
-import { templateSchemas2SchemasList } from '../../helper';
+import { ZOOM, RULER_HEIGHT } from '../constants';
+import UnitPager from './UnitPager';
+import Root from './Root';
+import Error from './Error';
+import CtlBar from './CtlBar';
+import Paper from './Paper';
+import SchemaUI from './Schemas/SchemaUI';
+import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
+import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
 
 const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) => {
-  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({
-    template,
-    size,
-    offset: RULER_HEIGHT,
-  });
-
   const rootRef = useRef<HTMLDivElement>(null);
+  const paperRefs = useRef<HTMLDivElement[]>([]);
 
   const [unitCursor, setUnitCursor] = useState(0);
   const [pageCursor, setPageCursor] = useState(0);
+  const [zoomLevel, setZoomLevel] = useState(1);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
 
+  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
+
   const init = useCallback(async () => {
     const sl = await templateSchemas2SchemasList(template);
     setSchemasList(sl);
@@ -33,7 +31,7 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
   }, [init]);
 
   useScrollPageCursor({
-    rootRef,
+    ref: rootRef,
     pageSizes,
     scale,
     pageCursor,
@@ -52,27 +50,26 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
 
   return (
     <Root ref={rootRef} size={size} scale={scale}>
-      <div
-        style={{
-          height: pageSizes.reduce((acc, cur) => acc + cur.height * ZOOM, 0),
-          width: '100%',
-          position: 'absolute',
+      <UnitPager unitCursor={unitCursor} unitNum={inputs.length} setUnitCursor={setUnitCursor} />
+      <CtlBar
+        pageCursor={pageCursor}
+        pageNum={schemasList.length}
+        setPageCursor={(p) => {
+          if (!rootRef.current) return;
+          rootRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+          setPageCursor(p);
         }}
-      >
-        <UnitPager unitCursor={unitCursor} unitNum={inputs.length} setUnitCursor={setUnitCursor} />
-        <PagePager
-          pageCursor={pageCursor}
-          pageNum={schemasList.length}
-          setPageCursor={(p) => {
-            if (!rootRef.current) return;
-            rootRef.current.scrollTop = pageSizes
-              .slice(0, p)
-              .reduce((acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT) * scale, 0);
-            setPageCursor(p);
-          }}
-        />
-      </div>
+        zoomLevel={zoomLevel}
+        setZoomLevel={(zoom) => {
+          if (rootRef.current) {
+            const paper = paperRefs.current[pageCursor];
+            rootRef.current.scrollLeft = Number(paper.style.width.replace('px', '')) / 2;
+          }
+          setZoomLevel(zoom);
+        }}
+      />
       <Paper
+        paperRefs={paperRefs}
         scale={scale}
         size={size}
         schemasList={schemasList}

package/src/components/Root.tsx

@@ -29,12 +29,11 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   return (
     <div
       ref={ref}
-      style={{ position: 'relative', background: 'rgb(74, 74, 74)', overflowY: 'auto', ...size }}
+      style={{ position: 'relative', background: 'rgb(74, 74, 74)', overflow: 'auto', ...size }}
     >
       <div
         style={{
           margin: '0 auto',
-          width: size.width - RULER_HEIGHT * scale,
           height: size.height - RULER_HEIGHT * scale,
         }}
       >

package/src/components/Schemas/SchemaUI.tsx

@@ -32,6 +32,7 @@ const Wrapper = ({
     id={schema.id}
     style={{
       position: 'absolute',
+      cursor: 'pointer',
       height: schema.height * ZOOM,
       width: schema.width * ZOOM,
       top: schema.position.y * ZOOM,

package/src/components/Schemas/TextSchema.tsx

@@ -32,7 +32,6 @@ const TextSchemaUI = (
     wordBreak: 'break-all',
     background: 'transparent',
     border: 'none',
-    outline: 'none',
     color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
     backgroundColor: schema.data && schema.backgroundColor ? schema.backgroundColor : 'transparent',
   };