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,98 +11,101 @@ export const CreateView = () => {
   const { t } = useLocalize()
 
   return (
-    <Suspense fallback={<Loading />}>
+    <>
-      <form>
+      <Title>{t('Write an article')}</Title>
-        <div class="wide-container">
+      <Suspense fallback={<Loading />}>
-          <div class="shift-content">
+        <form>
-            <div class="row">
+          <div class="wide-container">
-              <div class="col-md-10 col-lg-9 col-xl-8">
+            <div class="shift-content">
-                <h4>Заголовок</h4>
+              <div class="row">
-                <div class="pretty-form__item">
+                <div class="col-md-10 col-lg-9 col-xl-8">
-                  <input
+                  <h4>Заголовок</h4>
-                    type="text"
-                    name="header"
-                    id="header"
-                    placeholder="Придумайте заголовок вашей истории"
-                  />
-                  <label for="header">Придумайте заголовок вашей истории</label>
-                </div>
-
-                <h4>Подзаголовок</h4>
-                <div class="pretty-form__item">
-                  <input type="text" name="subheader" id="subheader" placeholder="Подзаголовок" />
-                  <label for="subheader">Подзаголовок</label>
-                </div>
-
-                <Editor />
-
-                <h1>Настройки публикации</h1>
-                {/*<h4>Лид</h4>*/}
-                {/*<div class="pretty-form__item">*/}
-                {/*  <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
-                {/*  <label for="lead">Лид</label>*/}
-                {/*</div>*/}
-
-                {/*<h4>Выбор сообщества</h4>*/}
-                {/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
-                {/*<div class="pretty-form__item">*/}
-                {/*  <input*/}
-                {/*    type="text"*/}
-                {/*    name="community"*/}
-                {/*    id="community"*/}
-                {/*    placeholder="Сообщества"*/}
-                {/*    class="nolabel"*/}
-                {/*  />*/}
-                {/*</div>*/}
-
-                <h4>Темы</h4>
-                <p class="description">
-                  Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти его
-                  на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема становится
-                  заглавной
-                </p>
-                <div class="pretty-form__item">
-                  <input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />
-                </div>
-
-                <h4>Соавторы</h4>
-                <p class="description">У каждого соавтора можно добавить роль</p>
-                <div class="pretty-form__item--with-button">
                   <div class="pretty-form__item">
-                    <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />
+                    <input
-                    <label for="authors">Введите имя или e-mail</label>
+                      type="text"
+                      name="header"
+                      id="header"
+                      placeholder="Придумайте заголовок вашей истории"
+                    />
+                    <label for="header">Придумайте заголовок вашей истории</label>
                   </div>
-                  <button class="button button--submit">Добавить</button>
-                </div>
 
-                <div class="row">
+                  <h4>Подзаголовок</h4>
-                  <div class="col-md-6">Михаил Драбкин</div>
+                  <div class="pretty-form__item">
-                  <div class="col-md-6">
+                    <input type="text" name="subheader" id="subheader" placeholder="Подзаголовок" />
-                    <input type="text" name="coauthor" id="coauthor1" class="nolabel" />
+                    <label for="subheader">Подзаголовок</label>
                   </div>
-                </div>
 
-                <h4>Карточка материала на&nbsp;главной</h4>
+                  <Editor />
-                <p class="description">
-                  Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
-                  выглядеть на&nbsp;главной странице
-                </p>
-                <div class={styles.articlePreview}></div>
 
-                <div class={styles.saveBlock}>
+                  <h1>Настройки публикации</h1>
-                  <p>
+                  {/*<h4>Лид</h4>*/}
-                    Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
+                  {/*<div class="pretty-form__item">*/}
-                    опубликовать ваш текст
+                  {/*  <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
+                  {/*  <label for="lead">Лид</label>*/}
+                  {/*</div>*/}
+
+                  {/*<h4>Выбор сообщества</h4>*/}
+                  {/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
+                  {/*<div class="pretty-form__item">*/}
+                  {/*  <input*/}
+                  {/*    type="text"*/}
+                  {/*    name="community"*/}
+                  {/*    id="community"*/}
+                  {/*    placeholder="Сообщества"*/}
+                  {/*    class="nolabel"*/}
+                  {/*  />*/}
+                  {/*</div>*/}
+
+                  <h4>Темы</h4>
+                  <p class="description">
+                    Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти
+                    его на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема
+                    становится заглавной
                   </p>
-                  <button class={clsx('button button--outline', styles.button)}>Сохранить</button>
+                  <div class="pretty-form__item">
-                  <button class={clsx('button button--submit', styles.button)}>Опубликовать</button>
+                    <input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />
+                  </div>
+
+                  <h4>Соавторы</h4>
+                  <p class="description">У каждого соавтора можно добавить роль</p>
+                  <div class="pretty-form__item--with-button">
+                    <div class="pretty-form__item">
+                      <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />
+                      <label for="authors">Введите имя или e-mail</label>
+                    </div>
+                    <button class="button button--submit">Добавить</button>
+                  </div>
+
+                  <div class="row">
+                    <div class="col-md-6">Михаил Драбкин</div>
+                    <div class="col-md-6">
+                      <input type="text" name="coauthor" id="coauthor1" class="nolabel" />
+                    </div>
+                  </div>
+
+                  <h4>Карточка материала на&nbsp;главной</h4>
+                  <p class="description">
+                    Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
+                    выглядеть на&nbsp;главной странице
+                  </p>
+                  <div class={styles.articlePreview}></div>
+
+                  <div class={styles.saveBlock}>
+                    <p>
+                      Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
+                      опубликовать ваш текст
+                    </p>
+                    <button class={clsx('button button--outline', styles.button)}>Сохранить</button>
+                    <button class={clsx('button button--submit', styles.button)}>Опубликовать</button>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+        </form>
-      </form>
+      </Suspense>
-    </Suspense>
+    </>
   )
 }