roosterjs 9.55.0 → 9.56.0

package/dist/rooster-amd.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 9.55.0)
+// Type definitions for roosterjs (Version 9.56.0)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -102,6 +102,11 @@ export type ContentModelHyperLinkFormat = LinkFormat & TextColorFormat & Backgro
  */
 export type ContentModelCodeFormat = FontFamilyFormat & DisplayFormat;
 
+/**
+ * The format object for a data element (<data>) in Content Model
+ */
+export type ContentModelDataFormat = DataValueFormat;
+
 /**
  * Type for FormatContainer
  */
@@ -216,6 +221,10 @@ export interface ContentModelFormatMap {
      * Format type for code
      */
     code: FontFamilyFormat;
+    /**
+     * Format type for data, used by HTML <data> element
+     */
+    data: ContentModelDataFormat;
     /**
      * Format type for dataset
      */
@@ -284,6 +293,10 @@ export interface FormatHandlerTypeMap {
      * Format for DatasetFormat
      */
     dataset: DatasetFormat;
+    /**
+     * Format for DataValueFormat, used by HTML <data> element
+     */
+    dataValue: DataValueFormat;
     /**
      * Format for DirectionFormat
      */
@@ -505,6 +518,16 @@ export type LetterSpacingFormat = {
     letterSpacing?: string;
 };
 
+/**
+ * Format of the value of a HTML "data" element
+ */
+export type DataValueFormat = {
+    /**
+     * The machine-readable value, represented by the "value" attribute of a HTML "data" element
+     */
+    dataValue?: string;
+};
+
 /**
  * Format of line height
  */
@@ -2170,6 +2193,10 @@ export interface ContentModelSegmentBase<T extends ContentModelSegmentType, TFor
      * Code info
      */
     code?: ContentModelCode;
+    /**
+     * Data info, used by HTML &lt;data&gt; element
+     */
+    data?: ContentModelData;
 }
 
 /**
@@ -2194,6 +2221,10 @@ export interface ReadonlyContentModelSegmentBase<T extends ContentModelSegmentTy
      * Code info
      */
     readonly code?: ReadonlyContentModelCode;
+    /**
+     * Data info, used by HTML &lt;data&gt; element
+     */
+    readonly data?: ReadonlyContentModelData;
 }
 
 /**
@@ -2208,6 +2239,10 @@ export interface ShallowMutableContentModelSegmentBase<T extends ContentModelSeg
      * Code info
      */
     code?: ContentModelCode;
+    /**
+     * Data info, used by HTML &lt;data&gt; element
+     */
+    data?: ContentModelData;
 }
 
 /**
@@ -2241,6 +2276,22 @@ export interface ContentModelCode extends MutableMark, ContentModelWithFormat<Co
 export interface ReadonlyContentModelCode extends ReadonlyMark, ReadonlyContentModelWithFormat<ContentModelCodeFormat> {
 }
 
+/**
+ * Represent data info of Content Model, used by HTML &lt;data&gt; element.
+ * ContentModelData is a decorator but not a standalone model type, instead it need to be put inside a ContentModelSegment
+ * since the &lt;data&gt; element is also a kind of segment, with some extra information
+ */
+export interface ContentModelData extends MutableMark, ContentModelWithFormat<ContentModelDataFormat> {
+}
+
+/**
+ * Represent data info of Content Model, used by HTML &lt;data&gt; element. (Readonly)
+ * ContentModelData is a decorator but not a standalone model type, instead it need to be put inside a ContentModelSegment
+ * since the &lt;data&gt; element is also a kind of segment, with some extra information
+ */
+export interface ReadonlyContentModelData extends ReadonlyMark, ReadonlyContentModelWithFormat<ContentModelDataFormat> {
+}
+
 /**
  * Represent link info of Content Model.
  * ContentModelLink is not a standalone model type, instead it need to be put inside a ContentModelSegment
@@ -2286,12 +2337,12 @@ export interface ReadonlyContentModelParagraphDecorator extends ReadonlyMark, Re
 /**
  * Union type for segment decorators
  */
-export type ContentModelDecorator = ContentModelLink | ContentModelCode | ContentModelListLevel;
+export type ContentModelDecorator = ContentModelLink | ContentModelCode | ContentModelData | ContentModelListLevel;
 
 /**
  * Union type for segment decorators (Readonly)
  */
-export type ReadonlyContentModelDecorator = ReadonlyContentModelLink | ReadonlyContentModelCode | ReadonlyContentModelListLevel;
+export type ReadonlyContentModelDecorator = ReadonlyContentModelLink | ReadonlyContentModelCode | ReadonlyContentModelData | ReadonlyContentModelListLevel;
 
 /**
  * Content Model of List Level
@@ -3047,6 +3098,10 @@ export interface DomToModelDecoratorContext {
      * Context of code info
      */
     code: ContentModelCode;
+    /**
+     * Context of data info, used by HTML &lt;data&gt; element
+     */
+    data: ContentModelData;
     /**
      * Context for paragraph decorator
      */
@@ -7362,9 +7417,10 @@ export function createTableCell(spanLeftOrColSpan?: boolean | number, spanAboveO
  * @param text Text of this model
  * @param format @optional The format of this model
  * @param link @optional The link decorator
- * @param code @option The code decorator
+ * @param code @optional The code decorator
+ * @param data @optional The data decorator
  */
-export function createText(text: string, format?: Readonly<ContentModelSegmentFormat>, link?: ReadonlyContentModelLink, code?: ReadonlyContentModelCode): ContentModelText;
+export function createText(text: string, format?: Readonly<ContentModelSegmentFormat>, link?: ReadonlyContentModelLink, code?: ReadonlyContentModelCode, data?: ReadonlyContentModelData): ContentModelText;
 
 /**
  * Create a ContentModelImage model

package/dist/rooster-amd.js

@@ -16811,6 +16811,8 @@ function createAriaLiveElement(document) {
     div.style.height = '1px';
     div.style.overflow = 'hidden';
     div.style.position = 'absolute';
+    div.style.top = '0';
+    div.style.left = '0';
     div.style.whiteSpace = 'nowrap';
     div.style.width = '1px';
     div.ariaLive = 'assertive';
@@ -17612,6 +17614,9 @@ function createDomToModelDecoratorContext() {
         code: {
             format: {},
         },
+        data: {
+            format: {},
+        },
         blockDecorator: {
             format: {},
             tagName: '',
@@ -17683,6 +17688,7 @@ exports.defaultProcessorMap = void 0;
 var brProcessor_1 = __webpack_require__(/*! ../processors/brProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/brProcessor.ts");
 var childProcessor_1 = __webpack_require__(/*! ../processors/childProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/childProcessor.ts");
 var codeProcessor_1 = __webpack_require__(/*! ../processors/codeProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/codeProcessor.ts");
+var dataProcessor_1 = __webpack_require__(/*! ../processors/dataProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/dataProcessor.ts");
 var delimiterProcessor_1 = __webpack_require__(/*! ../processors/delimiterProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/delimiterProcessor.ts");
 var elementProcessor_1 = __webpack_require__(/*! ../processors/elementProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/elementProcessor.ts");
 var entityProcessor_1 = __webpack_require__(/*! ../processors/entityProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/entityProcessor.ts");
@@ -17709,6 +17715,7 @@ exports.defaultProcessorMap = {
     blockquote: knownElementProcessor_1.knownElementProcessor,
     br: brProcessor_1.brProcessor,
     code: codeProcessor_1.codeProcessor,
+    data: dataProcessor_1.dataProcessor,
     dd: formatContainerProcessor_1.formatContainerProcessor,
     del: knownElementProcessor_1.knownElementProcessor,
     div: knownElementProcessor_1.knownElementProcessor,
@@ -17964,6 +17971,33 @@ var codeProcessor = function (group, element, context) {
 exports.codeProcessor = codeProcessor;
 
 
+/***/ },
+
+/***/ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/dataProcessor.ts"
+/*!*****************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/domToModel/processors/dataProcessor.ts ***!
+  \*****************************************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.dataProcessor = void 0;
+var knownElementProcessor_1 = __webpack_require__(/*! ./knownElementProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/knownElementProcessor.ts");
+var parseFormat_1 = __webpack_require__(/*! ../utils/parseFormat */ "./packages/roosterjs-content-model-dom/lib/domToModel/utils/parseFormat.ts");
+var stackFormat_1 = __webpack_require__(/*! ../utils/stackFormat */ "./packages/roosterjs-content-model-dom/lib/domToModel/utils/stackFormat.ts");
+/**
+ * @internal
+ */
+var dataProcessor = function (group, element, context) {
+    (0, stackFormat_1.stackFormat)(context, { data: 'empty' }, function () {
+        (0, parseFormat_1.parseFormat)(element, context.formatParsers.data, context.data.format, context);
+        (0, knownElementProcessor_1.knownElementProcessor)(group, element, context);
+    });
+};
+exports.dataProcessor = dataProcessor;
+
+
 /***/ },
 
 /***/ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/delimiterProcessor.ts"
