[ENHANCEMENT] [MER-5576] Add images and alt text to text flows

assets/src/components/parts/janus-text-flow/QuillEditor.tsx

@@ -242,6 +242,7 @@ const attachInlineCustomColorControl = (
 };
 
 const BaseImage = Quill.import('formats/image');
+const DeltaCtor = Quill.import('delta');
 
 class ImageWithAlt extends BaseImage {
   static blotName = 'image';
@@ -522,6 +523,9 @@ export const QuillEditor: React.FC<QuillEditorProps> = ({
   }, [tree]);
   const [delta, setDelta] = React.useState<any>(initialDelta);
   const [currentQuillRange, setCurrentQuillRange] = React.useState<number>(0);
+  const [editingImageIndex, setEditingImageIndex] = React.useState<number | null>(null);
+  const [imageDialogInitialSrc, setImageDialogInitialSrc] = React.useState<string>('');
+  const [imageDialogInitialAlt, setImageDialogInitialAlt] = React.useState<string>('');
   const [showImageSelectorDailog, setShowImageSelectorDailog] = React.useState<boolean>(false);
   const [showFIBOptionEditorDailog, setShowFIBOptionEditorDailog] = React.useState<boolean>(false);
   const [showLinkDialog, setShowLinkDialog] = React.useState<boolean>(false);
@@ -664,23 +668,61 @@ export const QuillEditor: React.FC<QuillEditorProps> = ({
 
     const onEditorClick = (event: MouseEvent) => {
       const anchor = getAnchorFromEventTarget(event.target);
-      if (!anchor) return;
+      if (anchor) {
+        const blot = Quill.find(anchor);
+        if (!blot) return;
 
-      const blot = Quill.find(anchor);
-      if (!blot) return;
+        event.preventDefault();
+        event.stopPropagation();
 
-      event.preventDefault();
-      event.stopPropagation();
+        const index = editor.getIndex(blot);
+        const length = Math.max(1, blot.length?.() || 1);
 
-      const index = editor.getIndex(blot);
-      const length = Math.max(1, blot.length?.() || 1);
+        editor.setSelection(index, length);
+        openLinkDialog({ index, length }, anchor.getAttribute('href') || '');
+        return;
+      }
 
-      editor.setSelection(index, length);
-      openLinkDialog({ index, length }, anchor.getAttribute('href') || '');
+      if (event.target instanceof HTMLImageElement) {
+        const imageBlot = Quill.find(event.target);
+        if (!imageBlot) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        const imageIndex = editor.getIndex(imageBlot);
+        const imageOp = editor.getContents(imageIndex, 1)?.ops?.[0];
+        const imageValue = imageOp?.insert?.image;
+        const imageSrc = typeof imageValue === 'string' ? imageValue : imageValue?.src || '';
+        const imageAlt =
+          typeof imageValue === 'object'
+            ? imageValue?.alt || imageOp?.attributes?.alt || imageOp?.insert?.alt || ''
+            : imageOp?.attributes?.alt || imageOp?.insert?.alt || '';
+
+        setEditingImageIndex(imageIndex);
+        setCurrentQuillRange(imageIndex);
+        setImageDialogInitialSrc(imageSrc);
+        setImageDialogInitialAlt(imageAlt);
+        setShowImageSelectorDailog(true);
+      }
     };
 
     root.addEventListener('mousedown', onEditorMouseDown, true);
     root.addEventListener('click', onEditorClick, true);
+    const clipboard = editor.getModule('clipboard');
+    clipboard.addMatcher('IMG', (node: HTMLImageElement) => {
+      const src = node.getAttribute('src');
+      if (!src) {
+        return new DeltaCtor();
+      }
+
+      return new DeltaCtor().insert({
+        image: {
+          src,
+          alt: node.getAttribute('alt') || '',
+        },
+      });
+    });
     return () => {
       root.removeEventListener('mousedown', onEditorMouseDown, true);
       root.removeEventListener('click', onEditorClick, true);
@@ -720,16 +762,16 @@ export const QuillEditor: React.FC<QuillEditorProps> = ({
   }, [applyColorFormat]);
 
   const customHandlers = {
-    textStyle: function (value: string) {
+    textStyle: function (this: any, value: string) {
       applyTextStyle(this.quill, value);
     },
-    color: function (value: string) {
+    color: function (this: any, value: string) {
       this.quill.format('color', value, 'user');
     },
-    background: function (value: string) {
+    background: function (this: any, value: string) {
       this.quill.format('background', value, 'user');
     },
-    adaptivity: function (value: string) {
+    adaptivity: function (this: any, value: string) {
       const range = this.quill.getSelection();
       let selectionValue = '';
       if (range && range.length > 0) {
@@ -744,11 +786,14 @@ export const QuillEditor: React.FC<QuillEditorProps> = ({
         this.quill.deleteText(range.index + expression.length + 2, expression.length + 2);
       }
     },
-    image: function (value: string) {
+    image: function (this: any, value: string) {
+      setEditingImageIndex(null);
+      setImageDialogInitialSrc('');
+      setImageDialogInitialAlt('');
       setShowImageSelectorDailog(true);
       setCurrentQuillRange(this.quill.getSelection()?.index || 0);
     },
-    insertFIBOption: function (value: string) {
+    insertFIBOption: function (this: any, value: string) {
       const range = this.quill.getSelection();
       const insertIndex = range ? range.index : this.quill.getLength();
       setCurrentQuillRange(insertIndex);
@@ -819,9 +864,16 @@ export const QuillEditor: React.FC<QuillEditorProps> = ({
     if (!quill?.current || !imageURL) return;
 
     const editor = quill.current.getEditor();
-    const index = currentQuillRange ?? editor.getLength();
+    const isEditing = editingImageIndex !== null;
+    const index = isEditing ? editingImageIndex : currentQuillRange ?? editor.getLength();
 
+    if (isEditing) {
+      editor.deleteText(index, 1, 'user');
+    }
     editor.insertEmbed(index, 'image', { src: imageURL, alt: imageAltText }, 'user');
+    setEditingImageIndex(null);
+    setImageDialogInitialSrc('');
+    setImageDialogInitialAlt('');
   };
 
   const handleFIBOptionsEditorSave = (Options: Array<OptionItem>) => {
@@ -845,6 +897,9 @@ export const QuillEditor: React.FC<QuillEditorProps> = ({
 
   const handleImageUploaderDailogClose = () => {
     setShowImageSelectorDailog(false);
+    setEditingImageIndex(null);
+    setImageDialogInitialSrc('');
+    setImageDialogInitialAlt('');
   };
 
   const handleFIBOptionsEditorClose = () => {
@@ -1015,6 +1070,9 @@ export const QuillEditor: React.FC<QuillEditorProps> = ({
           showImageSelectorDailog={showImageSelectorDailog}
           handleImageDetailsSave={handleImageDetailsSave}
           handleImageDailogClose={handleImageUploaderDailogClose}
+          initialImageSrc={imageDialogInitialSrc}
+          initialImageAltText={imageDialogInitialAlt}
+          isEditingImage={editingImageIndex !== null}
         ></QuillImageUploader>
       }
       {showFIBOptionEditorDailog && (

assets/src/components/parts/janus-text-flow/QuillImageUploader.tsx

@@ -5,31 +5,65 @@ interface QuillImageUploaderProps {
   handleImageDetailsSave: (imageSrc: string, imageAltText: string) => void;
   handleImageDailogClose: () => void;
   showImageSelectorDailog?: boolean;
+  initialImageSrc?: string;
+  initialImageAltText?: string;
+  isEditingImage?: boolean;
 }
 export const QuillImageUploader: React.FC<QuillImageUploaderProps> = ({
   handleImageDetailsSave,
   showImageSelectorDailog,
   handleImageDailogClose,
+  initialImageSrc = '',
+  initialImageAltText = '',
+  isEditingImage = false,
 }) => {
   const [imageURL, setImageURL] = React.useState<string>('');
   const [imageAltText, setImageAltText] = React.useState<string>('');
+  const [errorMessage, setErrorMessage] = React.useState<string>('');
+
+  React.useEffect(() => {
+    if (!showImageSelectorDailog) {
+      setImageURL('');
+      setImageAltText('');
+      setErrorMessage('');
+      return;
+    }
+
+    setImageURL(initialImageSrc);
+    setImageAltText(initialImageAltText);
+    setErrorMessage('');
+  }, [showImageSelectorDailog, initialImageSrc, initialImageAltText]);
+
   const handleOnImageURLChange: ReactEventHandler<HTMLInputElement> = (event) => {
     const el = event.target as HTMLInputElement;
     const val = el.value;
     setImageURL(val);
+    setErrorMessage('');
   };
   const handleOnImageAlTextChange: ReactEventHandler<HTMLInputElement> = (event) => {
     const el = event.target as HTMLInputElement;
     const val = el.value;
     setImageAltText(val);
+    setErrorMessage('');
+  };
+
+  const onSave = () => {
+    if (!imageURL.trim()) {
+      setErrorMessage('Image URL is required.');
+      return;
+    }
+    handleImageDetailsSave(imageURL.trim(), imageAltText.trim());
   };
+
   return (
     <React.Fragment>
       {
         <>
           <Modal show={showImageSelectorDailog} onHide={handleImageDailogClose}>
             <Modal.Header closeButton={true} className="px-8 pb-0">
-              <h3 className="modal-title font-bold">MCQ - Insert Image</h3>
+              <h3 className="modal-title font-bold">
+                {isEditingImage ? 'Edit Image' : 'Insert Image'}
+              </h3>
             </Modal.Header>
             <Modal.Body className="px-8">
               <div style={{ width: '100%' }}>
@@ -55,15 +89,10 @@ export const QuillImageUploader: React.FC<QuillImageUploaderProps> = ({
                   style={{ width: '100%' }}
                 />
               </div>
+              {errorMessage && <div className="text-danger mt-2">{errorMessage}</div>}
             </Modal.Body>
             <Modal.Footer className="px-8 pb-6 flex-row justify-items-stretch">
-              <button
-                id="btnDelete"
-                className="btn btn-primary flex-grow basis-1"
-                onClick={() => {
-                  handleImageDetailsSave(imageURL, imageAltText);
-                }}
-              >
+              <button id="btnDelete" className="btn btn-primary flex-grow basis-1" onClick={onSave}>
                 {`Save`}
               </button>
               <button

assets/src/components/parts/janus-text-flow/TextFlowAuthor.tsx

@@ -16,6 +16,7 @@ export interface MarkupTree {
   tag: string;
   href?: string;
   src?: string;
+  alt?: string;
   target?: string;
   style?: any;
   text?: string;
@@ -85,7 +86,7 @@ export const renderFlow = (
       src={treeNode.src}
       target={treeNode.target}
       style={styles}
-      text={treeNode.text}
+      text={treeNode.tag === 'img' ? treeNode.alt : treeNode.text}
       state={state}
       customCssClass={treeNode.customCssClass}
       displayRawText={true}
@@ -107,7 +108,8 @@ export const renderFlow = (
 
 // eslint-disable-next-line react/display-name
 const Editor: React.FC<any> = React.memo(({ html, tree, portal, state, projectSlug }) => {
-  const quillProps: { tree?: any; html?: any; 'project-slug'?: string } = {};
+  const quillProps: { tree?: any; html?: any; 'project-slug'?: string; showimagecontrol?: string } =
+    {};
   if (tree) {
     quillProps.tree = JSON.stringify(tree);
   }
@@ -135,6 +137,7 @@ const Editor: React.FC<any> = React.memo(({ html, tree, portal, state, projectSl
     quillProps['project-slug'] = resolvedProjectSlug;
     (quillProps as any).projectSlug = resolvedProjectSlug;
   }
+  quillProps.showimagecontrol = 'true';
   /* console.log('E RERENDER', { html, tree, portal }); */
   const E = () => (
     <div style={{ padding: 20 }}>{React.createElement(quillEditorTagName, quillProps)}</div>

assets/src/components/parts/janus-text-flow/quill-utils.ts

@@ -235,13 +235,15 @@ export const convertQuillToJanus = (delta: Delta) => {
         const imageDetails: any = op.insert;
         const imageValue = imageDetails?.image;
         const src = typeof imageValue === 'string' ? imageValue : imageValue.src;
+        const altFromImageValue = typeof imageValue === 'object' ? imageValue?.alt : undefined;
+        const altFromLegacyInsert = imageDetails?.alt;
         const child: JanusMarkupNode = {
           tag: 'img',
           style: {
             height: '100%',
             width: '100%',
           },
-          alt: `${op?.attributes?.alt || ''}`,
+          alt: `${altFromImageValue ?? op?.attributes?.alt ?? altFromLegacyInsert ?? ''}`,
           src: `${src}`,
           children: [],
         };
@@ -433,7 +435,7 @@ const processJanusChildren = (node: JanusMarkupNode, doc: Delta, parentAttrs: an
             lineAttrs.align = child.style.textAlign;
           }
           if (child.tag === 'img') {
-            doc.insert({ image: child.src, alt: child.alt });
+            doc.insert({ image: { src: child.src || '', alt: child.alt || '' } });
           }
           line.insert('\n', lineAttrs);
         }

assets/test/advanced_authoring/right_menu/lesson/lesson_mocks.ts

@@ -3,10 +3,20 @@ export const transformedSchema = {
     defaultScreenWidth: 1000,
     defaultScreenHeight: 500,
     enableHistory: true,
+    displayRefreshWarningPopup: true,
     variables: [],
     logoutMessage: '',
     logoutPanelImageURL: '',
+    backgroundImageURL: '',
+    backgroundImageScaleContent: false,
+    darkModeSetting: false,
+    responsiveLayout: false,
+    grid: false,
+    centerpoint: false,
+    columnGuides: false,
+    rowGuides: false,
   },
+  displayApplicationChrome: false,
   additionalStylesheets: [
     'default',
     'https://etx-nec.s3-us-west-2.amazonaws.com/css/etx/styles/style_season.css',