Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content Model fidelity improvement 3: Block format #1751

Merged
merged 6 commits into from
Apr 27, 2023

Conversation

JiuqingSong
Copy link
Collaborator

I'll make a series changes to improve content model fidelity.

In this change I reorganize how block format is handled. Now we have 3 categories of block formats:

  1. Inheritable formats: declare once, affect all its children nodes, until it is overwritten. These styles will be kept in context and apply to all single blocks under the element where it is declared.
    • whiteSpace
    • direction
    • lineHeight
  2. Onetime formats: when declared, it will only impact the element where it is declared. In its child nodes these styles will not be preserved. We will use ContentModelFormatContainer to represent block groups with these formats.
    • margin-top
    • margin-bottom
    • padding-top
    • padding-bottom
    • border-*
    • backgroundColor
  3. Accumulateable formats: if declared in multiple layers, its value will be accumulated, until a FormatContainer is hit.
    • margin-left
    • margin-right
    • padding-left
    • padding-right

With this design, now I split original knownElementProcessor into several pieces:

  • blockDecoratorProcessor: Handle P, H1-H6 that is actually a decorator of a paragraph, then call knownElementProcessor to process its content. Now we will put block decorator into context so that other processor can also leverage it
  • linkProcessor and codeProcessor: Handle A and CODE that is actually a decorator of a segment, then call knownElementProcessor to process its content
  • formatContainerProcessor: Handle container-like element, includes PRE, BLOCKQUOTE (with top or bottom margin) and ohter block elements that has top/bottom margin/padding or background color.
  • knownElementProcessor: Handle normal paragraph and segment, then call childProcessor to handle content.

In order to make test case easier to write, I added an option to skip caching element for table when create Content Model.

@JiuqingSong JiuqingSong merged commit 38b93aa into master Apr 27, 2023
@JiuqingSong JiuqingSong deleted the u/jisong/fidelity3 branch April 27, 2023 19:40
JiuqingSong added a commit that referenced this pull request Apr 27, 2023
* add tests for image edit

* fix build

* Move getPasteSource from Plugins to Dom  (#1708)

* init

* try fix tests

* Content Model minor fix: Change parameter type (#1720)

* Content Model: Fix #1702 Hyperlinking a text doesnt trigger ChangeSource.CreateLink event (#1703)

* Content Model: Fix #1702

* fix build

* fix test

* fix build

* Fix #1713 (#1718)

* Fix Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode') (#1725)

* Fix Unhandled exception

* fix test

* remove unneeded changes

* Decouple logic from Table Cell Selection into smaller files. (#1722)

* Refactor

* Add comment

* Allow Content Model API to remove image border (#1733)

* Modify API to allow accepting null

* New demo button

* Testing

* Content Model: Fix #1684 (#1730)

* Content Model: Improve edit plugin (#1728)

* Content Model fidelity 1: Support lineHeight in list (#1731)

* [1/3] Enable Strict mode in TableCellSelection Utils + Plugin (#1735)

Enable Strict mode in Table Cell Selection Utils and the Plugin class

* Content Model fidelity improvement 2: Support size in divider (#1732)

* Content Model fidelity 2: Support size in divider

* fix test

* Content Model: Improve default format state (#1743)

* Content Model: Improve default format state

* add a test case

* Add check for empty selectors, and empty CSS rule insertion (#1744)

* add check for empty selectors, and empty cssRule

* fix test case

* Content Model: Fix #1738 delete space issue (#1740)

* Content Model: Fix #1738 delete space issue

* enable edit plugin in demo site by default

* Fix space issue

* fix cache behavior

* Make additionalTagReplacements allow `null` value type. (#1745)

* Fix additionalTagReplacements type in HtmlSanitizerOptions.ts

* Make compiler happy

* [2/3] Enable Strict mode on KeyDown Handler (#1736)

* Table cell selection strict mode 1

* enable strict mode on handleKeyDown

* [3/3] Enable Strict mode in Mouse Down Handler + Add Strict mode files (#1737)

* Table cell selection strict mode 1

* enable strict mode on handleKeyDown

* enable strict mode on mousedown

* merge conflicts

* Change from undefined to null

* Revert "Paste as image feature" - convertPastedContentFromExcel (#1749)

* revert only convertPastedContentFromExcel.ts

* Leverage Content Model to insert the Pasted content from clipboard (#1716)

In order to start using content model to insert clipboard content to the editor we need to do some refactor on some utilities:

Move the createPasteFragment logic from roosterjs-editor-core package to roosterjs-editor-dom, so we can also use the logic in roosterjs-content-model.
Add a new property to BeforePasteEvent to let other plugins modify the way we process elements in the paste fragment, this will be used later in another PR.
Create a new core api createPasteModel that will use the PasteFragment to create and return a content model document.
In the ContentModelEditor Class, override the paste function so, instead of using insertContent, use mergeModel function
Bugs that may be fixes by leveraging Content Model with this change:
#456
#1065
#1322 partially, only the paste part is fixed, copy needs to fixed in another PR.
#920

* Don't return focus to editor when blur on image (#1742)

* Don't return focus to editor when blur on image

* Comment

* Content Model fidelity improvement 3: Block format (#1751)

* Content Model fidelity improvement 3: Block format

* improve

* fix test

* Add a experimental feature for paste with ContentModel #1758

* 8.46.0

---------

Co-authored-by: Júlia Roldi <[email protected]>
Co-authored-by: Bryan Valverde U <[email protected]>
Co-authored-by: Julia Roldi <[email protected]>
Co-authored-by: Ian Elizondo <[email protected]>
Co-authored-by: Andres-CT98 <[email protected]>
Co-authored-by: Ruijun Gao <[email protected]>
JiuqingSong added a commit that referenced this pull request Jun 16, 2023
* add tests for image edit

* fix build

* Move getPasteSource from Plugins to Dom  (#1708)

* init

* try fix tests

* Content Model minor fix: Change parameter type (#1720)

* Content Model: Fix #1702 Hyperlinking a text doesnt trigger ChangeSource.CreateLink event (#1703)

* Content Model: Fix #1702

* fix build

* fix test

* fix build

* Fix #1713 (#1718)

* Fix Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode') (#1725)

* Fix Unhandled exception

* fix test

* remove unneeded changes

* Decouple logic from Table Cell Selection into smaller files. (#1722)

* Refactor

* Add comment

* Allow Content Model API to remove image border (#1733)

* Modify API to allow accepting null

* New demo button

* Testing

* Content Model: Fix #1684 (#1730)

* Content Model: Improve edit plugin (#1728)

* Content Model fidelity 1: Support lineHeight in list (#1731)

* [1/3] Enable Strict mode in TableCellSelection Utils + Plugin (#1735)

Enable Strict mode in Table Cell Selection Utils and the Plugin class

* Content Model fidelity improvement 2: Support size in divider (#1732)

* Content Model fidelity 2: Support size in divider

* fix test

* Content Model: Improve default format state (#1743)

* Content Model: Improve default format state

* add a test case

* Add check for empty selectors, and empty CSS rule insertion (#1744)

* add check for empty selectors, and empty cssRule

* fix test case

* Content Model: Fix #1738 delete space issue (#1740)

* Content Model: Fix #1738 delete space issue

* enable edit plugin in demo site by default

* Fix space issue

* fix cache behavior

* Make additionalTagReplacements allow `null` value type. (#1745)

* Fix additionalTagReplacements type in HtmlSanitizerOptions.ts

* Make compiler happy

* [2/3] Enable Strict mode on KeyDown Handler (#1736)

* Table cell selection strict mode 1

* enable strict mode on handleKeyDown

* [3/3] Enable Strict mode in Mouse Down Handler + Add Strict mode files (#1737)

* Table cell selection strict mode 1

* enable strict mode on handleKeyDown

* enable strict mode on mousedown

* merge conflicts

* Change from undefined to null

* Revert "Paste as image feature" - convertPastedContentFromExcel (#1749)

* revert only convertPastedContentFromExcel.ts

* Leverage Content Model to insert the Pasted content from clipboard (#1716)

In order to start using content model to insert clipboard content to the editor we need to do some refactor on some utilities:

Move the createPasteFragment logic from roosterjs-editor-core package to roosterjs-editor-dom, so we can also use the logic in roosterjs-content-model.
Add a new property to BeforePasteEvent to let other plugins modify the way we process elements in the paste fragment, this will be used later in another PR.
Create a new core api createPasteModel that will use the PasteFragment to create and return a content model document.
In the ContentModelEditor Class, override the paste function so, instead of using insertContent, use mergeModel function
Bugs that may be fixes by leveraging Content Model with this change:

* Don't return focus to editor when blur on image (#1742)

* Don't return focus to editor when blur on image

* Comment

* Content Model fidelity improvement 3: Block format (#1751)

* Content Model fidelity improvement 3: Block format

* improve

* fix test

* Add a experimental feature for paste with ContentModel #1758

* 8.46.0

---------

Co-authored-by: Júlia Roldi <[email protected]>
Co-authored-by: Bryan Valverde U <[email protected]>
Co-authored-by: Julia Roldi <[email protected]>
Co-authored-by: Ian Elizondo <[email protected]>
Co-authored-by: Andres-CT98 <[email protected]>
Co-authored-by: Ruijun Gao <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants