Bump version to 8.44.0 (#1627)

* convert alpha to decimals * fix auto format list * add null and refactor * Content Model Selection API step 4: Refactor existing table API (#1479) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Support element with namespace (#1489) * Content Model: Fix a bug when process margin (#1493) * Fix margin issue * Fix test * Fix A tag without href (#1495) * Fix Cut/Copy page scroll issue (#1496) * Fix Cut/Copy page scroll issue * Fix test * fix image plugin z-index calc * Content Model Format State Step 1: Refactor formatSegmentWithContentModel() (#1490) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * Improve * update condition per comments * Content Model Format State Step 2: Allow retrieving metadata directly (#1491) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * FormatState step 2 * Improve * Content Model Format State Step 3: Add getFormatState API and ContentModelPlugin (#1492) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * FormatState step 2 * FormatState step 3: Add getFormatState API and ContentModel plugin * Improve * Improve * Improve * fix test * improve, fix safari issue * fix test * wip * WIP * wip * Content Model: Add API clearFormat (#1497) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * FormatState step 2 * FormatState step 3: Add getFormatState API and ContentModel plugin * Improve * Content Model: clearFormat * fix build * Improve * Improve * fix test * improve, fix safari issue * fix test * remove wrapper when content change * fix * Content Model: Move format API: link, image, captalization, ... (#1506) * Selection API step 1 * Selection API 2 * New selection API * Refactor table API * add test * Format state step 1 * FormatState step 2 * FormatState step 3: Add getFormatState API and ContentModel plugin * Improve * Content Model: clearFormat * fix build * Improve * Improve * fix test * improve, fix safari issue * fix test * ContentModel: Support insertLink and removeLink * changeCapitalization and setImageAltText * fix for image selection * refactor * refactor * Test image edit with ShadowDOM * improve * Fix #1509 (#1511) * ContentModel: Improve Divider (#1513) * ContentModel: Improve Divider * Add BorderFormat to ContentModelBlockFormat * Add test * fix build * Content Model: Support "no color" when set color (#1514) * Content Model: Support "no color" when set color * improve * Content Model: Use Entity handle readonly element (#1515) * image wrapper using shadow dom * Content Model: Support get and apply segment format (#1518) * Do not merge table when insert a table (#1519) * wip * Content Model: Fix #1239 (#1521) * WIP AND fix for span height * stop dragging * comment * prototype * remove change * prevent drag * remove new max-width * Load fluent ui from cdnjs (#1525) * small changes * Content Model: Improve selection (#1526) * Apply format to word where cursor is located (#1367) * attempt with traversers * attempt using splitTextNode * Return to original implementation * Fix build * implementation with content model * Implement word selection with new content model * removed selectWordFromCollapsedRange.ts * optimization fixes and file changes * standardize function and remove castings * fix paragraph and pending state * fix pending state, name change * Added test cases, disabled end or start of word * fixed dependency * fix pending state * more tests * fixed tests * End of word format fix (#1528) * End of word format fix Fix scenario where format was wrongly applied where the cursor was located at the end of a word * add tests * Variable based dark color (#1531) * Variable based dark color * fix test * improve * Improve * Fix comment * Fix #1532: Support isCode in FormatState (#1533) * Fix #1532 * add comment * fix build * fix comment * Bump ua-parser-js from 0.7.31 to 0.7.33 (#1535) Bumps [ua-parser-js](https://github.com/faisalman/ua-parser-js) from 0.7.31 to 0.7.33. - [Release notes](https://github.com/faisalman/ua-parser-js/releases) - [Changelog](https://github.com/faisalman/ua-parser-js/blob/master/changelog.md) - [Commits](faisalman/ua-parser-js@0.7.31...0.7.33) --- updated-dependencies: - dependency-name: ua-parser-js dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix #1529 #1530 and 187095 (#1534) * WIP * test and fixes * unit tests * fix list trigger * Content Model: Adjust selection for link to select a word (#1538) * Content Model: Adjust word selection for link * add test * fix build * Fix table format (#1541) * refactor * move comment * Content Model code simplify 1 (#1544) * Content Model code simplify 2: Clean up EditorContext (#1545) * Content Model code simplify 1 * Content Model: Clean up EditorContext * improve * Content Model code simplify 3: Remove get/setPendingFormat from editor interface (#1546) * Content Model code simplify 1 * Content Model: Clean up EditorContext * improve * Content Model: Remove get/setPendingFormat * Add support for paragraph line spacing for content model (#1543) * Fetch line height from children * Create new content model api * Spacing btn * Fix tests * Remove key from roosterjs-react * testing * Allow segment to hold lineHeight format * Remove lineHeight from segments whenever possible * Fix imports * Remove normalization * Add todo for edge case * Render segment line height * Content Model Editor 1: Rename interface IExperimentalContentModelEditor (#1547) * Content Model code simplify 1 * Content Model: Clean up EditorContext * improve * Content Model: Remove get/setPendingFormat * Content Model: Rename IExperimentalContentModelEditor * fix build * WIP PROTOTYPE * Content Model Editor 2: Publish ContentModelEditor class (#1548) * Content Model code simplify 1 * Content Model: Clean up EditorContext * improve * Content Model: Remove get/setPendingFormat * Content Model: Rename IExperimentalContentModelEditor * Publish ContentModelEditor class * fix build * add test * fix build * fix build * Reorganize Contente Model code (#1555) * blur issue * Fix some block format issues (#1554) * Fix some block format issues * Improve * Content Model: Fix image size for outlook (#1556) * Content Model: Fix image size for outlook * Fix build * fix build * improve * add filter to client rects * Content Model: Support align table to center (#1557) * simply code * Content Model: Fix PRE tag (#1559) * Content Model: Support insert image with src (#1563) * Content Model: Get init segment format from root container (#1567) * Content Model: Get init segment format from root container * Improve * add test * Add missing setSpacing comment (#1564) * do not call updateHandle * check viewport * Content Model: Improve pending format implementation (#1570) * Disable list indentation on mac (#1552) * Disable list indentation on mac * Switch to default disabled * Content Model: Improve hyperlink handling (#1569) * Add support for adding/removing space before/after paragraphs in content model (#1565) * Create api for block margins * Create space before after buttons * Update testing * Fix by using decorator * Replace positive value with none * Treat no margin as space removed * Fix testing * Improve tag name selecting * testing * rename and improve logic * Add support for formatState on onClick call * Update button impl * Revert "Update button impl" This reverts commit edce3ad. * Revert "Add support for formatState on onClick call" This reverts commit 3d6b83d. * use getFormatState() * Update test name * Fix a pending format issue in firefox (#1572) * Content Model: Keep root level entity when format with Content Model (#1573) * Content Model: Preserve segment format when insert table (#1574) * delete table * delete table * fix enum * refactor * Fix #1585 (#1587) * strict mode * remove file * add zeros * enable strict mode * Content Model: Improve clearFormat API (#1579) * Content Model: Improve clearFormat * Improve * Improve * fix build * improve * WIP * Content Model: Improve getFormatState (#1594) * Fix color issue with Font tag (#1595) * refactor * Fix #1586 (#1597) * Add `dir` and `textAlign` in `FormatState` (#1590) Co-authored-by: Echo Li <[email protected]> * uncoment * Step 1: Add HTMLSpanElements around ReadOnly Inline entities to prevent cursor issues, (#1580) * init * add tests and build fixes * Fix failing tests in EntityPlugin * Fix comments * Fix comments * Move functionality to insertEntity * typedoc * refactor * refactor * add tests * Content Model: Improve pending format behavior (#1598) * Improve pending format behavior * fix test * trigger plugin event * fix build * remove code * Add flight check in InsertEntity #1602 * Improve PRE again (#1601) * Step 2: Prevent user from typing inside of readonly entities around the Readonly Inline Entity (#1581) * init * add tests and build fixes * Fix failing tests in EntityPlugin * Prevent user from typing inside of the * Add unit tests * Fix comments * Fix comments * remove typed text from Delimiter * add unit tests * Add selection condition and remove KeyUp * delete image with delete key * preventDefault * Content Model: Support inline CODE style #1536 (#1603) * #1536 * fix build * fix build * add test * Step 3: Add Content Edit Features to prevent cursor to be stuck between ZeroWidthSpace & ReadOnly Entity (#1582) * init * add tests and build fixes * Fix failing tests in EntityPlugin * Prevent user from typing inside of the * Add contentEditable Entities * Add unit tests * add Unit tests * fix test and typeDef * try fix tests * Fix comments * Fix comments * remove typed text from Delimiter * add unit tests * Add contentEditable Entities * add Unit tests * fix test and typeDef * try fix tests * unit tests * re run tests * refactor * Add selection condition and remove KeyUp * More to another file path * remove dup function * Fix * Update comments * refactor * change keydown to keypress * add char * Inline Entity Content Edit Features improvements. (#1606) * inline Entity fixes * Add delimiter to content model * Use isFeatureEnabled instead * Revert "Use isFeatureEnabled instead" This reverts commit a09aa3a. * Revert "Add delimiter to content model" This reverts commit 59be341. * add null check * Improve dark color again (#1609) * Improve dark color again * fix insertContent when source is light and target is dark * Delimiters in Content Model (#1608) * inline Entity fixes * Add delimiter to content model * Use isFeatureEnabled instead * Remove * Add comment * fix comments and add unit tests * fix build * Update comment * Add more comments * Show correct font when jump between table cells (#1612) * Type assert (#1617) * Content Model: Fix a bug in normalization (#1613) * Fix table selection regression (#1618) * Fix Arrow Keys + Delimiter bug (#1620) * Fix * add Unit test * Add delimiters To InlineReadonly Entities on EditorReady and Paste (#1614) * Add delimiters on EditorReady and Paste * Handle ContentChanged Event * Add a unit test * Fix * Fix build * Reuse Content Model (#1610) * Reuse Content Model * fix test * fix test * add comment * improve * improve * Improve * fix test * improve * Handle Enter in a Delimiter (#1622) When pressing Enter on a delimiter, usually when the entity is at the end of the block or is the only element in the block, sometimes the delimiter element is moved away from the Entity or the element after Enter also contains the Delimiter class. This PR adds functionality to prevent this from happening. Before ![DelimiterEnterBefore](https://user-images.githubusercontent.com/8291124/223553792-8b236323-9ca9-4393-8c5e-63c9043fc040.gif) After ![DelimiterEnterAfter](https://user-images.githubusercontent.com/8291124/223554716-0dedd8e7-d035-43fc-9639-ebc7a570007c.gif) * add check and do not sanitize Notes protocol (#1626) * Content Model: Fix fidelity issue of list (#1624) * Content Model: Fix fidelity issue of list * fix demo * Content Model: Fix format change while editing (#1625) * Content Model: Fix format change while editing * add test * Improve Movement Between Delimiters (#1628) The Content Edit was not working when cursor was between Entities, this PR fixes it, To Repro add multiple Readonly inline entities together. Without this change we had to use Arrow Key twice, now we only need to press it once * Improve deletion of entities (#1630) mprove the Content Edit Feature to delete delimiters. If After the Content Edit was handled: If the Entity still exists, add the delimiter removed. If the entity was removed in the ContentChanged Event, remove the Delimiters. If the event was not default prevented, select the delimiters and entity and let the browser handle the deletion. Also, in EntityPlugin if the known entity removed is a inline entity, normalize delimiters * Handle Selection Not Collapsed for delimiters (#1629) Handle a scenario where the delimiter is removed when user selects the text + delimiter. Repro Add Entity type Next and Before the Entity Select the text after/before the entity press a key the modified the content Actual: The delimiter is removed in some scenarios Expected: Do not remove the delimiter To fix modify the selection and prevent the user typing inside of the delimiter when selection is not collapsed * Check delimiter classes when adding Delimiters to a new Entity #1632 I was only checking if the element was a delimiter, but also need to check that the classes are correct, Otherwise, if the next sibling of the entity that we are adding the delimiters is a delimiterBefore of another entity, we won't add the delimiter after. --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Shai Petel <[email protected]> Co-authored-by: Shai Petel <[email protected]> Co-authored-by: Andres-CT98 <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ian Elizondo <[email protected]> Co-authored-by: Echo-az <[email protected]> Co-authored-by: Echo Li <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]> Co-authored-by: charlxu <[email protected]>
microsoft · Mar 10, 2023 · 43dcb15 · 43dcb15
1 parent c41ac57
commit 43dcb15
Show file tree

Hide file tree

Showing 175 changed files with 5,601 additions and 1,001 deletions.
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelCodeView.scss b/demo/scripts/controls/contentModel/components/model/ContentModelCodeView.scss
@@ -0,0 +1,3 @@
+.modelCode {
+    background-color: #093;
+}
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelCodeView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelCodeView.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ContentModelCode } from 'roosterjs-content-model';
+import { ContentModelView } from '../ContentModelView';
+import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatRenderer';
+import { FormatView } from '../format/FormatView';
+
+const styles = require('./ContentModelCodeView.scss');
+
+export function ContentModelCodeView(props: { code: ContentModelCode }) {
+    const { code } = props;
+
+    const getFormat = React.useCallback(() => {
+        return <FormatView format={code.format} renderers={[FontFamilyFormatRenderer]} />;
+    }, [code.format]);
+
+    return (
+        <ContentModelView
+            title="Code"
+            className={styles.modelCode}
+            jsonSource={code}
+            getFormat={getFormat}
+        />
+    );
+}
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelGeneralView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelGeneralView.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { BlockGroupContentView } from './BlockGroupContentView';
+import { ContentModelCodeView } from './ContentModelCodeView';
 import { ContentModelLinkView } from './ContentModelLinkView';
 import { ContentModelView } from '../ContentModelView';
 import { SegmentFormatView } from '../format/SegmentFormatView';
@@ -15,10 +16,12 @@ export function ContentModelGeneralView(props: { model: ContentModelGeneralBlock
     const { model } = props;
     const segment = isGeneralSegment(model) ? model : undefined;
     const link = segment?.link;
+    const code = segment?.code;
     const getContent = React.useCallback(() => {
         return (
             <>
                 {link ? <ContentModelLinkView link={link} /> : null}
+                {code ? <ContentModelCodeView code={code} /> : null}
                 <BlockGroupContentView group={model} />
             </>
         );

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelImageView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelImageView.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ContentModelCodeView } from './ContentModelCodeView';
 import { ContentModelImage, ContentModelImageFormat } from 'roosterjs-content-model';
 import { ContentModelLinkView } from './ContentModelLinkView';
 import { ContentModelView } from '../ContentModelView';
@@ -56,7 +57,8 @@ export function ContentModelImageView(props: { image: ContentModelImage }) {
                     />
                     Image selection
                 </div>
-                {image.link ? <ContentModelLinkView link={image.link} /> : null}
+                {image.link ? <ContentModelLinkView link={image.link} /> : null}{' '}
+                {image.code ? <ContentModelCodeView code={image.code} /> : null}
             </>
         );
     }, [src, imageSelected, image.link]);

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx
@@ -9,6 +9,7 @@ import { FormatView } from '../format/FormatView';
 import { ListMetadataFormatRenderers } from '../format/formatPart/ListMetadataFormatRenderers';
 import { ListThreadFormatRenderers } from '../format/formatPart/ListThreadFormatRenderer';
 import { ListTypeFormatRenderer } from '../format/formatPart/ListTypeFormatRenderer';
+import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
 import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRenderer';
 import { useProperty } from '../../hooks/useProperty';
 import {
@@ -25,6 +26,7 @@ const ListLevelFormatRenders: FormatRenderer<ContentModelListItemLevelFormat>[]
     ...ListThreadFormatRenderers,
     ...ListMetadataFormatRenderers,
     ...DirectionFormatRenderers,
+    MarginFormatRenderer,
 ];
 
 const ListItemFormatHolderRenderers: FormatRenderer<ContentModelSegmentFormat>[] = [

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelSelectionMarkerView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelSelectionMarkerView.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ContentModelCodeView } from './ContentModelCodeView';
 import { ContentModelLinkView } from './ContentModelLinkView';
 import { ContentModelSelectionMarker } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
@@ -10,7 +11,12 @@ export function ContentModelSelectionMarkerView(props: { marker: ContentModelSel
     const { marker } = props;
 
     const getContent = React.useCallback(() => {
-        return marker.link ? <ContentModelLinkView link={marker.link} /> : null;
+        return (
+            <>
+                {marker.link ? <ContentModelLinkView link={marker.link} /> : null}
+                {marker.code ? <ContentModelCodeView code={marker.code} /> : null}
+            </>
+        );
     }, [marker.link]);
 
     const getFormat = React.useCallback(() => {

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelTextView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelTextView.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ContentModelCodeView } from './ContentModelCodeView';
 import { ContentModelLinkView } from './ContentModelLinkView';
 import { ContentModelText } from 'roosterjs-content-model';
 import { ContentModelView } from '../ContentModelView';
@@ -23,6 +24,7 @@ export function ContentModelTextView(props: { text: ContentModelText }) {
             <>
                 <textarea ref={textArea} onChange={onChange} value={value} />
                 {text.link ? <ContentModelLinkView link={text.link} /> : null}
+                {text.code ? <ContentModelCodeView code={text.code} /> : null}
             </>
         );
     }, [text, value, text.link]);

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbon.tsx
@@ -8,6 +8,7 @@ import { boldButton } from './boldButton';
 import { bulletedListButton } from './bulletedListButton';
 import { changeImageButton } from './changeImageButton';
 import { clearFormatButton } from './clearFormatButton';
+import { codeButton } from './codeButton';
 import { decreaseFontSizeButton } from './decreaseFontSizeButton';
 import { decreaseIndentButton } from './decreaseIndentButton';
 import { fontButton } from './fontButton';
@@ -35,6 +36,8 @@ import { setHeaderLevelButton } from './setHeaderLevelButton';
 import { setNumberedListStyleButton } from './setNumberedListStyleButton';
 import { setTableCellShadeButton } from './setTableCellShadeButton';
 import { setTableHeaderButton } from './setTableHeaderButton';
+import { spaceAfterButton, spaceBeforeButton } from './spaceBeforeAfterButtons';
+import { spacingButton } from './spacingButton';
 import { strikethroughButton } from './strikethroughButton';
 import { subscriptButton } from './subscriptButton';
 import { superscriptButton } from './superscriptButton';
@@ -48,8 +51,6 @@ import {
     tableMergeButton,
     tableSplitButton,
 } from './tableEditButtons';
-import { spacingButton } from './spacingButton';
-import { spaceAfterButton, spaceBeforeButton } from './spaceBeforeAfterButtons';
 
 const buttons = [
     formatPainterButton,
@@ -78,6 +79,7 @@ const buttons = [
     subscriptButton,
     strikethroughButton,
     setHeaderLevelButton,
+    codeButton,
     ltrButton,
     rtlButton,
     clearFormatButton,

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/codeButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/codeButton.ts
@@ -0,0 +1,18 @@
+import { CodeButtonStringKey, RibbonButton } from 'roosterjs-react';
+import { isContentModelEditor, toggleCode } from 'roosterjs-content-model';
+
+/**
+ * @internal
+ * "Code" button on the format ribbon
+ */
+export const codeButton: RibbonButton<CodeButtonStringKey> = {
+    key: 'buttonNameCode',
+    unlocalizedText: 'Code',
+    iconName: 'Code',
+    isChecked: formatState => !!formatState.isCodeInline,
+    onClick: editor => {
+        if (isContentModelEditor(editor)) {
+            toggleCode(editor);
+        }
+    },
+};
diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentEditFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ContentEditFeatures.tsx
@@ -49,6 +49,10 @@ const EditFeatureDescriptionMap: Record<keyof ContentEditFeatureSettings, string
         'When press space after an number, a letter or roman number followed by ), ., -, or between parenthesis in an empty line, toggle numbering',
     mergeListOnBackspaceAfterList: 'When backspacing between lists, merge the lists',
     deleteTableWithBackspace: 'Delete table with backspace key with whole table is selected',
+    moveBetweenDelimitersFeature:
+        'Content edit feature to move the cursor from Delimiters around Entities when using Right or Left Arrow Keys',
+    removeEntityBetweenDelimiters:
+        'When using BACKSPACE or DELETE in a Readonly inline entity delimeter, trigger a Entity Operation',
 };
 
 export interface ContentEditFeaturessProps {

diff --git a/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -32,6 +32,7 @@ const initialState: BuildInPluginState = {
         ExperimentalFeatures.DefaultFormatInSpan,
         ExperimentalFeatures.AutoFormatList,
         ExperimentalFeatures.VariableBasedDarkColor,
+        ExperimentalFeatures.ReusableContentModel,
         ExperimentalFeatures.InlineEntityReadOnlyDelimiters,
     ],
     isRtl: false,

diff --git a/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx
@@ -19,6 +19,8 @@ const FeatureNames: Partial<Record<ExperimentalFeatures, string>> = {
     [ExperimentalFeatures.DefaultFormatInSpan]:
         'When apply default format when initialize or user type, apply the format on a SPAN element.',
     [ExperimentalFeatures.VariableBasedDarkColor]: 'Use variable-based color for dark mode',
+    [ExperimentalFeatures.ReusableContentModel]:
+        'Reuse existing DOM structure if possible when convert Content Model back to DOM tree',
     [ExperimentalFeatures.DeleteTableWithBackspace]:
         'Delete a table selected with the table selector pressing Backspace key',
     [ExperimentalFeatures.InlineEntityReadOnlyDelimiters]:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.43.0",
+    "version": "8.44.0",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",

diff --git a/packages/roosterjs-content-model/lib/domToModel/context/createDomToModelContext.ts b/packages/roosterjs-content-model/lib/domToModel/context/createDomToModelContext.ts
@@ -32,6 +32,9 @@ export function createDomToModelContext(
             format: {},
             dataset: {},
         },
+        code: {
+            format: {},
+        },
 
         elementProcessors: {
             ...defaultProcessorMap,

diff --git a/packages/roosterjs-content-model/lib/domToModel/context/defaultProcessors.ts b/packages/roosterjs-content-model/lib/domToModel/context/defaultProcessors.ts
@@ -1,5 +1,6 @@
 import { brProcessor } from '../processors/brProcessor';
 import { childProcessor } from '../processors/childProcessor';
+import { delimiterProcessor } from '../processors/delimiterProcessor';
 import { elementProcessor } from '../processors/elementProcessor';
 import { ElementProcessorMap } from '../../publicTypes/context/DomToModelSettings';
 import { entityProcessor } from '../processors/entityProcessor';
@@ -55,4 +56,5 @@ export const defaultProcessorMap: ElementProcessorMap = {
     element: elementProcessor,
     entity: entityProcessor,
     child: childProcessor,
+    delimiter: delimiterProcessor,
 };
diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/delimiterProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/delimiterProcessor.ts
@@ -0,0 +1,21 @@
+import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
+import { getRegularSelectionOffsets } from '../utils/getRegularSelectionOffsets';
+import { handleRegularSelection } from './childProcessor';
+
+/**
+ * @internal
+ * @param group
+ * @param element
+ * @param context
+ */
+export const delimiterProcessor: ElementProcessor<HTMLSpanElement> = (group, element, context) => {
+    let index = 0;
+    const [nodeStartOffset, nodeEndOffset] = getRegularSelectionOffsets(context, element);
+
+    for (let child = element.firstChild; child; child = child.nextSibling) {
+        handleRegularSelection(index, context, group, nodeStartOffset, nodeEndOffset);
+        index++;
+    }
+
+    handleRegularSelection(index, context, group, nodeStartOffset, nodeEndOffset);
+};
diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/elementProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/elementProcessor.ts
@@ -1,7 +1,7 @@
 import { DomToModelContext } from '../../publicTypes/context/DomToModelContext';
 import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
 import { ElementProcessorMap } from '../../publicTypes/context/DomToModelSettings';
-import { getEntityFromElement } from 'roosterjs-editor-dom';
+import { getDelimiterFromElement, getEntityFromElement } from 'roosterjs-editor-dom';
 
 /**
  * @internal
@@ -12,6 +12,7 @@ import { getEntityFromElement } from 'roosterjs-editor-dom';
 export const elementProcessor: ElementProcessor<HTMLElement> = (group, element, context) => {
     const tagName = element.tagName.toLowerCase() as keyof ElementProcessorMap;
     const processor = (tryGetProcessorForEntity(element, context) ||
+        tryGetProcessorForDelimiter(element, context) ||
         context.elementProcessors[tagName] ||
         (tagName.indexOf(':') >= 0 && context.elementProcessors.child) ||
         context.elementProcessors['*']) as ElementProcessor<Node>;
@@ -24,3 +25,7 @@ function tryGetProcessorForEntity(element: HTMLElement, context: DomToModelConte
         ? context.elementProcessors.entity
         : null;
 }
+
+function tryGetProcessorForDelimiter(element: Node, context: DomToModelContext) {
+    return getDelimiterFromElement(element) ? context.elementProcessors.delimiter : null;
+}
diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/generalProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/generalProcessor.ts
@@ -1,5 +1,5 @@
 import { addBlock } from '../../modelApi/common/addBlock';
-import { addLink } from '../../modelApi/common/addLink';
+import { addDecorators } from '../../modelApi/common/addDecorators';
 import { addSegment } from '../../modelApi/common/addSegment';
 import { createGeneralBlock } from '../../modelApi/creators/createGeneralBlock';
 import { createGeneralSegment } from '../../modelApi/creators/createGeneralSegment';
@@ -31,7 +31,7 @@ const generalSegmentProcessor: ElementProcessor<HTMLElement> = (group, element,
         segment.isSelected = true;
     }
 
-    addLink(segment, context.link);
+    addDecorators(segment, context);
     addSegment(group, segment);
 
     stackFormat(

diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/imageProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/imageProcessor.ts
@@ -1,5 +1,5 @@
 import { addBlock } from '../../modelApi/common/addBlock';
-import { addLink } from '../../modelApi/common/addLink';
+import { addDecorators } from '../../modelApi/common/addDecorators';
 import { addSegment } from '../../modelApi/common/addSegment';
 import { ContentModelImageFormat } from '../../publicTypes/format/ContentModelImageFormat';
 import { createImage } from '../../modelApi/creators/createImage';
@@ -33,7 +33,7 @@ export const imageProcessor: ElementProcessor<HTMLImageElement> = (group, elemen
             const title = element.title;
 
             parseFormat(element, context.formatParsers.dataset, image.dataset, context);
-            addLink(image, context.link);
+            addDecorators(image, context);
 
             if (alt) {
                 image.alt = alt;

diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/knownElementProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/knownElementProcessor.ts
@@ -17,6 +17,7 @@ import { stackFormat } from '../utils/stackFormat';
 export const knownElementProcessor: ElementProcessor<HTMLElement> = (group, element, context) => {
     const isBlock = isBlockElement(element, context);
     const isLink = element.tagName == 'A' && element.hasAttribute('href');
+    const isCode = element.tagName == 'CODE';
 
     stackFormat(
         context,
@@ -78,7 +79,13 @@ export const knownElementProcessor: ElementProcessor<HTMLElement> = (group, elem
                 parseFormat(element, context.formatParsers.segment, context.segmentFormat, context);
             }
 
-            if (isLink) {
+            if (isCode) {
+                stackFormat(context, { code: 'codeDefault' }, () => {
+                    parseFormat(element, context.formatParsers.code, context.code.format, context);
+
+                    context.elementProcessors.child(group, element, context);
+                });
+            } else if (isLink) {
                 stackFormat(context, { link: 'linkDefault' }, () => {
                     parseFormat(element, context.formatParsers.link, context.link.format, context);
                     parseFormat(

diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/listItemProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/listItemProcessor.ts
@@ -1,6 +1,5 @@
 import { createListItem } from '../../modelApi/creators/createListItem';
 import { ElementProcessor } from '../../publicTypes/context/ElementProcessor';
-import { getDefaultStyle } from '../utils/getDefaultStyle';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
 
@@ -10,11 +9,7 @@ import { stackFormat } from '../utils/stackFormat';
 export const listItemProcessor: ElementProcessor<HTMLLIElement> = (group, element, context) => {
     const { listFormat } = context;
 
-    if (
-        listFormat.listParent &&
-        listFormat.levels.length > 0 &&
-        (element.style.display || getDefaultStyle(element, context).display) == 'list-item'
-    ) {
+    if (listFormat.listParent && listFormat.levels.length > 0) {
         stackFormat(
             context,
             {

diff --git a/packages/roosterjs-content-model/lib/domToModel/processors/textProcessor.ts b/packages/roosterjs-content-model/lib/domToModel/processors/textProcessor.ts
@@ -1,4 +1,4 @@
-import { addLink } from '../../modelApi/common/addLink';
+import { addDecorators } from '../../modelApi/common/addDecorators';
 import { addSegment } from '../../modelApi/common/addSegment';
 import { addSelectionMarker } from '../utils/addSelectionMarker';
 import { areSameFormats } from '../utils/areSameFormats';
@@ -57,7 +57,8 @@ function addTextSegment(group: ContentModelBlockGroup, text: string, context: Do
             lastSegment?.segmentType == 'Text' &&
             !!lastSegment.isSelected == !!context.isInSelection &&
             areSameFormats(lastSegment.format, context.segmentFormat) &&
-            areSameFormats(lastSegment.link || {}, context.link.format || {})
+            areSameFormats(lastSegment.link || {}, context.link.format || {}) &&
+            areSameFormats(lastSegment.code || {}, context.code.format || {})
         ) {
             lastSegment.text += text;
         } else if (
@@ -71,7 +72,8 @@ function addTextSegment(group: ContentModelBlockGroup, text: string, context: Do
                 textModel.isSelected = true;
             }
 
-            addLink(textModel, context.link);
+            addDecorators(textModel, context);
+
             addSegment(group, textModel, context.blockFormat);
         }
     }

diff --git a/packages/roosterjs-content-model/lib/domToModel/utils/addSelectionMarker.ts b/packages/roosterjs-content-model/lib/domToModel/utils/addSelectionMarker.ts
@@ -1,4 +1,4 @@
-import { addLink } from '../../modelApi/common/addLink';
+import { addDecorators } from '../../modelApi/common/addDecorators';
 import { addSegment } from '../../modelApi/common/addSegment';
 import { ContentModelBlockGroup } from '../../publicTypes/group/ContentModelBlockGroup';
 import { createSelectionMarker } from '../../modelApi/creators/createSelectionMarker';
@@ -10,6 +10,7 @@ import { DomToModelContext } from '../../publicTypes/context/DomToModelContext';
 export function addSelectionMarker(group: ContentModelBlockGroup, context: DomToModelContext) {
     const marker = createSelectionMarker(context.segmentFormat);
 
-    addLink(marker, context.link);
+    addDecorators(marker, context);
+
     addSegment(group, marker, context.blockFormat);
 }