@pdfme/schemas 3.1.3-dev.8 → 3.1.3-dev.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/cjs/src/text/constants.js +2 -1
  2. package/dist/cjs/src/text/constants.js.map +1 -1
  3. package/dist/cjs/src/text/uiRender.js +70 -41
  4. package/dist/cjs/src/text/uiRender.js.map +1 -1
  5. package/dist/esm/src/text/constants.js +1 -0
  6. package/dist/esm/src/text/constants.js.map +1 -1
  7. package/dist/esm/src/text/uiRender.js +71 -42
  8. package/dist/esm/src/text/uiRender.js.map +1 -1
  9. package/dist/types/src/text/constants.d.ts +1 -0
  10. package/package.json +1 -1
  11. package/src/text/constants.ts +1 -0
  12. package/src/text/uiRender.ts +81 -45
package/dist/cjs/src/text/constants.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.FONT_SIZE_ADJUSTMENT = exports.DEFAULT_DYNAMIC_MAX_FONT_SIZE = exports.DEFAULT_DYNAMIC_MIN_FONT_SIZE = exports.DEFAULT_DYNAMIC_FIT = exports.DYNAMIC_FIT_HORIZONTAL = exports.DYNAMIC_FIT_VERTICAL = exports.DEFAULT_FONT_COLOR = exports.DEFAULT_CHARACTER_SPACING = exports.DEFAULT_LINE_HEIGHT = exports.DEFAULT_VERTICAL_ALIGNMENT = exports.VERTICAL_ALIGN_BOTTOM = exports.VERTICAL_ALIGN_MIDDLE = exports.VERTICAL_ALIGN_TOP = exports.DEFAULT_ALIGNMENT = exports.ALIGN_RIGHT = exports.ALIGN_CENTER = exports.ALIGN_LEFT = exports.DEFAULT_FONT_SIZE = void 0;
3
+ exports.FONT_SIZE_ADJUSTMENT = exports.DEFAULT_DYNAMIC_MAX_FONT_SIZE = exports.DEFAULT_DYNAMIC_MIN_FONT_SIZE = exports.DEFAULT_DYNAMIC_FIT = exports.DYNAMIC_FIT_HORIZONTAL = exports.DYNAMIC_FIT_VERTICAL = exports.PLACEHOLDER_FONT_COLOR = exports.DEFAULT_FONT_COLOR = exports.DEFAULT_CHARACTER_SPACING = exports.DEFAULT_LINE_HEIGHT = exports.DEFAULT_VERTICAL_ALIGNMENT = exports.VERTICAL_ALIGN_BOTTOM = exports.VERTICAL_ALIGN_MIDDLE = exports.VERTICAL_ALIGN_TOP = exports.DEFAULT_ALIGNMENT = exports.ALIGN_RIGHT = exports.ALIGN_CENTER = exports.ALIGN_LEFT = exports.DEFAULT_FONT_SIZE = void 0;
4
4
  exports.DEFAULT_FONT_SIZE = 13;
5
5
  exports.ALIGN_LEFT = 'left';
6
6
  exports.ALIGN_CENTER = 'center';
@@ -13,6 +13,7 @@ exports.DEFAULT_VERTICAL_ALIGNMENT = exports.VERTICAL_ALIGN_TOP;
13
13
  exports.DEFAULT_LINE_HEIGHT = 1;
14
14
  exports.DEFAULT_CHARACTER_SPACING = 0;
15
15
  exports.DEFAULT_FONT_COLOR = '#000000';
16
+ exports.PLACEHOLDER_FONT_COLOR = '#A0A0A0';
16
17
  exports.DYNAMIC_FIT_VERTICAL = 'vertical';
17
18
  exports.DYNAMIC_FIT_HORIZONTAL = 'horizontal';
18
19
  exports.DEFAULT_DYNAMIC_FIT = exports.DYNAMIC_FIT_VERTICAL;
