From 00b17609c209d771a727fcda299eb2f36148ef70 Mon Sep 17 00:00:00 2001 From: Dmitrii Bocharov Date: Wed, 24 Jun 2026 16:31:43 +0200 Subject: [PATCH 1/2] feat: add entity placeholder colors to the theme palette Adds light/dark colors for the new "entity" placeholder (decoded HTML entities) rendered by @tginternal/editor, matching the tag colors but slightly lighter. --- webapp/src/colors.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/webapp/src/colors.tsx b/webapp/src/colors.tsx index 8e1f50de3e3..9e411eb0885 100644 --- a/webapp/src/colors.tsx +++ b/webapp/src/colors.tsx @@ -103,6 +103,7 @@ export type Placeholders = { variable: Placeholder; tag: Placeholder; variant: Placeholder; + entity: Placeholder; inactive: Placeholder; }; @@ -251,6 +252,11 @@ export const colors = { background: '#F0F2F4', text: '#4D5B6E', }, + entity: { + border: '#F9C4D6', + background: '#FCDEE9', + text: '#822343', + }, inactive: { background: '#e3e7ea', border: '#e3e7ea', @@ -375,6 +381,11 @@ export const colors = { background: '#4D5B6E', text: '#F0F2F4', }, + entity: { + border: '#96506F', + background: '#96506F', + text: '#F0F2F4', + }, inactive: { border: '#2c3c52', background: '#2c3c52', From 707f1e6b162fa6dc6c9a432983e7786e3d880e4e Mon Sep 17 00:00:00 2001 From: Dmitrii Bocharov Date: Tue, 30 Jun 2026 10:16:30 +0200 Subject: [PATCH 2/2] feat: bump @tginternal/editor to 1.18.0 for HTML entity highlighting The 1.18.0 release adds the "entity" placeholder that decodes and highlights HTML entities (é,  , ...) in the translation editor. Paired with the entity theme colors added earlier. --- webapp/package-lock.json | 56 +++++++++++++++++++++++++++++++++++----- webapp/package.json | 2 +- 2 files changed, 51 insertions(+), 7 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 8805e555a8e..e781a963bba 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -29,7 +29,7 @@ "@sentry/react": "^10.31.0", "@sentry/vite-plugin": "^4.6.1", "@stomp/stompjs": "^6.1.2", - "@tginternal/editor": "1.17.0", + "@tginternal/editor": "1.18.0", "@tginternal/library": "file:../library", "@tolgee/format-icu": "^7.1.1", "@tolgee/react": "^7.1.1", @@ -250,6 +250,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -637,6 +638,7 @@ "version": "6.5.0", "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.5.0.tgz", "integrity": "sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==", + "peer": true, "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", @@ -656,12 +658,14 @@ "node_modules/@codemirror/state": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz", - "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==" + "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==", + "peer": true }, "node_modules/@codemirror/view": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.24.1.tgz", "integrity": "sha512-sBfP4rniPBRQzNakwuQEqjEuiJDWJyF2kqLLqij4WXRoVwPPJfjx966Eq3F7+OPQxDtMt/Q9MWLoZLWjeveBlg==", + "peer": true, "dependencies": { "@codemirror/state": "^6.4.0", "style-mod": "^4.1.0", @@ -756,6 +760,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=20.19.0" }, @@ -804,6 +809,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=20.19.0" } @@ -813,6 +819,7 @@ "resolved": "https://registry.npmjs.org/@dicebear/avatars/-/avatars-4.10.2.tgz", "integrity": "sha512-7Qd4Mmq9jeMkWtPZgY89GxFZmu1ERSTSTSEbeNfgVzqxZ0M2NHKcc/uynFMpU13w2BGesCDGT3ulmKyCoYbMGA==", "deprecated": "This package is deprecated. Use '@dicebear/core' instead. Read more: https://dicebear.com/how-to-use/js-library", + "peer": true, "dependencies": { "@types/json-schema": "^7.0.7", "pure-color": "^1.3.0", @@ -857,6 +864,7 @@ "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz", "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==", "license": "MIT", + "peer": true, "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", @@ -959,6 +967,7 @@ "version": "11.11.3", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.3.tgz", "integrity": "sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", @@ -999,6 +1008,7 @@ "version": "11.11.0", "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", @@ -2185,6 +2195,7 @@ "version": "5.16.0", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.0.tgz", "integrity": "sha512-DbR1NckTLpjt9Zut9EGQ70th86HfN0BYQgyYro6aXQrNfjzSwe3BJS1AyBQ5mJ7TdL6YVRqohfukxj9JlqZZUg==", + "peer": true, "dependencies": { "@babel/runtime": "^7.23.9", "@mui/base": "5.0.0-beta.40", @@ -3424,6 +3435,7 @@ "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -3481,15 +3493,30 @@ } }, "node_modules/@tginternal/editor": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/@tginternal/editor/-/editor-1.17.0.tgz", - "integrity": "sha512-SNsPqjKIwV6vg2Yr36cPxOc8R32uCAxrwC1kOVTSUM1lALNZQQMnGVIkJR8VxvoMNtb5CEfRhV5oaZJ4lttIFg==", + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@tginternal/editor/-/editor-1.18.0.tgz", + "integrity": "sha512-QsA2M1ru9JVkVbiGZPnqVqQ+qFEeCAA9kI3N7XwNXwyPYNfwnPpm5I/Wy4xFagJ9BVEXQcdkE03qFuEomDW+Mg==", + "dependencies": { + "entities": "^6.0.1" + }, "peerDependencies": { "@codemirror/lint": "^6.4.2", "@codemirror/state": "^6.4.0", "@codemirror/view": "^6.23.1" } }, + "node_modules/@tginternal/editor/node_modules/entities": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz", + "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/@tginternal/language-util": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@tginternal/language-util/-/language-util-1.1.1.tgz", @@ -3821,6 +3848,7 @@ "integrity": "sha512-yCAeZl7a0DxgNVteXFHt9+uyFbqXGy/ShC4BlcHkoE0AfGXYv/BUiplV72DjMYXHDBXFjhvr6DD1NiRVfB4j8g==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~6.21.0" } @@ -3839,6 +3867,7 @@ "version": "17.0.75", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.75.tgz", "integrity": "sha512-MSA+NzEzXnQKrqpO63CYqNstFjsESgvJAdAyyJ1n6ZQq/GLgf6nOfIKwk+Twuz0L1N6xPe+qz5xRCJrbhMaLsw==", + "peer": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -3980,6 +4009,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.19.1.tgz", "integrity": "sha512-WEfX22ziAh6pRE9jnbkkLGp/4RhTpffr2ZK5bJ18M8mIfA8A+k97U9ZyaXCEJRlmMHh7R9MJZWXp/r73DzINVQ==", "dev": true, + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "6.19.1", "@typescript-eslint/types": "6.19.1", @@ -4367,6 +4397,7 @@ "version": "7.4.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4968,6 +4999,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001726", "electron-to-chromium": "^1.5.173", @@ -5464,7 +5496,8 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "peer": true }, "node_modules/d3-array": { "version": "2.12.1", @@ -5589,6 +5622,7 @@ "version": "2.29.2", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.2.tgz", "integrity": "sha512-0VNbwmWJDS/G3ySwFSJA3ayhbURMTJLtwM2DTxf9CWondCnh6DTNlO9JgRSq6ibf4eD0lfMJNBxUdEAHHix+bA==", + "peer": true, "engines": { "node": ">=0.11" }, @@ -6193,6 +6227,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz", "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "7.12.11", "@eslint/eslintrc": "^0.4.3", @@ -10628,6 +10663,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "dev": true, + "peer": true, "bin": { "prettier": "bin-prettier.js" }, @@ -10687,6 +10723,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "peer": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -10825,6 +10862,7 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -10848,6 +10886,7 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -12476,6 +12515,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz", "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==", "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -13388,6 +13428,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -13736,6 +13777,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", "dev": true, + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -14191,6 +14233,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.7.tgz", "integrity": "sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -14334,6 +14377,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, diff --git a/webapp/package.json b/webapp/package.json index f52fc5c25df..b5d6f03af85 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -28,7 +28,7 @@ "@sentry/react": "^10.31.0", "@sentry/vite-plugin": "^4.6.1", "@stomp/stompjs": "^6.1.2", - "@tginternal/editor": "1.17.0", + "@tginternal/editor": "1.18.0", "@tginternal/library": "file:../library", "@tolgee/format-icu": "^7.1.1", "@tolgee/react": "^7.1.1",