@pdfme/ui 1.0.18 → 1.1.1

package/dist/types/{components → src/components}/Spinner.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Spinner: () => JSX.Element;
 export default Spinner;

package/dist/types/{components → src/components}/UnitPager.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare type Props = {
     size: Size;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const I18nContext: import("react").Context<(key: "type" | "require" | "cancel" | "field" | "fieldName" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
+export declare const FontContext: import("react").Context<Record<string, {
+    fallback?: boolean | undefined;
+    subset?: boolean | undefined;
+    data: ArrayBuffer | Uint8Array;
+}>>;

package/dist/types/{helper.d.ts → src/helper.d.ts}

@@ -27,48 +27,48 @@ export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
 export declare const pdf2Pngs: (pdfBlob: Blob, width: number) => Promise<string[]>;
 export declare const b64toBlob: (base64: string) => Blob;
 export declare const templateSchemas2SchemasList: (_template: Template) => Promise<({
-    rotate?: number | undefined;
-    alignment?: "left" | "center" | "right" | undefined;
+    backgroundColor?: string | undefined;
     fontSize?: number | undefined;
+    lineHeight?: number | undefined;
+    rotate?: number | undefined;
+    alignment?: "center" | "left" | "right" | undefined;
     fontName?: string | undefined;
     fontColor?: string | undefined;
-    backgroundColor?: string | undefined;
     characterSpacing?: number | undefined;
-    lineHeight?: number | undefined;
     type: "text";
+    data: string;
+    key: string;
+    id: string;
+    height: number;
+    width: number;
     position: {
         x: number;
         y: number;
     };
-    data: string;
-    width: number;
-    height: number;
-    id: string;
-    key: string;
 } | {
     rotate?: number | undefined;
     type: "image";
+    data: string;
+    key: string;
+    id: string;
+    height: number;
+    width: number;
     position: {
         x: number;
         y: number;
     };
-    data: string;
-    width: number;
-    height: number;
-    id: string;
-    key: string;
 } | {
     rotate?: number | undefined;
     type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
+    data: string;
+    key: string;
+    id: string;
+    height: number;
+    width: number;
     position: {
         x: number;
         y: number;
     };
-    data: string;
-    width: number;
-    height: number;
-    id: string;
-    key: string;
 })[][]>;
 export declare const fmtTemplate: (template: Template, schemasList: SchemaForUI[][]) => Template;
 export declare const getInitialSchema: () => SchemaForUI;

package/dist/types/{hooks.d.ts → src/hooks.d.ts}

@@ -9,8 +9,8 @@ declare type UIPreProcessorProps = {
 export declare const useUIPreProcessor: ({ template, size, zoomLevel }: UIPreProcessorProps) => {
     backgrounds: string[];
     pageSizes: {
-        width: number;
         height: number;
+        width: number;
     }[];
     scale: number;
     error: Error | null;

package/dist/types/{i18n.d.ts → src/i18n.d.ts}

@@ -8,9 +8,7 @@ declare const dictEn: {
     uniq: string;
     inputExample: string;
     edit: string;
-    plsSelect: string;
     plsInputName: string;
-    plsAddNewField: string;
     fieldMustUniq: string;
     notUniq: string;
     noKeyName: string;
@@ -18,13 +16,6 @@ declare const dictEn: {
     addNewField: string;
     editField: string;
     type: string;
-    goToFirst: string;
-    goToPrevious: string;
-    goToNext: string;
-    goToEnd: string;
-    select: string;
-    zoomIn: string;
-    zoomOut: string;
     errorOccurred: string;
     errorBulkUpdateFieldName: string;
     commitBulkUpdateFieldName: string;

package/dist/types/{index.d.ts → src/index.d.ts}

@@ -1,6 +1,6 @@
-import Designer from './Designer';
-import Form from './Form';
-import Viewer from './Viewer';
+import Designer from './Designer.js';
+import Form from './Form.js';
+import Viewer from './Viewer.js';
 export { Designer, Viewer, Form };
 export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, } from '@pdfme/common';
 export { BLANK_PDF, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, } from '@pdfme/common';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.18",
+  "version": "1.1.1",
+  "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
   "keywords": [
@@ -20,15 +21,23 @@
   "bugs": {
     "url": "https://github.com/pdfme/pdfme/issues"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "main": "dist/cjs/src/index.js",
+  "module": "dist/esm/src/index.js",
+  "types": "dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
+    }
+  },
   "engines": {
     "node": ">=14"
   },
   "scripts": {
-    "develop": "webpack --watch --mode development",
-    "build": "NODE_ENV=production webpack --mode production",
+    "develop": "tsc -w",
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
     "clean": "rimraf dist",
     "lint": "tsc --noEmit",
     "test": "jest",
@@ -39,6 +48,7 @@
   "dependencies": {
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/sortable": "^6.0.0",
+    "@heroicons/react": "^2.0.13",
     "@pdfme/common": "^1.0.0",
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
@@ -66,9 +76,9 @@
       "jest-canvas-mock"
     ],
     "moduleNameMapper": {
-      "\\.(png|svg)$": "<rootDir>/../../assetsTransformer.js",
-      "\\.(ttf)$": "<rootDir>/../../fontTransformer.js"
+      "\\.(png)$": "<rootDir>/../../assetsTransformer.js"
     },
+    "resolver": "ts-jest-resolver",
     "moduleFileExtensions": [
       "js",
       "ts",
@@ -80,7 +90,7 @@
     },
     "globals": {
       "ts-jest": {
-        "tsconfig": "tsconfig.json"
+        "tsconfig": "tsconfig.esm.json"
       }
     },
     "testMatch": [

package/src/Designer.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
-import { BaseUIClass } from './class';
-import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
-import DesignerComponent from './components/Designer';
-import { cloneDeep } from './helper';
+import { BaseUIClass } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import { I18nContext, FontContext } from './contexts.js';
+import DesignerComponent from './components/Designer/index.js';
+import { cloneDeep } from './helper.js';
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;

package/src/Form.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class';
-import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
-import Preview from './components/Preview';
+import { PreviewUI } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import { I18nContext, FontContext } from './contexts.js';
+import Preview from './components/Preview.js';
 
 class Form extends PreviewUI {
   private onChangeInputCallback?: (arg: { index: number; value: string; key: string }) => void;

package/src/Viewer.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class';
-import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
-import Preview from './components/Preview';
+import { PreviewUI } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import { I18nContext, FontContext } from './contexts.js';
+import Preview from './components/Preview.js';
 
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {

package/src/class.ts

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
-import { curriedI18n } from './i18n';
-import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
-import { debounce, flatten, cloneDeep } from './helper';
+import { curriedI18n } from './i18n.js';
+import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
+import { debounce, flatten, cloneDeep } from './helper.js';
 import {
   Template,
   Size,

package/src/components/CtlBar/Pager.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
-import left from '../../assets/icons/left.svg';
-import right from '../../assets/icons/right.svg';
-import { I18nContext } from '../../contexts';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { I18nContext } from '../../contexts.js';
 
 const btnStyle: React.CSSProperties = {
   cursor: 'pointer',
@@ -31,7 +30,7 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
         disabled={pageCursor <= 0}
         onClick={() => setPageCursor(pageCursor - 1)}
       >
-        <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
+        <ChevronLeftIcon width={20} height={20} color={'#fff'} />
       </button>
       <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 45, textAlign: 'center' }}>
         {pageCursor + 1}/{pageNum}
@@ -45,7 +44,7 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
         disabled={pageCursor + 1 >= pageNum}
         onClick={() => setPageCursor(pageCursor + 1)}
       >
-        <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
+        <ChevronRightIcon width={20} height={20} color={'#fff'} />
       </button>
     </div>
   );

package/src/components/CtlBar/Zoom.tsx

@@ -1,7 +1,5 @@
-import React, { useContext } from 'react';
-import { I18nContext } from '../../contexts';
-import add from '../../assets/icons/add.svg';
-import remove from '../../assets/icons/remove.svg';
+import React from 'react';
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 
 const btnStyle: React.CSSProperties = {
   cursor: 'pointer',
@@ -21,7 +19,6 @@ type Props = {
 };
 
 const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
-  const i18n = useContext(I18nContext);
   const nextZoomOut = zoomLevel - zoomStep;
   const nextZoomIn = zoomLevel + zoomStep;
 
@@ -36,7 +33,7 @@ const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
         disabled={minZoom >= nextZoomOut}
         onClick={() => setZoomLevel(nextZoomOut)}
       >
-        <img src={remove} alt={i18n('zoomOut')} style={{ width: 20 }} />
+        <MinusIcon width={20} height={20} color={'#fff'} />
       </button>
       <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 50, textAlign: 'center' }}>
         {Math.round(zoomLevel * 100)}%
@@ -50,7 +47,7 @@ const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
         disabled={maxZoom < nextZoomIn}
         onClick={() => setZoomLevel(nextZoomIn)}
       >
-        <img src={add} alt={i18n('zoomIn')} style={{ width: 20 }} />
+        <PlusIcon width={20} height={20} color={'#fff'} />
       </button>
     </div>
   );

package/src/components/CtlBar/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Pager from './Pager';
-import Zoom from './Zoom';
+import Pager from './Pager.js';
+import Zoom from './Zoom.js';
 import { Size } from '@pdfme/common';
 
 type Props = {

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

@@ -1,7 +1,7 @@
 import React, { Ref } from 'react';
 import Guides from '@scena/react-guides';
 import { Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { ZOOM, RULER_HEIGHT } from '../../../constants.js';
 
 const _Guides = ({
   paperSize,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Size } from '@pdfme/common';
-import { RULER_HEIGHT } from '../../../constants';
+import { RULER_HEIGHT } from '../../../constants.js';
 
 const Mask = ({ width, height }: Size) => (
   <div

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Selecto, { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
-import { SELECTABLE_CLASSNAME } from '../../../constants';
+import { SELECTABLE_CLASSNAME } from '../../../constants.js';
 
 const _Selecto = ({
   container,

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

@@ -9,15 +9,15 @@ import React, {
 } from 'react';
 import { OnDrag, OnResize, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants';
-import { usePrevious } from '../../../hooks';
-import { uuid, round, flatten } from '../../../helper';
-import Paper from '../../Paper';
-import SchemaUI from '../../Schemas/SchemaUI';
-import Selecto from './Selecto';
-import Moveable from './Moveable';
-import Guides from './Guides';
-import Mask from './Mask';
+import { ZOOM, RULER_HEIGHT } from '../../../constants.js';
+import { usePrevious } from '../../../hooks.js';
+import { uuid, round, flatten } from '../../../helper.js';
+import Paper from '../../Paper.js';
+import SchemaUI from '../../Schemas/SchemaUI.js';
+import Selecto from './Selecto.js';
+import Moveable from './Moveable.js';
+import Guides from './Guides.js';
+import Mask from './Mask.js';
 
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));

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

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { readFiles } from '../../../../helper';
-import { I18nContext } from '../../../../contexts';
+import { readFiles } from '../../../../helper.js';
+import { I18nContext } from '../../../../contexts.js';
 import { SidebarProps } from '..';
-import closeIcon from '../../../../assets/icons/close.svg';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 const ExampleInputEditor = (
   props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
@@ -39,7 +39,7 @@ const ExampleInputEditor = (
                   changeSchemas([{ key: 'data', value: '', schemaId: activeSchema.id }])
                 }
               >
-                <img src={closeIcon} alt="Close icon" width={10} />
+                <XMarkIcon width={10} height={10} />
               </button>
               <img style={{ maxHeight: 180 }} src={activeSchema.data} alt="Input Example" />
             </div>

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

@@ -1,15 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { round } from '../../../../helper';
-import { SidebarProps } from '..';
-import alignVerticalTop from '../../../../assets/icons/align-vertical-top.svg';
-import alignVerticalMiddle from '../../../../assets/icons/align-vertical-middle.svg';
-import alignVerticalBottom from '../../../../assets/icons/align-vertical-bottom.svg';
-import alignHorizontalRight from '../../../../assets/icons/align-horizontal-right.svg';
-import alignHorizontalLeft from '../../../../assets/icons/align-horizontal-left.svg';
-import alignHorizontalCenter from '../../../../assets/icons/align-horizontal-center.svg';
-import verticalDistribute from '../../../../assets/icons/vertical-distribute.svg';
-import horizontalDistribute from '../../../../assets/icons/horizontal-distribute.svg';
+import { round } from '../../../../helper.js';
+import { SidebarProps } from '../index.js';
 
 const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
 
@@ -30,6 +22,16 @@ const buttonStyle: CSSProperties = {
   cursor: 'pointer',
 };
 
+const svgBaseProp = {
+  style: { width: '100%', height: '100%' },
+  xmlns: 'http://www.w3.org/2000/svg',
+  enableBackground: 'new 0 0 24 24',
+  height: '24px',
+  viewBox: '0 0 24 24',
+  width: '24px',
+  fill: '#000000',
+};
+
 const PositionAndSizeEditor = (
   props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
     activeSchema: SchemaForUI;
@@ -99,14 +101,86 @@ const PositionAndSizeEditor = (
   };
 
   const layoutBtns: { id: string; icon: any; action: () => void }[] = [
-    { id: 'left', icon: alignHorizontalLeft, action: () => align('left') },
-    { id: 'center', icon: alignHorizontalCenter, action: () => align('center') },
-    { id: 'right', icon: alignHorizontalRight, action: () => align('right') },
-    { id: 'top', icon: alignVerticalTop, action: () => align('top') },
-    { id: 'middle', icon: alignVerticalMiddle, action: () => align('middle') },
-    { id: 'bottom', icon: alignVerticalBottom, action: () => align('bottom') },
-    { id: 'vertical', icon: verticalDistribute, action: () => distribute('vertical') },
-    { id: 'horizontal', icon: horizontalDistribute, action: () => distribute('horizontal') },
+    {
+      id: 'left',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z" />
+        </svg>
+      ),
+      action: () => align('left'),
+    },
+    {
+      id: 'center',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <polygon points="11,2 13,2 13,7 21,7 21,10 13,10 13,14 18,14 18,17 13,17 13,22 11,22 11,17 6,17 6,14 11,14 11,10 3,10 3,7 11,7" />
+        </svg>
+      ),
+      action: () => align('center'),
+    },
+    {
+      id: 'right',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M20,2h2v20h-2V2z M2,10h16V7H2V10z M8,17h10v-3H8V17z" />
+        </svg>
+      ),
+      action: () => align('right'),
+    },
+    {
+      id: 'top',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M22,2v2H2V2H22z M7,22h3V6H7V22z M14,16h3V6h-3V16z" />
+        </svg>
+      ),
+      action: () => align('top'),
+    },
+    {
+      id: 'middle',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <polygon points="22,11 17,11 17,6 14,6 14,11 10,11 10,3 7,3 7,11 1.84,11 1.84,13 7,13 7,21 10,21 10,13 14,13 14,18 17,18 17,13 22,13" />
+        </svg>
+      ),
+      action: () => align('middle'),
+    },
+    {
+      id: 'bottom',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M22,22H2v-2h20V22z M10,2H7v16h3V2z M17,8h-3v10h3V8z" />
+        </svg>
+      ),
+      action: () => align('bottom'),
+    },
+    {
+      id: 'vertical',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M22,2v2H2V2H22z M7,10.5v3h10v-3H7z M2,20v2h20v-2H2z" />
+        </svg>
+      ),
+      action: () => distribute('vertical'),
+    },
+    {
+      id: 'horizontal',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M4,22H2V2h2V22z M22,2h-2v20h2V2z M13.5,7h-3v10h3V7z" />
+        </svg>
+      ),
+      action: () => distribute('horizontal'),
+    },
   ];
 
   return (
@@ -114,7 +188,9 @@ const PositionAndSizeEditor = (
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
         {layoutBtns.map((b) => (
           <button key={b.id} title={b.id} onClick={b.action} style={buttonStyle}>
-            <img width={15} src={b.icon} />
+            <object width={15} height={15}>
+              {b.icon}
+            </object>
           </button>
         ))}
       </div>

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

@@ -7,9 +7,9 @@ import {
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
 } from '@pdfme/common';
-import { FontContext } from '../../../../contexts';
+import { FontContext } from '../../../../contexts.js';
 import { SidebarProps } from '..';
-import closeIcon from '../../../../assets/icons/close.svg';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 const inputStyle = {
   width: '90%',
@@ -60,7 +60,7 @@ const ColorInputSet = (props: {
             cursor: 'pointer',
           }}
         >
-          <img src={closeIcon} width={10} alt="Close icon" />
+          <XMarkIcon width={10} height={10} />
         </button>
       </div>
     </div>

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

@@ -1,7 +1,7 @@
 import React, { useContext, useRef, useCallback } from 'react';
 import { schemaTypes, SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '..';
-import { I18nContext } from '../../../../contexts';
+import { SidebarProps } from '../index.js';
+import { I18nContext } from '../../../../contexts.js';
 
 const ErrorLabel = ({ isError, msg }: { isError: boolean; msg: string }) => (
   <span

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

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { I18nContext } from '../../../../contexts';
-import Divider from '../../../Divider';
-import { SidebarProps } from '..';
-import TextPropEditor from './TextPropEditor';
-import ExampleInputEditor from './ExampleInputEditor';
-import PositionAndSizeEditor from './PositionAndSizeEditor';
-import TypeAndKeyEditor from './TypeAndKeyEditor';
+import { I18nContext } from '../../../../contexts.js';
+import Divider from '../../../Divider.js';
+import { SidebarProps } from '../index.js';
+import TextPropEditor from './TextPropEditor.js';
+import ExampleInputEditor from './ExampleInputEditor.js';
+import PositionAndSizeEditor from './PositionAndSizeEditor.js';
+import TypeAndKeyEditor from './TypeAndKeyEditor.js';
 
 const DetailView = (
   props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {