enhance: preview content before splitting

Author: ycnmhd

package-lock.json

@@ -50,6 +50,8 @@
     "tiny-invariant": "1.3.3",
     "tslib": "2.6.2",
     "typescript": "5.3.3",
-    "vitest": "1.3.1"
+    "vitest": "1.3.1",
+    "@types/diff": "^5.2.1",
+    "diff": "^5.2.0"
   }
 }

package.json

@@ -11,7 +11,7 @@ export const headingsToJson = (input: string): TreeNode[] => {
     const lines = input.split('\n');
     const highestHeadingLevel = findHighestHeadingLevel(lines);
     const state: State = {
-        currentNodes: [],
+        currentParents: {},
         currentNode: null,
         tree: [],
     };

src/lib/data-conversion/headings-to-json.ts

@@ -868,4 +868,75 @@ describe('headingsToSections', () => {
 ## H2`;
         expect(headingsToSections(input)).toEqual(output);
     });
+
+    test('first level is not h1 (3)', () => {
+        const input = `## H2
+
+text 1
+#### H4
+
+
+text 2
+### H3
+
+text 3`;
+
+        const output = `
+<!--section: 1-->
+## H2
+
+text 1
+
+<!--section: 1.1-->
+### H4
+
+
+text 2
+
+<!--section: 1.2-->
+### H3
+
+text 3`;
+        expect(headingsToSections(input)).toEqual(output);
+    });
+
+    test('weird bug', () => {
+        const input = `## H2
+
+### H3
+
+text 1
+
+### H3
+
+text 2
+#### H4
+
+- item 1.
+- item 2
+- item 3`;
+        const output = `
+<!--section: 1-->
+## H2
+
+
+<!--section: 1.1-->
+### H3
+
+text 1
+
+
+<!--section: 1.2-->
+### H3
+
+text 2
+
+<!--section: 1.2.1-->
+#### H4
+
+- item 1.
+- item 2
+- item 3`;
+        expect(headingsToSections(input)).toEqual(output);
+    });
 });

src/lib/data-conversion/headings-to-sections.spec.ts

@@ -2,7 +2,7 @@ import { parseDelimiter } from 'src/lib/data-conversion/helpers/delimiter';
 import { TreeNode } from 'src/lib/data-conversion/columns-to-json';
 
 export type State = {
-    currentNodes: TreeNode[];
+    currentParents: Record<string, TreeNode>;
     currentNode: null | TreeNode;
     tree: TreeNode[];
 };
@@ -17,17 +17,24 @@ export const addNewNode = (
         content: text,
         children: [],
     };
+
+    // remove parents that have a higher level (e.g, when going from H4 to H2, H3-H6 are deleted)
+    for (const key of Object.keys(state.currentParents)) {
+        const parentLevel = +key;
+        if (parentLevel >= level) {
+            delete state.currentParents[key];
+        }
+    }
+
     if (level === root) {
         state.tree.push(state.currentNode);
-        state.currentNodes = [state.currentNode];
-    } else {
-        if (state.currentNodes[level - (1 + root)]) {
-            state.currentNodes[level - (1 + root)].children.push(
-                state.currentNode,
-            );
-        }
-        state.currentNodes[level - 1] = state.currentNode;
     }
