Skip to content

Commit

Permalink
feat: switch & save doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@aolyang
aolyang committed Dec 13, 2024
1 parent 469133b commit a7e0738
Show file tree
Hide file tree
Showing 17 changed files with 520 additions and 104 deletions.
15 changes: 10 additions & 5 deletions example/dev-server.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,20 @@ const __dirname = URL.fileURLToPath(path.dirname(import.meta.url))
const app = express()
const content = express.Router()

const fileTarget = path.resolve(__dirname, "./src/assets/explain.html")
content.get("/content", (_, res) => {
res.sendFile(fileTarget)
/** @param target {string} */
const fileTarget = target => path.resolve(__dirname, "./src/assets", target)

content.get("/content", (req, res) => {
res.sendFile(fileTarget(req.query.filepath))
})
content.put("/content", (req, res) => {
const stream = fs.createWriteStream(fileTarget)
const target = req.headers["content-file-path"]
if (!target) res.status(404).send("Failed!filepath not found")

const stream = fs.createWriteStream(fileTarget(target))
req.pipe(stream)
stream.once("error", () => res.status(500).send("error"))
stream.once("finish", () => res.send("done"))
stream.once("finish", () => res.status(200).send("done"))
})

const viteDevServer = await import("vite").then(vite =>
Expand Down
19 changes: 6 additions & 13 deletions example/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
import type { ToolbarState } from "@/states/toolbar"
import htmlRaw from "@/assets/explain.html?raw"
import AssetsTree from "@/components/AssetsTree.svelte"
import ExportContent from "@/components/ExportContent.svelte"
import TableOfContents from "@/components/TableOfContents.svelte"
import ToggleAssetsTree from "@/components/ToggleAssetsTree.svelte"
import ToggleLocale from "@/components/ToggleLocale.svelte"
import ToggleSparkLine from "@/components/ToggleSparkLine.svelte"
import ThemeMode from "@/components/ToggleTheme.svelte"
Expand Down Expand Up @@ -59,16 +60,6 @@
let divRef: HTMLDivElement
onMount(() => {
divRef.appendChild(state.container)
if (import.meta.env.DEV) {
fetch("/content", { method: "GET" }).then((res) => {
res.body.getReader().read().then(({ value }) => {
state.editor.commands.setContent(new TextDecoder().decode(value))
})
})
} else {
state.editor.commands.setContent(htmlRaw)
}
return () => {
state.editor.destroy()
}
Expand All @@ -77,9 +68,10 @@

<div class="w-full h-[104px] fixed top-0 z-10">
<div class="w-full min-h-[52px] px-4 shadow flex gap-3 items-center bg-background dark:bg-neutral-700">
<ToggleAssetsTree />
<div class="flex-1"></div>
<ExportContent/>
<ToggleToc />
<ToggleToc/>
<ToggleLocale/>
<ToggleSparkLine/>
<ThemeMode/>
Expand All @@ -91,6 +83,7 @@
<div class="size-full overflow-y-auto px-4">
<div class="px-10 py-6 max-w-[826px] min-h-full mx-auto bg-white dark:bg-neutral-700 shadow-xl"
bind:this={divRef}></div>
<TableOfContents />
</div>
</div>
<AssetsTree />
<TableOfContents/>
83 changes: 29 additions & 54 deletions example/src/assets/features.html
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,29 @@
<h1>H1 Typography</h1>
<h2>H2 Typography</h2>
<h3>H3 Typography</h3>
<h4>H4 Typography</h4>
<h5>H5 Typography</h5>
<h6 style="line-height: 10em">H6 Typography</h6>
update: beautify toolbar components
<hr/>
<img src="/img800x400.png" alt="test"/>
<p><strong>Bold</strong><em>Italic</em>
<del>strike</del>
</p>
<p>inline <code>code</code>subSup log<sub>2</sub><sup>2</sup></p>
<p><u>underline</u></p>
<p>TextStyle <span style="font-size: 28px">28px</span><span style="font-size: 96px">96px</span>
<p>Min fontSize: 4px -> <span style="font-size: 4px">4px</span></p>
<p>TextStyle <span style="color: rgb(255, 0, 0)">Color: red</span>
<mark data-color="rgb(0, 4, 255)" style="background-color: rgb(0, 4, 255); color: inherit">BackgroundC</mark>
<span style="color: rgb(255, 255, 255)">
<mark data-color="rgb(0, 4, 255)"
style="background-color: rgb(0, 4, 255); color: inherit">olor: blue by h
</mark>
</span>
<mark data-color="rgb(0, 4, 255)" style="background-color: rgb(0, 4, 255); color: inherit">ighlight</mark>
</p>
<ul>
<li>ul li 1</li>
<li>ul li 2</li>
<li>ul li 3
<ul>
<li>sub ul li 1</li>
<li>sub ul li 2</li>
</ul>
</li>
</ul>
<ul style="list-style-type: decimal">
<li>ul li 1</li>
<li>ul li 2</li>
<li>ul li 3
<ul style="list-style-type: decimal">
<li>sub ul li 1</li>
<li>sub ul li 2</li>
</ul>
</li>
</ul>
<ul data-type="taskList">
<li data-type="taskItem" data-checked="true">A list item</li>
<li data-type="taskItem" data-checked="false">And another one</li>
</ul>
<blockquote>
<p>blockquote node</p>
<p>blockquote node</p>
<p>blockquote node</p>
</blockquote>
<h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0.5em"><b>H1 Typography1231212</b></h1><h2 style="margin: 5px 0; font-size: 1.250em; font-weight: bold; margin-top: 0.5em"><b>H2 Typography</b></h2><h3 style="margin: 5px 0; font-size: 1.125em; font-weight: bold; margin-top: 0.3em"><b>H3 Typography</b></h3><h4 style="margin: 5px 0; font-size: 1.000em; font-weight: bold; margin-top: 0.3em"><b>H4 Typography</b></h4><h5 style="margin: 5px 0">H5 Typography</h5><h6 style="margin: 5px 0">H6 Typography</h6><p>update: beautify toolbar components</p><hr style="border-color: #70707099; margin-top: 10px; margin-bottom: 10px; border-top-width: 1px; border-style: single; color: inherit"><img style="
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 1000px;
height: auto;
" src="/img800x400.png" alt="test"><p><b>Bold</b><em>Italic</em><s>strike</s></p><p>inline <code class="inline-code">code</code>subSup log<sub>2</sub><sup>2</sup></p><p><u>underline</u></p><p>TextStyle <span style="font-size: 28px">28px</span><span style="font-size: 96px">96px</span></p><p>Min fontSize: 4px -&gt; <span style="font-size: 4px">4px</span></p><p>TextStyle <span style="color: rgb(255, 0, 0)">Color: red</span><mark data-color="rgb(0, 4, 255)" style="background-color: rgb(0, 4, 255); color: inherit">BackgroundC</mark><span style="color: rgb(255, 255, 255)"> <mark data-color="rgb(0, 4, 255)" style="background-color: rgb(0, 4, 255); color: inherit">olor: blue by h </mark></span><mark data-color="rgb(0, 4, 255)" style="background-color: rgb(0, 4, 255); color: inherit">ighlight</mark></p><ul class="list-paddingleft-1" style="padding-left: 1.25em; list-style-type: disc"><li><p>ul li 1</p></li><li><p>ul li 2</p></li><li><p>ul li 3</p><ul class="list-paddingleft-1" style="padding-left: 1.25em; list-style-type: disc"><li><p>sub ul li 1</p></li><li><p>sub ul li 2</p></li></ul></li></ul><ul class="list-paddingleft-1" style="padding-left: 1.25em; list-style-type: decimal"><li><p>ul li 1</p></li><li><p>ul li 2</p></li><li><p>ul li 3</p><ul class="list-paddingleft-1" style="padding-left: 1.25em; list-style-type: decimal"><li><p>sub ul li 1</p></li><li><p>sub ul li 2</p></li></ul></li></ul><ul style="
/*
* It's a hack here, for some editor (eg: wechat editor)
* didn't support 0 value padding
* so, you can paste taskList with style now
*/
padding-left: 1px;
margin-left: -1px;
" data-type="taskList"><li style="
display: flex;
gap: 0.625em;
" data-checked="true" data-type="taskItem"><label><input type="checkbox" checked="checked"><span></span></label><div><p>A list item</p></div></li><li style="
display: flex;
gap: 0.625em;
" data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>And another one</p></div></li></ul><blockquote style="
overflow: hidden;
padding: 10px 20px;
border-left: 4px;
border-style: solid;
border-color: #70707099;
margin: 10px 0;
background-color: #afafaf33
"><p>blockquote node</p><p>blockquote node</p><p>blockquote node</p></blockquote><p></p>
Loading

0 comments on commit a7e0738

Please sign in to comment.