style: vue format
This commit is contained in:
parent
e2fbd06893
commit
2936079790
|
@ -8,8 +8,8 @@
|
||||||
"test": "vitest",
|
"test": "vitest",
|
||||||
"postinstall": "node scripts/postinstall.mjs",
|
"postinstall": "node scripts/postinstall.mjs",
|
||||||
"pub": "npm run build && lerna publish --yes",
|
"pub": "npm run build && lerna publish --yes",
|
||||||
"lint": "prettier --plugin-search-dir=. --ignore-path=.gitignore --list-different packages/**/*.{ts,tsx,js,svelte,json}",
|
"lint": "prettier --plugin-search-dir=. --ignore-path=.gitignore --list-different packages/**/*.{ts,tsx,svelte,vue,json}",
|
||||||
"lint:fix": "prettier --plugin-search-dir=. --ignore-path=.gitignore --write packages/**/*.{ts,tsx,js,svelte,json}",
|
"lint:fix": "prettier --plugin-search-dir=. --ignore-path=.gitignore --write packages/**/*.{ts,tsx,svelte,vue,json}",
|
||||||
"docs:dev": "vitepress dev docs",
|
"docs:dev": "vitepress dev docs",
|
||||||
"docs:build": "vitepress build docs",
|
"docs:build": "vitepress build docs",
|
||||||
"docs:serve": "vitepress serve docs"
|
"docs:serve": "vitepress serve docs"
|
||||||
|
|
|
@ -42,17 +42,17 @@ import 'bytemd/dist/index.min.css'
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
<script>
|
<script>
|
||||||
import { Editor, Viewer } from 'bytemd';
|
import { Editor, Viewer } from 'bytemd'
|
||||||
import gfm from '@bytemd/plugin-gfm';
|
import gfm from '@bytemd/plugin-gfm'
|
||||||
|
|
||||||
let value;
|
let value
|
||||||
const plugins = [
|
const plugins = [
|
||||||
gfm(),
|
gfm(),
|
||||||
// Add more plugins here
|
// Add more plugins here
|
||||||
];
|
]
|
||||||
|
|
||||||
function handleChange(e) {
|
function handleChange(e) {
|
||||||
value = e.detail.value;
|
value = e.detail.value
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as bytemd from 'bytemd';
|
import * as bytemd from 'bytemd'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
@ -22,26 +22,26 @@ export default {
|
||||||
const editor = new bytemd.Editor({
|
const editor = new bytemd.Editor({
|
||||||
target: this.$el,
|
target: this.$el,
|
||||||
props: this.$props,
|
props: this.$props,
|
||||||
});
|
})
|
||||||
editor.$on('change', (e) => {
|
editor.$on('change', (e) => {
|
||||||
this.$emit('change', e.detail.value);
|
this.$emit('change', e.detail.value)
|
||||||
});
|
})
|
||||||
this.editor = editor;
|
this.editor = editor
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$props: {
|
$props: {
|
||||||
handler(newValue, oldValue) {
|
handler(newValue, oldValue) {
|
||||||
// TODO:
|
// TODO:
|
||||||
const copy = { ...newValue };
|
const copy = { ...newValue }
|
||||||
for (let k in copy) {
|
for (let k in copy) {
|
||||||
if (copy[k] === undefined) {
|
if (copy[k] === undefined) {
|
||||||
delete copy[k];
|
delete copy[k]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.editor.$set(copy);
|
this.editor.$set(copy)
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,38 +3,38 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getProcessor } from 'bytemd';
|
import { getProcessor } from 'bytemd'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ['value', 'plugins', 'sanitize'],
|
props: ['value', 'plugins', 'sanitize'],
|
||||||
computed: {
|
computed: {
|
||||||
file() {
|
file() {
|
||||||
try {
|
try {
|
||||||
return getProcessor(this.$props).processSync(this.value);
|
return getProcessor(this.$props).processSync(this.value)
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
needUpdate() {
|
needUpdate() {
|
||||||
return [this.file, this.plugins, this.sanitize];
|
return [this.file, this.plugins, this.sanitize]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
needUpdate: {
|
needUpdate: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
this.off();
|
this.off()
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.on();
|
this.on()
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.on();
|
this.on()
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.off();
|
this.off()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
on() {
|
on() {
|
||||||
|
@ -43,24 +43,24 @@ export default {
|
||||||
({ viewerEffect }) =>
|
({ viewerEffect }) =>
|
||||||
viewerEffect &&
|
viewerEffect &&
|
||||||
viewerEffect({ markdownBody: this.$el, file: this.file })
|
viewerEffect({ markdownBody: this.$el, file: this.file })
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
off() {
|
off() {
|
||||||
if (this.cbs) {
|
if (this.cbs) {
|
||||||
this.cbs.forEach((cb) => cb && cb());
|
this.cbs.forEach((cb) => cb && cb())
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleClick(e) {
|
handleClick(e) {
|
||||||
const $ = e.target;
|
const $ = e.target
|
||||||
if ($.tagName !== 'A') return;
|
if ($.tagName !== 'A') return
|
||||||
|
|
||||||
const href = $.getAttribute('href');
|
const href = $.getAttribute('href')
|
||||||
if (!href || !href.startsWith('#')) return;
|
if (!href || !href.startsWith('#')) return
|
||||||
|
|
||||||
const dest = this.$el.querySelector('#user-content-' + href.slice(1));
|
const dest = this.$el.querySelector('#user-content-' + href.slice(1))
|
||||||
if (dest) dest.scrollIntoView();
|
if (dest) dest.scrollIntoView()
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue