katalyst-content 0.1.2 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 15c10b4886c26310eb6a15c64f9b3c31b1b2dc312d9b4088bf530e6610ec3599
-  data.tar.gz: 2dd1d7e5179ff4d9f53d66b8ea99cd3d19f497e078d6234da4c8525e13a25ba1
+  metadata.gz: 5d759a4e97d9609138eba1c1d03ad9a081cc1badb65be59b5b200a23665909e7
+  data.tar.gz: 848034cbe45b3fb9c0550bd452c5424cccdf5c4a7e4e9b819abaef0bed9b24a3
 SHA512:
-  metadata.gz: 89a50df67af76c48e7978be76eee21da5100a8bf7fb69c6f580dc1868f4f644300f7d782b7cab61c2897717577e1cf4cc865a8b1f437c7d559c9b321f66b0bf0
-  data.tar.gz: c5dbc2983e3438642f38a58351010f7b110715ed865fb5851f1c43d4e8801a8c5a0e9bc0e371f5555cad72c976a3fc53d1bbc88cb6efc260d9403f1d0751f26c
+  metadata.gz: 64f111753041dd647e73d863e011b23c3507cb930dcac40dd55f991d422802896cc6d515e998adf31be3a07962a38ac8b22e16490b3a56fcb3638441bd8d5d26
+  data.tar.gz: 24e97c6e52f38944a1947b50cb09347c3e5ebd457bcdb7bff0aff70aeac8412ed0a1ba8cfc85606d26886f30499c3981c4d4de414d2651c38d08f4104b362e79

data/app/assets/javascripts/controllers/content/editor/container_controller.js

