RoosterJs 8.49.0 and RoosterJs Content Model 0.8.0

New feature

• Undo with entity (#1791)
• Allow picture shadows to set a custom margin around image (#1853)

Code clean up

• Remove the support of ShadowDOM entity (#1841)

Bug fix

• Clicking on images brings different spacing (#1846)
• Fix #1322: Copying some table structure transform the table to single line text (#1843)
• Use default format for empty line below entity (#1858)

Content Model

• Add Size Format Handler to tables (#1838)
• Remove Table temp elements from Word Online (#1842)
• Improve link and heading behavior (#1812)
• Fix bug: Inline entity got removed then added back (repeatly) when keep writing back using Content Model (#1848)
• Maintain selection on empty line (#1814)
• Fix #1802 Default format is not applied when type in a not-empty line (#1805)
• Fix list bug when pasting from Word Online (#1855)
• Make paste with content model a public api instead of a Editor Class member (#1852)
• Fix #1839: Fix toggleBold on heading text (#1845)
• Fix bug when pasting from Outlook Win 32 to Rooster (#1857)

Engineering improvement

• Make roosterjs work with nodejs 17+ (#1849, #1851)
• mprove test running performance, show correct callstack (#1854)

Interface change

• New extracted API for copy/paste
  • handleImagePaste: Handles the content when using the Image Paste Option
  • handleTextPaste: handle the content when using the text only option
  • retrieveMetadataFromClipboard: Retrieves the metadata from the content inside of the clipboard
  • sanitizePasteContent: Sanitize the content from the pasted content
  • getPasteType: Get the paste type that will be used corresponding to the configuration
• New function/interfaces for the "Undo with Entity" feature:
  • New extracted API for extract snapshot metadata
    • extractContentMetadata: Extract content metadata from DOM tree
  • New property of interface EntityPluginState
    • entityMap: Entities cached for undo snapshot
  • New enum value of enum EntityOperation
    • UpdateEntityState: Notify plugins that a new entity state need to be updated to an entity. This is normally happened when user undo/redo the content with an entity snapshot added by a plugin that handles entity
  • New property of interface EntityOperationEventData
    • state: For EntityOperation.UpdateEntityState, we use this object to pass the new entity state to plugin. For other operation types, it is not used.
    • shouldPersist: For EntityOperation.NewEntity, plugin can set this property to true then the entity will be persisted. A persisted entity won't be touched during undo/redo, unless it does not exist after undo/redo. For other operation types, this value will be ignored.
  • New property of interface ContentChangedData
    • getEntityState: Get entity states related to the snapshot. If it returns entity states, each state will cause an EntityOperation event with operation = EntityOperation.UpdateEntityState when undo/redo to this snapshot
  • New property of interface Snapshot
    • entityStates: Entity states related to this undo snapshots. When undo/redo to this snapshot, each entity state will trigger an EntityOperation event with operation = EntityOperation.UpdateEntityState
  • New interface
    • EntityState: State for an entity. This is used for storing entity undo snapshot
    • KnownEntityItem: Represents all info of a known entity, including its DOM element, whether it is deleted and if it can be persisted

RoosterJS to v8.48.0 and Content-Model package to 0.7.0

Improvement

• Support context menu in ImageSelection Plugin (#1831)
• Make overflowButtonProps (of Ribbon props) propagate (#1807)
• Fix dialog can't be closed through pressing esc key (#1811)

Bug fix

• Fix image resize handle icon when image is rotated (#1801)
• Fix inline image disappearing issue when edit an image pasted from Word Online (#1806, #1829)
• Fix Incorrect Content removal inside of delimiter (#1817)
• Ignore dummy list in a list when calculate list number (#1821)

Content Model

• Fix delete issues (#1799, #1834)
• Fix table cell shading when split a table cell (#1808)
• Copy/Paste using Content Model (#1798, #1810, #1825, #1835, #1836)
• Merge format when merge model (#1813)
• Move default format back to DIV (#1819)
• Support Ctrl+Delete/Backspace (#1822, #1823, #1824, #1826, #1827)

Engineering improvement

• Strict mode for Picker Plugin (#1830, #1832)

RoosterJs 8.47.0 and RoosterJs Content Model 0.6.0

Improvement

• Support onenote: and mailto: protocols when pasting links (#1794)
• Allow focus after entity when insert a new entity (#1792)

Bug fix

• Ensure list type increases correctly (#1771)
• Fix TypeError: Cannot read properties of null (reading 'getInlineElementBefore') (#1789)

Graduate experimental features

• ListItemAlignment (#1765)
• VariableBasedDarkColor (#1767)

Content Model

• Content fidelity improvement (#1757, #1759, #1762, #1763, #1764, #1778, #1780, #1781, #1783, #1793)
• Content editing improvement (#1787)
• Paste with Content Model (#1717, #1777, #1782)
• Bug fix: Underline doesn't work well for subscript and superscript text (#1768)
• Bug fix: Reuse Content Model is not working correctly (#1775)
• Bug fix: Fix editing with default format issue (#1773)
• Bug fix: Only optimize paragraph (#1793)

Engineering improvement

• Show a visible border when hover on Cotnent Model in demo site (#1756)

Interface changes

• New parameter of API insertEntity
  • focusAfterEntity: When pass true, focus will be moved next to the entity. For inline entity, focus will be after right after the entity (and the delimiter if exist). For block entity, focus will be in the new empty line below the entity.
• New event type and event object
  • BeforeKeyboardEditing: (Experimental feature) Editor content is about to be changed by keyboard event. This is only used by Content Model editing
• New enum
  • PasteType: Used for paste options to determine which paste option user selected
• New member in interface BeforePasteEventData
  • pasteType: Pate type option, as plain text, image, merge format or normal

RoosterJs 8.46.0 and RoosterJs Contenet Model 0.5.0

Bug fix

• Fix #1713: Copy paste bullet list item doesn't work, copies just empty span instead of content inside. (#1718)
• Fix Uncaught TypeError: Cannot read properties of undefined (#1725)
• Fix TableCellSelection bug (#1744)
• Fix paste table from Excel loses table issue (#1749)

Improvement

• Make additionalTagReplacements allow null value type. (#1745)
• Don't return focus to editor when blur on image (#1742)

Content Model

• toggleBlockQuote API accept ContentModelBlockFormat and ContentModelSegmentFormat (#1720)
• insertLink API triggers ContentChangedEvent with source "CreateLink" (#1703)
• Allow Content Model API to remove image border (#1733)
• Fix #1684: respect direction style from parent container when process list (#1730)
• Fix #1664: Contente Model editing plugin work together with original plugins (#1728, #1740)
• Content Model fidelity improvement (#1731, #1732, #1751, #1753)
• Improve DefaultFormat behavior (#1743)
• Copy/Paste with Content Model (#1716, #1758)

Engineering improvement

• Add test cases for ImageEdit plugin (#1714)
• Enable strict mode for TableCellSelection plugin (#1722, #1735, #1736, #1737)

Interface changes

• New Core API createFragmentFromClipboardData: Create a DocumentFragment for paste from a ClipboardData
• New utility API getPasteSource: This function tries to get the source of the Pasted content
• New ExperimentalFeatures:
  • DefaultFormatOnContainer: Apply default format on editor container
  • ContentModelPaste: Paste with Content model
• New enum type KnownPasteSourceType: Represent the types of sources to handle in the Paste Plugin

RoosterJs 8.45.0 and RoosterJs Content Model 0.4.0

New features

• Add content edit features for code block (#1669)
• Paste as image feature (#1710)

Improvement

• Table resize: Fixed plus sign position on table handle (#1657)
• Fix for pasting an Excel Online table inside RoosterJS table (#1659)
• Do not apply text and background color when not necessary (#1700)
• Remove max-width when editing image (#1707)
• Fix image resize after rotate (#1704)
• Split IndentWithTab and OutdentWhenShiftTab to be able to disable the Alt+Shift+Arrow hotkey (#1706)

Content Model

• Handle Delete and Backspace (#1660)
• Fix Font controls became blank after multiple clicks (#1674)
• Support "No Color" for table cell shade (#1679)
• Add "FormatContainer" block group type (#1667, #1668)
• Merge continuous undo snapshots (#1663)
• Bug fix: Setting again after clearing bullets and numbering does not respond (#1681)
• Support shadow edit in Content Model editor (#1693, #1694, #1695, #1696)
• Prevent content model from acting on undefined cell (#1701)
• Improve the behavior of deleting general element (#1680)

Bug fix

• Fix unexpected error in getBlockElementAtNode.ts (#1709)

Engineering improvment

• Enable Strict Mode in packages\roosterjs-editor-api\lib\format (#1678)
• Enable Strict Mode in ContentEdit plugin (#1671)
• Enable Strict Mode in Paste plugin (#1685, #1687)

Interface changes

• New base class of Editor: EditorBase<TEditorCore, TEditorOptoins>. Now Editor class does not contain too much content, instead it inherits everything from EditorBase, except the way to build editor core. So you create your own Editor class now with your customized editor core and options.
• New editor customization API and type
  • isFeatureEnabled: Check if an experimental feature is enabled
  • createEditorCore: Create the default editor core instance
  • CoreCoreator: A type for EditorCore creator function
• New parameter of IEditor/Editor API paste and core API CreatePasteFragment
  • pasteAsImage: Whether we want to paste image only
• New enum value of ChangeSource:
  • Keyboard: Content is changed using keyboard
• New core API
  • select: change editor selection using provided information
• New content edit feature/feature set
  • indentWhenAltShiftRight: indent when press Alt+Shift+Right
  • outdentWhenAltShiftLeft: outdent when press Alt+Shift+Left
  • removeCodeWhenEnterOnEmptyLine: Remove code block when press Enter on empty line within code block
  • removeCodeWhenBackspaceOnEmptyFirstLine: Remove code block when press Backspace on empty first line within code block
  • CodeFeatureSettings: Content Edit feature about Code block
• New string key for paste option button:
  • pasteOptionPasteAsImage: String key for paste as image

RoosterJs 8.44.2

Improvement

• Improve image edit behavior (#1634, #1633, #1638)
• Keep improving entity delimiter feature (#1644, #1640)

Bug fix

• Fix Tab/ShiftTab indenting for lists on Mac (#1645)
• Do not add BR when pasting two LI blocks (#1646)

Content Model

• Move keyboard editing feature behind a parameter
• Cache table (#1648, #1649)
• Improve setAlignment API (#1650)
• Add Image Format to getFormatState (#1656)
• Support default format in Content Model (#1655)

Engineering improvement

• Strict Mode for Format Utils in API Package (#1647)
• Strict Mode for Table Folder in API Package (#1648)

RoosterJs 8.44.0 and RoosterJs Content Model 0.3.0

Improvement

• Readonly Inline Entity delimiter support (cont.) (#1581, #1582, #1606, #1608, #1620, #1614, #1622, #1628, #1629, #1632)
• Delete image with delete key (#1605)
• Trigger Image Edit Event when change image (#1600)
• Use keypress instead of keydown in AutoFormat plugin (#1607)
• Dark color improvement for unrecognized color (#1609)
• Allow nots: protocol when paste (#1626)

Bug fix

• Fix a null-ref bug in VList (#1611)
• Prevent table block from passing undefined cell to normalizeContentModel (#1617)

Content Model improvement

• Support inline CODE style (#1536)
• Show correct font when jump between table cells (#1612)
• Fix a bug in normalization (#1613)
• Fix fidelity issue of list (#1624)
• Fix format change while editing (#1625)

Interface changes

• Readonly inline entity delimter related changes:
  • Change parameter type and return type of addDelimiters()
  • New API:
    • addDelimiterBefore
    • addDelimiterAfter
  • Change parameter type of API getDelimiterFromElement
• New experimental feature
  • ReusableContentModel: Reuse existing DOM structure if possible when convert Content Model back to DOM tree
• New member in interface ElementBasedFormatState and FormatState:
  • isCodeInline: Whether the text is in Code element
• New parmater of DarkColorHandler.parseColorValue():
  • isDarkMode: Whether current content is in dark mode. When set to true, if the color value is not in dark var format, we will treat is as a dark mode color and try to find a matched dark mode color.
• New parameter of core API TransformColor:
  • fromDarkMode: Whether the given content is already in dark mode
• New content editor features:
  • moveBetweenDelimitersFeature: Content edit feature to move the cursor from Delimiters around Entities when using Right or Left Arrow Keys
  • removeEntityBetweenDelimiters: Content edit Feature to trigger a Delete Entity Operation when one of the Delimiter is about to be removed with DELETE or Backspace

RoosterJs 8.43.0 and RoosterJs Content Model 0.2.0

New feature

• Add dir and textAlign in FormatState (#1590)

Improvement

• Inline entity improvement for cursor behavior (part 1) (#1580, #1602)
• Dark color improvement:
  • Fix color issue with Font tag (#1595)
  • Fix #1585: DarkColorHandler need to remember used color across editor session (#1587)
• Delete table with backspace, if whole table is selected (#1583)

Bug fix

• Fix #1586 text-decoration is removed from HtmlSanitizer (#1597)

Content Model

• Improve PRE tag in model (#1601)
• Improve pending format behavior (#1598)
• Improve getFormatState API, return undefined for multiple value styles (#1594)
• Improve clearFormat API (#1579)
• Preserve segment format when insert table (#1574)
• Keep root level entity when format with Content Model (#1573)

Engineering improvement

• Enabled Strict Mode on Image Edit Plugin (#1596)

Interface changes

• New entity related type and API
  • enum DelimiterClasses: Class names for entity Delimiter
  • addDelimiters: Adds delimiters to the element provided
  • getDelimiterFromElement: Retrieves Delimiter information from a provided element.
• New color utility
  • parseColor: Parse color string to r/g/b value.
• New experimental features
  • DeleteTableWithBackspace: Delete table with Backspace key with the whole was selected with table selector
  • InlineEntityReadOnlyDelimiters: Add entities around a Read Only Inline entity to prevent cursor to be hidden when cursor is next of it
• New members of interface StyleBasedFormatState and FormatState
  • textAlign: Text Align
  • direction: Direction of the element ('ltr' or 'rtl')
• New member of interface Snapshot
  • knownColors: Known colors for dark mode
• New members of interface DarkColorHandler
  • getKnownColorsCopy: Get a copy of known colors
  • findLightColorFromDarkColor: Find related light mode color from dark mode color
• New Content Edit feature (under TableFeatureSettings interface)
  • deleteTableWithBackspace: Requires ExperimentalFeatures.DeleteTableWithBackspace, delete a table selected with the table selector pressing Backspace key

RoosterJs 8.42.0 and RoosterJs Content Model 0.1.0

Announce RoosterJs Content Model (Preview)

Content Model is a new way to represent content in HTML editor, to help better doing format, and more. It convert HTML content into a JSON object then all other format API will operate on this JSON object then convert it back to HTML.

This is the first preview version of Content Model. Now you can get it from npm with package name and version "[email protected]". Please check out this example of how to use roosterjs Content Model: https://codepen.io/jiuqingsong/pen/rNrXVyB

Note: RoosterJs Content Model is still under development, the public interfaces is still not very stable yet so please expect frequently breaking changes in the future.

New features added to Content Model

• New image edit ability
  • Image Border
  • Image Shadow
  • Change Image
• Paragraph line space settings and API

Bug fix

• Fix list trigger before a paragraph (#1540)
• Dismiss image edit border when focus out of editor (#1558)
• Add filter to client rects (#1560)
• Check if there is rotate handle, before update the rotate handles (#1568)
• Disable list indentation hotkey on mac (#1552)
• Fix a pending format issue in firefox (#1572)

Interface change

• New members of interface StyleBasedFormatState
  • lineHeight: Line height of the element
  • marginTop: Top margin of the element
  • marginBottom: Bottom margin of the element

RoosterJs 8.41.0

New features

• Variable based dark color (Experimentail feature: VariableBasedDarkColor) (#1531)
  Implement dark mode using variable-based CSS color. To use this feature, enable experimental feature VariableBasedDarkColor and check all your function calls to setColor() and applyFormat() of roosterjs then add parameter darkColorHandler to them.
• Support isCodeBlock in FormatState (#1533)
• Support canMergeTableCell in FormatState (#1526)

Improvement

• Do image editing on top of shadow DOM (#1520)

Bug fix

• remove new max-width for new inline image (#1527)

Engineering improvement

• Load fluent ui from cdnjs for demo site (#1525)

Interface change

• New Experimental feature
  • VariableBasedDarkColor: Use variable-based dark mode solution rather than dataset-based solution. When enable this feature, need to pass in a DarkModelHandler object to each call of setColor and applyFormat if you need them work for dark mode
• New parameter of API applyFormat, setColor
  • darkColorHandler: A color handler for dark mode for new variable-based dark mode solution
• New interface DarkColorHandler
  • registerColor(lightModeColor: string, isDarkMode: boolean, darkModeColor?: string): string;
    Given a light mode color value and an optional dark mode color value, register this color so that editor can handle it, then return the CSS color value for current color mode.
  • reset(): void;
    Reset known color record, clean up registered color variables.
  • parseColorValue(color: string | null | undefined): ColorKeyAndValue;
    Parse an existing color value, if it is in variable-based color format, extract color key, light color and query related dark color if any.
• New member of interface EditorCore
  • darkColorHandler: Dark model handler for the editor, used for variable-based solution. If keep it null, editor will still use original dataset-based dark mode solution.
• New method or IEditor and Editor
  • getDarkColorHandler: Get a dark color handler for variable-based dark mode solution. Need to enable experimental feature VariableBasedDarkColor
• New member of interface ElementBasedFormatState
  • isCodeBlock: Whether the text is in Code block
  • canMergeTableCell: Whether we can execute table cell merge operation