Style default bullet

This commit is contained in:
Nicole Tietz-Sokolskaya 2024-05-14 16:19:37 -04:00
parent 54fa4949c8
commit b04fcd6204
12 changed files with 37417 additions and 1833 deletions

View file

@ -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
View 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
View 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

File diff suppressed because it is too large Load diff

View file

@ -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"
} }
} }

View file

@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

2693
static/style.css Normal file

File diff suppressed because it is too large Load diff

View file

@ -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: [

View file

@ -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>

View file

@ -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>