Merge branch 'prosemirror_enter_point' into 'dev'

[WiP] initial text See merge request discoursio/discoursio-webapp!20
2023-02-11 10:41:46 +00:00 · 2023-02-11 10:41:46 +00:00 · c92244c63a
commit c92244c63a
parent b2b32b996a 6a02c05882
9 changed files with 99 additions and 10661 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8585,9 +8585,9 @@
      }
    },
    "node_modules/define-properties": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.3.tgz",
-      "integrity": "sha512-JG6Q248aN0pgFL57e3zqTVeFraBe+5W2ugvv1mLXsJP6YYIYJhRZhAl7QP8haJrqob6X10F9NEkuCvNILZTPeQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.0.tgz",
+      "integrity": "sha512-n94yQo4LI3w7erwf84mhRUkUJfhLoCZiLyoOZ/QFsDbcWNZePrLwbQpvZBUG2TNxwV3VjCKPxkiiQA6pe3TrTA==",
      "dev": true
    },
    "node_modules/dezalgo": {
@ -22067,9 +22067,9 @@
      "dev": true
    },
    "node_modules/webcrypto-core": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.5.tgz",
-      "integrity": "sha512-gaExY2/3EHQlRNNNVSrbG2Cg94Rutl7fAaKILS1w8ZDhGxdFOaw6EbCfHIxPy9vt/xwp5o0VQAx9aySPF6hU1A==",
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.6.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.1.2.tgz",
-      "integrity": "sha512-zNrXPMccg/7OEp9tSfFkMgTvhhowqasiSHdJ3eCZolXxVTV/aT6HUTofoZk9gwRbGoFey/Nss3JaZKUMKMbofg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.2.1.tgz",
+      "integrity": "sha512-6et7xfxG/HtMwenqNsphz59PbYT1joKL11q9sY2en3JvzJZtR1alOROIl/1ibgBFdHJqKarF82Uqo1tr1ijzfQ==",
      "dev": true
    },
    "node_modules/word-wrap": {
@ -29056,9 +29056,9 @@
      "dev": true
    },
    "define-properties": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.2.3.tgz",
-      "integrity": "sha512-JG6Q248aN0pgFL57e3zqTVeFraBe+5W2ugvv1mLXsJP6YYIYJhRZhAl7QP8haJrqob6X10F9NEkuCvNILZTPeQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.0.tgz",
+      "integrity": "sha512-n94yQo4LI3w7erwf84mhRUkUJfhLoCZiLyoOZ/QFsDbcWNZePrLwbQpvZBUG2TNxwV3VjCKPxkiiQA6pe3TrTA==",
      "dev": true
    },
    "dezalgo": {
@ -38895,9 +38895,9 @@
      "dev": true
    },
    "webcrypto-core": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.5.tgz",
-      "integrity": "sha512-gaExY2/3EHQlRNNNVSrbG2Cg94Rutl7fAaKILS1w8ZDhGxdFOaw6EbCfHIxPy9vt/xwp5o0VQAx9aySPF6hU1A==",
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.6.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.1.2.tgz",
-      "integrity": "sha512-zNrXPMccg/7OEp9tSfFkMgTvhhowqasiSHdJ3eCZolXxVTV/aT6HUTofoZk9gwRbGoFey/Nss3JaZKUMKMbofg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.2.1.tgz",
+      "integrity": "sha512-6et7xfxG/HtMwenqNsphz59PbYT1joKL11q9sY2en3JvzJZtR1alOROIl/1ibgBFdHJqKarF82Uqo1tr1ijzfQ==",
      "dev": true
    },
    "word-wrap": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/Article/Comment.tsx
+++ b/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>
--- a/src/components/EditorNew/Editor.tsx
+++ b/src/components/EditorNew/Editor.tsx
@ -6,11 +6,18 @@ 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'
+import Button from '../_shared/Button'
+import { t } from '../../utils/intl'
+
+type Props = {
+  initialContent?: string
+}

 const htmlContainer = typeof document === 'undefined' ? null : document.createElement('div')

@ -20,7 +27,7 @@ const getHtml = (state: EditorState) => {
  return htmlContainer.innerHTML
 }

-export const Editor = () => {
+export const Editor = (props: Props) => {
  const editorElRef: {
    current: HTMLDivElement
  } = {
@ -43,8 +50,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
      }),
@ -53,6 +64,7 @@ export const Editor = () => {
      dispatchTransaction
    })

+    editorViewRef.current.dom.classList.add('createArticle')
    editorViewRef.current.focus()
  })

@ -66,14 +78,12 @@ export const Editor = () => {
  }

  return (
-    <div class="wide-container" style={{ display: 'flex' }}>
-      <div style={{ flex: 1 }}>
-        <div ref={(el) => (editorElRef.current = el)} />
-        <button class={clsx('button')} onClick={handleSaveButtonClick}>
-          Опубликовать WIP
-        </button>
-      </div>
+    <div class={clsx('container')} style={{ width: '100%', 'max-width': '670px' }}>
+      <div class={styles.editor} ref={(el) => (editorElRef.current = el)} />
+      <Button value={t('Publish')} onClick={handleSaveButtonClick} />
      <Sidebar editorViewRef={editorViewRef} />
    </div>
  )
 }
+
+export default Editor
--- a/src/components/EditorNew/Sidebar.module.scss
+++ b/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);

--- a/src/components/EditorNew/index.ts
+++ b/src/components/EditorNew/index.ts
@ -0,0 +1 @@
+export { default } from './Editor'
--- a/src/components/EditorNew/prosemirror/styles/ProseMirror.scss
+++ b/src/components/EditorNew/prosemirror/styles/ProseMirror.scss
@ -1,4 +1,4 @@
-.ProseMirror {
+.ProseMirror.createArticle {
  color: var(--foreground);
  background-color: var(--background);
  position: relative;
@ -6,8 +6,36 @@
  white-space: pre-wrap;
  font-variant-ligatures: none;
  outline: none;
-  margin: 1em 1em 1em 0;

+  //font styles
+
+  h1 {
+    margin: 0 0 16px 0;
+    font-weight: 700;
+    font-size: 44px;
+    line-height: 50px;
+  }
+
+  h2 {
+    margin: 0 0 16px 0;
+    font-weight: 400;
+    font-size: 44px;
+    line-height: 50px;
+  }
+
+  h3 {
+    margin: 0 0 16px 0;
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 40px;
+  }
+
+  p {
+    margin: 0 0 16px 0;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 28px;
+  }
  .dark & {
    color: var(--background);
    background-color: var(--foreground);
--- a/src/components/Views/Create.tsx
+++ b/src/components/Views/Create.tsx
@ -1,11 +1,18 @@
-import { Editor } from '../EditorNew/Editor'
-import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
+import { lazy, Suspense } from 'solid-js'
+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>
-      <Editor />
-    </ShowOnlyOnClient>
+    <Suspense fallback={<Loading />}>
+      <Editor initialContent={newArticleIpsum} />
+    </Suspense>
  )
 }

--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@ -231,5 +231,9 @@
  "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": "Небольшое вступление, чтобы заинтересовать читателя",
+  "Publish": "Опубликовать"
 }