Skip to content

C
canifa_note
Unverified Commit 56716cda authored by boojack's avatar boojack Committed by GitHub
Browse files
Options

fix: break word (#708) 

* fix: break word

* chore: update
parent a2ee750d
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 49 deletions
web/package.json
View file @ 56716cda
......@@ -24,7 +24,8 @@
"react-feather": "^2.0.10",
"react-i18next": "^11.18.6",
"react-redux": "^8.0.1",
"react-router-dom": "^6.4.0"
"react-router-dom": "^6.4.0",
"tailwindcss": "^3.2.4"
},
"devDependencies": {
"@jest/globals": "^29.1.2",
......@@ -46,7 +47,6 @@
"lodash": "^4.17.21",
"postcss": "^8.4.5",
"prettier": "2.5.1",
"tailwindcss": "^3.0.18",
"ts-jest": "^29.0.3",
"typescript": "^4.3.2",
"vite": "^3.0.0"
......
web/src/css/tailwind.css
View file @ 56716cda
......@@ -3,14 +3,19 @@
@tailwind utilities;
@layer utilities {
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
.word-break {
overflow-wrap: anywhere;
word-break: normal;
}
}
......
web/src/labs/marked/marked.test.ts
View file @ 56716cda
......@@ -60,8 +60,8 @@ console.log("hello world!")
- [ ] finish my homework
- [x] yahaha`,
want: `<p>My task:</p>
<p><span class='todo-block todo' data-value='TODO'></span>finish my homework</p>
<p><span class='todo-block done' data-value='DONE'>✓</span>yahaha</p>`,
<p class='li-container'><span class='todo-block todo' data-value='TODO'></span>finish my homework</p>
<p class='li-container'><span class='todo-block done' data-value='DONE'>✓</span>yahaha</p>`,
},
];
......@@ -76,8 +76,8 @@ console.log("hello world!")
* list 123
1. 123123`,
want: `<p>This is a list</p>
<p><span class='ul-block'>•</span>list 123</p>
<p><span class='ol-block'>1.</span>123123</p>`,
<p class='li-container'><span class='ul-block'>•</span>list 123</p>
<p class='li-container'><span class='ol-block'>1.</span>123123</p>`,
},
];
......
web/src/labs/marked/parser/DoneList.ts
View file @ 56716cda
......@@ -10,7 +10,7 @@ const renderer = (rawStr: string): string => {
}
const parsedContent = marked(matchResult[1], [], inlineElementParserList);
return `<p><span class='todo-block done' data-value='DONE'>✓</span>${parsedContent}</p>${matchResult[2]}`;
return `<p class='li-container'><span class='todo-block done' data-value='DONE'>✓</span>${parsedContent}</p>${matchResult[2]}`;
};
export default {
......
web/src/labs/marked/parser/OrderedList.ts
View file @ 56716cda
......@@ -10,7 +10,7 @@ const renderer = (rawStr: string): string => {
}
const parsedContent = marked(matchResult[2], [], inlineElementParserList);
return `<p><span class='ol-block'>${matchResult[1]}.</span>${parsedContent}</p>${matchResult[3]}`;
return `<p class='li-container'><span class='ol-block'>${matchResult[1]}.</span>${parsedContent}</p>${matchResult[3]}`;
};
export default {
......
web/src/labs/marked/parser/TodoList.ts
View file @ 56716cda
......@@ -11,7 +11,7 @@ const renderer = (rawStr: string): string => {
}
const parsedContent = marked(matchResult[1], [], inlineElementParserList);
return `<p><span class='todo-block todo' data-value='TODO'></span>${parsedContent}</p>${escape(matchResult[2])}`;
return `<p class='li-container'><span class='todo-block todo' data-value='TODO'></span>${parsedContent}</p>${escape(matchResult[2])}`;
};
export default {
......
web/src/labs/marked/parser/UnorderedList.ts
View file @ 56716cda
......@@ -11,7 +11,7 @@ const renderer = (rawStr: string): string => {
}
const parsedContent = marked(matchResult[1], [], inlineElementParserList);
return `<p><span class='ul-block'>•</span>${parsedContent}</p>${escape(matchResult[2])}`;
return `<p class='li-container'><span class='ul-block'>•</span>${parsedContent}</p>${escape(matchResult[2])}`;
};
export default {
......
web/src/less/editor.less
View file @ 56716cda
......@@ -2,7 +2,7 @@
@apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
> .common-editor-inputer {
@apply w-full h-full ~"max-h-[300px]" my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap;
@apply w-full h-full ~"max-h-[300px]" my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap break-all;
&::placeholder {
padding-left: 2px;
......
web/src/less/memo-content.less
View file @ 56716cda
......@@ -2,13 +2,17 @@
@apply w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-200;
> .memo-content-text {
@apply w-full break-words text-base leading-7;
@apply w-full max-w-full word-break text-base leading-6;
> p {
@apply w-full h-auto mb-1 last:mb-0 text-base leading-6 whitespace-pre-wrap break-words;
@apply w-full h-auto mb-1 last:mb-0 text-base;
min-height: 24px;
}
> .li-container {
@apply w-full flex flex-row flex-nowrap;
}
.img {
@apply block max-w-full rounded cursor-pointer hover:shadow;
}
......@@ -28,27 +32,19 @@
.ol-block,
.ul-block,
.todo-block {
@apply inline-block box-border text-right w-8 mr-px font-mono select-none whitespace-nowrap;
@apply shrink-0 inline-block box-border text-right w-8 mr-px font-mono text-sm leading-6 select-none whitespace-nowrap;
}
.ul-block {
@apply text-center;
.ol-block {
@apply opacity-80 mt-px;
}
.todo-block {
@apply w-4 h-4 leading-4 border rounded box-border text-lg cursor-pointer shadow-inner hover:opacity-80;
transform: translateY(2px);
margin-left: 6px;
margin-right: 6px;
.ul-block {
@apply text-center mt-px;
}
li {
list-style-type: none;
&::before {
@apply font-bold mr-1;
content: "•";
}
.todo-block {
@apply w-4 h-4 leading-4 mx-2 mt-1 border rounded box-border text-lg cursor-pointer shadow-inner hover:opacity-80;
}
pre {
......@@ -60,7 +56,7 @@
}
code {
@apply bg-gray-100 dark:bg-zinc-600 px-1 rounded text-sm font-mono leading-6 inline-block;
@apply break-all bg-gray-100 dark:bg-zinc-600 px-1 rounded text-sm font-mono leading-6 inline-block;
}
table {
......
web/src/less/toast.less
View file @ 56716cda
......@@ -18,7 +18,7 @@
> .toast-container {
> .content-text {
@apply text-sm whitespace-pre-wrap break-words leading-6 max-w-xs;
@apply text-sm whitespace-pre-wrap word-break leading-6 max-w-xs;
}
}
}
......
web/yarn.lock
View file @ 56716cda
......@@ -2143,7 +2143,7 @@ fast-diff@^1.1.2:
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
fast-glob@^3.2.11, fast-glob@^3.2.9:
fast-glob@^3.2.12, fast-glob@^3.2.9:
version "3.2.12"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
......@@ -3248,7 +3248,7 @@ merge2@^1.3.0, merge2@^1.4.1:
resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
micromatch@^4.0.4:
micromatch@^4.0.4, micromatch@^4.0.5:
version "4.0.5"
resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
......@@ -3573,14 +3573,14 @@ postcss-load-config@^3.1.4:
lilconfig "^2.0.5"
yaml "^1.10.2"
postcss-nested@5.0.6:
version "5.0.6"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
postcss-nested@6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
dependencies:
postcss-selector-parser "^6.0.6"
postcss-selector-parser "^6.0.10"
postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6:
postcss-selector-parser@^6.0.10:
version "6.0.10"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
......@@ -3593,7 +3593,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
postcss@^8.4.14, postcss@^8.4.16, postcss@^8.4.5:
postcss@^8.4.16, postcss@^8.4.5:
version "8.4.17"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.17.tgz#f87863ec7cd353f81f7ab2dec5d67d861bbb1be5"
integrity sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==
......@@ -3602,6 +3602,15 @@ postcss@^8.4.14, postcss@^8.4.16, postcss@^8.4.5:
picocolors "^1.0.0"
source-map-js "^1.0.2"
postcss@^8.4.18:
version "8.4.19"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
dependencies:
nanoid "^3.3.4"
picocolors "^1.0.0"
source-map-js "^1.0.2"
prelude-ls@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
......@@ -4109,10 +4118,10 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
tailwindcss@^3.0.18:
version "3.1.8"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
tailwindcss@^3.2.4:
version "3.2.4"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"
integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==
dependencies:
arg "^5.0.2"
chokidar "^3.5.3"
......@@ -4120,18 +4129,19 @@ tailwindcss@^3.0.18:
detective "^5.2.1"
didyoumean "^1.2.2"
dlv "^1.1.3"
fast-glob "^3.2.11"
fast-glob "^3.2.12"
glob-parent "^6.0.2"
is-glob "^4.0.3"
lilconfig "^2.0.6"
micromatch "^4.0.5"
normalize-path "^3.0.0"
object-hash "^3.0.0"
picocolors "^1.0.0"
postcss "^8.4.14"
postcss "^8.4.18"
postcss-import "^14.1.0"
postcss-js "^4.0.0"
postcss-load-config "^3.1.4"
postcss-nested "5.0.6"
postcss-nested "6.0.0"
postcss-selector-parser "^6.0.10"
postcss-value-parser "^4.2.0"
quick-lru "^5.1.1"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment