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
|
SECURE_SESSIONS=false RUST_LOG=info cargo run --release
|
||||||
|
|
||||||
css-watch:
|
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:
|
migrate:
|
||||||
sea-orm-cli 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": {
|
"devDependencies": {
|
||||||
|
"@tailwindcss/forms": "^0.5.7",
|
||||||
|
"@tailwindcss/typography": "^0.5.13",
|
||||||
"daisyui": "^4.10.5",
|
"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"
|
"tailwindcss": "^3.4.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
1934
static/main.css
1934
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} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ["./templates/**/*.html"],
|
content: ["./templates/**/*.html", "./frontend/**/*.ts"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require('daisyui'),
|
require('daisyui'),
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
require('@tailwindcss/forms'),
|
||||||
],
|
],
|
||||||
daisyui: {
|
daisyui: {
|
||||||
themes: [
|
themes: [
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="px-8 py-8 flex flex-col gap-y-4">
|
<div class="px-8 py-8 flex flex-col gap-y-4">
|
||||||
|
|
||||||
|
<div id="editor" class="prose bg-white"></div>
|
||||||
|
|
||||||
{% for document in documents %}
|
{% for document in documents %}
|
||||||
<div class="card w-96 bg-base-100 shadow-md border-2 border-solid">
|
<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>
|
<h2 class="card-title">{{ document.name }}</h2>
|
||||||
<div class="card-actions justify-end">
|
<div class="card-actions justify-end">
|
||||||
<button class="btn btn-primary">Open</button>
|
<button class="btn btn-primary">Open</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Pique</title>
|
<title>Pique</title>
|
||||||
|
<link rel="stylesheet" href="/static/style.css">
|
||||||
<link rel="stylesheet" href="/static/main.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>"/>
|
<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>
|
</head>
|
||||||
|
|
Loading…
Reference in a new issue