dalyisaac / onenote-markdown Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://onenote-markdown.azurewebsites.net/
License: MIT License
Home Page: https://onenote-markdown.azurewebsites.net/
License: MIT License
The inline styling for the below HTML is not found in the rendered React output.
<p id="p:{28216e73-1f0a-05fd-25c5-a04844147e70}{19}" style="color:#595959;font-style:italic;margin-top:0pt;margin-bottom:0pt">
Quote
</p>
Tasks:
Left-Rotate
functionLeft-Rotate
testRight-Rotate
functionRight-Rotate
testAt the moment, inputting new content into the editor causes a complete recompilation of OneNote HTML and Markdown. During the process of recompilation, React.createElement
is used to create new React elements. However, this causes the virtual DOM to re-render the text node, which results in the position of the caret being lost. Currently, the Selection
API is manually updated. However, during the process of Selection
being updated, either:
Additionally, the caret noticeably strafes between the start of the OneNote Markdown and the expected caret location.
The proposed solution is to implement something like https://github.com/lovasoa/react-contenteditable (which is in turn based on https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable/27255103#27255103). This works by:
shouldComponentUpdate
to avoid caret jumps, then the contenteditable never rerenders (at least on keystrokes)If the component never re-renders on key stroke, then React keeps an outdated virtual DOM for this contenteditable.
If React keeps an outdated version of the contenteditable in its virtual DOM tree, then if you try to reset the contenteditable to the value outdated in the virtual DOM, then during the virtual DOM diff, React will compute that there are no changes to apply to the DOM!
(Courtesy of https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable/27255103#27255103).
The nature of the proposed solution means that each StructureNode
should only be recompiled when an update occurs it specifically. This will prevent the entire OneNote Markdown from being re-rendered, improving performance.
The following should be investigated:
shouldComponentUpdate
behavior? (see https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)Currently, SENTINEL_INDEX = -1
, and SENTINEL
does not occupy the nodes
array at all.
Stages:
SENTINEL
to all nodes
instances.SENTINEL_INDEX
to 0
, and deal with any ensuing problems.Expected behavior
{!cite} Citat{!cite} ion
becomes
<cite>Citat{!cite} ion</cite>
Current behavior
<cite> ion</cite>
Insertion of content:
Insertion of formatting:
Part of #48
Markdown:
{color:red}Red{color:Red} text{color:red}
Expected behavior:
<span style="color:red">Red</span> text{color:red}
Current behavior:
{color:red}Red{color:Red} text{color:red}
Markdown:
{background-color:yellow}High{background-color:yellow}lighted{background-color:yellow}
Expected behavior:
<span style="background-color:yellow">High</span>lighted{background-color:yellow}
Current behavior:
{background-color:yellow}High<span style="background-color:yellow">lighted</span>
In Mozilla Firefox Version 67.0b6 (64-bit), attempting to insert a new line by pressing Enter
at the end of or inside a StructureNode
does not result in a new line being rendered. This behavior has not been replicated using Google Chrome (as of Version 75.0.3745.4 (Official Build) dev (64-bit), on Windows).
To Reproduce:
StructureNode
Enter
key, to insert a new lineExpected behavior
A new StructureNode
should be created inside the Redux state, and the cursor should be placed on a new line, inside the new StructureNode
. If Enter
was pressed inside an existing StructureNode
, then the content after the selection inside the existing StructureNode
should be placed inside the new StructureNode
.
Browser: Mozilla Firefox Version 67.0b6 (64-bit)
OS: Windows 10 build 18362.1
Describe the bug
markdown-it removes extra spaces, as per the Markdown specification. However, it doesn't reflect the expected behavior for displaying the OneNote page.
In the back-end piece table, spaces are inserted. However, they're not rendered by markdown-it.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Two spaces are inserted.
Part of #48
Deletion on <p>C</p>
resulting in an empty string should convert it to <br />
(Note, C
is any random content).
Currently deletion actions are based on ContentLocations
. In comparison, the latest insertion model uses SelectionBoundary
.
SelectionBoundary
Insertion of content:
Insertion of formatting:
hi man:
if this a new project . i suggest you can try VUE .
you will be found some thing.
Part of #48
Also update the wiki, as it has a reference to the node.ts
file in the folder structure page.
In the deleteNode
function in src/page/tree/delete.ts, yIndex
is defined as a number relating to the index of y
in page.nodes
, and and y
is defined as a node in page.nodes
, as seen in https://github.com/dalyIsaac/onenote-markdown-prototype/blob/515b7fd7bd11e6677fa48c1d4c5707307be8f0de/src/page/tree/delete.ts#L211-L237
Later, in the same function, https://github.com/dalyIsaac/onenote-markdown-prototype/blob/515b7fd7bd11e6677fa48c1d4c5707307be8f0de/src/page/tree/delete.ts#L280-L285
If page.nodes[yIndex]
is updated to point to a new object, the reference for y
will point to an old object.
Thus, in order to avoid variables not being updated, from now on do not use variables like y: Node
, and rely on page.nodes[yIndex]
.
The downsides are that scenarios like https://github.com/dalyIsaac/onenote-markdown-prototype/blob/515b7fd7bd11e6677fa48c1d4c5707307be8f0de/src/page/tree/delete.ts#L324
become
if (page.nodes[page.nodes[x].parent].left === x) {
where xIndex: number
is replaced by x: number
, and x: Node
is no longer used.
This is in a similar vein to #5.
Related files:
createNewPage.ts
rotate.ts
tree.ts
insert.ts
delete.ts
Repro steps
{color:red}
Current behavior
React throws an error:
Invariant Violation: Objects are not valid as a React child (found: object with keys {node}). If you meant to render a collection of children, use an array instead.
Expected behavior
The unterminated tag is terminated automatically at the end of the StructureNode
.
Sub-section of #48
StructureNode
, and update the selectionStructureNode
, and update the selection<br />
Having each node knowing the nodeStartOffset
leads to O(n)
updates.
Inserting newlines
OneNote | HTML |
---|---|
Before single newline | <p style="margin-top:0pt;margin-bottom:0pt">Before single newline</p> |
Before two newlines | <p style="margin-top:0pt;margin-bottom:0pt">Before two newlines</p> |
<br /> |
|
Before three newlines | <p style="margin-top:0pt;margin-bottom:0pt">Before three newlines</p> |
<br /> |
|
<br /> |
|
Hello | <p style="margin-top:0pt;margin-bottom:0pt">Hello</p> |
Inserting new StructureNode
s
Inserting a newline, then a tag should insert a new tag.
Splitting existing StructureNode
s
Inserting a newline inside an existing StructureNode
should create a new StructureNode
. The content after the newline should be removed from the existing StructureNode
, and placed inside the new StructureNode
. All attributes of the old StructureNode
, apart from the id
, data-id
, and tag
should be copied to the new StructureNode
.
The below HTML does not render to "Superscript x2"
<p id="p:{28216e73-1f0a-05fd-25c5-a04844147e70}{29}" style="margin-top:0pt;margin-bottom:0pt">
Superscript x<sup>2</sup>
</p>
span
p
h
x headingscite
Pressing Enter
multiple times to insert multiple newlines results in new lines being inserted, but the cursor does not move down as expected.
This includes writing tests to ensure that object references for updated objects are different.
For more, see https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns.
<p>C</p>
resulting in an empty string should convert it to <br />
(Note, C
is any random content). #63Currently insertion relies on having the globalOffset
of the content - the offset of the content to insert in terms of the entire document. It uses this to
Since selection from the DOM now knows:
onenote-markdown/src/page/contentTree/tree.ts
Lines 31 to 46 in 43424f6
and
onenote-markdown/src/editor/selection.ts
Lines 10 to 33 in 43424f6
insertion should be able to occur with knowing the ContentNode
s, and not knowing the globalOffset
.
Work will progress as a branch off #64-web-components, and the commit 43424f6.
Modify insertNode
so the new node
is pushed into page.nodes
inside the function, as opposed to relying on the node
already existing in page.nodes
.
Currently replacement utilizes the old insertion model.
SelectionBoundary
, rather than ContentLocations
Part of #48
when I run npm start in terminal, it show this
Failed to compile.
/Users/xxxxxxxx/onenote-markdown-prototype/src/globals.d.ts
TypeScript error in /Users/xxxxxx/onenote-markdown-prototype/src/globals.d.ts(4,12):
Subsequent property declarations must have the same type. Property 'inputType' must be of type 'string', but here has type '"insertText" | "insertReplacementText" | "insertLineBreak" | "insertParagraph" | "insertOrderedList" | "insertUnorderedList" | "insertHorizontalRule" | "insertFromYank" | ... 37 more ... | "formatFontName"'. TS2717
2 | readonly data: string | null;
3 | readonly dataTransfer: DataTransfer;
> 4 | readonly inputType:
| ^
5 | | "insertText"
6 | | "insertReplacementText"
7 | | "insertLineBreak"
also, when I try to cd onenote-markdown, it show flip not found because it is onenote-markdown-prototype on my Mac, I just change to cd onenote-markdown-prototype and it work
When placing the cursor/selection at the start of a StructureNode
, such as the start of a line, pressing Enter
does not cause a new line to be inserted.
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.