@sex-editor/slash 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import { SexEditor } from '@sex-editor/core';
+
+declare class SlashMenuPlugin {
+    private editor;
+    private menuElement;
+    private selectedIndex;
+    private queryString;
+    private filteredItems;
+    private active;
+    private items;
+    constructor(editor: SexEditor);
+    private getMenuItems;
+    register(): void;
+    private filterItems;
+    private showMenu;
+    private hideMenu;
+    private moveSelection;
+    private updateMenuUI;
+    private executeSelection;
+}
+declare function registerSlashPlugin(editor: SexEditor): SlashMenuPlugin;
+
+export { SlashMenuPlugin, registerSlashPlugin };

package/dist/index.js

@@ -0,0 +1,1293 @@
+// src/index.ts
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  TextNode,
+  $insertNodes
+} from "lexical";
+import {
+  $createHeadingNode,
+  $createQuoteNode
+} from "@lexical/rich-text";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND
+} from "@lexical/list";
+import { $createCodeNode } from "@lexical/code";
+import {
+  $createHorizontalRuleNode,
+  $createPageBreakNode,
+  $createTableNode,
+  $createImageNode,
+  $createInlineImageNode,
+  $createAnchorNode
+} from "@sex-editor/core";
+
+// ../ui/dist/index.js
+var Modal = class {
+  constructor(options) {
+    this.options = options;
+    this.container = document.createElement("div");
+    this.container.className = "sex-modal-overlay";
+    this.render();
+  }
+  setContent(content) {
+    this.options.content = content;
+    const body = this.container.querySelector(".sex-modal-body");
+    if (body) {
+      body.innerHTML = "";
+      body.appendChild(content);
+    }
+    if (this.options.footer) {
+      const footerEl = this.container.querySelector(".sex-modal-footer");
+      if (footerEl) {
+        footerEl.innerHTML = "";
+        footerEl.appendChild(this.options.footer);
+        footerEl.style.display = "block";
+      }
+    }
+  }
+  render() {
+    this.container.innerHTML = `
+      <div class="sex-modal" style="width: ${this.options.width || "400px"}">
+        <div class="sex-modal-header">
+          <h3>${this.options.title}</h3>
+          <button class="sex-modal-close">&times;</button>
+        </div>
+        <div class="sex-modal-body"></div>
+        <div class="sex-modal-footer"></div>
+      </div>
+    `;
+    const body = this.container.querySelector(".sex-modal-body");
+    if (this.options.content) {
+      body.appendChild(this.options.content);
+    }
+    const footer = this.container.querySelector(".sex-modal-footer");
+    if (this.options.footer) {
+      footer.appendChild(this.options.footer);
+    } else {
+      footer.style.display = "none";
+    }
+    const closeBtn = this.container.querySelector(".sex-modal-close");
+    closeBtn?.addEventListener("click", () => this.close());
+    if (this.options.closeOnClickOutside !== false) {
+      this.container.addEventListener("click", (e) => {
+        if (e.target === this.container) {
+          this.close();
+        }
+      });
+    }
+  }
+  show() {
+    document.body.appendChild(this.container);
+  }
+  close() {
+    this.container.remove();
+    if (this.options.onClose) {
+      this.options.onClose();
+    }
+  }
+  getElement() {
+    return this.container;
+  }
+};
+var ImageInsertDialog = class {
+  constructor(config) {
+    this.modal = null;
+    this.config = config;
+    this.t = config.t;
+  }
+  show() {
+    const content = document.createElement("div");
+    content.innerHTML = `
+      <div class="sex-tabs">
+        <button class="sex-tab active" data-tab="url">${this.t("toolbar.imageSrc")}</button>
+        <button class="sex-tab" data-tab="upload">${this.t("toolbar.imageUpload")}</button>
+      </div>
+      
+      <div class="sex-tab-content active" id="tab-url">
+        <input type="text" class="sex-input sex-input-url" placeholder="https://example.com/image.png">
+      </div>
+      
+      <div class="sex-tab-content" id="tab-upload">
+        <div class="sex-upload-area">
+          <span>${this.t("toolbar.browse")}</span>
+          <input type="file" accept="image/*" style="display:none">
+        </div>
+        <div class="sex-preview-area" style="display:none; margin-top: 10px; text-align: center;">
+          <img src="" style="max-width: 100%; max-height: 200px; object-fit: contain;">
+        </div>
+      </div>
+
+      <div style="margin-top: 16px;">
+        <label style="display:block; margin-bottom: 6px; color: #666; font-size: 13px;">${this.t("toolbar.imageAlt") || "Alt Text"}</label>
+        <input type="text" class="sex-input sex-input-alt" placeholder="${this.t("toolbar.imageAltPlaceholder") || "Image description"}">
+      </div>
+    `;
+    const footer = document.createElement("div");
+    footer.innerHTML = `
+      <button class="sex-btn sex-btn-cancel">${this.t("toolbar.cancel")}</button>
+      <button class="sex-btn sex-btn-primary">${this.t("toolbar.confirm")}</button>
+    `;
+    const tabs = content.querySelectorAll(".sex-tab");
+    const urlInput = content.querySelector(".sex-input-url");
+    const altInput = content.querySelector(".sex-input-alt");
+    const uploadArea = content.querySelector(".sex-upload-area");
+    const fileInput = content.querySelector("input[type='file']");
+    const previewArea = content.querySelector(".sex-preview-area");
+    const previewImg = previewArea.querySelector("img");
+    const cancelBtn = footer.querySelector(".sex-btn-cancel");
+    const confirmBtn = footer.querySelector(".sex-btn-primary");
+    let activeTab = "url";
+    let selectedFile = null;
+    tabs.forEach((tab) => {
+      tab.addEventListener("click", () => {
+        tabs.forEach((t) => t.classList.remove("active"));
+        content.querySelectorAll(".sex-tab-content").forEach((c) => c.classList.remove("active"));
+        tab.classList.add("active");
+        const tabId = tab.dataset.tab;
+        content.querySelector(`#tab-${tabId}`)?.classList.add("active");
+        activeTab = tabId || "url";
+      });
+    });
+    uploadArea.addEventListener("click", () => fileInput.click());
+    fileInput.addEventListener("change", (e) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        selectedFile = file;
+        const url = URL.createObjectURL(file);
+        previewImg.src = url;
+        previewArea.style.display = "block";
+        uploadArea.style.display = "none";
+      }
+    });
+    cancelBtn.addEventListener("click", () => {
+      this.modal?.close();
+      if (this.config.onCancel) this.config.onCancel();
+    });
+    confirmBtn.addEventListener("click", () => {
+      const alt = altInput.value.trim();
+      if (activeTab === "url") {
+        const url = urlInput.value.trim();
+        if (url) {
+          this.config.onSubmit({
+            type: "url",
+            src: url,
+            alt
+          });
+          this.modal?.close();
+        }
+      } else {
+        if (selectedFile) {
+          this.config.onSubmit({
+            type: "file",
+            file: selectedFile,
+            alt: alt || selectedFile.name
+          });
+          this.modal?.close();
+        }
+      }
+    });
+    this.modal = new Modal({
+      title: this.t("toolbar.insertImage"),
+      content,
+      footer,
+      width: "400px",
+      onClose: this.config.onCancel
+    });
+    this.modal.show();
+  }
+};
+var Button = class {
+  constructor(options = {}) {
+    this.options = options;
+    this.element = document.createElement("button");
+    this.element.type = "button";
+    this.element.className = `sex-ui-button ${options.className || ""}`;
+    this.render();
+    this.bindEvents();
+  }
+  render() {
+    const { title, icon, active, disabled, dataset, children } = this.options;
+    if (title) this.element.title = title;
+    if (active) this.element.classList.add("active");
+    if (disabled) this.element.disabled = true;
+    if (dataset) {
+      Object.entries(dataset).forEach(([key, value]) => {
+        this.element.dataset[key] = value;
+      });
+    }
+    this.element.innerHTML = "";
+    if (icon) {
+      if (typeof icon === "string") {
+        if (icon.trim().startsWith("<svg")) {
+          const temp = document.createElement("div");
+          temp.innerHTML = icon;
+          if (temp.firstChild) {
+            this.element.appendChild(temp.firstChild);
+          }
+        } else {
+          this.element.textContent = icon;
+        }
+      } else if (icon instanceof HTMLElement) {
+        this.element.appendChild(icon);
+      }
+    }
+    if (children) {
+      if (typeof children === "string") {
+        const span = document.createElement("span");
+        span.textContent = children;
+        this.element.appendChild(span);
+      } else {
+        this.element.appendChild(children);
+      }
+    }
+  }
+  bindEvents() {
+    if (this.options.onClick) {
+      this.element.addEventListener("click", (e) => {
+        if (!this.element.disabled && this.options.onClick) {
+          this.options.onClick(e);
+        }
+      });
+    }
+  }
+  getElement() {
+    return this.element;
+  }
+  setActive(active) {
+    this.element.classList.toggle("active", active);
+  }
+  setDisabled(disabled) {
+    this.element.disabled = disabled;
+  }
+};
+var NumberInput = class {
+  constructor(options = {}) {
+    this.options = {
+      value: 14,
+      min: 0,
+      max: 100,
+      step: 1,
+      ...options
+    };
+    this.container = document.createElement("div");
+    this.container.className = "sex-number-input";
+    this.render();
+    this.bindEvents();
+  }
+  render() {
+    const { value, width, titleMinus, titlePlus } = this.options;
+    if (width) this.container.style.width = width;
+    const minusBtn = document.createElement("button");
+    minusBtn.className = "sex-number-btn sex-number-minus";
+    minusBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11h14v2H5z"/></svg>`;
+    if (titleMinus) minusBtn.title = titleMinus;
+    this.input = document.createElement("input");
+    this.input.type = "text";
+    this.input.inputMode = "numeric";
+    this.input.className = "sex-number-field";
+    this.input.value = String(value);
+    const plusBtn = document.createElement("button");
+    plusBtn.className = "sex-number-btn sex-number-plus";
+    plusBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>`;
+    if (titlePlus) plusBtn.title = titlePlus;
+    this.container.append(minusBtn, this.input, plusBtn);
+    minusBtn.addEventListener("click", () => this.changeValue(-(this.options.step || 1)));
+    plusBtn.addEventListener("click", () => this.changeValue(this.options.step || 1));
+  }
+  bindEvents() {
+    this.input.addEventListener("keydown", (e) => {
+      const step = this.options.step || 1;
+      if (e.key === "Enter") {
+        this.commitValue();
+        this.input.blur();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        this.changeValue(step);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        this.changeValue(-step);
+      }
+    });
+    this.input.addEventListener("blur", () => {
+      this.commitValue();
+    });
+    this.input.addEventListener("input", () => {
+      this.input.value = this.input.value.replace(/[^0-9]/g, "");
+    });
+  }
+  changeValue(delta) {
+    let val = parseInt(this.input.value, 10);
+    if (isNaN(val)) val = this.options.value || 0;
+    this.setValue(val + delta);
+  }
+  commitValue() {
+    let val = parseInt(this.input.value, 10);
+    if (isNaN(val)) val = this.options.value || 0;
+    this.setValue(val);
+  }
+  clamp(val) {
+    const { min, max } = this.options;
+    if (min !== void 0) val = Math.max(min, val);
+    if (max !== void 0) val = Math.min(max, val);
+    return val;
+  }
+  setValue(val, emit = true) {
+    val = this.clamp(val);
+    this.input.value = String(val);
+    this.options.value = val;
+    if (emit && this.options.onChange) {
+      this.options.onChange(val);
+    }
+  }
+  getElement() {
+    return this.container;
+  }
+  getValue() {
+    return this.options.value || 0;
+  }
+  destroy() {
+    this.container.remove();
+  }
+};
+var TableInsertDialog = class {
+  constructor(config) {
+    this.modal = null;
+    this.config = config;
+    this.rowsInput = new NumberInput({
+      value: 3,
+      min: 1,
+      max: 20,
+      step: 1,
+      width: "100%"
+    });
+    this.colsInput = new NumberInput({
+      value: 3,
+      min: 1,
+      max: 10,
+      step: 1,
+      width: "100%"
+    });
+  }
+  show() {
+    const content = document.createElement("div");
+    content.style.padding = "16px";
+    content.innerHTML = `
+      <div style="margin-bottom:12px">
+        <label style="display:block;margin-bottom:4px;font-size:13px;color:#666">${this.config.t("toolbar.table.rows") || "Rows"}</label>
+        <div id="sex-table-rows-input"></div>
+      </div>
+      <div style="margin-bottom:12px">
+        <label style="display:block;margin-bottom:4px;font-size:13px;color:#666">${this.config.t("toolbar.table.cols") || "Columns"}</label>
+        <div id="sex-table-cols-input"></div>
+      </div>
+    `;
+    content.querySelector("#sex-table-rows-input")?.appendChild(this.rowsInput.getElement());
+    content.querySelector("#sex-table-cols-input")?.appendChild(this.colsInput.getElement());
+    const footer = document.createElement("div");
+    footer.innerHTML = `
+      <button class="sex-btn sex-btn-cancel">${this.config.t("toolbar.cancel")}</button>
+      <button class="sex-btn sex-btn-primary">${this.config.t("toolbar.confirm")}</button>
+    `;
+    this.modal = new Modal({
+      title: this.config.t("toolbar.insertTable") || "Insert Table",
+      content,
+      footer,
+      width: "300px",
+      onClose: () => {
+        this.config.onCancel?.();
+      }
+    });
+    footer.querySelector(".sex-btn-cancel")?.addEventListener("click", () => {
+      this.modal?.close();
+    });
+    footer.querySelector(".sex-btn-primary")?.addEventListener("click", () => {
+      const rows = this.rowsInput.getValue();
+      const cols = this.colsInput.getValue();
+      this.config.onSubmit(rows, cols);
+      this.modal?.close();
+    });
+    this.modal.show();
+  }
+};
+var AnchorInsertDialog = class {
+  constructor({ t, defaultId = "", onSubmit, onCancel }) {
+    this.modal = new Modal({
+      title: t("dialog.anchor.insert"),
+      closeOnClickOutside: true,
+      onClose: onCancel
+    });
+    const content = document.createElement("div");
+    content.style.cssText = "display: flex; flex-direction: column; gap: 12px; padding: 4px 0;";
+    const idGroup = document.createElement("div");
+    idGroup.style.cssText = "display: flex; flex-direction: column; gap: 4px;";
+    const idLabel = document.createElement("label");
+    idLabel.textContent = "ID";
+    idLabel.style.cssText = "font-size: 13px; font-weight: 500; color: #374151;";
+    this.idInput = document.createElement("input");
+    this.idInput.type = "text";
+    this.idInput.value = defaultId;
+    this.idInput.placeholder = t("toolbar.anchorIdPlaceholder") || "my-anchor-id";
+    this.idInput.style.cssText = "padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.2s;";
+    this.idInput.onfocus = () => this.idInput.style.borderColor = "#2563eb";
+    this.idInput.onblur = () => this.idInput.style.borderColor = "#d1d5db";
+    setTimeout(() => this.idInput.focus(), 0);
+    idGroup.appendChild(idLabel);
+    idGroup.appendChild(this.idInput);
+    content.appendChild(idGroup);
+    const footer = document.createElement("div");
+    footer.style.cssText = "display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;";
+    const cancelBtn = new Button({
+      children: t("dialog.cancel"),
+      // variant: 'secondary', // Button class doesn't support variant yet, fallback to class or styles if needed
+      onClick: () => this.modal.close()
+    });
+    const confirmBtn = new Button({
+      children: t("dialog.confirm"),
+      // variant: 'primary',
+      onClick: () => {
+        const id = this.idInput.value.trim();
+        if (id) {
+          onSubmit({ id });
+          this.modal.close();
+        } else {
+          this.idInput.style.borderColor = "red";
+        }
+      }
+    });
+    this.idInput.onkeydown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        confirmBtn.getElement().click();
+      }
+    };
+    footer.appendChild(cancelBtn.getElement());
+    footer.appendChild(confirmBtn.getElement());
+    content.appendChild(footer);
+    this.modal.setContent(content);
+  }
+  show() {
+    this.modal.show();
+  }
+};
+var ensureStyle = (id, cssText) => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = cssText;
+  (document.head ?? document.documentElement).appendChild(style);
+};
+ensureStyle(
+  "sex-ui-styles",
+  `/* Button */
+.sex-ui-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 4px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  transition: all .2s ease;
+  color: #495057;
+  font-size: 13px;
+}
+.sex-ui-button:hover:not(:disabled) {
+  background: #e9ecef;
+  border-color: #dee2e6;
+}
+.sex-ui-button.active {
+  background: #e9ecef;
+  border-color: #dee2e6;
+}
+.sex-ui-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.sex-ui-button svg {
+  display: block;
+}
+
+/* NumberInput */
+.sex-number-input {
+  display: flex;
+  align-items: center;
+  background: white;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  height: 32px;
+  transition: all .2s ease;
+}
+.sex-number-input:hover {
+  border-color: #dee2e6;
+}
+.sex-number-input:focus-within {
+  border-color: #dee2e6;
+}
+.sex-number-btn {
+  width: 28px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: #495057;
+  transition: background .2s;
+}
+.sex-number-btn:hover {
+  background: #f8f9fa;
+}
+.sex-number-field {
+  width: 36px;
+  text-align: center;
+  border: none;
+  outline: none;
+  font-size: 13px;
+  color: #495057;
+  background: transparent;
+}
+/* Hide arrows */
+.sex-number-field::-webkit-outer-spin-button,
+.sex-number-field::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Dropdown */
+.sex-dropdown { position: relative; display: inline-flex; }
+.sex-dropdown-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  transition: all .2s ease;
+  color: #495057;
+  font-size: 13px;
+}
+.sex-dropdown-button:hover, .sex-dropdown-button.active {
+  background: #e9ecef;
+  border-color: #dee2e6;
+}
+.sex-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 100%;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0,0,0,.1);
+  margin-top: 4px;
+  max-height: 300px;
+  overflow-y: auto;
+  display: none;
+}
+.sex-dropdown-menu.show { display: block; }
+.sex-menu-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background .2s;
+  display: flex;
+  align-items: center;
+}
+.sex-menu-item:hover, .sex-menu-item.active { background: #f8f9fa; }
+.sex-menu-divider {
+  height: 1px;
+  background: #eee;
+  margin: 4px 0;
+}
+
+/* Modal */
+.sex-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+.sex-modal {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+}
+.sex-modal-header {
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.sex-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
+.sex-modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #999; }
+.sex-modal-body { padding: 16px; overflow-y: auto; }
+.sex-modal-footer {
+  padding: 16px;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.sex-btn {
+  padding: 6px 16px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+}
+.sex-btn-cancel { background: #f1f1f1; color: #333; }
+.sex-btn-primary { background: #007bff; color: white; }
+.sex-btn-primary:disabled { background: #ccc; cursor: not-allowed; }
+.sex-btn-preset { background: #f8f9fa; border: 1px solid #dee2e6; color: #495057; }
+.sex-btn-preset:hover { background: #e9ecef; border-color: #ced4da; }
+
+/* Input Styles */
+.sex-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+/* ImageInsertDialog */
+.sex-tabs { display: flex; border-bottom: 1px solid #eee; margin-bottom: 16px; }
+.sex-tab {
+  padding: 8px 16px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  color: #666;
+}
+.sex-tab.active { color: #007bff; border-bottom-color: #007bff; }
+.sex-tab-content { display: none; }
+.sex-tab-content.active { display: block; }
+.sex-upload-area {
+  border: 2px dashed #ddd;
+  border-radius: 4px;
+  padding: 32px;
+  text-align: center;
+  cursor: pointer;
+  color: #666;
+  transition: border-color 0.2s;
+}
+.sex-upload-area:hover { border-color: #007bff; color: #007bff; }
+
+/* FloatingToolbar */
+.sex-floating-toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: none;
+  padding: 4px;
+  gap: 4px;
+  align-items: center;
+  transition: opacity 0.2s;
+}
+.sex-floating-toolbar.show {
+  display: flex;
+}
+.sex-floating-separator {
+  width: 1px;
+  height: 20px;
+  background: #e9ecef;
+  margin: 0 2px;
+}
+`
+);
+
+// src/index.ts
+var ensureStyle2 = (id, cssText) => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = cssText;
+  (document.head ?? document.documentElement).appendChild(style);
+};
+ensureStyle2(
+  "sex-slash-styles",
+  `.sex-slash-menu {
+  position: absolute;
+  z-index: 100;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  width: 280px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.sex-slash-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #374151;
+  transition: background-color 0.2s;
+}
+
+.sex-slash-menu-item:hover,
+.sex-slash-menu-item.selected {
+  background-color: #f3f4f6;
+}
+
+.sex-slash-menu-icon {
+  margin-right: 12px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b7280;
+}
+
+.sex-slash-menu-label {
+  flex: 1;
+}
+
+.sex-slash-menu-hidden {
+  display: none;
+}
+`
+);
+var SlashMenuPlugin = class {
+  constructor(editor) {
+    this.menuElement = null;
+    this.selectedIndex = 0;
+    this.queryString = null;
+    this.filteredItems = [];
+    this.active = false;
+    this.editor = editor;
+    this.items = this.getMenuItems();
+  }
+  getMenuItems() {
+    const t = this.editor.t;
+    return [
+      {
+        key: "paragraph",
+        label: t("toolbar.block.paragraph") || "Paragraph",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M14 17H4v2h10v-2zm0-8H4v2h10V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"/></svg>`,
+        keywords: ["p", "paragraph", "text"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              const paragraph = $createParagraphNode();
+              $insertNodes([paragraph]);
+            }
+          });
+        }
+      },
+      {
+        key: "anchor",
+        label: t("toolbar.anchor") || "Anchor",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>`,
+        keywords: ["anchor", "bookmark", "id"],
+        execute: (editor) => {
+          const dialog = new AnchorInsertDialog({
+            t: (key) => editor.t ? editor.t(key) : key,
+            onSubmit: (data) => {
+              editor.update(() => {
+                const node = $createAnchorNode(data.id);
+                $insertNodes([node]);
+              });
+            }
+          });
+          dialog.show();
+        }
+      },
+      {
+        key: "h1",
+        label: t("toolbar.block.h1") || "Heading 1",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+        keywords: ["h1", "heading1", "title"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createHeadingNode("h1")]);
+            }
+          });
+        }
+      },
+      {
+        key: "h2",
+        label: t("toolbar.block.h2") || "Heading 2",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+        keywords: ["h2", "heading2", "subtitle"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createHeadingNode("h2")]);
+            }
+          });
+        }
+      },
+      {
+        key: "h3",
+        label: t("toolbar.block.h3") || "Heading 3",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+        keywords: ["h3", "heading3"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createHeadingNode("h3")]);
+            }
+          });
+        }
+      },
+      {
+        key: "h4",
+        label: t("toolbar.block.h4") || "Heading 4",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+        keywords: ["h4", "heading4"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createHeadingNode("h4")]);
+            }
+          });
+        }
+      },
+      {
+        key: "h5",
+        label: t("toolbar.block.h5") || "Heading 5",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+        keywords: ["h5", "heading5"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createHeadingNode("h5")]);
+            }
+          });
+        }
+      },
+      {
+        key: "h6",
+        label: t("toolbar.block.h6") || "Heading 6",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+        keywords: ["h6", "heading6"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createHeadingNode("h6")]);
+            }
+          });
+        }
+      },
+      {
+        key: "ul",
+        label: t("toolbar.block.bullet") || "Bullet List",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>`,
+        keywords: ["ul", "list", "bullet"],
+        execute: (editor) => {
+          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+        }
+      },
+      {
+        key: "ol",
+        label: t("toolbar.block.number") || "Numbered List",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/></svg>`,
+        keywords: ["ol", "list", "number", "ordered"],
+        execute: (editor) => {
+          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+        }
+      },
+      {
+        key: "code",
+        label: t("toolbar.block.code") || "Code Block",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>`,
+        keywords: ["code", "block", "javascript", "ts"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createCodeNode()]);
+            }
+          });
+        }
+      },
+      {
+        key: "quote",
+        label: t("toolbar.block.quote") || "Quote",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg>`,
+        keywords: ["quote", "blockquote"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createQuoteNode()]);
+            }
+          });
+        }
+      },
+      {
+        key: "image",
+        label: t("toolbar.image") || "Image",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>`,
+        keywords: ["image", "photo", "picture"],
+        execute: (editor) => {
+          const dialog = new ImageInsertDialog({
+            t: editor.t,
+            onSubmit: async (data) => {
+              try {
+                let src = data.src || "";
+                const meta = data.type === "file" && data.file ? await Promise.resolve(editor._imageMetaResolver?.(data.file)).catch(() => void 0) : void 0;
+                if (data.type === "file" && data.file) {
+                  const file = data.file;
+                  const strategy = editor._imageStorageStrategy ?? "auto";
+                  const shouldBase64 = strategy === "base64" || strategy === "auto" && !editor._imageUploadHandler;
+                  if (!shouldBase64) {
+                    if (!editor._imageUploadHandler) {
+                      throw new Error("imageUploadHandler is required when imageStorage is 'upload'");
+                    }
+                    src = await editor._imageUploadHandler(file);
+                  } else {
+                    src = await new Promise((resolve) => {
+                      const reader = new FileReader();
+                      reader.onload = () => resolve(reader.result);
+                      reader.readAsDataURL(file);
+                    });
+                  }
+                }
+                if (src) {
+                  editor.update(() => {
+                    const node = $createImageNode({
+                      src,
+                      altText: data.alt,
+                      maxWidth: 500,
+                      meta: meta || void 0
+                    });
+                    $insertNodes([node]);
+                  });
+                }
+              } catch (e) {
+                console.error("Image insert failed", e);
+              }
+            }
+          });
+          dialog.show();
+        }
+      },
+      {
+        key: "inline-image",
+        label: t("toolbar.inlineImage") || "Inline Image",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>`,
+        keywords: ["inline-image", "inline", "image", "img"],
+        execute: (editor) => {
+          const dialog = new ImageInsertDialog({
+            t: editor.t,
+            onSubmit: async (data) => {
+              try {
+                let src = data.src || "";
+                const meta = data.type === "file" && data.file ? await Promise.resolve(editor._imageMetaResolver?.(data.file)).catch(() => void 0) : void 0;
+                if (data.type === "file" && data.file) {
+                  const file = data.file;
+                  const strategy = editor._imageStorageStrategy ?? "auto";
+                  const shouldBase64 = strategy === "base64" || strategy === "auto" && !editor._imageUploadHandler;
+                  if (!shouldBase64) {
+                    if (!editor._imageUploadHandler) {
+                      throw new Error("imageUploadHandler is required when imageStorage is 'upload'");
+                    }
+                    src = await editor._imageUploadHandler(file);
+                  } else {
+                    src = await new Promise((resolve) => {
+                      const reader = new FileReader();
+                      reader.onload = () => resolve(reader.result);
+                      reader.readAsDataURL(file);
+                    });
+                  }
+                }
+                if (src) {
+                  editor.update(() => {
+                    const node = $createInlineImageNode({
+                      src,
+                      altText: data.alt,
+                      maxWidth: 500,
+                      width: 100,
+                      meta: meta || void 0
+                    });
+                    $insertNodes([node]);
+                  });
+                }
+              } catch (e) {
+                console.error("Inline image insert failed", e);
+              }
+            }
+          });
+          dialog.show();
+        }
+      },
+      {
+        key: "table",
+        label: t("toolbar.insertTable") || "Table",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/></svg>`,
+        keywords: ["table", "grid"],
+        execute: (editor) => {
+          const dialog = new TableInsertDialog({
+            t,
+            onSubmit: (rows, cols) => {
+              editor.update(() => {
+                const node = $createTableNode(rows, cols);
+                $insertNodes([node]);
+              });
+            }
+          });
+          dialog.show();
+        }
+      },
+      {
+        key: "hr",
+        label: t("toolbar.horizontalRule") || "Horizontal Rule",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4 11h16v2H4z"/></svg>`,
+        keywords: ["hr", "line", "separator"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createHorizontalRuleNode()]);
+            }
+          });
+        }
+      },
+      {
+        key: "page-break",
+        label: t("toolbar.pageBreak") || "Page Break",
+        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9 13h6v-2h-6v2zm-2 2H5v-2h2v2zm-2-4H3v2h2v-2zm0 8h2v-2H5v2zm14-2v-2h-2v2h2zm-2 4h2v-2h-2v2zM6 7H4v2h2V7zm14 0v2h-2V7h2zm-8-2h6v2h-6V5zM8 7H6v2h2V7zm8 2v2h2V9h-2zm-4 4h2v-2h-2v2zm-4 0h2v-2H8v2zm4 4h2v-2h-2v2z"/></svg>`,
+        keywords: ["page", "break", "split"],
+        execute: (editor) => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              $insertNodes([$createPageBreakNode()]);
+            }
+          });
+        }
+      }
+    ];
+  }
+  register() {
+    this.editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          this.hideMenu();
+          return;
+        }
+        const anchor = selection.anchor;
+        const node = anchor.getNode();
+        if (node instanceof TextNode) {
+          const textContent = node.getTextContent();
+          const block = node.getTopLevelElementOrThrow();
+          const blockText = block.getTextContent();
+          if (blockText.startsWith("/") && selection.anchor.offset <= blockText.length) {
+            const query = blockText.substring(1);
+            this.queryString = query;
+            this.showMenu(selection);
+            return;
+          }
+        }
+        this.hideMenu();
+      });
+    });
+    this.editor.registerCommand(
+      KEY_ARROW_UP_COMMAND,
+      (event) => {
+        if (this.active) {
+          event.preventDefault();
+          this.moveSelection(-1);
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+    this.editor.registerCommand(
+      KEY_ARROW_DOWN_COMMAND,
+      (event) => {
+        if (this.active) {
+          event.preventDefault();
+          this.moveSelection(1);
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+    this.editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => {
+        if (this.active) {
+          event?.preventDefault();
+          this.executeSelection();
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+    this.editor.registerCommand(
+      KEY_ESCAPE_COMMAND,
+      (event) => {
+        if (this.active) {
+          event.preventDefault();
+          this.hideMenu();
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  }
+  filterItems() {
+    if (!this.queryString) {
+      this.filteredItems = this.items;
+      return;
+    }
+    const q = this.queryString.toLowerCase();
+    this.filteredItems = this.items.filter(
+      (item) => item.label.toLowerCase().includes(q) || item.keywords.some((k) => k.toLowerCase().includes(q))
+    );
+  }
+  showMenu(selection) {
+    this.active = true;
+    this.filterItems();
+    if (this.filteredItems.length === 0) {
+      this.hideMenu();
+      return;
+    }
+    if (!this.menuElement) {
+      this.menuElement = document.createElement("div");
+      this.menuElement.className = "sex-slash-menu";
+      document.body.appendChild(this.menuElement);
+    }
+    this.menuElement.innerHTML = "";
+    this.menuElement.style.display = "block";
+    this.filteredItems.forEach((item, index) => {
+      const el = document.createElement("div");
+      el.className = `sex-slash-menu-item ${index === this.selectedIndex ? "selected" : ""}`;
+      el.innerHTML = `
+        <span class="sex-slash-menu-icon">${item.icon}</span>
+        <span class="sex-slash-menu-label">${item.label}</span>
+      `;
+      el.onclick = () => {
+        this.selectedIndex = index;
+        this.executeSelection();
+      };
+      this.menuElement?.appendChild(el);
+    });
+    const domSelection = window.getSelection();
+    if (domSelection && domSelection.rangeCount > 0) {
+      const range = domSelection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      if (this.menuElement) {
+        this.menuElement.style.top = `${rect.bottom + window.scrollY + 5}px`;
+        this.menuElement.style.left = `${rect.left + window.scrollX}px`;
+      }
+    }
+  }
+  hideMenu() {
+    this.active = false;
+    this.queryString = null;
+    this.selectedIndex = 0;
+    if (this.menuElement) {
+      this.menuElement.style.display = "none";
+    }
+  }
+  moveSelection(delta) {
+    this.selectedIndex += delta;
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = this.filteredItems.length - 1;
+    } else if (this.selectedIndex >= this.filteredItems.length) {
+      this.selectedIndex = 0;
+    }
+    this.updateMenuUI();
+  }
+  updateMenuUI() {
+    if (!this.menuElement) return;
+    const items = this.menuElement.querySelectorAll(".sex-slash-menu-item");
+    items.forEach((item, index) => {
+      if (index === this.selectedIndex) {
+        item.classList.add("selected");
+        item.scrollIntoView({ block: "nearest" });
+      } else {
+        item.classList.remove("selected");
+      }
+    });
+  }
+  executeSelection() {
+    const item = this.filteredItems[this.selectedIndex];
+    if (item) {
+      const deleteCount = (this.queryString?.length || 0) + 1;
+      this.hideMenu();
+      this.editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          const anchor = selection.anchor;
+          const node = anchor.getNode();
+          if (node instanceof TextNode) {
+            node.spliceText(0, deleteCount, "", true);
+          }
+        }
+      }, {
+        onUpdate: () => {
+          item.execute(this.editor);
+        }
+      });
+    }
+  }
+};
+function registerSlashPlugin(editor) {
+  const plugin = new SlashMenuPlugin(editor);
+  plugin.register();
+  return plugin;
+}
+export {
+  SlashMenuPlugin,
+  registerSlashPlugin
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sex-editor/slash",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "tsup": "8.3.5",
+    "typescript": "^5.6.3",
+    "@sex-editor/core": "0.0.2",
+    "@sex-editor/ui": "0.0.1"
+  },
+  "peerDependencies": {
+    "@sex-editor/core": ">=0.0.2 <0.0.3",
+    "lexical": "^0.39.0",
+    "@lexical/link": "^0.39.0",
+    "@lexical/list": "^0.39.0",
+    "@lexical/rich-text": "^0.39.0",
+    "@lexical/selection": "^0.39.0",
+    "@lexical/code": "^0.39.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup"
+  }
+}