@@ -19402,13 +19436,14 @@ var SkippedStylesForTable = [
  * @internal
  */
 function stackFormat(context, options, callback) {
-    var segmentFormat = context.segmentFormat, blockFormat = context.blockFormat, linkFormat = context.link, codeFormat = context.code, decoratorFormat = context.blockDecorator;
-    var segment = options.segment, paragraph = options.paragraph, link = options.link, code = options.code, blockDecorator = options.blockDecorator;
+    var segmentFormat = context.segmentFormat, blockFormat = context.blockFormat, linkFormat = context.link, codeFormat = context.code, dataFormat = context.data, decoratorFormat = context.blockDecorator;
+    var segment = options.segment, paragraph = options.paragraph, link = options.link, code = options.code, data = options.data, blockDecorator = options.blockDecorator;
     try {
         context.segmentFormat = stackFormatInternal(segmentFormat, segment);
         context.blockFormat = stackFormatInternal(blockFormat, paragraph);
         context.link = stackLinkInternal(linkFormat, link);
         context.code = stackCodeInternal(codeFormat, code);
+        context.data = stackDataInternal(dataFormat, data);
         context.blockDecorator = stackDecoratorInternal(decoratorFormat, blockDecorator);
         callback();
     }
@@ -19417,6 +19452,7 @@ function stackFormat(context, options, callback) {
         context.blockFormat = blockFormat;
         context.link = linkFormat;
         context.code = codeFormat;
+        context.data = dataFormat;
         context.blockDecorator = decoratorFormat;
     }
 }
@@ -19459,6 +19495,16 @@ function stackCodeInternal(codeFormat, code) {
             return codeFormat;
     }
 }
