Add support for OneNote document pasting (#2983)

* Add support for OneNote document pasting and validation

* Enhance OneNote paste handling

* Address comment

* Rename file

Author: BryanValverdeU

packages/roosterjs-content-model-dom/lib/domUtils/readFile.ts

@@ -5,14 +5,18 @@
  * If fail to read, dataUrl will be null
  */
 export function readFile(file: File, callback: (dataUrl: string | null) => void) {
-    if (file) {
-        const reader = new FileReader();
-        reader.onload = () => {
-            callback(reader.result as string);
-        };
-        reader.onerror = () => {
-            callback(null);
-        };
-        reader.readAsDataURL(file);
+    try {
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                callback(reader.result as string);
+            };
+            reader.onerror = () => {
+                callback(null);
+            };
+            reader.readAsDataURL(file);
+        }
+    } catch {
+        callback(null);
     }
 }

packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleList.ts

@@ -33,7 +33,10 @@ export const handleList: ContentModelBlockHandler<ContentModelListItem> = (
         if (
             stackLevel.listType != itemLevel.listType ||
             stackLevel.dataset?.editingInfo != itemLevel.dataset.editingInfo ||
-            (itemLevel.listType == 'OL' && typeof itemLevel.format.startNumberOverride === 'number')
+            (itemLevel.listType == 'OL' &&
+                typeof itemLevel.format.startNumberOverride === 'number') ||
+            (itemLevel.listType == 'UL' &&
+                itemLevel.format.listStyleType != stackLevel.format?.listStyleType)
         ) {
             break;
         }

packages/roosterjs-content-model-plugins/lib/paste/PastePlugin.ts

@@ -7,6 +7,7 @@ import { getPasteSource } from './pasteSourceValidations/getPasteSource';
 import { parseLink } from './utils/linkParser';
 import { PastePropertyNames } from './pasteSourceValidations/constants';
 import { processPastedContentFromExcel } from './Excel/processPastedContentFromExcel';
+import { processPastedContentFromOneNote } from './oneNote/processPastedContentFromOneNote';
 import { processPastedContentFromPowerPoint } from './PowerPoint/processPastedContentFromPowerPoint';
 import { processPastedContentFromWordDesktop } from './WordDesktop/processPastedContentFromWordDesktop';
 import { processPastedContentWacComponents } from './WacComponents/processPastedContentWacComponents';
@@ -125,6 +126,10 @@ export class PastePlugin implements EditorPlugin {
             case 'powerPointDesktop':
                 processPastedContentFromPowerPoint(event, this.editor.getDOMCreator());
                 break;
+
+            case 'oneNoteDesktop':
+                processPastedContentFromOneNote(event);
+                break;
         }
 
         addParser(event.domToModelOption, 'link', parseLink);

packages/roosterjs-content-model-plugins/lib/paste/oneNote/processPastedContentFromOneNote.ts

@@ -0,0 +1,151 @@
+import { setProcessor } from '../utils/setProcessor';
+import type {
+    BeforePasteEvent,
+    DomToModelContext,
+    ElementProcessor,
+} from 'roosterjs-content-model-types';
+
+const OrderedListStyleMap = {
+    1: 'decimal',
+    a: 'lower-alpha',
+    A: 'upper-alpha',
+    i: 'lower-roman',
+    I: 'upper-roman',
+} as const;
+
+const UnorderedListStyleMap = {
+    disc: 'disc',
+    circle: 'circle',
+    square: 'square',
+} as const;
+
+/**
+ * @internal
+ */
+export interface OneNoteListContext {
+    listStyleType?: string;
+    startNumberOverride?: number;
+}
+
+/**
+ * @internal
+ */
+export interface OneNoteDomToModelContext extends DomToModelContext {
+    oneNoteListContext?: OneNoteListContext;
+}
+
+/**
+ * @internal
+ * Processes the content pasted from OneNote by setting up custom processors
+ * for ordered lists (`<ol>`) and list items (`<li>`). These processors handle
+ * specific list styles and numbering overrides that may be present in OneNote
+ * content.
+ *
+ * @param event - The `BeforePasteEvent` containing the DOM-to-model options
+ * and other context information for the paste operation.
+ */
+export function processPastedContentFromOneNote(event: BeforePasteEvent): void {
+    setProcessor(event.domToModelOption, 'ol', processOrderedList);
+    setProcessor(event.domToModelOption, 'ul', processUnorderedList);
+    setProcessor(event.domToModelOption, 'li', processListItem);
+}
+
+/**
+ * @internal exported only for unit test
+ * Content from OneNote may have ordered lists with specific styles and start numbers.
+ * This function processes the `<ol>` elements, extracting the `type` and `start` custom attributes
+ * to set the appropriate list style and starting number in the `oneNoteListContext` of the provided context.
+ * Which is then used to format the list items within the list.
+ */
+export const processOrderedList: ElementProcessor<HTMLOListElement> = (
+    group,
+    element,
+    cmContext
+) => {
+    const context = ensureOneNoteListContext(cmContext);
+
+    if (context.oneNoteListContext) {
+        const typeOfList = element.getAttribute('type');
+        if (typeOfList) {
+            const listStyle = OrderedListStyleMap[typeOfList as keyof typeof OrderedListStyleMap];
+            const startNumberOverride = parseInt(element.getAttribute('start') || '1') || 1;
+
+            context.oneNoteListContext.listStyleType = listStyle;
+            context.oneNoteListContext.startNumberOverride = startNumberOverride;
+        }
+    }
+
+    context.defaultElementProcessors.ol?.(group, element, context);
+};
+
+/**
+ * @internal exported only for unit test
+ * Content from OneNote may have ordered lists with specific styles and start numbers.
+ * This function processes the `<ul>` elements, extracting the `type` custom attribute
+ * to set the appropriate list style in the `oneNoteListContext` of the provided context.
+ * Which is then used to format the list items within the list.
+ */
+export const processUnorderedList: ElementProcessor<HTMLUListElement> = (
+    group,
+    element,
+    cmContext
+) => {
+    const context = ensureOneNoteListContext(cmContext);
+
+    if (context.oneNoteListContext) {
+        const typeOfList = element.getAttribute('type');
+        if (typeOfList) {
+            const listStyle =
+                UnorderedListStyleMap[typeOfList as keyof typeof UnorderedListStyleMap];
+            context.oneNoteListContext.listStyleType = listStyle;
+        }
+    }
+
+    context.defaultElementProcessors.ul?.(group, element, context);
+};
+
+/**
+ * @internal exported only for unit test
+ * Processes the `<li>` elements within a list. It checks if the `oneNoteListContext`
+ * is present in the provided context. If so, it applies the list style type and
+ * start number override to the last level of the list format.
+ * This ensures that the list items are formatted correctly according to the
+ * OneNote list context.
+ */
+export const processListItem: ElementProcessor<HTMLLIElement> = (group, element, cmContext) => {
+    const context = ensureOneNoteListContext(cmContext);
+    let removeStartNumberOverride = false;
+
+    if (context.oneNoteListContext) {
+        const { listStyleType, startNumberOverride } = context.oneNoteListContext;
+        if (listStyleType) {
+            const lastLevel = context.listFormat.levels[context.listFormat.levels.length - 1];
+            lastLevel.format.listStyleType = listStyleType;
+
+            if (startNumberOverride) {
+                removeStartNumberOverride = true;
+                lastLevel.format.startNumberOverride = startNumberOverride;
+
+                delete context.oneNoteListContext.startNumberOverride;
+            }
+            delete context.oneNoteListContext.listStyleType;
+        }
+    }
+
+    context.defaultElementProcessors.li?.(group, element, context);
+
+    if (removeStartNumberOverride) {
+        delete context.listFormat.levels[context.listFormat.levels.length - 1].format
+            .startNumberOverride;
+    }
+};
+
+function ensureOneNoteListContext(cmContext: DomToModelContext): OneNoteDomToModelContext {
+    const context = cmContext as OneNoteDomToModelContext;
+
+    if (!context.oneNoteListContext) {
+        context.oneNoteListContext = {};
+    }
+
+    return context;
+}

packages/roosterjs-content-model-plugins/lib/paste/pasteSourceValidations/getPasteSource.ts

@@ -3,6 +3,7 @@ import { isExcelDesktopDocument } from './isExcelDesktopDocument';
 import { isExcelNotNativeEvent } from './isExcelNonNativeEvent';
 import { isExcelOnlineDocument } from './isExcelOnlineDocument';
 import { isGoogleSheetDocument } from './isGoogleSheetDocument';
+import { isOneNoteDesktopDocument } from './isOneNoteDocument';
 import { isPowerPointDesktopDocument } from './isPowerPointDesktopDocument';
 import { isWordDesktopDocument } from './isWordDesktopDocument';
 import { shouldConvertToSingleImage } from './shouldConvertToSingleImage';
@@ -31,7 +32,8 @@ export type KnownPasteSourceType =
     | 'wacComponents'
     | 'default'
     | 'singleImage'
-    | 'excelNonNativeEvent';
+    | 'excelNonNativeEvent'
+    | 'oneNoteDesktop';
 
 /**
  * @internal
@@ -47,6 +49,7 @@ const getSourceFunctions = new Map<KnownPasteSourceType, GetSourceFunction>([
     ['googleSheets', isGoogleSheetDocument],
     ['singleImage', shouldConvertToSingleImage],
     ['excelNonNativeEvent', isExcelNotNativeEvent],
+    ['oneNoteDesktop', isOneNoteDesktopDocument],
 ]);
 
 /**

packages/roosterjs-content-model-plugins/lib/paste/pasteSourceValidations/isOneNoteDocument.ts

@@ -0,0 +1,16 @@
+import { PastePropertyNames } from './constants';
+import type { GetSourceFunction } from './getPasteSource';
+
+const ONE_NOTE_ATTRIBUTE_VALUE = 'OneNote.File';
+
+/**
+ * @internal
+ * Checks whether the provided HTML attributes identify a OneNote Desktop document
+ * @param props Properties related to the PasteEvent
+ * @returns True if the document is identified as a OneNote Desktop document, otherwise false
+ */
+export const isOneNoteDesktopDocument: GetSourceFunction = props => {
+    const { htmlAttributes } = props;
+    // The presence of this attribute confirms its origin from OneNote Desktop
+    return htmlAttributes[PastePropertyNames.PROG_ID_NAME] == ONE_NOTE_ATTRIBUTE_VALUE;
+};