From 0118bd7ed7441ef4c5f18bb245c04521cd751c2e Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Wed, 9 Oct 2024 17:28:27 +0200 Subject: [PATCH 1/4] feat(cut): updated with @diplodoc/transform@4.26.0 --- package-lock.json | 10 +++++----- package.json | 4 ++-- src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts | 10 +++++----- src/extensions/yfm/YfmCut/index.scss | 11 +++++++++++ src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts | 3 ++- 5 files changed, 25 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index b89143eff..dba512bc2 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 bc30d88e8..d459c42e3 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..995f28f6d 100644 --- a/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts +++ b/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts @@ -18,9 +18,9 @@ export const getSchemaSpecs = ( attrs: {class: {default: 'yfm-cut'}}, 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/index.scss b/src/extensions/yfm/YfmCut/index.scss index 91e7d622f..3f4e0eb07 100644 --- a/src/extensions/yfm/YfmCut/index.scss +++ b/src/extensions/yfm/YfmCut/index.scss @@ -6,4 +6,15 @@ &.yfm-cut-active { border-color: var(--g-color-line-generic); } + .yfm-cut-title:focus { + outline: 0; + } + /* 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(); }); } From 6f94429d3532e6586a1c18913c2fe72a56f4a55f Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Wed, 9 Oct 2024 18:31:39 +0200 Subject: [PATCH 2/4] feat(cut): added open attr --- src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts | 2 +- src/extensions/yfm/YfmCut/actions/toYfmCut.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts b/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts index 995f28f6d..d90a5004a 100644 --- a/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts +++ b/src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts @@ -15,7 +15,7 @@ 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: '.yfm-cut'}], 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), ]); From 8b3f4f0301ac3244471a7c36f5db50d00ac6956f Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Wed, 9 Oct 2024 23:18:58 +0200 Subject: [PATCH 3/4] feat(cut): added open attr --- src/extensions/yfm/YfmCut/plugins/auto-open.ts | 2 ++ 1 file changed, 2 insertions(+) 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(); } From b7dfa22845c3a6239465231d63ec660d1504e154 Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Thu, 10 Oct 2024 10:51:35 +0200 Subject: [PATCH 4/4] feat(cut): added TODO --- src/extensions/yfm/YfmCut/index.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/extensions/yfm/YfmCut/index.scss b/src/extensions/yfm/YfmCut/index.scss index 3f4e0eb07..f97cdbb2b 100644 --- a/src/extensions/yfm/YfmCut/index.scss +++ b/src/extensions/yfm/YfmCut/index.scss @@ -9,7 +9,9 @@ .yfm-cut-title:focus { outline: 0; } - /* backward compatibility with earlier versions of cut-extension */ + + /* 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; }