@instructure/canvas-rce 6.0.0 → 7.2.0

package/es/rce/plugins/shared/ai_tools/aiicons.js

@@ -20,10 +20,10 @@
 import { IconCopyLine, IconRefreshLine } from '@instructure/ui-icons/es/svg';
 const AIWandSVG = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <mask id="mask0_5548_26552" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
-<path d="M8.48511 5.85958C8.34447 5.71049 8.11666 5.71049 7.97603 5.85958L6.54795 7.3735C6.40731 7.52256 6.40731 7.76409 6.54795 7.91315L8.75896 10.2571L8.75968 10.2582L8.76075 10.259L15.9574 17.8882C16.0277 17.9627 16.1198 18 16.2119 18C16.304 18 16.3961 17.9627 16.4664 17.8882L17.8945 16.3743C18.0352 16.2252 18.0352 15.9837 17.8945 15.8346L8.48511 5.85958ZM8.23057 6.66907L9.93327 8.47413L9.01436 9.44848L7.31157 7.64331L8.23057 6.66907ZM16.2119 17.0787L9.52344 9.98813L10.4423 9.01378L17.1309 16.1044L16.2119 17.0787Z" fill="#2D3B45"/>
-<path d="M6.9677 4.52528C6.98177 4.52716 6.99581 4.52789 7.00988 4.52789C7.13082 4.52789 7.24473 4.46343 7.3119 4.35423L7.89726 3.3986L8.97165 3.3688C9.10875 3.3647 9.23182 3.27899 9.28912 3.14703C9.34641 3.01511 9.32815 2.86005 9.242 2.74714L8.56629 1.86119L8.8711 0.769191C8.91013 0.629809 8.87074 0.479228 8.77021 0.380468C8.66999 0.281678 8.52444 0.251498 8.39683 0.304431L7.39345 0.712163L6.50783 0.0674013C6.395 -0.0153617 6.24769 -0.0224389 6.12816 0.0491233C6.00862 0.119925 5.93726 0.256733 5.94426 0.401699L6.00018 1.53956L5.14798 2.23316C5.03898 2.32151 4.98731 2.46759 5.01402 2.61033C5.04075 2.75272 5.1413 2.86675 5.27383 2.90442L6.31166 3.19959L6.67062 4.27372C6.71633 4.4105 6.83164 4.50815 6.9677 4.52528ZM6.16471 2.36772L6.58872 2.0226C6.68292 1.94618 6.73531 1.82543 6.72932 1.7002L6.70157 1.13443L7.14172 1.45495C7.23946 1.52614 7.36393 1.54216 7.47466 1.49672L7.97354 1.29396L7.822 1.83698C7.78827 1.95773 7.81287 2.08781 7.88741 2.18546L8.2235 2.62601L7.68912 2.64089C7.57063 2.64425 7.46131 2.70912 7.39662 2.81458L7.10552 3.28978L6.92693 2.75571C6.88753 2.63718 6.79542 2.54699 6.68083 2.51455L6.16471 2.36772Z" fill="#2D3B45"/>
-<path d="M5.00785 9.67232L5.31265 8.58029C5.35166 8.4409 5.31229 8.29032 5.21174 8.19156C5.11119 8.0928 4.96636 8.06262 4.83838 8.11553L3.83536 8.52329L2.94939 7.8785C2.83617 7.79614 2.68853 7.78904 2.56968 7.86025C2.45015 7.93105 2.37878 8.06783 2.38582 8.21282L2.44171 9.35068L1.5895 10.0443C1.48054 10.1326 1.42884 10.2787 1.45557 10.4215C1.48227 10.5638 1.58283 10.6779 1.71538 10.7155L2.75358 11.0107L3.11251 12.0845C3.15822 12.2212 3.27353 12.3189 3.40959 12.336C3.42366 12.3379 3.43773 12.3386 3.45179 12.3386C3.57273 12.3386 3.68664 12.2742 3.75379 12.1649L4.33915 11.2097L5.41354 11.1799C5.55067 11.1758 5.6737 11.0901 5.731 10.9582C5.78833 10.8262 5.77004 10.6712 5.68391 10.5582L5.00785 9.67232ZM4.13101 10.452C4.01255 10.4554 3.90319 10.5202 3.8385 10.6257L3.54741 11.1009L3.36881 10.5668C3.32945 10.4483 3.23734 10.3581 3.12271 10.3257L2.6066 10.1788L3.03024 9.83369C3.12448 9.7573 3.17687 9.63655 3.17088 9.51133L3.1431 8.94517L3.58363 9.26608C3.68137 9.33764 3.80581 9.35329 3.91655 9.30781L4.41509 9.10506L4.26356 9.6481C4.22982 9.76886 4.25443 9.89894 4.32894 9.99659L4.66541 10.4371L4.13101 10.452Z" fill="#2D3B45"/>
-<path d="M1.96063 6.47752C1.97467 6.47936 1.98874 6.48012 2.00281 6.48012C2.12375 6.48012 2.23765 6.41563 2.3048 6.30643L2.89016 5.35083L3.96458 5.321C4.10168 5.3169 4.22472 5.23119 4.28204 5.09923C4.33934 4.96731 4.32105 4.81225 4.23492 4.69934L3.55922 3.81343L3.86402 2.72139C3.90303 2.58201 3.86366 2.43143 3.76311 2.33267C3.66292 2.23391 3.51701 2.2037 3.38975 2.25663L2.38637 2.66437L1.50076 2.0196C1.38754 1.93687 1.24095 1.92976 1.12106 2.00133C1.00152 2.07216 0.930156 2.20894 0.937191 2.3539L0.993081 3.49176L0.140875 4.18536C0.0319077 4.27371 -0.0197896 4.41982 0.00694182 4.56256C0.0336457 4.70493 0.134199 4.81898 0.266753 4.85662L1.30459 5.15179L1.66355 6.22592C1.70923 6.3627 1.82457 6.46035 1.96063 6.47752ZM1.15764 4.31992L1.58161 3.9748C1.67585 3.89838 1.72824 3.77763 1.72225 3.6524L1.69447 3.08666L2.13464 3.40718C2.23274 3.47872 2.35718 3.49439 2.46759 3.44892L2.96646 3.24616L2.81493 3.78918C2.78119 3.90996 2.8058 4.04001 2.88031 4.13766L3.21643 4.57821L2.68204 4.59312C2.56356 4.59646 2.45421 4.66132 2.38954 4.76678L2.09842 5.24198L1.91983 4.70791C1.88046 4.58938 1.78835 4.49919 1.67373 4.46676L1.15764 4.31992Z" fill="#2D3B45"/>
+<path d="M8.48511 5.85958C8.34447 5.71049 8.11666 5.71049 7.97603 5.85958L6.54795 7.3735C6.40731 7.52256 6.40731 7.76409 6.54795 7.91315L8.75896 10.2571L8.75968 10.2582L8.76075 10.259L15.9574 17.8882C16.0277 17.9627 16.1198 18 16.2119 18C16.304 18 16.3961 17.9627 16.4664 17.8882L17.8945 16.3743C18.0352 16.2252 18.0352 15.9837 17.8945 15.8346L8.48511 5.85958ZM8.23057 6.66907L9.93327 8.47413L9.01436 9.44848L7.31157 7.64331L8.23057 6.66907ZM16.2119 17.0787L9.52344 9.98813L10.4423 9.01378L17.1309 16.1044L16.2119 17.0787Z" fill="#273540"/>
+<path d="M6.9677 4.52528C6.98177 4.52716 6.99581 4.52789 7.00988 4.52789C7.13082 4.52789 7.24473 4.46343 7.3119 4.35423L7.89726 3.3986L8.97165 3.3688C9.10875 3.3647 9.23182 3.27899 9.28912 3.14703C9.34641 3.01511 9.32815 2.86005 9.242 2.74714L8.56629 1.86119L8.8711 0.769191C8.91013 0.629809 8.87074 0.479228 8.77021 0.380468C8.66999 0.281678 8.52444 0.251498 8.39683 0.304431L7.39345 0.712163L6.50783 0.0674013C6.395 -0.0153617 6.24769 -0.0224389 6.12816 0.0491233C6.00862 0.119925 5.93726 0.256733 5.94426 0.401699L6.00018 1.53956L5.14798 2.23316C5.03898 2.32151 4.98731 2.46759 5.01402 2.61033C5.04075 2.75272 5.1413 2.86675 5.27383 2.90442L6.31166 3.19959L6.67062 4.27372C6.71633 4.4105 6.83164 4.50815 6.9677 4.52528ZM6.16471 2.36772L6.58872 2.0226C6.68292 1.94618 6.73531 1.82543 6.72932 1.7002L6.70157 1.13443L7.14172 1.45495C7.23946 1.52614 7.36393 1.54216 7.47466 1.49672L7.97354 1.29396L7.822 1.83698C7.78827 1.95773 7.81287 2.08781 7.88741 2.18546L8.2235 2.62601L7.68912 2.64089C7.57063 2.64425 7.46131 2.70912 7.39662 2.81458L7.10552 3.28978L6.92693 2.75571C6.88753 2.63718 6.79542 2.54699 6.68083 2.51455L6.16471 2.36772Z" fill="#273540"/>
+<path d="M5.00785 9.67232L5.31265 8.58029C5.35166 8.4409 5.31229 8.29032 5.21174 8.19156C5.11119 8.0928 4.96636 8.06262 4.83838 8.11553L3.83536 8.52329L2.94939 7.8785C2.83617 7.79614 2.68853 7.78904 2.56968 7.86025C2.45015 7.93105 2.37878 8.06783 2.38582 8.21282L2.44171 9.35068L1.5895 10.0443C1.48054 10.1326 1.42884 10.2787 1.45557 10.4215C1.48227 10.5638 1.58283 10.6779 1.71538 10.7155L2.75358 11.0107L3.11251 12.0845C3.15822 12.2212 3.27353 12.3189 3.40959 12.336C3.42366 12.3379 3.43773 12.3386 3.45179 12.3386C3.57273 12.3386 3.68664 12.2742 3.75379 12.1649L4.33915 11.2097L5.41354 11.1799C5.55067 11.1758 5.6737 11.0901 5.731 10.9582C5.78833 10.8262 5.77004 10.6712 5.68391 10.5582L5.00785 9.67232ZM4.13101 10.452C4.01255 10.4554 3.90319 10.5202 3.8385 10.6257L3.54741 11.1009L3.36881 10.5668C3.32945 10.4483 3.23734 10.3581 3.12271 10.3257L2.6066 10.1788L3.03024 9.83369C3.12448 9.7573 3.17687 9.63655 3.17088 9.51133L3.1431 8.94517L3.58363 9.26608C3.68137 9.33764 3.80581 9.35329 3.91655 9.30781L4.41509 9.10506L4.26356 9.6481C4.22982 9.76886 4.25443 9.89894 4.32894 9.99659L4.66541 10.4371L4.13101 10.452Z" fill="#273540"/>
+<path d="M1.96063 6.47752C1.97467 6.47936 1.98874 6.48012 2.00281 6.48012C2.12375 6.48012 2.23765 6.41563 2.3048 6.30643L2.89016 5.35083L3.96458 5.321C4.10168 5.3169 4.22472 5.23119 4.28204 5.09923C4.33934 4.96731 4.32105 4.81225 4.23492 4.69934L3.55922 3.81343L3.86402 2.72139C3.90303 2.58201 3.86366 2.43143 3.76311 2.33267C3.66292 2.23391 3.51701 2.2037 3.38975 2.25663L2.38637 2.66437L1.50076 2.0196C1.38754 1.93687 1.24095 1.92976 1.12106 2.00133C1.00152 2.07216 0.930156 2.20894 0.937191 2.3539L0.993081 3.49176L0.140875 4.18536C0.0319077 4.27371 -0.0197896 4.41982 0.00694182 4.56256C0.0336457 4.70493 0.134199 4.81898 0.266753 4.85662L1.30459 5.15179L1.66355 6.22592C1.70923 6.3627 1.82457 6.46035 1.96063 6.47752ZM1.15764 4.31992L1.58161 3.9748C1.67585 3.89838 1.72824 3.77763 1.72225 3.6524L1.69447 3.08666L2.13464 3.40718C2.23274 3.47872 2.35718 3.49439 2.46759 3.44892L2.96646 3.24616L2.81493 3.78918C2.78119 3.90996 2.8058 4.04001 2.88031 4.13766L3.21643 4.57821L2.68204 4.59312C2.56356 4.59646 2.45421 4.66132 2.38954 4.76678L2.09842 5.24198L1.91983 4.70791C1.88046 4.58938 1.78835 4.49919 1.67373 4.46676L1.15764 4.31992Z" fill="#273540"/>
 </mask>
 <g mask="url(#mask0_5548_26552)">
 <rect width="18" height="18" fill="currentColor"/>
