-
Notifications
You must be signed in to change notification settings - Fork 166
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2274 from flyingbee2012/biwu/vb1215
Bump up packages-content-model to 0.22.0
- Loading branch information
Showing
217 changed files
with
14,406 additions
and
2,705 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
demo/scripts/controls/ribbonButtons/contentModel/redoButton.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { isContentModelEditor } from 'roosterjs-content-model-editor'; | ||
| import { redo } from 'roosterjs-content-model-core'; | ||
| import { RedoButtonStringKey, RibbonButton } from 'roosterjs-react'; | ||
|
|
||
| /** | ||
| * @internal | ||
| * "Undo" button on the format ribbon | ||
| */ | ||
| export const redoButton: RibbonButton<RedoButtonStringKey> = { | ||
| key: 'buttonNameRedo', | ||
| unlocalizedText: 'Redo', | ||
| iconName: 'Redo', | ||
| isDisabled: formatState => !formatState.canRedo, | ||
| onClick: editor => { | ||
| if (isContentModelEditor(editor)) { | ||
| redo(editor); | ||
| } | ||
| return true; | ||
| }, | ||
| }; |
20 changes: 20 additions & 0 deletions
20
demo/scripts/controls/ribbonButtons/contentModel/undoButton.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { isContentModelEditor } from 'roosterjs-content-model-editor'; | ||
| import { RibbonButton, UndoButtonStringKey } from 'roosterjs-react'; | ||
| import { undo } from 'roosterjs-content-model-core'; | ||
|
|
||
| /** | ||
| * @internal | ||
| * "Undo" button on the format ribbon | ||
| */ | ||
| export const undoButton: RibbonButton<UndoButtonStringKey> = { | ||
| key: 'buttonNameUndo', | ||
| unlocalizedText: 'Undo', | ||
| iconName: 'undo', | ||
| isDisabled: formatState => !formatState.canUndo, | ||
| onClick: editor => { | ||
| if (isContentModelEditor(editor)) { | ||
| undo(editor); | ||
| } | ||
| return true; | ||
| }, | ||
| }; |
144 changes: 144 additions & 0 deletions
144
demo/scripts/controls/sidePane/snapshot/ContentModelSnapshotPane.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| import * as React from 'react'; | ||
| import { EntityState, Snapshot, SnapshotSelection } from 'roosterjs-content-model-types'; | ||
| import { ModeIndependentColor } from 'roosterjs-editor-types'; | ||
|
|
||
| const styles = require('./SnapshotPane.scss'); | ||
|
|
||
| export interface ContentModelSnapshotPaneProps { | ||
| onTakeSnapshot: () => Snapshot; | ||
| onRestoreSnapshot: (snapshot: Snapshot, triggerContentChangedEvent: boolean) => void; | ||
| onMove: (moveStep: number) => void; | ||
| } | ||
|
|
||
| export interface ContentModelSnapshotPaneState { | ||
| snapshots: Snapshot[]; | ||
| currentIndex: number; | ||
| autoCompleteIndex: number; | ||
| } | ||
|
|
||
| export default class ContentModelSnapshotPane extends React.Component< | ||
| ContentModelSnapshotPaneProps, | ||
| ContentModelSnapshotPaneState | ||
| > { | ||
| private html = React.createRef<HTMLTextAreaElement>(); | ||
| private knownColors = React.createRef<HTMLTextAreaElement>(); | ||
| private entityStates = React.createRef<HTMLTextAreaElement>(); | ||
| private isDarkColor = React.createRef<HTMLInputElement>(); | ||
| private selection = React.createRef<HTMLTextAreaElement>(); | ||
|
|
||
| constructor(props: ContentModelSnapshotPaneProps) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| snapshots: [], | ||
| currentIndex: -1, | ||
| autoCompleteIndex: -1, | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className={styles.snapshotPane}> | ||
| <h3>Undo Snapshots</h3> | ||
| <div className={styles.snapshotList}> | ||
| {this.state.snapshots.map(this.renderItem)} | ||
| </div> | ||
| <h3>Selected Snapshot</h3> | ||
| <div className={styles.buttons}> | ||
| <button onClick={this.takeSnapshot}>{'Take snapshot'}</button>{' '} | ||
| <button onClick={this.onClickRestoreSnapshot}>{'Restore snapshot'}</button> | ||
| </div> | ||
| <div>HTML:</div> | ||
| <textarea ref={this.html} className={styles.textarea} spellCheck={false} /> | ||
| <div>Selection:</div> | ||
| <textarea ref={this.selection} className={styles.textarea} spellCheck={false} /> | ||
| <div>Entity states:</div> | ||
| <textarea ref={this.entityStates} className={styles.textarea} spellCheck={false} /> | ||
| <div>Known colors:</div> | ||
| <textarea ref={this.knownColors} className={styles.textarea} spellCheck={false} /> | ||
| <div> | ||
| <input type="checkbox" ref={this.isDarkColor} id="isUndoInDarkColor" /> | ||
| <label htmlFor="isUndoInDarkColor">Is in dark mode</label> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| private onClickRestoreSnapshot = () => { | ||
| const html = this.html.current.value; | ||
| const selection = this.selection.current.value | ||
| ? (JSON.parse(this.selection.current.value) as SnapshotSelection) | ||
| : undefined; | ||
| const knownColors = this.knownColors.current.value | ||
| ? (JSON.parse(this.knownColors.current.value) as ModeIndependentColor[]) | ||
| : []; | ||
| const entityStates = this.entityStates.current.value | ||
| ? (JSON.parse(this.entityStates.current.value) as EntityState[]) | ||
| : undefined; | ||
| const isDarkMode = !!this.isDarkColor.current.checked; | ||
|
|
||
| this.props.onRestoreSnapshot( | ||
| { | ||
| html, | ||
| knownColors, | ||
| entityStates, | ||
| isDarkMode, | ||
| selection, | ||
| }, | ||
| true | ||
| ); | ||
| }; | ||
|
|
||
| updateSnapshots(snapshots: Snapshot[], currentIndex: number, autoCompleteIndex: number) { | ||
| this.setState({ | ||
| snapshots, | ||
| currentIndex, | ||
| autoCompleteIndex, | ||
| }); | ||
| } | ||
|
|
||
| snapshotToString(snapshot: Snapshot) { | ||
| return ( | ||
| snapshot.html + | ||
| (snapshot.selection ? `<!--${JSON.stringify(snapshot.selection)}-->` : '') | ||
| ); | ||
| } | ||
|
|
||
| private takeSnapshot = () => { | ||
| const snapshot = this.props.onTakeSnapshot(); | ||
| this.setSnapshot(snapshot); | ||
| }; | ||
|
|
||
| private setSnapshot = (snapshot: Snapshot) => { | ||
| this.html.current.value = snapshot.html; | ||
| this.entityStates.current.value = snapshot.entityStates | ||
| ? JSON.stringify(snapshot.entityStates) | ||
| : ''; | ||
| this.knownColors.current.value = snapshot.knownColors | ||
| ? JSON.stringify(snapshot.knownColors) | ||
| : ''; | ||
| this.selection.current.value = snapshot.selection ? JSON.stringify(snapshot.selection) : ''; | ||
| this.isDarkColor.current.checked = !!snapshot.isDarkMode; | ||
| }; | ||
|
|
||
| private renderItem = (snapshot: Snapshot, index: number) => { | ||
| let className = ''; | ||
| if (index == this.state.currentIndex) { | ||
| className += ' ' + styles.current; | ||
| } | ||
| if (index == this.state.autoCompleteIndex) { | ||
| className += ' ' + styles.autoComplete; | ||
| } | ||
|
|
||
| const snapshotStr = this.snapshotToString(snapshot); | ||
| return ( | ||
| <pre | ||
| className={className} | ||
| key={index} | ||
| onClick={() => this.setSnapshot(snapshot)} | ||
| onDoubleClick={() => this.props.onMove(index - this.state.currentIndex)}> | ||
| {(snapshotStr || '<EMPTY SNAPSHOT>').substring(0, 1000)} | ||
| </pre> | ||
| ); | ||
| }; | ||
| } |
Oops, something went wrong.