@licium/editor-plugin-details 1.0.1

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

@@ -0,0 +1,636 @@
+/*!
+ * TOAST UI Editor : Text Align Plugin
+ * @version 1.0.0 | Sat Jan 03 2026
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["toastui"] = factory();
+	else
+		root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = root["toastui"]["Editor"] || {}, root["toastui"]["Editor"]["plugin"] = root["toastui"]["Editor"]["plugin"] || {}, root["toastui"]["Editor"]["plugin"]["details"] = factory();
+})(self, function() {
+return /******/ (function() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	!function() {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = function(exports, definition) {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	!function() {
+/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
+/******/ 	}();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": function() { return /* binding */ detailsPlugin; }
+});
+
+;// CONCATENATED MODULE: ../../node_modules/tslib/tslib.es6.mjs
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+var extendStatics = function(d, b) {
+  extendStatics = Object.setPrototypeOf ||
+      ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+      function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+  return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+  if (typeof b !== "function" && b !== null)
+      throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+  extendStatics(d, b);
+  function __() { this.constructor = d; }
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  }
+  return __assign.apply(this, arguments);
+}
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
+  return t;
+}
+
+function __decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __param(paramIndex, decorator) {
+  return function (target, key) { decorator(target, key, paramIndex); }
+}
+
+function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+  function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+  var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+  var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+  var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+  var _, done = false;
+  for (var i = decorators.length - 1; i >= 0; i--) {
+      var context = {};
+      for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+      for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+      context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+      var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+      if (kind === "accessor") {
+          if (result === void 0) continue;
+          if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+          if (_ = accept(result.get)) descriptor.get = _;
+          if (_ = accept(result.set)) descriptor.set = _;
+          if (_ = accept(result.init)) initializers.unshift(_);
+      }
+      else if (_ = accept(result)) {
+          if (kind === "field") initializers.unshift(_);
+          else descriptor[key] = _;
+      }
+  }
+  if (target) Object.defineProperty(target, contextIn.name, descriptor);
+  done = true;
+};
+
+function __runInitializers(thisArg, initializers, value) {
+  var useValue = arguments.length > 2;
+  for (var i = 0; i < initializers.length; i++) {
+      value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+  }
+  return useValue ? value : void 0;
+};
+
+function __propKey(x) {
+  return typeof x === "symbol" ? x : "".concat(x);
+};
+
+function __setFunctionName(f, name, prefix) {
+  if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+  return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+
+function __metadata(metadataKey, metadataValue) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+  return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+      function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+      function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+}
+
+function __generator(thisArg, body) {
+  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+  return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+  function verb(n) { return function (v) { return step([n, v]); }; }
+  function step(op) {
+      if (f) throw new TypeError("Generator is already executing.");
+      while (g && (g = 0, op[0] && (_ = 0)), _) try {
+          if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+          if (y = 0, t) op = [op[0] & 2, t.value];
+          switch (op[0]) {
+              case 0: case 1: t = op; break;
+              case 4: _.label++; return { value: op[1], done: false };
+              case 5: _.label++; y = op[1]; op = [0]; continue;
+              case 7: op = _.ops.pop(); _.trys.pop(); continue;
+              default:
+                  if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                  if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                  if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                  if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                  if (t[2]) _.ops.pop();
+                  _.trys.pop(); continue;
+          }
+          op = body.call(thisArg, _);
+      } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+      if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+  }
+}
+
+var __createBinding = Object.create ? (function(o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+  }
+  Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+
+function __exportStar(m, o) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);
+}
+
+function __values(o) {
+  var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+  if (m) return m.call(o);
+  if (o && typeof o.length === "number") return {
+      next: function () {
+          if (o && i >= o.length) o = void 0;
+          return { value: o && o[i++], done: !o };
+      }
+  };
+  throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+}
+
+function __read(o, n) {
+  var m = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m) return o;
+  var i = m.call(o), r, ar = [], e;
+  try {
+      while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+  }
+  catch (error) { e = { error: error }; }
+  finally {
+      try {
+          if (r && !r.done && (m = i["return"])) m.call(i);
+      }
+      finally { if (e) throw e.error; }
+  }
+  return ar;
+}
+
+/** @deprecated */
+function __spread() {
+  for (var ar = [], i = 0; i < arguments.length; i++)
+      ar = ar.concat(__read(arguments[i]));
+  return ar;
+}
+
+/** @deprecated */
+function __spreadArrays() {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+  for (var r = Array(s), k = 0, i = 0; i < il; i++)
+      for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+          r[k] = a[j];
+  return r;
+}
+
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+      if (ar || !(i in from)) {
+          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+          ar[i] = from[i];
+      }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+function __await(v) {
+  return this instanceof __await ? (this.v = v, this) : new __await(v);
+}
+
+function __asyncGenerator(thisArg, _arguments, generator) {
+  if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+  var g = generator.apply(thisArg, _arguments || []), i, q = [];
+  return i = Object.create((typeof AsyncIterator === "function" ? AsyncIterator : Object).prototype), verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
+  function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
+  function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }
+  function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+  function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+  function fulfill(value) { resume("next", value); }
+  function reject(value) { resume("throw", value); }
+  function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+}
+
+function __asyncDelegator(o) {
+  var i, p;
+  return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+  function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
+}
+
+function __asyncValues(o) {
+  if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+  var m = o[Symbol.asyncIterator], i;
+  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+  function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+  function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+}
+
+function __makeTemplateObject(cooked, raw) {
+  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+  return cooked;
+};
+
+var __setModuleDefault = Object.create ? (function(o, v) {
+  Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+  o["default"] = v;
+};
+
+var ownKeys = function(o) {
+  ownKeys = Object.getOwnPropertyNames || function (o) {
+    var ar = [];
+    for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+    return ar;
+  };
+  return ownKeys(o);
+};
+
+function __importStar(mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+  __setModuleDefault(result, mod);
+  return result;
+}
+
+function __importDefault(mod) {
+  return (mod && mod.__esModule) ? mod : { default: mod };
+}
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+function __classPrivateFieldIn(state, receiver) {
+  if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function")) throw new TypeError("Cannot use 'in' operator on non-object");
+  return typeof state === "function" ? receiver === state : state.has(receiver);
+}
+
+function __addDisposableResource(env, value, async) {
+  if (value !== null && value !== void 0) {
+    if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
+    var dispose, inner;
+    if (async) {
+      if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
+      dispose = value[Symbol.asyncDispose];
+    }
+    if (dispose === void 0) {
+      if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
+      dispose = value[Symbol.dispose];
+      if (async) inner = dispose;
+    }
+    if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
+    if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
+    env.stack.push({ value: value, dispose: dispose, async: async });
+  }
+  else if (async) {
+    env.stack.push({ async: true });
+  }
+  return value;
+}
+
+var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function __disposeResources(env) {
+  function fail(e) {
+    env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
+    env.hasError = true;
+  }
+  var r, s = 0;
+  function next() {
+    while (r = env.stack.pop()) {
+      try {
+        if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
+        if (r.dispose) {
+          var result = r.dispose.call(r.value);
+          if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+        }
+        else s |= 1;
+      }
+      catch (e) {
+        fail(e);
+      }
+    }
+    if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
+    if (env.hasError) throw env.error;
+  }
+  return next();
+}
+
+function __rewriteRelativeImportExtension(path, preserveJsx) {
+  if (typeof path === "string" && /^\.\.?\//.test(path)) {
+      return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+          return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+      });
+  }
+  return path;
+}
+
+/* harmony default export */ var tslib_es6 = ({
+  __extends,
+  __assign,
+  __rest,
+  __decorate,
+  __param,
+  __esDecorate,
+  __runInitializers,
+  __propKey,
+  __setFunctionName,
+  __metadata,
+  __awaiter,
+  __generator,
+  __createBinding,
+  __exportStar,
+  __values,
+  __read,
+  __spread,
+  __spreadArrays,
+  __spreadArray,
+  __await,
+  __asyncGenerator,
+  __asyncDelegator,
+  __asyncValues,
+  __makeTemplateObject,
+  __importStar,
+  __importDefault,
+  __classPrivateFieldGet,
+  __classPrivateFieldSet,
+  __classPrivateFieldIn,
+  __addDisposableResource,
+  __disposeResources,
+  __rewriteRelativeImportExtension,
+});
+
+;// CONCATENATED MODULE: ./src/i18n/langs.ts
+function addLangs(i18n) {
+    i18n.setLanguage(['en', 'en-US'], {
+        details: 'Collapsible Block',
+        summary: 'Summary header',
+        content: 'Hidden content',
+    });
+    i18n.setLanguage(['de', 'de-DE'], {
+        details: 'Aufklappbarer Block',
+        summary: 'Klick mich zum Aufklappen',
+        content: 'Hier steht der versteckte Inhalt',
+    });
+}
+
+;// CONCATENATED MODULE: ./src/index.ts
+
+
+var PREFIX = 'toastui-editor-';
+function createToolbarItemOption(i18n) {
+    return {
+        name: 'details',
+        tooltip: i18n.get('details'),
+        className: PREFIX + "toolbar-icons details",
+        command: 'details',
+    };
+}
+function detailsPlugin(context, options) {
+    if (options === void 0) { options = {}; }
+    var i18n = context.i18n, eventEmitter = context.eventEmitter;
+    addLangs(i18n);
+    var toolbarItem = createToolbarItemOption(i18n);
+    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');
+                var openTag = "<details>\n<summary>" + summaryText + "</summary>\n";
+                var closeTag = "\n</details>";
+                var newText = "" + openTag + textContent + closeTag;
+                tr.replaceSelectionWith(schema.text(newText));
+                dispatch(tr);
+                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) {
+                    dom.open = true;
+                }
+                dom.addEventListener('click', function (e) {
+                    var target = e.target;
+                    if (target.tagName === 'SUMMARY' || target.closest('summary')) {
+                        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));
+                        }
+                    }
+                });
+                // Add Keydown listener for exit behavior
+                dom.addEventListener('keydown', function (e) {
+                    var state = view.state;
+                    var selection = state.selection, tr = state.tr, schema = state.schema;
+                    var $from = selection.$from;
+                    var pos = getPos();
+                    if (typeof pos !== 'number') {
+                        return;
+                    }
+                    // Fetch current node to ensure nodeSize is fresh!
+                    var currentNode = state.doc.nodeAt(pos);
+                    if (!currentNode || currentNode.type.name !== 'details') {
+                        return;
+                    }
+                    var nodeSize = currentNode.nodeSize;
+                    var endOfDetails = pos + nodeSize;
+                    // Workaround for Dual Package Hazard:
+                    // Get the TextSelection constructor from the current selection instance
+                    // assuming the current selection is a TextSelection (which it is while typing).
+                    var SelectionHeader = state.selection.constructor;
+                    if (e.key === 'Enter') {
+                        var parent = $from.parent;
+                        // Check if we are in an empty paragraph that is the last child of details
+                        if (parent.type.name === 'paragraph' && parent.content.size === 0) {
+                            var parentEnd = $from.after();
+                            if (parentEnd === endOfDetails - 1) {
+                                // Empty last paragraph -> Exit logic
+                                e.preventDefault();
+                                e.stopPropagation();
+                                var parentPos = $from.before();
+                                tr.delete(parentPos, parentEnd);
+                                var p = schema.nodes.paragraph.createAndFill();
+                                // After deletion, the position shifts back
+                                var newPos = endOfDetails - (parentEnd - parentPos);
+                                tr.insert(newPos, p);
+                                if (SelectionHeader && SelectionHeader.near) {
+                                    tr.setSelection(SelectionHeader.near(tr.doc.resolve(newPos + 1)));
+                                    view.dispatch(tr);
+                                }
+                            }
+                        }
+                    }
+                    else if (e.key === 'ArrowDown') {
+                        var parentEnd = $from.after();
+                        if (parentEnd !== endOfDetails - 1) {
+                            return;
+                        }
+                        // We are in the last child
+                        var atEnd = $from.parentOffset === $from.parent.content.size;
+                        if (!atEnd) {
+                            return;
+                        }
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (endOfDetails < state.doc.content.size) {
+                            // Move cursor out to existing content
+                            if (SelectionHeader && SelectionHeader.near) {
+                                tr.setSelection(SelectionHeader.near(tr.doc.resolve(endOfDetails)));
+                                view.dispatch(tr);
+                            }
+                        }
+                        else {
+                            // Create new paragraph below
+                            var p = schema.nodes.paragraph.createAndFill();
+                            tr.insert(endOfDetails, p);
+                            if (SelectionHeader && SelectionHeader.near) {
+                                tr.setSelection(SelectionHeader.near(tr.doc.resolve(endOfDetails + 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 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);
+                    dispatch(tr);
+                    return true;
+                }
+                return false;
+            },
+        },
+        toolbarItems: [
+            {
+                groupIndex: 0,
+                itemIndex: 4,
+                item: toolbarItem,
+            },
+        ],
+    };
+}
+
+__webpack_exports__ = __webpack_exports__["default"];
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@licium/editor-plugin-details",
+  "version": "1.0.1",
+  "description": "Details/Summary plugin for Toast UI Editor",
+  "keywords": [
+    "nhn",
+    "nhn cloud",
+    "toast",
+    "toastui",
+    "toast-ui",
+    "editor",
+    "plugin",
+    "text-align",
+    "align"
+  ],
+  "main": "dist/toastui-editor-plugin-details.js",
+  "files": [
+    "dist",
+    "src",
+    "index.d.ts"
+  ],
+  "types": "index.d.ts",
+  "author": "NHN Cloud FE Development Lab <dl_javascript@nhn.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/natorus87/tui.editor.git",
+    "directory": "plugins/details"
+  },
+  "bugs": {
+    "url": "https://github.com/natorus87/tui.editor/issues"
+  },
+  "homepage": "https://ui.toast.com",
+  "browserslist": "last 2 versions, not ie <= 10",
+  "scripts": {
+    "lint": "eslint .",
+    "test:types": "tsc",
+    "test": "jest --watch",
+    "test:ci": "jest",
+    "serve": "snowpack dev",
+    "serve:ie": "webpack serve",
+    "build:cdn": "webpack build --env cdn & webpack build --env cdn minify",
+    "build": "webpack build --no-stats"
+  },
+  "devDependencies": {
+    "cross-env": "^6.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/css/plugin.css

@@ -0,0 +1,13 @@
+/* Light Mode */
+.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='%23333' 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='%23333'/%3E%3C/svg%3E") !important;
+    background-size: 24px 24px !important;
+    background-repeat: no-repeat !important;
+    background-position: center center !important;
+    text-indent: -9999px !important;
+}
+
+/* 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;
+}

package/src/i18n/langs.ts

@@ -0,0 +1,15 @@
+import type { I18n } from '@licium/editor';
+
+export function addLangs(i18n: I18n) {
+  i18n.setLanguage(['en', 'en-US'], {
+    details: 'Collapsible Block',
+    summary: 'Summary header',
+    content: 'Hidden content',
+  });
+
+  i18n.setLanguage(['de', 'de-DE'], {
+    details: 'Aufklappbarer Block',
+    summary: 'Klick mich zum Aufklappen',
+    content: 'Hier steht der versteckte Inhalt',
+  });
+}

package/src/index.ts

@@ -0,0 +1,207 @@
+import type { PluginContext, PluginInfo, I18n } from '@licium/editor';
+import { PluginOptions } from '@t/index';
+import { addLangs } from './i18n/langs';
+
+const PREFIX = 'toastui-editor-';
+
+function createToolbarItemOption(i18n: I18n) {
+  return {
+    name: 'details',
+    tooltip: i18n.get('details'),
+    className: `${PREFIX}toolbar-icons details`,
+    command: 'details',
+  };
+}
+
+export default function detailsPlugin(
+  context: PluginContext,
+  options: PluginOptions = {}
+): PluginInfo {
+  const { i18n, eventEmitter } = context;
+
+  addLangs(i18n);
+
+  const toolbarItem = createToolbarItemOption(i18n);
+
+  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');
+
+        const summaryText = i18n.get('summary');
+        const openTag = `<details>\n<summary>${summaryText}</summary>\n`;
+        const closeTag = `\n</details>`;
+        const newText = `${openTag}${textContent}${closeTag}`;
+
+        tr.replaceSelectionWith(schema.text(newText));
+        dispatch!(tr);
+        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;
+
+        if (htmlAttrs.open) {
+          dom.open = true;
+        }
+
+        dom.addEventListener('click', (e) => {
+          const target = e.target as HTMLElement;
+
+          if (target.tagName === 'SUMMARY' || target.closest('summary')) {
+            e.preventDefault();
+
+            const pos = getPos();
+
+            if (typeof pos === 'number') {
+              const newAttrs = {
+                ...node.attrs,
+                htmlAttrs: { ...htmlAttrs, open: !htmlAttrs.open },
+              };
+
+              view.dispatch(view.state.tr.setNodeMarkup(pos, null, newAttrs));
+            }
+          }
+        });
+
+        // Add Keydown listener for exit behavior
+        dom.addEventListener('keydown', (e) => {
+          const { state } = view;
+          const { selection, tr, schema } = state;
+          const { $from } = selection;
+          const pos = getPos();
+
+          if (typeof pos !== 'number') {
+            return;
+          }
+
+          // Fetch current node to ensure nodeSize is fresh!
+          const currentNode = state.doc.nodeAt(pos);
+
+          if (!currentNode || currentNode.type.name !== 'details') {
+            return;
+          }
+
+          const { nodeSize } = currentNode;
+          const endOfDetails = pos + nodeSize;
+
+          // Workaround for Dual Package Hazard:
+          // Get the TextSelection constructor from the current selection instance
+          // assuming the current selection is a TextSelection (which it is while typing).
+          const { constructor: SelectionHeader } = state.selection as any;
+
+          if (e.key === 'Enter') {
+            const { parent } = $from;
+
+            // Check if we are in an empty paragraph that is the last child of details
+            if (parent.type.name === 'paragraph' && parent.content.size === 0) {
+              const parentEnd = $from.after();
+
+              if (parentEnd === endOfDetails - 1) {
+                // Empty last paragraph -> Exit logic
+                e.preventDefault();
+                e.stopPropagation();
+
+                const parentPos = $from.before();
+
+                tr.delete(parentPos, parentEnd);
+                const p = schema.nodes.paragraph.createAndFill()!;
+                // After deletion, the position shifts back
+                const newPos = endOfDetails - (parentEnd - parentPos);
+
+                tr.insert(newPos, p);
+
+                if (SelectionHeader && SelectionHeader.near) {
+                  tr.setSelection(SelectionHeader.near(tr.doc.resolve(newPos + 1)));
+                  view.dispatch(tr);
+                }
+              }
+            }
+          } else if (e.key === 'ArrowDown') {
+            const parentEnd = $from.after();
+
+            if (parentEnd !== endOfDetails - 1) {
+              return;
+            }
+
+            // We are in the last child
+            const atEnd = $from.parentOffset === $from.parent.content.size;
+
+            if (!atEnd) {
+              return;
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (endOfDetails < state.doc.content.size) {
+              // Move cursor out to existing content
+              if (SelectionHeader && SelectionHeader.near) {
+                tr.setSelection(SelectionHeader.near(tr.doc.resolve(endOfDetails)));
+                view.dispatch(tr);
+              }
+            } else {
+              // Create new paragraph below
+              const p = schema.nodes.paragraph.createAndFill()!;
+
+              tr.insert(endOfDetails, p);
+
+              if (SelectionHeader && SelectionHeader.near) {
+                tr.setSelection(SelectionHeader.near(tr.doc.resolve(endOfDetails + 1)));
+                view.dispatch(tr);
+              }
+            }
+          }
+        });
+
+        return { dom, contentDOM: dom };
+      },
+    },
+    wysiwygCommands: {
+      details: (payload, { tr, selection, schema }, dispatch) => {
+        const summaryText = i18n.get('summary');
+        const contentText = i18n.get('content');
+
+        const { details, summary, paragraph } = schema.nodes;
+
+        if (details && summary && paragraph) {
+          const summaryNode = summary.create({}, schema.text(summaryText));
+          const contentNode = paragraph.create({}, schema.text(contentText));
+          const node = details.create({}, [summaryNode, contentNode]);
+
+          tr.replaceSelectionWith(node);
+          dispatch!(tr);
+          return true;
+        }
+
+        return false;
+      },
+    },
+    toolbarItems: [
+      {
+        groupIndex: 0,
+        itemIndex: 4, // Append after CodeBlock
+        item: toolbarItem,
+      },
+    ],
+  };
+}