@licium/editor-plugin-details 1.0.2 → 1.0.13

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

@@ -0,0 +1,7 @@
+/*!
+ * TOAST UI Editor : Text Align Plugin
+ * @version 1.0.12 | Mon Jan 05 2026
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.toastui=t():(e.toastui=e.toastui||{},e.toastui.Editor=e.toastui.Editor||{},e.toastui.Editor.plugin=e.toastui.Editor.plugin||{},e.toastui.Editor.plugin.details=t())}(self,(function(){return function(){"use strict";var e={d:function(t,n){for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}},t={};e.d(t,{default:function(){return r}});var n=function(){return n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},n.apply(this,arguments)};Object.create;Object.create;"function"==typeof SuppressedError&&SuppressedError;function r(e,t){void 0===t&&(t={});var r=e.i18n,o=e.eventEmitter;!function(e){e.setLanguage(["en","en-US"],{details:"Collapsible Block",summary:"Summary header",content:"Hidden content"}),e.setLanguage(["de","de-DE"],{details:"Aufklappbarer Block",summary:"Klick mich zum Aufklappen",content:"Hier steht der versteckte Inhalt"})}(r);var a=function(e){return{name:"details",tooltip:e.get("details"),className:"toastui-editor-toolbar-icons details",command:"details"}}(r);return o.listen("keydown",(function(t,n){console.log("[Details Plugin] keydown via eventEmitter!",{editorType:t,key:n.key}),"wysiwyg"===t&&("Enter"!==n.key&&"ArrowDown"!==n.key||function(e,t){var n=e.instance;if(n){var r=n.getCurrentModeEditor();if(r&&r.view){for(var o=r.view,a=o.state,i=a.selection.$from,s=-1,l=i.depth;l>0;l-=1)if("details"===i.node(l).type.name){s=l;break}if(!(s<0)){var c=i.node(s),d=i.before(s)+c.nodeSize,u=i.after(),p=u>=d-1;if(console.log("[Details Plugin] Inside details:",{key:t.key,isAtEnd:p,afterPara:u,nodeEnd:d,parentType:i.parent.type.name,parentEmpty:0===i.parent.content.size}),p){var f=a.tr,m=a.schema,y=a.selection.constructor;if("Enter"===t.key){if("paragraph"!==i.parent.type.name||0!==i.parent.content.size)return;var g=i.index(s),v=c.child(g-1);if(!v||"paragraph"!==v.type.name||0!==v.content.size)return void console.log("[Details Plugin] Allowing one empty line. Not exiting yet.");console.log("[Details Plugin] EXITING via Double Enter (Two empty paras)!"),t.preventDefault();var h=i.before();f.delete(h,u);var w=m.nodes.paragraph.createAndFill(),k=d-(u-h);f.insert(k,w),y.near&&f.setSelection(y.near(f.doc.resolve(k+1))),o.dispatch(f)}if("ArrowDown"===t.key){if(i.parentOffset!==i.parent.content.size)return;console.log("[Details Plugin] EXITING via ArrowDown!"),t.preventDefault(),d<a.doc.content.size?y.near&&(f.setSelection(y.near(f.doc.resolve(d))),o.dispatch(f)):(w=m.nodes.paragraph.createAndFill(),f.insert(d,w),y.near&&f.setSelection(y.near(f.doc.resolve(d+1))),o.dispatch(f))}}}}else console.log("[Details Plugin] No editor view found")}else console.log("[Details Plugin] No instance found")}(e,n))})),{toHTMLRenderers:{htmlBlock:{renderer:function(e){return/<(\/)?(details|summary)/i.test(e.literal||"")?[{type:"html",content:e.literal||""}]:[{type:"openTag",tagName:"div",outerNewLine:!0},{type:"html",content:e.literal||""},{type:"closeTag",tagName:"div",outerNewLine:!0}]}}},markdownCommands:{details:function(e,t,n){var o=t.tr,a=t.selection,i=t.schema,s=a.content(),l=s.content.textBetween(0,s.content.size,"\n")||r.get("content"),c=""+("<details>\n<summary>"+r.get("summary")+"</summary>\n")+l+"\n</details>";return o.replaceSelectionWith(i.text(c)),n(o),!0}},wysiwygNodeViews:{details:function(e,t,r){var o=document.createElement("details"),a=e.attrs.htmlAttrs||{};return null!==a.open&&void 0!==a.open&&(o.open=!0),o.addEventListener("click",(function(o){var i=o.target;if("SUMMARY"===i.tagName||i.closest("summary")){o.preventDefault();var s=r();if("number"==typeof s){var l=null!==a.open&&void 0!==a.open,c=n({},a);l?delete c.open:c.open="";var d=n(n({},e.attrs),{htmlAttrs:c});t.dispatch(t.state.tr.setNodeMarkup(s,null,d))}}})),{dom:o,contentDOM:o}}},wysiwygCommands:{details:function(e,t,n){var o=t.tr,a=t.schema,i=r.get("summary"),s=r.get("content"),l=a.nodes,c=l.details,d=l.summary,u=l.paragraph;if(c&&d&&u){var p=d.create({},a.text(i)),f=u.create({},a.text(s)),m=c.create({},[p,f]);return o.replaceSelectionWith(m),n(o),!0}return!1}},toolbarItems:[{groupIndex:4,itemIndex:3,item:a}]}}return t=t.default}()}));

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

@@ -0,0 +1,42 @@
+/*!
+ * TOAST UI Editor : Text Align Plugin
+ * @version 1.0.12 | Tue Jan 06 2026
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+/* Light Mode */
+.toastui-editor-toolbar-icons.details {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23333%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z%27/%3E%3Cpath d=%27M9 10L12 13 15 10%27 stroke=%27%23333%27/%3E%3C/svg%3E") !important;
+    background-size: 24px 24px !important;
+    background-repeat: no-repeat !important;
+    background-position: center center !important;
+    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=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23eee%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z%27/%3E%3Cpath d=%27M9 10L12 13 15 10%27 stroke=%27%23eee%27/%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/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.12 | Tue Jan 06 2026
  * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
  * @license MIT
  */
@@ -465,6 +465,7 @@ function addLangs(i18n) {
 ;// CONCATENATED MODULE: ./src/index.ts
 
 
+
 var PREFIX = 'toastui-editor-';
 function createToolbarItemOption(i18n) {
     return {
@@ -474,16 +475,140 @@ 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;
+        }
+        // Check previous node to see if it's also an empty paragraph
+        // $from.index(0) gives the index in the parent details node
+        var index = $from.index(detailsDepth);
+        var prevNode = detailsNode.child(index - 1);
+        var 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();
+        var 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);
+        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 {
+        toHTMLRenderers: {
+            htmlBlock: {
+                renderer: function (node) {
+                    var 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: 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');
@@ -495,25 +620,14 @@ function detailsPlugin(context, options) {
                 return true;
             },
         },
-        toHTMLRenderers: {
-            htmlBlock: {
-                details: function (node) { return [
-                    { type: 'openTag', tagName: 'details', outerNewLine: true },
-                    { type: 'html', content: node.childrenHTML || '' },
-                    { type: 'closeTag', tagName: 'details', outerNewLine: true },
-                ]; },
-                summary: function (node) { return [
-                    { type: 'openTag', tagName: 'summary', outerNewLine: true },
-                    { type: 'html', content: node.childrenHTML || '' },
-                    { type: 'closeTag', tagName: 'summary', outerNewLine: true },
-                ]; },
-            },
-        },
         wysiwygNodeViews: {
             details: function (node, view, getPos) {
                 var dom = document.createElement('details');
-                var htmlAttrs = node.attrs.htmlAttrs;
-                if (htmlAttrs.open) {
+                var htmlAttrs = (node.attrs && node.attrs.htmlAttrs) || {};
+                var isOpenAttr = node.attrs.open; // Core definition uses direct attribute
+                // Check both direct attribute (priority) and htmlAttrs (legacy/plugin)
+                var isOpen = isOpenAttr === true || (htmlAttrs && htmlAttrs.open !== null && typeof htmlAttrs.open !== 'undefined');
+                if (isOpen) {
                     dom.open = true;
                 }
                 dom.addEventListener('click', function (e) {
@@ -522,87 +636,16 @@ function detailsPlugin(context, options) {
                         e.preventDefault();
                         var pos = getPos();
                         if (typeof pos === 'number') {
-                            var newAttrs = __assign(__assign({}, node.attrs), { htmlAttrs: __assign(__assign({}, htmlAttrs), { open: !htmlAttrs.open }) });
-                            view.dispatch(view.state.tr.setNodeMarkup(pos, null, newAttrs));
-                        }
-                    }
-                });
-                // 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);
-                                }
+                            var isOpen_1 = htmlAttrs.open !== null && typeof htmlAttrs.open !== 'undefined';
+                            var newHtmlAttrs = __assign({}, htmlAttrs);
+                            if (isOpen_1) {
+                                delete newHtmlAttrs.open;
                             }
                             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);
+                                newHtmlAttrs.open = '';
                             }
+                            var newAttrs = __assign(__assign({}, node.attrs), { htmlAttrs: newHtmlAttrs });
+                            view.dispatch(view.state.tr.setNodeMarkup(pos, null, newAttrs));
                         }
                     }
                 });
@@ -611,15 +654,15 @@ function detailsPlugin(context, options) {
         },
         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;
                 }
@@ -628,8 +671,8 @@ function detailsPlugin(context, options) {
         },
         toolbarItems: [
             {
-                groupIndex: 0,
-                itemIndex: 4,
+                groupIndex: 4,
+                itemIndex: 3,
                 item: toolbarItem,
             },
         ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licium/editor-plugin-details",
-  "version": "1.0.2",
+  "version": "1.0.13",
   "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;
 }