-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
101 lines (94 loc) 路 2.05 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import { Remarkable } from 'remarkable';
import ToolsBar from './src/tools_bar'
function render(Tab,puffin,editor){
const configState = new puffin.state({
theme: 'white'
})
const styleWrapper = puffin.style`
& {
padding:20px;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
& > div:nth-child(2){
width: 100%;
}
& > div:nth-child(2) {
height: 100%;
overflow:auto;
}
&[theme="transparent"] {
background: transparent;
}
&[theme="transparent"] * {
color: var(--textColor);
}
&[theme="black"] {
background: rgba(35,35,35);
}
&[theme="black"] * {
color: white;
}
&[theme="white"] {
background: white;
}
&[theme="white"] * {
color: black;
}
`
const containerComp = () => {
return puffin.element({
components: {
ToolsBar: ToolsBar(puffin,configState)
}
})`
<div theme="${()=>configState.data.theme}" class="${styleWrapper}">
<ToolsBar/>
<div mounted="${mountedContainer}"/>
</div>`
}
new Tab({
title: 'Markdown Preview',
component: containerComp
})
function mountedContainer(){
editor.client.do('onChanged',{
instance: editor.instance,
action: () => {
updatePreview(this,editor.client.do('getValue',editor.instance))
}
})
configState.keyChanged('theme', ()=>{
this.parentElement.update()
})
updatePreview(this,editor.client.do('getValue',editor.instance))
}
}
function updatePreview(containerElement,value){
const markdown = new Remarkable({
html: true
});
containerElement.innerHTML = markdown.render(value)
}
export const entry = ({ StatusBarItem, Tab, RunningConfig, puffin }) => {
const item = new StatusBarItem({
label: 'Live preview',
action:()=>{
RunningConfig.data.focusedEditor && render(Tab,puffin,RunningConfig.data.focusedEditor)
}
})
RunningConfig.on('aTabHasBeenClosed',({ directory }) => {
item.hide()
})
RunningConfig.on('aTabHasBeenFocused',({ directory }) => {
if( directory.includes('.md') ){
item.show()
}else{
item.hide()
}
})
item.hide()
}