Added SSML editor extension for authoring.

michaelsharman · Mar 14, 2024 · 96625de · 96625de
1 parent f2540a4
commit 96625de
Show file tree

Hide file tree

Showing 39 changed files with 1,778 additions and 42 deletions.
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/module-Assessment_Activity.html b/docs/module-Assessment_Activity.html
diff --git a/docs/module-Assessment_App.html b/docs/module-Assessment_App.html
diff --git a/docs/module-Assessment_Diagnostics.html b/docs/module-Assessment_Diagnostics.html
diff --git a/docs/module-Assessment_Items.html b/docs/module-Assessment_Items.html
diff --git a/docs/module-Assessment_Player.html b/docs/module-Assessment_Player.html
diff --git a/docs/module-Assessment_Questions.html b/docs/module-Assessment_Questions.html
diff --git a/docs/module-Assessment_Sections.html b/docs/module-Assessment_Sections.html
diff --git a/docs/module-Authoring_App.html b/docs/module-Authoring_App.html
diff --git a/docs/module-Authoring_Diagnostics.html b/docs/module-Authoring_Diagnostics.html
diff --git a/docs/module-Authoring_Navigation.html b/docs/module-Authoring_Navigation.html
diff --git a/docs/module-Authoring_Widgets.html b/docs/module-Authoring_Widgets.html
diff --git a/docs/module-Extensions_Assessment_ariaCountOnNav.html b/docs/module-Extensions_Assessment_ariaCountOnNav.html
diff --git a/docs/module-Extensions_Assessment_blockGrammarChecks.html b/docs/module-Extensions_Assessment_blockGrammarChecks.html
diff --git a/docs/module-Extensions_Assessment_columnResizer.html b/docs/module-Extensions_Assessment_columnResizer.html
diff --git a/docs/module-Extensions_Assessment_essayLimitByCharacter.html b/docs/module-Extensions_Assessment_essayLimitByCharacter.html
diff --git a/docs/module-Extensions_Assessment_hideAlternatives.html b/docs/module-Extensions_Assessment_hideAlternatives.html
diff --git a/docs/module-Extensions_Assessment_keyboardShortcuts.html b/docs/module-Extensions_Assessment_keyboardShortcuts.html
diff --git a/docs/module-Extensions_Assessment_magnifier.html b/docs/module-Extensions_Assessment_magnifier.html
diff --git a/docs/module-Extensions_Assessment_mcqLabelPrefix.html b/docs/module-Extensions_Assessment_mcqLabelPrefix.html
diff --git a/docs/module-Extensions_Assessment_pageOverlay.html b/docs/module-Extensions_Assessment_pageOverlay.html
diff --git a/docs/module-Extensions_Assessment_renderPDF.html b/docs/module-Extensions_Assessment_renderPDF.html
diff --git a/docs/module-Extensions_Assessment_resetResponse.html b/docs/module-Extensions_Assessment_resetResponse.html
diff --git a/docs/module-Extensions_Assessment_toggleTimer.html b/docs/module-Extensions_Assessment_toggleTimer.html
diff --git a/docs/module-Extensions_Assessment_whiteNoise.html b/docs/module-Extensions_Assessment_whiteNoise.html
diff --git a/docs/module-Extensions_Authoring_contentTabs.html b/docs/module-Extensions_Authoring_contentTabs.html
diff --git a/docs/module-Extensions_Authoring_essayMaxLength.html b/docs/module-Extensions_Authoring_essayMaxLength.html
diff --git a/docs/module-Extensions_Authoring_languageTextDirection.html b/docs/module-Extensions_Authoring_languageTextDirection.html
diff --git a/docs/module-Extensions_Authoring_renderPDF.html b/docs/module-Extensions_Authoring_renderPDF.html
diff --git a/docs/module-Extensions_Authoring_ssmlEditor.html b/docs/module-Extensions_Authoring_ssmlEditor.html
diff --git a/docs/module-Utils_Logger.html b/docs/module-Utils_Logger.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,8 +20,10 @@
     "homepage": "https://michaelsharman.github.io/LT/",
     "devDependencies": {
         "copy-webpack-plugin": "^12.0.2",
+        "css-loader": "^6.10.0",
         "docdash": "^2.0.2",
         "jest": "^29.6.4",
+        "style-loader": "^3.3.4",
         "svg-inline-loader": "^0.8.2",
         "webpack": "^5.59.1",
         "webpack-cli": "^4.9.1"
@@ -40,6 +42,7 @@
         "howler": "^2.2.4",
         "mousetrap": "^1.6.5",
         "platform-detect": "^3.0.1",
-        "shuffle-seed": "^1.1.6"
+        "shuffle-seed": "^1.1.6",
+        "ssml-editor": "github:michaelsharman/ssml-editor"
     }
 }