@@ -6,9 +6,6 @@ import RulesEngine from "utils/content/editor/rules-engine";
 
 export default class ContainerController extends Controller {
   static targets = ["container"];
-  static values = {
-    maxDepth: Number,
-  };
 
   connect() {
     this.state = this.container.state;
@@ -29,6 +26,36 @@ export default class ContainerController extends Controller {
     this.container.reset();
   }
 
+  drop(event) {
+    this.container.reindex(); // set indexes before calculating previous
+
+    const item = getEventItem(event);
+    const previous = item.previousItem;
+
+    let delta = 0;
+    if (previous === undefined) {
+      // if previous does not exist, set depth to 0
+      delta = -item.depth;
+    } else if (
+      previous.isLayout &&
+      item.nextItem &&
+      item.nextItem.depth > previous.depth
+    ) {
+      // if previous is a layout and next is a child of previous, make item a child of previous
+      delta = previous.depth - item.depth + 1;
+    } else {
+      // otherwise, make item a sibling of previous
+      delta = previous.depth - item.depth;
+    }
+
+    item.traverse((child) => {
+      child.depth += delta;
+    });
+
+    this.#update();
+    event.preventDefault();
+  }
+
   remove(event) {
     const item = getEventItem(event);
 
@@ -41,7 +68,9 @@ export default class ContainerController extends Controller {
   nest(event) {
     const item = getEventItem(event);
 
-    item.nest();
+    item.traverse((child) => {
+      child.depth += 1;
+    });
 
     this.#update();
     event.preventDefault();
@@ -50,7 +79,9 @@ export default class ContainerController extends Controller {
   deNest(event) {
     const item = getEventItem(event);
 
-    item.deNest();
+    item.traverse((child) => {
+      child.depth -= 1;
+    });
 
     this.#update();
     event.preventDefault();
@@ -84,7 +115,8 @@ export default class ContainerController extends Controller {
       if (!this.updateRequested) return;
 
       this.updateRequested = false;
-      const engine = new RulesEngine(this.maxDepthValue);
+      const engine = new RulesEngine();
+      this.container.items.forEach((item) => engine.normalize(item));
       this.container.items.forEach((item) => engine.update(item));
 
       this.#notifyChange();

data/app/assets/javascripts/controllers/content/editor/list_controller.js

@@ -46,7 +46,7 @@ export default class ListController extends Controller {
   }
 
   drop(event) {
-    const item = this.dragItem();
+    let item = this.dragItem();
 
     if (!item) return;
 
@@ -55,17 +55,18 @@ export default class ListController extends Controller {
     swap(this.dropTarget(event.target), item);
 
     if (item.dataset.hasOwnProperty("newItem")) {
+      const placeholder = item;
       const template = document.createElement("template");
       template.innerHTML = event.dataTransfer.getData("text/html");
-      const newItem = template.content.querySelector("li");
+      item = template.content.querySelector("li");
 
-      this.element.replaceChild(newItem, item);
+      this.element.replaceChild(item, placeholder);
       setTimeout(() =>
-        newItem.querySelector("[role='button'][value='edit']").click()
+        item.querySelector("[role='button'][value='edit']").click()
       );
     }
 
-    this.reindex();
+    this.dispatch("drop", { target: item, bubbles: true, prefix: "content" });
   }
 
   dragend() {

data/app/assets/javascripts/controllers/content/editor/trix_controller.js

@@ -0,0 +1,88 @@
+import { Controller } from "@hotwired/stimulus";
+import Trix from "trix";
+
+// Stimulus controller doesn't do anything, but having one ensures that trix
+// will be lazy loaded when a trix-editor is added to the dom.
+export default class TrixController extends Controller {
+  trixInitialize(e) {
+    // noop, useful as an extension point for registering behaviour on load
+  }
+}
+
+// Add H4 as an acceptable tag
+Trix.config.blockAttributes["heading4"] = {
+  tagName: "h4",
+  terminal: true,
+  breakOnReturn: true,
+  group: false,
+};
+
+// Remove H1 from trix list of acceptable tags
+delete Trix.config.blockAttributes.heading1;
+
+/**
+ * Allow users to enter path and fragment URIs which the input[type=url] browser
+ * input does not permit. Uses a permissive regex pattern which is not suitable
+ * for untrusted use cases.
+ */
+const LINK_PATTERN = "(https?|mailto:|tel:|/|#).*?";
+
+/**
+ * Customize default toolbar:
+ *
+ * * headings: h4 instead of h1
+ * * links: use type=text instead of type=url
+ *
+ * @returns {String} toolbar html fragment
+ */
+Trix.config.toolbar.getDefaultHTML = () => {
+  const { lang } = Trix.config;
+  return `
+<div class="trix-button-row">
+  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="${lang.bold}" tabindex="-1">${lang.bold}</button>
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="${lang.italic}" tabindex="-1">${lang.italic}</button>
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="${lang.strike}" tabindex="-1">${lang.strike}</button>
+    <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="${lang.link}" tabindex="-1">${lang.link}</button>
+  </span>
+  <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-attribute="heading4" title="${lang.heading1}" tabindex="-1">${lang.heading1}</button>
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" title="${lang.quote}" tabindex="-1">${lang.quote}</button>
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" title="${lang.code}" tabindex="-1">${lang.code}</button>
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="${lang.bullets}" tabindex="-1">${lang.bullets}</button>
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="${lang.numbers}" tabindex="-1">${lang.numbers}</button>
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level" data-trix-action="decreaseNestingLevel" title="${lang.outdent}" tabindex="-1">${lang.outdent}</button>
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" title="${lang.indent}" tabindex="-1">${lang.indent}</button>
+  </span>
+  <span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" title="${lang.attachFiles}" tabindex="-1">${lang.attachFiles}</button>
+  </span>
+  <span class="trix-button-group-spacer"></span>
+  <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="${lang.undo}" tabindex="-1">${lang.undo}</button>
+    <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="${lang.redo}" tabindex="-1">${lang.redo}</button>
+  </span>
+</div>
+<div class="trix-dialogs" data-trix-dialogs>
+  <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
+    <div class="trix-dialog__link-fields">
+      <input type="text" name="href" pattern="${LINK_PATTERN}" class="trix-input trix-input--dialog" placeholder="${lang.urlPlaceholder}" aria-label="${lang.url}" required data-trix-input>
+      <div class="trix-button-group">
+        <input type="button" class="trix-button trix-button--dialog" value="${lang.link}" data-trix-method="setAttribute">
+        <input type="button" class="trix-button trix-button--dialog" value="${lang.unlink}" data-trix-method="removeAttribute">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+};
+
+/**
+ * If the <trix-editor> element is in the HTML when Trix loads, then Trix will have already injected the toolbar content
+ * before our code gets a chance to run. Fix that now.
+ *
+ * Note: in Trix 2 this is likely to no longer be necessary.
+ */
+document.querySelectorAll("trix-toolbar").forEach((e) => {
+  e.innerHTML = Trix.config.toolbar.getDefaultHTML();
+});

data/app/assets/javascripts/utils/content/editor/item.js

@@ -80,6 +80,13 @@ export default class Item {
     this.#indexInput.value = `${index}`;
   }
 
+  /**
+   * @returns {boolean} true if this item can have children
+   */
+  get isLayout() {
+    return this.node.hasAttribute("data-content-layout");
+  }
+
   /**
    * @returns {Item} nearest neighbour (index - 1)
    */
@@ -120,26 +127,25 @@ export default class Item {
   traverse(callback) {
     // capture descendants before traversal in case of side-effects
     // specifically, setting depth affects calculation
-    const collapsed = this.#collapsedChildren;
     const expanded = this.#expandedDescendants;
 
     callback(this);
-    collapsed.forEach((item) => item.traverse(callback));
-    expanded.forEach((item) => item.traverse(callback));
+    this.#traverseCollapsed(callback);
+    expanded.forEach((item) => item.#traverseCollapsed(callback));
   }
 
   /**
-   * Increase the depth of this item and its descendants.
-   * If this causes it to become a child of a collapsed item, then collapse this item.
+   * Recursively traverse the node's collapsed descendants, if any.
+   *
+   * @callback {Item}
    */
-  nest() {
-    this.traverse((child) => {
-      child.depth += 1;
-    });
+  #traverseCollapsed(callback) {
+    if (!this.hasCollapsedDescendants()) return;
 
-    if (this.previousItem.hasCollapsedDescendants()) {
-      this.previousItem.collapseChild(this);
-    }
+    this.#collapsedDescendants.forEach((item) => {
+      callback(item);
+      item.#traverseCollapsed(callback);
+    });
   }
 
   /**
@@ -152,15 +158,6 @@ export default class Item {
     this.#childrenListElement.appendChild(item.node);
   }
 
-  /**
-   * Decrease the depth of this item (and its descendants).
-   */
-  deNest() {
-    this.traverse((child) => {
-      child.depth -= 1;
-    });
-  }
-
   /**
    * Collapses visible (logical) children into this element's hidden children
    * list, creating it if it doesn't already exist.
@@ -195,10 +192,12 @@ export default class Item {
    * @param deny {boolean}
    */
   toggleRule(rule, deny = false) {
-    if (this.node.dataset.hasOwnProperty(rule) && !deny)
+    if (this.node.dataset.hasOwnProperty(rule) && !deny) {
       delete this.node.dataset[rule];
-    if (!this.node.dataset.hasOwnProperty(rule) && deny)
+    }
+    if (!this.node.dataset.hasOwnProperty(rule) && deny) {
       this.node.dataset[rule] = "";
+    }
 
     if (rule === "denyDrag") {
       if (!this.node.hasAttribute("draggable") && !deny) {
@@ -238,6 +237,9 @@ export default class Item {
     return this.node.querySelector(`:scope > [data-content-children]`);
   }
 
+  /**
+   * @returns {Item[]} all items that follow this element that have a greater depth.
+   */
   get #expandedDescendants() {
     const descendants = [];
 
@@ -250,7 +252,10 @@ export default class Item {
     return descendants;
   }
 
-  get #collapsedChildren() {
+  /**
+   * @returns {Item[]} all items directly contained inside this element's hidden children element.
+   */
+  get #collapsedDescendants() {
     if (!this.hasCollapsedDescendants()) return [];
 
     return Array.from(this.#childrenListElement.children).map(

data/app/assets/javascripts/utils/content/editor/rules-engine.js

@@ -9,30 +9,42 @@ export default class RulesEngine {
     "denyEdit",
   ];
 
-  constructor(maxDepth = null) {
-    this.maxDepth = maxDepth;
+  constructor(debug = false) {
+    if (debug) {
+      this.debug = (...args) => console.log(...args);
+    } else {
+      this.debug = () => {};
+    }
   }
 
   /**
-   * Apply rules to the given item by computing a ruleset then merging it
-   * with the item's current state.
+   * Enforce structural rules to ensure that the given item is currently in a
+   * valid state.
    *
    * @param {Item} item
    */
-  update(item) {
-    this.rules = {};
-
+  normalize(item) {
     // structural rules enforce a valid tree structure
     this.firstItemDepthZero(item);
     this.depthMustBeSet(item);
     this.itemCannotHaveInvalidDepth(item);
-    this.itemCannotExceedDepthLimit(item);
+    this.parentMustBeLayout(item);
+    this.parentCannotHaveExpandedAndCollapsedChildren(item);
+  }
+
+  /**
+   * Apply rules to the given item to determine what operations are permitted.
+   *
+   * @param {Item} item
+   */
+  update(item) {
+    this.rules = {};
 
     // behavioural rules define what the user is allowed to do
     this.parentsCannotDeNest(item);
     this.rootsCannotDeNest(item);
+    this.onlyLastItemCanDeNest(item);
     this.nestingNeedsParent(item);
-    this.nestingCannotExceedMaxDepth(item);
     this.leavesCannotCollapse(item);
     this.needHiddenItemsToExpand(item);
     this.parentsCannotBeDeleted(item);
@@ -47,7 +59,9 @@ export default class RulesEngine {
    * First item can't have a parent, so its depth should always be 0
    */
   firstItemDepthZero(item) {
-    if (item.index === 0) {
+    if (item.index === 0 && item.depth !== 0) {
+      this.debug(`enforce depth on item ${item.index}: ${item.depth} => 0`);
+
       item.depth = 0;
     }
   }
@@ -59,6 +73,8 @@ export default class RulesEngine {
    */
   depthMustBeSet(item) {
     if (isNaN(item.depth) || item.depth < 0) {
+      this.debug(`unset depth on item ${item.index}: => 0`);
+
       item.depth = 0;
     }
   }
@@ -71,23 +87,44 @@ export default class RulesEngine {
   itemCannotHaveInvalidDepth(item) {
     const previous = item.previousItem;
     if (previous && previous.depth < item.depth - 1) {
+      this.debug(
+        `invalid depth on item ${item.index}: ${item.depth} => ${
+          previous.depth + 1
+        }`
+      );
+
       item.depth = previous.depth + 1;
     }
   }
 
   /**
-   * Depth must not exceed container's depth limit.
+   * Parent item, if any, must be a layout.
+   *
+   * @param {Item} item
+   */
+  parentMustBeLayout(item) {
+    // if we're the first child, make sure our parent is a layout
+    // if we're a sibling, we know the previous item is valid so we must be too
+    const previous = item.previousItem;
+    if (previous && previous.depth < item.depth && !previous.isLayout) {
+      this.debug(
+        `invalid parent for item ${item.index}: ${item.depth} => ${previous.depth}`
+      );
+
+      item.depth = previous.depth;
+    }
+  }
+
+  /**
+   * If a parent has expanded and collapsed children, expand.
    *
    * @param {Item} item
    */
-  itemCannotExceedDepthLimit(item) {
-    if (this.maxDepth > 0 && this.maxDepth <= item.depth) {
-      // Note: this change can cause an issue where the previous item is treated
-      // like a parent even though it no longer has children. This is because
-      // items are processed in order. This issue does not seem worth solving
-      // as it only occurs if the max depth is altered. The issue can be worked
-      // around by saving the container.
-      item.depth = this.maxDepth - 1;
+  parentCannotHaveExpandedAndCollapsedChildren(item) {
+    if (item.hasCollapsedDescendants() && item.hasExpandedDescendants()) {
+      this.debug(`expanding collapsed children of item ${item.index}`);
+
+      item.expand();
     }
   }
 
@@ -109,6 +146,17 @@ export default class RulesEngine {
     if (item.depth === 0) this.#deny("denyDeNest");
   }
 
+  /**
+   * De-nesting an item that has siblings would make it a container.
+   *
+   * @param {Item} item
+   */
+  onlyLastItemCanDeNest(item) {
+    const next = item.nextItem;
+    if (next && next.depth === item.depth && !item.isLayout)
+      this.#deny("denyDeNest");
+  }
+
   /**
    * If an item doesn't have children it can't be collapsed.
    *
@@ -134,18 +182,13 @@ export default class RulesEngine {
    */
   nestingNeedsParent(item) {
     const previous = item.previousItem;
-    if (!previous || previous.depth < item.depth) this.#deny("denyNest");
-  }
-
-  /**
-   * An item can't be nested (indented) if doing so would exceed the max depth.
-   *
-   * @param {Item} item
-   */
-  nestingCannotExceedMaxDepth(item) {
-    if (this.maxDepth > 0 && this.maxDepth <= item.depth + 1) {
+    // no previous, so cannot nest
+    if (!previous) this.#deny("denyNest");
+    // previous is too shallow, nesting would increase depth too much
+    else if (previous.depth < item.depth) this.#deny("denyNest");
+    // new parent is not a layout
+    else if (previous.depth === item.depth && !previous.isLayout)
       this.#deny("denyNest");
-    }
   }
 
   /**
@@ -154,7 +197,7 @@ export default class RulesEngine {
    * @param {Item} item
    */
   parentsCannotBeDeleted(item) {
-    if (item.hasExpandedDescendants()) this.#deny("denyRemove");
+    if (!item.itemId || item.hasExpandedDescendants()) this.#deny("denyRemove");
   }
 
   /**

data/app/assets/stylesheets/katalyst/content/editor/_figure.scss

@@ -0,0 +1,12 @@
+[data-controller="content--editor--image-field"] {
+  &.droppable {
+    box-shadow: inset 0 0 0 2px var(--icon-passive-color);
+    background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 33 31' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.973145' width='32' height='30' rx='4' fill='grey'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.9506 10.5053C24.135 10.5053 25.0951 9.45219 25.0951 8.15306C25.0951 6.85393 24.135 5.80078 22.9506 5.80078C21.7661 5.80078 20.806 6.85393 20.806 8.15306C20.806 9.45219 21.7661 10.5053 22.9506 10.5053ZM17.0148 24.7495H4.74196C3.97371 24.7495 3.49239 23.9192 3.87419 23.2526L12.0384 8.99711C12.4167 8.33644 13.3632 8.32137 13.7579 8.9724C15.0754 11.1453 17.647 15.3946 19.8661 19.1086L22.2245 14.9665C22.5814 14.3397 23.4295 14.3294 23.8331 14.9468L29.1963 23.1506C29.6434 23.8345 29.2201 24.7563 28.4534 24.7645L23.2119 24.8206L17.0148 24.7495Z' fill='%23F3F5F8'/%3E%3C/svg%3E");
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    > * {
+      visibility: hidden;
+    }
+  }
+}

data/app/assets/stylesheets/katalyst/content/editor/_index.scss

@@ -1,5 +1,6 @@
 @use "icon";
 
+@use "figure";
 @use "item-actions";
 @use "item-rules";
 @use "new-items";
@@ -159,7 +160,8 @@ $status-dirty-color: #aaa !default;
   --color: #{$status-published-border-color};
   --border: #{$status-published-color};
 
-  &[data-state="draft"] {
+  &[data-state="draft"],
+  &[data-state="unpublished"] {
     --background: #{$status-draft-background-color};
     --color: #{$status-draft-border-color};
     --border: #{$status-draft-color};
@@ -171,3 +173,7 @@ $status-dirty-color: #aaa !default;
     --border: #{$status-dirty-color};
   }
 }
+
+[data-controller="content--editor--image-field"] {
+  --icon-passive-color: #{$icon-passive-color};
+}

data/app/assets/stylesheets/katalyst/content/editor/_item-actions.scss

@@ -23,7 +23,7 @@
     }
   }
 
-  [role="img"][value="content"] {
+  [role="img"][title="Type"] {
     width: 1.5rem;
     height: 1.5rem;
     display: grid;
@@ -44,12 +44,30 @@
       line-height: 1.125rem;
       text-align: center;
     }
+  }
 
-    &[value="content"] {
-      &::before {
-        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.9 0C2.28667 0 0 2.28667 0 4.9C0 6.86 1.30667 8.82008 3.26667 9.47341V39.5266C1.30667 40.1799 0 42.14 0 44.1C0 46.7133 2.28667 49 4.9 49C6.86 49 8.82 47.6933 9.47333 45.7333H39.5267C40.18 47.6933 42.14 49 44.1 49C46.7133 49 49 46.7133 49 44.1C49 42.14 47.6933 40.1799 45.7333 39.5266V9.47341C47.6933 8.82008 49 6.86 49 4.9C49 2.28667 46.7133 0 44.1 0C42.14 0 40.18 1.30667 39.5267 3.26667H9.47333C8.82 1.30667 7.18667 0 4.9 0ZM4.9 3.26667C5.88 3.26667 6.53333 3.92 6.53333 4.9C6.53333 5.88 5.88 6.53333 4.9 6.53333C3.92 6.53333 3.26667 5.88 3.26667 4.9C3.26667 3.92 3.92 3.26667 4.9 3.26667ZM44.1 3.26667C45.08 3.26667 45.7333 3.92 45.7333 4.9C45.7333 5.88 45.08 6.53333 44.1 6.53333C43.12 6.53333 42.4667 5.88 42.4667 4.9C42.4667 3.92 43.12 3.26667 44.1 3.26667ZM9.47333 6.53333H39.5267C40.18 7.84 41.16 9.14675 42.4667 9.47341V39.5266C41.16 40.1799 39.8533 41.16 39.5267 42.4667H9.47333C8.82 41.16 7.84 39.8533 6.53333 39.5266V9.47341C7.84 8.82008 8.82 7.84 9.47333 6.53333ZM4.9 42.4667C5.88 42.4667 6.53333 43.12 6.53333 44.1C6.53333 45.08 5.88 45.7333 4.9 45.7333C3.92 45.7333 3.26667 45.08 3.26667 44.1C3.26667 43.12 3.92 42.4667 4.9 42.4667ZM44.1 42.4667C45.08 42.4667 45.7333 43.12 45.7333 44.1C45.7333 45.08 45.08 45.7333 44.1 45.7333C43.12 45.7333 42.4667 45.08 42.4667 44.1C42.4667 43.12 43.12 42.4667 44.1 42.4667Z' fill='white'/%3E%3Cpath d='M13 19.1667V11H35.8667V19.1667H32.6V14.2667H26.0667V33.8667H29.3333V37.1333H19.5333V33.8667H22.8V14.2667H16.2667V19.1667H13Z' fill='white'/%3E%3C/svg%3E");
-      }
-    }
+  [role="img"][value="content"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.9 0C2.28667 0 0 2.28667 0 4.9C0 6.86 1.30667 8.82008 3.26667 9.47341V39.5266C1.30667 40.1799 0 42.14 0 44.1C0 46.7133 2.28667 49 4.9 49C6.86 49 8.82 47.6933 9.47333 45.7333H39.5267C40.18 47.6933 42.14 49 44.1 49C46.7133 49 49 46.7133 49 44.1C49 42.14 47.6933 40.1799 45.7333 39.5266V9.47341C47.6933 8.82008 49 6.86 49 4.9C49 2.28667 46.7133 0 44.1 0C42.14 0 40.18 1.30667 39.5267 3.26667H9.47333C8.82 1.30667 7.18667 0 4.9 0ZM4.9 3.26667C5.88 3.26667 6.53333 3.92 6.53333 4.9C6.53333 5.88 5.88 6.53333 4.9 6.53333C3.92 6.53333 3.26667 5.88 3.26667 4.9C3.26667 3.92 3.92 3.26667 4.9 3.26667ZM44.1 3.26667C45.08 3.26667 45.7333 3.92 45.7333 4.9C45.7333 5.88 45.08 6.53333 44.1 6.53333C43.12 6.53333 42.4667 5.88 42.4667 4.9C42.4667 3.92 43.12 3.26667 44.1 3.26667ZM9.47333 6.53333H39.5267C40.18 7.84 41.16 9.14675 42.4667 9.47341V39.5266C41.16 40.1799 39.8533 41.16 39.5267 42.4667H9.47333C8.82 41.16 7.84 39.8533 6.53333 39.5266V9.47341C7.84 8.82008 8.82 7.84 9.47333 6.53333ZM4.9 42.4667C5.88 42.4667 6.53333 43.12 6.53333 44.1C6.53333 45.08 5.88 45.7333 4.9 45.7333C3.92 45.7333 3.26667 45.08 3.26667 44.1C3.26667 43.12 3.92 42.4667 4.9 42.4667ZM44.1 42.4667C45.08 42.4667 45.7333 43.12 45.7333 44.1C45.7333 45.08 45.08 45.7333 44.1 45.7333C43.12 45.7333 42.4667 45.08 42.4667 44.1C42.4667 43.12 43.12 42.4667 44.1 42.4667Z' fill='white'/%3E%3Cpath d='M13 19.1667V11H35.8667V19.1667H32.6V14.2667H26.0667V33.8667H29.3333V37.1333H19.5333V33.8667H22.8V14.2667H16.2667V19.1667H13Z' fill='white'/%3E%3C/svg%3E");
+  }
+
+  [role="img"][value="figure"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H56C60.4183 0 64 3.8205 64 8.53333V55.4667C64 60.1795 60.4183 64 56 64H8C3.58172 64 0 60.1795 0 55.4667V8.53333C0 3.8205 3.58172 0 8 0ZM48.8131 18.4523C48.8131 20.9113 46.9782 22.9045 44.7145 22.9045C42.4507 22.9045 40.6158 20.9113 40.6158 18.4523C40.6158 15.9934 42.4507 14 44.7145 14C46.9782 14 48.8131 15.9934 48.8131 18.4523ZM9.91404 49.8654H33.37L45.2139 50L55.2315 49.8938C56.6969 49.8783 57.5059 48.1335 56.6514 46.8391L46.4012 31.3112C45.6298 30.1427 44.0089 30.1621 43.3268 31.3485L38.8194 39.1885C34.5783 32.1588 29.6634 24.1159 27.1454 20.0031C26.391 18.7709 24.5821 18.7994 23.8591 20.0499L8.25556 47.0321C7.52586 48.2939 8.44576 49.8654 9.91404 49.8654Z' fill='white'/%3E%3C/svg%3E");
+  }
+
+  [role="img"][value="section"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 64 64' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M61.4263 64H58.8525C57.4799 64 56.2788 62.8021 56.2788 61.4332C56.2788 60.0642 57.4799 58.8663 58.8525 58.8663C58.8525 57.4973 60.0536 56.2995 61.4263 56.2995C62.7989 56.2995 64 57.4973 64 58.8663V61.4332C64 62.8021 62.9705 64 61.4263 64Z'/%3E%3Cpath d='M49.244 64H44.4397C43.067 64 41.866 62.8021 41.866 61.4332C41.866 60.0642 43.067 58.8663 44.4397 58.8663H49.244C50.6166 58.8663 51.8177 60.0642 51.8177 61.4332C51.8177 62.8021 50.6166 64 49.244 64ZM34.4879 64H29.6836C28.311 64 27.1099 62.8021 27.1099 61.4332C27.1099 60.0642 28.311 58.8663 29.6836 58.8663H34.4879C35.8606 58.8663 37.0617 60.0642 37.0617 61.4332C37.0617 62.8021 35.8606 64 34.4879 64ZM19.9035 64H14.9276C13.555 64 12.3539 62.8021 12.3539 61.4332C12.3539 60.0642 13.555 58.8663 14.9276 58.8663H19.7319C21.1046 58.8663 22.3056 60.0642 22.3056 61.4332C22.3056 62.8021 21.2761 64 19.9035 64Z'/%3E%3Cpath d='M5.14745 64H2.57372C1.20106 64 0 62.8021 0 61.4332V58.8663C0 57.4973 1.20106 56.2995 2.57372 56.2995C3.94637 56.2995 5.14745 57.4973 5.14745 58.8663C6.5201 58.8663 7.72117 60.0642 7.72117 61.4332C7.72117 62.8021 6.69168 64 5.14745 64Z'/%3E%3Cpath d='M2.57372 51.6791C1.20106 51.6791 0 50.4813 0 49.1123V44.3209C0 42.9519 1.20106 41.754 2.57372 41.754C3.94637 41.754 5.14745 42.9519 5.14745 44.3209V49.1123C5.14745 50.4813 4.11795 51.6791 2.57372 51.6791ZM2.57372 36.9626C1.20106 36.9626 0 35.7647 0 34.3957V29.6043C0 28.2353 1.20106 27.0375 2.57372 27.0375C3.94637 27.0375 5.14745 28.2353 5.14745 29.6043V34.3957C5.14745 35.9358 4.11795 36.9626 2.57372 36.9626ZM2.57372 22.4171C1.20106 22.4171 0 21.2193 0 19.8503V14.8877C0 13.5187 1.20106 12.3209 2.57372 12.3209C3.94637 12.3209 5.14745 13.5187 5.14745 14.8877V19.6792C5.14745 21.2193 4.11795 22.4171 2.57372 22.4171Z'/%3E%3Cpath d='M2.57372 7.70053C1.20106 7.70053 0 6.50267 0 5.13369V2.56684C0 1.19786 1.20106 0 2.57372 0H5.14745C6.5201 0 7.72117 1.19786 7.72117 2.56684C7.72117 3.93582 6.5201 5.13369 5.14745 5.13369C5.14745 6.67379 4.11795 7.70053 2.57372 7.70053Z'/%3E%3Cpath d='M49.244 5.13369H44.4397C43.067 5.13369 41.866 3.93583 41.866 2.56684C41.866 1.19786 43.067 0 44.4397 0H49.244C50.6166 0 51.8177 1.19786 51.8177 2.56684C51.8177 3.93583 50.6166 5.13369 49.244 5.13369ZM34.4879 5.13369H29.6836C28.311 5.13369 27.1099 3.93583 27.1099 2.56684C27.1099 1.19786 28.311 0 29.6836 0H34.4879C35.8606 0 37.0617 1.19786 37.0617 2.56684C37.0617 3.93583 35.8606 5.13369 34.4879 5.13369ZM19.9035 5.13369H14.9276C13.555 5.13369 12.3539 3.93583 12.3539 2.56684C12.3539 1.19786 13.555 0 14.9276 0H19.7319C21.1046 0 22.3056 1.19786 22.3056 2.56684C22.3056 3.93583 21.2761 5.13369 19.9035 5.13369Z'/%3E%3Cpath d='M61.4263 7.70053C60.0536 7.70053 58.8525 6.50267 58.8525 5.13369C57.4799 5.13369 56.2788 3.93582 56.2788 2.56684C56.2788 1.19786 57.4799 0 58.8525 0H61.4263C62.7989 0 64 1.19786 64 2.56684V5.13369C64 6.67379 62.9705 7.70053 61.4263 7.70053Z'/%3E%3Cpath d='M61.4263 51.6791C60.0536 51.6791 58.8525 50.4813 58.8525 49.1123V44.3209C58.8525 42.9519 60.0536 41.754 61.4263 41.754C62.7989 41.754 64 42.9519 64 44.3209V49.1123C64 50.4813 62.9705 51.6791 61.4263 51.6791ZM61.4263 36.9626C60.0536 36.9626 58.8525 35.7647 58.8525 34.3957V29.6043C58.8525 28.2353 60.0536 27.0375 61.4263 27.0375C62.7989 27.0375 64 28.2353 64 29.6043V34.3957C64 35.9358 62.9705 36.9626 61.4263 36.9626ZM61.4263 22.4171C60.0536 22.4171 58.8525 21.2193 58.8525 19.8503V14.8877C58.8525 13.5187 60.0536 12.3209 61.4263 12.3209C62.7989 12.3209 64 13.5187 64 14.8877V19.6792C64 21.2193 62.9705 22.4171 61.4263 22.4171Z'/%3E%3Cpath d='M35.5982 38.4425C35.5982 37.7506 35.4524 37.1641 35.1609 36.6828C34.8693 36.2015 34.3465 35.7654 33.5925 35.3743C32.8385 34.9833 31.7678 34.5872 30.3804 34.1861C29.2946 33.8753 28.3143 33.5244 27.4397 33.1333C26.5751 32.7323 25.8311 32.2761 25.2078 31.7647C24.5845 31.2533 24.1069 30.6668 23.7751 30.005C23.4434 29.3432 23.2775 28.5862 23.2775 27.7339C23.2775 26.5909 23.5841 25.5732 24.1974 24.6808C24.8207 23.7784 25.6904 23.0715 26.8063 22.5601C27.9223 22.0388 29.2292 21.7781 30.7272 21.7781C32.3861 21.7781 33.7936 22.0939 34.9497 22.7256C36.1059 23.3472 36.9856 24.1644 37.5888 25.1771C38.192 26.1798 38.4936 27.2527 38.4936 28.3957H35.553C35.553 27.5735 35.377 26.8416 35.0251 26.1999C34.6833 25.5581 34.1555 25.0568 33.4417 24.6958C32.7279 24.3249 31.8231 24.1394 30.7272 24.1394C29.7017 24.1394 28.8522 24.2948 28.1786 24.6056C27.5151 24.9164 27.0225 25.3376 26.7007 25.869C26.379 26.4004 26.2182 27.007 26.2182 27.6888C26.2182 28.3005 26.3941 28.8469 26.746 29.3282C27.0979 29.7994 27.6508 30.2256 28.4048 30.6066C29.1589 30.9876 30.1341 31.3486 31.3304 31.6895C32.9893 32.1507 34.3515 32.6871 35.4172 33.2988C36.4829 33.9104 37.2671 34.6323 37.7698 35.4646C38.2825 36.2968 38.5389 37.2794 38.5389 38.4124C38.5389 39.5956 38.2222 40.6283 37.5888 41.5107C36.9554 42.393 36.0657 43.0748 34.9196 43.5561C33.7735 44.0374 32.4263 44.278 30.878 44.278C29.8626 44.278 28.8623 44.1377 27.877 43.8569C26.9018 43.5762 26.0121 43.1551 25.2078 42.5936C24.4135 42.0321 23.7751 41.3402 23.2926 40.518C22.82 39.6858 22.5838 38.7232 22.5838 37.6303H25.5094C25.5094 38.3823 25.6552 39.0291 25.9467 39.5705C26.2383 40.1119 26.6354 40.5581 27.1381 40.9091C27.6408 41.26 28.2138 41.5207 28.8572 41.6912C29.5007 41.8516 30.1743 41.9318 30.878 41.9318C31.8934 41.9318 32.748 41.7914 33.4417 41.5107C34.1454 41.2199 34.6783 40.8138 35.0402 40.2924C35.4122 39.771 35.5982 39.1544 35.5982 38.4425Z'/%3E%3C/svg%3E%0A");
+  }
+
+  [role="img"][value="group"]:before {
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 64 64' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M61.4263 64H58.8525C57.4799 64 56.2788 62.8021 56.2788 61.4332C56.2788 60.0642 57.4799 58.8663 58.8525 58.8663C58.8525 57.4973 60.0536 56.2995 61.4263 56.2995C62.7989 56.2995 64 57.4973 64 58.8663V61.4332C64 62.8021 62.9705 64 61.4263 64Z' /%3E%3Cpath d='M49.244 64H44.4397C43.067 64 41.866 62.8021 41.866 61.4332C41.866 60.0642 43.067 58.8663 44.4397 58.8663H49.244C50.6166 58.8663 51.8177 60.0642 51.8177 61.4332C51.8177 62.8021 50.6166 64 49.244 64ZM34.4879 64H29.6836C28.311 64 27.1099 62.8021 27.1099 61.4332C27.1099 60.0642 28.311 58.8663 29.6836 58.8663H34.4879C35.8606 58.8663 37.0617 60.0642 37.0617 61.4332C37.0617 62.8021 35.8606 64 34.4879 64ZM19.9035 64H14.9276C13.555 64 12.3539 62.8021 12.3539 61.4332C12.3539 60.0642 13.555 58.8663 14.9276 58.8663H19.7319C21.1046 58.8663 22.3056 60.0642 22.3056 61.4332C22.3056 62.8021 21.2761 64 19.9035 64Z' /%3E%3Cpath d='M5.14745 64H2.57372C1.20106 64 0 62.8021 0 61.4332V58.8663C0 57.4973 1.20106 56.2995 2.57372 56.2995C3.94637 56.2995 5.14745 57.4973 5.14745 58.8663C6.5201 58.8663 7.72117 60.0642 7.72117 61.4332C7.72117 62.8021 6.69168 64 5.14745 64Z' /%3E%3Cpath d='M2.57372 51.6791C1.20106 51.6791 0 50.4813 0 49.1123V44.3209C0 42.9519 1.20106 41.754 2.57372 41.754C3.94637 41.754 5.14745 42.9519 5.14745 44.3209V49.1123C5.14745 50.4813 4.11795 51.6791 2.57372 51.6791ZM2.57372 36.9626C1.20106 36.9626 0 35.7647 0 34.3957V29.6043C0 28.2353 1.20106 27.0375 2.57372 27.0375C3.94637 27.0375 5.14745 28.2353 5.14745 29.6043V34.3957C5.14745 35.9358 4.11795 36.9626 2.57372 36.9626ZM2.57372 22.4171C1.20106 22.4171 0 21.2193 0 19.8503V14.8877C0 13.5187 1.20106 12.3209 2.57372 12.3209C3.94637 12.3209 5.14745 13.5187 5.14745 14.8877V19.6792C5.14745 21.2193 4.11795 22.4171 2.57372 22.4171Z' /%3E%3Cpath d='M2.57372 7.70053C1.20106 7.70053 0 6.50267 0 5.13369V2.56684C0 1.19786 1.20106 0 2.57372 0H5.14745C6.5201 0 7.72117 1.19786 7.72117 2.56684C7.72117 3.93583 6.5201 5.13369 5.14745 5.13369C5.14745 6.67379 4.11795 7.70053 2.57372 7.70053Z' /%3E%3Cpath d='M49.244 5.13369H44.4397C43.067 5.13369 41.866 3.93583 41.866 2.56684C41.866 1.19786 43.067 0 44.4397 0H49.244C50.6166 0 51.8177 1.19786 51.8177 2.56684C51.8177 3.93583 50.6166 5.13369 49.244 5.13369ZM34.4879 5.13369H29.6836C28.311 5.13369 27.1099 3.93583 27.1099 2.56684C27.1099 1.19786 28.311 0 29.6836 0H34.4879C35.8606 0 37.0617 1.19786 37.0617 2.56684C37.0617 3.93583 35.8606 5.13369 34.4879 5.13369ZM19.9035 5.13369H14.9276C13.555 5.13369 12.3539 3.93583 12.3539 2.56684C12.3539 1.19786 13.555 0 14.9276 0H19.7319C21.1046 0 22.3056 1.19786 22.3056 2.56684C22.3056 3.93583 21.2761 5.13369 19.9035 5.13369Z' /%3E%3Cpath d='M61.4263 7.70053C60.0536 7.70053 58.8525 6.50267 58.8525 5.13369C57.4799 5.13369 56.2788 3.93583 56.2788 2.56684C56.2788 1.19786 57.4799 0 58.8525 0H61.4263C62.7989 0 64 1.19786 64 2.56684V5.13369C64 6.67379 62.9705 7.70053 61.4263 7.70053Z' /%3E%3Cpath d='M61.4263 51.6791C60.0536 51.6791 58.8525 50.4813 58.8525 49.1123V44.3209C58.8525 42.9519 60.0536 41.754 61.4263 41.754C62.7989 41.754 64 42.9519 64 44.3209V49.1123C64 50.4813 62.9705 51.6791 61.4263 51.6791ZM61.4263 36.9626C60.0536 36.9626 58.8525 35.7647 58.8525 34.3957V29.6043C58.8525 28.2353 60.0536 27.0375 61.4263 27.0375C62.7989 27.0375 64 28.2353 64 29.6043V34.3957C64 35.9358 62.9705 36.9626 61.4263 36.9626ZM61.4263 22.4171C60.0536 22.4171 58.8525 21.2193 58.8525 19.8503V14.8877C58.8525 13.5187 60.0536 12.3209 61.4263 12.3209C62.7989 12.3209 64 13.5187 64 14.8877V19.6792C64 21.2193 62.9705 22.4171 61.4263 22.4171Z' /%3E%3Cpath d='M40.1374 39.3934C39.866 39.7844 39.4337 40.2306 38.8405 40.7319C38.2574 41.2232 37.443 41.6544 36.3975 42.0254C35.3619 42.3863 34.0198 42.5668 32.371 42.5668C30.5915 42.5668 29.008 42.1557 27.6206 41.3335C26.2433 40.5113 25.1625 39.3232 24.3784 37.769C23.5942 36.2149 23.2021 34.3499 23.2021 32.1741V30.4445C23.2021 28.2687 23.5439 26.4087 24.2275 24.8646C24.9112 23.3105 25.9065 22.1223 27.2135 21.3001C28.5305 20.4779 30.1341 20.0668 32.0241 20.0668C33.7031 20.0668 35.1106 20.3576 36.2467 20.9392C37.3827 21.5107 38.2674 22.3028 38.9008 23.3155C39.5442 24.3282 39.9564 25.4813 40.1374 26.7747H37.2118C37.0811 25.9826 36.8197 25.2607 36.4276 24.6089C36.0456 23.9472 35.4977 23.4208 34.7839 23.0297C34.07 22.6287 33.1552 22.4281 32.0392 22.4281C30.682 22.4281 29.566 22.754 28.6914 23.4057C27.8267 24.0474 27.1833 24.9649 26.7611 26.1581C26.3489 27.3513 26.1428 28.77 26.1428 30.4144V32.1741C26.1428 33.8586 26.4042 35.3025 26.9269 36.5057C27.4497 37.6988 28.1786 38.6163 29.1136 39.258C30.0486 39.8997 31.1394 40.2206 32.3861 40.2206C33.4216 40.2206 34.256 40.1353 34.8894 39.9649C35.5328 39.7844 36.0355 39.5738 36.3975 39.3332C36.7594 39.0825 37.0359 38.8469 37.2269 38.6263V33.6932H32.1599V31.3619H40.1374V39.3934Z' /%3E%3C/svg%3E%0A");
+  }
+
+  [role="img"][value="column"]:before {
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 64 64' fill='none' stroke='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='12' width='26' height='44' stroke-width='4' /%3E%3Crect x='32' y='12' width='26' height='44' stroke-width='4' /%3E%3C/svg%3E");
+  }
+
+  [role="img"][value="aside"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 64 64' fill='none' stroke='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='12' width='36' height='44' stroke-width='4' /%3E%3Crect x='42' y='12' width='16' height='44' stroke-width='4' /%3E%3C/svg%3E");
   }
 
   [role="img"][value="invisible"] {