@oat-sa/tao-core-ui 3.14.0 → 3.15.0

package/dist/ckeditor/ckConfigurator.js

@@ -31,6 +31,7 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
     const originalConfig = _.cloneDeep(window.CKEDITOR.config);
     const moduleConfig = module.config();
     const furiganaPluginVisibilityKey = 'ckeditor/TaoFurigana';
+    const decorationsOn = !!(context.featureFlags && context.featureFlags.FEATURE_FLAG_CKEDITOR_DECORATIONS);
     function getUserLanguage() {
       const documentLang = window.document.documentElement.getAttribute('lang');
       const documentLocale = documentLang && documentLang.split('-')[0];
@@ -212,13 +213,13 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
         coreStyles_subscript: {
           element: 'sub',
           attributes: {
-            class: 'txt-subscript'
+            class: decorationsOn ? 'txt-subscript' : ''
           }
         },
         coreStyles_superscript: {
           element: 'sup',
           attributes: {
-            class: 'txt-superscript'
+            class: decorationsOn ? 'txt-superscript' : ''
           }
         },
         coreStyles_highlight: {
@@ -259,9 +260,11 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
         ckConfig.extraPlugins = function (positionedPluginArr, extraPlugins) {
           let pluginIndex = positionedPluginArr.length;
           let extraPluginArr = extraPlugins.split(',');
+          const NATIVE_BUTTONS = new Set(['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', 'numberedlist', 'bulletedlist', 'blockquote', 'justifyleft', 'justifycenter', 'justifyright', 'justifyblock', 'link', 'unlink', 'image', 'specialchar', 'format', 'font', 'fontsize', 'textcolor', 'language']);
           while (pluginIndex--) {
             positionedPluginArr[pluginIndex] = positionedPluginArr[pluginIndex].toLowerCase();
           }
+          positionedPluginArr = positionedPluginArr.filter(p => !NATIVE_BUTTONS.has(p));
           extraPluginArr = _.compact(_.union(extraPluginArr, positionedPluginArr));
           return extraPluginArr.join(',');
         }(_.keys(positionedPlugins), ckConfig.extraPlugins);
@@ -397,29 +400,27 @@ define(['jquery', 'lodash', 'ui/ckeditor/dtdHandler', 'ckeditor', 'context', 'mo
               insertAfter: 'SpecialChar'
             };
           }
-          if (context.featureFlags && context.featureFlags.FEATURE_FLAG_CKEDITOR_DECORATIONS) {
-            if (options.strike) {
-              positionedPlugins.TaoStrike = {
-                insertAfter: 'Italic'
-              };
-            }
+          if (decorationsOn) {
+            positionedPlugins.Strike = {
+              insertAfter: 'Italic'
+            };
             if (options.underline) {
               positionedPlugins.TaoUnderline = {
-                insertAfter: options.strike ? 'TaoStrike' : 'Italic'
+                insertAfter: 'Strike'
               };
             }
-          }
-          if (options.highlight) {
+          } else {
             if (options.underline) {
-              positionedPlugins.TaoHighlight = {
-                insertAfter: 'TaoUnderline'
-              };
-            } else {
-              positionedPlugins.TaoHighlight = {
+              positionedPlugins.Underline = {
                 insertAfter: 'Italic'
               };
             }
           }
+          if (options.highlight) {
+            positionedPlugins.TaoHighlight = {
+              insertAfter: decorationsOn && options.underline ? 'TaoUnderline' : options.underline ? 'Underline' : 'Italic'
+            };
+          }
           if (options.mathJax) {
             positionedPlugins.TaoQtiMaths = {
               insertAfter: 'SpecialChar'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.14.0",
+    "version": "3.15.0",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

package/scss/ckeditor/skins/tao/scss/editor.scss

@@ -93,18 +93,15 @@ legend.cke_voice_label {
 // added to make _u_ in ck QTI compatible
 .txt-underline {
   text-decoration: underline;
-  text-underline-offset: 0.4em;
   font-size : inherit;
 }
 
 .txt-dashed {
   text-decoration: underline dashed;
-  text-underline-offset: 0.4em;
 }
 
 .txt-wavy {
   text-decoration: underline wavy;
-  text-underline-offset: 0.4em;
 }
 
 .txt-strike {

package/scss/inc/_base.scss

@@ -501,27 +501,39 @@ body {
     }
     .txt-dashed {
         text-decoration: underline dashed;
-        text-underline-offset: 0.4em;
     }
 
     .txt-wavy {
         text-decoration: underline wavy;
-        text-underline-offset: 0.4em;
     }
 
     .txt-strike {
         text-decoration: line-through;
     }
-    
+
     .writing-mode-vertical-rl {
+        .txt-dashed,
+        .txt-underline {
+            text-underline-offset: 0.2em;
+        }
         .txt-underline {
             text-underline-position: right;
         }
         .txt-subscript {
-            right: -0.6em;
+            inset-block-start: -0.4em;
+            bottom: 0;
         }
         .txt-superscript {
-            left: -0.6em;
+            inset-block-end: -0.4em;
+            top: 0;
+        }
+        .txt-underline,
+        .txt-dashed,
+        .txt-wavy {
+            ruby rt {
+                position: relative;
+                inset-block-start: -0.8em;
+            }
         }
     }
 

package/src/ckeditor/ckConfigurator.js

@@ -29,6 +29,7 @@ import featuresService from 'services/features';
 const originalConfig = _.cloneDeep(window.CKEDITOR.config);
 const moduleConfig = module.config();
 const furiganaPluginVisibilityKey = 'ckeditor/TaoFurigana';
+const decorationsOn = !!(context.featureFlags && context.featureFlags.FEATURE_FLAG_CKEDITOR_DECORATIONS);
 
 function getUserLanguage() {
     const documentLang = window.document.documentElement.getAttribute('lang');
@@ -278,11 +279,11 @@ const ckConfigurator = (function () {
         },
         coreStyles_subscript: {
             element: 'sub',
-            attributes: { class: 'txt-subscript' }
+            attributes: { class: decorationsOn ? 'txt-subscript' : ''}
         },
         coreStyles_superscript: {
             element: 'sup',
-            attributes: { class: 'txt-superscript' }
+            attributes: { class: decorationsOn ? 'txt-superscript': '' }
         },
         coreStyles_highlight: {
             element: 'span',
@@ -537,13 +538,22 @@ const ckConfigurator = (function () {
             let pluginIndex = positionedPluginArr.length;
             let extraPluginArr = extraPlugins.split(',');
 
+            const NATIVE_BUTTONS = new Set([
+                'bold', 'italic', 'underline', 'strike', 'subscript', 'superscript',
+                'numberedlist', 'bulletedlist', 'blockquote',
+                'justifyleft', 'justifycenter', 'justifyright', 'justifyblock',
+                'link', 'unlink', 'image', 'specialchar', 'format', 'font', 'fontsize', 'textcolor', 'language'
+            ]);
+
             while (pluginIndex--) {
                 positionedPluginArr[pluginIndex] = positionedPluginArr[pluginIndex].toLowerCase();
             }
 
+            positionedPluginArr = positionedPluginArr.filter(p => !NATIVE_BUTTONS.has(p));
+
             extraPluginArr = _.compact(_.union(extraPluginArr, positionedPluginArr));
             return extraPluginArr.join(',');
-        })(_.keys(positionedPlugins), ckConfig.extraPlugins);
+        }(_.keys(positionedPlugins), ckConfig.extraPlugins));
 
         // capture line breaks (/) and such
         // and turn them into a objects temporarily
@@ -677,24 +687,20 @@ const ckConfigurator = (function () {
             if (options.qtiInclude) {
                 positionedPlugins.TaoQtiInclude = { insertAfter: 'SpecialChar' };
             }
-            if (context.featureFlags && context.featureFlags.FEATURE_FLAG_CKEDITOR_DECORATIONS) {
-                if (options.strike) {
-                    positionedPlugins.TaoStrike = {
-                        insertAfter: 'Italic'
-                    };
+            if (decorationsOn) {
+                positionedPlugins.Strike = { insertAfter: 'Italic' };
+                if (options.underline) {
+                    positionedPlugins.TaoUnderline = { insertAfter: 'Strike' };
                 }
+            } else {
                 if (options.underline) {
-                    positionedPlugins.TaoUnderline = {
-                        insertAfter: options.strike ? 'TaoStrike' : 'Italic'
-                    };
+                    positionedPlugins.Underline = { insertAfter: 'Italic' };
                 }
             }
             if (options.highlight) {
-                if (options.underline) {
-                    positionedPlugins.TaoHighlight = { insertAfter: 'TaoUnderline' };
-                } else {
-                    positionedPlugins.TaoHighlight = { insertAfter: 'Italic' };
-                }
+                positionedPlugins.TaoHighlight = {
+                    insertAfter: (decorationsOn && options.underline) ? 'TaoUnderline' : (options.underline ? 'Underline' : 'Italic')
+                };
             }
             if (options.mathJax) {
                 positionedPlugins.TaoQtiMaths = { insertAfter: 'SpecialChar' };

package/src/css/basic.css

@@ -1465,24 +1465,34 @@ html .txt-underline {
 html .txt-dashed {
   -webkit-text-decoration: underline dashed;
           text-decoration: underline dashed;
-  text-underline-offset: 0.4em;
 }
 html .txt-wavy {
   -webkit-text-decoration: underline wavy;
           text-decoration: underline wavy;
-  text-underline-offset: 0.4em;
 }
 html .txt-strike {
   text-decoration: line-through;
 }
+html .writing-mode-vertical-rl .txt-dashed,
+html .writing-mode-vertical-rl .txt-underline {
+  text-underline-offset: 0.2em;
+}
 html .writing-mode-vertical-rl .txt-underline {
   text-underline-position: right;
 }
 html .writing-mode-vertical-rl .txt-subscript {
-  right: -0.6em;
+  inset-block-start: -0.4em;
+  bottom: 0;
 }
 html .writing-mode-vertical-rl .txt-superscript {
-  left: -0.6em;
+  inset-block-end: -0.4em;
+  top: 0;
+}
+html .writing-mode-vertical-rl .txt-underline ruby rt,
+html .writing-mode-vertical-rl .txt-dashed ruby rt,
+html .writing-mode-vertical-rl .txt-wavy ruby rt {
+  position: relative;
+  inset-block-start: -0.8em;
 }
 html .writing-mode-vertical-rl[data-useragent-browser=safari] .txt-underline {
   text-decoration: none;
@@ -5283,20 +5293,17 @@ legend.cke_voice_label {
 
 .txt-underline {
   text-decoration: underline;
-  text-underline-offset: 0.4em;
   font-size: inherit;
 }
 
 .txt-dashed {
   -webkit-text-decoration: underline dashed;
           text-decoration: underline dashed;
-  text-underline-offset: 0.4em;
 }
 
 .txt-wavy {
   -webkit-text-decoration: underline wavy;
           text-decoration: underline wavy;
-  text-underline-offset: 0.4em;
 }
 
 .txt-strike {