Style default bullet
This commit is contained in:
parent
54fa4949c8
commit
b04fcd6204
12 changed files with 37417 additions and 1833 deletions
8
Makefile
8
Makefile
|
@ -9,7 +9,13 @@ run-release:
|
|||
SECURE_SESSIONS=false RUST_LOG=info cargo run --release
|
||||
|
||||
css-watch:
|
||||
npx tailwindcss -i ./src/main.css -o ./static/main.css --watch
|
||||
npm run css-watch
|
||||
|
||||
typescript:
|
||||
npm run build
|
||||
|
||||
typescript-watch:
|
||||
npm run build-watch
|
||||
|
||||
migrate:
|
||||
sea-orm-cli migrate
|
||||
|
|
60
frontend/main.css
Normal file
60
frontend/main.css
Normal file
|
@ -0,0 +1,60 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
|
||||
|
||||
/* Borrowed from https://github.com/Milkdown/milkdown/blob/main/e2e/src/list-item-block/style.css
|
||||
which is licensed under MIT. */
|
||||
|
||||
.prose :where(li):not(:where([class~="not-prose"] *)) {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose ol,
|
||||
.prose ul {
|
||||
list-style: none !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.prose li p {
|
||||
@apply !m-0 !leading-6;
|
||||
}
|
||||
|
||||
.prose li p + p {
|
||||
@apply !mt-2;
|
||||
}
|
||||
|
||||
.prose li.ProseMirror-selectednode {
|
||||
outline: 2px solid #8cf;
|
||||
}
|
||||
|
||||
.prose li::after {
|
||||
all: unset !important;
|
||||
}
|
||||
|
||||
milkdown-list-item-block .list-item {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
milkdown-list-item-block .label-wrapper {
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: darkcyan;
|
||||
}
|
||||
|
||||
/* End borrowed block. */
|
57
frontend/main.ts
Normal file
57
frontend/main.ts
Normal file
|
@ -0,0 +1,57 @@
|
|||
import { defaultValueCtx, Editor, rootCtx } from '@milkdown/core';
|
||||
import { html } from 'atomico';
|
||||
import { listItemBlockComponent, listItemBlockConfig, ListItemBlockConfig, listItemBlockView } from '@milkdown/components/list-item-block'
|
||||
import { commonmark } from '@milkdown/preset-commonmark';
|
||||
import { gfm } from '@milkdown/preset-gfm';
|
||||
import { nord } from '@milkdown/theme-nord'
|
||||
import { listener, listenerCtx } from '@milkdown/plugin-listener';
|
||||
import '@milkdown/theme-nord/style.css'
|
||||
|
||||
const markdown =
|
||||
`# Milkdown Vanilla Commonmark
|
||||
|
||||
> You're scared of a world where you're needed.
|
||||
|
||||
This is a demo for using Milkdown with **Vanilla Typescript**.
|
||||
|
||||
- A list
|
||||
- [ ] Something to do
|
||||
- [x] Something done`
|
||||
|
||||
|
||||
function configureListItem(ctx: Ctx) {
|
||||
ctx.set(listItemBlockConfig.key, {
|
||||
renderLabel: (label: string, listType, checked?: boolean) => {
|
||||
if (checked == null) {
|
||||
if (listType === 'bullet') {
|
||||
return html`<span class='label'>•</span>`
|
||||
}
|
||||
|
||||
return html`<span class='label'>${label}</span>`
|
||||
} else {
|
||||
return html`<input class='label' type="checkbox" checked=${checked} />`
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
Editor
|
||||
.make()
|
||||
.config(ctx => {
|
||||
ctx.set(rootCtx, "#editor")
|
||||
ctx.set(defaultValueCtx, markdown)
|
||||
|
||||
const listener = ctx.get(listenerCtx);
|
||||
listener.markdownUpdated((ctx, markdown, prevMarkdown) => {
|
||||
if (markdown !== prevMarkdown) {
|
||||
console.log(markdown);
|
||||
}
|
||||
})
|
||||
})
|
||||
.config(configureListItem)
|
||||
.use(commonmark)
|
||||
.use(gfm)
|
||||
.use(nord)
|
||||
.use(listener)
|
||||
.use(listItemBlockComponent)
|
||||
.create();
|
2569
package-lock.json
generated
2569
package-lock.json
generated
File diff suppressed because it is too large
Load diff
20
package.json
20
package.json
|
@ -1,6 +1,26 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tailwindcss/typography": "^0.5.13",
|
||||
"daisyui": "^4.10.5",
|
||||
"esbuild": "0.21.1",
|
||||
"tailwindcss": "^3.4.3"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "esbuild frontend/main.ts --bundle --outfile=static/main.js --target=es2017",
|
||||
"build-watch": "esbuild frontend/main.ts --bundle --outfile=static/main.js --target=es2017 --watch",
|
||||
"css-watch": "tailwindcss -i ./frontend/main.css -o ./static/style.css --watch",
|
||||
"css": "tailwindcss -i ./frontend/main.css -o ./static/style.css"
|
||||
},
|
||||
"dependencies": {
|
||||
"@milkdown/components": "^7.3.6",
|
||||
"@milkdown/core": "^7.3.6",
|
||||
"@milkdown/plugin-listener": "^7.3.6",
|
||||
"@milkdown/preset-commonmark": "^7.3.6",
|
||||
"@milkdown/preset-gfm": "^7.3.6",
|
||||
"@milkdown/theme-nord": "^7.3.6",
|
||||
"@prosemirror-adapter/lit": "^0.2.6",
|
||||
"clsx": "^2.1.1",
|
||||
"tailwindcss": "^3.4.3"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
1932
static/main.css
1932
static/main.css
File diff suppressed because it is too large
Load diff
31901
static/main.js
31901
static/main.js
File diff suppressed because it is too large
Load diff
2693
static/style.css
Normal file
2693
static/style.css
Normal file
File diff suppressed because it is too large
Load diff
|
@ -1,11 +1,13 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./templates/**/*.html"],
|
||||
content: ["./templates/**/*.html", "./frontend/**/*.ts"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
require('daisyui'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/forms'),
|
||||
],
|
||||
daisyui: {
|
||||
themes: [
|
||||
|
|
|
@ -22,6 +22,7 @@
|
|||
</div>
|
||||
<div class="px-8 py-8 flex flex-col gap-y-4">
|
||||
|
||||
<div id="editor" class="prose bg-white"></div>
|
||||
|
||||
{% for document in documents %}
|
||||
<div class="card w-96 bg-base-100 shadow-md border-2 border-solid">
|
||||
|
@ -29,6 +30,7 @@
|
|||
<h2 class="card-title">{{ document.name }}</h2>
|
||||
<div class="card-actions justify-end">
|
||||
<button class="btn btn-primary">Open</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pique</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<link rel="stylesheet" href="/static/main.css">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⛰️</text></svg>"/>
|
||||
</head>
|
||||
|
|
Loading…
Reference in a new issue