@pega/cosmos-react-rte 8.0.0-build.9.0 → 8.0.0

package/lib/components/Editor/ImageEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.js","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AASrE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,IAAI,EACJ,qBAAqB,EACrB,UAAU,EACV,OAAO,EACP,aAAa,EACb,MAAM,EACN,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEzC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC;AAEzC,MAAM,WAAW,GAAwE,CAAC,EACxF,QAAQ,EACR,MAAM,EACN,QAAQ,EACT,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACpE,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IACzE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IACpE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,eAAe,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACvD,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAgB,EAAE,CAAC,CAAC;IAE5D,MAAM,YAAY,GAAG,CAAC,CAA+B,EAAE,EAAE;QACvD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAAe,EAAiB,EAAE;QAC5D,MAAM,WAAW,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;QAC/C,OAAO;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,WAAW,CAAC,GAAG,GAAG,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;YACnF,IAAI,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;SACpF,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAa,EAAE,EAAE;QAC1C,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAqB,CAAC;YACnC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,UAAU,CAAC,EAAsB,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAa,EAAE,EAAE;QAC1C,IAAI,CAAC,CAAC,aAAa,IAAK,CAAC,CAAC,aAAmC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC7F,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,SAAS,CAAC;YACd,IAAI,QAAQ,CAAC;YACb,IAAI,yBAAyB,GAAG,KAAK,CAAC;YACtC,IAAI,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACjC,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAW,EAAE,EAAE,CAAC,CAAC;gBACjE,yBAAyB,GAAG,IAAI,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC;YAClC,CAAC;YACD,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC;gBAChC,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAW,EAAE,EAAE,CAAC,CAAC;gBAC/D,yBAAyB,GAAG,IAAI,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,QAAQ,GAAG,KAAK,CAAC,YAAY,CAAC;YAChC,CAAC;YACD,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;YAC5C,SAAS,CAAC,SAAS,CAAC,CAAC;YACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,cAAc,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC;YACrC,aAAa,CAAC,yBAAyB,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,eAAe,CAAC,EAAE,GAAG,EAAE;QACjD,aAAa,EAAE,CAAC;QAChB,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,CAAC,CAAkB,EAAE,EAAE;QAC7C,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAkB,EAAE,EAAE;QAC1C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAa,EAAE,EAAE;QACrC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC3D,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,6FAA6F;IAC7F,kEAAkE;IAClE,2EAA2E;IAC3E,MAAM,cAAc,GAAG,CAAC,aAAqB,EAAE,EAAE;QAC/C,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAEhD,SAAS,CAAC,WAAW,CAAC,CAAC;QACvB,QAAQ,CAAC,WAAW,GAAG,WAAW,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,aAAqB,EAAE,EAAE;QAC9C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAE/C,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,SAAS,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,CAAa,EAAE,EAAE;QAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,UAAU,EAAE,CAAC;gBACf,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;oBAChD,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;oBAChC,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;oBAC/B,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;oBAC/B,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;gBAC/B,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;oBAChD,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBAChC,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC;YACD,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QACrC,CAAC;QAED,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,YAAY,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1E,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC3B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,CAAC;QACD,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC3B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,oGAAoG;IACpG,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;QAClC,MAAM,aAAa,GAAG,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAK,EAAyB,CAAC;QACvF,gBAAgB,CAAC,GAAG,EAAE;YACpB,OAAO,CAAC,GAAG,aAAa,CAAC,CAAC;QAC5B,CAAC,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YAChD,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,IACE,QAAQ,CAAC,IAAI,KAAK,WAAW;oBAC7B,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,IAAI,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,EAC5D,CAAC;oBACD,MAAM,gBAAgB,GAAG,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAK,EAAyB,CAAC;oBAC1F,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,SAAS,EAAE,CAAC;YACd,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACvE,CAAC;QACD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,6EAA6E;IAC7E,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC/B,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;YAC7D,UAAU,CAAC,gBAAgB,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;YAC3D,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;gBAC/B,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;gBAChE,UAAU,CAAC,mBAAmB,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;gBAC9D,UAAU,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;YACxD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAC;QAChB,KAAK,EAAE,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QAC5C,IAAI,KAAK,IAAI,KAAK,CAAC,YAAY,GAAG,EAAE,IAAI,KAAK,CAAC,WAAW,GAAG,EAAE,EAAE,CAAC;YAC/D,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QACD,OAAO,GAAG,EAAE;YACV,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAC5C,IAAI,SAAS,GAAG,KAAK,CAAC;YACtB,6EAA6E;YAC7E,IACE,SAAS;gBACT,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC;gBAC7C,SAAS,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,KAAK,KAAK;gBACpD,SAAS,CAAC,YAAY,KAAK,CAAC,EAC5B,CAAC;gBACD,UAAU,CAAC,SAAS,CAAC,UAAU,CAAC,UAA8B,CAAC,CAAC;gBAChE,iBAAiB,CAAC,IAAI,CAAC,CAAC;gBACxB,SAAS,GAAG,IAAI,CAAC;gBACjB,kFAAkF;YACpF,CAAC;iBAAM,IAAI,SAAS,IAAI,SAAS,CAAC,UAAU,EAAE,WAAW,EAAE,QAAQ,KAAK,KAAK,EAAE,CAAC;gBAC9E,UAAU,CAAC,SAAS,CAAC,UAAU,CAAC,WAA+B,CAAC,CAAC;gBACjE,iBAAiB,CAAC,IAAI,CAAC,CAAC;gBACxB,SAAS,GAAG,IAAI,CAAC;YACnB,CAAC;iBAAM,IAAI,SAAS,IAAI,KAAK,IAAI,cAAc,EAAE,CAAC;gBAChD,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBACzB,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACxB,CAAC;YAED,IAAI,SAAS,EAAE,CAAC;gBACd,iBAAiB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC;YAChD,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;YACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,cAAc,EAAE,CAAC;gBACxC,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACrC,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,cAAc,EAAE,CAAC;gBAC7C,aAAa,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC5B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QAEtC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC7B,MAAM,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACnC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;IAEpC,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,gBAAgB,EAAE,CAAC;YACrB,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,aAAa,EAAE,CAAC;YAE3C,IAAI,qBAAqB,CAAC,OAAO,EAAE,CAAC;gBAClC,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBACjC,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAC;YACxC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,IAAI,QAAQ,EAAE,CAAC;YACtB,WAAW,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,8BACG,CAAC,cAAc,IAAI,cAAc,CAAC,IAAI,KAAK,IAAI,iBAAiB,IAAI,CACnE,KAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,IAAI,QACJ,OAAO,EAAC,SAAS,EACjB,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,GAAG,EAAE;oBACZ,mBAAmB,CAAC,IAAI,CAAC,CAAC;gBAC5B,CAAC,EACD,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,YAEtB,KAAC,qBAAqB,IAAC,IAAI,EAAC,cAAc,GAAG,GACtC,CACV,EAED,KAAC,kBAAkB,iBAAW,QAAQ,YAAE,cAAc,GAAsB,EAE3E,gBAAgB,IAAI,CAAC,QAAQ,IAAI,CAAC,iBAAiB,CAAC,IAAI,KAAK,IAAI,CAChE,MAAC,OAAO,IACN,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC5C,QAAQ,EAAC,OAAO,EAChB,KAAK,QACL,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aAE/C,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,YAC3E,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,oBAAoB,CAAC,GAAQ,GACxC,EAEb,KAAC,WAAW,cACV,KAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACxD,MAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACrB,KAAC,MAAM,IAAC,OAAO,EAAE,mBAAmB,YAAG,CAAC,CAAC,QAAQ,CAAC,GAAU,EAC5D,KAAC,MAAM,IAAC,OAAO,EAAE,aAAa,YAAG,CAAC,CAAC,QAAQ,CAAC,GAAU,IACjD,EACP,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,mBAAmB,YACnD,CAAC,CAAC,QAAQ,CAAC,GACL,IACJ,YAGT,MAAC,IAAI,IACH,SAAS,EAAE;oCACT,GAAG,EAAE,CAAC;oCACN,KAAK,EAAE,UAAU;wCACf,CAAC,CAAC,0CAA0C;wCAC5C,CAAC,CAAC,2BAA2B;iCAChC,aAED,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAC1B,KAAC,KAAK,IACJ,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EACvB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,CAAC,CAAC,4BAA4B,CAAC,EACrC,GAAG,EAAE,eAAe,GACpB,GACG,EAEP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,YAC3B,KAAC,QAAQ,IACP,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,CAAC,CAAC,uBAAuB,CAAC,EACjC,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;gDAC7C,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;4CAClC,CAAC,GACD,GACG,EAEN,UAAU,IAAI,CACb,8BACE,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,YAC3B,KAAC,WAAW,IACV,KAAK,EAAE,CAAC,CAAC,qBAAqB,CAAC,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAChD,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,aAAa,GACvB,GACG,EAEP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAC5B,KAAC,WAAW,IACV,KAAK,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EACjD,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,cAAc,GACxB,GACG,IACN,CACJ,IACI,GACF,GACK,IACN,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useEffect, useRef, useState, useLayoutEffect } from 'react';\nimport type {\n  FC,\n  MouseEvent as ReactMouseEvent,\n  ChangeEvent,\n  CSSProperties,\n  FocusEvent\n} from 'react';\nimport type { Editor } from 'tinymce';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  CardContent,\n  CardHeader,\n  Checkbox,\n  createUID,\n  Flex,\n  Form,\n  Grid,\n  Icon,\n  Input,\n  NumberInput,\n  Popover,\n  Text,\n  useAfterInitialEffect,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  useUID,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nconst IgnoreMouseEventsIcon = styled(Icon)`\n  pointer-events: none;\n`;\n\nexport const imgHoverClass = createUID();\n\nconst ImageEditor: FC<{ editorEl: HTMLElement; editor: Editor; onChange: () => void }> = ({\n  editorEl,\n  editor,\n  onChange\n}) => {\n  const t = useI18n();\n  const id = useUID();\n  const [showImagePopover, setShowImagePopover] = useState(false);\n  const [imageEditHover, setImageEditHover] = useState(false);\n  const [imageEditFocus, setImageEditFocus] = useState(false);\n  const [canShowEditButton, setCanShowEditButton] = useState(false);\n  const [imgEl, setImageEl] = useState<HTMLImageElement | null>(null);\n  const [imgElements, setImageElements] = useState<HTMLImageElement[]>([]);\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const [aspectRatio, setAspectRatio] = useState(0);\n  const [altText, setAltText] = useState('');\n  const [customSize, setCustomSize] = useState(false);\n  const [keyCommandText, setKeyCommandText] = useState('');\n  const imagePopoverRef = useRef<HTMLDivElement>(null);\n  const altTextInputRef = useRef<HTMLInputElement>(null);\n  const editorOpenedWithEnter = useRef(false);\n  const [btnStyle, setBtnStyle] = useState<CSSProperties>({});\n\n  const onImageClick = (e: MouseEvent | ReactMouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setShowImagePopover(true);\n  };\n\n  const calculateBtnStyles = (el: HTMLElement): CSSProperties => {\n    const elementRect = el.getBoundingClientRect();\n    return {\n      position: 'absolute',\n      top: elementRect.top + (elementRect.height / 2 - (buttonEl?.scrollHeight || 0) / 2),\n      left: elementRect.left + (elementRect.width / 2 - (buttonEl?.scrollWidth || 0) / 2)\n    };\n  };\n\n  const onImageMouseEnter = (e: MouseEvent) => {\n    if (!showImagePopover) {\n      const el = e.target as HTMLElement;\n      setImageEditHover(true);\n      setImageEl(el as HTMLImageElement);\n    }\n  };\n\n  const onImageMouseLeave = (e: MouseEvent) => {\n    if (e.relatedTarget && (e.relatedTarget as HTMLButtonElement).id !== id && !showImagePopover) {\n      setImageEl(null);\n      setImageEditHover(false);\n    }\n  };\n\n  const setImageState = () => {\n    if (imgEl) {\n      let imgHeight;\n      let imgWidth;\n      let hasHeightOrWidthAttribute = false;\n      if (imgEl.getAttribute('height')) {\n        imgHeight = parseInt(imgEl.getAttribute('height') as string, 10);\n        hasHeightOrWidthAttribute = true;\n      } else {\n        imgHeight = imgEl.naturalHeight;\n      }\n      if (imgEl.getAttribute('width')) {\n        imgWidth = parseInt(imgEl.getAttribute('width') as string, 10);\n        hasHeightOrWidthAttribute = true;\n      } else {\n        imgWidth = imgEl.naturalWidth;\n      }\n      setAltText(imgEl.getAttribute('alt') || '');\n      setHeight(imgHeight);\n      setWidth(imgWidth);\n      setAspectRatio(imgWidth / imgHeight);\n      setCustomSize(hasHeightOrWidthAttribute);\n    }\n  };\n\n  useOuterEvent('mousedown', [imagePopoverRef], () => {\n    setImageState();\n    setShowImagePopover(false);\n  });\n\n  const onCheckBoxClick = (e: ReactMouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const onInputClick = (e: ReactMouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n  };\n\n  const onInputFocus = (e: FocusEvent) => {\n    e.stopPropagation();\n  };\n\n  const onAltTextChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setAltText(e.target.value);\n  };\n\n  // The next two functions handle changing the height and width of the selected image element.\n  // If the value entered is too small, the value will be defaulted.\n  // When the height is input, a new width will be calculated and vice versa.\n  const onHeightChange = (incomingValue: string) => {\n    const inputHeight = parseInt(incomingValue, 10);\n\n    setHeight(inputHeight);\n    setWidth(inputHeight * aspectRatio);\n  };\n\n  const onWidthChange = (incomingValue: string) => {\n    const inputWidth = parseInt(incomingValue, 10);\n\n    setWidth(inputWidth);\n    setHeight(inputWidth / aspectRatio);\n  };\n\n  const onImageChangeSubmit = (e: MouseEvent) => {\n    e.preventDefault();\n    if (imgEl) {\n      if (customSize) {\n        if (Number.isNaN(height) || Number.isNaN(width)) {\n          imgEl.removeAttribute('height');\n          imgEl.removeAttribute('width');\n          setHeight(imgEl.naturalHeight);\n          setWidth(imgEl.naturalWidth);\n        } else {\n          imgEl.setAttribute('height', height.toString());\n          imgEl.setAttribute('width', width.toString());\n        }\n      } else {\n        imgEl.removeAttribute('height');\n        imgEl.removeAttribute('width');\n      }\n      imgEl.setAttribute('alt', altText);\n    }\n\n    editor.selection.select(editor.dom.select(`img[src=\"${imgEl?.src}\"]`)[0]);\n    setImageEl(null);\n    setShowImagePopover(false);\n    onChange();\n  };\n\n  const onImageChangeCancel = () => {\n    setImageEl(null);\n    setShowImagePopover(false);\n  };\n\n  const onImageDelete = () => {\n    if (imgEl) {\n      imgEl.remove();\n    }\n    setImageEl(null);\n    setShowImagePopover(false);\n    onChange();\n  };\n\n  // Keeps the imageElements state up to date with existing and newly added img tags inside of TinyMCE\n  useEffect(() => {\n    const iframeDoc = editor.getDoc();\n    const imageElements = iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n    setImageElements(() => {\n      return [...imageElements];\n    });\n    const observer = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (\n          mutation.type === 'childList' &&\n          (mutation.addedNodes.length || mutation.removedNodes.length)\n        ) {\n          const newImageElements = iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n          setImageElements(() => [...newImageElements]);\n        }\n      });\n    });\n    if (iframeDoc) {\n      observer.observe(iframeDoc.body, { childList: true, subtree: true });\n    }\n    return () => {\n      observer.disconnect();\n    };\n  }, [editorEl, editor, setImageElements]);\n\n  // Adds event listeners to HTML img elements inside of TinyMCE\n  // This has to be done because there are no react components for these images\n  useEffect(() => {\n    imgElements.forEach(imgElement => {\n      imgElement.addEventListener('mouseenter', onImageMouseEnter);\n      imgElement.addEventListener('mouseout', onImageMouseLeave);\n      imgElement.addEventListener('click', onImageClick);\n    });\n    return () => {\n      imgElements.forEach(imgElement => {\n        imgElement.removeEventListener('mouseenter', onImageMouseEnter);\n        imgElement.removeEventListener('mouseout', onImageMouseLeave);\n        imgElement.removeEventListener('click', onImageClick);\n      });\n    };\n  }, [imgElements, onImageMouseEnter, onImageMouseLeave, onImageClick]);\n\n  useEffect(() => {\n    setImageState();\n    imgEl?.setAttribute('class', imgHoverClass);\n    if (imgEl && imgEl.clientHeight > 36 && imgEl.clientWidth > 36) {\n      setCanShowEditButton(true);\n    } else {\n      setCanShowEditButton(false);\n    }\n    return () => {\n      imgEl?.removeAttribute('class');\n    };\n  }, [imgEl]);\n\n  useEffect(() => {\n    const onKeyUp = () => {\n      const selection = editor.selection.getSel();\n      let nextToImg = false;\n      // If your selection is next to an image on it's own line (not breaking text)\n      if (\n        selection &&\n        selection.anchorNode?.childNodes.length === 1 &&\n        selection.anchorNode?.firstChild?.nodeName === 'IMG' &&\n        selection.anchorOffset === 0\n      ) {\n        setImageEl(selection.anchorNode.firstChild as HTMLImageElement);\n        setImageEditFocus(true);\n        nextToImg = true;\n        // If your selection is next to an image that breaks text up inside of a paragraph\n      } else if (selection && selection.anchorNode?.nextSibling?.nodeName === 'IMG') {\n        setImageEl(selection.anchorNode.nextSibling as HTMLImageElement);\n        setImageEditFocus(true);\n        nextToImg = true;\n      } else if (selection && imgEl && imageEditFocus) {\n        setImageEl(null);\n        setImageEditFocus(false);\n        setKeyCommandText('');\n      }\n\n      if (nextToImg) {\n        setKeyCommandText(t('rte_image_key_command'));\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Enter' && imageEditFocus) {\n        e.stopPropagation();\n        e.preventDefault();\n        editorOpenedWithEnter.current = true;\n        setShowImagePopover(true);\n      } else if (e.key === 'Del' && imageEditFocus) {\n        onImageDelete();\n      }\n    };\n\n    editor.on('keyup', onKeyUp);\n    editor.on('keydown', onKeyDown, true);\n\n    return () => {\n      editor.off('keyup', onKeyUp);\n      editor.off('keydown', onKeyDown);\n    };\n  }, [editor, imgEl, imageEditFocus]);\n\n  useAfterInitialEffect(() => {\n    if (showImagePopover) {\n      editor.selection.getSel()?.collapseToEnd();\n\n      if (editorOpenedWithEnter.current) {\n        altTextInputRef.current?.focus();\n        editorOpenedWithEnter.current = false;\n      }\n    } else {\n      editor.focus();\n    }\n  }, [showImagePopover]);\n\n  useLayoutEffect(() => {\n    if (imgEl && buttonEl) {\n      setBtnStyle(calculateBtnStyles(imgEl));\n    }\n  }, [imgEl, buttonEl]);\n\n  return (\n    <>\n      {(imageEditFocus || imageEditHover) && imgEl && canShowEditButton && (\n        <Button\n          id={id}\n          icon\n          variant='primary'\n          ref={setButtonEl}\n          onClick={() => {\n            setShowImagePopover(true);\n          }}\n          style={{ ...btnStyle }}\n        >\n          <IgnoreMouseEventsIcon name='pencil-solid' />\n        </Button>\n      )}\n\n      <VisuallyHiddenText aria-live='polite'>{keyCommandText}</VisuallyHiddenText>\n\n      {showImagePopover && (buttonEl || !canShowEditButton) && imgEl && (\n        <Popover\n          target={canShowEditButton ? buttonEl : imgEl}\n          strategy='fixed'\n          arrow\n          ref={imagePopoverRef}\n          onClick={(e: MouseEvent) => e.stopPropagation()}\n        >\n          <CardHeader\n            actions={\n              <Button variant='simple' icon onClick={onImageChangeCancel} label={t('close')}>\n                <Icon name='times' />\n              </Button>\n            }\n          >\n            <Text variant='h3'>{t('rte_image_settings')}</Text>\n          </CardHeader>\n\n          <CardContent>\n            <Form\n              as='div'\n              actions={\n                <Flex container={{ justify: 'between' }} item={{ grow: 1 }}>\n                  <Flex item={{ grow: 1 }}>\n                    <Button onClick={onImageChangeCancel}>{t('cancel')}</Button>\n                    <Button onClick={onImageDelete}>{t('delete')}</Button>\n                  </Flex>\n                  <Button variant='primary' onClick={onImageChangeSubmit}>\n                    {t('submit')}\n                  </Button>\n                </Flex>\n              }\n            >\n              <Grid\n                container={{\n                  gap: 2,\n                  areas: customSize\n                    ? '\"desc desc\" \"radio radio\" \"width height\"'\n                    : '\"desc desc\" \"radio radio\"'\n                }}\n              >\n                <Grid item={{ area: 'desc' }}>\n                  <Input\n                    label={t('description')}\n                    value={altText}\n                    onClick={onInputClick}\n                    onChange={onAltTextChange}\n                    onFocus={onInputFocus}\n                    info={t('rte_image_description_info')}\n                    ref={altTextInputRef}\n                  />\n                </Grid>\n\n                <Grid item={{ area: 'radio' }}>\n                  <Checkbox\n                    checked={customSize}\n                    label={t('rte_image_custom_size')}\n                    onClick={onCheckBoxClick}\n                    onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                      setCustomSize(e.target.checked);\n                    }}\n                  />\n                </Grid>\n\n                {customSize && (\n                  <>\n                    <Grid item={{ area: 'width' }}>\n                      <NumberInput\n                        label={t('rte_width_in_pixels')}\n                        value={Math.floor(Math.max(width, 1)).toString()}\n                        onClick={onInputClick}\n                        onChange={onWidthChange}\n                      />\n                    </Grid>\n\n                    <Grid item={{ area: 'height' }}>\n                      <NumberInput\n                        label={t('rte_height_in_pixels')}\n                        value={Math.floor(Math.max(height, 1)).toString()}\n                        onClick={onInputClick}\n                        onChange={onHeightChange}\n                      />\n                    </Grid>\n                  </>\n                )}\n              </Grid>\n            </Form>\n          </CardContent>\n        </Popover>\n      )}\n    </>\n  );\n};\n\nexport default ImageEditor;\n"]}
+{"version":3,"file":"ImageEditor.js","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState, useLayoutEffect } from 'react';\nimport type {\n  FC,\n  MouseEvent as ReactMouseEvent,\n  ChangeEvent,\n  CSSProperties,\n  FocusEvent\n} from 'react';\nimport type { Editor } from 'tinymce';\nimport styled from 'styled-components';\nimport { remToPx, stripUnit } from 'polished';\n\nimport {\n  Button,\n  Checkbox,\n  createUID,\n  Grid,\n  Icon,\n  Input,\n  NumberInput,\n  useAfterInitialEffect,\n  useElement,\n  useI18n,\n  useTheme,\n  useUID,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { StyledFormDialog } from './Editor.styles';\n\nconst IgnoreMouseEventsIcon = styled(Icon)`\n  pointer-events: none;\n`;\n\nexport const imgHoverClass = createUID();\n\nconst ImageEditor: FC<{ editorEl: HTMLElement; editor: Editor; onChange: () => void }> = ({\n  editorEl,\n  editor,\n  onChange\n}) => {\n  const t = useI18n();\n  const id = useUID();\n  const theme = useTheme();\n  const [showImageDialog, setShowImageDialog] = useState(false);\n  const [imageEditHover, setImageEditHover] = useState(false);\n  const [imageEditFocus, setImageEditFocus] = useState(false);\n  const [canShowButtons, setCanShowButtons] = useState(false);\n  const [imgEl, setImageEl] = useState<HTMLImageElement | null>(null);\n  const [imgElements, setImageElements] = useState<HTMLImageElement[]>([]);\n  const [editButtonEl, setEditButtonEl] = useElement<HTMLButtonElement>(null);\n  const [deleteButtonEl, setDeleteButtonEl] = useElement<HTMLButtonElement>(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const [aspectRatio, setAspectRatio] = useState(0);\n  const [altText, setAltText] = useState('');\n  const [customSize, setCustomSize] = useState(false);\n  const [keyCommandText, setKeyCommandText] = useState('');\n  const imageDialogRef = useRef<HTMLDivElement>(null);\n  const altTextInputRef = useRef<HTMLInputElement>(null);\n  const editorOpenedWithEnter = useRef(false);\n  const [btnStyle, setBtnStyle] = useState<CSSProperties>({});\n\n  const onImageClick = (e: MouseEvent | ReactMouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setShowImageDialog(true);\n  };\n\n  const calculateBtnStyles = (el: HTMLElement): CSSProperties => {\n    const elementRect = el.getBoundingClientRect();\n    const padding = Number(stripUnit(remToPx(theme.base.spacing)));\n    return {\n      position: 'absolute',\n      display: 'flex',\n      top: elementRect.top + padding,\n      left:\n        elementRect.right +\n        padding -\n        ((editButtonEl?.scrollWidth ?? 0) + (deleteButtonEl?.scrollWidth ?? 0) * 2)\n    };\n  };\n\n  const onImageMouseEnter = (e: MouseEvent) => {\n    if (!showImageDialog) {\n      const el = e.target as HTMLElement;\n      setImageEditHover(true);\n      setImageEl(el as HTMLImageElement);\n    }\n  };\n\n  const onImageMouseLeave = (e: MouseEvent) => {\n    if (e.relatedTarget && (e.relatedTarget as HTMLDivElement).id !== id && !showImageDialog) {\n      setImageEl(null);\n      setImageEditHover(false);\n    }\n  };\n\n  const setImageState = () => {\n    if (imgEl) {\n      let imgHeight;\n      let imgWidth;\n      let hasHeightOrWidthAttribute = false;\n      if (imgEl.getAttribute('height')) {\n        imgHeight = parseInt(imgEl.getAttribute('height') as string, 10);\n        hasHeightOrWidthAttribute = true;\n      } else {\n        imgHeight = imgEl.naturalHeight;\n      }\n      if (imgEl.getAttribute('width')) {\n        imgWidth = parseInt(imgEl.getAttribute('width') as string, 10);\n        hasHeightOrWidthAttribute = true;\n      } else {\n        imgWidth = imgEl.naturalWidth;\n      }\n      setAltText(imgEl.getAttribute('alt') || '');\n      setHeight(imgHeight);\n      setWidth(imgWidth);\n      setAspectRatio(imgWidth / imgHeight);\n      setCustomSize(hasHeightOrWidthAttribute);\n    }\n  };\n\n  const onCheckBoxClick = (e: ReactMouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const onInputClick = (e: ReactMouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n  };\n\n  const onInputFocus = (e: FocusEvent) => {\n    e.stopPropagation();\n  };\n\n  const onAltTextChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setAltText(e.target.value);\n  };\n\n  // The next two functions handle changing the height and width of the selected image element.\n  // If the value entered is too small, the value will be defaulted.\n  // When the height is input, a new width will be calculated and vice versa.\n  const onHeightChange = (incomingValue: string) => {\n    const inputHeight = parseInt(incomingValue, 10);\n\n    setHeight(inputHeight);\n    setWidth(inputHeight * aspectRatio);\n  };\n\n  const onWidthChange = (incomingValue: string) => {\n    const inputWidth = parseInt(incomingValue, 10);\n\n    setWidth(inputWidth);\n    setHeight(inputWidth / aspectRatio);\n  };\n\n  const onImageChangeSubmit = () => {\n    if (imgEl) {\n      if (customSize) {\n        if (Number.isNaN(height) || Number.isNaN(width)) {\n          imgEl.removeAttribute('height');\n          imgEl.removeAttribute('width');\n          setHeight(imgEl.naturalHeight);\n          setWidth(imgEl.naturalWidth);\n        } else {\n          imgEl.setAttribute('height', height.toString());\n          imgEl.setAttribute('width', width.toString());\n        }\n      } else {\n        imgEl.removeAttribute('height');\n        imgEl.removeAttribute('width');\n      }\n      imgEl.setAttribute('alt', altText);\n    }\n\n    editor.selection.select(editor.dom.select(`img[src=\"${imgEl?.src}\"]`)[0]);\n    setImageEl(null);\n    setShowImageDialog(false);\n    onChange();\n  };\n\n  const onImageChangeCancel = () => {\n    setImageEl(null);\n    setShowImageDialog(false);\n  };\n\n  const onImageDelete = () => {\n    if (imgEl) {\n      imgEl.remove();\n    }\n    setImageEl(null);\n    setShowImageDialog(false);\n    setImageEditFocus(false);\n    onChange();\n  };\n\n  // Keeps the imageElements state up to date with existing and newly added img tags inside of TinyMCE\n  useEffect(() => {\n    const iframeDoc = editor.getDoc();\n    const imageElements = iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n    setImageElements(() => {\n      return [...imageElements];\n    });\n    const observer = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (\n          mutation.type === 'childList' &&\n          (mutation.addedNodes.length || mutation.removedNodes.length)\n        ) {\n          const newImageElements = iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n          setImageElements(() => [...newImageElements]);\n        }\n      });\n    });\n    if (iframeDoc) {\n      observer.observe(iframeDoc.body, { childList: true, subtree: true });\n    }\n    return () => {\n      observer.disconnect();\n    };\n  }, [editorEl, editor, setImageElements]);\n\n  // Adds event listeners to HTML img elements inside of TinyMCE\n  // This has to be done because there are no react components for these images\n  useEffect(() => {\n    imgElements.forEach(imgElement => {\n      imgElement.addEventListener('mouseenter', onImageMouseEnter);\n      imgElement.addEventListener('mouseout', onImageMouseLeave);\n      imgElement.addEventListener('click', onImageClick);\n    });\n    return () => {\n      imgElements.forEach(imgElement => {\n        imgElement.removeEventListener('mouseenter', onImageMouseEnter);\n        imgElement.removeEventListener('mouseout', onImageMouseLeave);\n        imgElement.removeEventListener('click', onImageClick);\n      });\n    };\n  }, [imgElements, onImageMouseEnter, onImageMouseLeave, onImageClick]);\n\n  useEffect(() => {\n    setImageState();\n    imgEl?.setAttribute('class', imgHoverClass);\n    if (imgEl && imgEl.clientHeight > 64 && imgEl.clientWidth > 104) {\n      setCanShowButtons(true);\n    } else {\n      setCanShowButtons(false);\n    }\n    return () => {\n      imgEl?.removeAttribute('class');\n    };\n  }, [imgEl]);\n\n  useEffect(() => {\n    const onKeyUp = () => {\n      const selection = editor.selection.getSel();\n      let nextToImg = false;\n      // If your selection is next to an image on it's own line (not breaking text)\n      if (\n        selection &&\n        selection.anchorNode?.childNodes.length === 1 &&\n        selection.anchorNode?.firstChild?.nodeName === 'IMG' &&\n        selection.anchorOffset === 0\n      ) {\n        setImageEl(selection.anchorNode.firstChild as HTMLImageElement);\n        setImageEditFocus(true);\n        nextToImg = true;\n        // If your selection is next to an image that breaks text up inside of a paragraph\n      } else if (selection?.anchorNode?.nextSibling?.nodeName === 'IMG') {\n        setImageEl(selection.anchorNode.nextSibling as HTMLImageElement);\n        setImageEditFocus(true);\n        nextToImg = true;\n      } else if (selection && imgEl && imageEditFocus) {\n        setImageEl(null);\n        setImageEditFocus(false);\n        setKeyCommandText('');\n      }\n\n      if (nextToImg) {\n        setKeyCommandText(t('rte_image_key_command'));\n      }\n    };\n\n    const onMouseUp = () => {\n      const selection = editor.selection.getSel();\n      // If your selection is next to an image\n      if (selection?.anchorNode?.firstChild?.nodeName === 'IMG') {\n        setImageEl(selection.anchorNode.firstChild as HTMLImageElement);\n        setImageEditFocus(true);\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Enter' && imageEditFocus) {\n        e.stopPropagation();\n        e.preventDefault();\n        editorOpenedWithEnter.current = true;\n        setShowImageDialog(true);\n      } else if ((e.key === 'Del' || e.key === 'Backspace') && imageEditFocus) {\n        onImageDelete();\n      }\n    };\n\n    editor.on('keyup', onKeyUp);\n    editor.on('mouseup', onMouseUp);\n    editor.on('keydown', onKeyDown, true);\n\n    return () => {\n      editor.off('keyup', onKeyUp);\n      editor.off('mouseup', onMouseUp);\n      editor.off('keydown', onKeyDown);\n    };\n  }, [editor, imgEl, imageEditFocus]);\n\n  useAfterInitialEffect(() => {\n    if (showImageDialog) {\n      editor.selection.getSel()?.collapseToEnd();\n\n      if (editorOpenedWithEnter.current) {\n        altTextInputRef.current?.focus();\n        editorOpenedWithEnter.current = false;\n      }\n    } else {\n      editor.focus();\n    }\n  }, [showImageDialog]);\n\n  useLayoutEffect(() => {\n    if (imgEl && editButtonEl && deleteButtonEl) {\n      setBtnStyle(calculateBtnStyles(imgEl));\n    }\n  }, [imgEl, editButtonEl, deleteButtonEl]);\n\n  return (\n    <>\n      {(imageEditFocus || imageEditHover) && imgEl && canShowButtons && (\n        <div id={id} style={btnStyle}>\n          <Button\n            ref={setEditButtonEl}\n            icon\n            label={t('rte_edit_image')}\n            aria-label={t('rte_edit_image', [altText])}\n            onClick={() => {\n              setShowImageDialog(true);\n            }}\n          >\n            <IgnoreMouseEventsIcon name='pencil' />\n          </Button>\n          <Button\n            ref={setDeleteButtonEl}\n            icon\n            label={t('rte_delete_image')}\n            aria-label={t('rte_delete_image', [altText])}\n            onClick={onImageDelete}\n          >\n            <IgnoreMouseEventsIcon name='trash' />\n          </Button>\n        </div>\n      )}\n\n      <VisuallyHiddenText aria-live='polite'>{keyCommandText}</VisuallyHiddenText>\n\n      {showImageDialog && (editButtonEl || !canShowButtons) && imgEl && (\n        <StyledFormDialog\n          ref={imageDialogRef}\n          target={editButtonEl && canShowButtons ? editButtonEl : imgEl}\n          heading={t('rte_image_settings')}\n          onCancel={onImageChangeCancel}\n          onSubmit={onImageChangeSubmit}\n          onDismiss={() => {\n            setShowImageDialog(false);\n          }}\n        >\n          <Grid\n            container={{\n              gap: 2,\n              areas: customSize\n                ? '\"desc desc\" \"radio radio\" \"width height\"'\n                : '\"desc desc\" \"radio radio\"'\n            }}\n          >\n            <Grid item={{ area: 'desc' }}>\n              <Input\n                label={t('description')}\n                value={altText}\n                onClick={onInputClick}\n                onChange={onAltTextChange}\n                onFocus={onInputFocus}\n                info={t('rte_image_description_info')}\n                ref={altTextInputRef}\n              />\n            </Grid>\n\n            <Grid item={{ area: 'radio' }}>\n              <Checkbox\n                checked={customSize}\n                label={t('rte_image_custom_size')}\n                onClick={onCheckBoxClick}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                  setCustomSize(e.target.checked);\n                }}\n              />\n            </Grid>\n\n            {customSize && (\n              <>\n                <Grid item={{ area: 'width' }}>\n                  <NumberInput\n                    label={t('rte_width_in_pixels')}\n                    value={Math.floor(Math.max(width, 1)).toString()}\n                    onClick={onInputClick}\n                    onChange={onWidthChange}\n                  />\n                </Grid>\n\n                <Grid item={{ area: 'height' }}>\n                  <NumberInput\n                    label={t('rte_height_in_pixels')}\n                    value={Math.floor(Math.max(height, 1)).toString()}\n                    onClick={onInputClick}\n                    onChange={onHeightChange}\n                  />\n                </Grid>\n              </>\n            )}\n          </Grid>\n        </StyledFormDialog>\n      )}\n    </>\n  );\n};\n\nexport default ImageEditor;\n"]}

