@licium/editor-plugin-details 1.0.2 → 1.0.13

package/src/index.ts

@@ -1,6 +1,8 @@
-import type { PluginContext, PluginInfo, I18n } from '@licium/editor';
+/* eslint-disable */
+import type { PluginContext, PluginInfo, I18n, MdNode } from '@licium/editor';
 import { PluginOptions } from '@t/index';
 import { addLangs } from './i18n/langs';
+import './css/plugin.css';
 
 const PREFIX = 'toastui-editor-';
 
@@ -13,6 +15,136 @@ function createToolbarItemOption(i18n: I18n) {
   };
 }
 
+function handleDetailsExit(context: PluginContext, event: KeyboardEvent): void {
+  const { instance } = context as any;
+
+  if (!instance) {
+    console.log('[Details Plugin] No instance found');
+    return;
+  }
+
+  const editor = instance.getCurrentModeEditor();
+
+  if (!editor || !editor.view) {
+    console.log('[Details Plugin] No editor view found');
+    return;
+  }
+
+  const { view } = editor;
+  const { state } = view;
+  const { selection } = state;
+  const { $from } = selection;
+
+  // Find details node in ancestry
+  let detailsDepth = -1;
+
+  for (let d = $from.depth; d > 0; d -= 1) {
+    if ($from.node(d).type.name === 'details') {
+      detailsDepth = d;
+      break;
+    }
+  }
+
+  if (detailsDepth < 0) {
+    return;
+  }
+
+  const detailsNode = $from.node(detailsDepth);
+  const nodeStart = $from.before(detailsDepth);
+  const nodeEnd = nodeStart + detailsNode.nodeSize;
+  const afterPara = $from.after();
+  const isAtEnd = afterPara >= nodeEnd - 1;
+
+  console.log('[Details Plugin] Inside details:', {
+    key: event.key,
+    isAtEnd,
+    afterPara,
+    nodeEnd,
+    parentType: $from.parent.type.name,
+    parentEmpty: $from.parent.content.size === 0,
+  });
+
+  if (!isAtEnd) {
+    return;
+  }
+
+  const { tr, schema } = state;
+  const SelectionClass = state.selection.constructor as any;
+
+  // Enter on empty paragraph
+  if (event.key === 'Enter') {
+    const isEmptyPara = $from.parent.type.name === 'paragraph' && $from.parent.content.size === 0;
+
+    if (!isEmptyPara) {
+      return;
+    }
+
+    // Check previous node to see if it's also an empty paragraph
+    // $from.index(0) gives the index in the parent details node
+    const index = $from.index(detailsDepth);
+    const prevNode = detailsNode.child(index - 1);
+    const isPrevEmptyPara = prevNode && prevNode.type.name === 'paragraph' && prevNode.content.size === 0;
+
+    if (!isPrevEmptyPara) {
+      console.log('[Details Plugin] Allowing one empty line. Not exiting yet.');
+      return;
+    }
+
+    console.log('[Details Plugin] EXITING via Double Enter (Two empty paras)!');
+    event.preventDefault();
+
+    const beforePara = $from.before();
+
+    // delete the current empty para and the previous one? 
+    // Usually "Exit" means: Lift the current empty para out.
+    // But if we have TWO empty paras, maybe we want to keep one inside?
+    // Let's stick to: If two empty paras, we treat it as an exit signal.
+    // We should probably remove the *current* empty para and move the cursor out.
+
+    tr.delete(beforePara, afterPara);
+
+    const p = schema.nodes.paragraph.createAndFill()!;
+    const insertPos = nodeEnd - (afterPara - beforePara);
+
+    tr.insert(insertPos, p);
+
+    if (SelectionClass.near) {
+      tr.setSelection(SelectionClass.near(tr.doc.resolve(insertPos + 1)));
+    }
+
+    view.dispatch(tr);
+  }
+
+  // ArrowDown at end of content
+  if (event.key === 'ArrowDown') {
+    const atEndOfParent = $from.parentOffset === $from.parent.content.size;
+
+    if (!atEndOfParent) {
+      return;
+    }
+
+    console.log('[Details Plugin] EXITING via ArrowDown!');
+    event.preventDefault();
+
+    if (nodeEnd < state.doc.content.size) {
+      if (SelectionClass.near) {
+        tr.setSelection(SelectionClass.near(tr.doc.resolve(nodeEnd)));
+        view.dispatch(tr);
+      }
+    } else {
+      const p = schema.nodes.paragraph.createAndFill()!;
+
+      tr.insert(nodeEnd, p);
+
+      if (SelectionClass.near) {
+        tr.setSelection(SelectionClass.near(tr.doc.resolve(nodeEnd + 1)));
+      }
+
+      view.dispatch(tr);
+    }
+  }
+}
+
 export default function detailsPlugin(
   context: PluginContext,
   options: PluginOptions = {}
@@ -23,10 +155,38 @@ export default function detailsPlugin(
 
   const toolbarItem = createToolbarItemOption(i18n);
 
+  // Hook into the global keydown event for exit behavior
+  eventEmitter.listen('keydown', (editorType: string, event: KeyboardEvent) => {
+    console.log('[Details Plugin] keydown via eventEmitter!', { editorType, key: event.key });
+
+    if (editorType !== 'wysiwyg') {
+      return;
+    }
+
+    if (event.key !== 'Enter' && event.key !== 'ArrowDown') {
+      return;
+    }
+
+    handleDetailsExit(context, event);
+  });
+
   return {
+    toHTMLRenderers: {
+      htmlBlock: {
+        renderer: (node) => {
+          const isDetails = /<(\/)?(details|summary)/i.test(node.literal || '');
+          return isDetails
+            ? [{ type: 'html', content: node.literal || '' }]
+            : [
+              { type: 'openTag', tagName: 'div', outerNewLine: true },
+              { type: 'html', content: node.literal || '' },
+              { type: 'closeTag', tagName: 'div', outerNewLine: true },
+            ];
+        },
+      },
+    },
     markdownCommands: {
       details: (payload, { tr, selection, schema }, dispatch) => {
-        const { from, to } = selection;
         const slice = selection.content();
         const textContent =
           slice.content.textBetween(0, slice.content.size, '\n') || i18n.get('content');
@@ -41,26 +201,18 @@ export default function detailsPlugin(
         return true;
       },
     },
-    toHTMLRenderers: {
-      htmlBlock: {
-        details: (node) => [
-          { type: 'openTag', tagName: 'details', outerNewLine: true },
-          { type: 'html', content: node.childrenHTML || '' },
-          { type: 'closeTag', tagName: 'details', outerNewLine: true },
-        ],
-        summary: (node) => [
-          { type: 'openTag', tagName: 'summary', outerNewLine: true },
-          { type: 'html', content: node.childrenHTML || '' },
-          { type: 'closeTag', tagName: 'summary', outerNewLine: true },
-        ],
-      },
-    },
+
+
     wysiwygNodeViews: {
       details: (node, view, getPos) => {
         const dom = document.createElement('details');
-        const { htmlAttrs } = node.attrs;
+        const htmlAttrs = (node.attrs && node.attrs.htmlAttrs) || {};
+        const isOpenAttr = node.attrs.open; // Core definition uses direct attribute
 
-        if (htmlAttrs.open) {
+        // Check both direct attribute (priority) and htmlAttrs (legacy/plugin)
+        const isOpen = isOpenAttr === true || (htmlAttrs && htmlAttrs.open !== null && typeof htmlAttrs.open !== 'undefined');
+
+        if (isOpen) {
           dom.open = true;
         }
 
@@ -73,9 +225,18 @@ export default function detailsPlugin(
             const pos = getPos();
 
             if (typeof pos === 'number') {
+              const isOpen = htmlAttrs.open !== null && typeof htmlAttrs.open !== 'undefined';
+              const newHtmlAttrs = { ...htmlAttrs };
+
+              if (isOpen) {
+                delete newHtmlAttrs.open;
+              } else {
+                newHtmlAttrs.open = '';
+              }
+
               const newAttrs = {
                 ...node.attrs,
-                htmlAttrs: { ...htmlAttrs, open: !htmlAttrs.open },
+                htmlAttrs: newHtmlAttrs,
               };
 
               view.dispatch(view.state.tr.setNodeMarkup(pos, null, newAttrs));
@@ -83,115 +244,11 @@ export default function detailsPlugin(
           }
         });
 
-        // Simplified keydown handler with better logic
-        dom.addEventListener('keydown', (e) => {
-          const { state } = view;
-          const { selection } = state;
-          const pos = getPos();
-
-          if (typeof pos !== 'number') {
-            return;
-          }
-
-          // Get fresh node
-          const currentNode = state.doc.nodeAt(pos);
-
-          if (!currentNode || currentNode.type.name !== 'details') {
-            return;
-          }
-
-          // Calculate end position
-          const endPos = pos + currentNode.nodeSize;
-
-          // Get TextSelection constructor
-          const { constructor: SelectionCtor } = state.selection as any;
-
-          // Handle Enter key
-          if (e.key === 'Enter') {
-            const { $from } = selection;
-
-            // Check if we're in an empty paragraph
-            if ($from.parent.type.name === 'paragraph' && $from.parent.content.size === 0) {
-              // Get position after this paragraph
-              const afterPara = $from.after();
-
-              // Check if this empty paragraph is the last thing in the details block
-              // endPos - 1 is the position just before the closing tag
-              if (afterPara >= endPos - 1) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                const { tr, schema } = state;
-
-                // Delete the empty paragraph
-                const beforePara = $from.before();
-
-                tr.delete(beforePara, afterPara);
-
-                // Insert new paragraph after the details block
-                const p = schema.nodes.paragraph.createAndFill()!;
-                const insertPos = endPos - (afterPara - beforePara);
-
-                tr.insert(insertPos, p);
-
-                // Move cursor into new paragraph
-                if (SelectionCtor && SelectionCtor.near) {
-                  tr.setSelection(SelectionCtor.near(tr.doc.resolve(insertPos + 1)));
-                }
-
-                view.dispatch(tr);
-              }
-            }
-          }
-
-          // Handle ArrowDown key
-          if (e.key === 'ArrowDown') {
-            const { $from } = selection;
-
-            // Check if cursor is at the end of its parent node
-            const atEndOfParent = $from.parentOffset === $from.parent.content.size;
-
-            if (!atEndOfParent) {
-              return;
-            }
-
-            // Check if parent is the last child in details
-            const afterPara = $from.after();
-
-            if (afterPara >= endPos - 1) {
-              e.preventDefault();
-              e.stopPropagation();
-
-              const { tr, schema } = state;
-
-              // Try to move to position after details block
-              if (endPos < state.doc.content.size) {
-                // There's content after, just move there
-                if (SelectionCtor && SelectionCtor.near) {
-                  tr.setSelection(SelectionCtor.near(tr.doc.resolve(endPos)));
-                  view.dispatch(tr);
-                }
-              } else {
-                // No content after, create a new paragraph
-                const p = schema.nodes.paragraph.createAndFill()!;
-
-                tr.insert(endPos, p);
-
-                if (SelectionCtor && SelectionCtor.near) {
-                  tr.setSelection(SelectionCtor.near(tr.doc.resolve(endPos + 1)));
-                }
-
-                view.dispatch(tr);
-              }
-            }
-          }
-        });
-
         return { dom, contentDOM: dom };
       },
     },
     wysiwygCommands: {
-      details: (payload, { tr, selection, schema }, dispatch) => {
+      details: (payload, { tr, schema }, dispatch) => {
         const summaryText = i18n.get('summary');
         const contentText = i18n.get('content');
 
@@ -200,9 +257,9 @@ export default function detailsPlugin(
         if (details && summary && paragraph) {
           const summaryNode = summary.create({}, schema.text(summaryText));
           const contentNode = paragraph.create({}, schema.text(contentText));
-          const node = details.create({}, [summaryNode, contentNode]);
+          const detailsNode = details.create({}, [summaryNode, contentNode]);
 
-          tr.replaceSelectionWith(node);
+          tr.replaceSelectionWith(detailsNode);
           dispatch!(tr);
           return true;
         }
@@ -212,8 +269,8 @@ export default function detailsPlugin(
     },
     toolbarItems: [
       {
-        groupIndex: 0,
-        itemIndex: 4,
+        groupIndex: 4,
+        itemIndex: 3,
         item: toolbarItem,
       },
     ],