fix: contentAnalyzer added to determine TinyMCE Editor type

Author: marslanabdulrauf

src/schedule-and-details/introducing-section/contentTypeUtils.js

@@ -0,0 +1,43 @@
+/**
+ * Utility functions for detecting content type and
+ * determining appropriate editor type for TinyMCE editor
+ */
+
+/**
+ * Detects if content contains HTML tags
+ * @param {string} content - The content to analyze
+ * @returns {boolean} - True if content contains HTML tags
+ */
+export const containsHtml = (content) => {
+  if (!content || typeof content !== 'string') {
+    return false;
+  }
+
+  // Check for common HTML patterns
+  const htmlPatterns = [
+    /<\/?[a-z][\s\S]*>/i, // HTML tags
+    /&[a-z]+;/i, // HTML entities
+    /&#\d+;/, // Numeric entities
+  ];
+
+  return htmlPatterns.some(pattern => pattern.test(content));
+};
+
+/**
+ * Determines the appropriate editor type based on content analysis
+ * @param {string} content - The content to analyze
+ * @returns {string} - The recommended editor type ('text' or 'html')
+ */
+export const determineEditorType = (content) => {
+  if (!content || typeof content !== 'string') {
+    return 'text';
+  }
+
+  // If content contains HTML, use html editor for better HTML editing
+  if (containsHtml(content)) {
+    return 'html';
+  }
+
+  // For plain text content, use text editor
+  return 'text';
+};

src/schedule-and-details/introducing-section/index.jsx

@@ -11,6 +11,7 @@ import { WysiwygEditor } from '../../generic/WysiwygEditor';
 import SectionSubHeader from '../../generic/section-sub-header';
 import IntroductionVideo from './introduction-video';
 import ExtendedCourseDetails from './extended-course-details';
+import { determineEditorType } from './contentTypeUtils';
 import messages from './messages';
 
 const IntroducingSection = ({
@@ -112,6 +113,7 @@ const IntroducingSection = ({
             <Form.Label>{intl.formatMessage(messages.courseOverviewLabel)}</Form.Label>
             <WysiwygEditor
               initialValue={overview}
+              editorType={determineEditorType(overview)}
               onChange={(value) => onChange(value, 'overview')}
             />
             <Form.Control.Feedback>{overviewHelpText}</Form.Control.Feedback>
@@ -121,6 +123,7 @@ const IntroducingSection = ({
               <Form.Label>{intl.formatMessage(messages.courseAboutSidebarLabel)}</Form.Label>
               <WysiwygEditor
                 initialValue={aboutSidebarHtml}
+                editorType={determineEditorType(aboutSidebarHtml)}
                 onChange={(value) => onChange(value, 'aboutSidebarHtml')}
               />
               <Form.Control.Feedback>{aboutSidebarHelpText}</Form.Control.Feedback>