package/lib/components/Editor/Toolbar/AnchorButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAgE,MAAM,OAAO,CAAC;AAC9F,OAAO,KAAK,EAAE,MAAM,EAAmB,MAAM,SAAS,CAAC;AAcvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAQ5D,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAuOtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAgE,MAAM,OAAO,CAAC;AAC9F,OAAO,KAAK,EAAE,MAAM,EAAmB,MAAM,SAAS,CAAC;AAavD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAS5D,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CA4OtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Editor/Toolbar/AnchorButton.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useLayoutEffect } from 'react';
-import { Button, CardContent, Grid, Icon, registerIcon, Input, Popover, useOuterEvent, Form, useI18n } from '@pega/cosmos-react-core';
+import { Button, CardContent, Grid, Icon, registerIcon, Input, useOuterEvent, Form, useI18n } from '@pega/cosmos-react-core';
 import * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';
 import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
 import { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';
+import { StyledEditPopover } from '../Editor.styles';
 registerIcon(chainIcon);
 const AnchorButton = ({ osx, editor, ...restProps }) => {
     const t = useI18n();
@@ -129,12 +130,12 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
                         e.preventDefault();
                         openMenu({ focusInput: true });
                     }
-                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...restProps, children: _jsx(Icon, { name: 'chain' }) }), _jsx(Popover, { show: anchorMenu, target: buttonRef.current, ref: popoverRef, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { as: 'div', actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: "Cancel" }), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', variant: 'primary', onClick: (e) => {
+                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...restProps, children: _jsx(Icon, { name: 'chain' }) }), _jsx(StyledEditPopover, { show: anchorMenu, target: buttonRef.current, ref: popoverRef, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { as: 'div', actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: t('cancel') }), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', variant: 'primary', onClick: (e) => {
                                         e.preventDefault();
                                         createLink();
-                                    }, children: "Apply" })] }), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: 'Text', value: selectedText, onClick: preventDef, onChange: (e) => {
+                                    }, children: t('apply') })] }), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: t('rte_link_text'), value: selectedText, onClick: preventDef, onChange: (e) => {
                                         setSelectedText(e.target.value);
-                                    }, ref: textInputRef }), _jsx(Input, { label: 'URL', value: url, onClick: preventDef, onChange: (e) => {
+                                    }, ref: textInputRef }), _jsx(Input, { label: t('rte_link_url'), value: url, onClick: preventDef, onChange: (e) => {
                                         const urlInput = e.target.value;
                                         setUrl(urlInput);
                                         if (!urlMatch) {

package/lib/components/Editor/Toolbar/AnchorButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useLayoutEffect } from 'react';\nimport type { FC, ChangeEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport type { Editor, EditorSelection } from 'tinymce';\n\nimport {\n  Button,\n  CardContent,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Popover,\n  useOuterEvent,\n  Form,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n  osx: boolean;\n  editor: Editor;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, editor, ...restProps }) => {\n  const t = useI18n();\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const textInputRef = useRef<HTMLInputElement>(null);\n  const urlInputRef = useRef<HTMLInputElement>(null);\n  const popoverRef = useRef(null);\n  const [selectedText, setSelectedText] = useState('');\n  const [selection, setSelection] = useState<EditorSelection | undefined>();\n  const [url, setUrl] = useState('');\n  const [urlMatch, setUrlMatch] = useState(false);\n  const [anchorMenu, setAnchorMenu] = useState(false);\n  const [shouldFocusInput, setShouldFocusInput] = useState(false);\n  const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n  const openMenu = (opts: { focusInput?: boolean } = {}) => {\n    setAnchorMenu(true);\n    if (opts.focusInput) {\n      setShouldFocusInput(true);\n    }\n  };\n\n  const resetMenu = () => {\n    setSelection(undefined);\n    setSelectedText('');\n    setUrl('');\n    setUrlMatch(true);\n    setAnchorMenu(false);\n  };\n\n  useOuterEvent('mousedown', [popoverRef, buttonRef], () => {\n    if (anchorMenu) {\n      resetMenu();\n    }\n  });\n\n  const createLink = () => {\n    if (url && selection) {\n      editor.focus();\n      editor.selection = selection;\n      if (selection.getNode().tagName === 'A') {\n        const anchorEl = editor.selection.getNode();\n        anchorEl.setAttribute('href', url);\n        anchorEl.setAttribute('data-mce-href', url);\n        anchorEl.textContent = selectedText;\n        editor.execCommand('mceAddUndoLevel');\n      } else {\n        editor.insertContent(\n          `<a href='${\n            new URL(/^[a-z][a-z0-9.+-]*:/i.test(url) ? url : `https:${url}`).href\n          }'>${selectedText}</a>`\n        );\n      }\n      resetMenu();\n    }\n  };\n\n  useEffect(() => {\n    if (anchorMenu) {\n      if (editor.selection) {\n        const selectedEl = editor.selection.getNode();\n        if (selectedEl?.tagName === 'A') {\n          setSelectedText(selectedEl.textContent || '');\n          setUrl(selectedEl.getAttribute('href') || '');\n        } else {\n          setSelectedText(editor.selection.getContent({ format: 'text' }));\n        }\n        setSelection({ ...editor.selection });\n      }\n    } else {\n      resetMenu();\n    }\n  }, [anchorMenu]);\n\n  const preventDef = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const isLinkActive = () => {\n    return editor.selection.getNode().tagName === 'A' && editor.hasFocus();\n  };\n\n  const cancelAnchorCreation = (event?: KeyboardEvent | MouseEvent) => {\n    if (\n      ((event?.type === 'keydown' && (event as KeyboardEvent)?.key === 'Enter') ||\n        event?.type === 'mousedown' ||\n        !event) &&\n      anchorMenu\n    ) {\n      event?.preventDefault();\n      resetMenu();\n      buttonRef.current?.focus();\n    }\n  };\n\n  useEffect(() => {\n    const keyCommandListener = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey) && editor.hasFocus()) {\n        e.preventDefault();\n        openMenu({ focusInput: true });\n      }\n      if (e.key === 'Escape') {\n        cancelAnchorCreation();\n      }\n    };\n\n    editor.getDoc().addEventListener('keydown', keyCommandListener);\n\n    return () => {\n      editor.getDoc().removeEventListener('keydown', keyCommandListener);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    if (anchorMenu && shouldFocusInput) {\n      textInputRef.current?.focus();\n      setShouldFocusInput(false);\n    }\n  }, [textInputRef.current]);\n\n  useEffect(() => {\n    // These events must be added here so they run before the native event in useArrows (used in the toolbar).\n    const onKeyDown = (e: KeyboardEvent) => {\n      e.stopPropagation();\n    };\n    textInputRef.current?.addEventListener('keydown', onKeyDown);\n    urlInputRef.current?.addEventListener('keydown', onKeyDown);\n    return () => {\n      textInputRef.current?.removeEventListener('keydown', onKeyDown);\n      urlInputRef.current?.removeEventListener('keydown', onKeyDown);\n    };\n  }, [textInputRef.current, urlInputRef.current]);\n\n  return (\n    <>\n      <ToolbarButton\n        ref={buttonRef}\n        onMouseDown={e => {\n          e.preventDefault();\n          openMenu();\n        }}\n        onKeyDown={(e: ReactKeyboardEvent) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            openMenu({ focusInput: true });\n          }\n        }}\n        active={isLinkActive()}\n        tooltip={tooltip}\n        label={t('rte_link')}\n        {...restProps}\n      >\n        <Icon name='chain' />\n      </ToolbarButton>\n      <Popover show={anchorMenu} target={buttonRef.current} ref={popoverRef} placement='bottom'>\n        <CardContent>\n          <Form\n            as='div'\n            actions={\n              <>\n                <Button\n                  variant='secondary'\n                  onKeyDown={cancelAnchorCreation}\n                  onMouseDown={cancelAnchorCreation}\n                  type='button'\n                >\n                  Cancel\n                </Button>\n                <Button\n                  disabled={!url || !urlMatch}\n                  name='apply'\n                  variant='primary'\n                  onClick={(e: MouseEvent) => {\n                    e.preventDefault();\n                    createLink();\n                  }}\n                >\n                  Apply\n                </Button>\n              </>\n            }\n          >\n            <Grid container={{ rowGap: 2 }}>\n              <Input\n                label='Text'\n                value={selectedText}\n                onClick={preventDef}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                  setSelectedText(e.target.value);\n                }}\n                ref={textInputRef}\n              />\n              <Input\n                label='URL'\n                value={url}\n                onClick={preventDef}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                  const urlInput = e.target.value;\n                  setUrl(urlInput);\n\n                  if (!urlMatch) {\n                    try {\n                      // eslint-disable-next-line no-new\n                      new URL(\n                        /^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `https:${urlInput}`\n                      );\n                      setUrlMatch(true);\n                    } catch {\n                      setUrlMatch(false);\n                    }\n                  }\n                }}\n                onBlur={() => {\n                  try {\n                    // eslint-disable-next-line no-new\n                    new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `https:${url}`);\n                    setUrlMatch(true);\n                  } catch {\n                    setUrlMatch(false);\n                  }\n                }}\n                info={!urlMatch ? t('rte_invalid_url') : ''}\n                status={!urlMatch ? 'error' : undefined}\n                ref={urlInputRef}\n              />\n            </Grid>\n          </Form>\n        </CardContent>\n      </Popover>\n    </>\n  );\n};\n\nexport default AnchorButton;\n"]}
+{"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useLayoutEffect } from 'react';\nimport type { FC, ChangeEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport type { Editor, EditorSelection } from 'tinymce';\n\nimport {\n  Button,\n  CardContent,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  useOuterEvent,\n  Form,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { StyledEditPopover } from '../Editor.styles';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n  osx: boolean;\n  editor: Editor;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, editor, ...restProps }) => {\n  const t = useI18n();\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const textInputRef = useRef<HTMLInputElement>(null);\n  const urlInputRef = useRef<HTMLInputElement>(null);\n  const popoverRef = useRef(null);\n  const [selectedText, setSelectedText] = useState('');\n  const [selection, setSelection] = useState<EditorSelection | undefined>();\n  const [url, setUrl] = useState('');\n  const [urlMatch, setUrlMatch] = useState(false);\n  const [anchorMenu, setAnchorMenu] = useState(false);\n  const [shouldFocusInput, setShouldFocusInput] = useState(false);\n  const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n  const openMenu = (opts: { focusInput?: boolean } = {}) => {\n    setAnchorMenu(true);\n    if (opts.focusInput) {\n      setShouldFocusInput(true);\n    }\n  };\n\n  const resetMenu = () => {\n    setSelection(undefined);\n    setSelectedText('');\n    setUrl('');\n    setUrlMatch(true);\n    setAnchorMenu(false);\n  };\n\n  useOuterEvent('mousedown', [popoverRef, buttonRef], () => {\n    if (anchorMenu) {\n      resetMenu();\n    }\n  });\n\n  const createLink = () => {\n    if (url && selection) {\n      editor.focus();\n      editor.selection = selection;\n      if (selection.getNode().tagName === 'A') {\n        const anchorEl = editor.selection.getNode();\n        anchorEl.setAttribute('href', url);\n        anchorEl.setAttribute('data-mce-href', url);\n        anchorEl.textContent = selectedText;\n        editor.execCommand('mceAddUndoLevel');\n      } else {\n        editor.insertContent(\n          `<a href='${\n            new URL(/^[a-z][a-z0-9.+-]*:/i.test(url) ? url : `https:${url}`).href\n          }'>${selectedText}</a>`\n        );\n      }\n      resetMenu();\n    }\n  };\n\n  useEffect(() => {\n    if (anchorMenu) {\n      if (editor.selection) {\n        const selectedEl = editor.selection.getNode();\n        if (selectedEl?.tagName === 'A') {\n          setSelectedText(selectedEl.textContent || '');\n          setUrl(selectedEl.getAttribute('href') || '');\n        } else {\n          setSelectedText(editor.selection.getContent({ format: 'text' }));\n        }\n        setSelection({ ...editor.selection });\n      }\n    } else {\n      resetMenu();\n    }\n  }, [anchorMenu]);\n\n  const preventDef = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const isLinkActive = () => {\n    return editor.selection.getNode().tagName === 'A' && editor.hasFocus();\n  };\n\n  const cancelAnchorCreation = (event?: KeyboardEvent | MouseEvent) => {\n    if (\n      ((event?.type === 'keydown' && (event as KeyboardEvent)?.key === 'Enter') ||\n        event?.type === 'mousedown' ||\n        !event) &&\n      anchorMenu\n    ) {\n      event?.preventDefault();\n      resetMenu();\n      buttonRef.current?.focus();\n    }\n  };\n\n  useEffect(() => {\n    const keyCommandListener = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey) && editor.hasFocus()) {\n        e.preventDefault();\n        openMenu({ focusInput: true });\n      }\n      if (e.key === 'Escape') {\n        cancelAnchorCreation();\n      }\n    };\n\n    editor.getDoc().addEventListener('keydown', keyCommandListener);\n\n    return () => {\n      editor.getDoc().removeEventListener('keydown', keyCommandListener);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    if (anchorMenu && shouldFocusInput) {\n      textInputRef.current?.focus();\n      setShouldFocusInput(false);\n    }\n  }, [textInputRef.current]);\n\n  useEffect(() => {\n    // These events must be added here so they run before the native event in useArrows (used in the toolbar).\n    const onKeyDown = (e: KeyboardEvent) => {\n      e.stopPropagation();\n    };\n    textInputRef.current?.addEventListener('keydown', onKeyDown);\n    urlInputRef.current?.addEventListener('keydown', onKeyDown);\n    return () => {\n      textInputRef.current?.removeEventListener('keydown', onKeyDown);\n      urlInputRef.current?.removeEventListener('keydown', onKeyDown);\n    };\n  }, [textInputRef.current, urlInputRef.current]);\n\n  return (\n    <>\n      <ToolbarButton\n        ref={buttonRef}\n        onMouseDown={e => {\n          e.preventDefault();\n          openMenu();\n        }}\n        onKeyDown={(e: ReactKeyboardEvent) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            openMenu({ focusInput: true });\n          }\n        }}\n        active={isLinkActive()}\n        tooltip={tooltip}\n        label={t('rte_link')}\n        {...restProps}\n      >\n        <Icon name='chain' />\n      </ToolbarButton>\n      <StyledEditPopover\n        show={anchorMenu}\n        target={buttonRef.current}\n        ref={popoverRef}\n        placement='bottom'\n      >\n        <CardContent>\n          <Form\n            as='div'\n            actions={\n              <>\n                <Button\n                  variant='secondary'\n                  onKeyDown={cancelAnchorCreation}\n                  onMouseDown={cancelAnchorCreation}\n                  type='button'\n                >\n                  {t('cancel')}\n                </Button>\n                <Button\n                  disabled={!url || !urlMatch}\n                  name='apply'\n                  variant='primary'\n                  onClick={(e: MouseEvent) => {\n                    e.preventDefault();\n                    createLink();\n                  }}\n                >\n                  {t('apply')}\n                </Button>\n              </>\n            }\n          >\n            <Grid container={{ rowGap: 2 }}>\n              <Input\n                label={t('rte_link_text')}\n                value={selectedText}\n                onClick={preventDef}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                  setSelectedText(e.target.value);\n                }}\n                ref={textInputRef}\n              />\n              <Input\n                label={t('rte_link_url')}\n                value={url}\n                onClick={preventDef}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                  const urlInput = e.target.value;\n                  setUrl(urlInput);\n\n                  if (!urlMatch) {\n                    try {\n                      // eslint-disable-next-line no-new\n                      new URL(\n                        /^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `https:${urlInput}`\n                      );\n                      setUrlMatch(true);\n                    } catch {\n                      setUrlMatch(false);\n                    }\n                  }\n                }}\n                onBlur={() => {\n                  try {\n                    // eslint-disable-next-line no-new\n                    new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `https:${url}`);\n                    setUrlMatch(true);\n                  } catch {\n                    setUrlMatch(false);\n                  }\n                }}\n                info={!urlMatch ? t('rte_invalid_url') : ''}\n                status={!urlMatch ? 'error' : undefined}\n                ref={urlInputRef}\n              />\n            </Grid>\n          </Form>\n        </CardContent>\n      </StyledEditPopover>\n    </>\n  );\n};\n\nexport default AnchorButton;\n"]}

package/lib/components/Editor/Toolbar/TextSelect.d.ts

@@ -1,10 +1,25 @@
 import type { FC } from 'react';
 import type { Editor } from 'tinymce';
-type FormatTypes = 'p' | 'h1' | 'h2' | 'h3' | 'h4';
-export declare const getTextFormats: (osx?: boolean) => {
+import type { TranslationFunction, TranslationPack } from '@pega/cosmos-react-core';
+declare const formatMapping: {
+    readonly p: "normal";
+    readonly li: "normal";
+    readonly ul: "normal";
+    readonly ol: "normal";
+    readonly div: "normal";
+    readonly h1: "heading-1";
+    readonly h2: "heading-2";
+    readonly h3: "heading-3";
+    readonly h4: "heading-4";
+    readonly '': "normal";
+};
+type FormatType = keyof typeof formatMapping;
+type Format = (typeof formatMapping)[FormatType];
+export declare const getTextFormats: (t: TranslationFunction<TranslationPack>, osx?: boolean) => {
+    id: Format;
     text: string;
     subText: string;
-    type: FormatTypes;
+    type: FormatType;
 }[];
 declare const TextSelect: FC<{
     osx: boolean;

package/lib/components/Editor/Toolbar/TextSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAyC,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAgDtC,KAAK,WAAW,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAgBnD,eAAO,MAAM,cAAc,SACpB,OAAO,KACX;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,WAAW,CAAA;CAAE,EAQtD,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CA2HpD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAyC,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAetC,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAkCpF,QAAA,MAAM,aAAa;;;;;;;;;;;CAWT,CAAC;AAQX,KAAK,UAAU,GAAG,MAAM,OAAO,aAAa,CAAC;AAC7C,KAAK,MAAM,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;AAMjD,eAAO,MAAM,cAAc,MACtB,mBAAmB,CAAC,eAAe,CAAC,QAClC,OAAO,KACX;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,EAiCjE,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CA2IpD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Editor/Toolbar/TextSelect.js

@@ -29,25 +29,56 @@ StyledTextSelect.defaultProps = defaultThemeProp;
 const StyledSelectMenu = styled.div `
   min-width: 20ch;
 `;
-const textMapping = {
-    p: 'Normal',
-    h1: 'Heading 1',
-    h2: 'Heading 2',
-    h3: 'Heading 3',
-    h4: 'Heading 4',
-    '': 'Normal',
-    div: 'Normal'
+const formatMapping = {
+    p: 'normal',
+    li: 'normal',
+    ul: 'normal',
+    ol: 'normal',
+    div: 'normal',
+    h1: 'heading-1',
+    h2: 'heading-2',
+    h3: 'heading-3',
+    h4: 'heading-4',
+    '': 'normal'
 };
+const normalTags = new Set(Object.entries(formatMapping)
+    .filter(([, value]) => value === 'normal')
+    .map(([key]) => key));
 const getTextCommand = (num, osx) => {
     return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);
 };
-export const getTextFormats = (osx = false) => {
+export const getTextFormats = (t, osx = false) => {
     return [
-        { text: 'Normal', subText: getTextCommand(0, osx), type: 'p' },
-        { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'h1' },
-        { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'h2' },
-        { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'h3' },
-        { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'h4' }
+        {
+            id: 'normal',
+            text: t('rte_heading_style_normal'),
+            subText: getTextCommand(0, osx),
+            type: 'p'
+        },
+        {
+            id: 'heading-1',
+            text: t('rte_heading_style_heading_1'),
+            subText: getTextCommand(1, osx),
+            type: 'h1'
+        },
+        {
+            id: 'heading-2',
+            text: t('rte_heading_style_heading_2'),
+            subText: getTextCommand(2, osx),
+            type: 'h2'
+        },
+        {
+            id: 'heading-3',
+            text: t('rte_heading_style_heading_3'),
+            subText: getTextCommand(3, osx),
+            type: 'h3'
+        },
+        {
+            id: 'heading-4',
+            text: t('rte_heading_style_heading_4'),
+            subText: getTextCommand(4, osx),
+            type: 'h4'
+        }
     ];
 };
 const TextSelect = ({ osx, editor, ...restProps }) => {
@@ -59,8 +90,8 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
     const popoverRef = useRef(null);
     const menuRef = useRef(null);
     const textFormats = useMemo(() => {
-        return getTextFormats(osx);
-    }, [osx]);
+        return getTextFormats(t, osx);
+    }, [t, osx]);
     useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {
         setOpen(false);
     });
@@ -81,7 +112,7 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
     };
     const getParentTextFormat = (el) => {
         const elTagName = el.nodeName.toLowerCase();
-        if (textMapping[elTagName]) {
+        if (formatMapping[elTagName]) {
             return elTagName;
         }
         if (el.parentNode) {
@@ -90,15 +121,24 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
         return undefined;
     };
     const activeFormat = () => {
-        return editor.hasFocus()
+        const tag = editor.hasFocus()
             ? getParentTextFormat(editor.selection.getNode())
             : editor.contentDocument?.body?.firstChild?.nodeName.toLowerCase();
+        if (tag && normalTags.has(tag)) {
+            return 'p';
+        }
+        return tag;
     };
-    const getFormatText = () => {
+    const formatText = (() => {
         const activeFormatType = activeFormat();
-        const format = activeFormatType ? textMapping[activeFormatType] : 'Unknown';
-        return format || 'Unknown';
-    };
+        const unknown = t('rte_heading_style_unknown');
+        if (!activeFormatType)
+            return unknown;
+        const format = formatMapping[activeFormatType];
+        if (!format)
+            return unknown;
+        return textFormats.find(({ id }) => id === format)?.text ?? unknown;
+    })();
     return (_jsxs(_Fragment, { children: [_jsxs(StyledTextSelect, { ...restProps, variant: 'simple', type: 'button', icon: false, ref: buttonRef, onMouseDown: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -120,7 +160,7 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
                 }, onFocus: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `${t('rte_text_formatting_toolbar')}. ${t('rte_heading_style')}. ${getFormatText()} ${t('selected').toLocaleLowerCase()}`, "aria-haspopup": true, children: [_jsx("span", { children: getFormatText() }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_heading_style') })), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
+                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `${t('rte_text_formatting_toolbar')}. ${t('rte_heading_style')}. ${formatText} ${t('selected').toLocaleLowerCase()}`, "aria-haspopup": true, children: [_jsx("span", { children: formatText }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_heading_style') })), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
                         id: type,
                         primary: text,
                         secondary: [subText],

package/lib/components/Editor/Toolbar/TextSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useMemo } from 'react';\nimport type { FC, MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport type { Editor } from 'tinymce';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Popover,\n  Icon,\n  registerIcon,\n  useOuterEvent,\n  Menu,\n  Button,\n  defaultThemeProp,\n  useI18n,\n  Tooltip,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    display: inline-flex;\n    align-items: center;\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n    height: calc(4 * ${theme.base.spacing});\n    padding: calc(0.5 * ${theme.base.spacing});\n    font-size: ${fontSizes.xxs};\n\n    span {\n      white-space: nowrap;\n    }\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n  min-width: 20ch;\n`;\n\ntype FormatTypes = 'p' | 'h1' | 'h2' | 'h3' | 'h4';\n\nconst textMapping = {\n  p: 'Normal',\n  h1: 'Heading 1',\n  h2: 'Heading 2',\n  h3: 'Heading 3',\n  h4: 'Heading 4',\n  '': 'Normal',\n  div: 'Normal'\n} as const;\n\nconst getTextCommand = (num: number, osx: boolean) => {\n  return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nexport const getTextFormats = (\n  osx: boolean = false\n): { text: string; subText: string; type: FormatTypes }[] => {\n  return [\n    { text: 'Normal', subText: getTextCommand(0, osx), type: 'p' },\n    { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'h1' },\n    { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'h2' },\n    { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'h3' },\n    { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'h4' }\n  ];\n};\n\nconst TextSelect: FC<{ osx: boolean; editor: Editor }> = ({ osx, editor, ...restProps }) => {\n  const t = useI18n();\n  const [open, setOpen] = useState(false);\n  const selecting = useRef(false);\n  const openedByClick = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef(null);\n  const menuRef = useRef(null);\n\n  const textFormats = useMemo(() => {\n    return getTextFormats(osx);\n  }, [osx]);\n\n  useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n    setOpen(false);\n  });\n\n  const onTextSelect = (type: FormatTypes, e: MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    editor.execCommand('FormatBlock', false, type);\n    if (!openedByClick.current) {\n      buttonRef.current?.focus();\n    }\n    setOpen(false);\n    selecting.current = true;\n    setTimeout(() => {\n      if (!editor.hasFocus() && openedByClick.current) {\n        editor.focus();\n      }\n    }, 0);\n  };\n\n  const getParentTextFormat = (el: Element | Node): FormatTypes | undefined => {\n    const elTagName = el.nodeName.toLowerCase() as FormatTypes;\n    if (textMapping[elTagName]) {\n      return elTagName;\n    }\n    if (el.parentNode) {\n      return getParentTextFormat(el.parentNode);\n    }\n    return undefined;\n  };\n\n  const activeFormat = (): FormatTypes | undefined => {\n    return editor.hasFocus()\n      ? getParentTextFormat(editor.selection.getNode())\n      : (editor.contentDocument?.body?.firstChild?.nodeName.toLowerCase() as FormatTypes);\n  };\n\n  const getFormatText = (): string => {\n    const activeFormatType = activeFormat();\n    const format = activeFormatType ? textMapping[activeFormatType] : 'Unknown';\n    return format || 'Unknown';\n  };\n\n  return (\n    <>\n      <StyledTextSelect\n        {...restProps}\n        variant='simple'\n        type='button'\n        icon={false}\n        ref={buttonRef}\n        onMouseDown={(e: MouseEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n          setOpen(true);\n          openedByClick.current = true;\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Enter' && !selecting.current) {\n            e.preventDefault();\n            setOpen(true);\n            openedByClick.current = false;\n          } else if (e.key === 'Enter') {\n            e.preventDefault();\n            selecting.current = false;\n          } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n            setOpen(false);\n          }\n        }}\n        onFocus={(e: FocusEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onClick={(e: MouseEvent) => e.stopPropagation()}\n        aria-expanded={open}\n        aria-label={`${t('rte_text_formatting_toolbar')}. ${t(\n          'rte_heading_style'\n        )}. ${getFormatText()} ${t('selected').toLocaleLowerCase()}`}\n        aria-haspopup\n      >\n        <span>{getFormatText()}</span>\n        <Icon name='arrow-micro-down' />\n      </StyledTextSelect>\n      {buttonRef.current && (\n        <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n          {t('rte_heading_style')}\n        </Tooltip>\n      )}\n      <Popover\n        show={open}\n        as={StyledSelectMenu}\n        target={buttonRef.current}\n        placement='bottom-start'\n        ref={popoverRef}\n      >\n        <Menu\n          items={textFormats.map(({ text, type, subText }) => ({\n            id: type,\n            primary: text,\n            secondary: [subText],\n            selected: type === activeFormat()\n          }))}\n          focusControlEl={buttonRef.current ?? undefined}\n          mode='single-select'\n          ref={menuRef}\n          onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n        />\n      </Popover>\n    </>\n  );\n};\n\nexport default TextSelect;\n"]}
+{"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useMemo } from 'react';\nimport type { FC, MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport type { Editor } from 'tinymce';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Popover,\n  Icon,\n  registerIcon,\n  useOuterEvent,\n  Menu,\n  Button,\n  defaultThemeProp,\n  useI18n,\n  Tooltip,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\nimport type { TranslationFunction, TranslationPack } from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    display: inline-flex;\n    align-items: center;\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n    height: calc(4 * ${theme.base.spacing});\n    padding: calc(0.5 * ${theme.base.spacing});\n    font-size: ${fontSizes.xxs};\n\n    span {\n      white-space: nowrap;\n    }\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n  min-width: 20ch;\n`;\n\nconst formatMapping = {\n  p: 'normal',\n  li: 'normal',\n  ul: 'normal',\n  ol: 'normal',\n  div: 'normal',\n  h1: 'heading-1',\n  h2: 'heading-2',\n  h3: 'heading-3',\n  h4: 'heading-4',\n  '': 'normal'\n} as const;\n\nconst normalTags = new Set(\n  Object.entries(formatMapping)\n    .filter(([, value]) => value === 'normal')\n    .map(([key]) => key)\n);\n\ntype FormatType = keyof typeof formatMapping;\ntype Format = (typeof formatMapping)[FormatType];\n\nconst getTextCommand = (num: number, osx: boolean) => {\n  return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nexport const getTextFormats = (\n  t: TranslationFunction<TranslationPack>,\n  osx: boolean = false\n): { id: Format; text: string; subText: string; type: FormatType }[] => {\n  return [\n    {\n      id: 'normal',\n      text: t('rte_heading_style_normal'),\n      subText: getTextCommand(0, osx),\n      type: 'p'\n    },\n    {\n      id: 'heading-1',\n      text: t('rte_heading_style_heading_1'),\n      subText: getTextCommand(1, osx),\n      type: 'h1'\n    },\n    {\n      id: 'heading-2',\n      text: t('rte_heading_style_heading_2'),\n      subText: getTextCommand(2, osx),\n      type: 'h2'\n    },\n    {\n      id: 'heading-3',\n      text: t('rte_heading_style_heading_3'),\n      subText: getTextCommand(3, osx),\n      type: 'h3'\n    },\n    {\n      id: 'heading-4',\n      text: t('rte_heading_style_heading_4'),\n      subText: getTextCommand(4, osx),\n      type: 'h4'\n    }\n  ];\n};\n\nconst TextSelect: FC<{ osx: boolean; editor: Editor }> = ({ osx, editor, ...restProps }) => {\n  const t = useI18n();\n  const [open, setOpen] = useState(false);\n  const selecting = useRef(false);\n  const openedByClick = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef(null);\n  const menuRef = useRef(null);\n\n  const textFormats = useMemo(() => {\n    return getTextFormats(t, osx);\n  }, [t, osx]);\n\n  useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n    setOpen(false);\n  });\n\n  const onTextSelect = (type: FormatType, e: MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    editor.execCommand('FormatBlock', false, type);\n    if (!openedByClick.current) {\n      buttonRef.current?.focus();\n    }\n    setOpen(false);\n    selecting.current = true;\n    setTimeout(() => {\n      if (!editor.hasFocus() && openedByClick.current) {\n        editor.focus();\n      }\n    }, 0);\n  };\n\n  const getParentTextFormat = (el: Element | Node): FormatType | undefined => {\n    const elTagName = el.nodeName.toLowerCase() as FormatType;\n    if (formatMapping[elTagName]) {\n      return elTagName;\n    }\n    if (el.parentNode) {\n      return getParentTextFormat(el.parentNode);\n    }\n    return undefined;\n  };\n\n  const activeFormat = (): FormatType | undefined => {\n    const tag = editor.hasFocus()\n      ? getParentTextFormat(editor.selection.getNode())\n      : (editor.contentDocument?.body?.firstChild?.nodeName.toLowerCase() as\n          | FormatType\n          | undefined);\n\n    if (tag && normalTags.has(tag)) {\n      return 'p';\n    }\n\n    return tag;\n  };\n\n  const formatText = (() => {\n    const activeFormatType = activeFormat();\n\n    const unknown = t('rte_heading_style_unknown');\n\n    if (!activeFormatType) return unknown;\n\n    const format = formatMapping[activeFormatType];\n\n    if (!format) return unknown;\n\n    return textFormats.find(({ id }) => id === format)?.text ?? unknown;\n  })();\n\n  return (\n    <>\n      <StyledTextSelect\n        {...restProps}\n        variant='simple'\n        type='button'\n        icon={false}\n        ref={buttonRef}\n        onMouseDown={(e: MouseEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n          setOpen(true);\n          openedByClick.current = true;\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Enter' && !selecting.current) {\n            e.preventDefault();\n            setOpen(true);\n            openedByClick.current = false;\n          } else if (e.key === 'Enter') {\n            e.preventDefault();\n            selecting.current = false;\n          } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n            setOpen(false);\n          }\n        }}\n        onFocus={(e: FocusEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onClick={(e: MouseEvent) => e.stopPropagation()}\n        aria-expanded={open}\n        aria-label={`${t('rte_text_formatting_toolbar')}. ${t(\n          'rte_heading_style'\n        )}. ${formatText} ${t('selected').toLocaleLowerCase()}`}\n        aria-haspopup\n      >\n        <span>{formatText}</span>\n        <Icon name='arrow-micro-down' />\n      </StyledTextSelect>\n      {buttonRef.current && (\n        <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n          {t('rte_heading_style')}\n        </Tooltip>\n      )}\n      <Popover\n        show={open}\n        as={StyledSelectMenu}\n        target={buttonRef.current}\n        placement='bottom-start'\n        ref={popoverRef}\n      >\n        <Menu\n          items={textFormats.map(({ text, type, subText }) => ({\n            id: type,\n            primary: text,\n            secondary: [subText],\n            selected: type === activeFormat()\n          }))}\n          focusControlEl={buttonRef.current ?? undefined}\n          mode='single-select'\n          ref={menuRef}\n          onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n        />\n      </Popover>\n    </>\n  );\n};\n\nexport default TextSelect;\n"]}

package/lib/components/Editor/Toolbar/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AActC,OAAO,KAAK,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAM3E,OAAO,KAAK,EAAa,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAwBnD,MAAM,WAAW,YAAa,SAAQ,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC/D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;;;;AAwRD,wBAAuD"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AActC,OAAO,KAAK,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAQ3E,OAAO,KAAK,EAAa,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAwBnD,MAAM,WAAW,YAAa,SAAQ,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC/D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;;;;AAwRD,wBAAuD"}

package/lib/components/Editor/Toolbar/Toolbar.js

@@ -3,6 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useEffect, useRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { Flex, Icon, useArrows, useI18n, defaultThemeProp, registerIcon, useOS, navigatorIsAvailable, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import * as listIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list.icon';
+import * as listNumberIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';
 import * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';
 import * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';
 import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
@@ -11,7 +13,7 @@ import ImageButton from './ImageButton';
 import TextSelect from './TextSelect';
 import AnchorButton from './AnchorButton';
 import { getToolbarTestIds } from './Toolbar.test-ids';
-registerIcon(indentIcon, unindentIcon);
+registerIcon(listIcon, listNumberIcon, indentIcon, unindentIcon);
 const StyledToolbar = styled.div(({ sticky, theme }) => {
     return css `
     background-color: ${theme.base.palette['primary-background']};
@@ -94,7 +96,7 @@ const Toolbar = ({ testId, features, sticky, editor, customActions, ...restProps
     const { macintosh: osx } = useOS();
     const toolbarRef = useRef(null);
     const testIds = useTestIds(testId, getToolbarTestIds);
-    useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });
+    useArrows(toolbarRef, { selector: 'button', dir: 'left-right', updateTabIndex: false });
     const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));
     const [activeStyles, setActiveStyles] = useState(() => ({
         bold: false,