feat(yfmCut): updated yfmCut (#408)

Author: makhnatkin

package-lock.json

@@ -204,7 +204,7 @@
     "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
-    "@diplodoc/transform": "4.22.0",
+    "@diplodoc/transform": "4.26.0",
     "@gravity-ui/components": "3.0.0",
     "@gravity-ui/eslint-config": "3.1.1",
     "@gravity-ui/prettier-config": "1.1.0",
@@ -279,7 +279,7 @@
     "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
-    "@diplodoc/transform": ">=4.5.0 <4.19.0",
+    "@diplodoc/transform": ">=4.5.0 <=4.26.0",
     "@gravity-ui/components": "^3.0.0",
     "@gravity-ui/uikit": "^6.11.0",
     "highlight.js": "^11.8.0",

package.json

@@ -15,12 +15,12 @@ export const getSchemaSpecs = (
     placeholder?: PlaceholderOptions,
 ): Record<CutNode, NodeSpec> => ({
     [CutNode.Cut]: {
-        attrs: {class: {default: 'yfm-cut'}},
+        attrs: {class: {default: 'yfm-cut'}, open: {default: null}},
         content: `${CutNode.CutTitle} ${CutNode.CutContent}`,
         group: 'block yfm-cut',
-        parseDOM: [{tag: 'div.yfm-cut'}],
+        parseDOM: [{tag: '.yfm-cut'}],
         toDOM(node) {
-            return ['div', node.attrs, 0];
+            return ['details', node.attrs, 0];
         },
         selectable: true,
         allowSelection: true,
@@ -32,9 +32,9 @@ export const getSchemaSpecs = (
         attrs: {class: {default: 'yfm-cut-title'}},
         content: 'inline*',
         group: 'block yfm-cut',
-        parseDOM: [{tag: 'div.yfm-cut-title'}],
+        parseDOM: [{tag: '.yfm-cut-title'}],
         toDOM(node) {
-            return ['div', node.attrs, 0];
+            return ['summary', node.attrs, 0];
         },
         placeholder: {
             content:
@@ -53,7 +53,7 @@ export const getSchemaSpecs = (
         attrs: {class: {default: 'yfm-cut-content'}},
         content: '(block | paragraph)+',
         group: 'block yfm-cut',
-        parseDOM: [{tag: 'div.yfm-cut-content'}],
+        parseDOM: [{tag: '.yfm-cut-content'}],
         toDOM(node) {
             return ['div', node.attrs, 0];
         },

src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts

@@ -6,7 +6,7 @@ import type {ActionSpec} from '../../../../core';
 import {cutContentType, cutTitleType, cutType} from '../const';
 
 const createYfmCutNode = (schema: Schema) => (content?: Node | Node[] | Fragment) => {
-    return cutType(schema).create({class: 'yfm-cut open'}, [
+    return cutType(schema).create({class: 'yfm-cut open', open: true}, [
         cutTitleType(schema).create(null),
         cutContentType(schema).create(null, content),
     ]);

src/extensions/yfm/YfmCut/actions/toYfmCut.ts

@@ -6,4 +6,17 @@
     &.yfm-cut-active {
         border-color: var(--g-color-line-generic);
     }
+    .yfm-cut-title:focus {
+        outline: 0;
+    }
+
+    /* TODO: Remove this after updating @diplodoc/transform to version 4.19.0 or higher */
+    /* This ensures backward compatibility with earlier versions of cut-extension */
+    .yfm-cut-title {
+        list-style: none;
+    }
+    .yfm-cut-title::-webkit-details-marker,
+    .yfm-cut-title::marker {
+        display: none;
+    }
 }

src/extensions/yfm/YfmCut/index.scss

@@ -12,14 +12,15 @@ export class YfmCutTitleNodeView implements NodeView {
     constructor(node: Node) {
         this.node = node;
 
-        this.dom = document.createElement('div');
+        this.dom = document.createElement('summary');
         this.dom.classList.add('yfm-cut-title');
         this.dom.replaceChildren((this.contentDOM = document.createElement('div')));
         this.contentDOM.classList.add('g-md-yfm-cut-title-inner');
         this.contentDOM.addEventListener('click', (e) => {
             // ignore clicking on the title content
             // you can open/close yfm-cut by clicking on the arrow icon
             e.stopPropagation();
+            e.preventDefault();
         });
     }
 

src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts

@@ -44,6 +44,7 @@ function openParentYfmCuts($pos: ResolvedPos, domAtPos: EditorView['domAtPos']):
             if ($pos.node(depth - 1).type === cutType(schema)) {
                 const {node: cutDomNode} = domAtPos($pos.start(depth - 1), 0);
                 (cutDomNode as Element).classList.add('open');
+                (cutDomNode as Element).setAttribute('open', 'true');
                 depth--;
             }
         }
@@ -104,6 +105,7 @@ class CutAutoOpenOnDragOver implements PluginView {
     private _openCut() {
         if (this._editorView.dragging) {
             this._cutElem?.classList.add('open');
+            this._cutElem?.setAttribute('open', 'true');
         }
         this._clear();
     }