+function stackDataInternal(dataFormat, data) {
+    switch (data) {
+        case 'empty':
+            return {
+                format: {},
+            };
+        default:
+            return dataFormat;
+    }
+}
 function stackDecoratorInternal(format, decorator) {
     switch (decorator) {
         case 'empty':
@@ -22241,6 +22287,7 @@ var borderColorFormatHandler_1 = __webpack_require__(/*! ./common/borderColorFor
 var borderFormatHandler_1 = __webpack_require__(/*! ./common/borderFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts");
 var boxShadowFormatHandler_1 = __webpack_require__(/*! ./common/boxShadowFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/boxShadowFormatHandler.ts");
 var datasetFormatHandler_1 = __webpack_require__(/*! ./common/datasetFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/datasetFormatHandler.ts");
+var dataValueFormatHandler_1 = __webpack_require__(/*! ./segment/dataValueFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/dataValueFormatHandler.ts");
 var directionFormatHandler_1 = __webpack_require__(/*! ./block/directionFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/block/directionFormatHandler.ts");
 var displayFormatHandler_1 = __webpack_require__(/*! ./block/displayFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/block/displayFormatHandler.ts");
 var entityFormatHandler_1 = __webpack_require__(/*! ./entity/entityFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/entity/entityFormatHandler.ts");
@@ -22286,6 +22333,7 @@ var defaultFormatHandlerMap = {
     borderColor: borderColorFormatHandler_1.borderColorFormatHandler,
     boxShadow: boxShadowFormatHandler_1.boxShadowFormatHandler,
     dataset: datasetFormatHandler_1.datasetFormatHandler,
+    dataValue: dataValueFormatHandler_1.dataValueFormatHandler,
     direction: directionFormatHandler_1.directionFormatHandler,
     display: displayFormatHandler_1.displayFormatHandler,
     float: floatFormatHandler_1.floatFormatHandler,
@@ -22427,6 +22475,7 @@ exports.defaultFormatKeysPerCategory = {
     ],
     segmentUnderLink: ['textColor'],
     code: ['fontFamily', 'display'],
+    data: ['dataValue'],
     dataset: ['dataset'],
     divider: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sharedBlockFormats), false), (0, tslib_1.__read)(sharedContainerFormats), false), ['display', 'size', 'htmlAlign'], false),
     container: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sharedContainerFormats), false), ['htmlAlign', 'size', 'display', 'id'], false),
@@ -22717,6 +22766,37 @@ exports.boldFormatHandler = {
 };
 
 
+/***/ },
+
+/***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/dataValueFormatHandler.ts"
+/*!***************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/dataValueFormatHandler.ts ***!
+  \***************************************************************************************************/
+(__unused_webpack_module, exports) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.dataValueFormatHandler = void 0;
+/**
+ * @internal
+ * Format handler for the "value" attribute of a HTML <data> element
+ */
+exports.dataValueFormatHandler = {
+    parse: function (format, element) {
+        var _a;
+        if (element.hasAttribute('value')) {
+            format.dataValue = (_a = element.getAttribute('value')) !== null && _a !== void 0 ? _a : '';
+        }
+    },
+    apply: function (format, element) {
+        if (format.dataValue != undefined) {
+            element.setAttribute('value', format.dataValue);
+        }
+    },
+};
+
+
 /***/ },
 
 /***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/fontFamilyFormatHandler.ts"
@@ -23757,9 +23837,9 @@ exports.shouldSetValue = shouldSetValue;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.isLinkUndeletable = exports.setLinkUndeletable = exports.scrollRectIntoView = exports.normalizeRect = exports.isWhiteSpacePreserved = exports.reuseCachedElement = exports.findClosestBlockEntityContainer = exports.isBlockEntityContainer = exports.isEntityDelimiter = exports.addDelimiters = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = exports.unwrap = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getSafeIdSelector = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.getMetadata = exports.updateMetadata = exports.buildSelectionMarker = exports.isBlockElement = exports.areSameFormats = exports.parseFormat = exports.getRegularSelectionOffsets = exports.formatContainerProcessor = exports.tableProcessor = exports.entityProcessor = exports.processChildNode = exports.handleRegularSelection = exports.childProcessor = exports.contentModelToText = exports.contentModelToDom = exports.domToContentModel = void 0;
-exports.trimModelForSelection = exports.getDOMInsertPointRect = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.defaultGenerateColorKey = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.getAutoListStyleType = exports.getOrderedListNumberStr = exports.ParagraphFormats = exports.ListFormatsToMove = exports.ListFormatsToKeep = exports.ListFormats = exports.copyFormat = exports.setParagraphNotImplicit = exports.normalizeSegmentFormat = exports.mergeTextSegments = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addCode = exports.addBlock = exports.mutateSegment = exports.mutateSegments = exports.mutateBlock = exports.createTableRow = exports.createEmptyModel = exports.createListLevel = exports.createDivider = exports.createEntity = exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = exports.createContentModelDocument = void 0;
-exports.getClosestAncestorBlockGroupIndex = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.setFirstColumnFormatBorders = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModelForPaste = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.isBlockGroupOfType = exports.getRangesByText = exports.getImageState = exports.setImageState = exports.getParagraphMarker = exports.setParagraphMarker = exports.cacheGetEventData = exports.extractClipboardItems = exports.normalizeFontFamily = exports.transformColor = exports.retrieveDocumentMetadata = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.getNodePositionFromEvent = exports.isCursorMovingKey = exports.isModifierKey = exports.isCharacterValue = void 0;
-exports.EmptySegmentFormat = exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.getListMetadata = exports.updateListMetadata = exports.getTableMetadata = exports.updateTableMetadata = exports.getTableCellMetadata = exports.updateTableCellMetadata = exports.getImageMetadata = exports.updateImageMetadata = exports.runEditSteps = void 0;
+exports.getDOMInsertPointRect = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.defaultGenerateColorKey = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.getAutoListStyleType = exports.getOrderedListNumberStr = exports.ParagraphFormats = exports.ListFormatsToMove = exports.ListFormatsToKeep = exports.ListFormats = exports.copyFormat = exports.setParagraphNotImplicit = exports.normalizeSegmentFormat = exports.mergeTextSegments = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addData = exports.addCode = exports.addBlock = exports.mutateSegment = exports.mutateSegments = exports.mutateBlock = exports.createTableRow = exports.createEmptyModel = exports.createListLevel = exports.createDivider = exports.createEntity = exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = exports.createContentModelDocument = void 0;
+exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.setFirstColumnFormatBorders = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModelForPaste = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.isBlockGroupOfType = exports.getRangesByText = exports.getImageState = exports.setImageState = exports.getParagraphMarker = exports.setParagraphMarker = exports.cacheGetEventData = exports.extractClipboardItems = exports.normalizeFontFamily = exports.transformColor = exports.retrieveDocumentMetadata = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.getNodePositionFromEvent = exports.isCursorMovingKey = exports.isModifierKey = exports.isCharacterValue = exports.trimModelForSelection = void 0;
+exports.EmptySegmentFormat = exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.getListMetadata = exports.updateListMetadata = exports.getTableMetadata = exports.updateTableMetadata = exports.getTableCellMetadata = exports.updateTableCellMetadata = exports.getImageMetadata = exports.updateImageMetadata = exports.runEditSteps = exports.getClosestAncestorBlockGroupIndex = void 0;
 var domToContentModel_1 = __webpack_require__(/*! ./domToModel/domToContentModel */ "./packages/roosterjs-content-model-dom/lib/domToModel/domToContentModel.ts");
 Object.defineProperty(exports, "domToContentModel", ({ enumerable: true, get: function () { return domToContentModel_1.domToContentModel; } }));
 var contentModelToDom_1 = __webpack_require__(/*! ./modelToDom/contentModelToDom */ "./packages/roosterjs-content-model-dom/lib/modelToDom/contentModelToDom.ts");