+    state.currentParents[level] = state.currentNode;
+    const parent = state.currentParents[level - 1];
+    if (parent) {
+        parent.children.push(state.currentNode);
+    } else if (level > root)
+        throw new Error(`Item [${text}] does not have a parent`);
 };
 
 export const updateCurrentNode = (state: State, text: string) => {
@@ -46,7 +53,7 @@ export const updateCurrentNode = (state: State, text: string) => {
 export const outlineToJson = (input: string): TreeNode[] => {
     const lines = input.split('\n');
     const state: State = {
-        currentNodes: [],
+        currentParents: {},
         currentNode: null,
         tree: [],
     };

src/lib/data-conversion/outilne-to-json.ts

@@ -26,7 +26,7 @@ describe('split node', () => {
         };
         const action = {
             type: 'DOCUMENT/SPLIT_NODE',
-            payload: { target: 'nP3BBw00m', mode: 'heading' },
+            payload: { target: 'nP3BBw00m', mode: 'headings' },
         } as const;
         const output = {
             columns: [
@@ -229,7 +229,7 @@ describe('split node', () => {
         const inputClone = clone(input);
         const action = {
             type: 'DOCUMENT/SPLIT_NODE',
-            payload: { target: 'nO5aXT_Tq', mode: 'heading' },
+            payload: { target: 'nO5aXT_Tq', mode: 'headings' },
         } as const;
 
         expect(() => splitNode(input, action)).toThrow(
@@ -268,7 +268,7 @@ describe('split node', () => {
         };
         const action = {
             type: 'DOCUMENT/SPLIT_NODE',
-            payload: { target: 'nO5aXT_Tq', mode: 'heading' },
+            payload: { target: 'nO5aXT_Tq', mode: 'headings' },
         } as const;
         const output = {
             columns: [
@@ -322,7 +322,7 @@ describe('split node', () => {
         const inputClone = clone(input);
         const action = {
             type: 'DOCUMENT/SPLIT_NODE',
-            payload: { target: 'nVPwysBOU', mode: 'heading' },
+            payload: { target: 'nVPwysBOU', mode: 'headings' },
         } as const;
 
         expect(() => splitNode(input, action)).toThrow(
@@ -347,7 +347,7 @@ describe('split node', () => {
         const inputClone = clone(input);
         const action = {
             type: 'DOCUMENT/SPLIT_NODE',
-            payload: { target: 'nVPwysBOU', mode: 'heading' },
+            payload: { target: 'nVPwysBOU', mode: 'headings' },
         } as const;
 
         expect(() => splitNode(input, action)).toThrow('input has a section');

src/stores/document/reducers/split-node/split-node.spec.ts

@@ -7,7 +7,7 @@ import { lang } from 'src/lang/lang';
 import { headingsToSections } from 'src/lib/data-conversion/headings-to-sections';
 import { outlineToSections } from 'src/lib/data-conversion/outline-to-sections';
 
-export type SplitNodeMode = 'heading' | 'outline';
+export type SplitNodeMode = 'headings' | 'outline';
 export type SplitNodeAction = {
     type: 'DOCUMENT/SPLIT_NODE';
     payload: {
@@ -16,17 +16,20 @@ export type SplitNodeAction = {
     };
 };
 
+export const splitText = (text: string, mode: SplitNodeMode) => {
+    return mode === 'headings'
+        ? headingsToSections(text)
+        : outlineToSections(text);
+};
+
 export const splitNode = (
     document: LineageDocument,
     action: Pick<SplitNodeAction, 'payload'>,
 ) => {
     const targetNode = action.payload.target;
     const content = document.content[targetNode];
     if (!content?.content) throw new SilentError('empty node');
-    const sections =
-        action.payload.mode === 'heading'
-            ? headingsToSections(content.content)
-            : outlineToSections(content.content);
+    const sections = splitText(content?.content, action.payload.mode);
     if (sections === content.content)
         throw new Error(lang.cant_split_card_identical);
     const childGroup = findChildGroup(document.columns, targetNode);

src/stores/document/reducers/split-node/split-node.ts

@@ -5,10 +5,8 @@ import { mergeNode } from 'src/view/actions/keyboard-shortcuts/helpers/commands/
 import { copyNode } from 'src/view/actions/keyboard-shortcuts/helpers/commands/commands/helpers/copy-node';
 import { cutNode } from 'src/view/actions/keyboard-shortcuts/helpers/commands/commands/helpers/cut-node';
 import { pasteNode } from 'src/view/actions/keyboard-shortcuts/helpers/commands/commands/helpers/paste-node';
-import { splitNode } from 'src/view/actions/keyboard-shortcuts/helpers/commands/commands/helpers/split-node';
+import { openSplitNodeModal } from 'src/view/modals/split-node-modal/open-split-node-modal';
 import { customIcons } from 'src/helpers/load-custom-icons';
-import { hasNHeadings } from 'src/lib/format-detection/has-n-headings';
-import { isOutline } from 'src/lib/format-detection/is-outline';
 import { copyLinkToBlock } from 'src/view/actions/context-menu/card-context-menu/helpers/copy-link-to-block';
 
 export const showCardContextMenu = (event: MouseEvent, view: LineageView) => {
@@ -27,32 +25,15 @@ export const showCardContextMenu = (event: MouseEvent, view: LineageView) => {
             .setDisabled(multipleNodesAreSelected),
     );
 
-    const input =
-        view.documentStore.getValue().document.content[
-            view.viewStore.getValue().document.activeNode
-        ]?.content || '';
-
     menu.addSeparator();
 
-    const _hasHeading = hasNHeadings(input);
-    const _isOutline = !_hasHeading && isOutline(input);
     menu.addItem((item) =>
         item
-            .setTitle('Split by headings')
+            .setTitle('Split')
             .setIcon(customIcons.split.name)
             .onClick(() => {
-                splitNode(view, 'heading');
-            })
-            .setDisabled(!_hasHeading || multipleNodesAreSelected),
-    );
-    menu.addItem((item) =>
-        item
-            .setTitle('Split outline')
-            .setIcon(customIcons.split.name)
-            .onClick(() => {
-                splitNode(view, 'outline');
-            })
-            .setDisabled(!_isOutline || multipleNodesAreSelected),
+                openSplitNodeModal(view);
+            }),
     );
 
     menu.addSeparator();

src/view/actions/context-menu/card-context-menu/show-card-context-menu.ts

@@ -0,0 +1,28 @@
+<script lang="ts">
+    /* eslint-disable svelte/no-at-html-tags */
+    import { getModalState } from 'src/view/modals/split-node-modal/helpers/get-modal-state';
+
+    const state = getModalState();
+
+    const mode = state.mode;
+    const content = state.content;
+</script>
+
+<div>
+    {#if !$mode}
+        <p class="mod-warning">
+            This card's content does not match any splitting pattern
+        </p>
+    {/if}
+</div>
+<div class="preview">
+    {@html $content}
+</div>
+
+<style>
+    .preview {
+        flex-grow: 1;
+        max-height: 500px;
+        overflow: auto;
+    }
+</style>