diff --git a/package-lock.json b/package-lock.json index 82403e8d4..365b5302d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,7 +56,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", @@ -111,7 +111,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", @@ -2700,9 +2700,9 @@ } }, "node_modules/@diplodoc/transform": { - "version": "4.22.0", - "resolved": "https://registry.npmjs.org/@diplodoc/transform/-/transform-4.22.0.tgz", - "integrity": "sha512-38paxjAksL7/ZnnYCoyBmAngbKifiw3YTXu162i/J1ZBRT0eFdK1jzxVrlVcPTqsI/pW8WlYPuzdLoFG3lN55w==", + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@diplodoc/transform/-/transform-4.26.0.tgz", + "integrity": "sha512-k6TxF3DzWkAdfPnjzfUBR4mNGiE4dQC5Cvk9flGazhX2aNOXetSYU1/Y1voSNNnG8EmTJqXOsTptGMLBxAz/hw==", "dev": true, "dependencies": { "@diplodoc/tabs-extension": "^3.0.0", diff --git a/package.json b/package.json index 3ccf34e43..980033ca8 100644 --- a/package.json +++ b/package.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", diff --git a/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts b/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts index fcd2b851a..d90a5004a 100644 --- a/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts +++ b/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts @@ -15,12 +15,12 @@ export const getSchemaSpecs = ( placeholder?: PlaceholderOptions, ): Record => ({ [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]; }, diff --git a/src/extensions/yfm/YfmCut/actions/toYfmCut.ts b/src/extensions/yfm/YfmCut/actions/toYfmCut.ts index db6b7c9eb..3e99465fe 100644 --- a/src/extensions/yfm/YfmCut/actions/toYfmCut.ts +++ b/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'}, [ + return cutType(schema).create({class: 'yfm-cut open', open: true}, [ cutTitleType(schema).create(null), cutContentType(schema).create(null, content), ]); diff --git a/src/extensions/yfm/YfmCut/index.scss b/src/extensions/yfm/YfmCut/index.scss index 91e7d622f..f97cdbb2b 100644 --- a/src/extensions/yfm/YfmCut/index.scss +++ b/src/extensions/yfm/YfmCut/index.scss @@ -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; + } } diff --git a/src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts b/src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts index bb08c02d0..6bd433b72 100644 --- a/src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts +++ b/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('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'); @@ -20,6 +20,7 @@ export class YfmCutTitleNodeView implements NodeView { // ignore clicking on the title content // you can open/close yfm-cut by clicking on the arrow icon e.stopPropagation(); + e.preventDefault(); }); } diff --git a/src/extensions/yfm/YfmCut/plugins/auto-open.ts b/src/extensions/yfm/YfmCut/plugins/auto-open.ts index 9d73daad0..7f3dc749a 100644 --- a/src/extensions/yfm/YfmCut/plugins/auto-open.ts +++ b/src/extensions/yfm/YfmCut/plugins/auto-open.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(); }