@blockslides/extension-add-slide-button 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -1,6 +1,12 @@
 import { Extension } from '@blockslides/core';
 import { EditorView } from 'prosemirror-view';
 
+interface PresetTemplateOption {
+    key: string;
+    label: string;
+    icon?: string;
+    build: () => any;
+}
 interface AddSlideButtonOptions {
     /**
      * Whether to inject CSS styles for the button.
@@ -27,6 +33,30 @@ interface AddSlideButtonOptions {
      * @example '+' | 'Add Slide' | '➕' | '<svg>...</svg>'
      */
     content: string;
+    /**
+     * Optional template chooser that renders a second button and modal.
+     * @default false
+     */
+    showPresets?: boolean;
+    /**
+     * Background color for the preset modal content area.
+     * @default '#ffffff'
+     */
+    presetBackground?: string;
+    /**
+     * Text/icon color for the preset modal content area.
+     * @default '#000000'
+     */
+    presetForeground?: string;
+    /**
+     * Presets to show in the modal when showPresets is true.
+     */
+    presets?: PresetTemplateOption[];
+    /**
+     * Content for the template button (emoji or HTML).
+     * @default '✨'
+     */
+    templateButtonContent?: string;
     /**
      * Custom click handler for the button.
      * If not provided, will insert a new slide at the clicked position.
@@ -40,4 +70,4 @@ interface AddSlideButtonOptions {
 }
 declare const AddSlideButton: Extension<AddSlideButtonOptions, any>;
 
-export { AddSlideButton, type AddSlideButtonOptions, AddSlideButton as default };
+export { AddSlideButton, type AddSlideButtonOptions, type PresetTemplateOption, AddSlideButton as default };

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 import { Extension } from '@blockslides/core';
 import { EditorView } from 'prosemirror-view';
 
+interface PresetTemplateOption {
+    key: string;
+    label: string;
+    icon?: string;
+    build: () => any;
+}
 interface AddSlideButtonOptions {
     /**
      * Whether to inject CSS styles for the button.
@@ -27,6 +33,30 @@ interface AddSlideButtonOptions {
      * @example '+' | 'Add Slide' | '➕' | '<svg>...</svg>'
      */
     content: string;
+    /**
+     * Optional template chooser that renders a second button and modal.
+     * @default false
+     */
+    showPresets?: boolean;
+    /**
+     * Background color for the preset modal content area.
+     * @default '#ffffff'
+     */
+    presetBackground?: string;
+    /**
+     * Text/icon color for the preset modal content area.
+     * @default '#000000'
+     */
+    presetForeground?: string;
+    /**
+     * Presets to show in the modal when showPresets is true.
+     */
+    presets?: PresetTemplateOption[];
+    /**
+     * Content for the template button (emoji or HTML).
+     * @default '✨'
+     */
+    templateButtonContent?: string;
     /**
      * Custom click handler for the button.
      * If not provided, will insert a new slide at the clicked position.
@@ -40,4 +70,4 @@ interface AddSlideButtonOptions {
 }
 declare const AddSlideButton: Extension<AddSlideButtonOptions, any>;
 
-export { AddSlideButton, type AddSlideButtonOptions, AddSlideButton as default };
+export { AddSlideButton, type AddSlideButtonOptions, type PresetTemplateOption, AddSlideButton as default };

package/dist/index.js

@@ -3070,6 +3070,7 @@ var PluginKey = class {
 // src/add-slide-button.ts
 var SlideNodeView = class {
   constructor(node, view, getPos, options) {
+    var _a;
     this.node = node;
     this.view = view;
     this.getPos = getPos;
@@ -3095,21 +3096,33 @@ var SlideNodeView = class {
       this.contentDOM.className = "slide";
       this.contentDOM.setAttribute("data-node-type", "slide");
     }
-    this.button = document.createElement("button");
-    this.button.className = "add-slide-button";
-    this.button.innerHTML = options.content;
-    this.button.setAttribute("type", "button");
-    this.button.contentEditable = "false";
-    if (options.buttonStyle) {
-      Object.entries(options.buttonStyle).forEach(([key, value]) => {
-        const camelKey = key.replace(
-          /-([a-z])/g,
-          (_, letter) => letter.toUpperCase()
-        );
-        this.button.style[camelKey] = value;
-      });
-    }
-    this.button.onclick = (event) => {
+    const createButton = (html) => {
+      const btn = document.createElement("button");
+      btn.className = "add-slide-button";
+      btn.innerHTML = html;
+      btn.setAttribute("type", "button");
+      btn.contentEditable = "false";
+      if (options.buttonStyle) {
+        Object.entries(options.buttonStyle).forEach(([key, value]) => {
+          const camelKey = key.replace(
+            /-([a-z])/g,
+            (_, letter) => letter.toUpperCase()
+          );
+          btn.style[camelKey] = value;
+        });
+      }
+      return btn;
+    };
+    const insertEmptySlide = (pos) => {
+      const schema = this.view.state.schema;
+      const slideType = schema.nodes.slide;
+      const paragraphType = schema.nodes.paragraph;
+      const slideContent = paragraphType.create();
+      const slide = slideType.create(null, slideContent);
+      const tr = this.view.state.tr.insert(pos + this.node.nodeSize, slide);
+      this.view.dispatch(tr);
+    };
+    const handlePlusClick = (event) => {
       event.preventDefault();
       event.stopPropagation();
       const pos = this.getPos();
@@ -3126,17 +3139,117 @@ var SlideNodeView = class {
           event
         });
       } else {
-        const schema = this.view.state.schema;
-        const slideType = schema.nodes.slide;
-        const paragraphType = schema.nodes.paragraph;
-        const slideContent = paragraphType.create();
-        const slide = slideType.create(null, slideContent);
-        const tr = this.view.state.tr.insert(pos + this.node.nodeSize, slide);
-        this.view.dispatch(tr);
+        insertEmptySlide(pos);
+      }
+    };
+    const openPresetModal = (pos) => {
+      if (this.presetModal) {
+        this.presetModal.remove();
       }
+      const overlay = document.createElement("div");
+      overlay.className = "add-slide-preset-modal";
+      const dialog = document.createElement("div");
+      dialog.className = "add-slide-preset-dialog";
+      if (options.presetBackground) {
+        dialog.style.setProperty("--add-slide-preset-bg", options.presetBackground);
+      }
+      if (options.presetForeground) {
+        dialog.style.setProperty("--add-slide-preset-fg", options.presetForeground);
+      }
+      const search = document.createElement("input");
+      search.className = "add-slide-preset-search";
+      search.type = "search";
+      search.placeholder = "Choose a template";
+      dialog.appendChild(search);
+      const list = document.createElement("div");
+      list.className = "add-slide-preset-list";
+      const items = [];
+      (options.presets || []).forEach((preset) => {
+        var _a2;
+        const item = document.createElement("button");
+        item.className = "add-slide-preset-item";
+        item.setAttribute("type", "button");
+        item.innerHTML = `
+          <span class="add-slide-preset-icon">${(_a2 = preset.icon) != null ? _a2 : ""}</span>
+          <span class="add-slide-preset-label">${preset.label}</span>
+        `;
+        item.onclick = (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          try {
+            const nodeJSON = preset.build();
+            const newSlide = this.view.state.schema.nodeFromJSON(nodeJSON);
+            const tr = this.view.state.tr.insert(
+              pos + this.node.nodeSize,
+              newSlide
+            );
+            this.view.dispatch(tr);
+          } catch (err) {
+            console.error("Failed to insert preset slide", err);
+          } finally {
+            overlay.remove();
+            this.presetModal = null;
+          }
+        };
+        list.appendChild(item);
+        items.push(item);
+      });
+      search.oninput = () => {
+        const term = search.value.toLowerCase();
+        items.forEach((item) => {
+          var _a2, _b;
+          const label = (_b = (_a2 = item.querySelector(".add-slide-preset-label")) == null ? void 0 : _a2.textContent) == null ? void 0 : _b.toLowerCase();
+          item.style.display = !term || (label == null ? void 0 : label.includes(term)) ? "" : "none";
+        });
+      };
+      dialog.appendChild(list);
+      const close2 = () => {
+        overlay.remove();
+        this.presetModal = null;
+      };
+      overlay.onclick = (e) => {
+        if (e.target === overlay) {
+          close2();
+        }
+      };
+      document.addEventListener(
+        "keydown",
+        (e) => {
+          if (e.key === "Escape") {
+            close2();
+          }
+        },
+        { once: true }
+      );
+      overlay.appendChild(dialog);
+      document.body.appendChild(overlay);
+      this.presetModal = overlay;
     };
-    this.dom.appendChild(this.contentDOM);
-    this.dom.appendChild(this.button);
+    const plusButton = createButton(options.content);
+    plusButton.onclick = handlePlusClick;
+    this.button = plusButton;
+    if (options.showPresets) {
+      const templateButton = createButton(
+        (_a = options.templateButtonContent) != null ? _a : "\u2728"
+      );
+      templateButton.onclick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const pos = this.getPos();
+        if (pos === void 0) return;
+        openPresetModal(pos);
+      };
+      const group = document.createElement("div");
+      group.className = "add-slide-button-group";
+      group.appendChild(plusButton);
+      group.appendChild(templateButton);
+      this.dom.appendChild(this.contentDOM);
+      this.dom.appendChild(group);
+    } else {
+      this.button = plusButton;
+      this.dom.appendChild(this.contentDOM);
+      this.dom.appendChild(this.button);
+    }
   }
   update(node) {
     if (node.type.name !== "slide") return false;
@@ -3144,7 +3257,13 @@ var SlideNodeView = class {
     return true;
   }
   destroy() {
-    this.button.onclick = null;
+    if (this.button) {
+      this.button.onclick = null;
+    }
+    if (this.presetModal) {
+      this.presetModal.remove();
+      this.presetModal = null;
+    }
   }
 };
 var addSlideButtonStyles = `
@@ -3186,6 +3305,131 @@ var addSlideButtonStyles = `
   outline: 2px solid var(--editor-focus, #3b82f6);
   outline-offset: 2px;
 }
+
+.add-slide-button-group {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  width: 180px;
+  margin: 16px auto 32px auto;
+  border: 1px solid var(--slide-border, #e5e5e5);
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: var(--slide-bg, #ffffff);
+  box-shadow: var(--slide-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
+}
+
+.add-slide-button-group .add-slide-button {
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  height: 48px;
+}
+
+.add-slide-button-group .add-slide-button:first-child {
+  border-right: 1px solid var(--slide-border, #e5e5e5);
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+}
+
+.add-slide-button-group .add-slide-button:last-child {
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+  white-space: nowrap;
+  font-size: 14px;
+  padding: 0 12px;
+}
+
+.add-slide-preset-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.add-slide-preset-dialog {
+  background: var(--add-slide-preset-bg, #ffffff);
+  color: var(--add-slide-preset-fg, #000000);
+  border-radius: 8px;
+  padding: 16px 16px 12px 16px;
+  min-width: 140px;
+  max-width: 480px;
+  max-height: 60vh;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+}
+
+.add-slide-preset-search {
+  width: 100%;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--add-slide-preset-fg, #000000) 18%, transparent);
+  font-size: 14px;
+  color: inherit;
+  background: color-mix(in srgb, var(--add-slide-preset-bg, #ffffff) 90%, var(--add-slide-preset-fg, #000000) 10%);
+}
+.add-slide-preset-search:focus {
+  outline: 2px solid color-mix(in srgb, var(--add-slide-preset-fg, #3b82f6) 35%, transparent);
+  outline-offset: 1px;
+}
+
+.add-slide-preset-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 52vh;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.add-slide-preset-list::-webkit-scrollbar {
+  display: none;
+}
+
+.add-slide-preset-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: inherit;
+  padding: 10px 0 12px 0;
+  cursor: pointer;
+  border-bottom: 1px solid color-mix(in srgb, var(--add-slide-preset-fg, #000000) 12%, transparent);
+}
+
+.add-slide-preset-item:last-child {
+  border-bottom: none;
+}
+
+.add-slide-preset-item:hover {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.add-slide-preset-icon {
+  display: block;
+  width: 100%;
+  height: auto;
+  line-height: 0;
+}
+.add-slide-preset-icon > svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.add-slide-preset-label {
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+  width: 100%;
+}
 `;
 var AddSlideButton = Extension.create({
   name: "addSlideButton",
@@ -3195,7 +3439,12 @@ var AddSlideButton = Extension.create({
       injectNonce: void 0,
       buttonStyle: {},
       content: "+",
-      onClick: null
+      showPresets: false,
+      presets: [],
+      templateButtonContent: "Template +",
+      onClick: null,
+      presetBackground: "#ffffff",
+      presetForeground: "#000000"
     };
   },
   addProseMirrorPlugins() {