[WiP] initial text

package-lock.json

@@ -8585,9 +8585,9 @@
       }
     },
     "node_modules/define-properties": {
-      "version": "1.1.4",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
       "dev": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
@@ -8672,9 +8672,9 @@
       }
     },
     "node_modules/devalue": {
-      "version": "4.2.3",
+      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.0.tgz",
-      "integrity": "sha512-JG6Q248aN0pgFL57e3zqTVeFraBe+5W2ugvv1mLXsJP6YYIYJhRZhAl7QP8haJrqob6X10F9NEkuCvNILZTPeQ==",
+      "integrity": "sha512-n94yQo4LI3w7erwf84mhRUkUJfhLoCZiLyoOZ/QFsDbcWNZePrLwbQpvZBUG2TNxwV3VjCKPxkiiQA6pe3TrTA==",
       "dev": true
     },
     "node_modules/dezalgo": {
@@ -22067,9 +22067,9 @@
       "dev": true
     },
     "node_modules/webcrypto-core": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.6.tgz",
-      "integrity": "sha512-gaExY2/3EHQlRNNNVSrbG2Cg94Rutl7fAaKILS1w8ZDhGxdFOaw6EbCfHIxPy9vt/xwp5o0VQAx9aySPF6hU1A==",
+      "integrity": "sha512-TBPiewB4Buw+HI3EQW+Bexm19/W4cP/qZG/02QJCXN+iN+T5sl074vZ3rJcle/ZtDBQSgjkbsQO/1eFcxnSBUA==",
       "dev": true,
       "dependencies": {
         "@peculiar/asn1-schema": "^2.1.6",
@@ -22270,9 +22270,9 @@
       }
     },
     "node_modules/wonka": {
-      "version": "6.1.2",
+      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.2.1.tgz",
-      "integrity": "sha512-zNrXPMccg/7OEp9tSfFkMgTvhhowqasiSHdJ3eCZolXxVTV/aT6HUTofoZk9gwRbGoFey/Nss3JaZKUMKMbofg==",
+      "integrity": "sha512-6et7xfxG/HtMwenqNsphz59PbYT1joKL11q9sY2en3JvzJZtR1alOROIl/1ibgBFdHJqKarF82Uqo1tr1ijzfQ==",
       "dev": true
     },
     "node_modules/word-wrap": {
@@ -29056,9 +29056,9 @@
       "dev": true
     },
     "define-properties": {
-      "version": "1.1.4",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
       "dev": true,
       "requires": {
         "has-property-descriptors": "^1.0.0",
@@ -29113,9 +29113,9 @@
       "dev": true
     },
     "devalue": {
-      "version": "4.2.3",
+      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.0.tgz",
-      "integrity": "sha512-JG6Q248aN0pgFL57e3zqTVeFraBe+5W2ugvv1mLXsJP6YYIYJhRZhAl7QP8haJrqob6X10F9NEkuCvNILZTPeQ==",
+      "integrity": "sha512-n94yQo4LI3w7erwf84mhRUkUJfhLoCZiLyoOZ/QFsDbcWNZePrLwbQpvZBUG2TNxwV3VjCKPxkiiQA6pe3TrTA==",
       "dev": true
     },
     "dezalgo": {
@@ -38895,9 +38895,9 @@
       "dev": true
     },
     "webcrypto-core": {
-      "version": "1.7.5",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.6.tgz",
-      "integrity": "sha512-gaExY2/3EHQlRNNNVSrbG2Cg94Rutl7fAaKILS1w8ZDhGxdFOaw6EbCfHIxPy9vt/xwp5o0VQAx9aySPF6hU1A==",
+      "integrity": "sha512-TBPiewB4Buw+HI3EQW+Bexm19/W4cP/qZG/02QJCXN+iN+T5sl074vZ3rJcle/ZtDBQSgjkbsQO/1eFcxnSBUA==",
       "dev": true,
       "requires": {
         "@peculiar/asn1-schema": "^2.1.6",
@@ -39058,9 +39058,9 @@
       }
     },
     "wonka": {
-      "version": "6.1.2",
+      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.2.1.tgz",
-      "integrity": "sha512-zNrXPMccg/7OEp9tSfFkMgTvhhowqasiSHdJ3eCZolXxVTV/aT6HUTofoZk9gwRbGoFey/Nss3JaZKUMKMbofg==",
+      "integrity": "sha512-6et7xfxG/HtMwenqNsphz59PbYT1joKL11q9sY2en3JvzJZtR1alOROIl/1ibgBFdHJqKarF82Uqo1tr1ijzfQ==",
       "dev": true
     },
     "word-wrap": {

src/components/Article/Comment.tsx

@@ -139,7 +139,7 @@ export const Comment = (props: Props) => {
           </Show>
           <div class={styles.commentBody} id={'comment-' + (comment().id || '')}>
             <Show when={editMode()} fallback={<MD body={body()} />}>
-              <Suspense fallback={<p>Loading...</p>}>
+              <Suspense fallback={<p>{t('Loading')}</p>}>
                 <CommentEditor initialContent={body()} onSubmit={(value) => handleUpdate(value)} />
               </Suspense>
             </Show>

src/components/EditorNew/Editor.tsx

@@ -6,11 +6,16 @@ import type { Nodes, Marks } from './prosemirror/schema'
 import { createImageView } from './prosemirror/views/image'
 import { schema } from './prosemirror/schema'
 import { createPlugins } from './prosemirror/plugins'
-import { DOMSerializer } from 'prosemirror-model'
+import { DOMParser as ProseDOMParser, DOMSerializer } from 'prosemirror-model'
 import { clsx } from 'clsx'
 import { createArticle } from '../../stores/zine/articles'
 import type { ShoutInput } from '../../graphql/types.gen'
 import { Sidebar } from './Sidebar'
+import styles from './Sidebar.module.scss'
+
+type Props = {
+  initialContent?: string
+}
 
 const htmlContainer = typeof document === 'undefined' ? null : document.createElement('div')
 
@@ -20,7 +25,7 @@ const getHtml = (state: EditorState) => {
   return htmlContainer.innerHTML
 }
 
-export const Editor = () => {
+export const Editor = (props: Props) => {
   const editorElRef: {
     current: HTMLDivElement
   } = {
@@ -43,8 +48,12 @@ export const Editor = () => {
 
     const markViews: Partial<Record<Marks, MarkViewConstructor>> = {}
 
+    const domNew = new DOMParser().parseFromString(`<div>${props.initialContent}</div>`, 'text/xml')
+    const doc = ProseDOMParser.fromSchema(schema).parse(domNew)
+
     editorViewRef.current = new EditorView(editorElRef.current, {
       state: EditorState.create({
+        doc,
         schema,
         plugins
       }),
@@ -66,14 +75,14 @@ export const Editor = () => {
   }
 
   return (
-    <div class="wide-container" style={{ display: 'flex' }}>
+    <div class={clsx('container')} style={{ width: '100%', 'max-width': '670px' }}>
-      <div style={{ flex: 1 }}>
+      <div class={styles.editor} ref={(el) => (editorElRef.current = el)} />
-        <div ref={(el) => (editorElRef.current = el)} />
+      <button class={clsx('button')} onClick={handleSaveButtonClick}>
-        <button class={clsx('button')} onClick={handleSaveButtonClick}>
+        Опубликовать WIP
-          Опубликовать WIP
+      </button>
-        </button>
-      </div>
       <Sidebar editorViewRef={editorViewRef} />
     </div>
   )
 }
+
+export default Editor

src/components/EditorNew/Sidebar.module.scss

@@ -1,4 +1,11 @@
+.editor {
+  margin: 0 auto;
+  padding: 1rem;
+  max-width: 670px;
+}
+
 .sidebarContainer {
+  display: none; // режим отладки
   color: rgb(255 255 255 / 50%);
   @include font-size(1.6rem);
 

src/components/EditorNew/index.ts

@@ -0,0 +1 @@
+export { default } from './Editor'

src/components/EditorNew/prosemirror/styles/ProseMirror.scss

@@ -6,7 +6,6 @@
   white-space: pre-wrap;
   font-variant-ligatures: none;
   outline: none;
-  margin: 1em 1em 1em 0;
 
   .dark & {
     color: var(--background);

src/components/Views/Create.tsx

@@ -1,11 +1,18 @@
-import { Editor } from '../EditorNew/Editor'
+import { lazy, Suspense } from 'solid-js'
-import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
+import { t } from '../../utils/intl'
+import { Loading } from '../Loading'
+
+const Editor = lazy(() => import('../EditorNew/Editor'))
+
+const newArticleIpsum = `<h1>${t('Header')}</h1>
+    <h2>${t('Subheader')}</h2>
+    <p>${t('A short introduction to keep the reader interested')}</p>`
 
 export const CreateView = () => {
   return (
-    <ShowOnlyOnClient>
+    <Suspense fallback={<Loading />}>
-      <Editor />
+      <Editor initialContent={newArticleIpsum} />
-    </ShowOnlyOnClient>
+    </Suspense>
   )
 }
 

src/locales/ru.json

@@ -231,5 +231,8 @@
   "Get notifications": "Получать уведомления",
   "Profile successfully saved": "Профиль успешно сохранён",
   "Welcome!": "Добро пожаловать!",
-  "You've successfully logged out": "Вы успешно вышли из аккаунта"
+  "You've successfully logged out": "Вы успешно вышли из аккаунта",
+  "Header": "Заголовок",
+  "Subheader": "Подзаголовок",
+  "A short introduction to keep the reader interested": "Небольшое вступление, чтобы заинтересовать читателя"
 }