fix(yfmCut): reverted details, summary tags (#431)

Author: makhnatkin

demo/YFM.stories.tsx

@@ -54,6 +54,17 @@ This is an alert.
 Content displayed when clicked.
 
 {% endcut %}
+
+{% cut "Cut with nested сut header" %}
+
+{% cut "Cut header" %}
+
+Content displayed when clicked.
+
+{% endcut %}
+
+{% endcut %}
+
 `.trim(),
 
     yfmTabs: `

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

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

src/extensions/yfm/YfmCut/actions/toYfmCut.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', open: true}, [
+    return cutType(schema).create({class: 'yfm-cut open'}, [
         cutTitleType(schema).create(null),
         cutContentType(schema).create(null, content),
     ]);

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

@@ -1,3 +1,18 @@
 .yfm-cut-title .g-md-yfm-cut-title-inner {
     cursor: text;
 }
+
+// FIXME: Restore the cut-extension mapping after the fix:
+//  when using <details> and <summary> tags, the click does
+//  not work correctly on the placeholder
+
+.yfm-cut-content {
+    display: none;
+    overflow: hidden;
+
+    transition: height 0.3s ease-in-out;
+}
+
+.open > .yfm-cut-content {
+    display: revert;
+}

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

@@ -12,7 +12,7 @@ export class YfmCutTitleNodeView implements NodeView {
     constructor(node: Node) {
         this.node = node;
 
-        this.dom = document.createElement('summary');
+        this.dom = document.createElement('div');
         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');

src/extensions/yfm/YfmCut/plugins/auto-open.ts

@@ -44,7 +44,6 @@ 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--;
             }
         }
@@ -105,7 +104,6 @@ class CutAutoOpenOnDragOver implements PluginView {
     private _openCut() {
         if (this._editorView.dragging) {
             this._cutElem?.classList.add('open');
-            this._cutElem?.setAttribute('open', 'true');
         }
         this._clear();
     }