feat(YfmCut): auto openning yfm-cut if selection is inside cut's cont…

…ent (#46)

src/extensions/yfm/YfmCut/index.ts

@@ -9,6 +9,7 @@ import {fromYfm} from './fromYfm';
 import {getSpec, YfmCutSpecOptions} from './spec';
 import {createYfmCut, toYfmCut} from './actions/toYfmCut';
 import {backToCutTitle, exitFromCutTitle, liftEmptyBlockFromCut, removeCut} from './commands';
+import {cutAutoOpenPlugin} from './plugins/auto-open';
 
 const cutAction = 'toYfmCut';
 
@@ -51,6 +52,7 @@ export const YfmCut: ExtensionAuto<YfmCutOptions> = (builder, opts) => {
                 tokenSpec: fromYfm[CutNode.CutContent],
             },
         }))
+        .addPlugin(cutAutoOpenPlugin)
         .addAction(cutAction, () => toYfmCut)
         .addKeymap(() => ({
             Backspace: chainCommands(backToCutTitle, removeCut),

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

@@ -0,0 +1,46 @@
+import {Plugin, PluginKey} from 'prosemirror-state';
+import type {EditorView} from 'prosemirror-view';
+import type {ResolvedPos} from 'prosemirror-model';
+import {isTextSelection} from '../../../../utils/selection';
+import {cutContentType, cutType} from '../const';
+
+const key = new PluginKey('yfm-cut-auto-open');
+
+export const cutAutoOpenPlugin = () =>
+    new Plugin({
+        key,
+        view(view) {
+            update(view);
+            return {
+                update: (view) => update(view),
+            };
+        },
+    });
+
+function update(view: EditorView) {
+    const sel = view.state.selection;
+    const domAtPos = view.domAtPos.bind(view);
+    if (isTextSelection(sel)) {
+        if (sel.$cursor) {
+            openParentYfmCuts(sel.$cursor, domAtPos);
+        } else {
+            openParentYfmCuts(sel.$head, domAtPos);
+            openParentYfmCuts(sel.$anchor, domAtPos);
+        }
+    }
+}
+
+function openParentYfmCuts($pos: ResolvedPos, domAtPos: EditorView['domAtPos']): void {
+    let {depth} = $pos;
+    const {schema} = $pos.parent.type;
+    while (depth > 0) {
+        if ($pos.node(depth).type === cutContentType(schema)) {
+            if ($pos.node(depth - 1).type === cutType(schema)) {
+                const {node: cutDomNode} = domAtPos($pos.start(depth - 1), 0);
+                (cutDomNode as Element).classList.add('open');
+                depth--;
+            }
+        }
+        depth--;
+    }
+}