rich-html-editor 0.2.1 → 1.0.0

package/dist/index.js

@@ -91,7 +91,7 @@ var init_events = __esm({
 });
 
 // src/core/constants.ts
-var TOOLBAR_ID, STYLE_ID, CLASS_EDITABLE, CLASS_ACTIVE, DEFAULT_MAX_STACK, TOOLBAR_BG, TOOLBAR_BORDER, BUTTON_BORDER, BUTTON_ACTIVE_BG, BUTTON_BG, BUTTON_COLOR, INFO_COLOR, HOVER_OUTLINE, ACTIVE_OUTLINE, LABEL_BOLD, LABEL_ITALIC, LABEL_UNDERLINE, LABEL_STRIKETHROUGH, LABEL_UNDO, LABEL_REDO, LABEL_LINK, LABEL_ALIGN_LEFT, LABEL_ALIGN_CENTER, LABEL_ALIGN_RIGHT, FONT_OPTIONS, SIZE_OPTIONS, FORMAT_OPTIONS;
+var TOOLBAR_ID, STYLE_ID, CLASS_EDITABLE, CLASS_ACTIVE, DEFAULT_MAX_STACK, TOOLBAR_BG, TOOLBAR_BORDER, BUTTON_BORDER, BUTTON_ACTIVE_BG, BUTTON_BG, BUTTON_COLOR, INFO_COLOR, HOVER_OUTLINE, ACTIVE_OUTLINE, LABEL_BOLD, LABEL_ITALIC, LABEL_UNDERLINE, LABEL_STRIKETHROUGH, LABEL_UNDO, LABEL_REDO, LABEL_LINK, LABEL_UNORDERED_LIST, LABEL_ORDERED_LIST, LABEL_ALIGN_LEFT, LABEL_ALIGN_CENTER, LABEL_ALIGN_RIGHT, FONT_OPTIONS, SIZE_OPTIONS, FORMAT_OPTIONS;
 var init_constants = __esm({
   "src/core/constants.ts"() {
     "use strict";
@@ -116,6 +116,26 @@ var init_constants = __esm({
     LABEL_UNDO = "\u21BA";
     LABEL_REDO = "\u21BB";
     LABEL_LINK = "\u{1F517}";
+    LABEL_UNORDERED_LIST = `
+  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <circle cx="3" cy="4" r="1" fill="currentColor" />
+    <rect x="6" y="3" width="9" height="2" rx="0.5" fill="currentColor" />
+    <circle cx="3" cy="8" r="1" fill="currentColor" />
+    <rect x="6" y="7" width="9" height="2" rx="0.5" fill="currentColor" />
+    <circle cx="3" cy="12" r="1" fill="currentColor" />
+    <rect x="6" y="11" width="9" height="2" rx="0.5" fill="currentColor" />
+  </svg>
+`;
+    LABEL_ORDERED_LIST = `
+  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <text x="1" y="4" font-size="4" fill="currentColor">1.</text>
+    <rect x="6" y="3" width="9" height="2" rx="0.5" fill="currentColor" />
+    <text x="1" y="8" font-size="4" fill="currentColor">2.</text>
+    <rect x="6" y="7" width="9" height="2" rx="0.5" fill="currentColor" />
+    <text x="1" y="12" font-size="4" fill="currentColor">3.</text>
+    <rect x="6" y="11" width="9" height="2" rx="0.5" fill="currentColor" />
+  </svg>
+`;
     LABEL_ALIGN_LEFT = `
 	<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 		<rect x="1" y="2" width="10" height="2" rx="0.5" fill="currentColor" />
@@ -761,219 +781,76 @@ function injectStyles(doc) {
   styleEl.textContent = css;
 }
 
-// src/toolbar/toolbar.ts
+// src/toolbar/render.ts
 init_constants();
-function injectToolbar(doc, options) {
-  const existing = doc.getElementById(TOOLBAR_ID);
-  if (existing) existing.remove();
-  const toolbar = doc.createElement("div");
-  toolbar.id = TOOLBAR_ID;
-  toolbar.setAttribute("role", "toolbar");
-  toolbar.setAttribute("aria-label", "Rich text editor toolbar");
-  function makeButton(label, title, command, value, isActive, disabled) {
-    const btn = doc.createElement("button");
-    btn.type = "button";
-    if (label && label.trim().startsWith("<")) {
-      btn.innerHTML = label;
-    } else {
-      btn.textContent = label;
+
+// src/toolbar/color.ts
+function makeColorInput(doc, options, title, command, initialColor) {
+  const input = doc.createElement("input");
+  input.type = "color";
+  input.className = "toolbar-color-input";
+  const wrapper = doc.createElement("label");
+  wrapper.className = "color-label";
+  wrapper.appendChild(doc.createTextNode(title + " "));
+  wrapper.appendChild(input);
+  let savedRange = null;
+  input.addEventListener("pointerdown", () => {
+    const s = doc.getSelection();
+    if (s && s.rangeCount) savedRange = s.getRangeAt(0).cloneRange();
+  });
+  input.onchange = (e) => {
+    try {
+      const s = doc.getSelection();
+      if (savedRange && s) {
+        s.removeAllRanges();
+        s.addRange(savedRange);
+      }
+    } catch (err) {
     }
-    btn.title = title;
-    btn.setAttribute("aria-label", title);
-    if (typeof isActive !== "undefined")
-      btn.setAttribute("aria-pressed", String(!!isActive));
-    btn.tabIndex = 0;
-    if (disabled) btn.disabled = true;
-    btn.onclick = () => options.onCommand(command, value);
-    btn.addEventListener("keydown", (ev) => {
-      if (ev.key === "Enter" || ev.key === " ") {
-        ev.preventDefault();
-        btn.click();
+    options.onCommand(command, e.target.value);
+    savedRange = null;
+  };
+  function rgbToHex(input2) {
+    if (!input2) return null;
+    const v = input2.trim();
+    if (v.startsWith("#")) {
+      if (v.length === 4) {
+        return ("#" + v[1] + v[1] + v[2] + v[2] + v[3] + v[3]).toLowerCase();
       }
-    });
-    return btn;
-  }
-  function makeSelect(title, command, optionsList, initialValue) {
-    const select = doc.createElement("select");
-    select.title = title;
-    select.setAttribute("aria-label", title);
-    select.appendChild(new Option(title, "", true, true));
-    for (const opt of optionsList) {
-      select.appendChild(new Option(opt.label, opt.value));
+      return v.toLowerCase();
     }
-    try {
-      if (initialValue) select.value = initialValue;
-    } catch (e) {
+    const rgbMatch = v.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+    if (rgbMatch) {
+      const r = Number(rgbMatch[1]);
+      const g = Number(rgbMatch[2]);
+      const b = Number(rgbMatch[3]);
+      const hex = "#" + [r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("").toLowerCase();
+      return hex;
     }
-    select.onchange = (e) => {
-      const val = e.target.value;
-      options.onCommand(command, val);
-      select.selectedIndex = 0;
-    };
-    return select;
+    return null;
   }
-  function makeColorInput(title, command, initialColor) {
-    const input = doc.createElement("input");
-    input.type = "color";
-    input.className = "toolbar-color-input";
-    const wrapper = doc.createElement("label");
-    wrapper.className = "color-label";
-    wrapper.appendChild(doc.createTextNode(title + " "));
-    wrapper.appendChild(input);
-    let savedRange = null;
-    input.addEventListener("pointerdown", () => {
-      const s = doc.getSelection();
-      if (s && s.rangeCount) savedRange = s.getRangeAt(0).cloneRange();
-    });
-    input.onchange = (e) => {
-      try {
-        const s = doc.getSelection();
-        if (savedRange && s) {
-          s.removeAllRanges();
-          s.addRange(savedRange);
-        }
-      } catch (err) {
-      }
-      options.onCommand(command, e.target.value);
-      savedRange = null;
-    };
-    function rgbToHex(input2) {
-      if (!input2) return null;
-      const v = input2.trim();
-      if (v.startsWith("#")) {
-        if (v.length === 4) {
-          return ("#" + v[1] + v[1] + v[2] + v[2] + v[3] + v[3]).toLowerCase();
-        }
-        return v.toLowerCase();
-      }
-      const rgbMatch = v.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
-      if (rgbMatch) {
-        const r = Number(rgbMatch[1]);
-        const g = Number(rgbMatch[2]);
-        const b = Number(rgbMatch[3]);
-        const hex = "#" + [r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("").toLowerCase();
-        return hex;
+  const setColor = (val) => {
+    if (!val) return;
+    const hex = rgbToHex(val) || val;
+    try {
+      if (hex && hex.startsWith("#") && input.value !== hex) {
+        input.value = hex;
       }
-      return null;
+    } catch (e) {
     }
-    const setColor = (val) => {
-      if (!val) return;
-      const hex = rgbToHex(val) || val;
-      try {
-        if (hex && hex.startsWith("#") && input.value !== hex) {
-          input.value = hex;
-        }
-      } catch (e) {
-      }
-    };
-    if (initialColor) setColor(initialColor);
-    input.addEventListener("input", (e) => {
-      const val = e.target.value;
-      setColor(val);
-    });
-    input.title = title;
-    input.setAttribute("aria-label", title);
-    return wrapper;
-  }
-  const format = options.getFormatState();
-  function makeGroup() {
-    const g = doc.createElement("div");
-    g.className = "toolbar-group";
-    return g;
-  }
-  function makeSep() {
-    const s = doc.createElement("div");
-    s.className = "toolbar-sep";
-    return s;
-  }
-  const undoBtn = makeButton(
-    LABEL_UNDO,
-    "Undo",
-    "undo",
-    void 0,
-    false,
-    !options.canUndo()
-  );
-  undoBtn.onclick = () => options.onUndo();
-  const redoBtn = makeButton(
-    LABEL_REDO,
-    "Redo",
-    "redo",
-    void 0,
-    false,
-    !options.canRedo()
-  );
-  redoBtn.onclick = () => options.onRedo();
-  const grp1 = makeGroup();
-  grp1.appendChild(undoBtn);
-  grp1.appendChild(redoBtn);
-  toolbar.appendChild(grp1);
-  toolbar.appendChild(makeSep());
-  const grp2 = makeGroup();
-  grp2.className = "toolbar-group collapse-on-small";
-  grp2.appendChild(
-    makeSelect(
-      "Format",
-      "formatBlock",
-      FORMAT_OPTIONS,
-      format.formatBlock
-    )
-  );
-  grp2.appendChild(
-    makeSelect("Font", "fontName", FONT_OPTIONS, format.fontName)
-  );
-  grp2.appendChild(
-    makeSelect("Size", "fontSize", SIZE_OPTIONS, format.fontSize)
-  );
-  toolbar.appendChild(grp2);
-  toolbar.appendChild(makeSep());
-  const grp3 = makeGroup();
-  grp3.appendChild(
-    makeButton(LABEL_BOLD, "Bold", "bold", void 0, format.bold)
-  );
-  grp3.appendChild(
-    makeButton(LABEL_ITALIC, "Italic", "italic", void 0, format.italic)
-  );
-  grp3.appendChild(
-    makeButton(
-      LABEL_UNDERLINE,
-      "Underline",
-      "underline",
-      void 0,
-      format.underline
-    )
-  );
-  grp3.appendChild(makeButton(LABEL_STRIKETHROUGH, "Strikethrough", "strike"));
-  toolbar.appendChild(grp3);
-  toolbar.appendChild(makeSep());
-  const grp4 = makeGroup();
-  grp4.appendChild(makeButton(LABEL_ALIGN_LEFT, "Align left", "align", "left"));
-  grp4.appendChild(
-    makeButton(LABEL_ALIGN_CENTER, "Align center", "align", "center")
-  );
-  grp4.appendChild(
-    makeButton(LABEL_ALIGN_RIGHT, "Align right", "align", "right")
-  );
-  toolbar.appendChild(grp4);
-  toolbar.appendChild(makeSep());
-  const grp5 = makeGroup();
-  grp5.className = "toolbar-group collapse-on-small";
-  grp5.appendChild(
-    makeColorInput("Text color", "foreColor", format.foreColor)
-  );
-  grp5.appendChild(
-    makeColorInput(
-      "Highlight color",
-      "hiliteColor",
-      format.hiliteColor
-    )
-  );
-  toolbar.appendChild(grp5);
-  toolbar.appendChild(makeSep());
-  const grp6 = makeGroup();
-  grp6.className = "toolbar-group collapse-on-small";
-  grp6.appendChild(makeButton(LABEL_LINK, "Insert link", "link"));
-  toolbar.appendChild(grp6);
+  };
+  if (initialColor) setColor(initialColor);
+  input.addEventListener("input", (e) => {
+    const val = e.target.value;
+    setColor(val);
+  });
+  input.title = title;
+  input.setAttribute("aria-label", title);
+  return wrapper;
+}
+
+// src/toolbar/overflow.ts
+function setupOverflow(doc, toolbar, options, format, helpers) {
   const overflowBtn = doc.createElement("button");
   overflowBtn.type = "button";
   overflowBtn.className = "toolbar-overflow-btn";
@@ -1000,7 +877,7 @@ function injectToolbar(doc, options) {
     overflowBtn.setAttribute("aria-expanded", "false");
     overflowBtn.focus();
   }
-  overflowBtn.addEventListener("click", (e) => {
+  overflowBtn.addEventListener("click", () => {
     if (overflowMenu.hidden) openOverflow();
     else closeOverflow();
   });
@@ -1027,35 +904,105 @@ function injectToolbar(doc, options) {
     }
   });
   overflowMenu.appendChild(
-    makeSelect(
+    helpers.makeSelect(
       "Format",
       "formatBlock",
-      FORMAT_OPTIONS,
+      window.RHE_FORMAT_OPTIONS || [],
       format.formatBlock
     )
   );
   overflowMenu.appendChild(
-    makeSelect("Font", "fontName", FONT_OPTIONS, format.fontName)
+    helpers.makeSelect(
+      "Font",
+      "fontName",
+      window.RHE_FONT_OPTIONS || [],
+      format.fontName
+    )
   );
   overflowMenu.appendChild(
-    makeSelect("Size", "fontSize", SIZE_OPTIONS, format.fontSize)
+    helpers.makeSelect(
+      "Size",
+      "fontSize",
+      window.RHE_SIZE_OPTIONS || [],
+      format.fontSize
+    )
   );
   overflowMenu.appendChild(
-    makeColorInput("Text color", "foreColor", format.foreColor)
+    helpers.makeColorInput("Text color", "foreColor", format.foreColor)
   );
   overflowMenu.appendChild(
-    makeColorInput(
+    helpers.makeColorInput(
       "Highlight color",
       "hiliteColor",
       format.hiliteColor
     )
   );
-  overflowMenu.appendChild(makeButton(LABEL_LINK, "Insert link", "link"));
-  const overflowWrap = makeGroup();
+  overflowMenu.appendChild(helpers.makeButton("Link", "Insert link", "link"));
+  const overflowWrap = helpers.makeGroup();
   overflowWrap.className = "toolbar-group toolbar-overflow-wrap";
   overflowWrap.appendChild(overflowBtn);
   overflowWrap.appendChild(overflowMenu);
   toolbar.appendChild(overflowWrap);
+}
+
+// src/toolbar/buttons.ts
+function makeButton(doc, options, label, title, command, value, isActive, disabled) {
+  const btn = doc.createElement("button");
+  btn.type = "button";
+  if (label && label.trim().startsWith("<")) {
+    btn.innerHTML = label;
+  } else {
+    btn.textContent = label;
+  }
+  btn.title = title;
+  btn.setAttribute("aria-label", title);
+  if (typeof isActive !== "undefined")
+    btn.setAttribute("aria-pressed", String(!!isActive));
+  btn.tabIndex = 0;
+  if (disabled) btn.disabled = true;
+  btn.onclick = () => options.onCommand(command, value);
+  btn.addEventListener("keydown", (ev) => {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      btn.click();
+    }
+  });
+  return btn;
+}
+function makeGroup(doc) {
+  const g = doc.createElement("div");
+  g.className = "toolbar-group";
+  return g;
+}
+function makeSep(doc) {
+  const s = doc.createElement("div");
+  s.className = "toolbar-sep";
+  return s;
+}
+
+// src/toolbar/selects.ts
+function makeSelect(doc, options, title, command, optionsList, initialValue) {
+  const select = doc.createElement("select");
+  select.title = title;
+  select.setAttribute("aria-label", title);
+  select.appendChild(new Option(title, "", true, true));
+  for (const opt of optionsList) {
+    select.appendChild(new Option(opt.label, opt.value));
+  }
+  try {
+    if (initialValue) select.value = initialValue;
+  } catch (e) {
+  }
+  select.onchange = (e) => {
+    const val = e.target.value;
+    options.onCommand(command, val);
+    select.selectedIndex = 0;
+  };
+  return select;
+}
+
+// src/toolbar/navigation.ts
+function setupNavigation(toolbar) {
   toolbar.addEventListener("keydown", (e) => {
     const focusable = Array.from(
       toolbar.querySelectorAll("button, select, input, [tabindex]")
@@ -1078,6 +1025,158 @@ function injectToolbar(doc, options) {
       focusable[focusable.length - 1].focus();
     }
   });
+}
+
+// src/toolbar/render.ts
+function injectToolbar(doc, options) {
+  const existing = doc.getElementById(TOOLBAR_ID);
+  if (existing) existing.remove();
+  const toolbar = doc.createElement("div");
+  toolbar.id = TOOLBAR_ID;
+  toolbar.setAttribute("role", "toolbar");
+  toolbar.setAttribute("aria-label", "Rich text editor toolbar");
+  const makeButton2 = (label, title, command, value, isActive, disabled) => makeButton(
+    doc,
+    { onCommand: options.onCommand },
+    label,
+    title,
+    command,
+    value,
+    isActive,
+    disabled
+  );
+  const makeSelect2 = (title, command, optionsList, initialValue) => makeSelect(
+    doc,
+    { onCommand: options.onCommand },
+    title,
+    command,
+    optionsList,
+    initialValue
+  );
+  const format = options.getFormatState();
+  const makeGroup2 = () => makeGroup(doc);
+  const makeSep2 = () => makeSep(doc);
+  const undoBtn = makeButton2(
+    LABEL_UNDO,
+    "Undo",
+    "undo",
+    void 0,
+    false,
+    !options.canUndo()
+  );
+  undoBtn.onclick = () => options.onUndo();
+  const redoBtn = makeButton2(
+    LABEL_REDO,
+    "Redo",
+    "redo",
+    void 0,
+    false,
+    !options.canRedo()
+  );
+  redoBtn.onclick = () => options.onRedo();
+  const grp1 = makeGroup2();
+  grp1.appendChild(undoBtn);
+  grp1.appendChild(redoBtn);
+  toolbar.appendChild(grp1);
+  toolbar.appendChild(makeSep2());
+  const grp2 = makeGroup2();
+  grp2.className = "toolbar-group collapse-on-small";
+  grp2.appendChild(
+    makeSelect2(
+      "Format",
+      "formatBlock",
+      FORMAT_OPTIONS,
+      format.formatBlock
+    )
+  );
+  grp2.appendChild(
+    makeSelect2("Font", "fontName", FONT_OPTIONS, format.fontName)
+  );
+  grp2.appendChild(
+    makeSelect2("Size", "fontSize", SIZE_OPTIONS, format.fontSize)
+  );
+  toolbar.appendChild(grp2);
+  toolbar.appendChild(makeSep2());
+  const grp3 = makeGroup2();
+  grp3.appendChild(
+    makeButton2(LABEL_BOLD, "Bold", "bold", void 0, format.bold)
+  );
+  grp3.appendChild(
+    makeButton2(LABEL_ITALIC, "Italic", "italic", void 0, format.italic)
+  );
+  grp3.appendChild(
+    makeButton2(
+      LABEL_UNDERLINE,
+      "Underline",
+      "underline",
+      void 0,
+      format.underline
+    )
+  );
+  grp3.appendChild(makeButton2(LABEL_STRIKETHROUGH, "Strikethrough", "strike"));
+  grp3.appendChild(
+    makeButton2(
+      LABEL_UNORDERED_LIST,
+      "Unordered list",
+      "unorderedList",
+      void 0,
+      format.listType === "ul"
+    )
+  );
+  grp3.appendChild(
+    makeButton2(
+      LABEL_ORDERED_LIST,
+      "Ordered list",
+      "orderedList",
+      void 0,
+      format.listType === "ol"
+    )
+  );
+  toolbar.appendChild(grp3);
+  toolbar.appendChild(makeSep2());
+  const grp4 = makeGroup2();
+  grp4.appendChild(makeButton2(LABEL_ALIGN_LEFT, "Align left", "align", "left"));
+  grp4.appendChild(
+    makeButton2(LABEL_ALIGN_CENTER, "Align center", "align", "center")
+  );
+  grp4.appendChild(
+    makeButton2(LABEL_ALIGN_RIGHT, "Align right", "align", "right")
+  );
+  toolbar.appendChild(grp4);
+  toolbar.appendChild(makeSep2());
+  const grp5 = makeGroup2();
+  grp5.className = "toolbar-group collapse-on-small";
+  grp5.appendChild(
+    makeColorInput(
+      doc,
+      options,
+      "Text color",
+      "foreColor",
+      format.foreColor
+    )
+  );
+  grp5.appendChild(
+    makeColorInput(
+      doc,
+      options,
+      "Highlight color",
+      "hiliteColor",
+      format.hiliteColor
+    )
+  );
+  toolbar.appendChild(grp5);
+  toolbar.appendChild(makeSep2());
+  const grp6 = makeGroup2();
+  grp6.className = "toolbar-group collapse-on-small";
+  grp6.appendChild(makeButton2(LABEL_LINK, "Insert link", "link"));
+  toolbar.appendChild(grp6);
+  setupOverflow(doc, toolbar, options, format, {
+    makeSelect: makeSelect2,
+    makeColorInput: (title, command, initial) => makeColorInput(doc, options, title, command, initial),
+    makeButton: makeButton2,
+    makeGroup: makeGroup2
+  });
+  setupNavigation(toolbar);
   doc.body.insertBefore(toolbar, doc.body.firstChild);
 }
 
@@ -1120,7 +1219,8 @@ function computeFormatState(doc) {
         hiliteColor: null,
         fontName: null,
         fontSize: null,
-        formatBlock: null
+        formatBlock: null,
+        listType: null
       };
     const computed = (_a = doc.defaultView) == null ? void 0 : _a.getComputedStyle(el);
     const bold = !!(el.closest("strong, b") || computed && (computed.fontWeight === "700" || Number(computed.fontWeight) >= 700));
@@ -1156,6 +1256,18 @@ function computeFormatState(doc) {
       blockEl = blockEl.parentElement;
     }
     const formatBlock = blockEl ? blockEl.tagName.toLowerCase() : null;
+    let listType = null;
+    try {
+      if (blockEl && blockEl.tagName === "LI") {
+        const list = blockEl.closest("ul,ol");
+        if (list) listType = list.tagName.toLowerCase();
+      } else {
+        const possible = el.closest("ul,ol");
+        if (possible) listType = possible.tagName.toLowerCase();
+      }
+    } catch (e) {
+      listType = null;
+    }
     return {
       bold,
       italic,
@@ -1164,7 +1276,8 @@ function computeFormatState(doc) {
       hiliteColor,
       fontName,
       fontSize,
-      formatBlock
+      formatBlock,
+      listType
     };
   } catch (err) {
     return {
@@ -1175,7 +1288,8 @@ function computeFormatState(doc) {
       hiliteColor: null,
       fontName: null,
       fontSize: null,
-      formatBlock: null
+      formatBlock: null,
+      listType: null
     };
   }
 }
@@ -1571,6 +1685,9 @@ function applyStandaloneCommand(command, value) {
       } else {
         wrapSelectionWithElement(doc, tag);
       }
+    } else if (command === "unorderedList" || command === "orderedList") {
+      const tag = command === "unorderedList" ? "ul" : "ol";
+      toggleList(doc, tag);
     }
     pushStandaloneSnapshot();
   } catch (error) {
@@ -1606,6 +1723,57 @@ function wrapSelectionWithElement(doc, tagName, style) {
   newRange.selectNodeContents(wrapper);
   sel.addRange(newRange);
 }
+function toggleList(doc, listTag) {
+  var _a, _b;
+  const sel = doc.getSelection();
+  if (!sel || !sel.rangeCount) return;
+  const node = sel.anchorNode || null;
+  const block = findBlockAncestor(node);
+  if (block && block.tagName === "LI" && block.parentElement) {
+    const parentList = block.parentElement;
+    const parentTag = parentList.tagName.toLowerCase();
+    if (parentTag === listTag) {
+      const frag = doc.createDocumentFragment();
+      Array.from(parentList.children).forEach((li2) => {
+        const p = doc.createElement("p");
+        while (li2.firstChild) p.appendChild(li2.firstChild);
+        frag.appendChild(p);
+      });
+      (_a = parentList.parentElement) == null ? void 0 : _a.replaceChild(frag, parentList);
+      return;
+    } else {
+      const newList = doc.createElement(listTag);
+      while (parentList.firstChild) newList.appendChild(parentList.firstChild);
+      (_b = parentList.parentElement) == null ? void 0 : _b.replaceChild(newList, parentList);
+      return;
+    }
+  }
+  const range = sel.getRangeAt(0);
+  if (range.collapsed) {
+    const list2 = doc.createElement(listTag);
+    const li2 = doc.createElement("li");
+    const zw = doc.createTextNode("\u200B");
+    li2.appendChild(zw);
+    list2.appendChild(li2);
+    range.insertNode(list2);
+    const newRange2 = doc.createRange();
+    newRange2.setStart(zw, 1);
+    newRange2.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(newRange2);
+    return;
+  }
+  const content = range.extractContents();
+  const list = doc.createElement(listTag);
+  const li = doc.createElement("li");
+  li.appendChild(content);
+  list.appendChild(li);
+  range.insertNode(list);
+  sel.removeAllRanges();
+  const newRange = doc.createRange();
+  newRange.selectNodeContents(li);
+  sel.addRange(newRange);
+}
 function findBlockAncestor(node) {
   let n = node;
   const BLOCKS = [
@@ -1748,6 +1916,33 @@ function attachStandaloneHandlers(doc) {
     },
     true
   );
+  doc.addEventListener(
+    "keydown",
+    (e) => {
+      if (e.key !== "Enter") return;
+      if (e.shiftKey) return;
+      const sel = doc.getSelection();
+      if (!sel || !sel.rangeCount) return;
+      const node = sel.anchorNode;
+      const el = node && node.nodeType === Node.ELEMENT_NODE ? node : node && node.parentElement || null;
+      if (!el) return;
+      const li = el.closest("li");
+      if (!li || !li.parentElement) return;
+      e.preventDefault();
+      const list = li.parentElement;
+      const newLi = doc.createElement("li");
+      const zw = doc.createTextNode("\u200B");
+      newLi.appendChild(zw);
+      if (li.nextSibling) list.insertBefore(newLi, li.nextSibling);
+      else list.appendChild(newLi);
+      const range = doc.createRange();
+      range.setStart(zw, 1);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    },
+    true
+  );
 }
 
 // src/core/editor.ts