@@ -31,17 +31,17 @@ const AIWandSVG = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" x
 </svg>
 `;
 const InsertSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-  <path d="M16.9455 16.9451H12.375V18H18V12.375H16.9455V16.9451Z" fill="#2D3B45"/>
-  <path d="M1.05487 1.0545H5.625V0H0V5.625H1.0545L1.05487 1.0545Z" fill="#2D3B45"/>
-  <path d="M12.375 0V1.0545H16.9455V5.625H18V0H12.375Z" fill="#2D3B45"/>
-  <path d="M1.05487 12.375H0V18H5.625V16.9451H1.05487V12.375Z" fill="#2D3B45"/>
-  <path d="M3.59082 14.4093H14.4099V3.59058H3.59082V14.4093ZM4.64532 4.64508H13.3551V13.3548H4.64532V4.64508Z" fill="#2D3B45"/>
-  <path d="M9.52752 6.92065H8.47302V8.47278H6.9209V9.52728H8.47302V11.0794H9.52752V9.52728H11.0796V8.47278H9.52752V6.92065Z" fill="#2D3B45"/>
+  <path d="M16.9455 16.9451H12.375V18H18V12.375H16.9455V16.9451Z" fill="#273540"/>
+  <path d="M1.05487 1.0545H5.625V0H0V5.625H1.0545L1.05487 1.0545Z" fill="#273540"/>
+  <path d="M12.375 0V1.0545H16.9455V5.625H18V0H12.375Z" fill="#273540"/>
+  <path d="M1.05487 12.375H0V18H5.625V16.9451H1.05487V12.375Z" fill="#273540"/>
+  <path d="M3.59082 14.4093H14.4099V3.59058H3.59082V14.4093ZM4.64532 4.64508H13.3551V13.3548H4.64532V4.64508Z" fill="#273540"/>
+  <path d="M9.52752 6.92065H8.47302V8.47278H6.9209V9.52728H8.47302V11.0794H9.52752V9.52728H11.0796V8.47278H9.52752V6.92065Z" fill="#273540"/>
 </svg>`;
 const CopySVG = IconCopyLine?.src;
 const RefreshSVG = IconRefreshLine?.src;
 const DislikeSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.17647 7.41176L3.2353 7.41176L3.2353 6.35294C2.65189 6.35294 2.17647 5.87859 2.17647 5.29411C2.17647 4.70964 2.65189 4.23529 3.2353 4.23529L4.29412 4.23529L4.29412 3.17647C3.71071 3.17647 3.2353 2.70211 3.2353 2.11764C3.2353 1.53317 3.71071 1.05882 4.29412 1.05882L13.2941 1.05882C14.7532 1.05882 15.9412 2.24576 15.9412 3.70588L15.9412 9.52941L14.9417 9.52941C13.6277 9.52941 12.3698 10.0694 11.4888 11.0086C10.2267 12.3554 8.738 14.4445 8.54953 16.9412L8.20859 16.9412C7.7353 16.9412 7.28953 16.7315 6.98671 16.3652C6.68071 15.9946 6.55683 15.5107 6.64788 15.0385C6.86071 13.9267 7.21224 12.8255 7.69083 11.7656C7.91424 11.2733 7.87188 10.71 7.58071 10.2568C7.28635 9.80153 6.78659 9.52941 6.24341 9.52941L2.17647 9.52941C1.59306 9.52941 1.11765 9.05506 1.11765 8.47059C1.11765 7.88611 1.59306 7.41176 2.17647 7.41176ZM0.0588235 8.47059C0.0588234 9.63847 1.00859 10.5882 2.17647 10.5882L6.24341 10.5882C6.42765 10.5882 6.59071 10.6761 6.69024 10.8307C6.78765 10.9821 6.80141 11.1642 6.72624 11.3294C6.21377 12.4645 5.83682 13.6461 5.60706 14.8405C5.45776 15.624 5.66212 16.4255 6.17035 17.0396C6.67541 17.6495 7.41871 18 8.20859 18L9.58824 18L9.58824 17.4706C9.58824 15.0851 11.042 13.0341 12.2607 11.7328C12.9426 11.0065 13.9199 10.5882 14.9416 10.5882L17 10.5882L17 3.70588C17 1.66235 15.3376 -1.45327e-07 13.2941 -3.23979e-07L4.29412 -1.11078e-06C3.12624 -1.21288e-06 2.17647 0.949763 2.17647 2.11765C2.17647 2.55282 2.30882 2.95835 2.53435 3.29506C1.71059 3.58518 1.11765 4.37188 1.11765 5.29412C1.11765 5.72929 1.25 6.13482 1.47553 6.47153C0.651767 6.76164 0.0588235 7.54835 0.0588235 8.47059Z" fill="#2D3B45"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.17647 7.41176L3.2353 7.41176L3.2353 6.35294C2.65189 6.35294 2.17647 5.87859 2.17647 5.29411C2.17647 4.70964 2.65189 4.23529 3.2353 4.23529L4.29412 4.23529L4.29412 3.17647C3.71071 3.17647 3.2353 2.70211 3.2353 2.11764C3.2353 1.53317 3.71071 1.05882 4.29412 1.05882L13.2941 1.05882C14.7532 1.05882 15.9412 2.24576 15.9412 3.70588L15.9412 9.52941L14.9417 9.52941C13.6277 9.52941 12.3698 10.0694 11.4888 11.0086C10.2267 12.3554 8.738 14.4445 8.54953 16.9412L8.20859 16.9412C7.7353 16.9412 7.28953 16.7315 6.98671 16.3652C6.68071 15.9946 6.55683 15.5107 6.64788 15.0385C6.86071 13.9267 7.21224 12.8255 7.69083 11.7656C7.91424 11.2733 7.87188 10.71 7.58071 10.2568C7.28635 9.80153 6.78659 9.52941 6.24341 9.52941L2.17647 9.52941C1.59306 9.52941 1.11765 9.05506 1.11765 8.47059C1.11765 7.88611 1.59306 7.41176 2.17647 7.41176ZM0.0588235 8.47059C0.0588234 9.63847 1.00859 10.5882 2.17647 10.5882L6.24341 10.5882C6.42765 10.5882 6.59071 10.6761 6.69024 10.8307C6.78765 10.9821 6.80141 11.1642 6.72624 11.3294C6.21377 12.4645 5.83682 13.6461 5.60706 14.8405C5.45776 15.624 5.66212 16.4255 6.17035 17.0396C6.67541 17.6495 7.41871 18 8.20859 18L9.58824 18L9.58824 17.4706C9.58824 15.0851 11.042 13.0341 12.2607 11.7328C12.9426 11.0065 13.9199 10.5882 14.9416 10.5882L17 10.5882L17 3.70588C17 1.66235 15.3376 -1.45327e-07 13.2941 -3.23979e-07L4.29412 -1.11078e-06C3.12624 -1.21288e-06 2.17647 0.949763 2.17647 2.11765C2.17647 2.55282 2.30882 2.95835 2.53435 3.29506C1.71059 3.58518 1.11765 4.37188 1.11765 5.29412C1.11765 5.72929 1.25 6.13482 1.47553 6.47153C0.651767 6.76164 0.0588235 7.54835 0.0588235 8.47059Z" fill="#273540"/>
 </svg>`;
 const AIAvatarSVG = `
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

package/es/rce/plugins/shared/fileTypeUtils.js

@@ -83,7 +83,7 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   if (typeof content_type !== 'string') throw new Error('Invalid content type');
   const type = content_type.replace(/\/.*$/, '');
   const baseOrigin = canvasOrigin !== null && canvasOrigin !== void 0 ? canvasOrigin : window.location.origin;
-  if (RCEGlobals.getFeatures()?.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
+  if (isAudioOrVideo(content_type) && file.id) {
     const url = new URL(`/media_attachments_iframe/${file.id}`, baseOrigin);
     url.searchParams.set('type', type);
     url.searchParams.set('embedded', 'true');

package/es/rce/plugins/tinymce-a11y-checker/components/checker.js

@@ -115,6 +115,9 @@ export default class Checker extends React.Component {
       errors: [],
       errorIndex: 0
     }, () => {
+      window.webkit?.messageHandlers?.modalPresentation?.postMessage?.({
+        open: true
+      });
       if (typeof this.state.config.beforeCheck === 'function') {
         this.state.config.beforeCheck(this.props.editor, () => {
           this._check(() => {
@@ -292,7 +295,10 @@ export default class Checker extends React.Component {
     this.setState({
       open: false
     }, () => {
-      this.props.onClose();
+      this.props?.onClose();
+      window.webkit?.messageHandlers?.modalPresentation?.postMessage?.({
+        open: false
+      });
     });
   }
   render() {

package/es/rce/plugins/tinymce-a11y-checker/plugin.js

@@ -27,60 +27,58 @@ const pendingInstanceCallbacks = [];
 const container = document.createElement('div');
 container.className = 'tinymce-a11y-checker-container';
 document.body.appendChild(container);
-tinymce.create('tinymce.plugins.AccessibilityChecker', {
-  init(ed) {
-    ed.addCommand('openAccessibilityChecker', function (ui, {
-      done,
-      config,
-      additionalRules,
-      mountNode,
-      triggerElementId,
-      onFixError
-    }) {
-      if (!isCheckerOpen) {
-        ReactDOM.render(/*#__PURE__*/React.createElement(Checker, {
-          getBody: ed.getBody.bind(ed),
-          editor: ed,
-          additionalRules: additionalRules,
-          mountNode: mountNode,
-          onClose: () => {
-            isCheckerOpen = false;
-            if (triggerElementId) {
-              const button = document.querySelectorAll(`[data-btn-id=${triggerElementId}]`);
-              button[0]?.focus();
-            }
-          },
-          onFixError: onFixError
-        }), container, function () {
-          // this is a workaround for react 16 since ReactDOM.render is not
-          // guaranteed to return the instance synchronously (especially if called
-          // within another component's lifecycle method eg: componentDidMount). see:
-          // https://github.com/facebook/react/issues/10309#issuecomment-318434635
-          instance = this;
-          if (config) getInstance(instance => instance.setConfig(config));
-          pendingInstanceCallbacks.forEach(cb => cb(instance));
-          instance.check(done);
-        });
-        isCheckerOpen = true;
-      }
-    });
-    ed.addCommand('checkAccessibility', function (ui, {
-      done,
-      config,
-      additionalRules
-    }) {
-      checkNode(ed.getBody(), done, config, additionalRules);
-    });
-    ed.ui.registry.addButton('check_a11y', {
-      title: formatMessage('Check Accessibility'),
-      onAction: _ => ed.execCommand('openAccessibilityChecker'),
-      icon: 'a11y'
-    });
-  }
-});
+const AccessibilityChecker = function (ed) {
+  ed.addCommand('openAccessibilityChecker', function (ui, {
+    done,
+    config,
+    additionalRules,
+    mountNode,
+    triggerElementId,
+    onFixError
+  }) {
+    if (!isCheckerOpen) {
+      ReactDOM.render(/*#__PURE__*/React.createElement(Checker, {
+        getBody: ed.getBody.bind(ed),
+        editor: ed,
+        additionalRules: additionalRules,
+        mountNode: mountNode,
+        onClose: () => {
+          isCheckerOpen = false;
+          if (triggerElementId) {
+            const button = document.querySelectorAll(`[data-btn-id=${triggerElementId}]`);
+            button[0]?.focus();
+          }
+        },
+        onFixError: onFixError
+      }), container, function () {
+        // this is a workaround for react 16 since ReactDOM.render is not
+        // guaranteed to return the instance synchronously (especially if called
+        // within another component's lifecycle method eg: componentDidMount). see:
+        // https://github.com/facebook/react/issues/10309#issuecomment-318434635
+        instance = this;
+        if (config) getInstance(instance => instance.setConfig(config));
+        pendingInstanceCallbacks.forEach(cb => cb(instance));
+        instance.check(done);
+      });
+      isCheckerOpen = true;
+    }
+  });
+  ed.addCommand('checkAccessibility', function (ui, {
+    done,
+    config,
+    additionalRules
+  }) {
+    checkNode(ed.getBody(), done, config, additionalRules);
+  });
+  ed.ui.registry.addButton('check_a11y', {
+    title: formatMessage('Check Accessibility'),
+    onAction: _ => ed.execCommand('openAccessibilityChecker'),
+    icon: 'a11y'
+  });
+};
 
 // Register plugin
-tinymce.PluginManager.add('a11y_checker', tinymce.plugins.AccessibilityChecker);
+tinymce.PluginManager.add('a11y_checker', AccessibilityChecker);
 export function getInstance(cb) {
   if (instance != null) {
     return cb(instance);

package/es/rce/plugins/tinymce-a11y-checker/utils/indicate.d.ts

@@ -3,5 +3,5 @@ export function buildDepthSelector(elem: any): string;
 export function findChildDepth(parent: any, target: any): number;
 export function ensureA11yCheckerStyleElement(doc: any): any;
 export default function indicate(elem: any): void;
-export const INDICATOR_STYLE: "\noutline:2px solid #2D3B45;\noutline-offset:2px;\n";
+export const INDICATOR_STYLE: "\noutline:2px solid #273540;\noutline-offset:2px;\n";
 export const A11Y_CHECKER_STYLE_ELEM_ID: "a11y-checker-style";

package/es/rce/plugins/tinymce-a11y-checker/utils/indicate.js

@@ -20,7 +20,7 @@
 // These rules will be assigned to the selector we build below
 // that locates the violating element in the DOM
 export const INDICATOR_STYLE = `
-outline:2px solid #2D3B45;
+outline:2px solid #273540;
 outline-offset:2px;
 `;
 

package/es/rce/style.js

@@ -62,44 +62,44 @@ export default function buildStyle() {
       break;
     case 'canvas-a11y':
     case 'canvas-high-contrast':
-      themeCanvasButtonBackground = variables.colors.backgroundLight;
-      themeCanvasSecondaryButtonBorderColor = variables.colors.borderMedium;
+      themeCanvasButtonBackground = variables.colors.contrasts.grey1111;
+      themeCanvasSecondaryButtonBorderColor = variables.colors.contrasts.grey1214;
       themeCanvasLinkDecoration = 'underline';
-      themeCanvasFocusBorderColor = variables.colors.borderBrand;
+      themeCanvasFocusBorderColor = variables.colors.contrasts.blue4570;
       themeCanvasFocusBoxShadow = `0 0 0 2px ${variables.colors.brand}`;
       themeCanvasBrandColor = variables.colors.brand;
       break;
     default:
       themeCanvasLinkColor = variables.colors.link;
       themeCanvasLinkDecoration = 'none';
-      themeCanvasTextColor = variables.colors.textDarkest;
+      themeCanvasTextColor = variables.colors.contrasts.grey125125;
       themeCanvasBrandColor = variables.colors.brand;
       themeCanvasFocusBorderColor = variables.borders.brand;
       themeCanvasFocusBoxShadow = `0 0 0 2px ${variables.colors.brand}`;
       themeCanvasEnabledColor = variables.borders.brand;
-      themeCanvasPrimaryButtonBackground = variables.colors.backgroundBrand;
-      themeCanvasPrimaryButtonColor = variables.colors.textLightest;
-      themeCanvasPrimaryButtonHoverBackground = darken(variables.colors.backgroundBrand, 10);
-      themeActiveMenuItemBackground = variables.colors.backgroundBrand;
-      themeActiveMenuItemLabelColor = variables.colors.textLightest;
+      themeCanvasPrimaryButtonBackground = variables.colors.contrasts.blue4570;
+      themeCanvasPrimaryButtonColor = variables.colors.contrasts.white1010;
+      themeCanvasPrimaryButtonHoverBackground = darken(variables.colors.contrasts.blue4570, 10);
+      themeActiveMenuItemBackground = variables.colors.contrasts.blue4570;
+      themeActiveMenuItemLabelColor = variables.colors.contrasts.white1010;
       themeTableSelectorHighlightColor = alpha(lighten(variables.colors.brand, 10), 50);
-      themeCanvasButtonBackground = variables.colors.backgroundLightest;
-      themeCanvasSecondaryButtonBorderColor = darken(variables.colors.backgroundLight, 10);
+      themeCanvasButtonBackground = variables.colors.contrasts.white1010;
+      themeCanvasSecondaryButtonBorderColor = darken(variables.colors.contrasts.grey1111, 10);
       break;
   }
   const classNames = {
     root: 'canvas-rce__skins--root'
   };
-  const toolbarButtonHoverBackgroundConst = darken(variables.colors.backgroundLightest, 5);
+  const toolbarButtonHoverBackgroundConst = darken(variables.colors.contrasts.white1010, 5);
   const tinySplitButtonChevronHoverBackgroundConst = darken(toolbarButtonHoverBackgroundConst, 10);
   const theme = {
-    canvasBackgroundColor: variables.colors.white,
+    canvasBackgroundColor: variables.colors.primitives.white,
     canvasTextColor: themeCanvasTextColor,
-    canvasErrorColor: variables.colors.textDanger,
-    canvasWarningColor: variables.colors.textWarning,
-    canvasInfoColor: variables.colors.textInfo,
-    canvasSuccessColor: variables.colors.textSuccess,
-    canvasBorderColor: variables.colors.borderMedium,
+    canvasErrorColor: variables.colors.contrasts.red4570,
+    canvasWarningColor: variables.colors.contrasts.orange4570,
+    canvasInfoColor: variables.colors.contrasts.blue4570,
+    canvasSuccessColor: variables.colors.contrasts.green4570,
+    canvasBorderColor: variables.colors.contrasts.grey3045,
     toolbarButtonHoverBackground: toolbarButtonHoverBackgroundConst,
     // copied from INSTUI "light" Button
     tinySplitButtonChevronHoverBackground: tinySplitButtonChevronHoverBackgroundConst,
@@ -112,10 +112,10 @@ export default function buildStyle() {
     // the instui default button
     canvasButtonBackground: themeCanvasButtonBackground,
     canvasButtonBorderColor: 'transparent',
-    canvasButtonColor: variables.colors.textDarkest,
-    canvasButtonHoverBackground: variables.colors.backgroundLightest,
+    canvasButtonColor: variables.colors.contrasts.grey125125,
+    canvasButtonHoverBackground: variables.colors.contrasts.white1010,
     canvasButtonHoverColor: variables.colors.brand,
-    canvasButtonActiveBackground: variables.colors.backgroundLightest,
+    canvasButtonActiveBackground: variables.colors.contrasts.white1010,
     canvasButtonFontWeight: variables.typography.fontWeightNormal,
     canvasButtonFontSize: variables.typography.fontSizeMedium,
     canvasButtonLineHeight: variables.forms.inputHeightMedium,
@@ -125,19 +125,19 @@ export default function buildStyle() {
     canvasPrimaryButtonColor: themeCanvasPrimaryButtonColor,
     canvasPrimaryButtonBorderColor: 'transparent',
     canvasPrimaryButtonHoverBackground: themeCanvasPrimaryButtonHoverBackground,
-    canvasPrimaryButtonHoverColor: variables.colors.textLightest,
+    canvasPrimaryButtonHoverColor: variables.colors.contrasts.white1010,
     // the instui secondary button
-    canvasSecondaryButtonBackground: variables.colors.backgroundLight,
-    canvasSecondaryButtonColor: variables.colors.textDarkest,
+    canvasSecondaryButtonBackground: variables.colors.contrasts.grey1111,
+    canvasSecondaryButtonColor: variables.colors.contrasts.grey125125,
     canvasSecondaryButtonBorderColor: themeCanvasSecondaryButtonBorderColor,
-    canvasSecondaryButtonHoverBackground: darken(variables.colors.backgroundLight, 10),
-    canvasSecondaryButtonHoverColor: variables.colors.textDarkest,
+    canvasSecondaryButtonHoverBackground: darken(variables.colors.contrasts.grey1111, 10),
+    canvasSecondaryButtonHoverColor: variables.colors.contrasts.grey125125,
     canvasFocusBorderColor: themeCanvasFocusBorderColor,
     canvasFocusBorderWidth: variables.borders.widthSmall,
     // canvas really uses widthMedium
     canvasFocusBoxShadow: themeCanvasFocusBoxShadow,
     canvasEnabledColor: themeCanvasEnabledColor,
-    canvasEnabledBoxShadow: `inset 0 0 0.1875rem 0.0625rem ${darken(variables.colors.borderLightest, 25)}`,
+    canvasEnabledBoxShadow: `inset 0 0 0.1875rem 0.0625rem ${darken(variables.colors.contrasts.white1010, 25)}`,
     canvasFontFamily: variables.typography.fontFamily,
     canvasFontSize: '1rem',
     canvasFontSizeSmall: variables.typography.fontSizeSmall,
@@ -148,14 +148,14 @@ export default function buildStyle() {
     canvasModalHeadingFontWeight: variables.typography.fontWeightNormal,
     canvasModalBodyPadding: variables.spacing.medium,
     canvasModalFooterPadding: variables.spacing.small,
-    canvasModalFooterBackground: variables.colors.backgroundLight,
+    canvasModalFooterBackground: variables.colors.contrasts.grey1111,
     canvasFormElementMargin: `0 0 ${variables.spacing.medium} 0`,
-    canvasFormElementLabelColor: variables.colors.textDarkest,
+    canvasFormElementLabelColor: variables.colors.contrasts.grey125125,
     canvasFormElementLabelMargin: `0 0 ${variables.spacing.small} 0`,
     canvasFormElementLabelFontSize: variables.typography.fontSizeMedium,
     canvasFormElementLabelFontWeight: variables.typography.fontWeightBold,
     // a11y button badge
-    canvasBadgeBackgroundColor: variables.colors.textInfo
+    canvasBadgeBackgroundColor: variables.colors.contrasts.blue4570
   };
   const css = `
   .${classNames.root} {
@@ -282,7 +282,7 @@ export default function buildStyle() {
     color: ${theme.canvasButtonHoverColor};
   }
   .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
-    fill: rgba(45, 59, 69, 0.3);
+    fill: rgba(39, 53, 64, 0.3);
   }
   .tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
     fill: ${theme.canvasTextColor};
@@ -298,7 +298,7 @@ export default function buildStyle() {
   }
   .tox .tox-collection__group-heading {
     background-color: #e3e6e8;
-    color: rgba(45, 59, 69, 0.6);
+    color: rgba(39, 53, 64, 0.6);
   }
   .tox .tox-collection__item {
     color: ${theme.canvasTextColor};
@@ -339,7 +339,7 @@ export default function buildStyle() {
     margin-right: 8px;
   }
   .tox .tox-collection__item-accessory {
-    color: rgba(45, 59, 69, 0.6);
+    color: rgba(39, 53, 64, 0.6);
   }
   .tox .tox-sv-palette {
     border: 1px solid black;
@@ -365,19 +365,19 @@ export default function buildStyle() {
   .tox .tox-comment {
     background: ${theme.canvasBackgroundColor};
     border-color: ${theme.canvasBorderColor};
-    box-shadow: 0 4px 8px 0 rgba(45, 59, 69, 0.1);
+    box-shadow: 0 4px 8px 0 rgba(39, 53, 64, 0.1);
   }
   .tox .tox-comment__header {
     color: ${theme.canvasTextColor};
   }
   .tox .tox-comment__date {
-    color: rgba(45, 59, 69, 0.6);
+    color: rgba(39, 53, 64, 0.6);
   }
   .tox .tox-comment__body {
     color: ${theme.canvasTextColor};
   }
   .tox .tox-comment__expander p {
-    color: rgba(45, 59, 69, 0.6);
+    color: rgba(39, 53, 64, 0.6);
   }
   .tox .tox-comment-thread__overlay::after {
     background: ${theme.canvasBackgroundColor};
@@ -396,10 +396,10 @@ export default function buildStyle() {
     background-color: ${theme.canvasBackgroundColor};
   }
   .tox .tox-user__avatar svg {
-    fill: rgba(45, 59, 69, 0.6);
+    fill: rgba(39, 53, 64, 0.6);
   }
   .tox .tox-user__name {
-    color: rgba(45, 59, 69, 0.6);
+    color: rgba(39, 53, 64, 0.6);
   }
   .tox .tox-dialog-wrap__backdrop {
     background-color: rgba(255, 255, 255, 0.75);
@@ -426,7 +426,7 @@ export default function buildStyle() {
     padding: ${theme.canvasModalBodyPadding};
   }
   .tox .tox-dialog__body-nav-item {
-    color: rgba(45, 59, 69, 0.75);
+    color: rgba(39, 53, 64, 0.75);
   }
   .tox .tox-dialog__body-nav-item:focus {
     box-shadow: ${theme.canvasFocusBoxShadow};
@@ -449,10 +449,10 @@ export default function buildStyle() {
     border: 2px dashed ${theme.canvasBorderColor};
   }
   .tox .tox-dropzone p {
-    color: rgba(45, 59, 69, 0.6);
+    color: rgba(39, 53, 64, 0.6);
   }
   .tox .tox-edit-area {
-    border: 1px solid ${theme.canvasBorderColor};
+    border: 1px solid rgba(122, 122, 122);
     border-radius: 3px;
   }
   .tox .tox-edit-area__iframe {
@@ -478,14 +478,14 @@ export default function buildStyle() {
     fill: ${theme.canvasSuccessColor};
   }
   .tox .tox-color-input span {
-    border-color: rgba(45, 59, 69, 0.2);
+    border-color: rgba(39, 53, 64, 0.2);
   }
   .tox .tox-color-input span:focus {
     border-color: ${theme.canvasBrandColor};
   }
   .tox .tox-label,
   .tox .tox-toolbar-label {
-    color: rgba(45, 59, 69, 0.6);
+    color: rgba(39, 53, 64, 0.6);
   }
   .tox .tox-form__group {
     margin: ${theme.canvasFormElementMargin};
@@ -543,6 +543,7 @@ export default function buildStyle() {
   }
   .tox .tox-menubar {
     background-color: ${theme.canvasBackgroundColor};
+    font-family: ${theme.canvasFontFamily};
   }
   .tox .tox-mbtn {
     color: ${theme.canvasButtonColor};
@@ -613,7 +614,7 @@ export default function buildStyle() {
     background-color: ${theme.canvasBrandColor};
   }
   .tox .tox-spinner > div {
-    background-color: rgba(45, 59, 69, 0.6);
+    background-color: rgba(39, 53, 64, 0.6);
   }
   .tox .tox-tbtn {
     border-style: none;
@@ -697,7 +698,7 @@ export default function buildStyle() {
   }
   .tox .tox-tooltip__body {
     background-color: ${theme.canvasTextColor};
-    box-shadow: 0 2px 4px rgba(45, 59, 69, 0.3);
+    box-shadow: 0 2px 4px rgba(39, 53, 64, 0.3);
     color: rgba(255, 255, 255, 0.75);
   }
   .tox .tox-tooltip--down .tox-tooltip__arrow {
@@ -728,6 +729,7 @@ export default function buildStyle() {
   .tox-editor-container .tox-toolbar-overlord {
     background-image: none;
     margin-bottom: 5px;
+    font-family: ${theme.canvasFontFamily};
   }
   .tox-editor-container .tox-toolbar__primary {
     background-image: none;

package/es/rcs/api.d.ts

@@ -63,7 +63,10 @@ declare class RceApiSource {
         bookmark: any;
         files: any;
     }>;
-    fetchMedia(props: any): Promise<any>;
+    fetchMedia(props: any): Promise<{
+        bookmark: any;
+        files: any;
+    }>;
     fetchFiles(uri: any): Promise<{
         bookmark: any;
         files: any;

package/es/rcs/api.js

@@ -21,7 +21,6 @@ import { saveClosedCaptions, saveClosedCaptionsForAttachment, CONSTANTS } from '
 import { downloadToWrap, fixupFileUrl } from '../common/fileUrl';
 import alertHandler from '../rce/alertHandler';
 import buildError from './buildError';
-import RCEGlobals from '../rce/RCEGlobals';
 import { parseUrlPath } from '../util/url-util';
 export function headerFor(jwt) {
   return {
@@ -164,18 +163,15 @@ class RceApiSource {
   fetchMedia(props) {
     const media = props.media[props.contextType];
     const uri = media.bookmark || this.uriFor('media', props);
-    if (RCEGlobals.getFeatures()?.media_links_use_attachment_id) {
-      return this.apiFetch(uri, headerFor(this.jwt)).then(({
+    return this.apiFetch(uri, headerFor(this.jwt)).then(({
+      bookmark,
+      files
+    }) => {
+      return {
         bookmark,
-        files
-      }) => {
-        return {
-          bookmark,
-          files: files.map(f => fixupFileUrl(props.contextType, props.contextId, f, this.canvasOrigin))
-        };
-      });
-    }
-    return this.apiFetch(uri, headerFor(this.jwt));
+        files: files.map(f => fixupFileUrl(props.contextType, props.contextId, f, this.canvasOrigin))
+      };
+    });
   }
   fetchFiles(uri) {
     return this.fetchPage(uri).then(({
@@ -219,7 +215,7 @@ class RceApiSource {
     title,
     attachment_id
   }) {
-    const uri = RCEGlobals.getFeatures()?.media_links_use_attachment_id && attachment_id ? `${this.baseUri('media_attachments', apiProps.host)}/${attachment_id}?user_entered_title=${encodeURIComponent(title)}` : `${this.baseUri('media_objects', apiProps.host)}/${media_object_id}?user_entered_title=${encodeURIComponent(title)}`;
+    const uri = attachment_id ? `${this.baseUri('media_attachments', apiProps.host)}/${attachment_id}?user_entered_title=${encodeURIComponent(title)}` : `${this.baseUri('media_objects', apiProps.host)}/${media_object_id}?user_entered_title=${encodeURIComponent(title)}`;
     return this.apiPost(uri, headerFor(this.jwt), null, 'PUT');
   }
 

package/es/translations/locales/ar.js

@@ -400,6 +400,9 @@ const locale = {
   "content_type_2cf90d95": {
     "message": "نوع المحتوى"
   },
+  "continue_to_youtube_content_a34f0f85": {
+    "message": "المتابعة إلى محتوى YouTube"
+  },
   "coproduct_e7838082": {
     "message": "منتج مشترك"
   },
@@ -499,6 +502,9 @@ const locale = {
   "decrease_indent_d9cf469d": {
     "message": "تقليل المسافة البادئة"
   },
+  "decrease_rich_content_area_82068f64": {
+    "message": "تقليل منطقة محتوى النص المنسق"
+  },
   "deep_purple_bb3e2907": {
     "message": "أرجواني داكن"
   },
@@ -1081,6 +1087,9 @@ const locale = {
   "increase_indent_6af90f7c": {
     "message": "زيادة المسافة البادئة"
   },
+  "increase_rich_content_area_340b775": {
+    "message": "زيادة منطقة محتوى النص المنسق"
+  },
   "indefinite_integral_6623307e": {
     "message": "قيمة التكامل غير المحدد"
   },
@@ -1123,6 +1132,9 @@ const locale = {
   "intersection_cd4590e4": {
     "message": "تقاطع"
   },
+  "invalid_description_991e23bb": {
+    "message": "وصف غير صالح"
+  },
   "invalid_entry_f7d2a0f5": {
     "message": "إدخال غير صالح."
   },
@@ -1690,9 +1702,18 @@ const locale = {
   "please_allow_canvas_to_access_your_microphone_and__dc2c3079": {
     "message": "يرجى السماح لـ Canvas بالوصول إلى الميكروفون وكاميرا الويب لديك."
   },
+  "please_choose_a_file_c2449cc": {
+    "message": "يرجى اختيار ملف"
+  },
   "please_decribe_what_you_would_like_to_compose_27a51be5": {
     "message": "يرجى وصف ما ترغب في إنشائه."
   },
+  "please_enter_a_file_name_f159edc1": {
+    "message": "يرجى إدخال اسم الملف"
+  },
+  "please_select_a_file_of_a_supported_type_1fc578f2": {
+    "message": "يرجى تحديد ملف بنوع مدعوم"
+  },
   "plus_d43cd4ec": {
     "message": "موجب"
   },
@@ -2242,8 +2263,11 @@ const locale = {
   "the_first_heading_on_a_page_should_be_an_h2_859089f2": {
     "message": "يجب أن يكون أول عنوان في الصفحة هو H2."
   },
-  "the_following_content_is_partner_provided_ed1da756": {
-    "message": "المحتوى التالي تم إدخاله بواسطة شريك"
+  "the_height_of_rich_content_area_is_decreased_36920e0": {
+    "message": "قل ارتفاع منطقة محتوى النص المنسق."
+  },
+  "the_height_of_rich_content_area_is_increased_74c2358d": {
+    "message": "زاد ارتفاع منطقة محتوى النص المنسق."
   },
   "the_material_is_in_the_public_domain_279c39a3": {
     "message": "توجد المادة في المجال العام"
@@ -2254,9 +2278,6 @@ const locale = {
   "the_material_is_subject_to_an_exception_e_g_fair_u_a39c8ca2": {
     "message": "المادة خاضعة لاستثناء - مثال استخدام عادل أو حق الاقتباس أو استثناءات أخرى بموجب قوانين حقوق النشر المعمول بها"
   },
-  "the_preceding_content_is_partner_provided_d753928c": {
-    "message": "المحتوى السابق تم إدخاله بواسطة شريك"
-  },
   "the_pretty_html_editor_is_not_keyboard_accessible__d6d5d2b": {
     "message": "محرر HTML الأنيق لا يمكن الوصول إليه من خلال لوحة المفاتيح. اضغط على Shift-O لفتح محرر HTML البسيط."
   },
@@ -2296,6 +2317,9 @@ const locale = {
   "this_image_is_currently_unavailable_25c68857": {
     "message": "هذه الصورة غير متوفرة حاليًا"
   },
+  "this_video_may_display_youtube_ads_4d19d590": {
+    "message": "قد يعرض هذا الفيديو إعلانات YouTube."
+  },
   "though_your_video_will_have_the_correct_title_in_t_90e427f3": {
     "message": "بالرغم من أن مقطع الفيديو الخاص بك سيشتمل على العنوان الصحيح في المستعرض، لم نتمكن من تحديثه في قاعدة البيانات."
   },