@licium/editor-plugin-details 1.0.2 → 1.0.3

package/dist/toastui-editor-plugin-details.js

@@ -1,6 +1,6 @@
 /*!
  * TOAST UI Editor : Text Align Plugin
- * @version 1.0.1 | Sat Jan 03 2026
+ * @version 1.0.2 | Sun Jan 04 2026
  * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
  * @license MIT
  */
@@ -474,16 +474,112 @@ function createToolbarItemOption(i18n) {
         command: 'details',
     };
 }
+function handleDetailsExit(context, event) {
+    var instance = context.instance;
+    if (!instance) {
+        console.log('[Details Plugin] No instance found');
+        return;
+    }
+    var editor = instance.getCurrentModeEditor();
+    if (!editor || !editor.view) {
+        console.log('[Details Plugin] No editor view found');
+        return;
+    }
+    var view = editor.view;
+    var state = view.state;
+    var selection = state.selection;
+    var $from = selection.$from;
+    // Find details node in ancestry
+    var detailsDepth = -1;
+    for (var d = $from.depth; d > 0; d -= 1) {
+        if ($from.node(d).type.name === 'details') {
+            detailsDepth = d;
+            break;
+        }
+    }
+    if (detailsDepth < 0) {
+        return;
+    }
+    var detailsNode = $from.node(detailsDepth);
+    var nodeStart = $from.before(detailsDepth);
+    var nodeEnd = nodeStart + detailsNode.nodeSize;
+    var afterPara = $from.after();
+    var isAtEnd = afterPara >= nodeEnd - 1;
+    console.log('[Details Plugin] Inside details:', {
+        key: event.key,
+        isAtEnd: isAtEnd,
+        afterPara: afterPara,
+        nodeEnd: nodeEnd,
+        parentType: $from.parent.type.name,
+        parentEmpty: $from.parent.content.size === 0,
+    });
+    if (!isAtEnd) {
+        return;
+    }
+    var tr = state.tr, schema = state.schema;
+    var SelectionClass = state.selection.constructor;
+    // Enter on empty paragraph
+    if (event.key === 'Enter') {
+        var isEmptyPara = $from.parent.type.name === 'paragraph' && $from.parent.content.size === 0;
+        if (!isEmptyPara) {
+            return;
+        }
+        console.log('[Details Plugin] EXITING via Enter!');
+        event.preventDefault();
+        var beforePara = $from.before();
+        tr.delete(beforePara, afterPara);
+        var p = schema.nodes.paragraph.createAndFill();
+        var 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') {
+        var 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 {
+            var p = schema.nodes.paragraph.createAndFill();
+            tr.insert(nodeEnd, p);
+            if (SelectionClass.near) {
+                tr.setSelection(SelectionClass.near(tr.doc.resolve(nodeEnd + 1)));
+            }
+            view.dispatch(tr);
+        }
+    }
+}
 function detailsPlugin(context, options) {
     if (options === void 0) { options = {}; }
     var i18n = context.i18n, eventEmitter = context.eventEmitter;
     addLangs(i18n);
     var toolbarItem = createToolbarItemOption(i18n);
+    // Hook into the global keydown event for exit behavior
+    eventEmitter.listen('keydown', function (editorType, event) {
+        console.log('[Details Plugin] keydown via eventEmitter!', { editorType: editorType, key: event.key });
+        if (editorType !== 'wysiwyg') {
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== 'ArrowDown') {
+            return;
+        }
+        handleDetailsExit(context, event);
+    });
     return {
         markdownCommands: {
             details: function (payload, _a, dispatch) {
                 var tr = _a.tr, selection = _a.selection, schema = _a.schema;
-                var from = selection.from, to = selection.to;
                 var slice = selection.content();
                 var textContent = slice.content.textBetween(0, slice.content.size, '\n') || i18n.get('content');
                 var summaryText = i18n.get('summary');
@@ -527,99 +623,20 @@ function detailsPlugin(context, options) {
                         }
                     }
                 });
-                // Simplified keydown handler with better logic
-                dom.addEventListener('keydown', function (e) {
-                    var state = view.state;
-                    var selection = state.selection;
-                    var pos = getPos();
-                    if (typeof pos !== 'number') {
-                        return;
-                    }
-                    // Get fresh node
-                    var currentNode = state.doc.nodeAt(pos);
-                    if (!currentNode || currentNode.type.name !== 'details') {
-                        return;
-                    }
-                    // Calculate end position
-                    var endPos = pos + currentNode.nodeSize;
-                    // Get TextSelection constructor
-                    var SelectionCtor = state.selection.constructor;
-                    // Handle Enter key
-                    if (e.key === 'Enter') {
-                        var $from = selection.$from;
-                        // Check if we're in an empty paragraph
-                        if ($from.parent.type.name === 'paragraph' && $from.parent.content.size === 0) {
-                            // Get position after this paragraph
-                            var 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();
-                                var tr = state.tr, schema = state.schema;
-                                // Delete the empty paragraph
-                                var beforePara = $from.before();
-                                tr.delete(beforePara, afterPara);
-                                // Insert new paragraph after the details block
-                                var p = schema.nodes.paragraph.createAndFill();
-                                var 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') {
-                        var $from = selection.$from;
-                        // Check if cursor is at the end of its parent node
-                        var atEndOfParent = $from.parentOffset === $from.parent.content.size;
-                        if (!atEndOfParent) {
-                            return;
-                        }
-                        // Check if parent is the last child in details
-                        var afterPara = $from.after();
-                        if (afterPara >= endPos - 1) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            var tr = state.tr, schema = state.schema;
-                            // 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
-                                var 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: dom, contentDOM: dom };
             },
         },
         wysiwygCommands: {
             details: function (payload, _a, dispatch) {
-                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                var tr = _a.tr, schema = _a.schema;
                 var summaryText = i18n.get('summary');
                 var contentText = i18n.get('content');
                 var _b = schema.nodes, details = _b.details, summary = _b.summary, paragraph = _b.paragraph;
                 if (details && summary && paragraph) {
                     var summaryNode = summary.create({}, schema.text(summaryText));
                     var contentNode = paragraph.create({}, schema.text(contentText));
-                    var node = details.create({}, [summaryNode, contentNode]);
-                    tr.replaceSelectionWith(node);
+                    var detailsNode = details.create({}, [summaryNode, contentNode]);
+                    tr.replaceSelectionWith(detailsNode);
                     dispatch(tr);
                     return true;
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licium/editor-plugin-details",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Details/Summary plugin for Toast UI Editor",
   "keywords": [
     "nhn",

package/src/css/plugin.css

@@ -7,7 +7,30 @@
     text-indent: -9999px !important;
 }
 
+details {
+    display: block;
+    background-color: #f7f7f7;
+    border: 1px solid #e1e1e1;
+    border-radius: 4px;
+    padding: 10px;
+    margin: 10px 0;
+}
+
+summary {
+    cursor: pointer;
+    font-weight: bold;
+    margin-bottom: 5px;
+    outline: none;
+}
+
 /* Dark Mode */
 .toastui-editor-dark .toastui-editor-toolbar-icons.details {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3Cpath d='M9 10L12 13 15 10' stroke='%23eee'/%3E%3C/svg%3E") !important;
+}
+
+.toastui-editor-dark details {
+    background-color: #282a36;
+    /* Darker background for contrast against editor bg */
+    border-color: #44475a;
+    color: #f8f8f2;
 }

package/src/index.ts

@@ -13,6 +13,119 @@ 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;
+    }
+
+    console.log('[Details Plugin] EXITING via Enter!');
+    event.preventDefault();
+
+    const beforePara = $from.before();
+
+    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 +136,24 @@ 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 {
     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');
@@ -83,115 +210,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 +223,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;
         }