bold, create page title

public/locales/en/translation.json

@@ -232,5 +232,6 @@
   "zine": "zine",
   "By time": "By time",
   "New only": "New only",
-  "Short opening": "Short opening"
+  "Short opening": "Short opening",
+  "Write an article": "Write an article"
 }

public/locales/ru/translation.json

@@ -250,5 +250,6 @@
   "zine": "журнал",
   "By time": "По порядку",
   "New only": "Только новые",
-  "Short opening": "Небольшое вступление, чтобы заинтересовать читателя"
+  "Short opening": "Небольшое вступление, чтобы заинтересовать читателя",
+  "Write an article": "Написать статью"
 }

src/components/Editor/EditorBubbleMenu.tsx

@@ -2,6 +2,7 @@ import type { Editor } from '@tiptap/core'
 import styles from './EditorBubbleMenu.module.scss'
 import { Icon } from '../_shared/Icon'
 import { clsx } from 'clsx'
+import { createEditorTransaction } from 'solid-tiptap'
 
 type BubbleMenuProps = {
   editor: Editor
@@ -9,12 +10,25 @@ type BubbleMenuProps = {
 }
 
 export const EditorBubbleMenu = (props: BubbleMenuProps) => {
+  const isBold = createEditorTransaction(
+    () => props.editor,
+    (editor) => editor && editor.isActive('bold')
+  )
+
   return (
     <div ref={props.ref} class={styles.bubbleMenu}>
-      <button class={clsx(styles.bubbleMenuButton, styles.bubbleMenuButtonActive)}>
+      <button class={clsx(styles.bubbleMenuButton)}>
         <Icon name="editor-text-size" />
       </button>
-      <button class={styles.bubbleMenuButton}>
+      <button
+        class={clsx(styles.bubbleMenuButton, {
+          [styles.bubbleMenuButtonActive]: isBold()
+        })}
+        onClick={(e) => {
+          e.preventDefault()
+          props.editor.commands.toggleBold()
+        }}
+      >
         <Icon name="editor-bold" />
       </button>
       <button class={styles.bubbleMenuButton}>

src/components/Views/Create.tsx

@@ -3,6 +3,7 @@ import { Loading } from '../_shared/Loading'
 import { useLocalize } from '../../context/localize'
 import { clsx } from 'clsx'
 import styles from './Create.module.scss'
+import { Title } from '@solidjs/meta'
 
 const Editor = lazy(() => import('../Editor/Editor'))
 
@@ -10,6 +11,8 @@ export const CreateView = () => {
   const { t } = useLocalize()
 
   return (
+    <>
+      <Title>{t('Write an article')}</Title>
       <Suspense fallback={<Loading />}>
         <form>
           <div class="wide-container">
@@ -56,9 +59,9 @@ export const CreateView = () => {
 
                   <h4>Темы</h4>
                   <p class="description">
-                  Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти его
-                  на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема становится
-                  заглавной
+                    Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти
+                    его на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема
+                    становится заглавной
                   </p>
                   <div class="pretty-form__item">
                     <input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />
@@ -102,6 +105,7 @@ export const CreateView = () => {
           </div>
         </form>
       </Suspense>
+    </>
   )
 }