From 47d14b0a5dc5149dfc91eae9cee9caf21f2c080d Mon Sep 17 00:00:00 2001 From: Igor Lobanov Date: Fri, 12 May 2023 15:03:46 +0200 Subject: [PATCH] Fix typography feature, scroll top button fix, slugify fix (#93) * Fix typography feature, scroll top button fix, slugify fix * build fix, some lint * refactoring, lint --- package-lock.json | 16 +++++++++++++- package.json | 3 ++- public/locales/en/translation.json | 15 ++++++------- public/locales/ru/translation.json | 15 ++++++------- src/components/Editor/Editor.tsx | 8 ++++--- src/components/Editor/Panel/Panel.module.scss | 17 +++++++-------- src/components/Editor/Panel/Panel.tsx | 16 ++++++++++++++ src/components/Editor/Prosemirror.scss | 1 + .../TopicSelect/TopicSelect.module.scss | 2 +- .../Feed/Sidebar/Sidebar.module.scss | 7 ++++--- src/components/Nav/AuthModal/RegisterForm.tsx | 10 ++++----- src/components/Views/Edit.module.scss | 2 +- src/components/Views/Edit.tsx | 5 +++-- .../GrowingTextarea.module.scss | 1 + src/context/editor.tsx | 21 +++++++++++++++++-- src/pages/profile/Settings.module.scss | 4 ++-- src/utils/slugify.ts | 2 +- 17 files changed, 99 insertions(+), 46 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5b13cedc..40731789 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,8 @@ "formidable": "2.1.1", "i18next": "22.4.15", "mailgun.js": "8.2.1", - "node-fetch": "3.3.1" + "node-fetch": "3.3.1", + "typograf": "7.1.0" }, "devDependencies": { "@babel/core": "7.21.8", @@ -19579,6 +19580,14 @@ "node": ">=12.20" } }, + "node_modules/typograf": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/typograf/-/typograf-7.1.0.tgz", + "integrity": "sha512-R7Kbb7JKuT96hWHTWQbZrGUchCk98rM2IQ38mi0ye2LoEJRn4o3lSZ8DZxK4ufrszUlrXIvnidIZ0AKA7UHvgg==", + "engines": { + "node": ">= 4" + } + }, "node_modules/ua-parser-js": { "version": "0.7.33", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.33.tgz", @@ -35067,6 +35076,11 @@ "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", "dev": true }, + "typograf": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/typograf/-/typograf-7.1.0.tgz", + "integrity": "sha512-R7Kbb7JKuT96hWHTWQbZrGUchCk98rM2IQ38mi0ye2LoEJRn4o3lSZ8DZxK4ufrszUlrXIvnidIZ0AKA7UHvgg==" + }, "ua-parser-js": { "version": "0.7.33", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.33.tgz", diff --git a/package.json b/package.json index 9899c4a0..f5d88894 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,8 @@ "formidable": "2.1.1", "i18next": "22.4.15", "mailgun.js": "8.2.1", - "node-fetch": "3.3.1" + "node-fetch": "3.3.1", + "typograf": "7.1.0" }, "devDependencies": { "@babel/core": "7.21.8", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 6ccff815..004e6fc2 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -2,9 +2,9 @@ "...subscribing": "...subscribing", "About myself": "About myself", "About the project": "About the project", + "Add another image": "Add another image", "Add comment": "Comment", "Add image": "Add image", - "Add another image": "Add another image", "Address on Discourse": "Address on Discourse", "All": "All", "All authors": "All authors", @@ -46,9 +46,6 @@ "Create Chat": "Create Chat", "Create Group": "Create a group", "Create account": "Create an account", - "Password should be at least 8 characters": "Password should be at least 8 characters", - "Password should contain at least one number": "Password should contain at least one number", - "Password should contain at least one special character: !@#$%^&*": "Password should contain at least one special character: !@#$%^&*", "Create post": "Create post", "Date of Birth": "Date of Birth", "Delete": "Delete", @@ -77,6 +74,7 @@ "Feed settings": "Feed settings", "Feedback": "Feedback", "Fill email": "Fill email", + "Fix typography": "Fix typography", "Follow": "Follow", "Follow the topic": "Follow the topic", "Followers": "Followers", @@ -146,6 +144,9 @@ "Partners": "Partners", "Password": "Password", "Password again": "Password again", + "Password should be at least 8 characters": "Password should be at least 8 characters", + "Password should contain at least one number": "Password should contain at least one number", + "Password should contain at least one special character: !@#$%^&*": "Password should contain at least one special character: !@#$%^&*", "Passwords are not equal": "Passwords are not equal", "Paste Embed code": "Paste Embed code", "Personal": "Personal", @@ -163,6 +164,7 @@ "Profile": "Profile", "Profile settings": "Profile settings", "Publications": "Publications", + "Publish Settings": "Publish Settings", "Quit": "Quit", "Quotes": "Quotes", "Reason uknown": "Reason unknown", @@ -224,6 +226,7 @@ "Try to find another way": "Try to find another way", "Unfollow": "Unfollow", "Unfollow the topic": "Unfollow the topic", + "Unnamed draft": "Unnamed draft", "Upload": "Upload", "Username": "Username", "Userpic": "Userpic", @@ -279,7 +282,5 @@ "topics": "topics", "user already exist": "user already exists", "view": "view", - "zine": "zine", - "Unnamed draft": "Unnamed draft", - "Publish Settings": "Publish Settings" + "zine": "zine" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 6d2cb90b..6c13535c 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -3,9 +3,9 @@ "A short introduction to keep the reader interested": "Небольшое вступление, чтобы заинтересовать читателя", "About myself": "О себе", "About the project": "О проекте", + "Add another image": "Добавить другое изображение", "Add comment": "Комментировать", "Add image": "Добавить изображение", - "Add another image": "Добавить другое изображение", "Add to bookmarks": "Добавить в закладки", "Address on Discourse": "Адрес на Дискурсе", "All": "Все", @@ -48,9 +48,6 @@ "Create Chat": "Создать чат", "Create Group": "Создать группу", "Create account": "Создать аккаунт", - "Password should be at least 8 characters": "Пароль должен быть не менее 8 символов", - "Password should contain at least one number": "Пароль должен содержать хотя бы одну цифру", - "Password should contain at least one special character: !@#$%^&*": "Пароль должен содержать хотя бы один специальный символ: !@#$%^&*", "Create post": "Создать публикацию", "Date of Birth": "Дата рождения", "Delete": "Удалить", @@ -80,6 +77,7 @@ "Feed settings": "Настройки ленты", "Feedback": "Обратная связь", "Fill email": "Введите почту", + "Fix typography": "Исправить типографику", "Follow": "Подписаться", "Follow the topic": "Подписаться на тему", "Followers": "Подписчики", @@ -153,6 +151,9 @@ "Partners": "Партнёры", "Password": "Пароль", "Password again": "Пароль ещё раз", + "Password should be at least 8 characters": "Пароль должен быть не менее 8 символов", + "Password should contain at least one number": "Пароль должен содержать хотя бы одну цифру", + "Password should contain at least one special character: !@#$%^&*": "Пароль должен содержать хотя бы один специальный символ: !@#$%^&*", "Passwords are not equal": "Пароли не совпадают", "Paste Embed code": "Вставьте embed код", "Personal": "Личные", @@ -174,6 +175,7 @@ "Publication settings": "Настройки публикации", "Publications": "Публикации", "Publish": "Опубликовать", + "Publish Settings": "Настройки публикации", "Quit": "Выйти", "Quotes": "Цитаты", "Reason uknown": "Причина неизвестна", @@ -237,6 +239,7 @@ "Try to find another way": "Попробуйте найти по-другому", "Unfollow": "Отписаться", "Unfollow the topic": "Отписаться от темы", + "Unnamed draft": "Unnamed draft", "Upload": "Загрузить", "Username": "Имя пользователя", "Userpic": "Аватар", @@ -300,7 +303,5 @@ "topics": "темы", "user already exist": "пользователь уже существует", "view": "просмотр", - "zine": "журнал", - "Publish Settings": "Настройки публикации", - "Unnamed draft": "Unnamed draft" + "zine": "журнал" } diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 49f5e375..98630a27 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -187,12 +187,14 @@ export const Editor = (props: EditorProps) => { ] })) - const html = useEditorHTML(() => editor()) - const { - actions: { countWords } + actions: { countWords, setEditor } } = useEditorContext() + setEditor(editor) + + const html = useEditorHTML(() => editor()) + createEffect(() => { props.onChange(html()) if (html()) { diff --git a/src/components/Editor/Panel/Panel.module.scss b/src/components/Editor/Panel/Panel.module.scss index eb589799..43f137ae 100644 --- a/src/components/Editor/Panel/Panel.module.scss +++ b/src/components/Editor/Panel/Panel.module.scss @@ -59,6 +59,13 @@ a { text-decoration: none; border-bottom: none; + color: rgb(255 255 255 / 35%); + font-weight: normal !important; + + &:hover { + background: none; + color: #fff; + } } .linkWithIcon { @@ -73,16 +80,6 @@ margin-top: 3em; } - a { - color: rgb(255 255 255 / 35%); - font-weight: normal !important; - - &:hover { - background: none; - color: #fff; - } - } - &.hidden { transform: translateX(100%); } diff --git a/src/components/Editor/Panel/Panel.tsx b/src/components/Editor/Panel/Panel.tsx index 83e72514..d67f81c8 100644 --- a/src/components/Editor/Panel/Panel.tsx +++ b/src/components/Editor/Panel/Panel.tsx @@ -8,6 +8,10 @@ import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler' import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler' import { getPagePath } from '@nanostores/router' import { router } from '../../../stores/router' +import { useEditorHTML } from 'solid-tiptap' +import Typograf from 'typograf' + +const typograf = new Typograf({ locale: ['ru', 'en-US'] }) type Props = { shoutId: number @@ -18,6 +22,7 @@ export const Panel = (props: Props) => { const { isEditorPanelVisible, wordCounter, + editorRef, actions: { toggleEditorPanel, saveShout, publishShout } } = useEditorContext() @@ -47,6 +52,12 @@ export const Panel = (props: Props) => { publishShout() } + const handleFixTypographyLinkClick = (e) => { + e.preventDefault() + const html = useEditorHTML(() => editorRef.current()) + editorRef.current().commands.setContent(typograf.execute(html())) + } + return (