microsoft / roosterjs Goto Github PK
View Code? Open in Web Editor NEWroosterjs is a framework-independent javascript rich text editor.
License: Other
roosterjs is a framework-independent javascript rich text editor.
License: Other
Using the following code snippet:
this.editor.addUndoSnapshot();
let contentElement = this.createNodeFromContent(content); // creates a <span> with the contents
this.editor.insertNode(contentElement, {
position: ContentPosition.Begin,
updateCursor: true,
replaceSelection: false,
insertOnNewLine: false,
});
this.editor.triggerContentChangedEvent('Source');
If the editor has a watermark placeholder, the content is inserted into the span containing the watermark. The content is then removed when the watermark is removed from the triggerContentChangedEvent
call.
Describe the bug
Style of numbers in number list is different with main text
To Reproduce
Steps to reproduce the behavior:
Expected behavior
the number "1." should have the same font size with text
To Reproduce
Steps to reproduce the behavior:
<div>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div><ol><li>BBBBBBB BBBBBBB BBB BB BBBBBBBBBB BB BBBBBBB BBB BB BBBBBBBBBBB (2d)<ul><li>a</li><li>CCCCCCCCC CCCC: CCCC CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCoCCCCCC</li></ul></li></ol><ol><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA (5d)</li><li>UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU. (3d)</li><li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li></ol>
Expected behavior
Text should be replaced
(sometimes it works, most times it doesn't)
Investigation so far
It looks like if you're trying add or remove elements (in this case the SPAN marker) under keypress event, there is a race condition which prevents your text from being replaced.
I've also made an attempt to fix the issue by using attribute only markers--adding them to the node's parent attribute list (this includes the node's index). There's at least one problem with this solution: the node's parent could be the contenteditable div itself, but the original issue is fixed.
A different attempt involved clearing the current selection and setting it back after calling remove markers, but that doesn't work (the selection range was created from scratch too).
Important: when I was investigating, I had to comment the code in ShowFormatState and ShowCursorPosition sample plugins as they also modify elements on the page to locate the source of the issue.
Device Information
Additional context
Add any other context about the problem here.
User may accidentally create multiple list element without other content between them, such as
[ul] content [/ul]
[ul]
[ul]
content...
[/ul]
[/ul]
The render result looks good but the actual HTML structure is wrong here. We should merge the two top-level [ul] tag into single one.
Blockquote,
Then it becomes:
testtest
Likely listening to EditorReady is enough
this causes we don't know that selection is changed.
When toggle header on existing header elements, we will unwrap the header elements first, this cause the selection to be lost, thus only the line where cursor is located (most likely the last line in original selection) gets toggled.
Describe the bug
AltGr+Z should input ż, but not trigger Undo
To Reproduce
Expected behavior
Type "ż"
Device Information
Describe the bug
Why is enter tag div instead of P?
To Reproduce
Expected behavior
enter tag is p
Screenshots
Device Information
all
Additional context
how to modify enter tag with p?
This causes issue in scenario where we try and dirty check.
Describe the bug
Touch + pen isn't supported when trying to resize image, page just pans
Also, drag target/red blocks are really small for touch
Device Information
Additional context
Pen seems to be working for RS2
current wiki:
This page is under construction. Please come back later, thanks!
Expect:
doc about design compile pack
What browsers and devices does roosterjs support?
Describe the bug
Sometimes Ctrl+I can't cancel italic style, similar with B,U
To Reproduce
Steps to reproduce the behavior:
(1) Type something
(2) Press 'ctrl+i'
(3) Continue typing, now in italics, and finish a word without hitting space
(4) Press 'ctrl+i'
(5) Hit space, and continue typing
Expected behavior
Not italic anymore
Device Information
How to combine Redux, for example, multiple editor instances, to save a history to reudx, and use redux-undo to undo/redo
We should probably do something similar here that we do for title/alt text.
Make sure we are not in bold state, and don't select anything.
Ctrl+B (now it is in bold state)
Ctrl+B again
Expect: it should not be bold now
Actual: it is still bold
This only repro in Chrome.
This can be fixed if we don't add undo snapshot in execCommand().
Consider support different types in sub number list. e.g.:
We are trying to import roosterjs-react into our product and in process, have a step that ensures that the plugin being imported has no circular dependencies.
Unfortunately, importing roosterjs-editor-dom is causing this step to fail due to the following circular dependency:
Circular dependency in modules.
Attempting to add
roosterjs-editor-dom\lib\blockElements\NodeBlockElement.js
Dependencies:
Do you think we can have a single dist file or are there any other ways to address this?
Today, clear formatting does not remove a few stylings (bullets, number list, etc)
There is a check in undo code:
if (snapshot) ...
This check will fail when snapshot is an empty string. We should allow empty string as snapshot.
In office apps, when you use highlighting without any selection, then click on highlight will initiate the highlight and will highlight everything I select until I release the cursor. that is not the experience i see in the new rich text contro
We should consider supporting AMD module when compile and publish.
One solution is to have different lib folders, such as
lib
lib-amd
...
http://foo.com/{bar}
"}" should be included in auto link result.
Repro:
RoosterJS base its insertion on object model.
For inserting at begin, it finds first block and insert content before it.
For inserting at end, it finds last block and insert content after it.
The current object model in RoosterJS has the block concept which essentially represents a parsing boundary, and is not equipped with Table or List. A List item or a table cell is a block, but beyond that (list or table), object model does not know.
So when you insert at end, and the end happens to be a table cell. The content will be inserted after the cell, but before the closing TR/Table.
A possible fix, as I discussed with Jia is to introduce a ContentBlock concept to representing block larger than block we have, i.e. TR, Table, List. BlockElement cannot be nested, but ContentBlock can be nested. For inserting at end and end is a table cell, we should go from a block element, and find topest Content Block and insert after.
Regards,
Nick Huang
Today, we just have clear format and set background (white)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.