katalyst-content 2.7.1 → 3.0.0.alpha.1

data/app/assets/builds/katalyst/content.js

@@ -275,7 +275,7 @@ class Item {
  */
 function createChildrenList(node) {
   const childrenList = document.createElement("ol");
-  childrenList.setAttribute("class", "hidden");
+  childrenList.toggleAttribute("hidden", true);
 
   // if objectType is "rich-content" set richContentChildren as a data attribute
   childrenList.dataset[`contentChildren`] = "";
@@ -736,11 +736,62 @@ class ItemController extends Controller {
   }
 }
 
-class ListController extends Controller {
+class ItemEditorController extends Controller {
+  static targets = ["dialog"];
+
   connect() {
-    this.enterCount = 0;
+    this.element.addEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  dismiss() {
+    if (!this.dialogTarget) return;
+    if (!this.dialogTarget.open) this.dialogTarget.close();
+
+    if (!("itemPersisted" in this.dialogTarget.dataset)) {
+      this.#removeTargetItem();
+    }
+
+    this.element.removeAttribute("src");
+    this.dialogTarget.remove();
+  }
+
+  dialogTargetConnected(dialog) {
+    dialog.showModal();
+  }
+
+  onSubmit = (event) => {
+    if (
+      event.detail.success &&
+      "closeDialog" in event.detail.formSubmission?.submitter?.dataset
+    ) {
+      this.dialogTarget.close();
+      this.element.removeAttribute("src");
+      this.dialogTarget.remove();
+    }
+  };
+
+  noop() {}
+
+  #removeTargetItem() {
+    const el = document.getElementById(this.dialogTarget.dataset.itemId);
+    const item = new Item(el.closest("[data-content-item]"));
+    const list = item.node.parentElement;
+
+    item.node.remove();
+
+    this.dispatch("reindex", {
+      target: list,
+      bubbles: true,
+      prefix: "content",
+    });
   }
+}
 
+class ListController extends Controller {
   /**
    * When the user starts a drag within the list, set the item's dataTransfer
    * properties to indicate that it's being dragged and update its style.
@@ -764,11 +815,6 @@ class ListController extends Controller {
    * When the user drags an item over another item in the last, swap the
    * dragging item with the item under the cursor.
    *
-   * As a special case, if the item is dragged over placeholder space at the end
-   * of the list, move the item to the bottom of the list instead. This allows
-   * users to hit the list element more easily when adding new items to an empty
-   * list.
-   *
    * @param event {DragEvent}
    */
   dragover(event) {
@@ -782,54 +828,7 @@ class ListController extends Controller {
   }
 
   /**
-   * When the user drags an item into the list, create a placeholder item to
-   * represent the new item. Note that we can't access the drag data
-   * until drop, so we assume that this is our template item for now.
-   *
-   * Users can cancel the drag by dragging the item out of the list or by
-   * pressing escape. Both are handled by `cancelDrag`.
-   *
-   * @param event {DragEvent}
-   */
-  dragenter(event) {
-    event.preventDefault();
-
-    // Safari doesn't support relatedTarget, so we count enter/leave pairs
-    this.enterCount++;
-
-    if (copyAllowed(event) && !this.dragItem) {
-      const item = document.createElement("li");
-      item.dataset.dragging = "";
-      item.dataset.newItem = "";
-      this.element.appendChild(item);
-    }
-  }
-
-  /**
-   * When the user drags the item out of the list, remove the placeholder.
-   * This allows users to cancel the drag by dragging the item out of the list.
-   *
-   * @param event {DragEvent}
-   */
-  dragleave(event) {
-    // Safari doesn't support relatedTarget, so we count enter/leave pairs
-    // https://bugs.webkit.org/show_bug.cgi?id=66547
-    this.enterCount--;
-
-    if (
-      this.enterCount <= 0 &&
-      this.dragItem?.dataset.hasOwnProperty("newItem")
-    ) {
-      this.dragItem.remove();
-      this.reset();
-    }
-  }
-
-  /**
-   * When the user drops an item into the list, end the drag and reindex the list.
-   *
-   * If the item is a new item, we replace the placeholder with the template
-   * item data from the dataTransfer API.
+   * When the user drops an item, end the drag and reindex the list.
    *
    * @param event {DragEvent}
    */
@@ -842,31 +841,17 @@ class ListController extends Controller {
     delete item.dataset.dragging;
     swap(dropTarget(event.target), item);
 
-    if (item.dataset.hasOwnProperty("newItem")) {
-      const placeholder = item;
-      const template = document.createElement("template");
-      template.innerHTML = event.dataTransfer.getData("text/html");
-      item = template.content.querySelector("li");
-
-      this.element.replaceChild(item, placeholder);
-      requestAnimationFrame(() =>
-        item.querySelector("[role='button'][value='edit']").click(),
-      );
-    }
-
     this.dispatch("drop", { target: item, bubbles: true, prefix: "content" });
   }
 
   /**
-   * End an in-progress drag. If the item is a new item, remove it, otherwise
-   * reset the item's style and restore its original position in the list.
+   * End an in-progress drag by resetting the item's style and restoring its
+   * original position in the list.
    */
   dragend() {
     const item = this.dragItem;
 
-    if (!item) ; else if (item.dataset.hasOwnProperty("newItem")) {
-      item.remove();
-    } else {
+    if (item) {
       delete item.dataset.dragging;
       this.reset();
     }
@@ -890,7 +875,7 @@ class ListController extends Controller {
 }
 
 /**
- * Swaps two list items. If target is a list, the item is appended.
+ * Swaps two list items.
  *
  * @param target the target element to swap with
  * @param item the item the user is dragging
@@ -899,51 +884,160 @@ function swap(target, item) {
   if (!target) return;
   if (target === item) return;
 
-  if (target.nodeName === "LI") {
-    const positionComparison = target.compareDocumentPosition(item);
-    if (positionComparison & Node.DOCUMENT_POSITION_FOLLOWING) {
-      target.insertAdjacentElement("beforebegin", item);
-    } else if (positionComparison & Node.DOCUMENT_POSITION_PRECEDING) {
-      target.insertAdjacentElement("afterend", item);
-    }
-  }
-
-  if (target.nodeName === "OL") {
-    target.appendChild(item);
+  const positionComparison = target.compareDocumentPosition(item);
+  if (positionComparison & Node.DOCUMENT_POSITION_FOLLOWING) {
+    target.insertAdjacentElement("beforebegin", item);
+  } else if (positionComparison & Node.DOCUMENT_POSITION_PRECEDING) {
+    target.insertAdjacentElement("afterend", item);
   }
 }
 
-/**
- * Returns true if the event supports copy or copy move.
- *
- * Chrome and Firefox use copy, but Safari only supports copyMove.
- */
-function copyAllowed(event) {
-  return (
-    event.dataTransfer.effectAllowed === "copy" ||
-    event.dataTransfer.effectAllowed === "copyMove"
-  );
-}
-
 /**
  * Given an event target, return the closest drop target, if any.
  */
 function dropTarget(e) {
-  return (
-    e &&
-    (e.closest("[data-controller='content--editor--list'] > *") ||
-      e.closest("[data-controller='content--editor--list']"))
-  );
+  return e && e.closest("[data-controller='content--editor--list'] > *");
 }
 
-class NewItemController extends Controller {
-  static targets = ["template"];
+const EDGE_AREA = 24;
 
-  dragstart(event) {
-    if (this.element !== event.target) return;
+class NewItemsController extends Controller {
+  static targets = ["inline"];
 
-    event.dataTransfer.setData("text/html", this.templateTarget.innerHTML);
-    event.dataTransfer.effectAllowed = "copy";
+  connect() {
+    this.form.addEventListener("mousemove", this.move);
+  }
+
+  disconnect() {
+    this.form?.removeEventListener("mousemove", this.move);
+    delete this.currentItem;
+  }
+
+  open(e) {
+    e.preventDefault();
+    this.dialog.showModal();
+  }
+
+  close(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  noop(e) {}
+
+  /**
+   * Add the selected item to the DOM at the current position or the end of the list.
+   */
+  add(e) {
+    e.preventDefault();
+
+    const template = e.target.closest("li").querySelector("template");
+    const item = template.content.querySelector("li").cloneNode(true);
+    const target = this.currentItem;
+
+    if (target) {
+      target.insertAdjacentElement("beforebegin", item);
+    } else {
+      this.list.insertAdjacentElement("beforeend", item);
+    }
+
+    this.toggleInline(false);
+    this.dialog.close();
+
+    requestAnimationFrame(() => {
+      item.querySelector(`[value="edit"]`).click();
+    });
+  }
+
+  morph(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  move = (e) => {
+    if (this.isOverInlineTarget(e)) return;
+    if (this.dialog.open) return;
+
+    const target = this.getCurrentItem(e);
+
+    // return if we're already showing this item
+    if (this.currentItem === target) return;
+
+    // hide the button if it's already visible
+    if (this.currentItem) this.toggleInline(false);
+
+    this.currentItem = target;
+
+    // clear any previously set timer
+    if (this.timer) clearTimeout(this.timer);
+
+    // show the button after a debounce pause
+    this.timer = setTimeout(() => {
+      delete this.timer;
+      this.toggleInline();
+    }, 100);
+  };
+
+  toggleInline(show = !!this.currentItem) {
+    if (show) {
+      this.inlineTarget.style.top = `${this.currentItem.offsetTop}px`;
+      this.inlineTarget.toggleAttribute("hidden", false);
+    } else {
+      this.inlineTarget.toggleAttribute("hidden", true);
+    }
+  }
+
+  get dialog() {
+    return this.element.querySelector("dialog");
+  }
+
+  /**
+   * @returns {HTMLFormElement}
+   */
+  get form() {
+    return this.element.closest("form");
+  }
+
+  /**
+   * @returns {HTMLUListElement,null}
+   */
+  get list() {
+    return this.form.querySelector(`[data-controller="content--editor--list"]`);
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @returns {HTMLLIElement,null}
+   */
+  getCurrentItem(e) {
+    const item = document.elementFromPoint(e.clientX, e.clientY).closest("li");
+    if (!item) return null;
+
+    const bounds = item.getBoundingClientRect();
+
+    // check X for center(ish) mouse position
+    if (e.clientX < bounds.left + bounds.width / 2 - 2 * EDGE_AREA) return null;
+    if (e.clientX > bounds.left + bounds.width / 2 + 2 * EDGE_AREA) return null;
+
+    // check Y for hits on this item or it's next sibling
+    if (e.clientY - bounds.y <= EDGE_AREA) {
+      return item;
+    } else if (bounds.y + bounds.height - e.clientY <= EDGE_AREA) {
+      return item.nextElementSibling;
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @returns {Boolean} true when the target of the event is the floating button
+   */
+  isOverInlineTarget(e) {
+    return (
+      this.inlineTarget ===
+      document.elementFromPoint(e.clientX, e.clientY).closest("div")
+    );
   }
 }
 
@@ -1194,13 +1288,17 @@ const Definitions = [
     identifier: "content--editor--item",
     controllerConstructor: ItemController,
   },
+  {
+    identifier: "content--editor--item-editor",
+    controllerConstructor: ItemEditorController,
+  },
   {
     identifier: "content--editor--list",
     controllerConstructor: ListController,
   },
   {
-    identifier: "content--editor--new-item",
-    controllerConstructor: NewItemController,
+    identifier: "content--editor--new-items",
+    controllerConstructor: NewItemsController,
   },
   {
     identifier: "content--editor--status-bar",

data/app/assets/builds/katalyst/content.min.js

@@ -1,2 +1,2 @@
-import{Controller as t}from"@hotwired/stimulus";import"trix";class e{static comparator(t,e){return t.index-e.index}constructor(t){this.node=t}get itemId(){return this.node.dataset.contentItemId}get#t(){return this.node.querySelector('input[name$="[id]"]')}set itemId(t){this.itemId!==t&&(this.node.dataset.contentItemId=`${t}`,this.#t.value=`${t}`)}get depth(){return parseInt(this.node.dataset.contentDepth)||0}get#e(){return this.node.querySelector('input[name$="[depth]"]')}set depth(t){this.depth!==t&&(this.node.dataset.contentDepth=`${t}`,this.#e.value=`${t}`)}get index(){return parseInt(this.node.dataset.contentIndex)}get#n(){return this.node.querySelector('input[name$="[index]"]')}set index(t){this.index!==t&&(this.node.dataset.contentIndex=`${t}`,this.#n.value=`${t}`)}get isLayout(){return this.node.hasAttribute("data-content-layout")}get previousItem(){let t=this.node.previousElementSibling;if(t)return new e(t)}get nextItem(){let t=this.node.nextElementSibling;if(t)return new e(t)}hasCollapsedDescendants(){let t=this.#i;return!!t&&t.children.length>0}hasExpandedDescendants(){let t=this.nextItem;return!!t&&t.depth>this.depth}traverse(t){const e=this.#s;t(this),this.#r(t),e.forEach((e=>e.#r(t)))}#r(t){this.hasCollapsedDescendants()&&this.#a.forEach((e=>{t(e),e.#r(t)}))}collapseChild(t){this.#i.appendChild(t.node)}collapse(){let t=this.#i;t||(t=function(t){const e=document.createElement("ol");return e.setAttribute("class","hidden"),e.dataset.contentChildren="",t.appendChild(e),e}(this.node)),this.#s.forEach((e=>t.appendChild(e.node)))}expand(){this.hasCollapsedDescendants()&&Array.from(this.#i.children).reverse().forEach((t=>{this.node.insertAdjacentElement("afterend",t)}))}toggleRule(t,e=!1){this.node.dataset.hasOwnProperty(t)&&!e&&delete this.node.dataset[t],!this.node.dataset.hasOwnProperty(t)&&e&&(this.node.dataset[t]=""),"denyDrag"===t&&(this.node.hasAttribute("draggable")||e||this.node.setAttribute("draggable","true"),this.node.hasAttribute("draggable")&&e&&this.node.removeAttribute("draggable"))}hasItemIdChanged(){return!(this.#t.value===this.itemId)}updateAfterChange(){this.itemId=this.#t.value,this.#n.value=this.index,this.#e.value=this.depth}get#i(){return this.node.querySelector(":scope > [data-content-children]")}get#s(){const t=[];let e=this.nextItem;for(;e&&e.depth>this.depth;)t.push(e),e=e.nextItem;return t}get#a(){return this.hasCollapsedDescendants()?Array.from(this.#i.children).map((t=>new e(t))):[]}}class n{constructor(t){this.node=t}get items(){return t=this.node.querySelectorAll("[data-content-index]"),Array.from(t).map((t=>new e(t)));var t}get state(){const t=this.node.querySelectorAll("li input[type=hidden]");return Array.from(t).map((t=>t.value)).join("/")}reindex(){this.items.map(((t,e)=>t.index=e))}reset(){this.items.sort(e.comparator).forEach((t=>{this.node.appendChild(t.node)}))}}class i{static rules=["denyDeNest","denyNest","denyCollapse","denyExpand","denyRemove","denyDrag","denyEdit"];constructor(t=!1){this.debug=t?(...t)=>console.log(...t):()=>{}}normalize(t){this.firstItemDepthZero(t),this.depthMustBeSet(t),this.itemCannotHaveInvalidDepth(t),this.parentMustBeLayout(t),this.parentCannotHaveExpandedAndCollapsedChildren(t)}update(t){this.rules={},this.parentsCannotDeNest(t),this.rootsCannotDeNest(t),this.onlyLastItemCanDeNest(t),this.nestingNeedsParent(t),this.leavesCannotCollapse(t),this.needHiddenItemsToExpand(t),this.parentsCannotBeDeleted(t),this.parentsCannotBeDragged(t),i.rules.forEach((e=>{t.toggleRule(e,!!this.rules[e])}))}firstItemDepthZero(t){0===t.index&&0!==t.depth&&(this.debug(`enforce depth on item ${t.index}: ${t.depth} => 0`),t.depth=0)}depthMustBeSet(t){(isNaN(t.depth)||t.depth<0)&&(this.debug(`unset depth on item ${t.index}: => 0`),t.depth=0)}itemCannotHaveInvalidDepth(t){const e=t.previousItem;e&&e.depth<t.depth-1&&(this.debug(`invalid depth on item ${t.index}: ${t.depth} => ${e.depth+1}`),t.depth=e.depth+1)}parentMustBeLayout(t){const e=t.previousItem;e&&e.depth<t.depth&&!e.isLayout&&(this.debug(`invalid parent for item ${t.index}: ${t.depth} => ${e.depth}`),t.depth=e.depth)}parentCannotHaveExpandedAndCollapsedChildren(t){t.hasCollapsedDescendants()&&t.hasExpandedDescendants()&&(this.debug(`expanding collapsed children of item ${t.index}`),t.expand())}parentsCannotDeNest(t){t.hasExpandedDescendants()&&this.#o("denyDeNest")}rootsCannotDeNest(t){0===t.depth&&this.#o("denyDeNest")}onlyLastItemCanDeNest(t){const e=t.nextItem;e&&e.depth===t.depth&&!t.isLayout&&this.#o("denyDeNest")}leavesCannotCollapse(t){t.hasExpandedDescendants()||this.#o("denyCollapse")}needHiddenItemsToExpand(t){t.hasCollapsedDescendants()||this.#o("denyExpand")}nestingNeedsParent(t){const e=t.previousItem;e?e.depth<t.depth?this.#o("denyNest"):e.depth!==t.depth||e.isLayout||this.#o("denyNest"):this.#o("denyNest")}parentsCannotBeDeleted(t){t.itemId&&!t.hasExpandedDescendants()||this.#o("denyRemove")}parentsCannotBeDragged(t){t.hasExpandedDescendants()&&this.#o("denyDrag")}#o(t){this.rules[t]=!0}}function s(t){return new e(t.target.closest("[data-content-item]"))}function r(t,e){if(t&&t!==e){if("LI"===t.nodeName){const n=t.compareDocumentPosition(e);n&Node.DOCUMENT_POSITION_FOLLOWING?t.insertAdjacentElement("beforebegin",e):n&Node.DOCUMENT_POSITION_PRECEDING&&t.insertAdjacentElement("afterend",e)}"OL"===t.nodeName&&t.appendChild(e)}}function a(t){return t&&(t.closest("[data-controller='content--editor--list'] > *")||t.closest("[data-controller='content--editor--list']"))}const o=window.Trix;o.config.blockAttributes.heading4={tagName:"h4",terminal:!0,breakOnReturn:!0,group:!1},delete o.config.blockAttributes.heading1;o.config.toolbar.getDefaultHTML=()=>{const{lang:t}=o.config;return`\n<div class="trix-button-row">\n  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="${t.bold}" tabindex="-1">${t.bold}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="${t.italic}" tabindex="-1">${t.italic}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="${t.strike}" tabindex="-1">${t.strike}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="${t.link}" tabindex="-1">${t.link}</button>\n  </span>\n  <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-attribute="heading4" title="${t.heading1}" tabindex="-1">${t.heading1}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" title="${t.quote}" tabindex="-1">${t.quote}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" title="${t.code}" tabindex="-1">${t.code}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="${t.bullets}" tabindex="-1">${t.bullets}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="${t.numbers}" tabindex="-1">${t.numbers}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level" data-trix-action="decreaseNestingLevel" title="${t.outdent}" tabindex="-1">${t.outdent}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" title="${t.indent}" tabindex="-1">${t.indent}</button>\n  </span>\n  <span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" title="${t.attachFiles}" tabindex="-1">${t.attachFiles}</button>\n  </span>\n  <span class="trix-button-group-spacer"></span>\n  <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="${t.undo}" tabindex="-1">${t.undo}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="${t.redo}" tabindex="-1">${t.redo}</button>\n  </span>\n</div>\n<div class="trix-dialogs" data-trix-dialogs>\n  <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">\n    <div class="trix-dialog__link-fields">\n      <input type="text" name="href" pattern="(https?|mailto:|tel:|/|#).*?" class="trix-input trix-input--dialog" placeholder="${t.urlPlaceholder}" aria-label="${t.url}" required data-trix-input>\n      <div class="trix-button-group">\n        <input type="button" class="trix-button trix-button--dialog" value="${t.link}" data-trix-method="setAttribute">\n        <input type="button" class="trix-button trix-button--dialog" value="${t.unlink}" data-trix-method="removeAttribute">\n      </div>\n    </div>\n  </div>\n</div>\n`},document.querySelectorAll("trix-toolbar").forEach((t=>{t.innerHTML=o.config.toolbar.getDefaultHTML()}));const d=[{identifier:"content--editor--container",controllerConstructor:class extends t{static targets=["container"];connect(){this.state=this.container.state,this.reindex()}get container(){return new n(this.containerTarget)}reindex(){this.container.reindex(),this.#d()}reset(){this.container.reset()}drop(t){this.container.reindex();const e=s(t),n=e.previousItem;let i=0;i=void 0===n?-e.depth:n.isLayout&&e.nextItem&&e.nextItem.depth>n.depth?n.depth-e.depth+1:n.depth-e.depth,e.traverse((t=>{t.depth+=i})),this.#d(),t.preventDefault()}remove(t){s(t).node.remove(),this.#d(),t.preventDefault()}nest(t){s(t).traverse((t=>{t.depth+=1})),this.#d(),t.preventDefault()}deNest(t){s(t).traverse((t=>{t.depth-=1})),this.#d(),t.preventDefault()}collapse(t){s(t).collapse(),this.#d(),t.preventDefault()}expand(t){s(t).expand(),this.#d(),t.preventDefault()}#d(){this.updateRequested=!0,setTimeout((()=>{if(!this.updateRequested)return;this.updateRequested=!1;const t=new i;this.container.items.forEach((e=>t.normalize(e))),this.container.items.forEach((e=>t.update(e))),this.#l()}),0)}#l(){this.dispatch("change",{bubbles:!0,prefix:"content",detail:{dirty:this.#u()}})}#u(){return this.container.state!==this.state}}},{identifier:"content--editor--item",controllerConstructor:class extends t{get item(){return new e(this.li)}get ol(){return this.element.closest("ol")}get li(){return this.element.closest("li")}connect(){this.element.dataset.hasOwnProperty("delete")?this.remove():this.item.index>=0?this.item.hasItemIdChanged()&&(this.item.updateAfterChange(),this.reindex()):this.reindex()}remove(){this.ol,this.li.remove(),this.reindex()}reindex(){this.dispatch("reindex",{bubbles:!0,prefix:"content"})}}},{identifier:"content--editor--list",controllerConstructor:class extends t{connect(){this.enterCount=0}dragstart(t){if(this.element!==t.target.parentElement)return;const e=t.target;t.dataTransfer.effectAllowed="move",requestAnimationFrame((()=>e.dataset.dragging=""))}dragover(t){const e=this.dragItem;if(e)return r(a(t.target),e),t.preventDefault(),!0}dragenter(t){if(t.preventDefault(),this.enterCount++,function(t){return"copy"===t.dataTransfer.effectAllowed||"copyMove"===t.dataTransfer.effectAllowed}(t)&&!this.dragItem){const t=document.createElement("li");t.dataset.dragging="",t.dataset.newItem="",this.element.appendChild(t)}}dragleave(t){this.enterCount--,this.enterCount<=0&&this.dragItem?.dataset.hasOwnProperty("newItem")&&(this.dragItem.remove(),this.reset())}drop(t){let e=this.dragItem;if(e){if(t.preventDefault(),delete e.dataset.dragging,r(a(t.target),e),e.dataset.hasOwnProperty("newItem")){const n=e,i=document.createElement("template");i.innerHTML=t.dataTransfer.getData("text/html"),e=i.content.querySelector("li"),this.element.replaceChild(e,n),requestAnimationFrame((()=>e.querySelector("[role='button'][value='edit']").click()))}this.dispatch("drop",{target:e,bubbles:!0,prefix:"content"})}}dragend(){const t=this.dragItem;t&&(t.dataset.hasOwnProperty("newItem")?t.remove():(delete t.dataset.dragging,this.reset()))}get isDragging(){return!!this.dragItem}get dragItem(){return this.element.querySelector("[data-dragging]")}reindex(){this.dispatch("reindex",{bubbles:!0,prefix:"content"})}reset(){this.dispatch("reset",{bubbles:!0,prefix:"content"})}}},{identifier:"content--editor--new-item",controllerConstructor:class extends t{static targets=["template"];dragstart(t){this.element===t.target&&(t.dataTransfer.setData("text/html",this.templateTarget.innerHTML),t.dataTransfer.effectAllowed="copy")}}},{identifier:"content--editor--status-bar",controllerConstructor:class extends t{connect(){this.versionState=this.element.dataset.state}morph(t){t.target===this.element&&(this.versionState=this.element.dataset.state,this.update({dirty:!1}))}change(t){t.detail&&t.detail.hasOwnProperty("dirty")&&this.update(t.detail)}update({dirty:t}){this.element.dataset.state=t?"dirty":this.versionState}}},{identifier:"content--editor--table",controllerConstructor:class extends t{static targets=["input","update"];constructor(t){super(t),this.observer=new MutationObserver(this.change)}connect(){const t=document.createElement("TEMPLATE");t.innerHTML='\n<div class="content--editor--table-editor"\n   contenteditable="true"\n   data-content--editor--table-target="content"\n   data-action="paste->content--editor--table#paste"\n   id="item-content-field">\n</div>',this.content=t.content.firstElementChild,this.content.innerHTML=this.inputTarget.value,this.content.className+=` ${this.inputTarget.className}`,this.inputTarget.insertAdjacentElement("beforebegin",this.content),this.inputTarget.hidden=!0,this.observer.observe(this.content,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}disconnect(){this.observer.disconnect(),this.content.remove(),delete this.content}change=t=>{this.inputTarget.value=this.table?.outerHTML};update=()=>{this.updateTarget.click()};paste=t=>{-1!==t.clipboardData.getData("text/html").indexOf("<table")&&(t.preventDefault(),this.inputTarget.value=t.clipboardData.getData("text/html"),this.update())};get table(){return this.content.querySelector("table")}}},{identifier:"content--editor--trix",controllerConstructor:class extends t{trixInitialize(t){this.element.addEventListener("turbo:before-morph-attribute",this.suppressMorph),this.element.addEventListener("turbo:before-morph-element",this.suppressMorph),this.element.toolbarElement&&(this.element.toolbarElement.addEventListener("turbo:before-morph-attribute",this.suppressMorph),this.element.toolbarElement.addEventListener("turbo:before-morph-element",this.suppressMorph))}disconnect(){this.element.removeEventListener("turbo:before-morph-attribute",this.suppressMorph),this.element.removeEventListener("turbo:before-morph-element",this.suppressMorph),this.element.toolbarElement&&(this.element.toolbarElement.removeEventListener("turbo:before-morph-attribute",this.suppressMorph),this.element.toolbarElement.removeEventListener("turbo:before-morph-element",this.suppressMorph))}suppressMorph=t=>{"TRIX-EDITOR"!==t.target.tagName&&"TRIX-TOOLBAR"!==t.target.tagName||t.preventDefault()}}}];export{d as default};
+import{Controller as t}from"@hotwired/stimulus";import"trix";class e{static comparator(t,e){return t.index-e.index}constructor(t){this.node=t}get itemId(){return this.node.dataset.contentItemId}get#t(){return this.node.querySelector('input[name$="[id]"]')}set itemId(t){this.itemId!==t&&(this.node.dataset.contentItemId=`${t}`,this.#t.value=`${t}`)}get depth(){return parseInt(this.node.dataset.contentDepth)||0}get#e(){return this.node.querySelector('input[name$="[depth]"]')}set depth(t){this.depth!==t&&(this.node.dataset.contentDepth=`${t}`,this.#e.value=`${t}`)}get index(){return parseInt(this.node.dataset.contentIndex)}get#n(){return this.node.querySelector('input[name$="[index]"]')}set index(t){this.index!==t&&(this.node.dataset.contentIndex=`${t}`,this.#n.value=`${t}`)}get isLayout(){return this.node.hasAttribute("data-content-layout")}get previousItem(){let t=this.node.previousElementSibling;if(t)return new e(t)}get nextItem(){let t=this.node.nextElementSibling;if(t)return new e(t)}hasCollapsedDescendants(){let t=this.#i;return!!t&&t.children.length>0}hasExpandedDescendants(){let t=this.nextItem;return!!t&&t.depth>this.depth}traverse(t){const e=this.#s;t(this),this.#r(t),e.forEach((e=>e.#r(t)))}#r(t){this.hasCollapsedDescendants()&&this.#o.forEach((e=>{t(e),e.#r(t)}))}collapseChild(t){this.#i.appendChild(t.node)}collapse(){let t=this.#i;t||(t=function(t){const e=document.createElement("ol");return e.toggleAttribute("hidden",!0),e.dataset.contentChildren="",t.appendChild(e),e}(this.node)),this.#s.forEach((e=>t.appendChild(e.node)))}expand(){this.hasCollapsedDescendants()&&Array.from(this.#i.children).reverse().forEach((t=>{this.node.insertAdjacentElement("afterend",t)}))}toggleRule(t,e=!1){this.node.dataset.hasOwnProperty(t)&&!e&&delete this.node.dataset[t],!this.node.dataset.hasOwnProperty(t)&&e&&(this.node.dataset[t]=""),"denyDrag"===t&&(this.node.hasAttribute("draggable")||e||this.node.setAttribute("draggable","true"),this.node.hasAttribute("draggable")&&e&&this.node.removeAttribute("draggable"))}hasItemIdChanged(){return!(this.#t.value===this.itemId)}updateAfterChange(){this.itemId=this.#t.value,this.#n.value=this.index,this.#e.value=this.depth}get#i(){return this.node.querySelector(":scope > [data-content-children]")}get#s(){const t=[];let e=this.nextItem;for(;e&&e.depth>this.depth;)t.push(e),e=e.nextItem;return t}get#o(){return this.hasCollapsedDescendants()?Array.from(this.#i.children).map((t=>new e(t))):[]}}class n{constructor(t){this.node=t}get items(){return t=this.node.querySelectorAll("[data-content-index]"),Array.from(t).map((t=>new e(t)));var t}get state(){const t=this.node.querySelectorAll("li input[type=hidden]");return Array.from(t).map((t=>t.value)).join("/")}reindex(){this.items.map(((t,e)=>t.index=e))}reset(){this.items.sort(e.comparator).forEach((t=>{this.node.appendChild(t.node)}))}}class i{static rules=["denyDeNest","denyNest","denyCollapse","denyExpand","denyRemove","denyDrag","denyEdit"];constructor(t=!1){this.debug=t?(...t)=>console.log(...t):()=>{}}normalize(t){this.firstItemDepthZero(t),this.depthMustBeSet(t),this.itemCannotHaveInvalidDepth(t),this.parentMustBeLayout(t),this.parentCannotHaveExpandedAndCollapsedChildren(t)}update(t){this.rules={},this.parentsCannotDeNest(t),this.rootsCannotDeNest(t),this.onlyLastItemCanDeNest(t),this.nestingNeedsParent(t),this.leavesCannotCollapse(t),this.needHiddenItemsToExpand(t),this.parentsCannotBeDeleted(t),this.parentsCannotBeDragged(t),i.rules.forEach((e=>{t.toggleRule(e,!!this.rules[e])}))}firstItemDepthZero(t){0===t.index&&0!==t.depth&&(this.debug(`enforce depth on item ${t.index}: ${t.depth} => 0`),t.depth=0)}depthMustBeSet(t){(isNaN(t.depth)||t.depth<0)&&(this.debug(`unset depth on item ${t.index}: => 0`),t.depth=0)}itemCannotHaveInvalidDepth(t){const e=t.previousItem;e&&e.depth<t.depth-1&&(this.debug(`invalid depth on item ${t.index}: ${t.depth} => ${e.depth+1}`),t.depth=e.depth+1)}parentMustBeLayout(t){const e=t.previousItem;e&&e.depth<t.depth&&!e.isLayout&&(this.debug(`invalid parent for item ${t.index}: ${t.depth} => ${e.depth}`),t.depth=e.depth)}parentCannotHaveExpandedAndCollapsedChildren(t){t.hasCollapsedDescendants()&&t.hasExpandedDescendants()&&(this.debug(`expanding collapsed children of item ${t.index}`),t.expand())}parentsCannotDeNest(t){t.hasExpandedDescendants()&&this.#a("denyDeNest")}rootsCannotDeNest(t){0===t.depth&&this.#a("denyDeNest")}onlyLastItemCanDeNest(t){const e=t.nextItem;e&&e.depth===t.depth&&!t.isLayout&&this.#a("denyDeNest")}leavesCannotCollapse(t){t.hasExpandedDescendants()||this.#a("denyCollapse")}needHiddenItemsToExpand(t){t.hasCollapsedDescendants()||this.#a("denyExpand")}nestingNeedsParent(t){const e=t.previousItem;e?e.depth<t.depth?this.#a("denyNest"):e.depth!==t.depth||e.isLayout||this.#a("denyNest"):this.#a("denyNest")}parentsCannotBeDeleted(t){t.itemId&&!t.hasExpandedDescendants()||this.#a("denyRemove")}parentsCannotBeDragged(t){t.hasExpandedDescendants()&&this.#a("denyDrag")}#a(t){this.rules[t]=!0}}function s(t){return new e(t.target.closest("[data-content-item]"))}function r(t,e){if(!t)return;if(t===e)return;const n=t.compareDocumentPosition(e);n&Node.DOCUMENT_POSITION_FOLLOWING?t.insertAdjacentElement("beforebegin",e):n&Node.DOCUMENT_POSITION_PRECEDING&&t.insertAdjacentElement("afterend",e)}function o(t){return t&&t.closest("[data-controller='content--editor--list'] > *")}const a=window.Trix;a.config.blockAttributes.heading4={tagName:"h4",terminal:!0,breakOnReturn:!0,group:!1},delete a.config.blockAttributes.heading1;a.config.toolbar.getDefaultHTML=()=>{const{lang:t}=a.config;return`\n<div class="trix-button-row">\n  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="${t.bold}" tabindex="-1">${t.bold}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="${t.italic}" tabindex="-1">${t.italic}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="${t.strike}" tabindex="-1">${t.strike}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="${t.link}" tabindex="-1">${t.link}</button>\n  </span>\n  <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-attribute="heading4" title="${t.heading1}" tabindex="-1">${t.heading1}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" title="${t.quote}" tabindex="-1">${t.quote}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" title="${t.code}" tabindex="-1">${t.code}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="${t.bullets}" tabindex="-1">${t.bullets}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="${t.numbers}" tabindex="-1">${t.numbers}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level" data-trix-action="decreaseNestingLevel" title="${t.outdent}" tabindex="-1">${t.outdent}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" title="${t.indent}" tabindex="-1">${t.indent}</button>\n  </span>\n  <span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" title="${t.attachFiles}" tabindex="-1">${t.attachFiles}</button>\n  </span>\n  <span class="trix-button-group-spacer"></span>\n  <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="${t.undo}" tabindex="-1">${t.undo}</button>\n    <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="${t.redo}" tabindex="-1">${t.redo}</button>\n  </span>\n</div>\n<div class="trix-dialogs" data-trix-dialogs>\n  <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">\n    <div class="trix-dialog__link-fields">\n      <input type="text" name="href" pattern="(https?|mailto:|tel:|/|#).*?" class="trix-input trix-input--dialog" placeholder="${t.urlPlaceholder}" aria-label="${t.url}" required data-trix-input>\n      <div class="trix-button-group">\n        <input type="button" class="trix-button trix-button--dialog" value="${t.link}" data-trix-method="setAttribute">\n        <input type="button" class="trix-button trix-button--dialog" value="${t.unlink}" data-trix-method="removeAttribute">\n      </div>\n    </div>\n  </div>\n</div>\n`},document.querySelectorAll("trix-toolbar").forEach((t=>{t.innerHTML=a.config.toolbar.getDefaultHTML()}));const d=[{identifier:"content--editor--container",controllerConstructor:class extends t{static targets=["container"];connect(){this.state=this.container.state,this.reindex()}get container(){return new n(this.containerTarget)}reindex(){this.container.reindex(),this.#d()}reset(){this.container.reset()}drop(t){this.container.reindex();const e=s(t),n=e.previousItem;let i=0;i=void 0===n?-e.depth:n.isLayout&&e.nextItem&&e.nextItem.depth>n.depth?n.depth-e.depth+1:n.depth-e.depth,e.traverse((t=>{t.depth+=i})),this.#d(),t.preventDefault()}remove(t){s(t).node.remove(),this.#d(),t.preventDefault()}nest(t){s(t).traverse((t=>{t.depth+=1})),this.#d(),t.preventDefault()}deNest(t){s(t).traverse((t=>{t.depth-=1})),this.#d(),t.preventDefault()}collapse(t){s(t).collapse(),this.#d(),t.preventDefault()}expand(t){s(t).expand(),this.#d(),t.preventDefault()}#d(){this.updateRequested=!0,setTimeout((()=>{if(!this.updateRequested)return;this.updateRequested=!1;const t=new i;this.container.items.forEach((e=>t.normalize(e))),this.container.items.forEach((e=>t.update(e))),this.#l()}),0)}#l(){this.dispatch("change",{bubbles:!0,prefix:"content",detail:{dirty:this.#u()}})}#u(){return this.container.state!==this.state}}},{identifier:"content--editor--item",controllerConstructor:class extends t{get item(){return new e(this.li)}get ol(){return this.element.closest("ol")}get li(){return this.element.closest("li")}connect(){this.element.dataset.hasOwnProperty("delete")?this.remove():this.item.index>=0?this.item.hasItemIdChanged()&&(this.item.updateAfterChange(),this.reindex()):this.reindex()}remove(){this.ol,this.li.remove(),this.reindex()}reindex(){this.dispatch("reindex",{bubbles:!0,prefix:"content"})}}},{identifier:"content--editor--item-editor",controllerConstructor:class extends t{static targets=["dialog"];connect(){this.element.addEventListener("turbo:submit-end",this.onSubmit)}disconnect(){this.element.removeEventListener("turbo:submit-end",this.onSubmit)}dismiss(){this.dialogTarget&&(this.dialogTarget.open||this.dialogTarget.close(),"itemPersisted"in this.dialogTarget.dataset||this.#h(),this.element.removeAttribute("src"),this.dialogTarget.remove())}dialogTargetConnected(t){t.showModal()}onSubmit=t=>{t.detail.success&&"closeDialog"in t.detail.formSubmission?.submitter?.dataset&&(this.dialogTarget.close(),this.element.removeAttribute("src"),this.dialogTarget.remove())};noop(){}#h(){const t=document.getElementById(this.dialogTarget.dataset.itemId),n=new e(t.closest("[data-content-item]")),i=n.node.parentElement;n.node.remove(),this.dispatch("reindex",{target:i,bubbles:!0,prefix:"content"})}}},{identifier:"content--editor--list",controllerConstructor:class extends t{dragstart(t){if(this.element!==t.target.parentElement)return;const e=t.target;t.dataTransfer.effectAllowed="move",requestAnimationFrame((()=>e.dataset.dragging=""))}dragover(t){const e=this.dragItem;if(e)return r(o(t.target),e),t.preventDefault(),!0}drop(t){let e=this.dragItem;e&&(t.preventDefault(),delete e.dataset.dragging,r(o(t.target),e),this.dispatch("drop",{target:e,bubbles:!0,prefix:"content"}))}dragend(){const t=this.dragItem;t&&(delete t.dataset.dragging,this.reset())}get isDragging(){return!!this.dragItem}get dragItem(){return this.element.querySelector("[data-dragging]")}reindex(){this.dispatch("reindex",{bubbles:!0,prefix:"content"})}reset(){this.dispatch("reset",{bubbles:!0,prefix:"content"})}}},{identifier:"content--editor--new-items",controllerConstructor:class extends t{static targets=["inline"];connect(){this.form.addEventListener("mousemove",this.move)}disconnect(){this.form?.removeEventListener("mousemove",this.move),delete this.currentItem}open(t){t.preventDefault(),this.dialog.showModal()}close(t){t.preventDefault(),this.dialog.close()}noop(t){}add(t){t.preventDefault();const e=t.target.closest("li").querySelector("template").content.querySelector("li").cloneNode(!0),n=this.currentItem;n?n.insertAdjacentElement("beforebegin",e):this.list.insertAdjacentElement("beforeend",e),this.toggleInline(!1),this.dialog.close(),requestAnimationFrame((()=>{e.querySelector('[value="edit"]').click()}))}morph(t){t.preventDefault(),this.dialog.close()}move=t=>{if(this.isOverInlineTarget(t))return;if(this.dialog.open)return;const e=this.getCurrentItem(t);this.currentItem!==e&&(this.currentItem&&this.toggleInline(!1),this.currentItem=e,this.timer&&clearTimeout(this.timer),this.timer=setTimeout((()=>{delete this.timer,this.toggleInline()}),100))};toggleInline(t=!!this.currentItem){t?(this.inlineTarget.style.top=`${this.currentItem.offsetTop}px`,this.inlineTarget.toggleAttribute("hidden",!1)):this.inlineTarget.toggleAttribute("hidden",!0)}get dialog(){return this.element.querySelector("dialog")}get form(){return this.element.closest("form")}get list(){return this.form.querySelector('[data-controller="content--editor--list"]')}getCurrentItem(t){const e=document.elementFromPoint(t.clientX,t.clientY).closest("li");if(!e)return null;const n=e.getBoundingClientRect();return t.clientX<n.left+n.width/2-48||t.clientX>n.left+n.width/2+48?null:t.clientY-n.y<=24?e:n.y+n.height-t.clientY<=24?e.nextElementSibling:null}isOverInlineTarget(t){return this.inlineTarget===document.elementFromPoint(t.clientX,t.clientY).closest("div")}}},{identifier:"content--editor--status-bar",controllerConstructor:class extends t{connect(){this.versionState=this.element.dataset.state}morph(t){t.target===this.element&&(this.versionState=this.element.dataset.state,this.update({dirty:!1}))}change(t){t.detail&&t.detail.hasOwnProperty("dirty")&&this.update(t.detail)}update({dirty:t}){this.element.dataset.state=t?"dirty":this.versionState}}},{identifier:"content--editor--table",controllerConstructor:class extends t{static targets=["input","update"];constructor(t){super(t),this.observer=new MutationObserver(this.change)}connect(){const t=document.createElement("TEMPLATE");t.innerHTML='\n<div class="content--editor--table-editor"\n   contenteditable="true"\n   data-content--editor--table-target="content"\n   data-action="paste->content--editor--table#paste"\n   id="item-content-field">\n</div>',this.content=t.content.firstElementChild,this.content.innerHTML=this.inputTarget.value,this.content.className+=` ${this.inputTarget.className}`,this.inputTarget.insertAdjacentElement("beforebegin",this.content),this.inputTarget.hidden=!0,this.observer.observe(this.content,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}disconnect(){this.observer.disconnect(),this.content.remove(),delete this.content}change=t=>{this.inputTarget.value=this.table?.outerHTML};update=()=>{this.updateTarget.click()};paste=t=>{-1!==t.clipboardData.getData("text/html").indexOf("<table")&&(t.preventDefault(),this.inputTarget.value=t.clipboardData.getData("text/html"),this.update())};get table(){return this.content.querySelector("table")}}},{identifier:"content--editor--trix",controllerConstructor:class extends t{trixInitialize(t){this.element.addEventListener("turbo:before-morph-attribute",this.suppressMorph),this.element.addEventListener("turbo:before-morph-element",this.suppressMorph),this.element.toolbarElement&&(this.element.toolbarElement.addEventListener("turbo:before-morph-attribute",this.suppressMorph),this.element.toolbarElement.addEventListener("turbo:before-morph-element",this.suppressMorph))}disconnect(){this.element.removeEventListener("turbo:before-morph-attribute",this.suppressMorph),this.element.removeEventListener("turbo:before-morph-element",this.suppressMorph),this.element.toolbarElement&&(this.element.toolbarElement.removeEventListener("turbo:before-morph-attribute",this.suppressMorph),this.element.toolbarElement.removeEventListener("turbo:before-morph-element",this.suppressMorph))}suppressMorph=t=>{"TRIX-EDITOR"!==t.target.tagName&&"TRIX-TOOLBAR"!==t.target.tagName||t.preventDefault()}}}];export{d as default};
 //# sourceMappingURL=content.min.js.map