Enable lock in MarkdownEditor #283
Conversation
asmsuechan
changed the title
|
LGTM |
browser/components/MarkdownEditor.js
Outdated
| renderValue: props.value, | ||
| keyPressed: {} | ||
| keyPressed: {}, | ||
| locked: false |
There was a problem hiding this comment.
This is duplicated and not connected the state with https://github.com/asmsuechan/Boostnote/blob/74ee6ae6ce047ae7c349b35ae048ae14930c547e/browser/main/Detail/MarkdownNoteDetail.js#L29.
There was a problem hiding this comment.
However, I'm not sure how it connects each other.
| } | ||
|
|
||
| toggleLockButton () { | ||
| return this.state.locked ? 'fa-lock' : 'fa-unlock-alt' |
There was a problem hiding this comment.
This does not collaborate with the actual a state of MarkdownEditor.
| {(() => { | ||
| // TODO: get a state of MarkdownEditor somehow | ||
| const editorStatus='CODE' | ||
| let faClassName=`fa ${this.toggleLockButton()}` |
There was a problem hiding this comment.
I wanna get the current status PREVIEW/CODE of the MarkdownEditor.
|
Current status is WIP because the lock/unlock icon is shown even PREVIEW mode. |
|
|
asmsuechan
changed the title
| } | ||
| this.dispatchTimer = null | ||
|
|
||
| this.showLockButton = () => this.handleShowLockButton() |
There was a problem hiding this comment.
Please use Function.prototype.bind. It is more clearly which this is assigned.
this.showLockButton = this.showLockButton.bind(this);There was a problem hiding this comment.
We need to refactor other same style lines.
There was a problem hiding this comment.
I know, so we should try to refactor little by little...
| this.setState({ isLocked: !this.state.isLocked }) | ||
| } | ||
|
|
||
| toggleLockButton () { |
There was a problem hiding this comment.
I think getToggleLockButtonClassName is better.
| </div> | ||
| <div styleName='info-right'> | ||
| {(() => { | ||
| let faClassName=`fa ${this.toggleLockButton()}` |
| <i className={faClassName}/> | ||
| </button> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Writing this function before return is more readable.
const lockButtonComponent =
<button styleName='info-right-button'
onFocus={(e) => this.handleFocus(e)}
onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
>
<i className={`fa ${this.toggleLockButton()}`}/>
</button>;
/** */
return (
{this.state.editorStatus === 'CODE' ? lockButtonComponent : '' }
);
|
I fixed them. |
|
I think Tooltip is needed when hover on lock icon. How about it? |
|
@kazup01 So do I. |
3 participants
Hi, I added a function which keeps Editor mode even though I move to another window.
refs: #272