diff --git a/src/assets/images/ssmleditor.png b/src/assets/images/ssmleditor.png
diff --git a/src/authoring/extensions/ui/createTags.js → ...thoring/extensions/ui/createTags/index.js b/src/authoring/extensions/ui/createTags.js → ...thoring/extensions/ui/createTags/index.js
diff --git a/src/authoring/extensions/ui/ssmlEditor/assets/images/text-to-speech.svg b/src/authoring/extensions/ui/ssmlEditor/assets/images/text-to-speech.svg
diff --git a/src/authoring/extensions/ui/ssmlEditor/index.js b/src/authoring/extensions/ui/ssmlEditor/index.js
@@ -0,0 +1,261 @@
+import * as ssmlEditor from 'ssml-editor/src/index';
+
+/**
+ * Extensions add specific functionality to Learnosity APIs.
+ * They rely on modules within LT being available.
+ *
+ * --
+ *
+ * Adds an SSML editor which can be launched from a custom
+ * Question Editor button in the toolbar.
+ *
+ * You MUST use the object as defined below. Also, note the `toolbar_settings`
+ * which is required to place the custom button(s) where you want in the toolbar.
+ *
+ * ```
+ * {
+ *     "config": {
+ *         "dependencies": {
+ *             "question_editor_api": {
+ *                 "init_options": {
+ *                     "rich_text_editor": {
+ *                         "customButtons": [
+ *                              {
+ *                                  "func": "launchSsmlEditor",
+ *                                  "icon": "/path/to/images/text-to-speech.svg",
+ *                                  "label": "Add SSML",
+ *                                  "name": "addSsml",
+ *                                  "attributes": ["content","stimulus","template","options"]
+ *                              }
+ *                         ],
+ *                         "toolbar_settings": {
+ *                             "ltr_toolbar": [
+ *                                 {
+ *                                     "items": ["Bold","Italic","Underline","-","TextColor","-", "LrnUnderlinedIndicator","-","RemoveFormat","FontSize"],
+ *                                     "name": "basicstyles"
+ *                                 },
+ *                                 {
+ *                                     "items": ["NumberedList","BulletedList","-","Indent","Outdent"],
+ *                                     "name": "list"
+ *                                 },
+ *                                 {
+ *                                     "items": ["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"],
+ *                                     "name": "justify"
+ *                                 },
+ *                                 {
+ *                                     "items": ["Link","Unlink"],
+ *                                     "name": "link"
+ *                                 },
+ *                                 {
+ *                                     "items": ["Image","LrnMath","Table","Blockquote","SpecialChar"],
+ *                                     "name": "insert"
+ *                                 },
+ *                                 {
+ *                                     "items": ["LrnSimpleFeature"],
+ *                                     "name": "simplefeature"
+ *                                 },
+ *                                 {
+ *                                     "items": ["LrnResource"],
+ *                                     "name": "resource"
+ *                                 },
+ *                                 {
+ *                                     "items": ["LrnEditAriaLabel","LrnPopupContent"],
+ *                                     "name": "editAriaLabel"
+ *                                 },
+ *                                 {
+ *                                     "name": "custombuttons"
+ *                                 },
+ *                                 {
+ *                                     "items": ["Undo","Redo"],
+ *                                     "name": "clipboard"
+ *                                 },
+ *                                 {
+ *                                     "items": ["Styles"],
+ *                                     "name": "style"
+ *                                 },
+ *                                 {
+ *                                     "items": ["Sourcedialog"],
+ *                                     "name": "mode"
+ *                                 },
+ *                                 {
+ *                                     "items": ["lrn_datatable"],
+ *                                     "name": "data"
+ *                                 }
+ *                             ]
+ *                         }
+ *                     }
+ *                 }
+ *             }
+ *         }
+ *     }
+ * }
+ * ```
+ *
+ * <p><img src="https://raw.githubusercontent.com/michaelsharman/LT/main/src/assets/images/ssmleditor.png" alt="" width="660"></p>
+ * @module Extensions/Authoring/ssmlEditor
+ */
+
+const state = {
+    renderedCss: false,
+};
+
+/**
+ * Extension constructor.
+ * @example
+ * import { LT } from '@caspingus/lt/src/authoring/index';
+ *
+ * LT.init(authorApp); // Set up LT with the Author API application instance variable
+ * LT.extensions.ssmlEditor.run();
+ * @since 2.8.0
+ */
+export function run() {
+    if (!state.renderedCss) injectCSS();
+}
+
+/**
+ * Called via a custom button in the rich text toolbar.
+ * Renders a modal with an SSML editor.
+ * @param {string} attribute Which Question Editor attribute is being edited
+ * @param {*} callback Called to return to the parent rich-text editor
+ * @since 2.8.0
+ */
+export function launchSsmlEditor(attribute, callback) {
+    const currentSelectedText = getSelection().toString();
+    const templateSsmlEditor = `
+        <div class="lrn-qe lrn-qe-modal" style="display: block;" id="lt__ssmlModalWrapper">
+            <div class="lrn-qe-ui">
+                <div class="lrn-qe-modal-dialog">
+                    <div class="lrn-qe-modal-dialog-inner">
+                        <div class="lrn-qe-modal-header">
+                            <div class="lrn-qe-form-label lrn-qe-h4 lrn-qe-section-header">
+                                <h4 class="lrn-qe-heading"><label class="lrn-qe-label lrn-qe-form-label-name">Enter SSML</label></h4>
+                            </div>
+                            <button type="button" class="lrn-qe-btn lrn-qe-modal-btn-close" aria-label="Close" tabindex="0">
+                                <span class="lrn-qe-sr-only">Close</span>
+                                <span aria-role="presentation" class="lrn-qe-i-cross"></span>
+                            </button>
+                        </div>
+                        <div data-lrn-qe-selector="modal-outlet">
+                            <div class="lrn-qe-modal-content" data-lrn-qe-modal-section="content">
+                                <div id="editor"></div>
+                                <div id="ssmlStatus"></div>
+                            </div>
+                            <div class="lrn-qe-modal-footer">
+                                <ul class="lrn-qe-ul">
+                                    <li class="lrn-qe-li lrn-qe-modal-footer-item">
+                                        <button type="button" class="lrn-qe-btn lrn-qe-btn-default"><span>Cancel</span></button>
+                                    </li>&nbsp;
+                                    <li class="lrn-qe-li lrn-qe-modal-footer-item">
+                                        <button type="button" class="lrn-qe-btn lrn-qe-btn-primary lt__ssml-add" data-lrn-qe-modal-action="confirm"><span>Add SSML</span></button>
+                                    </li>&nbsp;
+                                    <li class="lrn-qe-li lrn-qe-modal-footer-item">
+                                        <button type="button" class="lrn-qe-btn lrn-qe-btn-primary lt__ssml-generate-audio"><span>Generate audio</span></button>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        `;
+
+    document.querySelector('.learnosity-question-editor').insertAdjacentHTML('beforeEnd', templateSsmlEditor);
+
+    let elClose = [];
+    elClose.push(document.querySelector('#lt__ssmlModalWrapper .lrn-qe-btn-default'));
+    elClose.push(document.querySelector('#lt__ssmlModalWrapper .lrn-qe-modal-btn-close'));
+    for (let i = 0; i < elClose.length; i++) {
+        elClose[i].addEventListener('click', () => {
+            removeElement('lt__ssmlModalWrapper');
+            delete window.quill;
+            return callback(currentSelectedText);
+        });
+    }
+
+    const elAdd = document.querySelector('#lt__ssmlModalWrapper .lt__ssml-add');
+    elAdd.addEventListener('click', () => {
+        removeElement('lt__ssmlModalWrapper');
+        const ssml = window.quill.getText();
+        delete window.quill;
+        return callback(`<span>${ssml}</span>`);
+    });
+
+    if (!window.hasOwnProperty('quill')) {
+        const quill = ssmlEditor.run('editor');
+        if (currentSelectedText) {
+            const cursorLocation = quill.getSelection();
+            quill.insertText(cursorLocation.index, currentSelectedText);
+        }
+        window.quill = quill;
+        window.ssmlEditor = ssmlEditor;
+    }
+}
+
+/**
+ * Removes an element from the DOM
+ * @param {string} id Id of the element to remove from the DOM
+ * @since 2.8.0
+ * @ignore
+ */
+function removeElement(id) {
+    document.getElementById(id).remove();
+}
+
+/**
+ * Injects the necessary CSS to the header
+ * @since 2.8.0
+ * @ignore
+ */
+function injectCSS() {
+    const elStyle = document.createElement('style');
+    const css = `
+/* Learnosity SSML TTS styles */
+#lt__ssmlModalWrapper .lrn-qe-modal-content {
+    height: 23em;
+}
+#lt__ssmlModalWrapper .ql-editor {
+    height: 12rem;
+}
+#lt__ssmlModalWrapper .ql-editor p {
+    margin: 0;
+}
+#lt__ssmlModalWrapper .ql-toolbar.ql-snow .ql-formats {
+    margin-right: 14px;
+}
+.hidden {
+    display: none;
+}
+#lt__ssmlModalWrapper .material-symbols-outlined {
+    font-size: 1.3rem;
+    position: relative;
+    top: -2px;
+}
+#lt__ssmlModalWrapper .ql-picker {
+    padding: 3px 0;
+}
+#lt__ssmlModalWrapper .ql-picker-label {
+    width: 45px;
+    height: 18px;
+}
+#ssmlStatus .material-symbols-outlined {
+    vertical-align: middle;
+}
+.ssmlStatusValid {
+    padding: 1em;
+    background-color: #cbf5d3;
+}
+.ssmlStatusInvalid {
+    padding: 1em;
+    background-color: #ffb9b9;
+}
+speak s {
+    text-decoration: none;
+}
+`;
+
+    elStyle.textContent = css;
+    document.head.append(elStyle);
+
+    state.renderedCss = true;
+}
diff --git a/src/authoring/index.js b/src/authoring/index.js
@@ -11,13 +11,15 @@ import * as contentTabs from './extensions/ui/contentTabs/index';
 import * as languageTextDirection from './extensions/ui/languageTextDirection/index';
 import * as renderPDF from './extensions/ui/renderPDF/index';
 import * as essayMaxLength from './extensions/validation/essayMaxLength/index';
+import * as ssmlEditor from './extensions/ui/ssmlEditor/index';
 
 const extensions = {
     extensions: {
         contentTabs: { ...contentTabs },
         essayMaxLength: { ...essayMaxLength },
         languageTextDirection: { ...languageTextDirection },
         renderPDF: { ...renderPDF },
+        ssmlEditor: { ...ssmlEditor },
     },
 };
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -17,6 +17,10 @@ module.exports = {
                 test: /\.svg/,
                 type: 'asset/resource',
             },
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
+            },
         ],
     },
 };