@@ -23873,7 +23953,9 @@ Object.defineProperty(exports, "addBlock", ({ enumerable: true, get: function ()
 var addDecorators_1 = __webpack_require__(/*! ./modelApi/common/addDecorators */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/addDecorators.ts");
 Object.defineProperty(exports, "addCode", ({ enumerable: true, get: function () { return addDecorators_1.addCode; } }));
 var addDecorators_2 = __webpack_require__(/*! ./modelApi/common/addDecorators */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/addDecorators.ts");
-Object.defineProperty(exports, "addLink", ({ enumerable: true, get: function () { return addDecorators_2.addLink; } }));
+Object.defineProperty(exports, "addData", ({ enumerable: true, get: function () { return addDecorators_2.addData; } }));
+var addDecorators_3 = __webpack_require__(/*! ./modelApi/common/addDecorators */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/addDecorators.ts");
+Object.defineProperty(exports, "addLink", ({ enumerable: true, get: function () { return addDecorators_3.addLink; } }));
 var addTextSegment_1 = __webpack_require__(/*! ./modelApi/common/addTextSegment */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/addTextSegment.ts");
 Object.defineProperty(exports, "addTextSegment", ({ enumerable: true, get: function () { return addTextSegment_1.addTextSegment; } }));
 var normalizeParagraph_1 = __webpack_require__(/*! ./modelApi/common/normalizeParagraph */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeParagraph.ts");
@@ -24194,7 +24276,7 @@ exports.addBlock = addBlock;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.addDecorators = exports.addCode = exports.addLink = void 0;
+exports.addDecorators = exports.addData = exports.addCode = exports.addLink = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 /**
  * @internal
@@ -24221,12 +24303,27 @@ function addCode(segment, code) {
     }
 }
 exports.addCode = addCode;
+/**
+ * @internal
+ * Add a data decorator into segment if any
+ * @param segment The segment to add decorator to
+ * @param data The data decorator to add
+ */
+function addData(segment, data) {
+    if (data.format.dataValue != undefined) {
+        segment.data = {
+            format: (0, tslib_1.__assign)({}, data.format),
+        };
+    }
+}
+exports.addData = addData;
 /**
  * @internal
  */
 function addDecorators(segment, context) {
     addLink(segment, context.link);
     addCode(segment, context.code);
+    addData(segment, context.data);
 }
 exports.addDecorators = addDecorators;
 
@@ -24511,7 +24608,8 @@ function segmentsWithSameFormat(seg1, seg2) {
     return (!!seg1.isSelected == !!seg2.isSelected &&
         (0, areSameFormats_1.areSameFormats)(seg1.format, seg2.format) &&
         areSameLinks(seg1.link, seg2.link) &&
-        areSameCodes(seg1.code, seg2.code));
+        areSameCodes(seg1.code, seg2.code) &&
+        areSameData(seg1.data, seg2.data));
 }
 function areSameLinks(link1, link2) {
     return ((!link1 && !link2) ||
@@ -24523,6 +24621,9 @@ function areSameLinks(link1, link2) {
 function areSameCodes(code1, code2) {
     return (!code1 && !code2) || (code1 && code2 && (0, areSameFormats_1.areSameFormats)(code1.format, code2.format));
 }
+function areSameData(data1, data2) {
+    return (!data1 && !data2) || (data1 && data2 && (0, areSameFormats_1.areSameFormats)(data1.format, data2.format));
+}
 
 
 /***/ },
@@ -25608,9 +25709,10 @@ var addDecorators_1 = __webpack_require__(/*! ../common/addDecorators */ "./pack
  * @param text Text of this model
  * @param format @optional The format of this model
  * @param link @optional The link decorator
- * @param code @option The code decorator
+ * @param code @optional The code decorator
+ * @param data @optional The data decorator
  */
-function createText(text, format, link, code) {
+function createText(text, format, link, code, data) {
     var result = {
         segmentType: 'Text',
         text: text,
@@ -25622,6 +25724,9 @@ function createText(text, format, link, code) {
     if (code) {
         (0, addDecorators_1.addCode)(result, code);
     }
+    if (data) {
+        (0, addDecorators_1.addData)(result, data);
+    }
     return result;
 }
 exports.createText = createText;
@@ -26089,7 +26194,7 @@ function cloneBlockGroupBase(group, options) {
     };
 }
 function cloneSegmentBase(segment) {
-    var segmentType = segment.segmentType, isSelected = segment.isSelected, code = segment.code, link = segment.link;
+    var segmentType = segment.segmentType, isSelected = segment.isSelected, code = segment.code, link = segment.link, data = segment.data;
     var newSegment = Object.assign({
         segmentType: segmentType,
         isSelected: isSelected,
@@ -26100,6 +26205,9 @@ function cloneSegmentBase(segment) {
     if (link) {
         newSegment.link = Object.assign(cloneModelWithFormat(link), cloneModelWithDataset(link));
     }
+    if (data) {
+        newSegment.data = cloneModelWithFormat(data);
+    }
     return newSegment;
 }
 function cloneEntity(entity, options) {
@@ -30135,7 +30243,7 @@ var moveChildNodes_1 = __webpack_require__(/*! ../../domUtils/moveChildNodes */
  * @internal
  */
 var handleSegmentDecorator = function (_, parent, segment, context) {
-    var code = segment.code, link = segment.link;
+    var code = segment.code, link = segment.link, data = segment.data;
     if ((0, isNodeOfType_1.isNodeOfType)(parent, 'ELEMENT_NODE')) {
         if (link) {
             (0, stackFormat_1.stackFormat)(context, 'a', function () {
@@ -30154,6 +30262,14 @@ var handleSegmentDecorator = function (_, parent, segment, context) {
                 (_a = context.onNodeCreated) === null || _a === void 0 ? void 0 : _a.call(context, code, codeNode);
             });
         }
+        if (data) {
+            (0, stackFormat_1.stackFormat)(context, 'data', function () {
+                var _a;
+                var dataNode = (0, moveChildNodes_1.wrapAllChildNodes)(parent, 'data');
+                (0, applyFormat_1.applyFormat)(dataNode, context.formatAppliers.data, data.format, context);
+                (_a = context.onNodeCreated) === null || _a === void 0 ? void 0 : _a.call(context, data, dataNode);
+            });
+        }
     }
 };
 exports.handleSegmentDecorator = handleSegmentDecorator;
@@ -30338,7 +30454,20 @@ exports.handleText = handleText;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.mergeNode = void 0;
 var isNodeOfType_1 = __webpack_require__(/*! ../../domUtils/isNodeOfType */ "./packages/roosterjs-content-model-dom/lib/domUtils/isNodeOfType.ts");
-var OptimizeTags = ['SPAN', 'B', 'EM', 'I', 'U', 'SUB', 'SUP', 'STRIKE', 'S', 'A', 'CODE'];
+var OptimizeTags = [
+    'SPAN',
+    'B',
+    'EM',
+    'I',
+    'U',
+    'SUB',
+    'SUP',
+    'STRIKE',
+    'S',
+    'A',
+    'CODE',
+    'DATA',
+];
 /**
  * @internal
  */