From 56716cdad4f25a40bde046db147d071396d8a861 Mon Sep 17 00:00:00 2001 From: boojack Date: Fri, 9 Dec 2022 08:31:45 +0800 Subject: [PATCH] fix: break word (#708) * fix: break word * chore: update --- web/package.json | 4 +- web/src/css/tailwind.css | 11 ++++-- web/src/labs/marked/marked.test.ts | 8 ++-- web/src/labs/marked/parser/DoneList.ts | 2 +- web/src/labs/marked/parser/OrderedList.ts | 2 +- web/src/labs/marked/parser/TodoList.ts | 2 +- web/src/labs/marked/parser/UnorderedList.ts | 2 +- web/src/less/editor.less | 2 +- web/src/less/memo-content.less | 32 +++++++--------- web/src/less/toast.less | 2 +- web/yarn.lock | 42 +++++++++++++-------- 11 files changed, 60 insertions(+), 49 deletions(-) diff --git a/web/package.json b/web/package.json index f1f4cf38..c9acfb47 100644 --- a/web/package.json +++ b/web/package.json @@ -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" diff --git a/web/src/css/tailwind.css b/web/src/css/tailwind.css index c7adb5b6..c2b773f2 100644 --- a/web/src/css/tailwind.css +++ b/web/src/css/tailwind.css @@ -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; } } diff --git a/web/src/labs/marked/marked.test.ts b/web/src/labs/marked/marked.test.ts index fb9f5e5a..1e6f33d7 100644 --- a/web/src/labs/marked/marked.test.ts +++ b/web/src/labs/marked/marked.test.ts @@ -60,8 +60,8 @@ console.log("hello world!") - [ ] finish my homework - [x] yahaha`, want: `

My task:

-

finish my homework

-

✓yahaha

`, +

finish my homework

+

✓yahaha

`, }, ]; @@ -76,8 +76,8 @@ console.log("hello world!") * list 123 1. 123123`, want: `

This is a list

-

•list 123

-

1.123123

`, +

•list 123

+

1.123123

`, }, ]; diff --git a/web/src/labs/marked/parser/DoneList.ts b/web/src/labs/marked/parser/DoneList.ts index e27434db..293b8995 100644 --- a/web/src/labs/marked/parser/DoneList.ts +++ b/web/src/labs/marked/parser/DoneList.ts @@ -10,7 +10,7 @@ const renderer = (rawStr: string): string => { } const parsedContent = marked(matchResult[1], [], inlineElementParserList); - return `

✓${parsedContent}

${matchResult[2]}`; + return `

✓${parsedContent}

${matchResult[2]}`; }; export default { diff --git a/web/src/labs/marked/parser/OrderedList.ts b/web/src/labs/marked/parser/OrderedList.ts index fdc658ce..9871692c 100644 --- a/web/src/labs/marked/parser/OrderedList.ts +++ b/web/src/labs/marked/parser/OrderedList.ts @@ -10,7 +10,7 @@ const renderer = (rawStr: string): string => { } const parsedContent = marked(matchResult[2], [], inlineElementParserList); - return `

${matchResult[1]}.${parsedContent}

${matchResult[3]}`; + return `

${matchResult[1]}.${parsedContent}

${matchResult[3]}`; }; export default { diff --git a/web/src/labs/marked/parser/TodoList.ts b/web/src/labs/marked/parser/TodoList.ts index 06302576..47f2c934 100644 --- a/web/src/labs/marked/parser/TodoList.ts +++ b/web/src/labs/marked/parser/TodoList.ts @@ -11,7 +11,7 @@ const renderer = (rawStr: string): string => { } const parsedContent = marked(matchResult[1], [], inlineElementParserList); - return `

${parsedContent}

${escape(matchResult[2])}`; + return `

${parsedContent}

${escape(matchResult[2])}`; }; export default { diff --git a/web/src/labs/marked/parser/UnorderedList.ts b/web/src/labs/marked/parser/UnorderedList.ts index 185979d9..26467d2c 100644 --- a/web/src/labs/marked/parser/UnorderedList.ts +++ b/web/src/labs/marked/parser/UnorderedList.ts @@ -11,7 +11,7 @@ const renderer = (rawStr: string): string => { } const parsedContent = marked(matchResult[1], [], inlineElementParserList); - return `

•${parsedContent}

${escape(matchResult[2])}`; + return `

•${parsedContent}

${escape(matchResult[2])}`; }; export default { diff --git a/web/src/less/editor.less b/web/src/less/editor.less index 2e2e91f0..18f650c9 100644 --- a/web/src/less/editor.less +++ b/web/src/less/editor.less @@ -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; diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less index ebc434d7..9cc5ba1d 100644 --- a/web/src/less/memo-content.less +++ b/web/src/less/memo-content.less @@ -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; + } + + .ol-block { + @apply opacity-80 mt-px; } .ul-block { - @apply text-center; + @apply text-center 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; - } - - li { - list-style-type: none; - - &::before { - @apply font-bold mr-1; - content: "•"; - } + @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 { diff --git a/web/src/less/toast.less b/web/src/less/toast.less index 1105f452..62120100 100644 --- a/web/src/less/toast.less +++ b/web/src/less/toast.less @@ -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; } } } diff --git a/web/yarn.lock b/web/yarn.lock index 8a38bb5f..cd74df8e 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -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"