package/dist/cjs/src/text/constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/text/constants.ts"],"names":[],"mappings":";;;AAEa,QAAA,iBAAiB,GAAG,EAAE,CAAC;AAEvB,QAAA,UAAU,GAAG,MAAmB,CAAC;AACjC,QAAA,YAAY,GAAG,QAAqB,CAAC;AACrC,QAAA,WAAW,GAAG,OAAoB,CAAC;AACnC,QAAA,iBAAiB,GAAG,kBAAU,CAAC;AAC/B,QAAA,kBAAkB,GAAG,KAA2B,CAAC;AACjD,QAAA,qBAAqB,GAAG,QAA8B,CAAC;AACvD,QAAA,qBAAqB,GAAG,QAA8B,CAAC;AACvD,QAAA,0BAA0B,GAAG,0BAAkB,CAAC;AAChD,QAAA,mBAAmB,GAAG,CAAC,CAAC;AACxB,QAAA,yBAAyB,GAAG,CAAC,CAAC;AAC9B,QAAA,kBAAkB,GAAG,SAAS,CAAC;AAC/B,QAAA,oBAAoB,GAAG,UAAmC,CAAC;AAC3D,QAAA,sBAAsB,GAAG,YAAqC,CAAC;AAC/D,QAAA,mBAAmB,GAAG,4BAAoB,CAAC;AAC3C,QAAA,6BAA6B,GAAG,CAAC,CAAC;AAElC,QAAA,6BAA6B,GAAG,EAAE,CAAC;AACnC,QAAA,oBAAoB,GAAG,IAAI,CAAC"}
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/text/constants.ts"],"names":[],"mappings":";;;AAEa,QAAA,iBAAiB,GAAG,EAAE,CAAC;AAEvB,QAAA,UAAU,GAAG,MAAmB,CAAC;AACjC,QAAA,YAAY,GAAG,QAAqB,CAAC;AACrC,QAAA,WAAW,GAAG,OAAoB,CAAC;AACnC,QAAA,iBAAiB,GAAG,kBAAU,CAAC;AAC/B,QAAA,kBAAkB,GAAG,KAA2B,CAAC;AACjD,QAAA,qBAAqB,GAAG,QAA8B,CAAC;AACvD,QAAA,qBAAqB,GAAG,QAA8B,CAAC;AACvD,QAAA,0BAA0B,GAAG,0BAAkB,CAAC;AAChD,QAAA,mBAAmB,GAAG,CAAC,CAAC;AACxB,QAAA,yBAAyB,GAAG,CAAC,CAAC;AAC9B,QAAA,kBAAkB,GAAG,SAAS,CAAC;AAC/B,QAAA,sBAAsB,GAAG,SAAS,CAAC;AACnC,QAAA,oBAAoB,GAAG,UAAmC,CAAC;AAC3D,QAAA,sBAAsB,GAAG,YAAqC,CAAC;AAC/D,QAAA,mBAAmB,GAAG,4BAAoB,CAAC;AAC3C,QAAA,6BAA6B,GAAG,CAAC,CAAC;AAElC,QAAA,6BAA6B,GAAG,EAAE,CAAC;AACnC,QAAA,oBAAoB,GAAG,IAAI,CAAC"}
package/dist/cjs/src/text/uiRender.js CHANGED
@@ -5,6 +5,7 @@ const common_1 = require("@pdfme/common");
5
5
  const constants_js_1 = require("./constants.js");
6
6
  const helper_js_1 = require("./helper.js");
7
7
  const renderUtils_js_1 = require("../renderUtils.js");
8
+ const constants_js_2 = require("../constants.js");
8
9
  const mapVerticalAlignToFlex = (verticalAlignmentValue) => {
9
10
  switch (verticalAlignmentValue) {
10
11
  case constants_js_1.VERTICAL_ALIGN_TOP:
@@ -31,21 +32,22 @@ const uiRender = async (arg) => {
31
32
  const { value, schema, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, options, theme, _cache, } = arg;
32
33
  const font = options?.font || (0, common_1.getDefaultFont)();
33
34
  let dynamicFontSize = undefined;
35
+ const getCdfArg = (v) => ({
36
+ textSchema: schema,
37
+ font,
38
+ value: v,
39
+ startingFontSize: dynamicFontSize,
40
+ _cache,
41
+ });
34
42
  if (schema.dynamicFontSize && value) {
35
- dynamicFontSize = await (0, helper_js_1.calculateDynamicFontSize)({
36
- textSchema: schema,
37
- font,
38
- value,
39
- startingFontSize: dynamicFontSize,
40
- _cache,
41
- });
43
+ dynamicFontSize = await (0, helper_js_1.calculateDynamicFontSize)(getCdfArg(value));
42
44
  }
43
45
  const fontKitFont = await (0, helper_js_1.getFontKitFont)(schema, font, _cache);
44
46
  // Depending on vertical alignment, we need to move the top or bottom of the font to keep
45
47
  // it within it's defined box and align it with the generated pdf.
46
48
  const { topAdj, bottomAdj } = (0, helper_js_1.getBrowserVerticalFontAdjustments)(fontKitFont, dynamicFontSize ?? schema.fontSize ?? constants_js_1.DEFAULT_FONT_SIZE, schema.lineHeight ?? constants_js_1.DEFAULT_LINE_HEIGHT, schema.verticalAlignment ?? constants_js_1.DEFAULT_VERTICAL_ALIGNMENT);
47
- const topAdjustment = topAdj;
48
- const bottomAdjustment = bottomAdj;
49
+ const topAdjustment = topAdj.toString();
50
+ const bottomAdjustment = bottomAdj.toString();
49
51
  const container = document.createElement('div');
50
52
  const containerStyle = {
51
53
  padding: 0,
@@ -57,12 +59,13 @@ const uiRender = async (arg) => {
57
59
  justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
58
60
  width: '100%',
59
61
  height: '100%',
60
- opacity: schema.opacity,
62
+ opacity: schema.opacity ?? constants_js_2.DEFAULT_OPACITY,
61
63
  };
62
64
  Object.assign(container.style, containerStyle);
63
65
  rootElement.innerHTML = '';
64
66
  rootElement.appendChild(container);
65
- const fontStyles = {
67
+ const textBlockStyle = {
68
+ // Font formatting styles
66
69
  fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
67
70
  color: schema.fontColor ? schema.fontColor : constants_js_1.DEFAULT_FONT_COLOR,
68
71
  fontSize: `${dynamicFontSize ?? schema.fontSize ?? constants_js_1.DEFAULT_FONT_SIZE}pt`,
@@ -71,45 +74,71 @@ const uiRender = async (arg) => {
71
74
  textAlign: schema.alignment ?? constants_js_1.DEFAULT_ALIGNMENT,
72
75
  whiteSpace: 'pre-wrap',
73
76
  wordBreak: 'break-word',
77
+ // Block layout styles
78
+ resize: 'none',
79
+ border: 'none',
80
+ outline: 'none',
81
+ marginBottom: bottomAdjustment + 'px',
82
+ paddingTop: topAdjustment + 'px',
83
+ backgroundColor: 'transparent',
74
84
  };
85
+ const textBlock = document.createElement('div');
86
+ Object.assign(textBlock.style, textBlockStyle);
75
87
  if (mode === 'form' || mode === 'designer') {
76
- const textarea = document.createElement('textarea');
77
- const textareaStyle = {
78
- padding: 0,
79
- resize: 'none',
80
- border: 'none',
81
- outline: 'none',
82
- paddingTop: topAdjustment + 'px',
83
- backgroundColor: 'transparent',
84
- width: '100%',
85
- height: '100%',
86
- };
87
- Object.assign(textarea.style, textareaStyle, fontStyles);
88
- textarea.rows = 1;
89
- textarea.placeholder = placeholder || '';
90
- textarea.tabIndex = tabIndex || 0;
91
- textarea.addEventListener('change', (e) => onChange && onChange(e.target.value));
92
- textarea.addEventListener('blur', () => stopEditing && stopEditing());
93
- textarea.value = value;
94
- container.appendChild(textarea);
88
+ textBlock.contentEditable = 'plaintext-only';
89
+ textBlock.tabIndex = tabIndex || 0;
90
+ textBlock.innerText = value;
91
+ textBlock.addEventListener('blur', (e) => {
92
+ onChange && onChange(e.target.innerText);
93
+ stopEditing && stopEditing();
94
+ });
95
+ if (schema.dynamicFontSize) {
96
+ textBlock.addEventListener('keyup', () => {
97
+ setTimeout(() => {
98
+ void (async () => {
99
+ if (!textBlock.textContent)
100
+ return;
101
+ dynamicFontSize = await (0, helper_js_1.calculateDynamicFontSize)(getCdfArg(textBlock.textContent));
102
+ textBlock.style.fontSize = `${dynamicFontSize}pt`;
103
+ const { topAdj: newTopAdj, bottomAdj: newBottomAdj } = (0, helper_js_1.getBrowserVerticalFontAdjustments)(fontKitFont, dynamicFontSize ?? schema.fontSize ?? constants_js_1.DEFAULT_FONT_SIZE, schema.lineHeight ?? constants_js_1.DEFAULT_LINE_HEIGHT, schema.verticalAlignment ?? constants_js_1.DEFAULT_VERTICAL_ALIGNMENT);
104
+ textBlock.style.paddingTop = newTopAdj.toString() + 'px';
105
+ textBlock.style.marginBottom = newBottomAdj.toString() + 'px';
106
+ })();
107
+ }, 0);
108
+ });
109
+ }
110
+ if (placeholder && !value) {
111
+ textBlock.innerText = placeholder;
112
+ textBlock.style.color = constants_js_1.PLACEHOLDER_FONT_COLOR;
113
+ if (schema.dynamicFontSize) {
114
+ const fontSize = await (0, helper_js_1.calculateDynamicFontSize)(getCdfArg(placeholder));
115
+ textBlock.style.fontSize = `${fontSize}pt`;
116
+ }
117
+ textBlock.addEventListener('focus', () => {
118
+ if (textBlock.innerText === placeholder) {
119
+ textBlock.innerText = '';
120
+ textBlock.style.color = schema.fontColor ?? constants_js_1.DEFAULT_FONT_COLOR;
121
+ }
122
+ });
123
+ }
124
+ container.appendChild(textBlock);
95
125
  if (mode === 'designer') {
96
- textarea.setSelectionRange(value.length, value.length);
97
- textarea.focus();
126
+ textBlock.focus();
127
+ // Set the focus to the end of the editable element when you focus, as we would for a textarea
128
+ const selection = window.getSelection();
129
+ const range = document.createRange();
130
+ range.selectNodeContents(textBlock);
131
+ range.collapse(false); // Collapse range to the end
132
+ selection?.removeAllRanges();
133
+ selection?.addRange(range);
98
134
  }
99
135
  }
100
136
  else {
101
- const div = document.createElement('div');
102
- const divStyle = {
103
- ...fontStyles,
104
- marginBottom: bottomAdjustment + 'px',
105
- paddingTop: topAdjustment + 'px',
106
- };
107
- Object.assign(div.style, divStyle);
108
- div.innerHTML = value
137
+ textBlock.innerHTML = value
109
138
  .split('')
110
139
  .map((l, i) => `<span style="letter-spacing:${String(value).length === i + 1 ? 0 : 'inherit'};">${l}</span>`)
111
140
  .join('');
112
- container.appendChild(div);
141
+ container.appendChild(textBlock);
113
142
  }
114
143
  };
115
144
  exports.uiRender = uiRender;
package/dist/cjs/src/text/uiRender.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"uiRender.js","sourceRoot":"","sources":["../../../../src/text/uiRender.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"uiRender.js","sourceRoot":"","sources":["../../../../src/text/uiRender.ts"],"names":[],"mappings":"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"}
package/dist/esm/src/text/constants.js CHANGED
@@ -10,6 +10,7 @@ export const DEFAULT_VERTICAL_ALIGNMENT = VERTICAL_ALIGN_TOP;
10
10
  export const DEFAULT_LINE_HEIGHT = 1;
11
11
  export const DEFAULT_CHARACTER_SPACING = 0;
12
12
  export const DEFAULT_FONT_COLOR = '#000000';
13
+ export const PLACEHOLDER_FONT_COLOR = '#A0A0A0';
13
14
  export const DYNAMIC_FIT_VERTICAL = 'vertical';
14
15
  export const DYNAMIC_FIT_HORIZONTAL = 'horizontal';
15
16
  export const DEFAULT_DYNAMIC_FIT = DYNAMIC_FIT_VERTICAL;
package/dist/esm/src/text/constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/text/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAEpC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAmB,CAAC;AAC9C,MAAM,CAAC,MAAM,YAAY,GAAG,QAAqB,CAAC;AAClD,MAAM,CAAC,MAAM,WAAW,GAAG,OAAoB,CAAC;AAChD,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAAC;AAC5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAA2B,CAAC;AAC9D,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAA8B,CAAC;AACpE,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAA8B,CAAC;AACpE,MAAM,CAAC,MAAM,0BAA0B,GAAG,kBAAkB,CAAC;AAC7D,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAC3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC;AAC5C,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAmC,CAAC;AACxE,MAAM,CAAC,MAAM,sBAAsB,GAAG,YAAqC,CAAC;AAC5E,MAAM,CAAC,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AACxD,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,CAAC;AAE/C,MAAM,CAAC,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAChD,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAC"}
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/text/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAEpC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAmB,CAAC;AAC9C,MAAM,CAAC,MAAM,YAAY,GAAG,QAAqB,CAAC;AAClD,MAAM,CAAC,MAAM,WAAW,GAAG,OAAoB,CAAC;AAChD,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAAC;AAC5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAA2B,CAAC;AAC9D,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAA8B,CAAC;AACpE,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAA8B,CAAC;AACpE,MAAM,CAAC,MAAM,0BAA0B,GAAG,kBAAkB,CAAC;AAC7D,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAC3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC;AAC5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,SAAS,CAAC;AAChD,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAmC,CAAC;AACxE,MAAM,CAAC,MAAM,sBAAsB,GAAG,YAAqC,CAAC;AAC5E,MAAM,CAAC,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AACxD,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,CAAC;AAE/C,MAAM,CAAC,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAChD,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAC"}
package/dist/esm/src/text/uiRender.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { getDefaultFont } from '@pdfme/common';
2
- import { DEFAULT_FONT_SIZE, DEFAULT_ALIGNMENT, VERTICAL_ALIGN_TOP, VERTICAL_ALIGN_MIDDLE, VERTICAL_ALIGN_BOTTOM, DEFAULT_VERTICAL_ALIGNMENT, DEFAULT_LINE_HEIGHT, DEFAULT_CHARACTER_SPACING, DEFAULT_FONT_COLOR, } from './constants.js';
2
+ import { DEFAULT_FONT_SIZE, DEFAULT_ALIGNMENT, VERTICAL_ALIGN_TOP, VERTICAL_ALIGN_MIDDLE, VERTICAL_ALIGN_BOTTOM, DEFAULT_VERTICAL_ALIGNMENT, DEFAULT_LINE_HEIGHT, DEFAULT_CHARACTER_SPACING, DEFAULT_FONT_COLOR, PLACEHOLDER_FONT_COLOR, } from './constants.js';
3
3
  import { calculateDynamicFontSize, getFontKitFont, getBrowserVerticalFontAdjustments, } from './helper.js';
4
4
  import { addAlphaToHex } from '../renderUtils.js';
5
+ import { DEFAULT_OPACITY } from '../constants.js';
5
6
  const mapVerticalAlignToFlex = (verticalAlignmentValue) => {
6
7
  switch (verticalAlignmentValue) {
7
8
  case VERTICAL_ALIGN_TOP:
@@ -28,21 +29,22 @@ export const uiRender = async (arg) => {
28
29
  const { value, schema, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, options, theme, _cache, } = arg;
29
30
  const font = options?.font || getDefaultFont();
30
31
  let dynamicFontSize = undefined;
32
+ const getCdfArg = (v) => ({
33
+ textSchema: schema,
34
+ font,
35
+ value: v,
36
+ startingFontSize: dynamicFontSize,
37
+ _cache,
38
+ });
31
39
  if (schema.dynamicFontSize && value) {
32
- dynamicFontSize = await calculateDynamicFontSize({
33
- textSchema: schema,
34
- font,
35
- value,
36
- startingFontSize: dynamicFontSize,
37
- _cache,
38
- });
40
+ dynamicFontSize = await calculateDynamicFontSize(getCdfArg(value));
39
41
  }
40
42
  const fontKitFont = await getFontKitFont(schema, font, _cache);
41
43
  // Depending on vertical alignment, we need to move the top or bottom of the font to keep
42
44
  // it within it's defined box and align it with the generated pdf.
43
45
  const { topAdj, bottomAdj } = getBrowserVerticalFontAdjustments(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE, schema.lineHeight ?? DEFAULT_LINE_HEIGHT, schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
44
- const topAdjustment = topAdj;
45
- const bottomAdjustment = bottomAdj;
46
+ const topAdjustment = topAdj.toString();
47
+ const bottomAdjustment = bottomAdj.toString();
46
48
  const container = document.createElement('div');
47
49
  const containerStyle = {
48
50
  padding: 0,
@@ -54,12 +56,13 @@ export const uiRender = async (arg) => {
54
56
  justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
55
57
  width: '100%',
56
58
  height: '100%',
57
- opacity: schema.opacity,
59
+ opacity: schema.opacity ?? DEFAULT_OPACITY,
58
60
  };
59
61
  Object.assign(container.style, containerStyle);
60
62
  rootElement.innerHTML = '';
61
63
  rootElement.appendChild(container);
62
- const fontStyles = {
64
+ const textBlockStyle = {
65
+ // Font formatting styles
63
66
  fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
64
67
  color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
65
68
  fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
@@ -68,45 +71,71 @@ export const uiRender = async (arg) => {
68
71
  textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
69
72
  whiteSpace: 'pre-wrap',
70
73
  wordBreak: 'break-word',
74
+ // Block layout styles
75
+ resize: 'none',
76
+ border: 'none',
77
+ outline: 'none',
78
+ marginBottom: bottomAdjustment + 'px',
79
+ paddingTop: topAdjustment + 'px',
80
+ backgroundColor: 'transparent',
71
81
  };
82
+ const textBlock = document.createElement('div');
83
+ Object.assign(textBlock.style, textBlockStyle);
72
84
  if (mode === 'form' || mode === 'designer') {
73
- const textarea = document.createElement('textarea');
74
- const textareaStyle = {
75
- padding: 0,
76
- resize: 'none',
77
- border: 'none',
78
- outline: 'none',
79
- paddingTop: topAdjustment + 'px',
80
- backgroundColor: 'transparent',
81
- width: '100%',
82
- height: '100%',
83
- };
84
- Object.assign(textarea.style, textareaStyle, fontStyles);
85
- textarea.rows = 1;
86
- textarea.placeholder = placeholder || '';
87
- textarea.tabIndex = tabIndex || 0;
88
- textarea.addEventListener('change', (e) => onChange && onChange(e.target.value));
89
- textarea.addEventListener('blur', () => stopEditing && stopEditing());
90
- textarea.value = value;
91
- container.appendChild(textarea);
85
+ textBlock.contentEditable = 'plaintext-only';
86
+ textBlock.tabIndex = tabIndex || 0;
87
+ textBlock.innerText = value;
88
+ textBlock.addEventListener('blur', (e) => {
89
+ onChange && onChange(e.target.innerText);
90
+ stopEditing && stopEditing();
91
+ });
92
+ if (schema.dynamicFontSize) {
93
+ textBlock.addEventListener('keyup', () => {
94
+ setTimeout(() => {
95
+ void (async () => {
96
+ if (!textBlock.textContent)
97
+ return;
98
+ dynamicFontSize = await calculateDynamicFontSize(getCdfArg(textBlock.textContent));
99
+ textBlock.style.fontSize = `${dynamicFontSize}pt`;
100
+ const { topAdj: newTopAdj, bottomAdj: newBottomAdj } = getBrowserVerticalFontAdjustments(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE, schema.lineHeight ?? DEFAULT_LINE_HEIGHT, schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
101
+ textBlock.style.paddingTop = newTopAdj.toString() + 'px';
102
+ textBlock.style.marginBottom = newBottomAdj.toString() + 'px';
103
+ })();
104
+ }, 0);
105
+ });
106
+ }
107
+ if (placeholder && !value) {
108
+ textBlock.innerText = placeholder;
109
+ textBlock.style.color = PLACEHOLDER_FONT_COLOR;
110
+ if (schema.dynamicFontSize) {
111
+ const fontSize = await calculateDynamicFontSize(getCdfArg(placeholder));
112
+ textBlock.style.fontSize = `${fontSize}pt`;
113
+ }
114
+ textBlock.addEventListener('focus', () => {
115
+ if (textBlock.innerText === placeholder) {
116
+ textBlock.innerText = '';
117
+ textBlock.style.color = schema.fontColor ?? DEFAULT_FONT_COLOR;
118
+ }
119
+ });
120
+ }
121
+ container.appendChild(textBlock);
92
122
  if (mode === 'designer') {
93
- textarea.setSelectionRange(value.length, value.length);
94
- textarea.focus();
123
+ textBlock.focus();
124
+ // Set the focus to the end of the editable element when you focus, as we would for a textarea
125
+ const selection = window.getSelection();
126
+ const range = document.createRange();
127
+ range.selectNodeContents(textBlock);
128
+ range.collapse(false); // Collapse range to the end
129
+ selection?.removeAllRanges();
130
+ selection?.addRange(range);
95
131
  }
96
132
  }
97
133
  else {
98
- const div = document.createElement('div');
99
- const divStyle = {
100
- ...fontStyles,
101
- marginBottom: bottomAdjustment + 'px',
102
- paddingTop: topAdjustment + 'px',
103
- };
104
- Object.assign(div.style, divStyle);
105
- div.innerHTML = value
134
+ textBlock.innerHTML = value
106
135
  .split('')
107
136
  .map((l, i) => `<span style="letter-spacing:${String(value).length === i + 1 ? 0 : 'inherit'};">${l}</span>`)
108
137
  .join('');
109
- container.appendChild(div);
138
+ container.appendChild(textBlock);
110
139
  }
111
140
  };
112
141
  //# sourceMappingURL=uiRender.js.map
package/dist/esm/src/text/uiRender.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"uiRender.js","sourceRoot":"","sources":["../../../../src/text/uiRender.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,cAAc,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,mBAAmB,EACnB,yBAAyB,EACzB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,wBAAwB,EACxB,cAAc,EACd,iCAAiC,GAClC,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,sBAAsB,GAAG,CAAC,sBAA0C,EAAE,EAAE;IAC5E,QAAQ,sBAAsB,EAAE;QAC9B,KAAK,kBAAkB;YACrB,OAAO,YAAY,CAAC;QACtB,KAAK,qBAAqB;YACxB,OAAO,QAAQ,CAAC;QAClB,KAAK,qBAAqB;YACxB,OAAO,UAAU,CAAC;KACrB;IACD,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CACzB,IAAoC,EACpC,KAAa,EACb,MAAc,EACd,sBAA8B,EAC9B,EAAE;IACF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,UAAU,CAAC,IAAI,KAAK,IAAI,MAAM,CAAC,eAAe,EAAE;QAC/E,OAAO,MAAM,CAAC,eAAyB,CAAC;KACzC;SAAM,IAAI,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAQ,MAAM,CAAC,eAA0B,IAAI,aAAa,CAAC;KAC5D;SAAM;QACL,OAAO,sBAAsB,CAAC;KAC/B;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,EAAE,GAA8B,EAAE,EAAE;IAC/D,MAAM,EACJ,KAAK,EACL,MAAM,EACN,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,MAAM,GACP,GAAG,GAAG,CAAC;IACR,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,IAAI,cAAc,EAAE,CAAC;IAE/C,IAAI,eAAe,GAAuB,SAAS,CAAC;IACpD,IAAI,MAAM,CAAC,eAAe,IAAI,KAAK,EAAE;QACnC,eAAe,GAAG,MAAM,wBAAwB,CAAC;YAC/C,UAAU,EAAE,MAAM;YAClB,IAAI;YACJ,KAAK;YACL,gBAAgB,EAAE,eAAe;YACjC,MAAM;SACP,CAAC,CAAC;KACJ;IAED,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAC/D,yFAAyF;IACzF,kEAAkE;IAClE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,iCAAiC,CAC7D,WAAW,EACX,eAAe,IAAI,MAAM,CAAC,QAAQ,IAAI,iBAAiB,EACvD,MAAM,CAAC,UAAU,IAAI,mBAAmB,EACxC,MAAM,CAAC,iBAAiB,IAAI,0BAA0B,CACvD,CAAC;IAEF,MAAM,aAAa,GAAG,MAAM,CAAC;IAC7B,MAAM,gBAAgB,GAAG,SAAS,CAAC;IAEnC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,cAAc,GAAmB;QACrC,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,kBAAkB,CACjC,IAAI,EACJ,KAAK,EACL,MAAM,EACN,aAAa,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,CAAC,CACxC;QACD,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,sBAAsB,CAAC,MAAM,CAAC,iBAAiB,CAAC;QAChE,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM,CAAC,OAAO;KACxB,CAAC;IACF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;IAC/C,WAAW,CAAC,SAAS,GAAG,EAAE,CAAC;IAC3B,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAEnC,MAAM,UAAU,GAAmB;QACjC,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,SAAS;QAChE,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB;QAC/D,QAAQ,EAAE,GAAG,eAAe,IAAI,MAAM,CAAC,QAAQ,IAAI,iBAAiB,IAAI;QACxE,aAAa,EAAE,GAAG,MAAM,CAAC,gBAAgB,IAAI,yBAAyB,IAAI;QAC1E,UAAU,EAAE,GAAG,MAAM,CAAC,UAAU,IAAI,mBAAmB,IAAI;QAC3D,SAAS,EAAE,MAAM,CAAC,SAAS,IAAI,iBAAiB;QAChD,UAAU,EAAE,UAAU;QACtB,SAAS,EAAE,YAAY;KACxB,CAAC;IAEF,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,UAAU,EAAE;QAC1C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,aAAa,GAAmB;YACpC,OAAO,EAAE,CAAC;YACV,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,aAAa,GAAG,IAAI;YAChC,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC;QAClB,QAAQ,CAAC,WAAW,GAAG,WAAW,IAAI,EAAE,CAAC;QACzC,QAAQ,CAAC,QAAQ,GAAG,QAAQ,IAAI,CAAC,CAAC;QAElC,QAAQ,CAAC,gBAAgB,CACvB,QAAQ,EACR,CAAC,CAAQ,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAE,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC,CAC5E,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,IAAI,WAAW,EAAE,CAAC,CAAC;QACtE,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;QACvB,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAChC,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,QAAQ,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YACvD,QAAQ,CAAC,KAAK,EAAE,CAAC;SAClB;KACF;SAAM;QACL,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,QAAQ,GAAmB;YAC/B,GAAG,UAAU;YACb,YAAY,EAAE,gBAAgB,GAAG,IAAI;YACrC,UAAU,EAAE,aAAa,GAAG,IAAI;SACjC,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACnC,GAAG,CAAC,SAAS,GAAG,KAAK;aAClB,KAAK,CAAC,EAAE,CAAC;aACT,GAAG,CACF,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CACvB,+BACE,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SACvC,MAAM,CAAC,SAAS,CACnB;aACA,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KAC5B;AACH,CAAC,CAAC"}
1
+ {"version":3,"file":"uiRender.js","sourceRoot":"","sources":["../../../../src/text/uiRender.ts"],"names":[],"mappings":"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"}
package/dist/types/src/text/constants.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare const DEFAULT_VERTICAL_ALIGNMENT: VERTICAL_ALIGNMENT;
11
11
  export declare const DEFAULT_LINE_HEIGHT = 1;
12
12
  export declare const DEFAULT_CHARACTER_SPACING = 0;
13
13
  export declare const DEFAULT_FONT_COLOR = "#000000";
14
+ export declare const PLACEHOLDER_FONT_COLOR = "#A0A0A0";
14
15
  export declare const DYNAMIC_FIT_VERTICAL: DYNAMIC_FONT_SIZE_FIT;
15
16
  export declare const DYNAMIC_FIT_HORIZONTAL: DYNAMIC_FONT_SIZE_FIT;
16
17
  export declare const DEFAULT_DYNAMIC_FIT: DYNAMIC_FONT_SIZE_FIT;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pdfme/schemas",
3
- "version": "3.1.3-dev.8",
3
+ "version": "3.1.3-dev.9",
4
4
  "sideEffects": false,
5
5
  "author": "hand-dot",
6
6
  "license": "MIT",
package/src/text/constants.ts CHANGED
@@ -13,6 +13,7 @@ export const DEFAULT_VERTICAL_ALIGNMENT = VERTICAL_ALIGN_TOP;
13
13
  export const DEFAULT_LINE_HEIGHT = 1;
14
14
  export const DEFAULT_CHARACTER_SPACING = 0;
15
15
  export const DEFAULT_FONT_COLOR = '#000000';
16
+ export const PLACEHOLDER_FONT_COLOR = '#A0A0A0';
16
17
  export const DYNAMIC_FIT_VERTICAL = 'vertical' as DYNAMIC_FONT_SIZE_FIT;
17
18
  export const DYNAMIC_FIT_HORIZONTAL = 'horizontal' as DYNAMIC_FONT_SIZE_FIT;
18
19
  export const DEFAULT_DYNAMIC_FIT = DYNAMIC_FIT_VERTICAL;
package/src/text/uiRender.ts CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  DEFAULT_LINE_HEIGHT,
12
12
  DEFAULT_CHARACTER_SPACING,
13
13
  DEFAULT_FONT_COLOR,
14
+ PLACEHOLDER_FONT_COLOR,
14
15
  } from './constants.js';
15
16
  import {
16
17
  calculateDynamicFontSize,
@@ -18,6 +19,7 @@ import {
18
19
  getBrowserVerticalFontAdjustments,
19
20
  } from './helper.js';
20
21
  import { addAlphaToHex } from '../renderUtils.js';
22
+ import { DEFAULT_OPACITY } from '../constants.js';
21
23
 
22
24
  const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
23
25
  switch (verticalAlignmentValue) {
@@ -63,14 +65,15 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
63
65
  const font = options?.font || getDefaultFont();
64
66
 
65
67
  let dynamicFontSize: undefined | number = undefined;
68
+ const getCdfArg = (v: string) => ({
69
+ textSchema: schema,
70
+ font,
71
+ value: v,
72
+ startingFontSize: dynamicFontSize,
73
+ _cache,
74
+ });
66
75
  if (schema.dynamicFontSize && value) {
67
- dynamicFontSize = await calculateDynamicFontSize({
68
- textSchema: schema,
69
- font,
70
- value,
71
- startingFontSize: dynamicFontSize,
72
- _cache,
73
- });
76
+ dynamicFontSize = await calculateDynamicFontSize(getCdfArg(value));
74
77
  }
75
78
 
76
79
  const fontKitFont = await getFontKitFont(schema, font, _cache);
@@ -83,8 +86,8 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
83
86
  schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
84
87
  );
85
88
 
86
- const topAdjustment = topAdj;
87
- const bottomAdjustment = bottomAdj;
89
+ const topAdjustment = topAdj.toString();
90
+ const bottomAdjustment = bottomAdj.toString();
88
91
 
89
92
  const container = document.createElement('div');
90
93
 
@@ -103,13 +106,14 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
103
106
  justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
104
107
  width: '100%',
105
108
  height: '100%',
106
- opacity: schema.opacity,
109
+ opacity: schema.opacity ?? DEFAULT_OPACITY,
107
110
  };
108
111
  Object.assign(container.style, containerStyle);
109
112
  rootElement.innerHTML = '';
110
113
  rootElement.appendChild(container);
111
114
 
112
- const fontStyles: CSS.Properties = {
115
+ const textBlockStyle: CSS.Properties = {
116
+ // Font formatting styles
113
117
  fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
114
118
  color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
115
119
  fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
@@ -118,45 +122,77 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
118
122
  textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
119
123
  whiteSpace: 'pre-wrap',
120
124
  wordBreak: 'break-word',
125
+ // Block layout styles
126
+ resize: 'none',
127
+ border: 'none',
128
+ outline: 'none',
129
+ marginBottom: bottomAdjustment + 'px',
130
+ paddingTop: topAdjustment + 'px',
131
+ backgroundColor: 'transparent',
121
132
  };
133
+ const textBlock = document.createElement('div');
134
+ Object.assign(textBlock.style, textBlockStyle);
122
135
 
123
136
  if (mode === 'form' || mode === 'designer') {
124
- const textarea = document.createElement('textarea');
125
- const textareaStyle: CSS.Properties = {
126
- padding: 0,
127
- resize: 'none',
128
- border: 'none',
129
- outline: 'none',
130
- paddingTop: topAdjustment + 'px',
131
- backgroundColor: 'transparent',
132
- width: '100%',
133
- height: '100%',
134
- };
135
- Object.assign(textarea.style, textareaStyle, fontStyles);
136
- textarea.rows = 1;
137
- textarea.placeholder = placeholder || '';
138
- textarea.tabIndex = tabIndex || 0;
139
-
140
- textarea.addEventListener(
141
- 'change',
142
- (e: Event) => onChange && onChange((e.target as HTMLTextAreaElement).value)
143
- );
144
- textarea.addEventListener('blur', () => stopEditing && stopEditing());
145
- textarea.value = value;
146
- container.appendChild(textarea);
137
+ textBlock.contentEditable = 'plaintext-only';
138
+ textBlock.tabIndex = tabIndex || 0;
139
+ textBlock.innerText = value;
140
+ textBlock.addEventListener('blur', (e: Event) => {
141
+ onChange && onChange((e.target as HTMLDivElement).innerText);
142
+ stopEditing && stopEditing();
143
+ });
144
+
145
+ if (schema.dynamicFontSize) {
146
+ textBlock.addEventListener('keyup', () => {
147
+ setTimeout(() => {
148
+ void (async () => {
149
+ if (!textBlock.textContent) return;
150
+ dynamicFontSize = await calculateDynamicFontSize(getCdfArg(textBlock.textContent));
151
+ textBlock.style.fontSize = `${dynamicFontSize}pt`;
152
+
153
+ const { topAdj: newTopAdj, bottomAdj: newBottomAdj } = getBrowserVerticalFontAdjustments(
154
+ fontKitFont,
155
+ dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
156
+ schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
157
+ schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
158
+ );
159
+ textBlock.style.paddingTop = newTopAdj.toString() + 'px';
160
+ textBlock.style.marginBottom = newBottomAdj.toString() + 'px';
161
+ })();
162
+ }, 0);
163
+ });
164
+ }
165
+
166
+ if (placeholder && !value) {
167
+ textBlock.innerText = placeholder;
168
+ textBlock.style.color = PLACEHOLDER_FONT_COLOR;
169
+ if (schema.dynamicFontSize) {
170
+ const fontSize = await calculateDynamicFontSize(getCdfArg(placeholder));
171
+ textBlock.style.fontSize = `${fontSize}pt`;
172
+ }
173
+ textBlock.addEventListener('focus', () => {
174
+ if (textBlock.innerText === placeholder) {
175
+ textBlock.innerText = '';
176
+ textBlock.style.color = schema.fontColor ?? DEFAULT_FONT_COLOR;
177
+ }
178
+ });
179
+ }
180
+
181
+ container.appendChild(textBlock);
182
+
147
183
  if (mode === 'designer') {
148
- textarea.setSelectionRange(value.length, value.length);
149
- textarea.focus();
184
+ textBlock.focus();
185
+
186
+ // Set the focus to the end of the editable element when you focus, as we would for a textarea
187
+ const selection = window.getSelection();
188
+ const range = document.createRange();
189
+ range.selectNodeContents(textBlock);
190
+ range.collapse(false); // Collapse range to the end
191
+ selection?.removeAllRanges();
192
+ selection?.addRange(range);
150
193
  }
151
194
  } else {
152
- const div = document.createElement('div');
153
- const divStyle: CSS.Properties = {
154
- ...fontStyles,
155
- marginBottom: bottomAdjustment + 'px',
156
- paddingTop: topAdjustment + 'px',
157
- };
158
- Object.assign(div.style, divStyle);
159
- div.innerHTML = value
195
+ textBlock.innerHTML = value
160
196
  .split('')
161
197
  .map(
162
198
  (l: string, i: number) =>
@@ -166,6 +202,6 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
166
202
  )
167
203
  .join('');
168
204
 
169
- container.appendChild(div);
205
+ container.appendChild(textBlock);
170
206
  }
171
207
  };