feat: content node for yfm note

package.json

@@ -65,7 +65,7 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@diplodoc/transform": "4.2.1",
+    "@diplodoc/transform": "4.5.0",
     "@gravity-ui/components": "2.0.0",
     "@gravity-ui/eslint-config": "1.0.2",
     "@gravity-ui/prettier-config": "1.0.1",
@@ -111,7 +111,7 @@
     "typescript": "^4.5.2"
   },
   "peerDependencies": {
-    "@diplodoc/transform": "^4.0.0",
+    "@diplodoc/transform": "^4.5.0",
     "@gravity-ui/components": "^2.0.0",
     "@gravity-ui/uikit": "^5.0.0",
     "lodash": "^4.17.20",

src/extensions/yfm/YfmNote/YfmNoteSpecs/const.ts

@@ -1,6 +1,7 @@
 export enum NoteNode {
     Note = 'yfm_note',
     NoteTitle = 'yfm_note_title',
+    NoteContent = 'yfm_note_content',
 }
 
 export enum NoteAttrs {

src/extensions/yfm/YfmNote/YfmNoteSpecs/fromYfm.ts

@@ -8,4 +8,5 @@ export const fromYfm: Record<NoteNode, ParserToken> = {
         getAttrs: (token) => (token.attrs ? Object.fromEntries(token.attrs) : {}),
     },
     [NoteNode.NoteTitle]: {name: NoteNode.NoteTitle, type: 'block'},
+    [NoteNode.NoteContent]: {name: NoteNode.NoteContent, type: 'block'},
 };

src/extensions/yfm/YfmNote/YfmNoteSpecs/index.ts

@@ -36,5 +36,12 @@ export const YfmNoteSpecs: ExtensionAuto<YfmNoteSpecsOptions> = (builder, opts)
             fromYfm: {
                 tokenSpec: fromYfm[NoteNode.NoteTitle],
             },
+        }))
+        .addNode(NoteNode.NoteContent, () => ({
+            spec: spec[NoteNode.NoteContent],
+            toYfm: toYfm[NoteNode.NoteContent],
+            fromYfm: {
+                tokenSpec: fromYfm[NoteNode.NoteContent],
+            },
         }));
 };

src/extensions/yfm/YfmNote/YfmNoteSpecs/spec.ts

@@ -4,6 +4,7 @@ import {NoteAttrs, NoteNode} from './const';
 import {PlaceholderOptions} from '../../../../utils/placeholder';
 
 const DEFAULT_TITLE_PLACEHOLDER = 'Note';
+const DEFAULT_CONTENT_PLACEHOLDER = 'Note content';
 
 export const getSpec = (
     opts?: YfmNoteSpecsOptions,
@@ -14,7 +15,7 @@ export const getSpec = (
             [NoteAttrs.Class]: {default: 'yfm-note yfm-accent-info'},
             [NoteAttrs.Type]: {default: 'info'},
         },
-        content: `${NoteNode.NoteTitle} block+`,
+        content: `${NoteNode.NoteTitle} ${NoteNode.NoteContent}`,
         group: 'block yfm-note',
         parseDOM: [
             {
@@ -57,4 +58,24 @@ export const getSpec = (
         },
         complex: 'leaf',
     },
+    [NoteNode.NoteContent]: {
+        content: '(block | paragraph)+',
+        group: 'block yfm-note',
+        parseDOM: [
+            {
+                tag: 'div.yfm-note-content',
+                priority: 100,
+            },
+        ],
+        toDOM() {
+            return ['div', {class: 'yfm-note-content'}, 0];
+        },
+        selectable: false,
+        allowSelection: false,
+        placeholder: {
+            content: placeholder?.[NoteNode.NoteContent] ?? DEFAULT_CONTENT_PLACEHOLDER,
+            alwaysVisible: true,
+        },
+        complex: 'leaf',
+    },
 });

src/extensions/yfm/YfmNote/YfmNoteSpecs/toYfm.ts

@@ -1,3 +1,4 @@
+import {isNodeEmpty} from '../../../../utils/nodes';
 import type {SerializerNodeToken} from '../../../../core';
 import {getPlaceholderContent} from '../../../../utils/placeholder';
 import {NoteAttrs, NoteNode} from './const';
@@ -23,4 +24,9 @@ export const toYfm: Record<NoteNode, SerializerNodeToken> = {
         state.write('\n');
         state.closeBlock();
     },
+
+    [NoteNode.NoteContent]: (state, node) => {
+        if (!isNodeEmpty(node)) state.renderInline(node);
+        else state.write(getPlaceholderContent(node) + '\n\n');
+    },
 };

src/extensions/yfm/YfmNote/YfmNoteSpecs/utils.ts

@@ -3,3 +3,4 @@ import {NoteNode} from './const';
 
 export const noteType = nodeTypeFactory(NoteNode.Note);
 export const noteTitleType = nodeTypeFactory(NoteNode.NoteTitle);
+export const noteContentType = nodeTypeFactory(NoteNode.NoteContent);

src/extensions/yfm/YfmNote/actions/toYfmNote.ts

@@ -3,7 +3,7 @@ import {Command, EditorState} from 'prosemirror-state';
 import {findParentNodeOfType, hasParentNodeOfType} from 'prosemirror-utils';
 import type {ActionSpec} from '../../../../core';
 import {NoteAttrs} from '../const';
-import {noteTitleType, noteType} from '../utils';
+import {noteContentType, noteTitleType, noteType} from '../utils';
 
 export function isInsideYfmNote(state: EditorState) {
     return hasParentNodeOfType(noteType(state.schema))(state.selection);
@@ -17,7 +17,10 @@ const createYfmNoteNode = (schema: Schema) => (type: YfmNoteType, content: Node
             [NoteAttrs.Class]: `yfm-note yfm-accent-${type}`,
             [NoteAttrs.Type]: type,
         },
-        [noteTitleType(schema).createAndFill()!].concat(content),
+        [
+            noteTitleType(schema).createAndFill()!,
+            noteContentType(schema).createAndFill({}, content)!,
+        ],
     );
 };